feat(order item): agregamos la logica para mostrar la variante a nivel de la grilla de detalle de ordenes, asi como el precio con la variante, el total, se logra crear la orden con los order items, asociados para usuarios visitantes y existentes.

Author: jhonattan

prisma/initial_data.ts

@@ -48,22 +48,22 @@ export const categoryVariants = [
   // Variantes para Stickers (categoryId: 3) - con modificador de precio
   {
     categoryId: 3,
-    value: "3x3 cm",
-    label: "3×3",
+    value: "3x3",
+    label: "3×3 cm",
     priceModifier: 0,
     sortOrder: 1,
   },
   {
     categoryId: 3,
-    value: "5x5 cm",
-    label: "5×5",
+    value: "5x5",
+    label: "5×5 cm",
     priceModifier: 1.0,
     sortOrder: 2,
   },
   {
     categoryId: 3,
-    value: "10x10 cm",
-    label: "10×10",
+    value: "10x10",
+    label: "10×10 cm",
     priceModifier: 3.0,
     sortOrder: 3,
   },

src/models/cart.model.ts

@@ -32,6 +32,8 @@ export type CartItem = {
 export interface CartItemInput {
   productId: Product["id"];
   quantity: number;
+  categoryVariantId: number | null;
+  variantInfo: string | null;
   title: Product["title"];
   price: Product["price"];
   imgSrc: Product["imgSrc"];

src/models/order.model.ts

@@ -29,8 +29,10 @@ export type Order = Omit<PrismaOrder, "totalAmount"> & {
 
 export interface OrderItemInput {
   productId: number;
+  categoryVariantId?: number | null;
   quantity: number;
   title: string;
+  variantInfo?: string | null; // ← NUEVO
   price: number;
   imgSrc: string;
 }

src/routes/checkout/index.tsx

@@ -105,9 +105,13 @@ export async function action({ request }: Route.ActionArgs) {
 
   const items = cartItems.map((item) => ({
     productId: item.product.id,
+    categoryVariantId: item.categoryVariantId, // ← NUEVO
     quantity: item.quantity,
     title: item.product.title,
-    price: item.product.price,
+    variantInfo: item.categoryVariant
+      ? getVariantInfoText(item.categoryVariantId, item.categoryVariant)
+      : null,
+    price: item.finalPrice,
     imgSrc: item.product.imgSrc,
   }));
 
@@ -130,6 +134,15 @@ export async function action({ request }: Route.ActionArgs) {
   });
 }
 
+function getVariantInfoText(
+  categoryId: number | null,
+  categoryVariant: any
+): string {
+  if (categoryId === 1) return `Talla: ${categoryVariant.label}`;
+  if (categoryId === 3) return `Tamaño: ${categoryVariant.label}`;
+  return `Opción: ${categoryVariant.label}`;
+}
+
 export async function loader({ request }: Route.LoaderArgs) {
   const session = await getSession(request.headers.get("Cookie"));
   const sessionCartId = session.get("sessionCartId");
@@ -249,28 +262,37 @@ export default function Checkout({
           <div className="flex-grow">
             <h2 className="text-lg font-medium mb-4">Resumen de la orden</h2>
             <div className="border border-border rounded-xl bg-background flex flex-col">
-              {cart?.items?.map(({ product, quantity }) => (
-                <div
-                  key={product.id}
-                  className="flex gap-6 p-6 border-b border-border"
-                >
-                  <div className="w-20 rounded-xl bg-muted">
-                    <img
-                      src={product.imgSrc}
-                      alt={product.title}
-                      className="w-full aspect-square object-contain"
-                    />
-                  </div>
-                  <div className="flex flex-col justify-between flex-grow">
-                    <h3 className="text-sm leading-5">{product.title}</h3>
-                    <div className="flex text-sm font-medium gap-4 items-center self-end">
-                      <p>{quantity}</p>
-                      <X className="w-4 h-4" />
-                      <p>S/{product.price.toFixed(2)}</p>
+              {cart?.items?.map(
+                ({ product, quantity, finalPrice, categoryVariant }) => (
+                  <div
+                    key={`${product.id}-${categoryVariant?.id}`}
+                    className="flex gap-6 p-6 border-b border-border"
+                  >
+                    <div className="w-20 rounded-xl bg-muted">
+                      <img
+                        src={product.imgSrc}
+                        alt={product.title}
+                        className="w-full aspect-square object-contain"
+                      />
+                    </div>
+                    <div className="flex flex-col justify-between flex-grow">
+                      <div className="flex items-center">
+                        <h3 className="text-sm leading-5">{product.title}</h3>
+                        {categoryVariant && (
+                          <p className="text-sm leading-5">
+                            ({categoryVariant.label})
+                          </p>
+                        )}
+                      </div>
+                      <div className="flex text-sm font-medium gap-4 items-center self-end">
+                        <p>{quantity}</p>
+                        <X className="w-4 h-4" />
+                        <p>S/{finalPrice.toFixed(2)}</p>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                )
+              )}
               <div className="flex justify-between p-6 text-base font-medium">
                 <p>Total</p>
                 <p>S/{total.toFixed(2)}</p>

src/services/order.service.ts

@@ -26,8 +26,10 @@ export async function createOrder(
         items: {
           create: items.map((item) => ({
             productId: item.productId,
+            categoryVariantId: item.categoryVariantId,
             quantity: item.quantity,
             title: item.title,
+            variantInfo: item.variantInfo,
             price: item.price,
             imgSrc: item.imgSrc,
           })),