feat: enhance cart and checkout components to display variant attribute values

src/routes/account/orders/index.tsx

@@ -13,6 +13,8 @@ export async function loader({ request }: Route.LoaderArgs) {
   try {
     const orders = await getOrdersByUser(request);
 
+    console.log("ORDERS", orders[0].items);
+
     orders.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
 
     return { orders };
@@ -29,7 +31,7 @@ export default function Orders({ loaderData }: Route.ComponentProps) {
       {orders!.length > 0 ? (
         <div className="flex flex-col gap-4">
           {orders!.map((order) => (
-            <div key={order.id}>
+            <div key={order.id} className="p-6 border rounded-lg">
               <div className="rounded-lg bg-muted py-4 px-6">
                 <dl className="flex flex-col gap-4 w-full sm:flex-row">
                   <div className="flex-shrink-0">

src/routes/cart/index.tsx

@@ -30,8 +30,9 @@ export default function Cart({ loaderData }: Route.ComponentProps) {
           Carrito de compras
         </h1>
         <div className="border-solid border rounded-xl flex flex-col">
-          {cart?.items?.map(({ product, quantity, id, attributeValueId }) => (
-            <div key={product.id} className="flex gap-7 p-6 border-b">
+          {cart?.items?.map(({ product, quantity, id, variantAttributeValue
+ }) => (
+            <div key={variantAttributeValue?.id} className="flex gap-7 p-6 border-b">
               <div className="w-20 rounded-xl bg-muted">
                 <img
                   src={product.imgSrc}
@@ -41,7 +42,7 @@ export default function Cart({ loaderData }: Route.ComponentProps) {
               </div>
               <div className="flex grow flex-col justify-between">
                 <div className="flex gap-4 justify-between items-center">
-                  <h2 className="text-sm">{product.title}</h2>
+                  <h2 className="text-sm">{product.title} ({variantAttributeValue?.value})</h2>
                   <Form method="post" action="/cart/remove-item">
                     <Button
                       size="sm-icon"
@@ -62,7 +63,7 @@ export default function Cart({ loaderData }: Route.ComponentProps) {
                       <input type="hidden" name="quantity" value="-1" />
                       <Button
                         name="attributeValueId"
-                        value={attributeValueId}
+                        value={variantAttributeValue?.id}
                         variant="outline"
                         size="sm-icon"
                         disabled={quantity === 1}
@@ -78,7 +79,7 @@ export default function Cart({ loaderData }: Route.ComponentProps) {
                         variant="outline"
                         size="sm-icon"
                         name="attributeValueId"
-                        value={attributeValueId}
+                        value={variantAttributeValue?.id}
                       >
                         <Plus />
                       </Button>

src/routes/category/index.tsx

@@ -28,7 +28,6 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     const [category] = await Promise.all([
       getCategoryBySlug(categorySlug),
     ]);
-    console.log({categorySlug, minValue, maxValue})
     const finalProducts = await filterByMinMaxPrice(categorySlug, minValue, maxValue);
 
     return {

src/routes/checkout/index.tsx

@@ -249,9 +249,9 @@ 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 }) => (
+              {cart?.items?.map(({ product, quantity, variantAttributeValue }) => (
                 <div
-                  key={product.id}
+                  key={variantAttributeValue?.id}
                   className="flex gap-6 p-6 border-b border-border"
                 >
                   <div className="w-20 rounded-xl bg-muted">
@@ -262,7 +262,7 @@ export default function Checkout({
                     />
                   </div>
                   <div className="flex flex-col justify-between flex-grow">
-                    <h3 className="text-sm leading-5">{product.title}</h3>
+                    <h3 className="text-sm leading-5">{product.title} ({variantAttributeValue?.value})</h3>
                     <div className="flex text-sm font-medium gap-4 items-center self-end">
                       <p>{quantity}</p>
                       <X className="w-4 h-4" />

src/services/cart.service.ts

@@ -45,8 +45,6 @@ async function getCart(
     },
   });
 
-  console.log("DATA CART SERVICE", data?.items);
-
   if (!data) return null;
 
   return {