create-brainerce-store 1.78.0 → 1.80.0

package/templates/nextjs/designs/atelier/ui/product/recommendation-section.tsx

@@ -1,101 +1,110 @@
-'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('group card card-hover block overflow-hidden', className)}
-    >
-      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-      <span className="relative block aspect-square overflow-hidden bg-secondary">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-            className="img-zoom object-cover"
-          />
-        ) : null}
-      </span>
-      <span className="block space-y-1 p-4">
-        <span className="block text-sm font-semibold leading-snug text-foreground group-hover:text-primary">
-          {item.name}
-        </span>
-        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-      </span>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/** Recommendation strip on the product page (upsells / related). */
-export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn('border-t pt-10', className)}>
-      <h2 className="mb-6 text-2xl">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
-        {items.slice(0, 4).map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/** Cross-sell strip on the cart page ("you might also need"). */
-export function CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn('border-t pt-10', className)}>
-      <h2 className="mb-6 text-2xl">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
-        {items.slice(0, 4).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('group card card-hover block overflow-hidden', className)}
+    >
+      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+      <span className="relative block aspect-square overflow-hidden bg-secondary">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="img-zoom object-cover"
+          />
+        ) : null}
+      </span>
+      <span className="block space-y-1 p-4">
+        <span className="block text-sm font-semibold leading-snug text-foreground group-hover:text-primary">
+          {item.name}
+        </span>
+        {priceIsUnresolved ? null : (
+          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+        )}
+      </span>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/** Recommendation strip on the product page (upsells / related). */
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn('border-t pt-10', className)}>
+      <h2 className="mb-6 text-2xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {items.slice(0, 4).map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/** Cross-sell strip on the cart page ("you might also need"). */
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn('border-t pt-10', className)}>
+      <h2 className="mb-6 text-2xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {items.slice(0, 4).map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/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
@@ -23,14 +34,21 @@ type StockState = 'in' | 'low' | 'out';
  * Stock status pill (in stock / low stock / out of stock) with a colored
  * status dot; derives the label from the product/variant `inventory` prop.
  */
-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, state } = getStock(
-    inventory,
+    stock,
     lowStockThreshold ?? resolveLowStockThreshold(capabilities),
     t
   );
@@ -65,6 +83,8 @@ function getStock(
   lowStockThreshold: number,
   t: (key: string) => string
 ): { label: string; state: StockState } {
+  // 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 { label: t('outOfStock'), state: 'out' };
 
   const { trackingMode, inStock, available } = inventory;

package/templates/nextjs/ui-canvas/cart/gift-card-input.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Checkout } from 'brainerce';
+import { BrainerceError } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 import { useTranslations } from '@/core/lib/translations';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
@@ -11,6 +12,11 @@ interface GiftCardInputProps {
   checkoutId: string;
   /** Cards already on this checkout. Each is removed by its own tenderId. */
   tenders: NonNullable<Checkout['tenders']>;
+  /**
+   * Whether the checkout can still take a card. False once a payment intent
+   * exists — the server refuses every tender change from then on.
+   */
+  locked: boolean;
   /** Formats an amount in the checkout's currency. */
   formatAmount: (value: string) => string;
   onUpdate: () => void;
@@ -35,14 +41,22 @@ interface GiftCardInputProps {
  *
  * Refusals are deliberately identical for "no such code", "expired", "already
  * spent" and "wrong currency": anything that tells them apart is an oracle
- * someone walks the code space against. Show what the server said; never guess
- * a more specific reason.
+ * someone walks the code space against. Show THIS store's one message for all
+ * of them — never the server's text, which is English and could gain a more
+ * helpful sentence later.
+ *
+ * Two failures are not about the card and must not read as if they were: a 5xx
+ * or dropped connection, and a checkout already locked for payment. When
+ * `locked` is true, do not render the field at all — the server refuses both
+ * applying and removing, changing shipping does not unlock it, and a box that
+ * can never work is worse than no box.
  *
  * 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 GiftCardInput({
   checkoutId,
   tenders,
+  locked,
   formatAmount,
   onUpdate,
   className,
@@ -54,6 +68,13 @@ export function GiftCardInput({
   const [removingId, setRemovingId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  /** `CHECKOUT_LOCKED` is the one 4xx that says nothing about the card. */
+  function isCheckoutLocked(err: unknown): boolean {
+    if (!(err instanceof BrainerceError)) return false;
+    const details = err.details as { code?: unknown } | null | undefined;
+    return details?.code === 'CHECKOUT_LOCKED';
+  }
+
   async function handleApply() {
     const trimmed = code.trim();
     if (!trimmed || applying) return;
@@ -67,7 +88,10 @@ export function GiftCardInput({
       setCode('');
       onUpdate();
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('invalidCode'));
+      const refused = err instanceof BrainerceError && err.statusCode < 500;
+      setError(
+        isCheckoutLocked(err) ? t('locked') : refused ? t('invalidCode') : t('applyFailed')
+      );
     } finally {
       setApplying(false);
     }
@@ -82,7 +106,7 @@ export function GiftCardInput({
       await getClient().removeGiftCard(checkoutId, tenderId);
       onUpdate();
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('removeFailed'));
+      setError(isCheckoutLocked(err) ? t('locked') : t('removeFailed'));
     } finally {
       setRemovingId(null);
     }
@@ -98,18 +122,23 @@ export function GiftCardInput({
                   ₪50 order applies ₪50 and keeps the rest for next time —
                   showing the balance here would look like a lost ₪150. */}
               <span>{t('applied', { amount: formatAmount(tender.amountApplied) })}</span>
-              <button
-                type="button"
-                onClick={() => handleRemove(tender.tenderId)}
-                disabled={removingId === tender.tenderId}
-              >
-                {removingId === tender.tenderId ? tc('removing') : tc('remove')}
-              </button>
+              {!locked && (
+                <button
+                  type="button"
+                  onClick={() => handleRemove(tender.tenderId)}
+                  disabled={removingId === tender.tenderId}
+                >
+                  {removingId === tender.tenderId ? tc('removing') : tc('remove')}
+                </button>
+              )}
             </li>
           ))}
         </ul>
       )}
 
+      {locked ? (
+        tenders.length > 0 ? <p>{t('lockedHint')}</p> : null
+      ) : (
       <div className="flex gap-2">
         <input
           type="text"
@@ -135,6 +164,7 @@ export function GiftCardInput({
           {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
         </button>
       </div>
+      )}
 
       {error && <p role="alert">{error}</p>}
     </div>

package/templates/nextjs/ui-canvas/layout/newsletter-signup.tsx

@@ -17,9 +17,18 @@
  *
  * ⛔ KEEP THE HONEYPOT. It is the bot filter; deleting the input silently opens
  * the form up.
+ *
+ * **The welcome offer.** `marketing.getBenefit()` returns what the merchant
+ * offers people who confirm, or `null` when they offer nothing. Show its terms
+ * beside the field. ⛔ NEVER RENDER A COUPON CODE — none exists here or in the
+ * success state; it is minted by the confirmation click and emailed to the
+ * recipient, which is what stops a forwarded link handing the discount to
+ * someone who never asked. There is no eligibility check to call either: a
+ * per-address answer would let anyone test who already subscribed.
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { PublicNewsletterBenefitOffer } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 import { useTranslations } from '@/core/lib/translations';
 
@@ -30,6 +39,9 @@ export function NewsletterSignup() {
   const [loading, setLoading] = useState(false);
   const [done, setDone] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // null covers "no offer" and "the read failed" alike. Neither deserves an
+  // error state: the form still works and simply promises nothing.
+  const [offer, setOffer] = useState<PublicNewsletterBenefitOffer | null>(null);
 
   // <html lang> carries the active locale, and passing it decides the language
   // of the confirmation email. Omit it and a Hebrew shopper gets English.
@@ -38,6 +50,29 @@ export function NewsletterSignup() {
     return undefined;
   }, []);
 
+  // Once per mount. The offer belongs to the store, not the visitor.
+  useEffect(() => {
+    let cancelled = false;
+    getClient()
+      .marketing.getBenefit(locale)
+      .then((result) => {
+        if (!cancelled) setOffer(result);
+      })
+      .catch(() => {
+        // Silent: a failed offer read must not stop anyone subscribing.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
+
+  const offerHeadline = offer
+    ? offer.headline?.trim() ||
+      (offer.discountType === 'PERCENTAGE'
+        ? t('offerPercent', { value: String(offer.discountValue) })
+        : t('offerAmount', { value: String(offer.discountValue) }))
+    : null;
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (loading || !email.trim()) return;
@@ -68,13 +103,9 @@ export function NewsletterSignup() {
         {/* DESIGN ME — newsletter success state. Do NOT reword to "you're subscribed": the address is not on the list until the recipient clicks the emailed link. Naming the spam folder is deliberate — a filtered confirmation is the commonest reason a signup never converts, and no second copy is sent for 24 hours. */}
         <p>{t('checkEmailTitle')}</p>
         <p>{t('checkEmailBody')}</p>
-        {/*
-          Merchant offering a signup discount? Render the coupon code here, now
-          — not after the confirmation click, which may never come:
-          <p>{t('discountCode', { code: 'WELCOME10' })}</p>
-          The code comes from a dashboard coupon with the `customer_first_order`
-          condition; subscribing mints nothing on its own.
-        */}
+        {/* Says where the code comes from without ever showing one: the coupon
+            is created by the confirmation click and lands in the same inbox. */}
+        {offer ? <p>{t('offerByEmail')}</p> : null}
       </div>
     );
   }
@@ -85,6 +116,17 @@ export function NewsletterSignup() {
       <label htmlFor="newsletter-email">{t('title')}</label>
       <p>{t('subtitle')}</p>
 
+      {/* DESIGN ME — the welcome offer, when the merchant configured one. Keep
+          both lines: the headline is the promise and the terms are its
+          conditions, and a shopper who reads one without the other is being
+          mis-sold. Never add a coupon code here. */}
+      {offerHeadline ? (
+        <div>
+          <p>{offerHeadline}</p>
+          {offer?.terms ? <p>{offer.terms}</p> : null}
+        </div>
+      ) : null}
+
       <input
         id="newsletter-email"
         type="email"