create-brainerce-store 1.78.0 → 1.80.0

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,214 +1,220 @@
-import type { Metadata } from 'next';
-import { notFound, permanentRedirect } from 'next/navigation';
-import { BrainerceError, getProductPriceInfo } from 'brainerce';
-import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
-import { getRegionId } from '@/core/lib/region.server';
-import { resolveCurrency } from '@/core/lib/resolve-currency';
-import { buildMetaDescription } from '@/core/lib/seo';
-import { decodeSlug } from '@/core/lib/utils';
-import { ProductJsonLd } from '@/components/seo/product-json-ld';
-import { getCanonicalSiteUrl } from '@/core/lib/site-url';
-import { Breadcrumbs } from '@/components/seo/breadcrumbs';
-import { ReviewsSection } from '@/ui/product/reviews-section';
-import { ProductFaqSection } from '@/ui/product/faq-section';
-import { ProductClientSection } from '@/ui/product/product-client-section';
-
-type Props = {
-  params: Promise<{ slug: string; locale?: string }>;
-};
-
-function buildHreflang(
-  baseUrl: string,
-  baseSlug: string,
-  localeSlugs: Record<string, string>,
-  locales: string[],
-  defaultLoc: string
-): Record<string, string> {
-  const langs: Record<string, string> = {};
-  for (const loc of locales) {
-    const locSlug = localeSlugs[loc] || baseSlug;
-    const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
-    langs[loc] = `${baseUrl}${path}`;
-  }
-  // x-default points to the default-locale canonical (no prefix)
-  langs['x-default'] = `${baseUrl}/products/${localeSlugs[defaultLoc] || baseSlug}`;
-  return langs;
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-
-  try {
-    const client = await getServerClient(locale);
-    // Fetch product + store info in parallel; storeInfo gives us the live
-    // currency for OG price tags (with env-var + USD fallbacks so we never
-    // silently emit a wrong currency when the API is briefly unreachable).
-    // ⛔ `regionId` belongs on EVERY product read. Without it the backend
-    // prices in the default region, so a shopper elsewhere gets the wrong
-    // currency in the OG price meta that link previews and Merchant Center
-    // read. `getRegionId()` is `cache()`-wrapped and shared with the layout
-    // and the page body below, so this is not an extra round trip. It
-    // resolves to `undefined` on a store with no regions, and the SDK then
-    // omits the query param entirely.
-    const regionId = await getRegionId();
-    const [product, storeInfo] = await Promise.all([
-      client.getProductBySlug(slug, { regionId }),
-      fetchStoreInfo(locale),
-    ]);
-    const imageUrl = product.images?.[0]?.url;
-    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
-    // version of the visible description, then product name. We must NEVER
-    // emit raw HTML or a mid-word cut into <meta name="description">.
-    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
-    const seoDescription =
-      (product as { seoDescription?: string | null }).seoDescription ||
-      buildMetaDescription(product.description) ||
-      product.name;
-
-    // OG product meta tags drive WhatsApp / Facebook / X link previews and
-    // Google Merchant Center product enrichment. Emitting the literal "0"
-    // here (the previous bug) causes price-zero link cards. Use the real
-    // effective price from the SDK helper.
-    const priceInfo = getProductPriceInfo(product);
-    const currency = resolveCurrency(storeInfo);
-    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
-    const inStock = product.inventory?.canPurchase !== false;
-    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
-
-    // Multilingual SEO: hreflang tags + correct canonical per locale.
-    // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
-    const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
-    const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-    const baseUrl = await getCanonicalSiteUrl();
-    const baseSlug = product.slug || slug;
-    const localeSlugs = product.localeSlugs ?? {};
-
-    // Canonical: use the locale-specific slug for this locale when available.
-    const canonicalSlug = (locale && localeSlugs[locale]) || baseSlug;
-    const canonicalPath =
-      locale && locale !== defaultLoc
-        ? `/${locale}/products/${canonicalSlug}`
-        : `/products/${canonicalSlug}`;
-
-    const hreflangLanguages =
-      supportedLocales.length > 1
-        ? buildHreflang(baseUrl, baseSlug, localeSlugs, supportedLocales, defaultLoc)
-        : undefined;
-
-    return {
-      title: seoTitle,
-      description: seoDescription,
-      alternates: {
-        canonical: canonicalPath,
-        ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
-      },
-      openGraph: {
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [imageUrl] : [],
-      },
-      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
-      // Google Merchant Center). Skips the price pair entirely when the SDK
-      // can't determine a positive amount, rather than shipping "0".
-      other: {
-        ...(priceAmount
-          ? {
-              'og:price:amount': priceAmount,
-              'og:price:currency': currency,
-              'product:price:amount': priceAmount,
-              'product:price:currency': currency,
-            }
-          : {}),
-        'product:availability': inStock ? 'in stock' : 'out of stock',
-        'product:condition': 'new',
-        ...(brandName ? { 'product:brand': brandName } : {}),
-      },
-    };
-  } catch (err) {
-    if (err instanceof BrainerceError && err.statusCode === 404) {
-      return { title: 'Product not found' };
-    }
-    // Anything else (channel origin rejection, network failure) hits the page
-    // render below too and surfaces there — don't stamp a misleading title.
-    return {};
-  }
-}
-
-export default async function ProductDetailPage({ params }: Props) {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-
-  const client = await getServerClient(locale);
-  // Same region as the metadata above (one shared `cache()`d resolve), so the
-  // price in the <head> and the price on the page cannot disagree.
-  const regionId = await getRegionId();
-  let product;
-  try {
-    product = await client.getProductBySlug(slug, { regionId });
-  } catch (err) {
-    // Only a genuine 404 may become a storefront 404. Anything else — a 403
-    // from the channel's origin check, a network failure, a 5xx — is a
-    // configuration or availability problem; disguising it as "product not
-    // found" sends the merchant hunting for a slug bug that isn't there.
-    if (!(err instanceof BrainerceError && err.statusCode === 404)) {
-      throw err;
-    }
-    // The slug may have been RENAMED — the platform records every rename.
-    // 301 the old URL to the current slug so its ranking and inbound links
-    // carry over; genuine unknowns fall through to the 404 page. Default
-    // locale stays unprefixed (matches the sitemap/hreflang convention); the
-    // destination page's canonical then points crawlers at the localized URL.
-    const redirect = await client.resolveSlugRedirect('product', slug);
-    if (redirect) {
-      const info = await fetchStoreInfo(locale);
-      const defaultLoc = info?.i18n?.defaultLocale ?? info?.language ?? '';
-      const prefix = locale && locale !== defaultLoc ? `/${locale}` : '';
-      permanentRedirect(`${prefix}/products/${redirect.currentSlug}`);
-    }
-    notFound();
-  }
-
-  const baseUrl = await getCanonicalSiteUrl();
-  const productUrl = `${baseUrl}/products/${slug}`;
-  // Reuse the cached storeInfo from generateMetadata's call — React cache()
-  // collapses both into one backend request per render. resolveCurrency owns
-  // the env-var + USD fallback chain so this stays a single source of truth.
-  const storeInfo = await fetchStoreInfo(locale);
-  const currency = resolveCurrency(storeInfo);
-  const localePrefix = locale ? `/${locale}` : '';
-  const primaryCategory = product.categories?.find((c) => c.slug);
-  const breadcrumbItems = [
-    { name: 'Home', href: `${localePrefix}/` },
-    ...(primaryCategory
-      ? [{ name: primaryCategory.name, href: `${localePrefix}/category/${primaryCategory.slug}` }]
-      : []),
-    { name: product.name },
-  ];
-
-  return (
-    <>
-      <ProductJsonLd
-        product={product}
-        url={productUrl}
-        currency={currency}
-        shipping={storeInfo?.shipping}
-      />
-      <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
-        <Breadcrumbs items={breadcrumbItems} />
-      </div>
-      <ProductClientSection product={product} stockAlertsEnabled={storeInfo?.stockAlertsEnabled} />
-      {/* Visible Q&A + the FAQPage JSON-LD above read the same product.faq —
-          the extractable format AI answer engines cite. */}
-      <ProductFaqSection product={product} locale={locale} />
-      <ReviewsSection productId={product.id} />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { notFound, permanentRedirect } from 'next/navigation';
+import { BrainerceError, getProductPriceInfo } from 'brainerce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
+import { getRegionId } from '@/core/lib/region.server';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { canPurchaseProduct } from '@/core/lib/kit';
+import { decodeSlug } from '@/core/lib/utils';
+import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { Breadcrumbs } from '@/components/seo/breadcrumbs';
+import { ReviewsSection } from '@/ui/product/reviews-section';
+import { ProductFaqSection } from '@/ui/product/faq-section';
+import { ProductClientSection } from '@/ui/product/product-client-section';
+
+type Props = {
+  params: Promise<{ slug: string; locale?: string }>;
+};
+
+function buildHreflang(
+  baseUrl: string,
+  baseSlug: string,
+  localeSlugs: Record<string, string>,
+  locales: string[],
+  defaultLoc: string
+): Record<string, string> {
+  const langs: Record<string, string> = {};
+  for (const loc of locales) {
+    const locSlug = localeSlugs[loc] || baseSlug;
+    const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
+    langs[loc] = `${baseUrl}${path}`;
+  }
+  // x-default points to the default-locale canonical (no prefix)
+  langs['x-default'] = `${baseUrl}/products/${localeSlugs[defaultLoc] || baseSlug}`;
+  return langs;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+
+  try {
+    const client = await getServerClient(locale);
+    // Fetch product + store info in parallel; storeInfo gives us the live
+    // currency for OG price tags (with env-var + USD fallbacks so we never
+    // silently emit a wrong currency when the API is briefly unreachable).
+    // ⛔ `regionId` belongs on EVERY product read. Without it the backend
+    // prices in the default region, so a shopper elsewhere gets the wrong
+    // currency in the OG price meta that link previews and Merchant Center
+    // read. `getRegionId()` is `cache()`-wrapped and shared with the layout
+    // and the page body below, so this is not an extra round trip. It
+    // resolves to `undefined` on a store with no regions, and the SDK then
+    // omits the query param entirely.
+    const regionId = await getRegionId();
+    const [product, storeInfo] = await Promise.all([
+      client.getProductBySlug(slug, { regionId }),
+      fetchStoreInfo(locale),
+    ]);
+    const imageUrl = product.images?.[0]?.url;
+    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
+    // version of the visible description, then product name. We must NEVER
+    // emit raw HTML or a mid-word cut into <meta name="description">.
+    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
+    const seoDescription =
+      (product as { seoDescription?: string | null }).seoDescription ||
+      buildMetaDescription(product.description) ||
+      product.name;
+
+    // OG product meta tags drive WhatsApp / Facebook / X link previews and
+    // Google Merchant Center product enrichment. Emitting the literal "0"
+    // here (the previous bug) causes price-zero link cards. Use the real
+    // effective price from the SDK helper.
+    const priceInfo = getProductPriceInfo(product);
+    const currency = resolveCurrency(storeInfo);
+    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
+    // ⛔ A KIT has NO `inventory` block — its stock is `product.kitAvailable`.
+    // Reading `inventory` here published `product:availability: in stock` for a
+    // sold-out kit, so Facebook/WhatsApp link previews and Google Merchant
+    // Center advertised something nobody could buy. `canPurchaseProduct` reads
+    // the right field per product type.
+    const inStock = canPurchaseProduct(product);
+    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
+
+    // Multilingual SEO: hreflang tags + correct canonical per locale.
+    // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
+    const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
+    const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
+    const baseUrl = await getCanonicalSiteUrl();
+    const baseSlug = product.slug || slug;
+    const localeSlugs = product.localeSlugs ?? {};
+
+    // Canonical: use the locale-specific slug for this locale when available.
+    const canonicalSlug = (locale && localeSlugs[locale]) || baseSlug;
+    const canonicalPath =
+      locale && locale !== defaultLoc
+        ? `/${locale}/products/${canonicalSlug}`
+        : `/products/${canonicalSlug}`;
+
+    const hreflangLanguages =
+      supportedLocales.length > 1
+        ? buildHreflang(baseUrl, baseSlug, localeSlugs, supportedLocales, defaultLoc)
+        : undefined;
+
+    return {
+      title: seoTitle,
+      description: seoDescription,
+      alternates: {
+        canonical: canonicalPath,
+        ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
+      },
+      openGraph: {
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [imageUrl] : [],
+      },
+      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
+      // Google Merchant Center). Skips the price pair entirely when the SDK
+      // can't determine a positive amount, rather than shipping "0".
+      other: {
+        ...(priceAmount
+          ? {
+              'og:price:amount': priceAmount,
+              'og:price:currency': currency,
+              'product:price:amount': priceAmount,
+              'product:price:currency': currency,
+            }
+          : {}),
+        'product:availability': inStock ? 'in stock' : 'out of stock',
+        'product:condition': 'new',
+        ...(brandName ? { 'product:brand': brandName } : {}),
+      },
+    };
+  } catch (err) {
+    if (err instanceof BrainerceError && err.statusCode === 404) {
+      return { title: 'Product not found' };
+    }
+    // Anything else (channel origin rejection, network failure) hits the page
+    // render below too and surfaces there — don't stamp a misleading title.
+    return {};
+  }
+}
+
+export default async function ProductDetailPage({ params }: Props) {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+
+  const client = await getServerClient(locale);
+  // Same region as the metadata above (one shared `cache()`d resolve), so the
+  // price in the <head> and the price on the page cannot disagree.
+  const regionId = await getRegionId();
+  let product;
+  try {
+    product = await client.getProductBySlug(slug, { regionId });
+  } catch (err) {
+    // Only a genuine 404 may become a storefront 404. Anything else — a 403
+    // from the channel's origin check, a network failure, a 5xx — is a
+    // configuration or availability problem; disguising it as "product not
+    // found" sends the merchant hunting for a slug bug that isn't there.
+    if (!(err instanceof BrainerceError && err.statusCode === 404)) {
+      throw err;
+    }
+    // The slug may have been RENAMED — the platform records every rename.
+    // 301 the old URL to the current slug so its ranking and inbound links
+    // carry over; genuine unknowns fall through to the 404 page. Default
+    // locale stays unprefixed (matches the sitemap/hreflang convention); the
+    // destination page's canonical then points crawlers at the localized URL.
+    const redirect = await client.resolveSlugRedirect('product', slug);
+    if (redirect) {
+      const info = await fetchStoreInfo(locale);
+      const defaultLoc = info?.i18n?.defaultLocale ?? info?.language ?? '';
+      const prefix = locale && locale !== defaultLoc ? `/${locale}` : '';
+      permanentRedirect(`${prefix}/products/${redirect.currentSlug}`);
+    }
+    notFound();
+  }
+
+  const baseUrl = await getCanonicalSiteUrl();
+  const productUrl = `${baseUrl}/products/${slug}`;
+  // Reuse the cached storeInfo from generateMetadata's call — React cache()
+  // collapses both into one backend request per render. resolveCurrency owns
+  // the env-var + USD fallback chain so this stays a single source of truth.
+  const storeInfo = await fetchStoreInfo(locale);
+  const currency = resolveCurrency(storeInfo);
+  const localePrefix = locale ? `/${locale}` : '';
+  const primaryCategory = product.categories?.find((c) => c.slug);
+  const breadcrumbItems = [
+    { name: 'Home', href: `${localePrefix}/` },
+    ...(primaryCategory
+      ? [{ name: primaryCategory.name, href: `${localePrefix}/category/${primaryCategory.slug}` }]
+      : []),
+    { name: product.name },
+  ];
+
+  return (
+    <>
+      <ProductJsonLd
+        product={product}
+        url={productUrl}
+        currency={currency}
+        shipping={storeInfo?.shipping}
+      />
+      <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
+        <Breadcrumbs items={breadcrumbItems} />
+      </div>
+      <ProductClientSection product={product} stockAlertsEnabled={storeInfo?.stockAlertsEnabled} />
+      {/* Visible Q&A + the FAQPage JSON-LD above read the same product.faq —
+          the extractable format AI answer engines cite. */}
+      <ProductFaqSection product={product} locale={locale} />
+      <ReviewsSection productId={product.id} />
+    </>
+  );
+}

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -328,7 +328,11 @@ function OrderFinancialSummary({ order, currency }: { order: Order; currency: st
   // an older order can carry rows without a name or an amount.
   const taxRows = (order.taxBreakdown?.breakdown ?? []).filter(
     (row): row is { name: string; rate: number; amount: number } =>
-      !!row && typeof row.name === 'string' && typeof row.amount === 'number'
+      !!row &&
+      typeof row.name === 'string' &&
+      row.name.length > 0 &&
+      typeof row.amount === 'number' &&
+      Number.isFinite(row.amount)
   );
   const rules = order.appliedDiscounts;
 
@@ -389,10 +393,13 @@ function OrderFinancialSummary({ order, currency }: { order: Order; currency: st
       )}
 
       {/* `breakdown` holds ONE ROW PER TAX. A Quebec order carries GST and QST
-          and both have to appear; an order frozen before breakdowns existed
-          carries none, so fall back to the single combined line. */}
+          and both have to appear. Name the tax whenever there is one to name —
+          the checkout this shopper just paid through prints "GST", so printing
+          "Tax" back to them here for the same order reads as a different figure.
+          An order frozen before breakdowns existed carries no printable row and
+          still falls back to the single combined line. */}
       {tax > 0 &&
-        (taxRows.length > 1 ? (
+        (taxRows.length > 0 ? (
           taxRows.map((row, i) => (
             <div key={`${row.name}-${i}`} className="flex items-center justify-between">
               <span className="text-muted-foreground">

package/templates/nextjs/base/src/components/account/profile-section.tsx

@@ -7,6 +7,7 @@ import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
 import { birthMonthKey, toBirthdayNumber } from '@/core/lib/birthday';
 import { BirthdayPicker } from '@/components/shared/birthday-picker';
+import { useStoreCapabilities } from '@/core/providers/store-provider';
 
 interface ProfileSectionProps {
   profile: CustomerProfile;
@@ -17,6 +18,9 @@ interface ProfileSectionProps {
 export function ProfileSection({ profile, onProfileUpdate, className }: ProfileSectionProps) {
   const t = useTranslations('account');
   const tc = useTranslations('common');
+  const { capabilities } = useStoreCapabilities();
+  /** Explicit `true` only — see the note on the same gate in `register-form.tsx`. */
+  const birthdayGiftOn = capabilities?.features.hasBirthdayRewards === true;
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
@@ -182,7 +186,9 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                   onChange={selectBirthday}
                   triggerClassName="rounded-md"
                 />
-                <p className="text-muted-foreground mt-1 text-xs">{tc('birthdayGiftNote')}</p>
+                {birthdayGiftOn && (
+                  <p className="text-muted-foreground mt-1 text-xs">{tc('birthdayGiftNote')}</p>
+                )}
               </div>
               <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
               <div className="flex items-center gap-2">

package/templates/nextjs/base/src/components/auth/register-form.tsx

@@ -9,6 +9,7 @@ import { useStoreInfo } from '@/core/providers/store-provider';
 import { toBirthdayNumber } from '@/core/lib/birthday';
 import { BirthdayPicker } from '@/components/shared/birthday-picker';
 import { readReferralCookie } from '@/core/lib/referral';
+import { useStoreCapabilities } from '@/core/providers/store-provider';
 
 interface RegisterData {
   firstName: string;
@@ -66,6 +67,20 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
   const [privacyError, setPrivacyError] = useState(false);
   const [passwordError, setPasswordError] = useState<string | null>(null);
   const [acceptsMarketing, setAcceptsMarketing] = useState(false);
+  const { capabilities } = useStoreCapabilities();
+
+  /**
+   * Whether to promise a birthday gift beside the picker.
+   *
+   * The gate is inverted relative to `ReferralGreeting`, and deliberately so.
+   * There, an undecided capability must not suppress a real referral, so only
+   * an explicit `false` hides anything. Here the text makes a PROMISE, and a
+   * promise may only be printed on an explicit `true`: a store with birthday
+   * rewards switched off — which is the default — would otherwise tell every
+   * customer a gift is coming and send nothing, and `requireBirthday` can make
+   * handing over the date compulsory on top of that.
+   */
+  const birthdayGiftOn = capabilities?.features.hasBirthdayRewards === true;
   const [birthMonth, setBirthMonth] = useState('');
   const [birthDay, setBirthDay] = useState('');
   const [birthdayError, setBirthdayError] = useState<string | null>(null);
@@ -293,7 +308,9 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
           required={birthdayRequired}
           invalid={birthdayError !== null}
         />
-        <p className="text-muted-foreground mt-1.5 text-xs">{tc('birthdayGiftNote')}</p>
+        {birthdayGiftOn && (
+          <p className="text-muted-foreground mt-1.5 text-xs">{tc('birthdayGiftNote')}</p>
+        )}
         {birthdayError && <p className="text-destructive mt-1 text-xs">{birthdayError}</p>}
       </div>
 

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef, useCallback, type CSSProperties } from 'react';
 import type { PaymentIntent, PaymentClientSdk } from 'brainerce';
 import { formatPrice } 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';
@@ -360,7 +361,15 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         return intent;
       })
       .catch((err) => {
-        setError(err instanceof Error ? err.message : t('paymentError'));
+        // This is intent CREATION, before any card is entered, so a failure
+        // here is the merchant's configuration and never the shopper's card.
+        // The server said "Stripe account is not connected" and the storefront
+        // printed it verbatim: raw English on a Hebrew store, naming a provider
+        // to someone who could not install one if they wanted to. Declines come
+        // from the provider SDK on a different path and keep their own wording,
+        // which is the part a shopper can actually act on.
+        console.error('[checkout] could not start payment', err);
+        setError(t('paymentUnavailable'));
         return null;
       })
       .finally(() => setLoading(false));
@@ -558,7 +567,10 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         await client.completeGuestCheckout(checkoutId);
         window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
       } catch (err) {
-        setError(err instanceof Error ? err.message : t('paymentError'));
+        // Sandbox never declines, so there is nothing here a shopper can act on
+        // either.
+        console.error('[checkout] sandbox completion failed', err);
+        setError(t('paymentError'));
         setLoading(false);
       }
     };

package/templates/nextjs/base/src/components/tracking-bootstrap.tsx

@@ -12,7 +12,7 @@ import { useStoreInfo } from '@/core/providers/store-provider';
  *
  * There is nothing to configure here and no environment variable to set. The
  * tag ids arrive inside `storeInfo.tracking`, which the backend resolves from
- * the merchant's connected marketplace apps: connecting the Google & YouTube
+ * the merchant's connected marketplace apps: connecting the Google
  * app runs GA4 discovery and the measurement id shows up on its own, likewise
  * the Meta and TikTok pixels. Connect an app in the dashboard and this file
  * starts loading its tag within a minute — no redeploy, no code change.