From 474ac3795b0117af6f175b548ce272f89dbf6843 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sat, 29 Aug 2026 20:22:55 +0000
Subject: [PATCH] fix(ecommerce): deshabilitar compra y mostrar "Agotado" sin
 stock real

variant.available (calculado en lib/headless/providers/medusa.ts a
partir de manage_inventory/allow_backorder/inventory_quantity) ya
llegaba correcto hasta el componente, pero ningun boton de compra lo
usaba -- se podia seguir agregando al carrito un producto con stock 0.

Afecta product-purchase.tsx (pagina de producto), mobile-add-to-cart.tsx
(barra fija mobile) y product-card.tsx (tarjetas de catalogo): boton
deshabilitado + label "Agotado" en los tres, mas badge/overlay en la
tarjeta de catalogo.
---
 .../components/product/mobile-add-to-cart.tsx | 16 ++++-
 .../components/product/product-card.tsx       | 10 +++-
 .../components/product/product-purchase.tsx   | 60 ++++++++++++++++++-
 3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
index 9ea2d4d..22bb946 100644
--- a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
+++ b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
@@ -7,5 +7,19 @@ import { useCartStore } from "@/store/cart-store";
 
 export function MobileAddToCart({ product }: { product: Product }) {
   const addItem = useCartStore((state) => state.addItem);
-  return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
+  const outOfStock = product.variants[0]?.available === false;
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden">
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        disabled={outOfStock}
+        onClick={() => addItem(product, product.variants[0]?.id)}
+      >
+        <ShoppingBag />
+        {outOfStock ? "Agotado" : "Añadir al carrito"}
+      </Button>
+    </div>
+  );
 }
diff --git a/workloads/ecommerce/components/product/product-card.tsx b/workloads/ecommerce/components/product/product-card.tsx
index 2893dec..8fd4dd2 100644
--- a/workloads/ecommerce/components/product/product-card.tsx
+++ b/workloads/ecommerce/components/product/product-card.tsx
@@ -24,7 +24,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
 
   const [selectedVariantId, setSelectedVariantId] = useState(product.variants[0]?.id);
   const selectedVariant = product.variants.find((variant) => variant.id === selectedVariantId) ?? product.variants[0];
+  const outOfStock = selectedVariant?.available === false;
   const lowStock =
+    !outOfStock &&
     selectedVariant?.inventoryQuantity !== null &&
     selectedVariant?.inventoryQuantity !== undefined &&
     selectedVariant.inventoryQuantity > 0 &&
@@ -36,7 +38,8 @@ export function ProductCard({ product, priority = false }: { product: Product; p
     <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
       <div className="relative aspect-square overflow-hidden bg-white">
         <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">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
+        <div className="absolute left-3 top-3 flex gap-2">{outOfStock && <Badge className="bg-rose-600 text-white">Agotado</Badge>}{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
+        {outOfStock && <div className="pointer-events-none absolute inset-0 bg-white/40" />}
         <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-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
       </div>
       <div className="flex flex-1 flex-col space-y-3 p-5">
@@ -67,12 +70,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
         {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>
         )}
+        {outOfStock && (
+          <span className="flex items-center gap-1.5 text-xs font-bold text-rose-600"><TriangleAlert className="size-3.5" />Sin stock</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>}
             <strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
           </div>
-          <Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
+          <Button variant="primary" size="sm" disabled={outOfStock} onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />{outOfStock ? "Agotado" : "Agregar"}</Button>
         </div>
       </div>
     </article>
diff --git a/workloads/ecommerce/components/product/product-purchase.tsx b/workloads/ecommerce/components/product/product-purchase.tsx
index bd993c8..a9a24ba 100644
--- a/workloads/ecommerce/components/product/product-purchase.tsx
+++ b/workloads/ecommerce/components/product/product-purchase.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CheckCircle2, ShoppingBag, TriangleAlert, Truck } from "lucide-react";
+import { CheckCircle2, ShoppingBag, TriangleAlert, Truck, XCircle } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import type { Product } from "@/lib/headless/types";
@@ -11,12 +11,68 @@ 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 outOfStock = selectedVariant?.available === false;
   const lowStock =
+    !outOfStock &&
     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-ari-marino bg-ari-marino text-white" : "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>{/* oculto en mobile: MobileAddToCart (barra fija abajo, lg:hidden) ya cubre esa misma accion ahi -- sin el hidden aqui, ambos se mostraban a la vez. */}<Button variant="primary" size="lg" className="hidden w-full lg:inline-flex" 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-ari-marino bg-ari-marino text-white" : "border-slate-200"
+            } ${variant.available === false ? "opacity-40" : ""}`}
+          >
+            {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>
+      {/* oculto en mobile: MobileAddToCart (barra fija abajo, lg:hidden) ya cubre esa misma accion ahi -- sin el hidden aqui, ambos se mostraban a la vez. */}
+      <Button
+        variant="primary"
+        size="lg"
+        className="hidden w-full lg:inline-flex"
+        disabled={outOfStock}
+        onClick={() => addItem(product, variantId)}
+      >
+        <ShoppingBag />
+        {outOfStock ? "Agotado" : "Añadir al carrito"}
+      </Button>
+      <div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">
+        {outOfStock ? (
+          <span className="flex items-center gap-2 font-bold text-rose-600">
+            <XCircle className="size-4" />
+            Agotado
+          </span>
+        ) : 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>
+  );
 }