show variant in carts

src/app/[name]/(Dialogs)/cart/hook/useCart.ts

@@ -8,20 +8,39 @@ import {
   useGetCartItems,
   useIncrementCart,
 } from "../hooks/useCartData";
+import { toast } from "@/components/Toast";
+import { extractErrorMessage } from "@/lib/func";
 
 export const useCart = () => {
   const { isSuccess } = useGetProfile();
   const params = useParams();
   const currentSlug = (params.name as string) || null;
-  const { clear, increment, decrement, items, slug, setSlug } = useReceiptStore();
-  const { mutate: mutateIncrementCart, isPending: isIncrementPending } = useIncrementCart();
-  const { mutate: mutateDecrementCart, isPending: isDecrementPending } = useDecrementCart();
+  const {
+    clear,
+    increment,
+    decrement,
+    items,
+    slug,
+    setSlug,
+  } = useReceiptStore();
+  const {
+    mutate: mutateIncrementCart,
+    isPending: isIncrementPending,
+  } = useIncrementCart();
+  const {
+    mutate: mutateDecrementCart,
+    isPending: isDecrementPending,
+  } = useDecrementCart();
   const { mutate: mutateClearCart } = useClearCart();
   const { data: cartItems } = useGetCartItems(isSuccess);
 
   const addToCart = (id: string | number) => {
     if (isSuccess) {
-      mutateIncrementCart(id);
+      mutateIncrementCart(id, {
+        onError: (error) => {
+          toast(extractErrorMessage(error), "error");
+        },
+      });
     } else {
       // تنظیم slug هنگام افزودن آیتم به سبد (فقط برای کاربران لاگین نشده)
       if (currentSlug && slug !== currentSlug) {
@@ -33,7 +52,11 @@ export const useCart = () => {
 
   const removeFromCart = (id: string | number) => {
     if (isSuccess) {
-      mutateDecrementCart(id);
+      mutateDecrementCart(id, {
+        onError: (error) => {
+          toast(extractErrorMessage(error), "error");
+        },
+      });
     } else {
       decrement(id);
     }
@@ -41,7 +64,11 @@ export const useCart = () => {
 
   const clearCart = useCallback(() => {
     if (isSuccess) {
-      mutateClearCart();
+      mutateClearCart(undefined, {
+        onError: (error) => {
+          toast(extractErrorMessage(error), "error");
+        },
+      });
     } else {
       clear();
     }
@@ -53,9 +80,13 @@ export const useCart = () => {
         return {};
       }
       return cartItems.data.items.reduce((acc, item) => {
-        acc[item.variantId] = { quantity: item.quantity };
+        acc[item.variantId] = {
+          quantity: item.quantity,
+          ...(item.variantValue != null && { variantValue: item.variantValue }),
+          ...(item.image != null && { image: item.image }),
+        };
         return acc;
-      }, {} as Record<string | number, { quantity: number }>);
+      }, {} as Record<string | number, { quantity: number; variantValue?: string; image?: string }>);
     } else {
       return items;
     }

src/app/[name]/(Dialogs)/cart/page.tsx

@@ -11,7 +11,6 @@ import Prompt from '@/components/utils/Prompt';
 import { useGetProducts } from '@/app/[name]/(Main)/hooks/useMenuData';
 import MenuItem from '@/components/listview/MenuItem';
 import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
-import type { Product } from '@/app/[name]/(Main)/types/Types';
 
 const CartIndex = () => {
   const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
@@ -26,13 +25,14 @@ const CartIndex = () => {
     if (!products.length) return [];
     return Object.entries(items)
       .filter(([, detail]) => detail?.quantity && detail.quantity > 0)
-      .map(([variantId]) => {
+      .map(([variantId, detail]) => {
         const product = products.find((p) =>
           p.variants?.some((v) => v.id === variantId)
         );
-        return product ? { product, variantId } : null;
+        const variantValue = (detail as { variantValue?: string } | undefined)?.variantValue;
+        return product ? { product, variantId, variantValue } : null;
       })
-      .filter((x): x is { product: Product; variantId: string } => Boolean(x));
+      .filter((x): x is NonNullable<typeof x> => x != null);
   }, [products, items]);
 
   const isCartEmpty = cartProducts.length === 0;
@@ -98,9 +98,9 @@ const CartIndex = () => {
           </div>
         ) : (
           <div className="flex flex-col gap-4 pb-24">
-            {cartProducts.map(({ product, variantId }) => (
+            {cartProducts.map(({ product, variantId, variantValue }) => (
               <MenuItemRenderer key={variantId}>
-                <MenuItem product={product} variantId={variantId} />
+                <MenuItem product={product} variantId={variantId} variantValue={variantValue} />
               </MenuItemRenderer>
             ))}
             <CartSummary isPremium />

src/app/[name]/(Dialogs)/cart/types/Types.ts

@@ -10,6 +10,8 @@ export type BulkCartItem = {
 export interface CartItem {
   variantId: string;
   productTitle: string;
+  variantValue?: string;
+  image?: string;
   quantity: number;
   price: number;
   discount: number;