online cart

src/components/listview/MenuItem.tsx

@@ -4,18 +4,28 @@ import { memo, useMemo } from "react";
 import Image from "next/image";
 import PlusIcon from "@/components/icons/PlusIcon";
 import MinusIcon from "@/components/icons/MinusIcon";
-import { useReceiptStore } from "@/zustand/receiptStore";
+import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
 import { motion } from "framer-motion";
 import type { Food } from "@/app/[name]/(Main)/types/Types";
+import { Refresh } from "iconsax-react";
+import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
+
 interface MenuItemProps {
   food: Food;
 }
 
 const MenuItem = ({ food }: MenuItemProps) => {
+  const { isSuccess } = useGetProfile();
+  const { items, addToCart, removeFromCart, isItemLoading } = useCart();
+  const isLoading = isItemLoading(food.id);
 
-  const quantity = useReceiptStore(state => state.items[food.id]?.quantity || 0);
-  const increment = useReceiptStore(state => state.increment);
-  const decrement = useReceiptStore(state => state.decrement);
+  const quantity = useMemo(() => {
+    const item = items?.[food.id];
+    if (item && typeof item === 'object' && 'quantity' in item) {
+      return item.quantity || 0;
+    }
+    return 0;
+  }, [items, food.id]);
 
   const fallbackImage = "/assets/images/food-preview.png";
   const resolvedImage = useMemo(() => {
@@ -28,17 +38,37 @@ const MenuItem = ({ food }: MenuItemProps) => {
     return fallbackImage;
   }, [food.image, food.images]);
 
-  const foodName = food.name || food.title || food.foodName || 'بدون نام';
-  const foodDescription = food.description || food.desc || food.content || '';
+  const foodName = useMemo(
+    () => food.name || food.title || food.foodName || 'بدون نام',
+    [food.name, food.title, food.foodName]
+  );
+
+  const foodDescription = useMemo(
+    () => food.description || food.desc || food.content || '',
+    [food.description, food.desc, food.content]
+  );
+
+  const formattedPrice = useMemo(
+    () => (food.price ? food.price.toLocaleString('fa-IR') : '0'),
+    [food.price]
+  );
+
+  const handleAddToCart = () => {
+    addToCart(food.id);
+  };
+
+  const handleRemoveFromCart = () => {
+    removeFromCart(food.id);
+  };
 
   return (
     <div className="flex gap-4 w-full h-full">
       <Image
-        className="rounded-xl w-28 h-28"
+        className="rounded-xl w-28 h-28 object-cover"
         src={resolvedImage}
-        height={100}
-        width={100}
-        alt="Food image"
+        height={112}
+        width={112}
+        alt={foodName}
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
@@ -53,25 +83,44 @@ const MenuItem = ({ food }: MenuItemProps) => {
         </div>
         <div className="inline-flex gap-2 justify-between w-full items-center">
           <span className="w-full text-sm mt-1" dir="ltr">
-            {food.price ? food.price.toLocaleString('fa-IR') : '0'} T
+            {formattedPrice} T
           </span>
           <motion.div
             whileTap={{ scale: 1.05 }}
-            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"
+            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"
           >
+            {isSuccess && isLoading && (
+              <motion.div
+                className="absolute inset-0 bg-background/80 flex items-center justify-center z-10"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              >
+                <motion.div
+                  animate={{ rotateZ: [0, 360] }}
+                  transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
+                >
+                  <Refresh className="text-foreground" size={20} />
+                </motion.div>
+              </motion.div>
+            )}
             {quantity <= 0 ? (
               <button
-                onClick={() => increment(food.id)}
-                className="inline-flex w-full justify-center items-center gap-2"
+                onClick={handleAddToCart}
+                disabled={isSuccess && isLoading}
+                className="inline-flex w-full justify-center items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
+                <div className="text-sm2 pt-0.5 font-normal text-foreground">
+                  افزودن
+                </div>
               </button>
             ) : (
               <>
                 <button
-                  onClick={() => increment(food.id)}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
+                  onClick={handleAddToCart}
+                  disabled={isSuccess && isLoading}
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <PlusIcon className="text-foreground" />
                 </button>
@@ -84,11 +133,10 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 >
                   {quantity}
                 </motion.div>
-
-
                 <button
-                  onClick={() => decrement(food.id)}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
+                  onClick={handleRemoveFromCart}
+                  disabled={isSuccess && isLoading}
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <MinusIcon className="text-foreground" />
                 </button>