fixed some bugs

features/cart/components/CartItemCard.tsx

@@ -1,300 +1,325 @@
-"use client"
-import { useState, useEffect, useRef, useCallback } from "react"
-import Image from "next/image"
-import { Minus, Plus, Trash2, Loader2, AlertTriangle } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
+"use client";
+import { useState, useEffect, useRef, useCallback } from "react";
+import Image from "next/image";
+import { Minus, Plus, Trash2, Loader2, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks"
-import { useTranslations } from "next-intl"
-import type { CartItem } from "@/lib/types/api"
+} from "@/components/ui/dialog";
+import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks";
+import { useTranslations } from "next-intl";
+import type { CartItem } from "@/lib/types/api";
 
 interface CartItemCardProps {
-  item: CartItem
-  onUpdate?: () => void
+  item: CartItem;
+  onUpdate?: () => void;
 }
 
 // Session Storage Key
-const PENDING_CART_UPDATES_KEY = 'pendingCartUpdates'
+const PENDING_CART_UPDATES_KEY = "pendingCartUpdates";
 
 interface PendingUpdate {
-  quantity: number
-  timestamp: number
-  retryCount: number
+  quantity: number;
+  timestamp: number;
+  retryCount: number;
 }
 
 export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
-  const t = useTranslations()
-  
-  // Local UI State (Instant feedback)
-  const [localQuantity, setLocalQuantity] = useState(item.quantity)
-  
-  // Sync State
-  const [isSyncing, setIsSyncing] = useState(false)
-  const [syncError, setSyncError] = useState(false)
-  
-  // Stock limit modal
-  const [showStockModal, setShowStockModal] = useState(false)
-  
-  // Refs
-  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
-  const isRequestInFlightRef = useRef(false)
-  const pendingQuantityRef = useRef<number | null>(null)
-  const retryCountRef = useRef(0)
-  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
-  
-  // Function refs to solve circular dependency
-  const syncToServerRef = useRef<((quantity: number) => void) | null>(null)
-  const retrySyncRef = useRef<((quantity: number) => void) | null>(null)
+  const t = useTranslations();
 
-  const { mutate: updateQuantity } = useUpdateCartItemQuantity()
-  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart()
+  // Local UI State (Instant feedback)
+  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+
+  // Sync State
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncError, setSyncError] = useState(false);
+
+  // Stock limit modal
+  const [showStockModal, setShowStockModal] = useState(false);
+
+  // Refs
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isRequestInFlightRef = useRef(false);
+  const pendingQuantityRef = useRef<number | null>(null);
+  const retryCountRef = useRef(0);
+  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  // Function refs to solve circular dependency
+  const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
+  const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
+
+  const { mutate: updateQuantity } = useUpdateCartItemQuantity();
+  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart();
 
   // Get available stock
-  const availableStock = item.product.stock || 0
+  const availableStock = item.product.stock || 0;
 
   // Initialize from server state
   useEffect(() => {
-    setLocalQuantity(item.quantity)
-  }, [item.quantity])
+    setLocalQuantity(item.quantity);
+  }, [item.quantity]);
 
   // Save to sessionStorage
-  const savePendingUpdate = useCallback((quantity: number) => {
-    try {
-      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
-      const pending: Record<number, PendingUpdate> = stored ? JSON.parse(stored) : {}
-      
-      pending[item.product_id] = {
-        quantity,
-        timestamp: Date.now(),
-        retryCount: retryCountRef.current
+  const savePendingUpdate = useCallback(
+    (quantity: number) => {
+      try {
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
+        const pending: Record<number, PendingUpdate> = stored
+          ? JSON.parse(stored)
+          : {};
+
+        pending[item.product_id] = {
+          quantity,
+          timestamp: Date.now(),
+          retryCount: retryCountRef.current,
+        };
+
+        sessionStorage.setItem(
+          PENDING_CART_UPDATES_KEY,
+          JSON.stringify(pending)
+        );
+      } catch (error) {
+        console.error("Failed to save pending update:", error);
       }
-      
-      sessionStorage.setItem(PENDING_CART_UPDATES_KEY, JSON.stringify(pending))
-    } catch (error) {
-      console.error('Failed to save pending update:', error)
-    }
-  }, [item.product_id])
+    },
+    [item.product_id]
+  );
 
   // Remove from sessionStorage
   const clearPendingUpdate = useCallback(() => {
     try {
-      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
+      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
       if (stored) {
-        const pending: Record<number, PendingUpdate> = JSON.parse(stored)
-        delete pending[item.product_id]
-        
+        const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+        delete pending[item.product_id];
+
         if (Object.keys(pending).length === 0) {
-          sessionStorage.removeItem(PENDING_CART_UPDATES_KEY)
+          sessionStorage.removeItem(PENDING_CART_UPDATES_KEY);
         } else {
-          sessionStorage.setItem(PENDING_CART_UPDATES_KEY, JSON.stringify(pending))
+          sessionStorage.setItem(
+            PENDING_CART_UPDATES_KEY,
+            JSON.stringify(pending)
+          );
         }
       }
     } catch (error) {
-      console.error('Failed to clear pending update:', error)
+      console.error("Failed to clear pending update:", error);
     }
-  }, [item.product_id])
+  }, [item.product_id]);
 
   // Exponential backoff retry
   const retrySync = useCallback((quantity: number) => {
-    const maxRetries = 4
-    const retryCount = retryCountRef.current
+    const maxRetries = 4;
+    const retryCount = retryCountRef.current;
 
     if (retryCount >= maxRetries) {
-      setSyncError(true)
-      setIsSyncing(false)
-      return
+      setSyncError(true);
+      setIsSyncing(false);
+      return;
     }
 
-    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000) // Max 16s
-    retryCountRef.current++
-    
+    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000); // Max 16s
+    retryCountRef.current++;
+
     retryTimerRef.current = setTimeout(() => {
-      syncToServerRef.current?.(quantity)
-    }, delay)
-  }, [])
+      syncToServerRef.current?.(quantity);
+    }, delay);
+  }, []);
 
   // Update ref
-  retrySyncRef.current = retrySync
+  retrySyncRef.current = retrySync;
 
   // Sync to server
-  const syncToServer = useCallback((quantity: number) => {
-    // If already syncing, queue this update
-    if (isRequestInFlightRef.current) {
-      pendingQuantityRef.current = quantity
-      return
-    }
+  const syncToServer = useCallback(
+    (quantity: number) => {
+      // If already syncing, queue this update
+      if (isRequestInFlightRef.current) {
+        pendingQuantityRef.current = quantity;
+        return;
+      }
 
-    // Mark as syncing
-    isRequestInFlightRef.current = true
-    setIsSyncing(true)
-    setSyncError(false)
+      // Mark as syncing
+      isRequestInFlightRef.current = true;
+      setIsSyncing(true);
+      setSyncError(false);
 
-    if (quantity <= 0) {
-      removeItem(item.product_id, {
-        onSuccess: () => {
-          isRequestInFlightRef.current = false
-          setIsSyncing(false)
-          retryCountRef.current = 0
-          clearPendingUpdate()
-          onUpdate?.()
-          
-          // Process queued update if any
-          if (pendingQuantityRef.current !== null) {
-            const nextQuantity = pendingQuantityRef.current
-            pendingQuantityRef.current = null
-            setTimeout(() => syncToServerRef.current?.(nextQuantity), 100)
-          }
-        },
-        onError: (error) => {
-          console.error('Remove failed:', error)
-          isRequestInFlightRef.current = false
-          retrySyncRef.current?.(quantity)
-        }
-      })
-    } else {
-      updateQuantity(
-        { productId: item.product_id, quantity },
-        {
+      if (quantity <= 0) {
+        removeItem(item.product_id, {
           onSuccess: () => {
-            isRequestInFlightRef.current = false
-            setIsSyncing(false)
-            retryCountRef.current = 0
-            clearPendingUpdate()
-            onUpdate?.()
-            
+            isRequestInFlightRef.current = false;
+            setIsSyncing(false);
+            retryCountRef.current = 0;
+            clearPendingUpdate();
+            onUpdate?.();
+
             // Process queued update if any
             if (pendingQuantityRef.current !== null) {
-              const nextQuantity = pendingQuantityRef.current
-              pendingQuantityRef.current = null
-              setTimeout(() => syncToServerRef.current?.(nextQuantity), 100)
+              const nextQuantity = pendingQuantityRef.current;
+              pendingQuantityRef.current = null;
+              setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
             }
           },
           onError: (error) => {
-            console.error('Update failed:', error)
-            isRequestInFlightRef.current = false
-            
-            // Rollback on error after retries exhausted
-            if (retryCountRef.current >= 3) {
-              setLocalQuantity(item.quantity)
-              clearPendingUpdate()
-            }
-            
-            retrySyncRef.current?.(quantity)
+            console.error("Remove failed:", error);
+            isRequestInFlightRef.current = false;
+            retrySyncRef.current?.(quantity);
+          },
+        });
+      } else {
+        updateQuantity(
+          { productId: item.product_id, quantity },
+          {
+            onSuccess: () => {
+              isRequestInFlightRef.current = false;
+              setIsSyncing(false);
+              retryCountRef.current = 0;
+              clearPendingUpdate();
+              onUpdate?.();
+
+              // Process queued update if any
+              if (pendingQuantityRef.current !== null) {
+                const nextQuantity = pendingQuantityRef.current;
+                pendingQuantityRef.current = null;
+                setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+              }
+            },
+            onError: (error) => {
+              console.error("Update failed:", error);
+              isRequestInFlightRef.current = false;
+
+              // Rollback on error after retries exhausted
+              if (retryCountRef.current >= 3) {
+                setLocalQuantity(item.quantity);
+                clearPendingUpdate();
+              }
+
+              retrySyncRef.current?.(quantity);
+            },
           }
-        }
-      )
-    }
-  }, [item.product_id, item.quantity, updateQuantity, removeItem, onUpdate, clearPendingUpdate])
+        );
+      }
+    },
+    [
+      item.product_id,
+      item.quantity,
+      updateQuantity,
+      removeItem,
+      onUpdate,
+      clearPendingUpdate,
+    ]
+  );
 
   // Update ref
-  syncToServerRef.current = syncToServer
+  syncToServerRef.current = syncToServer;
 
   // Load pending updates from sessionStorage on mount
   useEffect(() => {
     const loadPendingUpdates = () => {
       try {
-        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
         if (stored) {
-          const pending: Record<number, PendingUpdate> = JSON.parse(stored)
-          const productPending = pending[item.product_id]
-          
+          const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+          const productPending = pending[item.product_id];
+
           if (productPending && productPending.quantity !== item.quantity) {
             // Apply pending update
-            setLocalQuantity(productPending.quantity)
-            pendingQuantityRef.current = productPending.quantity
-            retryCountRef.current = productPending.retryCount
-            
+            setLocalQuantity(productPending.quantity);
+            pendingQuantityRef.current = productPending.quantity;
+            retryCountRef.current = productPending.retryCount;
+
             // Trigger sync after a short delay
-            setTimeout(() => syncToServerRef.current?.(productPending.quantity), 500)
+            setTimeout(
+              () => syncToServerRef.current?.(productPending.quantity),
+              500
+            );
           }
         }
       } catch (error) {
-        console.error('Failed to load pending updates:', error)
+        console.error("Failed to load pending updates:", error);
       }
-    }
+    };
 
-    loadPendingUpdates()
-  }, [item.product_id, item.quantity])
+    loadPendingUpdates();
+  }, [item.product_id, item.quantity]);
 
   // Debounced sync
   useEffect(() => {
     // Clear existing timers
     if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
     }
 
     // If local quantity matches server, no sync needed
     if (localQuantity === item.quantity) {
-      return
+      return;
     }
 
     // Save to sessionStorage immediately
-    savePendingUpdate(localQuantity)
+    savePendingUpdate(localQuantity);
 
     // Debounce the API call
     debounceTimerRef.current = setTimeout(() => {
-      syncToServerRef.current?.(localQuantity)
-    }, 800)
+      syncToServerRef.current?.(localQuantity);
+    }, 800);
 
     return () => {
       if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current)
+        clearTimeout(debounceTimerRef.current);
       }
-    }
-  }, [localQuantity, item.quantity, savePendingUpdate])
+    };
+  }, [localQuantity, item.quantity, savePendingUpdate]);
 
   // Cleanup
   useEffect(() => {
     return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
-    }
-  }, [])
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
+  }, []);
 
   const handleQuantityIncrease = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    
+    e.preventDefault();
+    e.stopPropagation();
+
     // Check stock limit
     if (localQuantity >= availableStock) {
-      setShowStockModal(true)
-      return
+      setShowStockModal(true);
+      return;
     }
-    
+
     // Optimistic update (instant UI feedback)
-    setLocalQuantity(prev => prev + 1)
-  }
+    setLocalQuantity((prev) => prev + 1);
+  };
 
   const handleQuantityDecrease = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    
+    e.preventDefault();
+    e.stopPropagation();
+
     if (localQuantity <= 1) {
-      handleDelete()
-      return
+      handleDelete();
+      return;
     }
-    
+
     // Optimistic update (instant UI feedback)
-    setLocalQuantity(prev => prev - 1)
-  }
+    setLocalQuantity((prev) => prev - 1);
+  };
 
   const handleDelete = () => {
-    setLocalQuantity(0)
-    clearPendingUpdate()
-  }
+    setLocalQuantity(0);
+    clearPendingUpdate();
+  };
 
   const getImageSrc = () => {
-    if (item.product.image) return item.product.image
-    if (item.product.images && item.product.images.length > 0) return item.product.images[0]
-    return "/placeholder.svg"
-  }
+    if (item.product.image) return item.product.image;
+    if (item.product.images && item.product.images.length > 0)
+      return item.product.images[0];
+    return "/placeholder.svg";
+  };
 
   return (
     <>
@@ -302,11 +327,18 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
         <div className="flex flex-col sm:flex-row gap-4">
           <div className="flex gap-4 flex-1">
             <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
-              <Image src={getImageSrc()} alt={item.product.name} fill className="object-contain" />
+              <Image
+                src={getImageSrc()}
+                alt={item.product.name}
+                fill
+                className="object-contain"
+              />
             </div>
             <div className="flex flex-col gap-2">
               <h3 className="font-semibold text-base">{item.product.name}</h3>
-              <p className="text-sm text-gray-600">{item.seller?.name || "Store"}</p>
+              <p className="text-sm text-gray-600">
+                {item.seller?.name || "Store"}
+              </p>
               {availableStock <= 5 && (
                 <p className="text-xs text-orange-600 font-medium">
                   {t("only_left", { count: availableStock })}
@@ -327,16 +359,25 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
           <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
             <div className="space-y-1">
               <p className="text-sm font-semibold">
-                {t("unit_price")} <span className="text-primary">{item.price_formatted}</span>
+                {t("unit_price")}{" "}
+                <span className="text-primary">{item.price_formatted}</span>
               </p>
-              
-              {item.discount_formatted && item.discount_formatted !== "0 TMT" && (
-                <p className="text-sm font-semibold">{t("discount")} {item.discount_formatted}</p>
-              )}
+
+              {item.discount_formatted &&
+                item.discount_formatted !== "0 TMT" && (
+                  <p className="text-sm font-semibold">
+                    {t("discount")} {item.discount_formatted}
+                  </p>
+                )}
               <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold">{t("total_price")}</span>
+                <span className="text-sm font-semibold">
+                  {t("total_price")}
+                </span>
                 <span className="bg-green-500 text-white px-3 py-1 rounded-lg font-semibold text-base">
-                  {(parseFloat(item.product.price_amount || "0") * localQuantity).toFixed(2)} TMT
+                  {(
+                    parseFloat(item.product.price_amount || "0") * localQuantity
+                  ).toFixed(2)}{" "}
+                  TMT
                 </span>
               </div>
             </div>
@@ -346,28 +387,37 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
                 variant="outline"
                 size="icon"
                 onClick={handleQuantityDecrease}
-                className={` cursor-pointerrounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''}`}
+                className={` cursor-pointerrounded-xl bg-blue-50 ${
+                  isSyncing ? "opacity-70" : ""
+                }`}
               >
                 <Minus className="h-4 w-4" />
               </Button>
-              
+
               <div className="w-12 text-center font-semibold relative">
                 {localQuantity}
                 {isSyncing && (
                   <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-3 text-blue-500" />
                 )}
                 {syncError && (
-                  <span className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full" title="Sync error" />
+                  <span
+                    className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full"
+                    title="Sync error"
+                  />
                 )}
               </div>
-              
+
               <Button
                 variant="outline"
                 size="icon"
                 onClick={handleQuantityIncrease}
-                disabled={localQuantity >= availableStock}
-                className={`rounded-xl cursor-pointer bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${
-                  localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
+                // disabled={localQuantity >= availableStock}
+                className={`rounded-xl cursor-pointer bg-blue-50 ${
+                  isSyncing ? "opacity-70" : ""
+                } ${
+                  localQuantity >= availableStock
+                    ? "opacity-50 cursor-not-allowed"
+                    : ""
                 }`}
               >
                 <Plus className="h-4 w-4 text-[#007AFF]" />
@@ -390,9 +440,9 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
               {t("stock_limit_title")}
             </DialogTitle>
             <DialogDescription className="text-center text-base pt-2">
-              {t("stock_limit_message", { 
+              {t("stock_limit_message", {
                 product: item.product.name,
-                stock: availableStock 
+                stock: availableStock,
               })}
             </DialogDescription>
           </DialogHeader>
@@ -407,5 +457,5 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
         </DialogContent>
       </Dialog>
     </>
-  )
-}
+  );
+}

features/cart/components/CartItemSkeleton.tsx

@@ -1,27 +1,27 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
+// import { Skeleton } from "@/components/ui/skeleton"
+// import { Card } from "@/components/ui/card"
 
-export default function CartItemSkeleton() {
-  return (
-    <Card className="p-4 rounded-xl">
-      <div className="flex gap-4">
-        {/* Product Image */}
-        <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
+// export default function CartItemSkeleton() {
+//   return (
+//     <Card className="p-4 rounded-xl">
+//       <div className="flex gap-4">
+//         {/* Product Image */}
+//         <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
 
-        {/* Product Info */}
-        <div className="flex-1 space-y-2">
-          <Skeleton className="h-4 w-3/4 bg-gray-200" />
-          <Skeleton className="h-4 w-1/2 bg-gray-200" />
-          <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
-        </div>
+//         {/* Product Info */}
+//         <div className="flex-1 space-y-2">
+//           <Skeleton className="h-4 w-3/4 bg-gray-200" />
+//           <Skeleton className="h-4 w-1/2 bg-gray-200" />
+//           <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
+//         </div>
 
-        {/* Quantity Controls */}
-        <div className="flex items-center gap-2">
-          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-          <Skeleton className="w-8 h-8 bg-gray-200" />
-          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-        </div>
-      </div>
-    </Card>
-  )
-}
+//         {/* Quantity Controls */}
+//         <div className="flex items-center gap-2">
+//           <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
+//           <Skeleton className="w-8 h-8 bg-gray-200" />
+//           <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
+//         </div>
+//       </div>
+//     </Card>
+//   )
+// }

features/cart/components/OrderSummary.tsx

@@ -91,9 +91,9 @@ export default function OrderSummary({
     selectedRegion && selectedProvince && paymentType && phone && name;
 
   return (
-    <Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
+    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
       {/* Customer Information */}
-      <div className="mb-6">
+      <div className="">
         <h3 className="text-lg font-semibold mb-3">
           {t("customer_information")}
         </h3>
@@ -107,7 +107,7 @@ export default function OrderSummary({
               value={name}
               onChange={(e) => onNameChange(e.target.value)}
               placeholder={t("name")}
-              className="rounded-xl"
+              className="rounded-lg"
             />
           </div>
           <div>
@@ -119,7 +119,7 @@ export default function OrderSummary({
               value={lastName}
               onChange={(e) => onLastNameChange(e.target.value)}
               placeholder={t("last_name")}
-              className="rounded-xl"
+              className="rounded-lg"
             />
           </div>
           <div>
@@ -131,14 +131,14 @@ export default function OrderSummary({
               value={phone}
               onChange={(e) => onPhoneChange(e.target.value)}
               placeholder={t("phone")}
-              className="rounded-xl"
+              className="rounded-lg"
             />
           </div>
         </div>
       </div>
 
       {/* Payment Type */}
-      <div className="mb-6">
+      <div className="">
         <h3 className="text-lg font-semibold mb-3">{t("payment_type")}</h3>
         <div className="flex gap-2">
           {paymentTypes.map((type) => (
@@ -166,13 +166,13 @@ export default function OrderSummary({
       </div>
 
       {/* Delivery Type */}
-      <DeliveryTypeSelector
+      {/* <DeliveryTypeSelector
         selectedType={deliveryType}
         onSelect={onDeliveryTypeChange}
-      />
+      /> */}
 
       {/* Region Selection */}
-      <div className="mb-6">
+      <div className="">
         <Label className="text-lg font-semibold mb-3 block">
           {t("choose_region")}
         </Label>
@@ -204,7 +204,7 @@ export default function OrderSummary({
 
       {/* Province Selection */}
       {selectedRegion && provincesForSelectedRegion.length > 0 && (
-        <div className="mb-6">
+        <div className="">
           <Label className="text-lg font-semibold mb-3 block">
             {t("choose_address")}
           </Label>
@@ -212,7 +212,7 @@ export default function OrderSummary({
             value={selectedProvince?.toString() || ""}
             onValueChange={(value) => onProvinceChange(parseInt(value))}
           >
-            <SelectTrigger className="rounded-xl">
+            <SelectTrigger className="rounded-lg w-full">
               <SelectValue placeholder={t("choose_address")} />
             </SelectTrigger>
             <SelectContent>
@@ -227,7 +227,7 @@ export default function OrderSummary({
       )}
 
       {/* Note */}
-      <div className="mb-6">
+      <div className="">
         <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
         <Textarea
           value={note}
@@ -253,7 +253,7 @@ export default function OrderSummary({
 
       <Separator className="my-4" />
 
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center ">
         <span className="text-lg font-semibold">
           {order.billing.footer.title}:
         </span>

features/cart/hooks/useCart.ts

@@ -14,16 +14,30 @@ interface CartResponse {
   errorDetails?: string;
 }
 
-// Event emitter for cross-component cart updates
+// DEBUG: Enable detailed logging
+const DEBUG = true;
+const log = (...args: any[]) => {
+  if (DEBUG) console.log('[useCart]', ...args);
+};
+
+// CRITICAL: Single source of truth for pending updates
+const pendingUpdates = new Map<number, number>(); // productId -> quantity
+let updateLock = false;
+
 class CartEventEmitter {
   private listeners: Set<() => void> = new Set();
 
   subscribe(callback: () => void) {
+    log('🔔 New subscriber added. Total:', this.listeners.size + 1);
     this.listeners.add(callback);
-    return () => this.listeners.delete(callback);
+    return () => {
+      log('🔕 Subscriber removed. Total:', this.listeners.size - 1);
+      this.listeners.delete(callback);
+    };
   }
 
   emit() {
+    log('📢 Emitting cart event to', this.listeners.size, 'listeners');
     this.listeners.forEach((cb) => cb());
   }
 }
@@ -36,31 +50,22 @@ function transformCartResponse(response: any): CartResponse {
     (response.trim().startsWith("<!DOCTYPE") ||
       response.trim().startsWith("<html"))
   ) {
-    console.error(
-      "Received HTML response instead of JSON:",
-      response.substring(0, 100)
-    );
     return {
       message: "error",
       data: [],
-      errorDetails:
-        "Server returned HTML instead of JSON. The server might be down or experiencing issues.",
+      errorDetails: "Server returned HTML instead of JSON.",
     };
   }
 
   if (typeof response === "object") {
-    if (response.data) {
-      return response;
-    }
+    if (response.data) return response;
     return { message: "success", data: [] };
   }
 
   if (typeof response === "string") {
     try {
-      const parsed = JSON.parse(response);
-      return parsed;
-    } catch (error) {
-      console.error("Failed to parse response:", error);
+      return JSON.parse(response);
+    } catch {
       return { message: "error", data: [] };
     }
   }
@@ -71,34 +76,54 @@ function transformCartResponse(response: any): CartResponse {
 export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
   const queryClient = useQueryClient();
 
+  log('🎣 useCart hook called with options:', options);
+
   const query = useQuery({
     queryKey: ["cart"],
     queryFn: async () => {
+      log('🌐 Fetching cart from API...');
       const response = await apiClient.get("/carts");
-      return transformCartResponse(response.data);
+      const transformed = transformCartResponse(response.data);
+      log('✅ Cart fetched:', {
+        itemCount: transformed.data.length,
+        items: transformed.data.map(item => ({
+          productId: item.product?.id,
+          quantity: item.product_quantity
+        }))
+      });
+      return transformed;
     },
-    // REMOVED: Aggressive polling
-    // ADDED: Smart refetching only when needed
-    refetchOnMount: false, // Don't refetch on every mount
-    refetchOnWindowFocus: false, // Don't refetch on tab focus
-    refetchOnReconnect: true, // Only refetch on reconnect
-    staleTime: Infinity, // Data never goes stale automatically
-    gcTime: 1000 * 60 * 5, // Cache for 5 minutes
+    // CRITICAL FIX: Merge options AFTER defaults
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: true,
+    staleTime: Infinity,
+    gcTime: 1000 * 60 * 5,
     retry: 2,
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    // User options OVERRIDE defaults
     ...options,
   });
 
-  // Subscribe to cart events for cross-component updates
+  log('🔧 Query config after merge:', {
+    refetchOnMount: query.refetch !== undefined,
+    staleTime: query.isStale,
+    dataUpdatedAt: query.dataUpdatedAt
+  });
+
   useEffect(() => {
+    log('🔗 Setting up cart events listener in useCart');
     const unsubscribe = cartEvents.subscribe(() => {
-      // Only update cache, don't refetch
+      log('📥 Cart event received in useCart, invalidating query');
       queryClient.invalidateQueries({
         queryKey: ["cart"],
         refetchType: "none",
       });
     });
-    return unsubscribe;
+    return () => {
+      log('🔌 Cleaning up cart events listener in useCart');
+      unsubscribe();
+    };
   }, [queryClient]);
 
   return query;
@@ -115,6 +140,7 @@ export function useAddToCart() {
       productId: number;
       quantity?: number;
     }) => {
+      log('➕ AddToCart mutation:', { productId, quantity });
       const params = new URLSearchParams({
         product_id: String(productId),
         product_quantity: String(quantity),
@@ -132,10 +158,8 @@ export function useAddToCart() {
 
       if (typeof response.data === "string") {
         try {
-          const parsed = JSON.parse(response.data);
-          return parsed;
-        } catch (error) {
-          console.error("Failed to parse add to cart response:", error);
+          return JSON.parse(response.data);
+        } catch {
           return { message: "success", data: "Added to cart" };
         }
       }
@@ -143,66 +167,89 @@ export function useAddToCart() {
       return { message: "success", data: "Added to cart" };
     },
     onMutate: async ({ productId, quantity }) => {
-      // Cancel outgoing refetches
+      log('🔒 AddToCart onMutate - Waiting for lock...');
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+      log('🔓 Lock acquired');
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
-      // Snapshot previous value
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+      log('📸 Previous cart state:', previousCart?.data.length, 'items');
 
-      // Optimistically update cart
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
 
-        const existingItem = old.data.find(
+        let updated = { ...old, data: [...old.data] };
+
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          const idx = updated.data.findIndex(
+            (item: any) => item.product?.id === pendingId
+          );
+          if (idx !== -1) {
+            updated.data[idx] = {
+              ...updated.data[idx],
+              product_quantity: pendingQty,
+            };
+          }
+        });
+
+        const existingItem = updated.data.find(
           (item: any) => item.product?.id === productId
         );
 
         if (existingItem) {
-          // Update existing item quantity
-          return {
-            ...old,
-            data: old.data.map((item: any) =>
-              item.product?.id === productId
-                ? {
-                    ...item,
-                    product_quantity: item.product_quantity + quantity,
-                  }
-                : item
-            ),
-          };
+          updated.data = updated.data.map((item: any) =>
+            item.product?.id === productId
+              ? {
+                  ...item,
+                  product_quantity: item.product_quantity + quantity,
+                }
+              : item
+          );
         } else {
-          // Add new item (we don't have full product data, so we add placeholder)
-          return {
-            ...old,
-            data: [
-              ...old.data,
-              {
-                product: { id: productId },
-                product_quantity: quantity,
-              } as any,
-            ],
-          };
+          updated.data = [
+            ...updated.data,
+            {
+              product: { id: productId },
+              product_quantity: quantity,
+            } as any,
+          ];
         }
+
+        const finalItem = updated.data.find(
+          (item: any) => item.product?.id === productId
+        );
+        if (finalItem) {
+          pendingUpdates.set(productId, finalItem.product_quantity);
+          log('💾 Pending update saved:', productId, '→', finalItem.product_quantity);
+        }
+
+        log('🔄 Cart updated optimistically:', updated.data.length, 'items');
+        return updated;
       });
 
-      // Notify other components
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
     onError: (error, variables, context) => {
-      // Rollback on error
+      log('❌ AddToCart error:', error);
       if (context?.previousCart) {
         queryClient.setQueryData(["cart"], context.previousCart);
+        pendingUpdates.delete(variables.productId);
         cartEvents.emit();
       }
-      console.error("Add to cart error:", error);
     },
-    onSuccess: () => {
-      // Silently refetch in background to sync with server
+    onSuccess: (data, variables) => {
+      log('✅ AddToCart success');
+      pendingUpdates.delete(variables.productId);
       queryClient.invalidateQueries({
         queryKey: ["cart"],
-        refetchType: "active", // Only refetch if actively being watched
+        refetchType: "active",
       });
     },
   });
@@ -213,6 +260,7 @@ export function useRemoveFromCart() {
 
   return useMutation({
     mutationFn: async (productId: number) => {
+      log('🗑️ RemoveFromCart mutation:', productId);
       const params = new URLSearchParams({ product_id: String(productId) });
 
       const response = await apiClient.patch("/carts", params.toString(), {
@@ -229,8 +277,7 @@ export function useRemoveFromCart() {
         try {
           const parsed = JSON.parse(response.data);
           return parsed.data || [];
-        } catch (error) {
-          console.error("Failed to parse cart response:", error);
+        } catch {
           return [];
         }
       }
@@ -238,30 +285,56 @@ export function useRemoveFromCart() {
       return [];
     },
     onMutate: async (productId) => {
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
 
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
-        return {
-          ...old,
-          data: old.data.filter((item: any) => item.product?.id !== productId),
-        };
+
+        let updated = { ...old, data: [...old.data] };
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          if (pendingId !== productId) {
+            const idx = updated.data.findIndex(
+              (item: any) => item.product?.id === pendingId
+            );
+            if (idx !== -1) {
+              updated.data[idx] = {
+                ...updated.data[idx],
+                product_quantity: pendingQty,
+              };
+            }
+          }
+        });
+
+        updated.data = updated.data.filter(
+          (item: any) => item.product?.id !== productId
+        );
+
+        pendingUpdates.delete(productId);
+        log('🗑️ Item removed optimistically:', productId);
+        return updated;
       });
 
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
     onError: (error, variables, context) => {
+      log('❌ RemoveFromCart error:', error);
       if (context?.previousCart) {
         queryClient.setQueryData(["cart"], context.previousCart);
         cartEvents.emit();
       }
-      console.error("Remove from cart error:", error);
     },
     onSuccess: () => {
+      log('✅ RemoveFromCart success');
       queryClient.invalidateQueries({
         queryKey: ["cart"],
         refetchType: "active",
@@ -275,6 +348,7 @@ export function useCleanCart() {
 
   return useMutation({
     mutationFn: async () => {
+      log('🧹 CleanCart mutation');
       const response = await apiClient.delete("/carts", {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
@@ -289,8 +363,7 @@ export function useCleanCart() {
         try {
           const parsed = JSON.parse(response.data);
           return parsed.data || [];
-        } catch (error) {
-          console.error("Failed to parse cart response:", error);
+        } catch {
           return [];
         }
       }
@@ -298,16 +371,23 @@ export function useCleanCart() {
       return [];
     },
     onMutate: async () => {
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
 
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
+        pendingUpdates.clear();
         return { ...old, data: [] };
       });
 
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
@@ -334,6 +414,7 @@ export function useUpdateCartItemQuantity() {
       productId: number;
       quantity: number;
     }) => {
+      log('🔄 UpdateQuantity mutation:', { productId, quantity });
       const params = new URLSearchParams({
         product_id: String(productId),
         product_quantity: String(quantity),
@@ -352,10 +433,8 @@ export function useUpdateCartItemQuantity() {
 
       if (typeof response.data === "string") {
         try {
-          const parsed = JSON.parse(response.data);
-          return parsed;
-        } catch (error) {
-          console.error("Failed to parse update cart response:", error);
+          return JSON.parse(response.data);
+        } catch {
           return { message: "success", data: "Updated cart" };
         }
       }
@@ -363,39 +442,68 @@ export function useUpdateCartItemQuantity() {
       return { message: "success", data: "Updated cart" };
     },
     onMutate: async ({ productId, quantity }) => {
+      log('🔒 UpdateQuantity onMutate - Waiting for lock...');
+      while (updateLock) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+      log('🔓 Lock acquired');
+
       await queryClient.cancelQueries({ queryKey: ["cart"] });
 
       const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+      log('📸 Previous cart state:', previousCart?.data.length, 'items');
 
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
-        return {
-          ...old,
-          data: old.data.map((item: any) =>
-            item.product?.id === productId
-              ? { ...item, product_quantity: quantity }
-              : item
-          ),
-        };
+
+        let updated = { ...old, data: [...old.data] };
+
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          const idx = updated.data.findIndex(
+            (item: any) => item.product?.id === pendingId
+          );
+          if (idx !== -1) {
+            updated.data[idx] = {
+              ...updated.data[idx],
+              product_quantity: pendingQty,
+            };
+          }
+        });
+
+        updated.data = updated.data.map((item: any) =>
+          item.product?.id === productId
+            ? { ...item, product_quantity: quantity }
+            : item
+        );
+
+        pendingUpdates.set(productId, quantity);
+        log('💾 Pending update saved:', productId, '→', quantity);
+
+        log('🔄 Cart updated optimistically:', updated.data.length, 'items');
+        return updated;
       });
 
       cartEvents.emit();
+      updateLock = false;
 
       return { previousCart };
     },
     onError: (error, variables, context) => {
+      log('❌ UpdateQuantity error:', error);
       if (context?.previousCart) {
         queryClient.setQueryData(["cart"], context.previousCart);
+        pendingUpdates.delete(variables.productId);
         cartEvents.emit();
       }
-      console.error("API update failed:", error);
       throw error;
     },
-    onSuccess: () => {
-      // Background sync
+    onSuccess: (data, variables) => {
+      log('✅ UpdateQuantity success');
+      pendingUpdates.delete(variables.productId);
       queryClient.invalidateQueries({
         queryKey: ["cart"],
-        refetchType: "none", // Don't refetch, trust optimistic update
+        refetchType: "none",
       });
     },
   });
@@ -420,7 +528,7 @@ export function useCreateOrder() {
       return response.data;
     },
     onSuccess: () => {
-      // Clear cart after successful order
+      pendingUpdates.clear();
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;
         return { ...old, data: [] };
@@ -437,7 +545,6 @@ export function useCreateOrder() {
   });
 }
 
-// Hook to get cart count for badges
 export function useCartCount() {
   const { data } = useCart();
   return (
@@ -446,4 +553,4 @@ export function useCartCount() {
       0
     ) || 0
   );
-}
+}