create-brainerce-store 1.78.0 → 1.80.0

package/templates/nextjs/ui-canvas/product/product-card.tsx

@@ -1,165 +1,174 @@
-'use client';
-
-import { useState } from 'react';
-import { Link, useRouter } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { Product } from 'brainerce';
-import { getProductPriceInfo, formatPrice } from 'brainerce';
-import { pickDisplayPrice, pickDisplayPriceRange } from '@/core/lib/display-price';
-import { useTranslations } from '@/core/lib/translations';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { StockBadge } from '@/ui/product/stock-badge';
-import { DiscountBadge } from '@/ui/product/discount-badge';
-import { useCart } from '@/core/providers/store-provider';
-import { useCurrency } from '@/core/lib/use-currency';
-import { trackAddToCart } from '@/core/lib/tracking';
-import { cn } from '@/core/lib/utils';
-
-interface ProductCardProps {
-  product: Product;
-  className?: string;
-}
-
-function VariantPriceRange({ product }: { product: Product }) {
-  const fallbackCurrency = useCurrency();
-  // ⛔ Region-aware. A range built from priceMin/priceMax alone stays in the
-  // store currency while the single-price card beside it converts, so a
-  // variable product would quote a different currency from its neighbours.
-  const range = pickDisplayPriceRange(product, fallbackCurrency);
-  if (!range) return null;
-  const { min, max, currency } = range;
-
-  return (
-    <span>
-      {min === max
-        ? (formatPrice(min, { currency }) as string)
-        : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
-    </span>
-  );
-}
-
-export function ProductCard({ product, className }: ProductCardProps) {
-  const t = useTranslations('common');
-  const tp = useTranslations('productDetail');
-  const tProd = useTranslations('products');
-  const router = useRouter();
-  const { refreshCart } = useCart();
-  const fallbackCurrency = useCurrency();
-  // FX overlay (PRD §23): prefer the region-converted display values when the
-  // storefront passed regionId to getProducts. Otherwise fall back to the
-  // canonical store-currency basePrice / salePrice.
-  const display = pickDisplayPrice(product, fallbackCurrency);
-  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
-  const mainImage = product.images?.[0];
-  const imageUrl = mainImage?.url || null;
-  const slug = product.slug || product.id;
-  const isVariable = product.type === 'VARIABLE';
-
-  const [adding, setAdding] = useState(false);
-  const [added, setAdded] = useState(false);
-
-  // `!== false`, not `=== true`, and that matters for KIT products: a kit
-  // carries NO `inventory` object of its own (its availability is derived from
-  // its components), so a strict truthy check would render every kit as out of
-  // stock. A kit also falls through `isVariable` above and adds by `productId`
-  // alone, which is correct — kits take no variantId and no selections.
-  const canPurchase = product.inventory?.canPurchase !== false;
-
-  async function handleAddToCart(e: React.MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (isVariable) {
-      router.push(`/products/${slug}`);
-      return;
-    }
-
-    if (adding || !canPurchase) return;
-
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      await client.smartAddToCart({ productId: product.id, quantity: 1 });
-      await refreshCart();
-      // Quick-add from a grid card is a real add_to_cart — without this the
-      // ad platforms only ever see adds made from a product page. Reported in
-      // the DISPLAYED currency (region-converted when the storefront passed a
-      // regionId), because that is what the shopper is actually being charged.
-      trackAddToCart(product, null, 1, display.salePrice ?? display.price, display.currency);
-      setAdded(true);
-      setTimeout(() => setAdded(false), 2000);
-    } catch (err) {
-      console.error('Failed to add to cart:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <article className={cn(className)}>
-      {/* DESIGN ME — product card (grid/listing unit): image, badges, name, price, stock, add-to-cart; product data arrives as a prop from useHomeData()/useProductListing(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <figure>
-        <Link href={`/products/${slug}`}>
-          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-          <div className="relative aspect-square">
-            {imageUrl ? (
-              <Image
-                src={imageUrl}
-                alt={mainImage?.alt || product.name}
-                fill
-                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-              />
-            ) : (
-              <span className="sr-only">{product.name}</span>
-            )}
-          </div>
-        </Link>
-        <figcaption className="sr-only">{product.name}</figcaption>
-      </figure>
-
-      {/* Badges */}
-      <div className="flex flex-wrap gap-1">
-        {isOnSale && <span>{t('sale')}</span>}
-        <DiscountBadge discount={product.discount} />
-        {product.isDownloadable && <span>{tp('digitalProduct')}</span>}
-      </div>
-
-      {/* Categories */}
-      {product.categories && product.categories.length > 0 && (
-        <ul className="flex flex-wrap gap-1">
-          {product.categories.slice(0, 2).map((cat) => (
-            <li key={cat.id}>{cat.name}</li>
-          ))}
-        </ul>
-      )}
-
-      {/* Name — clickable */}
-      <h3>
-        <Link href={`/products/${slug}`}>{product.name}</Link>
-      </h3>
-
-      {/* Price */}
-      {isVariable ? (
-        <VariantPriceRange product={product} />
-      ) : (
-        <PriceDisplay
-          price={display.price ?? originalPrice}
-          salePrice={display.salePrice ?? (isOnSale ? price : undefined)}
-          currency={display.currency}
-          size="sm"
-        />
-      )}
-
-      {/* Stock */}
-      <StockBadge inventory={product.inventory} />
-
-      {/* Add to cart (variable products route to the product page for option selection) */}
-      {(isVariable || canPurchase) && (
-        <button type="button" onClick={handleAddToCart} disabled={adding}>
-          {added ? tp('addedToCart') : isVariable ? tProd('selectOptions') : tp('addToCart')}
-        </button>
-      )}
-    </article>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { Link, useRouter } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { Product } from 'brainerce';
+import { getProductPriceInfo, formatPrice } from 'brainerce';
+import { pickDisplayPrice, pickDisplayPriceRange } from '@/core/lib/display-price';
+import { useTranslations } from '@/core/lib/translations';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { StockBadge } from '@/ui/product/stock-badge';
+import { canPurchaseProduct } from '@/core/lib/kit';
+import { DiscountBadge } from '@/ui/product/discount-badge';
+import { useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { trackAddToCart } from '@/core/lib/tracking';
+import { cn } from '@/core/lib/utils';
+
+interface ProductCardProps {
+  product: Product;
+  className?: string;
+}
+
+function VariantPriceRange({ product }: { product: Product }) {
+  const fallbackCurrency = useCurrency();
+  // ⛔ Region-aware. A range built from priceMin/priceMax alone stays in the
+  // store currency while the single-price card beside it converts, so a
+  // variable product would quote a different currency from its neighbours.
+  const range = pickDisplayPriceRange(product, fallbackCurrency);
+  if (!range) return null;
+  const { min, max, currency } = range;
+
+  return (
+    <span>
+      {min === max
+        ? (formatPrice(min, { currency }) as string)
+        : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
+    </span>
+  );
+}
+
+export function ProductCard({ product, className }: ProductCardProps) {
+  const t = useTranslations('common');
+  const tp = useTranslations('productDetail');
+  const tProd = useTranslations('products');
+  const router = useRouter();
+  const { refreshCart } = useCart();
+  const fallbackCurrency = useCurrency();
+  // FX overlay (PRD §23): prefer the region-converted display values when the
+  // storefront passed regionId to getProducts. Otherwise fall back to the
+  // canonical store-currency basePrice / salePrice.
+  const display = pickDisplayPrice(product, fallbackCurrency);
+  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
+  const mainImage = product.images?.[0];
+  const imageUrl = mainImage?.url || null;
+  const slug = product.slug || product.id;
+  const isVariable = product.type === 'VARIABLE';
+
+  const [adding, setAdding] = useState(false);
+  const [added, setAdded] = useState(false);
+
+  // ⛔ A KIT carries NO `inventory` object — its stock is on `kitAvailable`
+  // (`null` = unlimited, `0` = not sellable). Reading `inventory` here left a
+  // SOLD-OUT kit with an enabled add-to-cart button, because
+  // `undefined?.canPurchase !== false` is `true`. `canPurchaseProduct` reads
+  // the right field per product type, and keeps the `!== false` rule so a store
+  // that tracks no inventory at all can still sell.
+  // A kit also falls through `isVariable` above and adds by `productId` alone,
+  // which is correct — kits take no variantId and no selections.
+  const canPurchase = canPurchaseProduct(product);
+
+  async function handleAddToCart(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isVariable) {
+      router.push(`/products/${slug}`);
+      return;
+    }
+
+    if (adding || !canPurchase) return;
+
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      await client.smartAddToCart({ productId: product.id, quantity: 1 });
+      await refreshCart();
+      // Quick-add from a grid card is a real add_to_cart — without this the
+      // ad platforms only ever see adds made from a product page. Reported in
+      // the DISPLAYED currency (region-converted when the storefront passed a
+      // regionId), because that is what the shopper is actually being charged.
+      trackAddToCart(product, null, 1, display.salePrice ?? display.price, display.currency);
+      setAdded(true);
+      setTimeout(() => setAdded(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article className={cn(className)}>
+      {/* DESIGN ME — product card (grid/listing unit): image, badges, name, price, stock, add-to-cart; product data arrives as a prop from useHomeData()/useProductListing(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <figure>
+        <Link href={`/products/${slug}`}>
+          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+          <div className="relative aspect-square">
+            {imageUrl ? (
+              <Image
+                src={imageUrl}
+                alt={mainImage?.alt || product.name}
+                fill
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              />
+            ) : (
+              <span className="sr-only">{product.name}</span>
+            )}
+          </div>
+        </Link>
+        <figcaption className="sr-only">{product.name}</figcaption>
+      </figure>
+
+      {/* Badges */}
+      <div className="flex flex-wrap gap-1">
+        {isOnSale && <span>{t('sale')}</span>}
+        <DiscountBadge discount={product.discount} />
+        {product.isDownloadable && <span>{tp('digitalProduct')}</span>}
+      </div>
+
+      {/* Categories */}
+      {product.categories && product.categories.length > 0 && (
+        <ul className="flex flex-wrap gap-1">
+          {product.categories.slice(0, 2).map((cat) => (
+            <li key={cat.id}>{cat.name}</li>
+          ))}
+        </ul>
+      )}
+
+      {/* Name — clickable */}
+      <h3>
+        <Link href={`/products/${slug}`}>{product.name}</Link>
+      </h3>
+
+      {/* Price */}
+      {isVariable ? (
+        <VariantPriceRange product={product} />
+      ) : (
+        <PriceDisplay
+          price={display.price ?? originalPrice}
+          salePrice={display.salePrice ?? (isOnSale ? price : undefined)}
+          currency={display.currency}
+          size="sm"
+        />
+      )}
+
+      {/* Stock */}
+      <StockBadge
+        inventory={product.inventory}
+        // Only a KIT has kit stock. Gating on `type` here keeps the badge and
+        // `resolveStockInfo()` using ONE definition of 'this is a kit'.
+        kitAvailable={product.type === 'KIT' ? product.kitAvailable : undefined}
+      />
+
+      {/* Add to cart (variable products route to the product page for option selection) */}
+      {(isVariable || canPurchase) && (
+        <button type="button" onClick={handleAddToCart} disabled={adding}>
+          {added ? tp('addedToCart') : isVariable ? tProd('selectOptions') : tp('addToCart')}
+        </button>
+      )}
+    </article>
+  );
+}

package/templates/nextjs/ui-canvas/product/product-client-section.tsx

@@ -251,6 +251,37 @@ export function ProductClientSection({
           )}
 
           {/* Variant Selector */}
+          {/* A KIT is bought as ONE line, but the shopper needs to see what is
+              in the box before deciding. These rows are display only — never add
+              them to the cart individually; the kit reserves its components on
+              its own. */}
+          {product.type === 'KIT' && product.kitComponents?.length ? (
+            <div className="mb-6">
+              <h2 className="mb-3 text-sm font-medium">{t('whatsInTheBox')}</h2>
+              <ul className="divide-y rounded-lg border">
+                {product.kitComponents.map((c) => (
+                  <li
+                    key={`${c.productId}-${c.variantId ?? ''}`}
+                    className="flex items-center gap-3 p-3"
+                  >
+                    {c.image ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={c.image}
+                        alt={c.name}
+                        className="h-10 w-10 shrink-0 rounded border object-cover"
+                      />
+                    ) : (
+                      <div className="bg-muted h-10 w-10 shrink-0 rounded border" />
+                    )}
+                    <span className="flex-1 text-sm">{c.name}</span>
+                    <span className="text-muted-foreground text-sm">x{c.quantity}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+
           {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
             <VariantSelector
               product={product}

package/templates/nextjs/ui-canvas/product/recommendation-section.tsx

@@ -1,105 +1,114 @@
-'use client';
-
-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(className)}>
-      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-      <span className="relative block aspect-square">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-          />
-        ) : null}
-      </span>
-      <span className="block">
-        <span className="block">{item.name}</span>
-        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-      </span>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/**
- * DESIGN ME — recommendation strip on the product page (upsells / related);
- * items come from useProductPage().recommendations, title is passed in.
- *
- * 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 RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn(className)}>
-      <h2>{title}</h2>
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/**
- * DESIGN ME — cross-sell strip on the cart page ("you might also need");
- * items come from useCartPage().cartRecs.
- *
- * 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 CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn(className)}>
-      <h2>{title}</h2>
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
+'use client';
+
+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(className)}>
+      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+      <span className="relative block aspect-square">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+          />
+        ) : null}
+      </span>
+      <span className="block">
+        <span className="block">{item.name}</span>
+        {priceIsUnresolved ? null : (
+          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+        )}
+      </span>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — recommendation strip on the product page (upsells / related);
+ * items come from useProductPage().recommendations, title is passed in.
+ *
+ * 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 RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn(className)}>
+      <h2>{title}</h2>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — cross-sell strip on the cart page ("you might also need");
+ * items come from useCartPage().cartRecs.
+ *
+ * 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 CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn(className)}>
+      <h2>{title}</h2>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}