create-brainerce-store 1.78.0 → 1.80.0

package/templates/nextjs/base/src/ui/product/recommendation-section.tsx

@@ -1,108 +1,117 @@
-'use client';
-
-import { Image as ImageIcon } from 'lucide-react';
-import { Link } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { ProductRecommendation } from 'brainerce';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { cn } from '@/core/lib/utils';
-
-interface RecommendationCardProps {
-  item: ProductRecommendation;
-  className?: string;
-}
-
-function RecommendationCard({ item, className }: RecommendationCardProps) {
-  const firstImage = item.images?.[0];
-  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
-  const slug = item.slug || item.id;
-  // ⛔ NOT region-converted, and it cannot be. `ProductRecommendation` is a
-  // trimmed shape that carries `basePrice` / `salePrice` only: the backend
-  // attaches no displayPrice/displayCurrency to it, so there is no converted
-  // amount to render and converting here would mean inventing an FX rate.
-  // These tiles stay in the store currency on a multi-region store. Do not
-  // "fix" it with a client-side conversion.
-  const basePrice = parseFloat(item.basePrice);
-  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
-  const isOnSale = salePrice != null && salePrice < basePrice;
-
-  return (
-    <Link
-      href={`/products/${slug}`}
-      className={cn(
-        // Card-equivalent shell (bg-card + border + rounded-lg) as a link —
-        // the whole recommendation tile is clickable.
-        'bg-card text-card-foreground group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
-        className
-      )}
-    >
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <ImageIcon className="h-10 w-10" strokeWidth={1.5} aria-hidden="true" />
-          </div>
-        )}
-      </div>
-      <div className="space-y-1.5 p-3">
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {item.name}
-        </h3>
-        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-      </div>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-export function CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <h2 className="text-foreground mb-4 text-lg font-semibold">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { Image as ImageIcon } from 'lucide-react';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { cn } from '@/core/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
+  const slug = item.slug || item.id;
+  // ⛔ NOT region-converted, and it cannot be. `ProductRecommendation` is a
+  // trimmed shape that carries `basePrice` / `salePrice` only: the backend
+  // attaches no displayPrice/displayCurrency to it, so there is no converted
+  // amount to render and converting here would mean inventing an FX rate.
+  // These tiles stay in the store currency on a multi-region store. Do not
+  // "fix" it with a client-side conversion.
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+  // ⛔ No price on a KIT tile. The recommendations endpoint does not resolve
+  // kits, so `item.basePrice` here is the kit's stored PLACEHOLDER — right only
+  // for FIXED pricing and wrong for every SUM / SUM_MINUS_PERCENT kit. Showing
+  // it would quote a price the product page then contradicts. The tile still
+  // links through, and the product page reads the resolved price from the API.
+  // Do NOT recompute a kit price on the client.
+  const priceIsUnresolved = item.type === 'KIT';
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn(
+        // Card-equivalent shell (bg-card + border + rounded-lg) as a link —
+        // the whole recommendation tile is clickable.
+        'bg-card text-card-foreground group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
+        className
+      )}
+    >
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <ImageIcon className="h-10 w-10" strokeWidth={1.5} aria-hidden="true" />
+          </div>
+        )}
+      </div>
+      <div className="space-y-1.5 p-3">
+        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+          {item.name}
+        </h3>
+        {priceIsUnresolved ? null : (
+          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+        )}
+      </div>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-lg font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/product/stock-badge.tsx

@@ -6,9 +6,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
@@ -18,15 +29,22 @@ interface StockBadgeProps {
   className?: string;
 }
 
-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();
   const threshold = lowStockThreshold ?? resolveLowStockThreshold(capabilities);
-  const label = getStockLabel(inventory, threshold, t);
-  const color = getStockColor(inventory, threshold);
+  // A kit reports from `kitAvailable`; everything else from its inventory row.
+  const stock = kitAvailable !== undefined ? kitInventory(kitAvailable) : inventory;
+  const label = getStockLabel(stock, threshold, t);
+  const color = getStockColor(stock, threshold);
 
   return (
     <Badge
@@ -43,6 +61,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;