agregamos la logica de manejo para la interface de producto y poder mostrar las variantes asi como su comportamiento UI y diseño

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",
-    label: "3×3 cm",
+    value: "3x3 cm",
+    label: "3×3",
     priceModifier: 0,
     sortOrder: 1,
   },
   {
     categoryId: 3,
-    value: "5x5",
-    label: "5×5 cm",
+    value: "5x5 cm",
+    label: "5×5",
     priceModifier: 1.0,
     sortOrder: 2,
   },
   {
     categoryId: 3,
-    value: "10x10",
-    label: "10×10 cm",
+    value: "10x10 cm",
+    label: "10×10",
     priceModifier: 3.0,
     sortOrder: 3,
   },

src/routes/product/index.tsx

@@ -1,31 +1,79 @@
 import { Form, useNavigation } from "react-router";
 
 import { Button, Container, Separator } from "@/components/ui";
+import { cn } from "@/lib/utils";
 import { type Product } from "@/models/product.model";
 import { getProductById } from "@/services/product.service";
 
 import NotFound from "../not-found";
 
 import type { Route } from "./+types";
+import { useEffect, useState } from "react";
+import { getCategoryWithVariants } from "@/services/category.service";
+
+interface CategoryVariant {
+  id: number;
+  value: string;
+  label: string;
+}
 
 export async function loader({ params }: Route.LoaderArgs) {
   try {
     const product = await getProductById(parseInt(params.id));
-    return { product };
+    const categoryWithVariants = product.categoryId
+      ? await getCategoryWithVariants(product.categoryId)
+      : null;
+    return { product, categoryWithVariants };
   } catch {
     return {};
   }
 }
 
 export default function Product({ loaderData }: Route.ComponentProps) {
-  const { product } = loaderData;
+  const { product, categoryWithVariants } = loaderData;
   const navigation = useNavigation();
   const cartLoading = navigation.state === "submitting";
 
+  // Estado simple para variantes
+  const [variants, setVariants] = useState<CategoryVariant[]>([]);
+  const [selectedVariant, setSelectedVariant] =
+    useState<CategoryVariant | null>(null);
+
+  // Cargar variantes si la categoría las tiene
+  useEffect(() => {
+    if (
+      !categoryWithVariants?.hasVariants ||
+      !categoryWithVariants.categoryVariants.length
+    ) {
+      setVariants([]);
+      setSelectedVariant(null);
+      return;
+    }
+
+    const mappedVariants: CategoryVariant[] =
+      categoryWithVariants.categoryVariants.map((variant) => ({
+        id: variant.id,
+        value: variant.value,
+        label: variant.label,
+      }));
+
+    setVariants(mappedVariants);
+    setSelectedVariant(mappedVariants[0] || null);
+  }, [categoryWithVariants?.id, categoryWithVariants?.hasVariants]);
+
   if (!product) {
     return <NotFound />;
   }
 
+  const hasVariants = categoryWithVariants?.hasVariants && variants.length > 0;
+
+  // Helper para obtener el label de la variante
+  const getVariantLabel = () => {
+    if (product.categoryId === 1) return "Talla";
+    if (product.categoryId === 3) return "Tamaño";
+    return "Opciones";
+  };
+
   return (
     <>
       <section className="py-12">
@@ -45,12 +93,55 @@ export default function Product({ loaderData }: Route.ComponentProps) {
             <p className="text-sm leading-5 text-muted-foreground mb-10">
               {product.description}
             </p>
+
+            {/* Toggle Button Group para Variantes - Implementación directa */}
+            {hasVariants && (
+              <div className="mb-6">
+                <div className="space-y-3">
+                  <label className="text-sm font-medium text-foreground">
+                    {getVariantLabel()}
+                  </label>
+                  <div className="flex flex-wrap gap-2">
+                    {variants.map((variant) => (
+                      <Button
+                        key={variant.id}
+                        type="button"
+                        variant={
+                          selectedVariant?.id === variant.id
+                            ? "default"
+                            : "outline"
+                        }
+                        size="default"
+                        onClick={() => setSelectedVariant(variant)}
+                        className={cn(
+                          "h-10 px-4 transition-all duration-200",
+                          selectedVariant?.id === variant.id
+                            ? "bg-primary text-primary-foreground border-primary"
+                            : "bg-background text-foreground border-border hover:bg-muted"
+                        )}
+                      >
+                        {variant.label}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
             <Form method="post" action="/cart/add-item">
               <input
                 type="hidden"
                 name="redirectTo"
                 value={`/products/${product.id}`}
               />
+              <input type="hidden" name="productId" value={product.id} />
+              {selectedVariant && (
+                <input
+                  type="hidden"
+                  name="categoryVariantId"
+                  value={selectedVariant.id}
+                />
+              )}
               <Button
                 size="xl"
                 className="w-full md:w-80"

src/services/category.service.ts

@@ -1,6 +1,14 @@
 import { prisma } from "@/db/prisma";
 
-import { type Category, type CategorySlug } from "@/../generated/prisma/client";
+import {
+  type Category,
+  type CategorySlug,
+  type Prisma,
+} from "@/../generated/prisma/client";
+
+type CategoryWithVariants = Prisma.CategoryGetPayload<{
+  include: { categoryVariants: true };
+}>;
 
 export async function getAllCategories(): Promise<Category[]> {
   const categories = await prisma.category.findMany();
@@ -18,3 +26,18 @@ export async function getCategoryBySlug(slug: CategorySlug): Promise<Category> {
 
   return category;
 }
+
+export async function getCategoryWithVariants(
+  categoryId: number
+): Promise<CategoryWithVariants | null> {
+  const category = await prisma.category.findUnique({
+    where: { id: categoryId },
+    include: {
+      categoryVariants: {
+        orderBy: { sortOrder: "asc" },
+      },
+    },
+  });
+
+  return category;
+}