fix(ecommerce): corregir error de tipos en indice de tile promocional

tsconfig tiene noUncheckedIndexedAccess -- promoRoots[promoIndex % promoRoots.length] tipa como Category | undefined aunque en runtime siempre es valido (promoRoots.length > 0 ya se verifico antes de este punto). Extraido a una constante con guard explicito para que TS angoste el tipo. Sin cambio de comportamiento. Detectado por el build real en main tras el merge de #41 -- no se puede correr tsc localmente en esta maquina (ver notas de sesiones anteriores), asi que esto solo lo valida el CI post-merge.
Merge pull request 'fix(ecommerce): tiles promocionales intercalados en el grid del catalogo' (#41 ) from fix/etapa2-subfase3-tiles-promocionales into main
2026-08-25 15:18:12 -05:00 · 2026-08-25 20:10:32 +00:00 · 2026-08-25 20:09:39 +00:00 · 2026-08-25 19:56:04 +00:00 · 2026-08-25 19:55:06 +00:00 · 2026-08-25 19:43:26 +00:00
8 changed files with 76 additions and 25 deletions
@@ -144,8 +144,9 @@ export function CatalogClient({
    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] });
+      const promoCategory = promoRoots[promoIndex % promoRoots.length];
+      if (!isLast && (index + 1) % PROMO_TILE_INTERVAL === 0 && promoCategory) {
+        items.push({ type: "promo", category: promoCategory });
        promoIndex += 1;
      }
    });
@@ -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>}
@@ -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>;
 }
@@ -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"
@@ -25,7 +25,7 @@ spec:
        runAsUser: 1001
      containers:
        - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.147
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.154
          env:
            - name: HEADLESS_PROVIDER
              value: medusa
@@ -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,
  };
 }

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

 export interface Product {
@@ -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;
Author	SHA1	Message	Date
devops	3c0ce03e09	fix(ecommerce): corregir error de tipos en indice de tile promocional Build and Push Frontend / Escaneo de Secretos (Gitleaks) (pull_request) Successful in 25s Details Build and Push Frontend / Construir y Subir Imagen (pull_request) Skipped Details tsconfig tiene noUncheckedIndexedAccess -- promoRoots[promoIndex % promoRoots.length] tipa como Category \| undefined aunque en runtime siempre es valido (promoRoots.length > 0 ya se verifico antes de este punto). Extraido a una constante con guard explicito para que TS angoste el tipo. Sin cambio de comportamiento. Detectado por el build real en main tras el merge de #41 -- no se puede correr tsc localmente en esta maquina (ver notas de sesiones anteriores), asi que esto solo lo valida el CI post-merge.	2026-08-25 15:18:12 -05:00
devops	e7699befc5	Merge pull request 'fix(ecommerce): tiles promocionales intercalados en el grid del catalogo' (#41 ) from fix/etapa2-subfase3-tiles-promocionales into main Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 21s Details Build and Push Frontend / Construir y Subir Imagen (push) Failing after 5m10s Details	2026-08-25 20:10:32 +00:00
devops	44d6e10ea2	chore: release v1.0.154 [skip ci]	2026-08-25 20:09:39 +00:00
devops	f5de074ea1	Merge pull request 'fix(ecommerce): breadcrumb real + conteos por filtro en el catalogo' (#40 ) from fix/etapa2-subfase3-facetas-breadcrumb into main Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 26s Details Build and Push Frontend / Construir y Subir Imagen (push) Successful in 13m4s Details	2026-08-25 19:56:04 +00:00
devops	8e74d0b516	chore: release v1.0.153 [skip ci]	2026-08-25 19:55:06 +00:00
devops	e95ac086f0	Merge pull request 'fix(ecommerce): mensaje de urgencia por inventario real' (#39 ) from fix/etapa2-subfase3-urgencia-inventario into main Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 21s Details Build and Push Frontend / Construir y Subir Imagen (push) Successful in 9m4s Details	2026-08-25 19:43:26 +00:00
devops	6a78257d71	chore: release v1.0.149 [skip ci]	2026-08-25 19:42:14 +00:00
devops	8fc9df3b50	feat(ecommerce): mensaje de urgencia por inventario real Build and Push Frontend / Escaneo de Secretos (Gitleaks) (pull_request) Successful in 26s Details Build and Push Frontend / Construir y Subir Imagen (pull_request) Skipped Details 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`.	2026-08-25 14:33:14 -05:00