cart item

2025-09-28 11:19:00 +03:30
parent ca8c3d876e
commit 5fe9d5a8a4
5 changed files with 202 additions and 23 deletions
@@ -7,29 +7,60 @@ import {
 import { useGetCart } from '@/app/cart/hooks/useCartData'
 import { useRemoveFromCart } from '@/app/cart/hooks/useCartData'
 import { CartItemType } from '@/app/cart/types/Types'
+import { LocalCartItem } from '@/app/product/store/LocalCartStore'
+
+// Union type for all possible cart items
+type CartItem = CartItemType | EnrichedOfflineCartItem
 import { NumberFormat } from '@/config/func'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
+import { useSharedStore } from '@/share/store/sharedStore'
+import { useLocalCart } from '@/app/product/hooks/useLocalCart'
+import { useOfflineCartProducts, EnrichedOfflineCartItem } from '@/share/hooks/useOfflineCartProducts'

 const Cart = () => {
+    const { isLogin } = useSharedStore()
    const { data: cartData, isLoading } = useGetCart()
    const removeFromCartMutation = useRemoveFromCart()

+    // Local cart hooks for offline users
+    const {
+        localCartItems,
+        removeFromLocalCart,
+        getLocalCartItemsCount
+    } = useLocalCart()
+
+    // Get enriched product data for offline cart items
+    const {
+        enrichedCartItems,
+        isLoading: isLoadingOfflineProducts
+    } = useOfflineCartProducts(localCartItems)
+
    const handleRemoveItem = async (productId: number, variantId: string) => {
-        try {
-            await removeFromCartMutation.mutateAsync({
-                productId,
-                variantId
-            })
-        } catch (error) {
-            console.error('Error removing item from cart:', error)
+        if (isLogin) {
+            try {
+                await removeFromCartMutation.mutateAsync({
+                    productId,
+                    variantId
+                })
+            } catch (error) {
+                console.error('Error removing item from cart:', error)
+            }
+        } else {
+            removeFromLocalCart(productId, variantId)
        }
    }

+    // Get cart data based on login status
    const cart = cartData?.results?.cart
-    const items = cart?.items || []
-    const itemsCount = cart?.items_count || 0
+    const onlineItems = cart?.items || []
+    const onlineItemsCount = cart?.items_count || 0
+
+    // Use appropriate data based on login status
+    const items = isLogin ? onlineItems : enrichedCartItems
+    const itemsCount = isLogin ? onlineItemsCount : getLocalCartItemsCount()
+    const isItemsLoading = isLogin ? isLoading : isLoadingOfflineProducts

    return (
        <Popover>
@@ -56,14 +87,18 @@ const Cart = () => {

                    {/* Cart Items */}
                    <div className='space-y-3 mb-4'>
-                        {isLoading ? (
+                        {isItemsLoading ? (
                            <div className='text-center py-4 text-gray-500'>در حال بارگذاری...</div>
                        ) : items.length > 0 ? (
-                            items.slice(0, 3).map((item: CartItemType) => (
+                            items.slice(0, 3).map((item: CartItem, index: number) => (
                                <CartItemCard
-                                    key={`${item.product._id}-${item.variant._id}`}
+                                    key={isLogin ? `${(item as CartItemType).product._id}-${(item as CartItemType).variant._id}` : `${(item as LocalCartItem).productId}-${(item as LocalCartItem).variantId}-${index}`}
                                    item={item}
-                                    onRemove={() => handleRemoveItem(item.product._id, item.variant._id)}
+                                    isOnline={isLogin}
+                                    onRemove={() => handleRemoveItem(
+                                        isLogin ? (item as CartItemType).product._id : (item as LocalCartItem).productId,
+                                        isLogin ? (item as CartItemType).variant._id : (item as LocalCartItem).variantId
+                                    )}
                                />
                            ))
                        ) : (
@@ -86,14 +121,46 @@ const Cart = () => {
 }

 // Cart Item Card Component
-const CartItemCard = ({ item, onRemove }: { item: CartItemType, onRemove: () => void }) => {
+const CartItemCard = ({
+    item,
+    isOnline,
+    onRemove
+}: {
+    item: CartItem,
+    isOnline: boolean,
+    onRemove: () => void
+}) => {
+    // Handle both online and offline items with enriched data
+    const productTitle = isOnline
+        ? (item as CartItemType).product.title_fa
+        : (item as EnrichedOfflineCartItem).product?.title_fa || 'در حال بارگذاری...'
+
+    const productImage = isOnline
+        ? (item as CartItemType).product.imagesUrl.cover
+        : (item as EnrichedOfflineCartItem).product?.imagesUrl?.cover || '/images/logo.png'
+
+    const productCategory = isOnline
+        ? ((item as CartItemType).product.category?._id || 'دسته‌بندی')
+        : ((item as EnrichedOfflineCartItem).product?.category?._id || 'دسته‌بندی')
+
+    const productPrice = isOnline
+        ? (item as CartItemType).variant.price.selling_price
+        : (item as EnrichedOfflineCartItem).variant?.price?.selling_price || 0
+
+    const quantity = isOnline
+        ? (item as CartItemType).quantity
+        : (item as LocalCartItem).quantity
+
+    // Check if product data is still loading for offline items
+    const isProductLoading = !isOnline && !(item as EnrichedOfflineCartItem).product
+
    return (
        <div className='bg-white rounded-lg p-3 flex gap-3 shadow-sm border border-gray-100'>
            {/* Product Image */}
            <div className='flex-shrink-0'>
                <Image
-                    src={item.product.imagesUrl.cover}
-                    alt={item.product.title_fa}
+                    src={productImage}
+                    alt={productTitle}
                    width={60}
                    height={60}
                    className='w-15 h-15 object-contain rounded'
@@ -103,14 +170,18 @@ const CartItemCard = ({ item, onRemove }: { item: CartItemType, onRemove: () =>
            {/* Product Details */}
            <div className='flex-1 min-w-0'>
                <div className='text-xs text-gray-500 mb-1'>
-                    {item.product.category?._id || 'دسته‌بندی'}
+                    {productCategory}
                </div>
                <div className='text-sm text-gray-800 mb-2 line-clamp-2'>
-                    {item.product.title_fa}
+                    {isProductLoading ? 'در حال بارگذاری...' : productTitle}
                </div>
                <div className='flex items-center justify-between'>
                    <div className='text-sm font-semibold text-gray-900'>
-                        {NumberFormat(item.variant.price.selling_price)} تومان
+                        {isProductLoading ? (
+                            `${quantity} عدد`
+                        ) : (
+                            `${NumberFormat(productPrice)} تومان`
+                        )}
                    </div>
                    <button
                        onClick={onRemove}