order create

src/features/cart/ui/CartPage.tsx

@@ -21,6 +21,7 @@ import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
+import ProductBanner from '@/assets/product.png';
 
 const CartPage = () => {
   const { cart_id } = useCartId();
@@ -102,7 +103,10 @@ const CartPage = () => {
     );
 
   const subtotal = cartItems.reduce(
-    (sum, item) => sum + item.product_price * Number(item.quantity),
+    (sum, item) =>
+      sum +
+      Math.max(...item.product.prices.map((e) => Number(e.price))) *
+        Number(item.quantity),
     0,
   );
 
@@ -145,7 +149,9 @@ const CartPage = () => {
                 <Button
                   variant="destructive"
                   size="icon"
-                  onClick={() => deleteCartItem({ cart_item_id: item.id })}
+                  onClick={() =>
+                    deleteCartItem({ cart_item_id: String(item.id) })
+                  }
                   className="absolute right-2 w-7 h-7 top-2 cursor-pointer"
                 >
                   <Trash className="size-4" />
@@ -153,8 +159,12 @@ const CartPage = () => {
 
                 <div className="w-24 h-40 bg-gray-100 rounded-lg flex-shrink-0 overflow-hidden">
                   <Image
-                    src={BASE_URL + item.product_image}
-                    alt={item.product_name}
+                    src={
+                      item.product.images.length > 0
+                        ? BASE_URL + item.product.images[0].image
+                        : ProductBanner
+                    }
+                    alt={item.product.name}
                     width={500}
                     height={500}
                     className="object-cover"
@@ -164,11 +174,16 @@ const CartPage = () => {
 
                 <div className="flex-1">
                   <h3 className="font-semibold text-lg mb-1">
-                    {item.product_name}
+                    {item.product.name}
                   </h3>
                   <div className="flex items-center gap-2 mb-3 max-lg:flex-col max-lg:items-start max-lg:gap-1">
                     <span className="text-blue-600 font-bold text-xl">
-                      {formatPrice(item.product_price, true)}
+                      {formatPrice(
+                        Math.max(
+                          ...item.product.prices.map((e) => Number(e.price)),
+                        ),
+                        true,
+                      )}
                     </span>
                   </div>
 
@@ -176,7 +191,7 @@ const CartPage = () => {
                     <button
                       onClick={() =>
                         handleQuantityChange(
-                          item.id,
+                          String(item.id),
                           Number(quantities[item.id]) - 1,
                         )
                       }
@@ -197,7 +212,7 @@ const CartPage = () => {
                         // Debounce bilan update
                         const valNum = Number(val);
                         if (!isNaN(valNum))
-                          handleQuantityChange(item.id, valNum);
+                          handleQuantityChange(String(item.id), valNum);
                       }}
                       type="text"
                       className="w-16 text-center"
@@ -206,7 +221,7 @@ const CartPage = () => {
                     <button
                       onClick={() =>
                         handleQuantityChange(
-                          item.id,
+                          String(item.id),
                           Number(quantities[item.id]) + 1,
                         )
                       }