feat(ecommerce): mensaje de urgencia por inventario real

Expone ProductVariant.inventoryQuantity (ya calculado desde
variant.inventory_quantity en Medusa, hoy colapsado al booleano
available) y lo usa para mostrar "Quedan N" cuando el stock real es
bajo (<=5), tanto en la tarjeta de producto como en la ficha. null
indica inventario no gestionado (backorder / manage_inventory=false),
donde nunca se muestra un numero. ADR 0005 seccion 3 (patron eBay).

Catalogo mock actualizado (data/products.json) con
inventoryQuantity=null en todas las variantes para seguir tipando
contra Product[] via `satisfies`.

workloads/ecommerce/app/catalog/page.tsx

@@ -41,7 +41,6 @@ export default async function CatalogPage({ searchParams }: CatalogPageProps) {
     <CatalogClient
       key={`${category}:${collection}:${query}`}
       products={products}
-      categories={categories}
       categoryGroups={categoryGroups}
       initialCategory={category}
       initialCollection={collection}

workloads/ecommerce/components/catalog/catalog-client.tsx

@@ -1,62 +1,22 @@
 "use client";
 
-import Link from "next/link";
-import { ChevronRight, SlidersHorizontal, X } from "lucide-react";
+import { SlidersHorizontal, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { ProductCard } from "@/components/product/product-card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import type { Category, Product } from "@/lib/headless/types";
+import type { Product } from "@/lib/headless/types";
 
 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 = "",
@@ -95,20 +55,29 @@ 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]);
 
   const filtered = useMemo(
     () =>
       products
-        .filter(
-          (product) =>
-            matchesQuery(product, query) &&
-            (category === "Todos" || matchesCategory(product, allowedCategories)) &&
-            matchesCollection(product, collection) &&
-            matchesBrand(product, brand) &&
-            matchesAge(product, age) &&
-            matchesPrice(product, maxPrice),
-        )
+        .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)
+          );
+        })
         .sort((a, b) =>
           sort === "name"
             ? a.name.localeCompare(b.name, "es")
@@ -119,57 +88,6 @@ export function CatalogClient({
     [age, allowedCategories, brand, category, collection, maxPrice, products, query, sort],
   );
 
-  // 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");
@@ -183,27 +101,6 @@ 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>
@@ -237,10 +134,9 @@ export function CatalogClient({
             values={categories}
             selected={category}
             onChange={setCategory}
-            counts={categoryCounts}
           />
-          <Filter title="Marca" values={brands} selected={brand} onChange={setBrand} counts={brandCounts} />
-          <Filter title="Edad" values={ages} selected={age} onChange={setAge} counts={ageCounts} />
+          <Filter title="Marca" values={brands} selected={brand} onChange={setBrand} />
+          <Filter title="Edad" values={ages} selected={age} onChange={setAge} />
 
           <fieldset>
             <legend className="mb-3 text-sm font-black">Precio máximo</legend>
@@ -309,13 +205,11 @@ function Filter({
   values,
   selected,
   onChange,
-  counts,
 }: {
   title: string;
   values: string[];
   selected: string;
   onChange: (value: string) => void;
-  counts?: Record<string, number>;
 }) {
   return (
     <fieldset>
@@ -333,7 +227,6 @@ function Filter({
             }`}
           >
             {value}
-            {counts && <span className="ml-1 opacity-60">({counts[value] ?? 0})</span>}
           </button>
         ))}
       </div>

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

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

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

@@ -1,14 +1,22 @@
 "use client";
 
-import { CheckCircle2, ShoppingBag, Truck } from "lucide-react";
+import { CheckCircle2, ShoppingBag, TriangleAlert, Truck } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import type { Product } from "@/lib/headless/types";
-import { formatMoney } from "@/lib/utils";
+import { formatMoney, LOW_STOCK_THRESHOLD } 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);
-  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>;
+  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>;
 }

workloads/ecommerce/data/products.json

@@ -30,7 +30,8 @@
         "id": "ari-001-toy-story-5-rex-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-001-toy-story-5-rex.webp"
@@ -66,7 +67,8 @@
         "id": "ari-002-toy-story-5-buzz-lightyear-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-002-toy-story-5-buzz-lightyear.webp"
@@ -102,7 +104,8 @@
         "id": "ari-003-toy-story-5-jessie-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-003-toy-story-5-jessie.webp"
@@ -138,7 +141,8 @@
         "id": "ari-004-toy-story-5-woody-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-004-toy-story-5-woody.webp"
@@ -174,7 +178,8 @@
         "id": "ari-005-intensamente-furia-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-005-intensamente-furia.webp"
@@ -210,7 +215,8 @@
         "id": "ari-006-intensamente-tristeza-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-006-intensamente-tristeza.webp"
@@ -246,7 +252,8 @@
         "id": "ari-007-minnie-y-mickey-mouse-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-007-minnie-y-mickey-mouse.webp"
@@ -282,7 +289,8 @@
         "id": "ari-008-angel-lilo-y-stitch-default",
         "name": "Presentación",
         "value": "Edición original",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-008-angel-lilo-y-stitch.webp"
@@ -318,7 +326,8 @@
         "id": "ari-009-mochilas-disney-coleccion-marvel-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-009-mochilas-disney-coleccion-marvel.webp"
@@ -354,7 +363,8 @@
         "id": "ari-010-mochila-ligera-y-resistente-al-agua-de-d-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp"
@@ -390,7 +400,8 @@
         "id": "ari-011-mochila-escolar-de-spider-man-de-disney--default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-011-mochila-escolar-de-spider-man-de-disney-.webp"
@@ -426,7 +437,8 @@
         "id": "ari-012-disney-mochila-de-poliester-ultraligera--default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-012-disney-mochila-de-poliester-ultraligera-.webp"
@@ -462,7 +474,8 @@
         "id": "ari-013-mochila-pequena-bob-esponja-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-013-mochila-pequena-bob-esponja.webp"
@@ -498,7 +511,8 @@
         "id": "ari-014-mochila-casual-de-gran-capacidad-con-est-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-014-mochila-casual-de-gran-capacidad-con-est.webp"
@@ -534,7 +548,8 @@
         "id": "ari-015-mochila-escolar-estilo-britanico-de-disn-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-015-mochila-escolar-estilo-britanico-de-disn.webp"
@@ -570,7 +585,8 @@
         "id": "ari-016-disney-mochila-iron-man-de-poliester-ult-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-016-disney-mochila-iron-man-de-poliester-ult.webp"
@@ -606,7 +622,8 @@
         "id": "ari-017-mochila-de-disney-marvel-capitan-america-default",
         "name": "Presentación",
         "value": "Rosa",
-        "available": true
+        "available": true,
+        "inventoryQuantity": null
       }
     ],
     "thumbnail": "/images/thumbnails/ari-017-mochila-de-disney-marvel-capitan-america.webp"

workloads/ecommerce/lib/headless/providers/medusa.ts

@@ -157,11 +157,19 @@ 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,
   };
 }
 

workloads/ecommerce/lib/headless/types.ts

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

workloads/ecommerce/lib/utils.ts

@@ -13,3 +13,8 @@ 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;