fix(ecommerce): nav y tiles data-driven contra la jerarquia real de categorias

Sub-fase 2 de Etapa 2 (ADR 0005 seccion 6). Navbar y CategoryTiles usaban arrays hardcodeados (Figuras/Peluches/Mochilas/Marvel) que ya no coinciden con los nombres reales de categoria en Medusa desde que se elimino legacyProductMeta (PR #29) -- todos esos links de navegacion quedaron rotos silenciosamente (0 productos al filtrar). - lib/headless: nuevo tipo Category + metodo getCategories() en CatalogProvider (medusa via /store/product-categories, mock deriva de su catalogo plano, shopify sin implementar como el resto de sus metodos). - Navbar: arbol real de categorias (6 raices/21 nodos), dropdown de hijos por raiz en desktop, lista anidada en el sheet movil. Colecciones del sheet ahora se derivan de los productos reales en vez de un array hardcodeado con 2 nombres obsoletos (Marvel/Frozen vs. los reales Universo Marvel/Reino de Frozen). - CategoryTiles: tiles de home por categoria raiz real; imagen solo donde ya existe asset, gradiente honesto donde no (no hay fotografia para las 6 raices todavia, deuda explicita del ADR). - catalog-client/catalog page: cuando el query param `category` es una raiz con hijos, se expande a los nombres reales de sus hijos para que el filtro (igualdad exacta de producto.category) siga funcionando -- sin esto, tiles/nav apuntando a una raiz mostrarian 0 productos porque ningun producto tiene la raiz asignada directamente. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_013dunTcReWMKhWgCPkvAVHD
2026-08-24 21:21:18 -05:00
1 parent 0508c6328e
commit 8742ce714c
@@ -3,42 +3,28 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
-import { Suspense, useState } from "react";
+import { ChevronDown, Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
+import { Suspense, useMemo, useState } from "react";
 import { PredictiveSearch } from "@/components/search/predictive-search";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import type { Product } from "@/lib/headless/types";
+import type { Category, Product } from "@/lib/headless/types";
 import { useCartStore } from "@/store/cart-store";
 import { useWishlistStore } from "@/store/wishlist-store";

-type CategoryLink = {
-  label: string;
-  href: string;
-  category?: string;
-  collection?: string;
-  section?: string;
-  root?: boolean;
-};
+type CategoryNode = Category & { children: Category[] };

-const categories: CategoryLink[] = [
-  { label: "Juguetes para bebés", href: "/catalog?category=Figuras", category: "Figuras" },
-  {
-    label: "Educativos",
-    href: "/catalog?category=Figuras&section=educativos",
-    category: "Figuras",
-    section: "educativos",
-  },
-  { label: "Muñecas y peluches", href: "/catalog?category=Peluches", category: "Peluches" },
-  { label: "Acción y aventura", href: "/catalog?collection=Marvel", collection: "Marvel" },
-  { label: "Mochilas", href: "/catalog?category=Mochilas", category: "Mochilas" },
-  { label: "Variedades", href: "/catalog", root: true },
-];
+function buildCategoryTree(categories: Category[]): CategoryNode[] {
+  return categories
+    .filter((category) => !category.parentId)
+    .map((root) => ({
+      ...root,
+      children: categories.filter((category) => category.parentId === root.id),
+    }));
+}

-const collections = ["Toy Story", "Marvel", "Intensamente", "Lilo & Stitch", "Frozen"];
-
-export function Navbar({ products }: { products: Product[] }) {
+export function Navbar({ products, categories }: { products: Product[]; categories: Category[] }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [accountOpen, setAccountOpen] = useState(false);
  const items = useCartStore((state) => state.items);
@@ -50,6 +36,14 @@ export function Navbar({ products }: { products: Product[] }) {
  const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
  const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;

+  const tree = useMemo(() => buildCategoryTree(categories), [categories]);
+  // Derivado de los productos reales (no de un endpoint de colecciones):
+  // solo aparecen colecciones que de verdad tienen productos hoy.
+  const collections = useMemo(
+    () => [...new Set(products.map((product) => product.collection).filter(Boolean))],
+    [products],
+  );
+
  return (
    <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur-xl">
      <div className="bg-gradient-to-r from-amber-300 via-yellow-200 to-lime-200 px-4 py-2 text-center text-xs font-black text-slate-950 sm:text-sm">
@@ -77,8 +71,8 @@ export function Navbar({ products }: { products: Product[] }) {
        </div>
      </div>

-      <Suspense fallback={<DesktopCategoryNavigationFallback onOpenMenu={() => setMenuOpen(true)} />}>
-        <DesktopCategoryNavigation onOpenMenu={() => setMenuOpen(true)} />
+      <Suspense fallback={<DesktopCategoryNavigationFallback tree={tree} onOpenMenu={() => setMenuOpen(true)} />}>
+        <DesktopCategoryNavigation tree={tree} onOpenMenu={() => setMenuOpen(true)} />
      </Suspense>

      <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
@@ -90,14 +84,18 @@ export function Navbar({ products }: { products: Product[] }) {
          <div className="flex-1 overflow-y-auto p-6">
            <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
            <div className="grid gap-2">
-              <Suspense fallback={<MobileCategoryLinksFallback onNavigate={() => setMenuOpen(false)} />}>
-                <MobileCategoryLinks onNavigate={() => setMenuOpen(false)} />
+              <Suspense fallback={<MobileCategoryLinksFallback tree={tree} onNavigate={() => setMenuOpen(false)} />}>
+                <MobileCategoryLinks tree={tree} onNavigate={() => setMenuOpen(false)} />
              </Suspense>
            </div>
-            <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
-            <div className="flex flex-wrap gap-2">
-              {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
-            </div>
+            {collections.length > 0 && (
+              <>
+                <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
+                <div className="flex flex-wrap gap-2">
+                  {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
+                </div>
+              </>
+            )}
            <div className="mt-8 grid grid-cols-2 gap-3 sm:hidden">
              <Button variant="outline" onClick={() => { setMenuOpen(false); setAccountOpen(true); }}><UserRound className="size-4" />Cuenta</Button>
              <Button variant="outline" onClick={() => { setMenuOpen(false); openWishlist(); }}><Heart className="size-4" />Favoritos</Button>
@@ -127,29 +125,32 @@ function useCategoryNavigationState() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentCategory = searchParams.get("category") ?? "";
-  const currentCollection = searchParams.get("collection") ?? "";
-  const currentSection = searchParams.get("section") ?? "";
  const isCatalog = pathname === "/catalog";

-  const isCategoryActive = (item: CategoryLink) => {
-    if (!isCatalog) return false;
-
-    if (item.root) {
-      return !currentCategory && !currentCollection && !currentSection;
-    }
-
-    return (
-      (item.category ?? "") === currentCategory &&
-      (item.collection ?? "") === currentCollection &&
-      (item.section ?? "") === currentSection
-    );
+  return {
+    isAllActive: isCatalog && !currentCategory,
+    isActive: (name: string) => isCatalog && currentCategory === name,
  };
-
-  return { isCategoryActive };
 }

-function DesktopCategoryNavigation({ onOpenMenu }: { onOpenMenu: () => void }) {
-  const { isCategoryActive } = useCategoryNavigationState();
+function pillClass(active: boolean): string {
+  return `shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
+    active
+      ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
+      : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
+  }`;
+}
+
+function mobileLinkClass(active: boolean): string {
+  return `rounded-2xl border px-4 py-3 font-extrabold transition ${
+    active
+      ? "border-violet-500 bg-violet-50 text-violet-700"
+      : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
+  }`;
+}
+
+function DesktopCategoryNavigation({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+  const { isActive, isAllActive } = useCategoryNavigationState();

  return (
    <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
@@ -164,31 +165,56 @@ function DesktopCategoryNavigation({ onOpenMenu }: { onOpenMenu: () => void }) {
          <Menu />
        </Button>

-        {categories.map((category) => {
-          const active = isCategoryActive(category);
+        <Link href="/catalog" prefetch={false} aria-current={isAllActive ? "page" : undefined} className={pillClass(isAllActive)}>
+          Todo
+        </Link>

-          return (
+        {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={category.label}
-              href={category.href}
+              key={root.id}
+              href={`/catalog?category=${encodeURIComponent(root.name)}`}
              prefetch={false}
-              aria-current={active ? "page" : undefined}
-              className={`shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
-                active
-                  ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
-                  : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
-              }`}
+              aria-current={isActive(root.name) ? "page" : undefined}
+              className={pillClass(isActive(root.name))}
            >
-              {category.label}
+              {root.name}
            </Link>
-          );
-        })}
+          ),
+        )}
      </div>
    </nav>
  );
 }

-function DesktopCategoryNavigationFallback({ onOpenMenu }: { onOpenMenu: () => void }) {
+function DesktopCategoryNavigationFallback({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
  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]">
@@ -202,14 +228,13 @@ function DesktopCategoryNavigationFallback({ onOpenMenu }: { onOpenMenu: () => v
          <Menu />
        </Button>

-        {categories.map((category) => (
-          <Link
-            key={category.label}
-            href={category.href}
-            prefetch={false}
-            className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold text-white/90 transition hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
-          >
-            {category.label}
+        <Link href="/catalog" prefetch={false} className={pillClass(false)}>
+          Todo
+        </Link>
+
+        {tree.map((root) => (
+          <Link key={root.id} href={`/catalog?category=${encodeURIComponent(root.name)}`} prefetch={false} className={pillClass(false)}>
+            {root.name}
          </Link>
        ))}
      </div>
@@ -217,50 +242,75 @@ function DesktopCategoryNavigationFallback({ onOpenMenu }: { onOpenMenu: () => v
  );
 }

-function MobileCategoryLinks({ onNavigate }: { onNavigate: () => void }) {
-  const { isCategoryActive } = useCategoryNavigationState();
+function MobileCategoryLinks({ tree, onNavigate }: { tree: CategoryNode[]; onNavigate: () => void }) {
+  const { isActive, isAllActive } = useCategoryNavigationState();

  return (
    <>
-      {categories.map((category) => {
-        const active = isCategoryActive(category);
+      <Link
+        href="/catalog"
+        prefetch={false}
+        aria-current={isAllActive ? "page" : undefined}
+        onClick={onNavigate}
+        className={mobileLinkClass(isAllActive)}
+      >
+        Todo el catálogo
+      </Link>

-        return (
+      {tree.map((root) => (
+        <div key={root.id} className="contents">
          <Link
-            key={category.label}
-            href={category.href}
+            href={`/catalog?category=${encodeURIComponent(root.name)}`}
            prefetch={false}
-            aria-current={active ? "page" : undefined}
+            aria-current={isActive(root.name) ? "page" : undefined}
            onClick={onNavigate}
-            className={`rounded-2xl border px-4 py-3 font-extrabold transition ${
-              active
-                ? "border-violet-500 bg-violet-50 text-violet-700"
-                : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
-            }`}
+            className={mobileLinkClass(isActive(root.name))}
          >
-            {category.label}
+            {root.name}
          </Link>
-        );
-      })}
-    </>
-  );
-}
-
-function MobileCategoryLinksFallback({ onNavigate }: { onNavigate: () => void }) {
-  return (
-    <>
-      {categories.map((category) => (
-        <Link
-          key={category.label}
-          href={category.href}
-          prefetch={false}
-          onClick={onNavigate}
-          className="rounded-2xl border border-slate-200 px-4 py-3 font-extrabold transition hover:border-cyan-400 hover:bg-cyan-50"
-        >
-          {category.label}
-        </Link>
+          {root.children.map((child) => (
+            <Link
+              key={child.id}
+              href={`/catalog?category=${encodeURIComponent(child.name)}`}
+              prefetch={false}
+              aria-current={isActive(child.name) ? "page" : undefined}
+              onClick={onNavigate}
+              className={`${mobileLinkClass(isActive(child.name))} ml-4 text-sm`}
+            >
+              {child.name}
+            </Link>
+          ))}
+        </div>
      ))}
    </>
  );
 }

+function MobileCategoryLinksFallback({ tree, onNavigate }: { tree: CategoryNode[]; onNavigate: () => void }) {
+  return (
+    <>
+      <Link href="/catalog" prefetch={false} onClick={onNavigate} className={mobileLinkClass(false)}>
+        Todo el catálogo
+      </Link>
+
+      {tree.map((root) => (
+        <div key={root.id} className="contents">
+          <Link href={`/catalog?category=${encodeURIComponent(root.name)}`} prefetch={false} onClick={onNavigate} className={mobileLinkClass(false)}>
+            {root.name}
+          </Link>
+          {root.children.map((child) => (
+            <Link
+              key={child.id}
+              href={`/catalog?category=${encodeURIComponent(child.name)}`}
+              prefetch={false}
+              onClick={onNavigate}
+              className={`${mobileLinkClass(false)} ml-4 text-sm`}
+            >
+              {child.name}
+            </Link>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}