added debounce to - + buttons

2025-11-16 23:37:21 +05:00
parent f867896817
commit 4fe0fb3d4e
52 changed files with 2548 additions and 2253 deletions
--- a/features/cart/components/CartItemCard.tsx
+++ b/features/cart/components/CartItemCard.tsx
@@ -1,176 +1,413 @@
 "use client"
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
 import Image from "next/image"
-import { Minus, Plus, Trash2 } from "lucide-react"
+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 type { CartItem, CartTranslations } from "./types"
+import { useTranslations } from "next-intl"
+import type { CartItem } from "@/lib/types/api"

 interface CartItemCardProps {
  item: CartItem
-  translations: CartTranslations
  onUpdate?: () => void
 }

-export default function CartItemCard({ item, translations: t, onUpdate }: CartItemCardProps) {
+// Session Storage Key
+const PENDING_CART_UPDATES_KEY = 'pendingCartUpdates'
+
+interface PendingUpdate {
+  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)
-  const [pendingQuantity, setPendingQuantity] = useState(item.quantity)
-  const [isLoading, setIsLoading] = useState(false)
-  const updateTimeoutRef = useRef<NodeJS.Timeout>()
+  
+  // 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
+
+  // Initialize from server state
  useEffect(() => {
    setLocalQuantity(item.quantity)
-    setPendingQuantity(item.quantity)
  }, [item.quantity])

-  useEffect(() => {
-    if (pendingQuantity === item.quantity) return
+  // 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
+      }
+      
+      sessionStorage.setItem(PENDING_CART_UPDATES_KEY, JSON.stringify(pending))
+    } catch (error) {
+      console.error('Failed to save pending update:', error)
+    }
+  }, [item.product_id])

-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current)
+  // Remove from sessionStorage
+  const clearPendingUpdate = useCallback(() => {
+    try {
+      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
+      if (stored) {
+        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)
+        } else {
+          sessionStorage.setItem(PENDING_CART_UPDATES_KEY, JSON.stringify(pending))
+        }
+      }
+    } catch (error) {
+      console.error('Failed to clear pending update:', error)
+    }
+  }, [item.product_id])
+
+  // Exponential backoff retry
+  const retrySync = useCallback((quantity: number) => {
+    const maxRetries = 4
+    const retryCount = retryCountRef.current
+
+    if (retryCount >= maxRetries) {
+      setSyncError(true)
+      setIsSyncing(false)
+      return
    }

-    updateTimeoutRef.current = setTimeout(() => {
-      setIsLoading(true)
+    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000) // Max 16s
+    retryCountRef.current++
+    
+    retryTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(quantity)
+    }, delay)
+  }, [])

-      if (pendingQuantity <= 0) {
-        removeItem(item.product_id, {
-          onSuccess: () => onUpdate?.(),
-          onError: () => {
-            setLocalQuantity(item.quantity)
-            setPendingQuantity(item.quantity)
-          },
-          onSettled: () => setIsLoading(false),
-        })
-      } else {
-        updateQuantity(
-          { productId: item.product_id, quantity: pendingQuantity },
-          {
-            onSuccess: () => onUpdate?.(),
-            onError: () => {
-              setLocalQuantity(item.quantity)
-              setPendingQuantity(item.quantity)
-            },
-            onSettled: () => setIsLoading(false),
+  // Update ref
+  retrySyncRef.current = retrySync
+
+  // Sync to server
+  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)
+
+    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 },
+        {
+          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])
+
+  // Update ref
+  syncToServerRef.current = syncToServer
+
+  // Load pending updates from sessionStorage on mount
+  useEffect(() => {
+    const loadPendingUpdates = () => {
+      try {
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
+        if (stored) {
+          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
+            
+            // Trigger sync after a short delay
+            setTimeout(() => syncToServerRef.current?.(productPending.quantity), 500)
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load pending updates:', error)
      }
-    }, 300)
+    }
+
+    loadPendingUpdates()
+  }, [item.product_id, item.quantity])
+
+  // Debounced sync
+  useEffect(() => {
+    // Clear existing timers
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current)
+    }
+
+    // If local quantity matches server, no sync needed
+    if (localQuantity === item.quantity) {
+      return
+    }
+
+    // Save to sessionStorage immediately
+    savePendingUpdate(localQuantity)
+
+    // Debounce the API call
+    debounceTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(localQuantity)
+    }, 800)

    return () => {
-      if (updateTimeoutRef.current) {
-        clearTimeout(updateTimeoutRef.current)
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
      }
    }
-  }, [pendingQuantity, item.quantity, item.product_id, updateQuantity, removeItem, onUpdate])
+  }, [localQuantity, item.quantity, savePendingUpdate])
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
+    }
+  }, [])

  const handleQuantityIncrease = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
-    if (isLoading) return
-
-    const newQuantity = localQuantity + 1
-    setLocalQuantity(newQuantity)
-    setPendingQuantity(newQuantity)
+    
+    // Check stock limit
+    if (localQuantity >= availableStock) {
+      setShowStockModal(true)
+      return
+    }
+    
+    // Optimistic update (instant UI feedback)
+    setLocalQuantity(prev => prev + 1)
  }

  const handleQuantityDecrease = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
-    if (isLoading) return
-
-    const newQuantity = localQuantity - 1
-    if (newQuantity < 1) {
+    
+    if (localQuantity <= 1) {
      handleDelete()
      return
    }
-
-    setLocalQuantity(newQuantity)
-    setPendingQuantity(newQuantity)
+    
+    // Optimistic update (instant UI feedback)
+    setLocalQuantity(prev => prev - 1)
  }

  const handleDelete = () => {
-    setIsLoading(true)
-    removeItem(item.product_id, {
-      onSuccess: () => onUpdate?.(),
-      onSettled: () => setIsLoading(false),
-    })
+    setLocalQuantity(0)
+    clearPendingUpdate()
  }

  const getImageSrc = () => {
    if (item.product.image) return item.product.image
-    if (item.product.images?.length > 0) return item.product.images[0]
+    if (item.product.images && item.product.images.length > 0) return item.product.images[0]
    return "/placeholder.svg"
  }

  return (
-    <Card className="p-4 shadow-none border">
-      <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" />
-          </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>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleDelete}
-              disabled={isRemoving || isLoading}
-              className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
-            >
-              <Trash2 className="h-5 w-5" />
-            </Button>
-          </div>
-        </div>
-
-        <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.pricePerUnit} <span className="text-primary">{item.price_formatted}</span>
-            </p>
-            <p className="text-sm font-semibold">
-              {t.additionalPrice} {item.sub_total_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.totalPrice}</span>
-              <span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
-                {item.total_formatted}
-              </span>
+    <>
+      <Card className="p-4 shadow-none border">
+        <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" />
+            </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>
+              {availableStock <= 5 && (
+                <p className="text-xs text-orange-600 font-medium">
+                  {t("only_left", { count: availableStock })}
+                </p>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleDelete}
+                disabled={isRemoving}
+                className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
+              >
+                <Trash2 className="h-5 w-5" />
+              </Button>
            </div>
          </div>

-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={handleQuantityDecrease}
-              disabled={isLoading || isRemoving}
-              className="rounded-xl bg-blue-50"
-            >
-              <Minus className="h-4 w-4" />
-            </Button>
-            <div className="w-12 text-center font-semibold">{localQuantity}</div>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={handleQuantityIncrease}
-              disabled={isLoading || isRemoving}
-              className="rounded-xl bg-blue-50"
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
+          <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>
+              </p>
+              <p className="text-sm font-semibold">
+                {t("extra_price")} {item.sub_total_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="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
+                  {(parseFloat(item.product.price_amount || "0") * localQuantity).toFixed(2)} TMT
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleQuantityDecrease}
+                className={`rounded-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" />
+                )}
+              </div>
+              
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleQuantityIncrease}
+                disabled={localQuantity >= availableStock}
+                className={`rounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${
+                  localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
          </div>
        </div>
-      </div>
-    </Card>
+      </Card>
+
+      {/* Stock Limit Modal */}
+      <Dialog open={showStockModal} onOpenChange={setShowStockModal}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <div className="flex items-center justify-center mb-4">
+              <div className="rounded-full bg-orange-100 p-3">
+                <AlertTriangle className="h-6 w-6 text-orange-600" />
+              </div>
+            </div>
+            <DialogTitle className="text-center text-xl">
+              {t("stock_limit_title")}
+            </DialogTitle>
+            <DialogDescription className="text-center text-base pt-2">
+              {t("stock_limit_message", { 
+                product: item.product.name,
+                stock: availableStock 
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center mt-4">
+            <Button
+              onClick={() => setShowStockModal(false)}
+              className="w-full rounded-xl"
+            >
+              {t("understood")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
  )
 }
--- a/features/cart/components/CartItemSkeleton.tsx
+++ b/features/cart/components/CartItemSkeleton.tsx
@@ -0,0 +1,27 @@
+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" />
+
+        {/* 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>
+  )
+}
--- a/features/cart/components/DeliveryTypeSelector.tsx
+++ b/features/cart/components/DeliveryTypeSelector.tsx
@@ -1,31 +1,32 @@
 "use client"
 import { Truck, Warehouse } from "lucide-react"
 import { Card } from "@/components/ui/card"
-import { DeliveryType, CartTranslations } from "../types"
+import { useTranslations } from "next-intl"
+import type { DeliveryType } from "@/lib/types/api"

 interface DeliveryTypeSelectorProps {
  selectedType: DeliveryType
  onSelect: (type: DeliveryType) => void
-  translations: CartTranslations
 }

 export default function DeliveryTypeSelector({
  selectedType,
  onSelect,
-  translations: t,
 }: DeliveryTypeSelectorProps) {
+  const t = useTranslations()
+  
  const deliveryOptions: {
    type: DeliveryType
    label: string
    icon: typeof Truck
  }[] = [
-    { type: "SELECTED_DELIVERY", label: t.delivery, icon: Truck },
-    { type: "PICK_UP", label: t.pickup, icon: Warehouse },
+    { type: "SELECTED_DELIVERY", label: t("delivery"), icon: Truck },
+    { type: "PICK_UP", label: t("pickup"), icon: Warehouse },
  ]

  return (
    <div className="mb-6">
-      <h3 className="text-lg font-semibold mb-3">{t.deliveryType}</h3>
+      <h3 className="text-lg font-semibold mb-3">{t("delivery_type")}</h3>
      <div className="flex gap-2">
        {deliveryOptions.map(({ type, label, icon: Icon }) => (
          <Card
--- a/features/cart/components/EmptyCart.tsx
+++ b/features/cart/components/EmptyCart.tsx
@@ -0,0 +1,32 @@
+import { ShoppingCart } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+interface EmptyCartProps {
+  locale?: string
+  message?: string
+  actionText?: string
+  actionHref?: string
+}
+
+export default function EmptyCart({
+  locale = "ru",
+  message = "Your cart is empty",
+  actionText = "Start Shopping",
+  actionHref = "/",
+}: EmptyCartProps) {
+  return (
+    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
+      <ShoppingCart className="h-16 w-16 text-gray-300 mb-4" />
+      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
+      <p className="text-gray-500 mb-6 text-center max-w-sm">
+        {locale === "ru"
+          ? "Добавьте товары в корзину, чтобы начать покупки"
+          : "Add items to your cart to start shopping"}
+      </p>
+      <Link href={actionHref}>
+        <Button className="rounded-xl">{actionText}</Button>
+      </Link>
+    </div>
+  )
+}
--- a/features/cart/components/OrderSummary.tsx
+++ b/features/cart/components/OrderSummary.tsx
@@ -1,37 +1,58 @@
-"use client"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { Textarea } from "@/components/ui/textarea"
-import { Separator } from "@/components/ui/separator"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import DeliveryTypeSelector from "./DeliveryTypeSelector"
-import type { Order, Province, DeliveryType, CartTranslations, PaymentType } from "../types"
+"use client";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import DeliveryTypeSelector from "./DeliveryTypeSelector";
+import { useTranslations } from "next-intl";
+import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
+
+interface OrderBillingItem {
+  title: string;
+  value: string;
+}
+
+interface OrderBilling {
+  body: OrderBillingItem[];
+  footer: {
+    title: string;
+    value: string;
+  };
+}

 interface OrderSummaryProps {
-  order: Order
-  translations: CartTranslations
-  paymentType: PaymentType | null
-  deliveryType: DeliveryType
-  selectedRegion: string
-  selectedProvince: number | null
-  note: string
-  regionGroups: Record<string, Province[]>
-  availableRegions: string[]
-  paymentTypes: PaymentType[]
-  onPaymentTypeChange: (type: PaymentType) => void
-  onDeliveryTypeChange: (type: DeliveryType) => void
-  onRegionChange: (regionCode: string) => void
-  onProvinceChange: (provinceId: number) => void
-  onNoteChange: (note: string) => void
-  onCompleteOrder: () => void
-  isLoading: boolean
+  order: {
+    id: number;
+    billing: OrderBilling;
+  };
+  paymentType: PaymentType | null;
+  deliveryType: DeliveryType;
+  selectedRegion: string;
+  selectedProvince: number | null;
+  note: string;
+  regionGroups: Record<string, Province[]>;
+  availableRegions: string[];
+  paymentTypes: PaymentType[];
+  onPaymentTypeChange: (type: PaymentType) => void;
+  onDeliveryTypeChange: (type: DeliveryType) => void;
+  onRegionChange: (regionCode: string) => void;
+  onProvinceChange: (provinceId: number) => void;
+  onNoteChange: (note: string) => void;
+  onCompleteOrder: () => void;
+  isLoading: boolean;
 }

 export default function OrderSummary({
  order,
-  translations: t,
  paymentType,
  deliveryType,
  selectedRegion,
@@ -48,29 +69,35 @@ export default function OrderSummary({
  onCompleteOrder,
  isLoading,
 }: OrderSummaryProps) {
-  const provincesForSelectedRegion = selectedRegion ? regionGroups[selectedRegion] || [] : []
-  const isFormValid = selectedRegion && selectedProvince && paymentType
+  const t = useTranslations();
+
+  const provincesForSelectedRegion = selectedRegion
+    ? regionGroups[selectedRegion] || []
+    : [];
+  const isFormValid = selectedRegion && selectedProvince && paymentType;

  return (
    <Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
      {/* Payment Type */}
      <div className="mb-6">
-        <h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
+        <h3 className="text-lg font-semibold mb-3">{t("payment_type")}</h3>
        <div className="flex gap-2">
          {paymentTypes.map((type) => (
            <Card
              key={type.id}
              className={`flex-1 cursor-pointer transition-all ${
-                paymentType?.id === type.id 
-                  ? "border-2 border-[#005bff] bg-blue-50" 
+                paymentType?.id === type.id
+                  ? "border-2 border-[#005bff] bg-blue-50"
                  : "border-2 border-gray-200"
              }`}
              onClick={() => onPaymentTypeChange(type)}
            >
              <div className="flex flex-col items-center justify-center p-4 gap-2">
-                <span className={`text-xs font-medium ${
-                  paymentType?.id === type.id ? "text-[#005bff]" : ""
-                }`}>
+                <span
+                  className={`text-xs font-medium ${
+                    paymentType?.id === type.id ? "text-[#005bff]" : ""
+                  }`}
+                >
                  {type.name}
                </span>
              </div>
@@ -80,21 +107,22 @@ export default function OrderSummary({
      </div>

      {/* Delivery Type */}
-      <DeliveryTypeSelector 
-        selectedType={deliveryType} 
-        onSelect={onDeliveryTypeChange} 
-        translations={t} 
+      <DeliveryTypeSelector
+        selectedType={deliveryType}
+        onSelect={onDeliveryTypeChange}
      />

      {/* Region Selection */}
      <div className="mb-6">
-        <Label className="text-lg font-semibold mb-3 block">{t.selectRegion}</Label>
-        <RadioGroup 
-          value={selectedRegion} 
+        <Label className="text-lg font-semibold mb-3 block">
+          {t("choose_region")}
+        </Label>
+        <RadioGroup
+          value={selectedRegion}
          onValueChange={(value) => {
-            onRegionChange(value)
-            onProvinceChange(null as any)
-          }} 
+            onRegionChange(value);
+            onProvinceChange(null as any);
+          }}
          className="flex flex-wrap gap-4"
        >
          {availableRegions.map((regionCode) => (
@@ -104,7 +132,10 @@ export default function OrderSummary({
                id={`region-${regionCode}`}
                className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white"
              />
-              <Label htmlFor={`region-${regionCode}`} className="cursor-pointer uppercase">
+              <Label
+                htmlFor={`region-${regionCode}`}
+                className="cursor-pointer uppercase"
+              >
                {regionCode}
              </Label>
            </div>
@@ -115,13 +146,15 @@ export default function OrderSummary({
      {/* Province Selection */}
      {selectedRegion && provincesForSelectedRegion.length > 0 && (
        <div className="mb-6">
-          <Label className="text-lg font-semibold mb-3 block">{t.selectAddress}</Label>
-          <Select 
-            value={selectedProvince?.toString() || ""} 
+          <Label className="text-lg font-semibold mb-3 block">
+            {t("choose_address")}
+          </Label>
+          <Select
+            value={selectedProvince?.toString() || ""}
            onValueChange={(value) => onProvinceChange(parseInt(value))}
          >
            <SelectTrigger className="rounded-xl">
-              <SelectValue placeholder={t.selectAddress} />
+              <SelectValue placeholder={t("choose_address")} />
            </SelectTrigger>
            <SelectContent>
              {provincesForSelectedRegion.map((province) => (
@@ -136,20 +169,23 @@ export default function OrderSummary({

      {/* Note */}
      <div className="mb-6">
-        <Label className="text-lg font-semibold mb-3 block">{t.note}</Label>
+        <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
        <Textarea
          value={note}
          onChange={(e) => onNoteChange(e.target.value)}
          className="rounded-xl resize-none"
          rows={3}
-          placeholder={t.note}
+          placeholder={t("note")}
        />
      </div>

      {/* Billing */}
      <div className="space-y-2 mb-4">
        {order.billing.body.map((item, index) => (
-          <div key={index} className="flex justify-between text-base font-medium">
+          <div
+            key={index}
+            className="flex justify-between text-base font-medium"
+          >
            <span>{item.title}:</span>
            <span>{item.value}</span>
          </div>
@@ -159,8 +195,12 @@ export default function OrderSummary({
      <Separator className="my-4" />

      <div className="flex justify-between items-center mb-6">
-        <span className="text-lg font-semibold">{order.billing.footer.title}:</span>
-        <span className="text-lg font-bold text-green-600">{order.billing.footer.value}</span>
+        <span className="text-lg font-semibold">
+          {order.billing.footer.title}:
+        </span>
+        <span className="text-lg font-bold text-green-600">
+          {order.billing.footer.value}
+        </span>
      </div>

      <Button
@@ -169,8 +209,8 @@ export default function OrderSummary({
        className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
        size="lg"
      >
-        {isLoading ? `${t.placeOrder}...` : t.placeOrder}
+        {isLoading ? `${t("order")}...` : t("order")}
      </Button>
    </Card>
-  )
-}
+  );
+}
--- a/features/cart/components/PaymentTypeSelector.tsx
+++ b/features/cart/components/PaymentTypeSelector.tsx
@@ -1,49 +0,0 @@
-import React from "react";
-import { CreditCard } from "lucide-react";
-import { Card } from "@/components/ui/card";
-import { PaymentType, CartTranslations } from "./types";
-
-interface PaymentTypeSelectorProps {
-  selectedType: PaymentType;
-  onSelect: (type: PaymentType) => void;
-  translations: CartTranslations;
-}
-
-export default function PaymentTypeSelector({
-  selectedType,
-  onSelect,
-  translations: t,
-}: PaymentTypeSelectorProps) {
-  const paymentOptions: { type: PaymentType; label: string }[] = [
-    { type: "CASH", label: t.cash },
-    { type: "CARD", label: t.card },
-  ];
-
-  return (
-    <div className="mb-6">
-      <h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
-      <div className="flex gap-2">
-        {paymentOptions.map(({ type, label }) => (
-          <Card
-            key={type}
-            className={`flex-1 cursor-pointer transition-all ${
-              selectedType === type
-                ? "border-2 border-[#005bff]"
-                : "border-2 border-gray-200"
-            }`}
-            onClick={() => onSelect(type)}
-          >
-            <div className="flex flex-col items-center justify-center p-4 gap-2">
-              <CreditCard
-                className={`h-8 w-8 ${
-                  selectedType === type ? "text-[#005bff]" : ""
-                }`}
-              />
-              <span className="text-xs">{label}</span>
-            </div>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/features/cart/hooks/useCart.ts
+++ b/features/cart/hooks/useCart.ts
@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient, UseQueryOptions } from "@tanstack/react-query"
 import { apiClient } from "@/lib/api"
-import type {  CartItem } from "@/lib/types/api"
+import type { CartItem } from "@/lib/types/api"

 interface CartResponse {
  message: string
@@ -49,12 +49,13 @@ export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
      const response = await apiClient.get("/carts")
      return transformCartResponse(response.data)
    },
-    refetchInterval: 5000, // Poll every 5 seconds like RTK
+    refetchInterval: 10000, // Increased to 10 seconds (less aggressive)
    refetchOnMount: true,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: true, // Enable to catch updates on tab focus
    refetchOnReconnect: true,
-    staleTime: 0,
-    retry: 1,
+    staleTime: 5000, // Data considered fresh for 5 seconds
+    retry: 2,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
    ...options,
  })
 }
@@ -92,7 +93,8 @@ export function useAddToCart() {
      return { message: "success", data: "Added to cart" }
    },
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["cart"] })
+      // Invalidate but don't refetch immediately (let polling handle it)
+      queryClient.invalidateQueries({ queryKey: ["cart"], refetchType: 'none' })
    },
    onError: (error: any) => {
      console.error("Add to cart error:", error.response?.data?.message || error.message)
@@ -130,6 +132,7 @@ export function useRemoveFromCart() {
      return []
    },
    onSuccess: () => {
+      // Immediate refetch after removal
      queryClient.invalidateQueries({ queryKey: ["cart"] })
    },
    onError: (error: any) => {
@@ -185,6 +188,7 @@ export function useUpdateCartItemQuantity() {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
+        timeout: 15000, // 15 second timeout
      })

      if (typeof response.data === "object" && response.data.data) {
@@ -204,10 +208,12 @@ export function useUpdateCartItemQuantity() {
      return { message: "success", data: "Updated cart" }
    },
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["cart"] })
+      // Invalidate but don't refetch immediately (let optimistic update handle it)
+      queryClient.invalidateQueries({ queryKey: ["cart"], refetchType: 'none' })
    },
    onError: (error: any) => {
      console.error("API update failed:", error.response?.data?.message || error.message)
+      throw error // Re-throw to trigger retry mechanism
    },
  })
 }
@@ -238,11 +244,4 @@ export function useCreateOrder() {
      console.error("Create order error:", error.response?.data?.message || error.message)
    },
  })
-}
-
-
-
-
-
-
-
+}
--- a/features/cart/types.ts
+++ b/features/cart/types.ts
@@ -1,171 +0,0 @@
-import type { StaticImageData } from "next/image";
-
-export interface Cart {
-  message: string;
-  data: CartItem[];
-  errorDetails?: string;
-  total?: number;
-  total_formatted?: string;
-  items?: CartItem[]; // Alternative structure
-}
-
-export interface Order {
-  id: number;
-  seller: {
-    id: number;
-    name: string;
-  };
-  items: CartItem[];
-  billing: {
-    body: Array<{ title: string; value: string }>;
-    footer: { title: string; value: string };
-  };
-}
-
-export interface Region {
-  id: number;
-  code: string;
-  name: string;
-}
-
-export interface Address {
-  id: number;
-  title: string;
-  region_id: number;
-  address: string;
-  phone?: string;
-  is_default?: boolean;
-}
-
-export interface PickUpPoint {
-  id: number;
-  name: string;
-  address: string;
-}
-
-export interface PaymentTypeOption {
-  id: number;
-  name: string;
-  code: string;
-}
-
-export interface CartTranslations {
-  cart: string;
-  ordersIn: string;
-  pricePerUnit: string;
-  additionalPrice: string;
-  discount: string;
-  totalPrice: string;
-  paymentType: string;
-  cash: string;
-  card: string;
-  deliveryType: string;
-  delivery: string;
-  pickup: string;
-  selectRegion: string;
-  selectAddress: string;
-  note: string;
-  placeOrder: string;
-  emptyCart: string;
-  map: string;
-}
-
-// API Response types
-export interface ApiResponse<T> {
-  message: string;
-  data: T;
-  errorDetails?: string;
-}
-
-export interface CreateOrderPayload {
-  customer_name?: string;
-  customer_phone?: string;
-  customer_address: string;
-  shipping_method: string;
-  payment_type_id: number;
-  delivery_time?: string;
-  delivery_at?: string;
-  region: string;
-  note?: string;
-}
-
-export interface CartItem {
-  id: number;
-  product_id: number;
-  product: {
-    id: number;
-    name: string;
-    description?: string;
-    media?: Array<{ images_800x800?: string; thumbnail?: string }>;
-    channel?: Array<{ id: number; name: string }>;
-    price_amount?: string;
-    stock?: number;
-  };
-  product_quantity: number;
-  quantity?: number; // For compatibility
-  seller?: {
-    id: number;
-    name: string;
-  };
-  price?: number;
-  total?: number;
-  price_formatted?: string;
-  sub_total_formatted?: string;
-  discount_formatted?: string;
-  total_formatted?: string;
-}
-
-export interface Province {
-  id: number;
-  region: string;
-  name: string;
-}
-
-export interface PaymentType {
-  id: number;
-  name: string;
-}
-
-export interface Order {
-  id: number;
-  seller: {
-    id: number;
-    name: string;
-  };
-  items: CartItem[];
-  billing: {
-    body: Array<{ title: string; value: string }>;
-    footer: { title: string; value: string };
-  };
-}
-
-export interface CartTranslations {
-  cart: string;
-  ordersIn: string;
-  pricePerUnit: string;
-  additionalPrice: string;
-  discount: string;
-  totalPrice: string;
-  paymentType: string;
-  cash: string;
-  card: string;
-  deliveryType: string;
-  delivery: string;
-  pickup: string;
-  selectRegion: string;
-  selectAddress: string;
-  note: string;
-  placeOrder: string;
-  emptyCart: string;
-  map: string;
-}
-
-export type DeliveryType = "SELECTED_DELIVERY" | "PICK_UP";
-
-export interface CreateOrderPayload {
-  customer_address: string;
-  shipping_method: string;
-  payment_type_id: number;
-  region: string;
-  note?: string;
-}