disable foods

src/app/[name]/(Main)/[id]/page.tsx

@@ -6,6 +6,7 @@ import PlusIcon from "@/components/icons/PlusIcon";
 import { toast, toastLoginRequired } from "@/components/Toast";
 import { getToken } from "@/lib/api/func";
 import { ef } from "@/lib/helpers/utfNumbers";
+import clsx from "clsx";
 import { motion } from "framer-motion";
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
 import { useParams, useRouter } from "next/navigation";
@@ -36,9 +37,8 @@ function FoodPage({}: Props) {
   }, [items, foodId]);
 
   const handleAddToCart = () => {
-    if (foodId) {
-      addToCart(foodId);
-    }
+    if (!foodId || food?.data?.isAvailable === false) return;
+    addToCart(foodId);
   };
 
   const handleRemoveFromCart = () => {
@@ -97,6 +97,7 @@ function FoodPage({}: Props) {
   }
 
   const foodData = food.data;
+  const isAvailable = foodData.isAvailable !== false;
   const foodName = foodData.title || foodData.name || foodData.foodName || "";
   const foodImage =
     typeof foodData.image === "string"
@@ -128,7 +129,12 @@ function FoodPage({}: Props) {
   };
 
   return (
-    <div className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-22 lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl">
+    <div
+      className={clsx(
+        "not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-22 lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl",
+        !isAvailable && "opacity-50",
+      )}
+    >
       <div className="relative w-full  lg:h-full min-h-0 not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
@@ -224,13 +230,14 @@ function FoodPage({}: Props) {
         <div className="mt-12 lg:mt-0 shrink-0 flex justify-between items-center">
           <span dir="ltr">{ef(price.toLocaleString("en-US"))} T</span>
           <motion.div
-            whileTap={{ scale: 1.05 }}
+            whileTap={isAvailable ? { scale: 1.05 } : undefined}
             className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
           >
             {quantity <= 0 ? (
               <button
                 onClick={handleAddToCart}
-                className="inline-flex w-full justify-center items-center gap-2"
+                disabled={!isAvailable}
+                className="inline-flex w-full justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-40"
               >
                 <PlusIcon />
                 <div className="text-sm2 pt-0.5 font-normal text-foreground">
@@ -241,7 +248,8 @@ function FoodPage({}: Props) {
               <>
                 <button
                   onClick={handleAddToCart}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
+                  disabled={!isAvailable}
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-40 disabled:pointer-events-none"
                 >
                   <PlusIcon className="text-foreground" />
                 </button>

src/app/[name]/(Main)/types/Types.ts

@@ -45,6 +45,8 @@ export interface Food {
   pickupServe: boolean;
   discount: number;
   isSpecialOffer: boolean;
+  isAvailable: boolean;
+  unavailabilityMessage: string | null;
 }
 
 /** جزئیات کامل یک غذا (endpoint تکی) */
@@ -71,6 +73,8 @@ export interface FoodDetail {
   score: number;
   discount: number;
   isSpecialOffer: boolean;
+  isAvailable: boolean;
+  unavailabilityMessage: string | null;
   reviews: unknown[];
   favorites: unknown[];
   isFavorite: boolean;

src/app/[name]/(Profile)/favorite/page.tsx

@@ -36,6 +36,8 @@ function FavoritePage() {
                 pickupServe: favoriteFood.pickupServe,
                 discount: favoriteFood.discount,
                 isSpecialOffer: favoriteFood.isSpecialOffer,
+                isAvailable: true,
+                unavailabilityMessage: null,
             }
             return food
         })

src/components/listview/MenuItem.tsx

@@ -5,6 +5,7 @@ import { useCart } from "@/app/[name]/(Main)/cart/hook/useCart";
 import type { Food, FoodImage } from "@/app/[name]/(Main)/types/Types";
 import MinusIcon from "@/components/icons/MinusIcon";
 import PlusIcon from "@/components/icons/PlusIcon";
+import clsx from "clsx";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -86,7 +87,10 @@ const MenuItem = ({ food }: MenuItemProps) => {
 
   const hasDiscount = useMemo(() => (food.discount || 0) > 0, [food.discount]);
 
+  const isAvailable = food.isAvailable !== false;
+
   const handleAddToCart = () => {
+    if (!isAvailable) return;
     addToCart(food.id);
   };
 
@@ -97,7 +101,12 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const foodDetailUrl = `/${name}/${food.id}?category=${food.category}`;
 
   return (
-    <div className="flex gap-4 w-full h-full items-center">
+    <div
+      className={clsx(
+        "flex gap-4 w-full h-full items-center",
+        !isAvailable && "opacity-50",
+      )}
+    >
       <Link href={foodDetailUrl} className="cursor-pointer">
         <img
           className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 max-h-28 object-cover"
@@ -140,13 +149,14 @@ const MenuItem = ({ food }: MenuItemProps) => {
             )}
           </div>
           <motion.div
-            whileTap={{ scale: 1.05 }}
+            whileTap={isAvailable ? { scale: 1.05 } : undefined}
             className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
           >
             {quantity <= 0 ? (
               <button
                 onClick={handleAddToCart}
-                className="inline-flex w-full justify-center items-center gap-2"
+                disabled={!isAvailable}
+                className="inline-flex w-full justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-40"
               >
                 <PlusIcon />
                 <div className="text-sm2 pt-0.5 font-normal text-foreground">
@@ -157,7 +167,8 @@ const MenuItem = ({ food }: MenuItemProps) => {
               <>
                 <button
                   onClick={handleAddToCart}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
+                  disabled={!isAvailable}
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-40 disabled:pointer-events-none"
                 >
                   <PlusIcon className="text-foreground" />
                 </button>