npm - @cartbase/storefront - Versions diffs - 0.14.0 → 0.15.0 - Mend

@cartbase/storefront 0.14.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/README.md +9 -3
package/package.json +2 -1
package/src/api/customers.ts +4 -7
package/src/api/products.ts +4 -0
package/src/cart-drawer/context.tsx +11 -1
package/src/cart-drawer/item/variant.tsx +8 -3
package/src/checkout/checkout-client.tsx +10 -1
package/src/checkout/line-item-card.tsx +5 -2
package/src/checkout/order-summary.tsx +9 -5
package/src/common/country-select.tsx +11 -65
package/src/common/index.ts +2 -0
package/src/common/market-select.tsx +57 -0
package/src/lib/variant-caption.ts +32 -0
package/src/locales/context.ts +37 -0
package/src/locales/provider.tsx +17 -21
package/src/locales/types.ts +24 -21
package/src/order/order-completed-template.tsx +10 -4
package/src/order/order-item.tsx +4 -4
package/src/products/product-template.tsx +11 -9
package/src/products/related-products.tsx +9 -9
package/src/reviews-ui/photo-upload.tsx +2 -1
package/src/reviews-ui/review-list.tsx +4 -2
package/src/reviews-ui/review-widget.tsx +4 -1
package/src/reviews-ui/review-wizard.tsx +3 -2
package/src/store/category-template.tsx +8 -1
package/src/store/collection-template.tsx +8 -1
package/src/store/search-template.tsx +10 -4
package/src/store/store-template.tsx +10 -4
package/src/tracking/chatgpt-pixel.tsx +17 -10
package/src/tracking/consent-init.tsx +62 -44
package/src/tracking/consent.ts +58 -7
package/src/tracking/index.ts +2 -0
package/src/tracking/meta-pixel.tsx +27 -15
package/src/tracking/storefront-tags.tsx +14 -7
package/src/tracking/tiktok-pixel.tsx +15 -7
package/src/tracking/types.ts +5 -2

package/README.md CHANGED Viewed

@@ -42,6 +42,7 @@ NEXT_PUBLIC_CARTBASE_URL=              # optional: only to point at a local or s
 | `@cartbase/storefront/store` | Listing pages: pagination, sorting, collection/category/search templates |
 | `@cartbase/storefront/order` | Order confirmation surfaces |
 | `@cartbase/storefront/tracking` | Consent banner and Consent Mode v2, every marketing tag the store configured mounted from its own config (Meta Pixel, TikTok, Google Analytics 4 and Google Ads on one tag, Google Tag Manager), and one call per commerce moment that fires all of them |
+| `@cartbase/storefront/locales` | English built in; Spanish and Bulgarian as typed packs. One provider mounts the language for every client component; the server-rendered templates take their area of the pack as a required prop |
 | `@cartbase/storefront/theme` | The design system: token names plus a filled default set of values (Tailwind 4, CSS-first) |
 ### Tracking, in three lines
@@ -50,11 +51,16 @@ The merchant configures their pixels in the admin; the storefront mounts
 what they configured. Nothing per vendor:
 ```tsx
-<ConsentInit />                 // first child of <body>, sets the consent defaults
-<StorefrontTags client={client} />  // every configured tag, gated by the above
-<TrackInit />                   // captures UTMs + ad-click ids on the landing page
+<ConsentInit required={consent.enabled} />  // first child of <body>, sets the consent defaults
+<StorefrontTags client={client} />          // every configured tag, gated by the above
+<TrackInit />                               // captures UTMs + ad-click ids on the landing page
 ```
+`consent.enabled` is the store's own switch (`GET /api/store/consent`): a
+store that collects consent starts every visitor denied until they choose
+on the banner; a store with the banner off starts them granted and the
+pixels fire. The prop is required, so a layout cannot leave it out.
 Then one call per moment (`trackProductView`, `trackCartAdd`,
 `trackCheckoutStart`) and `<TrackOrderPurchase>` on the confirmation
 page. Purchase events dedupe against the platform's own server-side

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Storefront SDK + UI component library for Cartbase stores: typed API client, checkout orchestration, cart drawer, product/catalog components, tracking. Source-shipped TypeScript — add it to transpilePackages.",
   "license": "MIT",
   "repository": {
@@ -194,6 +194,7 @@
     "./common/cart-button-client": "./src/common/cart-button-client.tsx",
     "./common/delete-button": "./src/common/delete-button.tsx",
     "./common/country-flag": "./src/common/country-flag.tsx",
+    "./common/market-select": "./src/common/market-select.tsx",
     "./common/country-select": "./src/common/country-select.tsx",
     "./common/language-select": "./src/common/language-select.tsx",
     "./common/skeleton": "./src/common/skeleton.tsx",

package/src/api/customers.ts CHANGED Viewed

@@ -18,10 +18,9 @@
 import type { StorefrontClient } from "./http"
 import type { IsoDateString, PaginationQuery } from "./types"
-/** One row of `customer.addresses` (barter_commerce.customer_addresses). */
+/** One row of `customer.addresses` (barter_commerce.customer_addresses), as the store serves it. */
 export interface CustomerAddress {
   id: string
-  client_id: string
   customer_id: string
   address_name: string | null
   first_name: string | null
@@ -39,18 +38,18 @@ export interface CustomerAddress {
   metadata: Record<string, unknown> | null
   created_at: IsoDateString
   updated_at: IsoDateString
-  deleted_at: IsoDateString | null
 }
 /**
- * The customer payload (full barter_commerce.customers row + addresses).
+ * The customer payload: the customer's own row as the store serves it, plus
+ * addresses. Named columns since 2026-09-14: no tenant id, no soft-delete
+ * stamp, no staff identity, no provider account id.
  * `account_status` (`pending` | `approved`) gates B2B storefront content
  * when the store's approval policy is on (b2b-v1). `tags` are admin-only
  * labels — readable here, never writable from the store surface.
  */
 export interface StoreCustomer {
   id: string
-  client_id: string
   email: string | null
   first_name: string | null
   last_name: string | null
@@ -64,10 +63,8 @@ export interface StoreCustomer {
   account_status: string
   tags: string[]
   metadata: Record<string, unknown> | null
-  created_by: string | null
   created_at: IsoDateString
   updated_at: IsoDateString
-  deleted_at: IsoDateString | null
   addresses: CustomerAddress[]
 }

package/src/api/products.ts CHANGED Viewed

@@ -67,6 +67,8 @@ export interface StoreProductOption {
   id: string
   title: string
   product_id: string
+  /** The merchant's order of the options on the product page. */
+  position: number
   metadata: Record<string, unknown> | null
   created_at: IsoDateString
   updated_at: IsoDateString
@@ -138,6 +140,8 @@ export interface StoreProduct {
   collection_id: string | null
   type_id: string | null
   external_id: string | null
+  /** The brand, as plain text on the product (product-vendor card). */
+  vendor: string | null
   weight: number | null
   length: number | null
   height: number | null

package/src/cart-drawer/context.tsx CHANGED Viewed

@@ -24,6 +24,7 @@ import {
 import type { StorefrontClient } from "../api/http"
 import { productItemCount } from "../lib/cart-helpers"
 import { defaultCartDrawerLabels, type CartDrawerLabels } from "./labels"
+import { useLocaleArea } from "../locales/context"
 /**
  * Cart drawer context — open state + cart snapshot + labels + link hrefs.
@@ -313,6 +314,11 @@ export function CartDrawerProvider({
   onCartChange?: (cart: Cart) => void
   /** Ops funnel for every failed optimistic mutation (see module JSDoc). */
   onOptimisticError?: (failure: OptimisticCartError) => void
+  /**
+   * Overrides. The default is the language mounted by
+   * `StorefrontLocaleProvider`, English when none is mounted, so a store
+   * that mounts its pack has nothing to hand over here (2026-09-14).
+   */
   labels?: Partial<CartDrawerLabels>
   hrefs?: Partial<CartDrawerHrefs>
   children: ReactNode
@@ -536,8 +542,12 @@ export function CartDrawerProvider({
     }
   }, [client, serverCart?.id, confirm])
+  // The mounted language is the default (2026-09-14): a store that mounts
+  // StorefrontLocaleProvider has nothing to hand over here, and a `labels`
+  // prop overrides only the keys it names.
+  const inherited = useLocaleArea("cartDrawer", defaultCartDrawerLabels)
   const labels: CartDrawerLabels = {
-    ...defaultCartDrawerLabels,
+    ...inherited,
     ...labelOverrides,
   }
   const hrefs: CartDrawerHrefs = {

package/src/cart-drawer/item/variant.tsx CHANGED Viewed

@@ -1,8 +1,12 @@
 "use client"
+import { variantCaption } from "../../lib/variant-caption"
 /**
  * CartItemVariant — renders the variant description (e.g. "Size M / Red")
- * under the product title in a cart line.
+ * under the product title in a cart line. A single-variant placeholder
+ * ("Default", "Default Title", "Default variant") renders nothing
+ * (`lib/variant-caption`).
  *
  * Ported from `@1click/ui/src/cart-drawer/item/variant.tsx` (v2.3.1).
  * Cartbase data seam: the source rendered `variant.options[].value` from an
@@ -36,11 +40,12 @@ export function CartItemVariant({ variantTitle, options }: CartItemVariantProps)
     )
   }
-  if (!variantTitle) return null
+  const caption = variantCaption(variantTitle)
+  if (!caption) return null
   return (
     <div className="flex items-center gap-2 flex-wrap">
-      <span className="text-xs text-muted-foreground">{variantTitle}</span>
+      <span className="text-xs text-muted-foreground">{caption}</span>
     </div>
   )
 }

package/src/checkout/checkout-client.tsx CHANGED Viewed

@@ -53,7 +53,16 @@ type CheckoutClientProps = {
   customer: StoreCustomer | null
   availableShippingMethods: StoreShippingOption[] | null
   availablePaymentMethods: PaymentProviderLike[] | null
-  countryCode: string
+  /**
+   * The country to PRESELECT when the cart has no shipping address yet.
+   * Optional, like the hook's own: the offer comes from the store
+   * (`GET /api/store/countries`) and a store with no preselection lets the
+   * shopper pick. This stayed `string` when the hook went optional on
+   * 2026-09-13, so the reference storefront, which omits it on purpose, did
+   * not typecheck, and `next build` refuses a store with a type error
+   * (fixed 2026-09-14).
+   */
+  countryCode?: string
   /** Countries for the address form (Cartbase regions embed none). */
   countries?: Array<{ iso_2: string; display_name: string }>
   paymentMethodFilter?: (

package/src/checkout/line-item-card.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import type { StorefrontClient } from "../api/http"
 import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
 import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
+import { variantCaption } from "../lib/variant-caption"
 import { useCheckoutLabels } from "./context"
 /**
@@ -106,8 +107,10 @@ export function LineItemCard({
         <p className="text-sm font-semibold text-foreground leading-tight truncate">
           {item.product_title}
         </p>
-        {item.variant_title && item.variant_title !== "Default" && (
-          <p className="text-xs text-muted-foreground mt-1">{item.variant_title}</p>
+        {variantCaption(item.variant_title) && (
+          <p className="text-xs text-muted-foreground mt-1">
+            {variantCaption(item.variant_title)}
+          </p>
         )}
         <div className="flex items-center gap-2 mt-2.5">

package/src/checkout/order-summary.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
 import { Price } from "../lib/price"
 import { isProductLine } from "../lib/cart-helpers"
 import { cn } from "../lib/utils"
+import { variantCaption } from "../lib/variant-caption"
 import { useCheckoutLabels } from "./context"
 import { DiscountSection } from "./discount-section"
 import { GiftCardSection } from "./gift-card-section"
@@ -87,8 +88,12 @@ export function CheckoutLineItem({
     }
   }
+  // `self-start`: in the desktop column the pill is a flex item, and a flex
+  // item stretches to the column's width unless told otherwise. Without it
+  // the border ran the full width of the row with the controls huddled at
+  // the left (evoo checkout, 2026-09-14).
   const qtyPill = (
-    <div className="inline-flex items-center rounded-[2px] border border-border bg-card">
+    <div className="inline-flex self-start items-center rounded-[2px] border border-border bg-card">
       <button
         type="button"
         onClick={() => handleQty(item.quantity - 1)}
@@ -133,15 +138,14 @@ export function CheckoutLineItem({
     </div>
   )
+  const caption = variantCaption(item.variant_title)
   const titleBlock = (
     <div className="min-w-0">
       <p className="text-[15px] font-semibold text-foreground leading-snug break-words">
         {item.product_title}
       </p>
-      {item.variant_title && item.variant_title !== "Default" && (
-        <p className="text-xs text-muted-foreground mt-1 truncate">
-          {item.variant_title}
-        </p>
+      {caption && (
+        <p className="text-xs text-muted-foreground mt-1 truncate">{caption}</p>
       )}
     </div>
   )

package/src/common/country-select.tsx CHANGED Viewed

@@ -1,65 +1,11 @@
-"use client"
-import { useMemo } from "react"
-import type { StoreRegion } from "../api/regions"
-/**
- * Region picker for the storefront footer/header. Ported from
- * `@1click/ui/src/common/country-select.tsx` (v2.3.1) with a REAL model
- * change forced by the SDK (SDK wins over the source):
- *
- *  - Medusa regions embedded a `countries[]` array and the select listed
- *    countries; Cartbase regions carry NO countries on the store surface
- *    (divergence documented in `api/regions` — tax scoping is by
- *    `tax_regions` server-side). The select therefore lists the REGIONS
- *    themselves (`regions.listRegions`), valued by region id.
- *  - The source called the `updateRegion(countryCode, path)` server
- *    action bound to URL `[countryCode]` routing; Cartbase region
- *    persistence is app-owned (usually `carts.updateCart(client, cartId,
- *    {region_id})` + a cookie) — so the change surfaces via `onChange`.
- */
-type CountrySelectProps = {
-  regions: StoreRegion[]
-  /** Currently active region id. */
-  value?: string | null
-  /** Fired with the selected region; persist it app-side. */
-  onChange: (region: StoreRegion) => void
-  className?: string
-}
-export function CountrySelect({
-  regions,
-  value,
-  onChange,
-  className,
-}: CountrySelectProps) {
-  const options = useMemo(
-    () =>
-      [...regions].sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")),
-    [regions]
-  )
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = options.find((r) => r.id === e.target.value)
-    if (selected) onChange(selected)
-  }
-  return (
-    <select
-      value={value || ""}
-      onChange={handleChange}
-      className={
-        className ??
-        "text-sm text-foreground bg-card border border-border rounded-lg px-3 py-2"
-      }
-    >
-      {options.map((r) => (
-        <option key={r.id} value={r.id}>
-          {r.name}
-        </option>
-      ))}
-    </select>
-  )
-}
-export { type CountrySelectProps }
+/**
+ * `CountrySelect` is now `MarketSelect` (`common/market-select`), renamed on
+ * 2026-09-14: it lists the store's MARKETS, and a component is named for what
+ * it does (store-package card, finding 6; doctrine 14b). This path and these
+ * names are kept for ONE release so an existing import keeps compiling, and
+ * go with the release after it.
+ *
+ * @deprecated import `MarketSelect` from `@cartbase/storefront/common/market-select`.
+ */
+export { MarketSelect as CountrySelect } from "./market-select"
+export type { MarketSelectProps as CountrySelectProps } from "./market-select"

package/src/common/index.ts CHANGED Viewed

@@ -9,6 +9,8 @@ export { CartButton } from "./cart-button"
 export { CartButtonClient } from "./cart-button-client"
 export { DeleteButton, type DeleteButtonProps } from "./delete-button"
 export { CountryFlag } from "./country-flag"
+export { MarketSelect, type MarketSelectProps } from "./market-select"
+/** @deprecated the old name of `MarketSelect`, kept for one release (2026-09-14). */
 export { CountrySelect, type CountrySelectProps } from "./country-select"
 export {
   LanguageSelect,

package/src/common/market-select.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+"use client"
+import { useMemo } from "react"
+import type { StoreRegion } from "../api/regions"
+/**
+ * THE MARKET PICKER for a header or footer: the store's regions, by name.
+ *
+ * Ported from `@1click/ui/src/common/country-select.tsx` (v2.3.1) and
+ * renamed on 2026-09-14 (store-package card, finding 6). The port carried the
+ * name of a component that listed a region's countries; Cartbase regions
+ * carry no countries on the store surface, so it listed the REGIONS
+ * themselves and was named for something it did not do. A market is what a
+ * shopper picks here; a country is picked in the checkout, from
+ * `listCountries`, with `CountryFlag` beside it.
+ *
+ * Persistence is the app's: `onChange` hands over the chosen region and the
+ * app writes it where it keeps it (usually `carts.updateCart(client, cartId,
+ * { region_id })` plus a cookie).
+ */
+export type MarketSelectProps = {
+  regions: StoreRegion[]
+  /** The active region's id. */
+  value?: string | null
+  /** Fired with the chosen region; persist it app-side. */
+  onChange: (region: StoreRegion) => void
+  className?: string
+}
+export function MarketSelect({ regions, value, onChange, className }: MarketSelectProps) {
+  const options = useMemo(
+    () => [...regions].sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")),
+    [regions]
+  )
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = options.find((r) => r.id === e.target.value)
+    if (selected) onChange(selected)
+  }
+  return (
+    <select
+      value={value || ""}
+      onChange={handleChange}
+      className={
+        className ??
+        "text-sm text-foreground bg-card border border-border rounded-lg px-3 py-2"
+      }
+    >
+      {options.map((r) => (
+        <option key={r.id} value={r.id}>
+          {r.name}
+        </option>
+      ))}
+    </select>
+  )
+}

package/src/lib/variant-caption.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * The variant caption a shopper sees under a product title.
+ *
+ * A product with one variant has no real variant, only a placeholder name
+ * for the row that holds its price: the platform names it "Default", a
+ * Shopify import carries "Default Title", Medusa "Default variant". None of
+ * them is a fact about the product, so none is shown. Every surface that
+ * prints a variant (cart drawer, checkout summary, order page) goes through
+ * this one function; a real variant title ("Size M / Red") passes through.
+ *
+ * Found 2026-09-14 on evoo's checkout summary, where every Shopify-imported
+ * product read "Default Title" under its name while three surfaces each
+ * tested a different spelling of the placeholder.
+ */
+const PLACEHOLDER_TITLES = new Set(["default", "default title", "default variant"])
+/** True for an empty title or any spelling of the single-variant placeholder. */
+export function isPlaceholderVariantTitle(
+  title: string | null | undefined
+): boolean {
+  if (!title) return true
+  return PLACEHOLDER_TITLES.has(title.trim().toLowerCase())
+}
+/** The caption to render, or null when there is nothing worth showing. */
+export function variantCaption(title: string | null | undefined): string | null {
+  if (!title) return null
+  const trimmed = title.trim()
+  if (!trimmed || isPlaceholderVariantTitle(trimmed)) return null
+  return trimmed
+}

package/src/locales/context.ts ADDED Viewed

@@ -0,0 +1,37 @@
+"use client"
+import { createContext, useContext } from "react"
+import type { StorefrontLocale } from "./types"
+/**
+ * THE MOUNTED LANGUAGE, as a context. Null outside `StorefrontLocaleProvider`.
+ *
+ * Its default is null and not `en` on purpose: `en` gathers every area's
+ * English, and a client component that needs one area (the cart drawer, a
+ * review card) must not bundle the other five to read it. Each reader hands
+ * over its own area's English instead, through `useLocaleArea`, so a
+ * component rendered with no language mounted behaves exactly as before.
+ */
+export const StorefrontLocaleContext = createContext<StorefrontLocale | null>(null)
+/**
+ * One area of the mounted language, for a CLIENT component that renders it.
+ *
+ *   const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
+ *
+ * The pack the store mounted wins over the area's English; a `labels` prop
+ * still wins over both, so a store can override one word without a pack.
+ * Since 2026-09-14 this is how the cart drawer and the reviews family are
+ * localized: mount the provider once and there is nothing left to forget.
+ *
+ * A SERVER component cannot call this, because a server component has no
+ * context. That is why the store, product and order templates take their
+ * pack as a REQUIRED prop instead (`PropLabelAreas` in ./types).
+ */
+export function useLocaleArea<K extends keyof StorefrontLocale>(
+  area: K,
+  english: StorefrontLocale[K]
+): StorefrontLocale[K] {
+  const locale = useContext(StorefrontLocaleContext)
+  return locale ? locale[area] : english
+}

package/src/locales/provider.tsx CHANGED Viewed

@@ -1,35 +1,31 @@
 "use client"
-import { createContext, useContext, type ReactNode } from "react"
+import { useContext, type ReactNode } from "react"
 import { CheckoutProvider } from "../checkout/context"
 import { OrderLabelsProvider } from "../order/context"
 import { ProductLabelsProvider } from "../products/context"
+import { StorefrontLocaleContext } from "./context"
 import type { StorefrontLocale } from "./types"
 import { en } from "./en"
-const StorefrontLocaleContext = createContext<StorefrontLocale>(en)
 /**
  * ONE PROVIDER FOR THE STORE'S LANGUAGE.
  *
  *   import { es } from "@cartbase/storefront/locales/es"
  *   <StorefrontLocaleProvider locale={es}>{children}</StorefrontLocaleProvider>
  *
- * It mounts the three pure label contexts (products, checkout, order) so
- * every component inside them is localized with no further wiring.
- *
- * IT DOES NOT MOUNT THE CART DRAWER, and that is deliberate rather than an
- * omission: `CartDrawerProvider` carries the cart's state, its client and
- * its persistence callbacks, so it belongs where the app owns that state,
- * not inside a language wrapper. Hand it the pack instead:
- *
- *   const locale = useStorefrontLocale()
- *   <CartDrawerProvider cart={cart} labels={locale.cartDrawer}>
- *
- * Same for the two areas that read labels from a prop:
+ * Every CLIENT component inside it speaks the pack, and nothing else has to
+ * be wired: it mounts the three label contexts (products, checkout, order),
+ * and the cart drawer and the reviews family read the language from it
+ * directly (`useLocaleArea`, since 2026-09-14). It does not MOUNT the cart
+ * drawer, because that provider carries the cart's state, its client and its
+ * persistence callbacks, which belong where the app owns that state; the
+ * drawer only reads the language from here.
  *
- *   <StoreTemplate labels={locale.store} />
- *   <ReviewWidget labels={locale.reviews} />
+ * What it cannot reach is a SERVER component, because a server component has
+ * no context. The store, product and order templates render on the server,
+ * so each page hands them their area of the pack as a REQUIRED prop:
+ * `PropLabelAreas` in ./types names them, with the mounts written out.
  *
  * DEFAULT IS ENGLISH. A component rendered outside this provider reads the
  * library's own English defaults, so nothing renders blank or crashes for
@@ -54,10 +50,10 @@ export function StorefrontLocaleProvider({
 }
 /**
- * The whole locale, for the packs this provider cannot mount (the cart
- * drawer's, the store template's and the reviews widget's) and for the
- * code that needs the language itself, e.g. `<html lang={locale.code}>`.
+ * The whole mounted locale, English when none is mounted: for the code that
+ * needs the language itself, e.g. `<html lang={locale.code}>`, and for a
+ * client shell that hands a server template its pack.
  */
 export function useStorefrontLocale(): StorefrontLocale {
-  return useContext(StorefrontLocaleContext)
+  return useContext(StorefrontLocaleContext) ?? en
 }

package/src/locales/types.ts CHANGED Viewed

@@ -40,35 +40,38 @@ export interface StorefrontLocale {
 }
 /**
- * THE AREAS WHOSE PACK THE APP MUST HAND OVER AS A PROP.
+ * THE AREAS WHOSE PACK THE APP MUST HAND OVER AS A PROP, and the prop is
+ * REQUIRED.
  *
  * Not a style choice and not a gap in this layer: a React SERVER component
  * cannot read a client context, and these areas are rendered on the server.
  * `StorefrontLocaleProvider` therefore reaches the client components and
- * nothing else, and a server-rendered heading stays English however many
- * providers are mounted above it.
+ * nothing else, and a server-rendered heading would stay English however
+ * many providers were mounted above it.
  *
- * Corrected 2026-09-13: this used to list `store` and `reviews` only, and
- * Alexander found the consequence on evoo, a Bulgarian store whose product
- * page ended in the English "Related products / You might also want to
- * check out these products". `products` and `order` belong here too, and
- * `ProductTemplate` was not even passing the pack down to its own
- * related-products strip, which made that strip untranslatable without
- * ejecting a file.
+ * Since 2026-09-14 the page-level templates of these areas REQUIRE the pack
+ * (`labels: StoreLabels`, never `labels?`), so a page that forgets it fails
+ * to compile instead of shipping silent English. That was the defect: on
+ * 2026-09-13 evoo, a Bulgarian store, ended a product page in the English
+ * "Related products / You might also want to check out these products", and
+ * its search page and order confirmation stayed English, with no error, no
+ * warning and no failing test. English is not a special case: an English
+ * store passes `en.store`. The scaffold declares `STORE_LOCALE` once in its
+ * config and every page reads its area from it.
  *
  * Hand the pack to each page-level template once and everything inside it
  * follows:
  *
- *   <ProductTemplate labels={locale.products} />   // + the related strip
- *   <StoreTemplate   labels={locale.store} />
- *   <SearchTemplate  labels={locale.store} />
- *   <OrderCompletedTemplate labels={locale.order} />
- *   <ReviewWidget    labels={locale.reviews} />
+ *   <StoreTemplate          labels={STORE_LOCALE.store} />
+ *   <SearchTemplate         labels={STORE_LOCALE.store} />
+ *   <CollectionTemplate     labels={STORE_LOCALE.store} />
+ *   <CategoryTemplate       labels={STORE_LOCALE.store} />
+ *   <ProductTemplate        labels={STORE_LOCALE.products} />   // + the related strip
+ *   <OrderCompletedTemplate labels={STORE_LOCALE.order} />
  *
- * The cart drawer is the same case for a different reason: it owns the
- * cart's state, so the app mounts it and hands it `locale.cartDrawer`.
+ * The cart drawer and the reviews family were listed here until 2026-09-14.
+ * They are client components, so they now read the mounted language
+ * themselves (`useLocaleArea` in ./context); their `labels` prop is an
+ * override, never a requirement.
  */
-export type PropLabelAreas = Pick<
-  StorefrontLocale,
-  "products" | "store" | "order" | "reviews" | "cartDrawer"
->
+export type PropLabelAreas = Pick<StorefrontLocale, "products" | "store" | "order">

package/src/order/order-completed-template.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import Link from "next/link"
 import { ChevronLeft } from "lucide-react"
 import type { StoreOrderDetail, StoreOrderItem } from "../api/orders"
-import { defaultOrderLabels, type OrderLabels } from "./labels"
+import type { OrderLabels } from "./labels"
 import {
   OrderConfirmationHeader,
   type OrderHeaderData,
@@ -67,7 +67,14 @@ type OrderCompletedTemplateProps = {
   /** The merchant method's name — wins over any provider bucket. */
   paymentMethodName?: string | null
   cardLast4?: string | null
-  labels?: OrderLabels
+  /**
+   * The store's order pack, REQUIRED: this template renders on the server,
+   * where `StorefrontLocaleProvider` cannot reach, so the page passes
+   * `STORE_LOCALE.order` (`en.order` for an English store). Required since
+   * 2026-09-14 so that forgetting it fails the build instead of shipping
+   * silent English, which is how evoo's confirmation page stayed English.
+   */
+  labels: OrderLabels
   locale?: string
   contactHref?: string
   returnsHref?: string
@@ -90,14 +97,13 @@ export function OrderCompletedTemplate({
   paymentProviderId,
   paymentMethodName,
   cardLast4,
-  labels,
+  labels: l,
   locale,
   contactHref,
   returnsHref,
   storeHref = "/store",
   methodFeeLabel,
 }: OrderCompletedTemplateProps) {
-  const l = { ...defaultOrderLabels, ...labels }
   const displayItems =
     items ?? (order.items ?? []).map(displayItemFromOrderItem)