@numueg/theme-cli 0.6.0 → 0.6.1

package/dist/index.js

@@ -3828,6 +3828,14 @@ export default function ProductDetails({ settings }: SectionProps) {
   const productName = product.name;
   const productId = product.id;
 
+  // Cap the quantity stepper to the selected variant's stock (the backend
+  // enforces this too). No per-variant stock \u21D2 unbounded.
+  const stockCap =
+    activeVariant && typeof activeVariant.inventory_quantity === "number"
+      ? Math.max(0, activeVariant.inventory_quantity)
+      : Infinity;
+  const maxQty = stockCap === Infinity ? Infinity : Math.max(1, stockCap);
+
   const purchasable =
     product.in_stock &&
     (activeVariant?.is_in_stock ?? true) &&
@@ -3848,7 +3856,7 @@ export default function ProductDetails({ settings }: SectionProps) {
           .join("\\n");
         await updateNote((kept ? kept + "\\n" : "") + tag + pickedSize);
       }
-      await addItem(productId, activeVariant?.id, qty);
+      await addItem(productId, activeVariant?.id, Math.min(qty, maxQty));
     } finally {
       setPending(false);
     }
@@ -3929,11 +3937,11 @@ export default function ProductDetails({ settings }: SectionProps) {
         <div className="flex items-center gap-3 mb-5">
           <span className="text-sm font-semibold">{t("Quantity", "\u0627\u0644\u0643\u0645\u064A\u0629")}</span>
           <div className="inline-flex items-center border rounded-md">
-            <button type="button" className="px-3 py-2" onClick={() => setQty((q) => Math.max(1, q - 1))}>
+            <button type="button" className="px-3 py-2 disabled:opacity-40" disabled={qty <= 1} onClick={() => setQty((q) => Math.max(1, q - 1))}>
               \u2212
             </button>
-            <span className="px-3">{qty}</span>
-            <button type="button" className="px-3 py-2" onClick={() => setQty((q) => q + 1)}>
+            <span className="px-3">{Math.min(qty, maxQty)}</span>
+            <button type="button" className="px-3 py-2 disabled:opacity-40" disabled={qty >= maxQty} onClick={() => setQty((q) => Math.min(maxQty, q + 1))}>
               +
             </button>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@numueg/theme-cli",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "CLI for developing, validating, building, linting, and publishing NUMU storefront themes",
   "keywords": [
     "numu",

package/templates/scaffold/src/sections/product_details.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   useProductOptional,
   useVariantSelection,
@@ -98,6 +98,11 @@ export default function ProductDetails({ id, settings }: EmpSectionProps) {
 
   const images = product.images ?? [];
   const mainImage = images[activeImg] ?? images[0];
+  // Stock to surface in the badge/button: the selected variant's when one is
+  // resolved (so "In stock" never sits next to a dead button), else product.
+  const displayInStock = activeVariant
+    ? (activeVariant.is_in_stock ?? activeVariant.in_stock ?? product.in_stock)
+    : product.in_stock;
   const purchasable =
     product.in_stock &&
     (activeVariant?.is_in_stock ?? true) &&
@@ -107,6 +112,20 @@ export default function ProductDetails({ id, settings }: EmpSectionProps) {
   const productName = product.name;
   const selectedVariantId = activeVariant?.id ?? pickedId;
 
+  // Cap the quantity stepper to the selected variant's available stock so the
+  // buyer can't choose more than exists (the backend enforces this too; this
+  // keeps the UI honest). No per-variant stock ⇒ unbounded.
+  const stockCap =
+    activeVariant && typeof activeVariant.inventory_quantity === "number"
+      ? Math.max(0, activeVariant.inventory_quantity)
+      : Infinity;
+  const maxQty = stockCap === Infinity ? Infinity : Math.max(1, stockCap);
+  useEffect(() => {
+    setQty((q) => Math.min(q, maxQty));
+  }, [maxQty]);
+  const lowStockLeft =
+    stockCap !== Infinity && stockCap > 0 && stockCap <= 5 ? stockCap : null;
+
   const href = `/products/${product.slug}`;
   const shareUrl = shop?.formatUrl ? shop.formatUrl(href) : href;
   const enc = encodeURIComponent(shareUrl);
@@ -133,7 +152,7 @@ export default function ProductDetails({ id, settings }: EmpSectionProps) {
         const next = `${kept ? `${kept}\n` : ""}${tag}${pickedSize}`;
         await updateNote(next);
       }
-      await addItem(productId, selectedVariantId, qty);
+      await addItem(productId, selectedVariantId, Math.min(qty, maxQty));
       openCart();
     } finally {
       setPending(false);
@@ -220,8 +239,8 @@ export default function ProductDetails({ id, settings }: EmpSectionProps) {
               ) : null}
               {formatMoney(activePrice, currency)}
             </p>
-            <span className={`nt-pdp__stock${product.in_stock ? " is-in" : " is-out"}`}>
-              {product.in_stock ? t("In stock", "متوفر") : t("Out of stock", "نفذ المخزون")}
+            <span className={`nt-pdp__stock${displayInStock ? " is-in" : " is-out"}`}>
+              {displayInStock ? t("In stock", "متوفر") : t("Out of stock", "نفذ المخزون")}
               <span className="nt-pdp__dot" aria-hidden />
             </span>
           </div>
@@ -341,14 +360,19 @@ export default function ProductDetails({ id, settings }: EmpSectionProps) {
           <div className="nt-pdp__qtyblock">
             <span className="nt-pdp__opt-label">{t("Quantity", "الكمية")}</span>
             <div className="nt-qty nt-pdp__qty" aria-label={t("Quantity", "الكمية")}>
-              <button type="button" aria-label={t("Decrease", "تقليل")} onClick={() => setQty((q) => Math.max(1, q - 1))}>
+              <button type="button" aria-label={t("Decrease", "تقليل")} disabled={qty <= 1} onClick={() => setQty((q) => Math.max(1, q - 1))}>
                 −
               </button>
-              <span>{qty}</span>
-              <button type="button" aria-label={t("Increase", "زيادة")} onClick={() => setQty((q) => q + 1)}>
+              <span>{Math.min(qty, maxQty)}</span>
+              <button type="button" aria-label={t("Increase", "زيادة")} disabled={qty >= maxQty} onClick={() => setQty((q) => Math.min(maxQty, q + 1))}>
                 +
               </button>
             </div>
+            {lowStockLeft != null ? (
+              <span className="nt-pdp__hint">
+                {t(`Only ${lowStockLeft} left`, `باقي ${lowStockLeft} فقط`)}
+              </span>
+            ) : null}
           </div>
 
           {/* CTAs */}
@@ -361,7 +385,7 @@ export default function ProductDetails({ id, settings }: EmpSectionProps) {
           >
             {pending ? (
               "..."
-            ) : !product.in_stock ? (
+            ) : !displayInStock ? (
               t("Sold out", "نفذ المخزون")
             ) : needsSize && !pickedSize ? (
               t("Select a size", "اختر المقاس")