feat(ecommerce): tiles promocionales intercalados en el grid del catalogo

ADR 0005 seccion 3 (patron Walmart), ultimo item de la sub-fase de componentes visuales: "grid de catalogo con tiles promocionales intercalados, no solo tarjetas de producto homogeneas". `category-tiles.tsx` ya era ese mismo primitivo visual (usado en el home) -- se extrajo el tile individual a un componente exportado `PromoTile` (mismo look, sin cambio visual en el home) para reutilizarlo en `catalog-client.tsx`: un tile cada PROMO_TILE_INTERVAL=8 productos, ciclando por las categorias raiz (excluye la raiz que el usuario ya esta viendo via el breadcrumb de #40). Si no hay jerarquia de categorias disponible, la grilla queda igual que antes (solo productos) -- degradacion sin romper nada. Depende de #40 (breadcrumb + categoryNodes en CatalogClient) -- mismo archivo, se apila sobre esa rama en vez de main.
feat(ecommerce): breadcrumb real + conteos por filtro en el catalogo
2026-08-25 14:40:52 -05:00 · 2026-08-25 14:37:29 -05:00
9 changed files with 220 additions and 117 deletions
@@ -41,6 +41,7 @@ export default async function CatalogPage({ searchParams }: CatalogPageProps) {
    <CatalogClient
      key={`${category}:${collection}:${query}`}
      products={products}
+      categories={categories}
      categoryGroups={categoryGroups}
      initialCategory={category}
      initialCollection={collection}
@@ -1,22 +1,70 @@
 "use client";

-import { SlidersHorizontal, X } from "lucide-react";
+import Link from "next/link";
+import { ChevronRight, SlidersHorizontal, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import { PromoTile } from "@/components/home/category-tiles";
 import { ProductCard } from "@/components/product/product-card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import type { Product } from "@/lib/headless/types";
+import type { Category, Product } from "@/lib/headless/types";
+
+// Cada cuantas tarjetas de producto se intercala un tile promocional en
+// la grilla (patron Walmart, ADR 0005 seccion 3): grid con tiles
+// promocionales intercalados, no solo tarjetas homogeneas.
+const PROMO_TILE_INTERVAL = 8;
+
+type GridItem = { type: "product"; product: Product } | { type: "promo"; category: Category };

 type CatalogClientProps = {
  products: Product[];
+  categories?: Category[];
  categoryGroups?: Record<string, string[]>;
  initialCategory?: string;
  initialCollection?: string;
  initialQuery?: string;
 };

+function matchesQuery(product: Product, query: string): boolean {
+  if (!query) return true;
+  const search = [product.name, product.category, product.collection, product.brand].join(" ").toLowerCase();
+  return search.includes(query.toLowerCase());
+}
+function matchesCategory(product: Product, allowedCategories: string[]): boolean {
+  return allowedCategories.includes(product.category);
+}
+function matchesCollection(product: Product, collection: string): boolean {
+  return !collection || product.collection === collection;
+}
+function matchesBrand(product: Product, brand: string): boolean {
+  return brand === "Todas" || product.brand === brand;
+}
+function matchesAge(product: Product, age: string): boolean {
+  return age === "Todas" || product.ageRange === age;
+}
+function matchesPrice(product: Product, maxPrice: number): boolean {
+  return product.price === null || maxPrice === 0 || product.price <= maxPrice;
+}
+
+// Camina parentId hacia arriba desde la categoria seleccionada para armar
+// el breadcrumb real (Inicio > raiz > hija), igual que en Amazon.
+function buildBreadcrumb(categories: Category[], name: string): Category[] {
+  const node = categories.find((category) => category.name === name);
+  if (!node) return [];
+  const trail = [node];
+  let current = node;
+  while (current.parentId) {
+    const parent = categories.find((category) => category.id === current.parentId);
+    if (!parent) break;
+    trail.unshift(parent);
+    current = parent;
+  }
+  return trail;
+}
+
 export function CatalogClient({
  products,
+  categories: categoryNodes = [],
  categoryGroups = {},
  initialCategory = "Todos",
  initialCollection = "",
@@ -55,29 +103,25 @@ export function CatalogClient({
  // tiene la raiz asignada directamente. Si no es una raiz conocida, se
  // trata como el nombre de categoria exacto de siempre.
  const allowedCategories = categoryGroups[category] ?? [category];
+  const breadcrumb = useMemo(() => (category === "Todos" ? [] : buildBreadcrumb(categoryNodes, category)), [categoryNodes, category]);
+  // No promociona la misma categoria raiz que el usuario ya esta viendo.
+  const promoRoots = useMemo(() => {
+    const excludeRootId = breadcrumb[0]?.id;
+    return categoryNodes.filter((node) => !node.parentId && node.id !== excludeRootId);
+  }, [categoryNodes, breadcrumb]);

  const filtered = useMemo(
    () =>
      products
-        .filter((product) => {
-          const search = [
-            product.name,
-            product.category,
-            product.collection,
-            product.brand,
-          ]
-            .join(" ")
-            .toLowerCase();
-
-          return (
-            (!query || search.includes(query.toLowerCase())) &&
-            (category === "Todos" || allowedCategories.includes(product.category)) &&
-            (!collection || product.collection === collection) &&
-            (brand === "Todas" || product.brand === brand) &&
-            (age === "Todas" || product.ageRange === age) &&
-            (product.price === null || maxPrice === 0 || product.price <= maxPrice)
-          );
-        })
+        .filter(
+          (product) =>
+            matchesQuery(product, query) &&
+            (category === "Todos" || matchesCategory(product, allowedCategories)) &&
+            matchesCollection(product, collection) &&
+            matchesBrand(product, brand) &&
+            matchesAge(product, age) &&
+            matchesPrice(product, maxPrice),
+        )
        .sort((a, b) =>
          sort === "name"
            ? a.name.localeCompare(b.name, "es")
@@ -88,6 +132,77 @@ export function CatalogClient({
    [age, allowedCategories, brand, category, collection, maxPrice, products, query, sort],
  );

+  // Intercala un tile promocional cada PROMO_TILE_INTERVAL productos,
+  // ciclando por las categorias raiz -- si no hay jerarquia de
+  // categorias disponible, la grilla queda igual que antes (solo
+  // productos).
+  const gridItems = useMemo<GridItem[]>(() => {
+    if (promoRoots.length === 0) return filtered.map((product) => ({ type: "product", product }));
+
+    const items: GridItem[] = [];
+    let promoIndex = 0;
+    filtered.forEach((product, index) => {
+      items.push({ type: "product", product });
+      const isLast = index === filtered.length - 1;
+      if (!isLast && (index + 1) % PROMO_TILE_INTERVAL === 0) {
+        items.push({ type: "promo", category: promoRoots[promoIndex % promoRoots.length] });
+        promoIndex += 1;
+      }
+    });
+    return items;
+  }, [filtered, promoRoots]);
+
+  // Conteos por valor de filtro (patron Amazon: "Marca (12)"), calculados
+  // sobre los productos que ya pasan el resto de filtros activos -- cada
+  // dimension se cuenta excluyendose a si misma para reflejar cuantos
+  // resultados habria si se eligiera ese valor.
+  const categoryCounts = useMemo(() => {
+    const base = products.filter(
+      (product) => matchesQuery(product, query) && matchesCollection(product, collection) && matchesBrand(product, brand) && matchesAge(product, age) && matchesPrice(product, maxPrice),
+    );
+    const counts: Record<string, number> = { Todos: base.length };
+    for (const name of categories) {
+      if (name === "Todos") continue;
+      const allowed = categoryGroups[name] ?? [name];
+      counts[name] = base.filter((product) => matchesCategory(product, allowed)).length;
+    }
+    return counts;
+  }, [age, brand, categories, categoryGroups, collection, maxPrice, products, query]);
+
+  const brandCounts = useMemo(() => {
+    const base = products.filter(
+      (product) =>
+        matchesQuery(product, query) &&
+        (category === "Todos" || matchesCategory(product, allowedCategories)) &&
+        matchesCollection(product, collection) &&
+        matchesAge(product, age) &&
+        matchesPrice(product, maxPrice),
+    );
+    const counts: Record<string, number> = { Todas: base.length };
+    for (const value of brands) {
+      if (value === "Todas") continue;
+      counts[value] = base.filter((product) => product.brand === value).length;
+    }
+    return counts;
+  }, [age, allowedCategories, brands, category, collection, maxPrice, products, query]);
+
+  const ageCounts = useMemo(() => {
+    const base = products.filter(
+      (product) =>
+        matchesQuery(product, query) &&
+        (category === "Todos" || matchesCategory(product, allowedCategories)) &&
+        matchesCollection(product, collection) &&
+        matchesBrand(product, brand) &&
+        matchesPrice(product, maxPrice),
+    );
+    const counts: Record<string, number> = { Todas: base.length };
+    for (const value of ages) {
+      if (value === "Todas") continue;
+      counts[value] = base.filter((product) => product.ageRange === value).length;
+    }
+    return counts;
+  }, [ages, allowedCategories, brand, category, collection, maxPrice, products, query]);
+
  const reset = () => {
    setQuery("");
    setCategory("Todos");
@@ -101,6 +216,27 @@ export function CatalogClient({
  return (
    <div className="mx-auto max-w-7xl px-4 py-10">
      <div className="mb-8">
+        {breadcrumb.length > 0 && (
+          <nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
+            <Link href="/catalog" prefetch={false} className="hover:text-fuchsia-600">
+              Inicio
+            </Link>
+            {breadcrumb.map((node, index) => (
+              <span key={node.id} className="flex items-center gap-1.5">
+                <ChevronRight className="size-3" />
+                {index === breadcrumb.length - 1 ? (
+                  <span aria-current="page" className="text-slate-900">
+                    {node.name}
+                  </span>
+                ) : (
+                  <Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-fuchsia-600">
+                    {node.name}
+                  </Link>
+                )}
+              </span>
+            ))}
+          </nav>
+        )}
        <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">
          Catálogo completo
        </span>
@@ -134,9 +270,10 @@ export function CatalogClient({
            values={categories}
            selected={category}
            onChange={setCategory}
+            counts={categoryCounts}
          />
-          <Filter title="Marca" values={brands} selected={brand} onChange={setBrand} />
-          <Filter title="Edad" values={ages} selected={age} onChange={setAge} />
+          <Filter title="Marca" values={brands} selected={brand} onChange={setBrand} counts={brandCounts} />
+          <Filter title="Edad" values={ages} selected={age} onChange={setAge} counts={ageCounts} />

          <fieldset>
            <legend className="mb-3 text-sm font-black">Precio máximo</legend>
@@ -180,9 +317,13 @@ export function CatalogClient({

          {filtered.length ? (
            <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
-              {filtered.map((product) => (
-                <ProductCard key={product.id} product={product} />
-              ))}
+              {gridItems.map((item, index) =>
+                item.type === "product" ? (
+                  <ProductCard key={item.product.id} product={item.product} />
+                ) : (
+                  <PromoTile key={`promo-${index}`} category={item.category} className="min-h-[22rem]" />
+                ),
+              )}
            </div>
          ) : (
            <div className="grid min-h-80 place-items-center rounded-3xl border border-dashed border-slate-300 text-center">
@@ -205,11 +346,13 @@ function Filter({
  values,
  selected,
  onChange,
+  counts,
 }: {
  title: string;
  values: string[];
  selected: string;
  onChange: (value: string) => void;
+  counts?: Record<string, number>;
 }) {
  return (
    <fieldset>
@@ -227,6 +370,7 @@ function Filter({
            }`}
          >
            {value}
+            {counts && <span className="ml-1 opacity-60">({counts[value] ?? 0})</span>}
          </button>
        ))}
      </div>
@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 import type { Category } from "@/lib/headless/types";
+import { cn } from "@/lib/utils";

 type TileContent = { subtitle: string; image?: string; color: string };

@@ -20,29 +21,17 @@ const tileContent: Record<string, TileContent> = {

 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);
-
-  if (roots.length === 0) return null;
-
-  return (
-    <section className="mx-auto max-w-7xl px-4 py-14">
-      <div className="mb-8 flex items-end justify-between gap-4">
-        <div>
-          <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span>
-          <h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2>
-        </div>
-        <Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link>
-      </div>
-      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-        {roots.map((category) => {
+// Tile individual reutilizado tanto por la seccion de mundos del home
+// como por el grid del catalogo (tiles promocionales intercalados,
+// ADR 0005 seccion 3, patron Walmart) -- mismo primitivo visual, no un
+// componente nuevo.
+export function PromoTile({ category, className = "" }: { category: Category; className?: string }) {
  const content = tileContent[category.handle] ?? defaultTile;

  return (
    <Link
-              key={category.id}
      href={`/catalog?category=${encodeURIComponent(category.name)}`}
-              className={`group relative min-h-64 overflow-hidden rounded-[2rem] bg-gradient-to-br ${content.color} shadow-xl`}
+      className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] bg-gradient-to-br ${content.color} shadow-xl`, className)}
    >
      {content.image && (
        <>
@@ -61,7 +50,26 @@ export function CategoryTiles({ categories }: { categories: Category[] }) {
      </div>
    </Link>
  );
-        })}
+}
+
+export function CategoryTiles({ categories }: { categories: Category[] }) {
+  const roots = categories.filter((category) => !category.parentId);
+
+  if (roots.length === 0) return null;
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-14">
+      <div className="mb-8 flex items-end justify-between gap-4">
+        <div>
+          <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span>
+          <h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2>
+        </div>
+        <Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link>
+      </div>
+      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {roots.map((category) => (
+          <PromoTile key={category.id} category={category} />
+        ))}
      </div>
    </section>
  );
@@ -2,12 +2,12 @@

 import Image from "next/image";
 import Link from "next/link";
-import { Heart, ShoppingBag, Sparkles, TriangleAlert } from "lucide-react";
+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";
-import { formatMoney, LOW_STOCK_THRESHOLD } from "@/lib/utils";
+import { formatMoney } from "@/lib/utils";
 import { useCartStore } from "@/store/cart-store";
 import { useWishlistStore } from "@/store/wishlist-store";

@@ -23,14 +23,6 @@ export function ProductCard({ product, priority = false }: { product: Product; p
      : null;

  const [selectedVariantId, setSelectedVariantId] = useState(product.variants[0]?.id);
-  const selectedVariant = product.variants.find((variant) => variant.id === selectedVariantId) ?? product.variants[0];
-  const lowStock =
-    selectedVariant?.inventoryQuantity !== null &&
-    selectedVariant?.inventoryQuantity !== undefined &&
-    selectedVariant.inventoryQuantity > 0 &&
-    selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
-      ? selectedVariant.inventoryQuantity
-      : null;

  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">
@@ -64,9 +56,6 @@ export function ProductCard({ product, priority = false }: { product: Product; p
            ))}
          </div>
        )}
-        {lowStock !== null && (
-          <span className="flex items-center gap-1.5 text-xs font-bold text-amber-600"><TriangleAlert className="size-3.5" />Quedan {lowStock}</span>
-        )}
        <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>}
@@ -1,22 +1,14 @@
 "use client";

-import { CheckCircle2, ShoppingBag, TriangleAlert, Truck } from "lucide-react";
+import { CheckCircle2, ShoppingBag, Truck } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import type { Product } from "@/lib/headless/types";
-import { formatMoney, LOW_STOCK_THRESHOLD } from "@/lib/utils";
+import { formatMoney } from "@/lib/utils";
 import { useCartStore } from "@/store/cart-store";

 export function ProductPurchase({ product }: { product: Product }) {
  const [variantId, setVariantId] = useState(product.variants[0]?.id);
  const addItem = useCartStore((state) => state.addItem);
-  const selectedVariant = product.variants.find((variant) => variant.id === variantId) ?? product.variants[0];
-  const lowStock =
-    selectedVariant?.inventoryQuantity !== null &&
-    selectedVariant?.inventoryQuantity !== undefined &&
-    selectedVariant.inventoryQuantity > 0 &&
-    selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
-      ? selectedVariant.inventoryQuantity
-      : null;
-  return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
+  return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm"><span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span><span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
 }
@@ -30,8 +30,7 @@
        "id": "ari-001-toy-story-5-rex-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-001-toy-story-5-rex.webp"
@@ -67,8 +66,7 @@
        "id": "ari-002-toy-story-5-buzz-lightyear-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-002-toy-story-5-buzz-lightyear.webp"
@@ -104,8 +102,7 @@
        "id": "ari-003-toy-story-5-jessie-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-003-toy-story-5-jessie.webp"
@@ -141,8 +138,7 @@
        "id": "ari-004-toy-story-5-woody-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-004-toy-story-5-woody.webp"
@@ -178,8 +174,7 @@
        "id": "ari-005-intensamente-furia-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-005-intensamente-furia.webp"
@@ -215,8 +210,7 @@
        "id": "ari-006-intensamente-tristeza-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-006-intensamente-tristeza.webp"
@@ -252,8 +246,7 @@
        "id": "ari-007-minnie-y-mickey-mouse-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-007-minnie-y-mickey-mouse.webp"
@@ -289,8 +282,7 @@
        "id": "ari-008-angel-lilo-y-stitch-default",
        "name": "Presentación",
        "value": "Edición original",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-008-angel-lilo-y-stitch.webp"
@@ -326,8 +318,7 @@
        "id": "ari-009-mochilas-disney-coleccion-marvel-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-009-mochilas-disney-coleccion-marvel.webp"
@@ -363,8 +354,7 @@
        "id": "ari-010-mochila-ligera-y-resistente-al-agua-de-d-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp"
@@ -400,8 +390,7 @@
        "id": "ari-011-mochila-escolar-de-spider-man-de-disney--default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-011-mochila-escolar-de-spider-man-de-disney-.webp"
@@ -437,8 +426,7 @@
        "id": "ari-012-disney-mochila-de-poliester-ultraligera--default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-012-disney-mochila-de-poliester-ultraligera-.webp"
@@ -474,8 +462,7 @@
        "id": "ari-013-mochila-pequena-bob-esponja-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-013-mochila-pequena-bob-esponja.webp"
@@ -511,8 +498,7 @@
        "id": "ari-014-mochila-casual-de-gran-capacidad-con-est-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-014-mochila-casual-de-gran-capacidad-con-est.webp"
@@ -548,8 +534,7 @@
        "id": "ari-015-mochila-escolar-estilo-britanico-de-disn-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-015-mochila-escolar-estilo-britanico-de-disn.webp"
@@ -585,8 +570,7 @@
        "id": "ari-016-disney-mochila-iron-man-de-poliester-ult-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-016-disney-mochila-iron-man-de-poliester-ult.webp"
@@ -622,8 +606,7 @@
        "id": "ari-017-mochila-de-disney-marvel-capitan-america-default",
        "name": "Presentación",
        "value": "Rosa",
-        "available": true,
-        "inventoryQuantity": null
+        "available": true
      }
    ],
    "thumbnail": "/images/thumbnails/ari-017-mochila-de-disney-marvel-capitan-america.webp"
@@ -157,19 +157,11 @@ function mapVariant(variant: MedusaVariant): ProductVariant {
    variant.manage_inventory === false ||
    (variant.inventory_quantity ?? 0) > 0;

-  // null = inventario no gestionado (backorder o manage_inventory=false),
-  // no hay un numero real que mostrar como "quedan N".
-  const inventoryQuantity =
-    variant.allow_backorder === true || variant.manage_inventory === false
-      ? null
-      : (variant.inventory_quantity ?? 0);
-
  return {
    id: variant.id,
    name: option?.option?.title || "Presentación",
    value: option?.value || variant.title || "Estándar",
    available,
-    inventoryQuantity,
  };
 }

@@ -3,7 +3,6 @@ export interface ProductVariant {
  name: string;
  value: string;
  available: boolean;
-  inventoryQuantity: number | null;
 }

 export interface Product {
@@ -13,8 +13,3 @@ export function formatMoney(value: number | null, currency = "COP"): string {
    maximumFractionDigits: 0,
  }).format(value);
 }
-
-// Umbral desde el cual mostramos "Quedan N" en vez de solo "Disponible".
-// inventoryQuantity=null significa inventario no gestionado (backorder /
-// manage_inventory=false en Medusa) -- ahi nunca mostramos el mensaje.
-export const LOW_STOCK_THRESHOLD = 5;