fix bulk + fix variand

src/app/[name]/(Dialogs)/cart/hook/useCart.ts

@@ -14,8 +14,8 @@ export const useCart = () => {
   const params = useParams();
   const currentSlug = (params.name as string) || null;
   const { clear, increment, decrement, items, slug, setSlug } = useReceiptStore();
-  const { mutate: mutateIncrementCart } = useIncrementCart();
+  const { mutate: mutateIncrementCart, isPending: isIncrementPending } = useIncrementCart();
-  const { mutate: mutateDecrementCart } = useDecrementCart();
+  const { mutate: mutateDecrementCart, isPending: isDecrementPending } = useDecrementCart();
   const { mutate: mutateClearCart } = useClearCart();
   const { data: cartItems } = useGetCartItems(isSuccess);
 
@@ -53,7 +53,7 @@ export const useCart = () => {
         return {};
       }
       return cartItems.data.items.reduce((acc, item) => {
-        acc[item.productId] = { quantity: item.quantity };
+        acc[item.variantId] = { quantity: item.quantity };
         return acc;
       }, {} as Record<string | number, { quantity: number }>);
     } else {
@@ -61,9 +61,7 @@ export const useCart = () => {
     }
   }, [isSuccess, cartItems?.data?.items, items]);
 
-  const isItemLoading = () => {
+  const isCartMutating = isIncrementPending || isDecrementPending;
-    return false;
-  };
 
   // برای کاربران لاگین شده، slug از API می‌آید (در cartItems.data.shopId)
   // برای کاربران لاگین نشده، slug از receiptStore می‌آید
@@ -83,6 +81,6 @@ export const useCart = () => {
     addToCart,
     removeFromCart,
     clearCart,
-    isItemLoading,
+    isCartMutating,
   };
 };

src/app/[name]/(Dialogs)/cart/hooks/useCartData.ts

@@ -29,7 +29,7 @@ export const useIncrementCart = () => {
 
       if (previousCart?.data && productsData?.data) {
         const existingItem = previousCart.data.items.find(
-          (item) => item.productId === String(id)
+          (item) => item.variantId === String(id)
         );
 
         let updatedItems: CartItem[];
@@ -37,7 +37,7 @@ export const useIncrementCart = () => {
 
         if (existingItem) {
           updatedItems = previousCart.data.items.map((item) => {
-            if (item.productId === String(id)) {
+            if (item.variantId === String(id)) {
               return {
                 ...item,
                 quantity: item.quantity + 1,
@@ -58,7 +58,7 @@ export const useIncrementCart = () => {
             const price = variant.price ?? effectivePrice;
             const discount = product.discount ?? 0;
             const newItem: CartItem = {
-              productId: variantId,
+              variantId,
               productTitle: product.title || product.name || "",
               quantity: 1,
               price,
@@ -124,7 +124,7 @@ export const useDecrementCart = () => {
       if (previousCart?.data) {
         const updatedItems = previousCart.data.items
           .map((item: CartItem) => {
-            if (item.productId === String(id)) {
+            if (item.variantId === String(id)) {
               const newQuantity = item.quantity - 1;
               if (newQuantity <= 0) {
                 return null;

src/app/[name]/(Dialogs)/cart/service/CartService.ts

@@ -2,7 +2,7 @@ import { api } from "@/config/axios";
 import { BulkCartItem, CartResponse, SaveAllMethod } from "../types/Types";
 
 export const bulkCart = async (params: BulkCartItem) => {
-  const { data } = await api.post("/public/cart/items/bulk", params);
+  const { data } = await api.post("/public/cart/variant/bulk", params);
   return data;
 };
 

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

@@ -8,8 +8,7 @@ export type BulkCartItem = {
 };
 
 export interface CartItem {
-  /** شناسه واریانت (در API ممکن است هنوز productId نامیده شود) */
+  variantId: string;
-  productId: string;
   productTitle: string;
   quantity: number;
   price: number;

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

@@ -1,10 +1,9 @@
 'use client'
 
-import MinusIcon from '@/components/icons/MinusIcon'
+import { CartQuantityControl } from '@/components/CartQuantityControl'
-import PlusIcon from '@/components/icons/PlusIcon'
 import { ef } from '@/lib/helpers/utfNumbers'
 import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart'
-import { motion } from 'framer-motion'
+import { getPrimaryVariantId } from '@/app/[name]/(Main)/types/Types'
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
 import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
@@ -24,30 +23,34 @@ function ProductPage({ }: Props) {
     const { isSuccess } = useGetProfile();
     const { data: product, isLoading } = useGetProduct(id as string);
     const { data: about } = useGetAbout();
-    const { items, addToCart, removeFromCart } = useCart();
+    const { items, addToCart, removeFromCart, isCartMutating } = useCart();
     const [isFavorite, setIsFavorite] = useState<boolean>(false);
     const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
     const { mutate: toggleFavorite } = useToggleFavorite();
 
     const productId = product?.data?.id || id as string;
+    const cartId = useMemo(() => {
+        if (!product?.data) return null;
+        return selectedVariantId ?? getPrimaryVariantId(product.data) ?? productId;
+    }, [product?.data, selectedVariantId, productId]);
     const quantity = useMemo(() => {
-        if (!selectedVariantId) return 0;
+        if (!cartId) return 0;
-        const item = items?.[selectedVariantId];
+        const item = items?.[cartId] ?? items?.[String(cartId)];
         if (item && typeof item === 'object' && 'quantity' in item) {
             return item.quantity || 0;
         }
         return 0;
-    }, [items, selectedVariantId]);
+    }, [items, cartId]);
 
     const handleAddToCart = () => {
-        if (selectedVariantId) {
+        if (cartId) {
-            addToCart(selectedVariantId);
+            addToCart(cartId);
         }
     };
 
     const handleRemoveFromCart = () => {
-        if (selectedVariantId) {
+        if (cartId) {
-            removeFromCart(selectedVariantId);
+            removeFromCart(cartId);
         }
     };
 
@@ -86,7 +89,7 @@ function ProductPage({ }: Props) {
         if (!product?.data) return;
         const variants = product.data.variants ?? [];
         if (!variants.length) {
-            setSelectedVariantId(null);
+            setSelectedVariantId(product.data.id);
             return;
         }
         setSelectedVariantId((prev) => prev ?? variants[0].id);
@@ -252,46 +255,13 @@ function ProductPage({ }: Props) {
 
                 <div className='mt-12 flex justify-between items-center'>
                     <span dir='ltr'>{ef(price.toLocaleString('en-US'))} T</span>
-                    <motion.div
+                    <CartQuantityControl
-                        whileTap={{ scale: 1.05 }}
+                        quantity={quantity}
-                        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"
+                        onAdd={handleAddToCart}
-                    >
+                        onRemove={handleRemoveFromCart}
-                        {quantity <= 0 ? (
+                        isMutating={isCartMutating}
-                            <button
+                        addDisabled={!cartId}
-                                onClick={handleAddToCart}
+                    />
-                                className="inline-flex w-full justify-center items-center gap-2"
-                            >
-                                <PlusIcon />
-                                <div className="text-sm2 pt-0.5 font-normal text-foreground">
-                                    افزودن
-                                </div>
-                            </button>
-                        ) : (
-                            <>
-                                <button
-                                    onClick={handleAddToCart}
-                                    className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
-                                >
-                                    <PlusIcon className="text-foreground" />
-                                </button>
-                                <motion.div
-                                    key={quantity}
-                                    initial={{ scale: 1 }}
-                                    animate={{ scale: [1.2, 0.95, 1] }}
-                                    transition={{ duration: 0.3 }}
-                                    className="text-sm2 pt-0.5 font-semibold"
-                                >
-                                    {quantity}
-                                </motion.div>
-                                <button
-                                    onClick={handleRemoveFromCart}
-                                    className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
-                                >
-                                    <MinusIcon className="text-foreground" />
-                                </button>
-                            </>
-                        )}
-                    </motion.div>
                 </div>
             </div>
         </div>

src/components/CartQuantityControl.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import MinusIcon from '@/components/icons/MinusIcon'
+import PlusIcon from '@/components/icons/PlusIcon'
+
+export interface CartQuantityControlProps {
+  quantity: number
+  onAdd: () => void
+  onRemove: () => void
+  /** در حال ارسال درخواست به سرور (نمایش اسپینر به‌جای آیکون) */
+  isMutating?: boolean
+  /** غیرفعال کردن دکمه افزودن (مثلاً وقتی variant انتخاب نشده) */
+  addDisabled?: boolean
+  /** متن دکمه وقتی quantity صفر است */
+  addLabel?: string
+  /** متن دکمه در حالت loading */
+  addingLabel?: string
+}
+
+const Spinner = () => (
+  <span className="size-4 border-2 border-foreground/30 border-t-foreground rounded-full animate-spin block" />
+)
+
+export function CartQuantityControl({
+  quantity,
+  onAdd,
+  onRemove,
+  isMutating = false,
+  addDisabled = false,
+  addLabel = 'افزودن',
+  addingLabel = 'در حال افزودن...',
+}: CartQuantityControlProps) {
+  return (
+    <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 relative overflow-hidden"
+    >
+      {quantity <= 0 ? (
+        <button
+          onClick={onAdd}
+          disabled={isMutating || addDisabled}
+          className="inline-flex w-full justify-center items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          {isMutating ? <Spinner /> : <PlusIcon />}
+          <div className="text-sm2 pt-0.5 font-normal text-foreground">
+            {isMutating ? addingLabel : addLabel}
+          </div>
+        </button>
+      ) : (
+        <>
+          <button
+            onClick={onAdd}
+            disabled={isMutating}
+            className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {isMutating ? <Spinner /> : <PlusIcon className="text-foreground" />}
+          </button>
+          <motion.div
+            key={quantity}
+            initial={{ scale: 1 }}
+            animate={{ scale: [1.2, 0.95, 1] }}
+            transition={{ duration: 0.3 }}
+            className="text-sm2 pt-0.5 font-semibold"
+          >
+            {quantity}
+          </motion.div>
+          <button
+            onClick={onRemove}
+            disabled={isMutating}
+            className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {isMutating ? <Spinner /> : <MinusIcon className="text-foreground" />}
+          </button>
+        </>
+      )}
+    </motion.div>
+  )
+}

src/components/listview/MenuItem.tsx

@@ -4,10 +4,8 @@
 import { memo, useMemo } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import PlusIcon from "@/components/icons/PlusIcon";
+import { CartQuantityControl } from "@/components/CartQuantityControl";
-import MinusIcon from "@/components/icons/MinusIcon";
 import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
-import { motion } from "framer-motion";
 import type { Product, ProductImage } from "@/app/[name]/(Main)/types/Types";
 import {
   hasVariants,
@@ -22,7 +20,7 @@ interface MenuItemProps {
 }
 
 const MenuItem = ({ product, variantId: variantIdProp }: MenuItemProps) => {
-  const { items, addToCart, removeFromCart } = useCart();
+  const { items, addToCart, removeFromCart, isCartMutating } = useCart();
   const params = useParams<{ name: string }>();
   const name = params?.name || "";
   const variantId = variantIdProp ?? getPrimaryVariantId(product);
@@ -163,46 +161,12 @@ const MenuItem = ({ product, variantId: variantIdProp }: MenuItemProps) => {
               جزئیات
             </Link>
           ) : (
-            <motion.div
+            <CartQuantityControl
-              whileTap={{ scale: 1.05 }}
+              quantity={quantity}
-              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"
+              onAdd={handleAddToCart}
-            >
+              onRemove={handleRemoveFromCart}
-              {quantity <= 0 ? (
+              isMutating={isCartMutating}
-                <button
+            />
-                  onClick={handleAddToCart}
-                  className="inline-flex w-full justify-center items-center gap-2"
-                >
-                  <PlusIcon />
-                  <div className="text-sm2 pt-0.5 font-normal text-foreground">
-                    افزودن
-                  </div>
-                </button>
-              ) : (
-                <>
-                  <button
-                    onClick={handleAddToCart}
-                    className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
-                  >
-                    <PlusIcon className="text-foreground" />
-                  </button>
-                  <motion.div
-                    key={quantity}
-                    initial={{ scale: 1 }}
-                    animate={{ scale: [1.2, 0.95, 1] }}
-                    transition={{ duration: 0.3 }}
-                    className="text-sm2 pt-0.5 font-semibold"
-                  >
-                    {quantity}
-                  </motion.div>
-                  <button
-                    onClick={handleRemoveFromCart}
-                    className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
-                  >
-                    <MinusIcon className="text-foreground" />
-                  </button>
-                </>
-              )}
-            </motion.div>
           )}
         </div>
       </div>

src/config/const.ts

@@ -1,6 +1,5 @@
 // export const API_BASE_URL = "https://dmenuplus-api.dev.danakcorp.com";
-// export const API_BASE_URL =
+// export const API_BASE_URL = "https://dkala-api.danakcorp.com";
-//   "https://dmenuplus-api-production.dev.danakcorp.com";
+export const API_BASE_URL = "http://192.168.99.209:4000";
-export const API_BASE_URL = "http://10.86.60.88:4000";
 export const TOKEN_NAME = "dmenu-t";
 export const REFRESH_TOKEN_NAME = "dmenu-rt";