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>