create-brainerce-store 1.78.0 → 1.80.0

package/templates/nextjs/ui-canvas/product/stock-badge.tsx

@@ -5,9 +5,20 @@ import { cn } from '@/core/lib/utils';
 import { useTranslations } from '@/core/lib/translations';
 import { useStoreCapabilities } from '@/core/providers/store-provider';
 import { resolveLowStockThreshold } from '@/core/lib/capabilities';
+import { kitInventory } from '@/core/lib/kit';
 
 interface StockBadgeProps {
   inventory: InventoryInfo | null | undefined;
+  /**
+   * KIT stock — pass `product.kitAvailable` whenever the product may be a kit.
+   *
+   * ⛔ A KIT has NO `inventory` block, so passing `inventory` alone sent every
+   * kit down the `!inventory` branch below and printed a red "Out of stock" on
+   * every card, category page, search result and product page — while the buy
+   * button beside it stayed enabled. `undefined` here means "not a kit";
+   * `null` means "unlimited". They are not interchangeable.
+   */
+  kitAvailable?: number | null;
   /**
    * Override the threshold. Leave it unset — the merchant's configured value
    * comes from the store's capabilities, and a hardcoded number here shows the
@@ -24,14 +35,21 @@ interface StockBadgeProps {
  *
  * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
-export function StockBadge({ inventory, lowStockThreshold, className }: StockBadgeProps) {
+export function StockBadge({
+  inventory,
+  kitAvailable,
+  lowStockThreshold,
+  className,
+}: StockBadgeProps) {
   const t = useTranslations('productDetail');
   // Merchant-configured, from the channel's capabilities. Falls back to the
   // platform default while the fetch is in flight or if it failed, and resolves
   // to 0 (nothing is ever low) when the merchant turned low-stock warnings off.
   const { capabilities } = useStoreCapabilities();
+  // A kit reports from `kitAvailable`; everything else from its inventory row.
+  const stock = kitAvailable !== undefined ? kitInventory(kitAvailable) : inventory;
   const label = getStockLabel(
-    inventory,
+    stock,
     lowStockThreshold ?? resolveLowStockThreshold(capabilities),
     t
   );
@@ -44,6 +62,8 @@ function getStockLabel(
   lowStockThreshold: number,
   t: (key: string) => string
 ): string {
+  // No stock signal at all. A KIT reaches here only when the caller forgot to
+  // pass `kitAvailable` — see the prop comment above.
   if (!inventory) return t('outOfStock');
 
   const { trackingMode, inStock, available } = inventory;