feat(ecommerce): selector de variante inline en tarjeta de producto

Reutiliza Product.variants[].{name,value,available}, ya expuesto por el
provider de Medusa (variant.options[0]), para swatches clicables en la
tarjeta del catalogo/home -- no solo en la ficha de producto. Solo se
muestra cuando el producto tiene mas de una variante; la variante
seleccionada se usa al agregar al carrito. ADR 0005 seccion 3 (patron
eBay), cero cambio de modelo de datos.

workloads/ecommerce/app/layout.tsx

@@ -6,6 +6,13 @@ import { Navbar } from "@/components/layout/navbar";
 import { WishlistDrawer } from "@/components/wishlist/wishlist-drawer";
 import { getCategories, getProducts } from "@/lib/headless/client";
 
+// El Navbar (categorias/colecciones/predictive search) vive en este layout
+// compartido -- si alguna pagina futura queda estatica, este fetch se
+// congelaria con datos de build time (mock) igual que le paso al home
+// (ver app/page.tsx). Forzarlo aca protege el nav en cualquier ruta, no
+// solo en las que hoy ya son dinamicas por otro motivo (searchParams, etc.).
+export const dynamic = "force-dynamic";
+
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://shop.cruzcloud.net"),
   title: { default: "ARI Shopping | Juguetes, regalos y variedades", template: "%s | ARI Shopping" },

workloads/ecommerce/app/page.tsx

@@ -7,6 +7,13 @@ import { ProductCarousel } from "@/components/product/product-carousel";
 import { Button } from "@/components/ui/button";
 import { getCategories, getProducts } from "@/lib/headless/client";
 
+// Sin esto, Next.js prerenderiza "/" en build time dentro del Dockerfile,
+// donde HEADLESS_PROVIDER/MEDUSA_* todavia no existen (solo se inyectan en
+// runtime via el Deployment) -- cae al provider mock y ese HTML queda
+// cacheado 1 año (visto en vivo: x-nextjs-prerender:1, s-maxage=31536000),
+// violando el flujo Admin -> revalidate del ADR 0005 justo en el home.
+export const dynamic = "force-dynamic";
+
 export default async function HomePage() {
   const [products, categories] = await Promise.all([getProducts(), getCategories()]);
   const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);

workloads/ecommerce/components/home/category-tiles.tsx

@@ -3,11 +3,13 @@ import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 import type { Category } from "@/lib/headless/types";
 
+type TileContent = { subtitle: string; image?: string; color: string };
+
 // No hay fotografia real todavia para las 6 categorias raiz de la taxonomia
 // (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
 // un asset en public/images/categories/. Las demas caen al tile de solo
 // gradiente en vez de mostrar una imagen que no les corresponde.
-const tileContent: Record<string, { subtitle: string; image?: string; color: string }> = {
+const tileContent: Record<string, TileContent> = {
   juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "from-yellow-300 to-orange-400" },
   "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "from-cyan-400 to-blue-500" },
   "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "from-pink-300 to-fuchsia-400" },
@@ -16,7 +18,7 @@ const tileContent: Record<string, { subtitle: string; image?: string; color: str
   variedades: { subtitle: "Un poco de todo", color: "from-violet-400 to-purple-600" },
 };
 
-const defaultTile = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
+const defaultTile: TileContent = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
 
 export function CategoryTiles({ categories }: { categories: Category[] }) {
   const roots = categories.filter((category) => !category.parentId);

workloads/ecommerce/components/layout/navbar.tsx

@@ -3,8 +3,8 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { ChevronDown, Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
+import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
-import { Suspense, useMemo, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { PredictiveSearch } from "@/components/search/predictive-search";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -151,94 +151,120 @@ function mobileLinkClass(active: boolean): string {
 
 function DesktopCategoryNavigation({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
   const { isActive, isAllActive } = useCategoryNavigationState();
+  return <CategoryNavBar tree={tree} onOpenMenu={onOpenMenu} isActive={isActive} isAllActive={isAllActive} />;
+}
 
+function DesktopCategoryNavigationFallback({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+  return <CategoryNavBar tree={tree} onOpenMenu={onOpenMenu} isActive={() => false} isAllActive={false} />;
+}
+
+function CategoryNavBar({
+  tree,
+  onOpenMenu,
+  isActive,
+  isAllActive,
+}: {
+  tree: CategoryNode[];
+  onOpenMenu: () => void;
+  isActive: (name: string) => boolean;
+  isAllActive: boolean;
+}) {
   return (
     <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
+      <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
         <Button
           variant="ghost"
           size="icon"
           onClick={onOpenMenu}
           aria-label="Abrir menú principal"
-          className="mr-3 shrink-0 text-white hover:bg-white/10"
+          className="mr-2 shrink-0 text-white hover:bg-white/10"
         >
           <Menu />
         </Button>
 
+        <DepartmentsMegaMenu tree={tree} isActive={isActive} />
+
         <Link href="/catalog" prefetch={false} aria-current={isAllActive ? "page" : undefined} className={pillClass(isAllActive)}>
           Todo
         </Link>
-
-        {tree.map((root) =>
-          root.children.length > 0 ? (
-            <div key={root.id} className="group relative shrink-0">
-              <Link
-                href={`/catalog?category=${encodeURIComponent(root.name)}`}
-                prefetch={false}
-                aria-current={isActive(root.name) ? "page" : undefined}
-                className={`flex items-center gap-1 ${pillClass(isActive(root.name))}`}
-              >
-                {root.name}
-                <ChevronDown className="size-3.5 opacity-70" />
-              </Link>
-              <div className="invisible absolute left-0 top-full z-50 min-w-56 -translate-y-1 rounded-2xl border border-slate-800 bg-slate-950 p-2 opacity-0 shadow-2xl transition group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
-                {root.children.map((child) => (
-                  <Link
-                    key={child.id}
-                    href={`/catalog?category=${encodeURIComponent(child.name)}`}
-                    prefetch={false}
-                    aria-current={isActive(child.name) ? "page" : undefined}
-                    className={`block rounded-xl px-3 py-2 text-sm font-bold transition ${
-                      isActive(child.name) ? "bg-violet-600 text-white" : "text-white/85 hover:bg-white/10"
-                    }`}
-                  >
-                    {child.name}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          ) : (
-            <Link
-              key={root.id}
-              href={`/catalog?category=${encodeURIComponent(root.name)}`}
-              prefetch={false}
-              aria-current={isActive(root.name) ? "page" : undefined}
-              className={pillClass(isActive(root.name))}
-            >
-              {root.name}
-            </Link>
-          ),
-        )}
       </div>
     </nav>
   );
 }
 
-function DesktopCategoryNavigationFallback({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActive: (name: string) => boolean }) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(event: PointerEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) setOpen(false);
+    }
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
   return (
-    <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
+    <div ref={containerRef} className="relative shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-      <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
+      <button
-        <Button
+        type="button"
-          variant="ghost"
+        onClick={() => setOpen((value) => !value)}
-          size="icon"
+        aria-expanded={open}
-          onClick={onOpenMenu}
+        aria-haspopup="true"
-          aria-label="Abrir menú principal"
+        className={`flex items-center gap-1.5 ${pillClass(open)}`}
-          className="mr-3 shrink-0 text-white hover:bg-white/10"
       >
-          <Menu />
+        <LayoutGrid className="size-4" />
-        </Button>
+        Departamentos
-
+        <ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
-        <Link href="/catalog" prefetch={false} className={pillClass(false)}>
+      </button>
-          Todo
-        </Link>
 
+      {open && (
+        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
             {tree.map((root) => (
-          <Link key={root.id} href={`/catalog?category=${encodeURIComponent(root.name)}`} prefetch={false} className={pillClass(false)}>
+              <div key={root.id}>
+                <Link
+                  href={`/catalog?category=${encodeURIComponent(root.name)}`}
+                  prefetch={false}
+                  aria-current={isActive(root.name) ? "page" : undefined}
+                  onClick={() => setOpen(false)}
+                  className={`block text-sm font-black uppercase tracking-wide transition ${
+                    isActive(root.name) ? "text-fuchsia-400" : "text-white hover:text-fuchsia-400"
+                  }`}
+                >
                   {root.name}
                 </Link>
+                {root.children.length > 0 && (
+                  <ul className="mt-2.5 grid gap-1.5">
+                    {root.children.map((child) => (
+                      <li key={child.id}>
+                        <Link
+                          href={`/catalog?category=${encodeURIComponent(child.name)}`}
+                          prefetch={false}
+                          aria-current={isActive(child.name) ? "page" : undefined}
+                          onClick={() => setOpen(false)}
+                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-violet-300" : "text-white/70 hover:text-white"}`}
+                        >
+                          {child.name}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
             ))}
           </div>
-    </nav>
+        </div>
+      )}
+    </div>
   );
 }
 

workloads/ecommerce/components/product/product-card.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Heart, ShoppingBag, Sparkles } from "lucide-react";
+import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { Product } from "@/lib/headless/types";
@@ -16,19 +17,52 @@ export function ProductCard({ product, priority = false }: { product: Product; p
   const wishlistHydrated = useWishlistStore((state) => state.hasHydrated);
   const toggleProduct = useWishlistStore((state) => state.toggleProduct);
   const isFavorite = wishlistHydrated && wishlistProducts.some((item) => item.id === product.id);
+  const discountPercent =
+    product.compareAtPrice && product.price
+      ? Math.round((1 - product.price / product.compareAtPrice) * 100)
+      : null;
+
+  const [selectedVariantId, setSelectedVariantId] = useState(product.variants[0]?.id);
 
   return (
     <article className="group flex h-full flex-col overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-lg shadow-slate-900/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-violet-500/10">
       <div className="relative aspect-square overflow-hidden bg-slate-50">
         <Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
-        <div className="absolute left-3 top-3 flex gap-2">{product.isNew && <Badge className="bg-fuchsia-500 text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-yellow-300 text-slate-950"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
+        <div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-rose-600 text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-fuchsia-500 text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-yellow-300 text-slate-950"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
         <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-fuchsia-500 text-white" : "bg-white/95 text-slate-900 hover:text-fuchsia-500"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
       </div>
       <div className="flex flex-1 flex-col space-y-3 p-5">
         <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-full bg-cyan-50 px-2 py-1 text-cyan-700">{product.collection}</span></div>
         <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-slate-950 group-hover:text-fuchsia-600">{product.name}</h3></Link>
         <p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
-        <div className="mt-auto flex items-center justify-between gap-3 pt-1"><strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong><Button variant="magenta" size="sm" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-4" />Agregar</Button></div>
+        {product.variants.length > 1 && (
+          <div className="flex flex-wrap gap-1.5">
+            {product.variants.map((variant) => (
+              <button
+                key={variant.id}
+                type="button"
+                disabled={!variant.available}
+                aria-pressed={selectedVariantId === variant.id}
+                aria-label={`${variant.name}: ${variant.value}`}
+                onClick={() => setSelectedVariantId(variant.id)}
+                className={`rounded-full border px-2.5 py-1 text-xs font-bold transition ${
+                  selectedVariantId === variant.id
+                    ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700"
+                    : "border-slate-200 text-slate-600 hover:border-slate-400"
+                } ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
+              >
+                {variant.value}
+              </button>
+            ))}
+          </div>
+        )}
+        <div className="mt-auto flex items-center justify-between gap-3 pt-1">
+          <div className="flex flex-col">
+            {product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
+            <strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong>
+          </div>
+          <Button variant="magenta" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
+        </div>
       </div>
     </article>
   );

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.135
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.147
           env:
             - name: HEADLESS_PROVIDER
               value: medusa