fix bulk + fix variand

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

@@ -1,10 +1,9 @@
 'use client'
 
-import MinusIcon from '@/components/icons/MinusIcon'
-import PlusIcon from '@/components/icons/PlusIcon'
+import { CartQuantityControl } from '@/components/CartQuantityControl'
 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;
-        const item = items?.[selectedVariantId];
+        if (!cartId) return 0;
+        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) {
-            addToCart(selectedVariantId);
+        if (cartId) {
+            addToCart(cartId);
         }
     };
 
     const handleRemoveFromCart = () => {
-        if (selectedVariantId) {
-            removeFromCart(selectedVariantId);
+        if (cartId) {
+            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
-                        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={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>
+                    <CartQuantityControl
+                        quantity={quantity}
+                        onAdd={handleAddToCart}
+                        onRemove={handleRemoveFromCart}
+                        isMutating={isCartMutating}
+                        addDisabled={!cartId}
+                    />
                 </div>
             </div>
         </div>