@cartbase/storefront 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.13.0",
+  "version": "0.14.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": {

package/src/locales/types.ts

@@ -40,10 +40,35 @@ export interface StorefrontLocale {
 }
 
 /**
- * The two areas that read labels from a PROP rather than a context
- * (`store` and `reviews`) are handed their pack by the app:
- * `<StoreTemplate labels={locale.store} />`. The other four are served by
- * `StorefrontLocaleProvider`. That split is the components' existing
- * shape, not a decision of this layer.
+ * THE AREAS WHOSE PACK THE APP MUST HAND OVER AS A PROP.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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} />
+ *
+ * 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`.
  */
-export type PropLabelAreas = Pick<StorefrontLocale, "store" | "reviews">
+export type PropLabelAreas = Pick<
+  StorefrontLocale,
+  "products" | "store" | "order" | "reviews" | "cartDrawer"
+>

package/src/products/product-template.tsx

@@ -21,6 +21,7 @@ import { ImageGallery } from "./image-gallery"
 import { ProductActions, type AddToCartInput } from "./product-actions"
 import { ProductTabs, type ProductSection } from "./product-tabs"
 import type { ProductPromise } from "./product-promises"
+import type { ProductLabels } from "./labels"
 import { RelatedProducts } from "./related-products"
 import { ProductInfo } from "./product-info"
 import { ProductActionsWrapper } from "./product-actions-wrapper"
@@ -39,6 +40,17 @@ type ProductTemplateProps = {
    * the library cannot promise anything on a merchant's behalf.
    */
   promises?: ProductPromise[]
+  /**
+   * The store's product pack. REQUIRED FOR A TRANSLATED PAGE even when a
+   * `StorefrontLocaleProvider` is mounted: the related-products strip is a
+   * SERVER component and a server component cannot read a client context,
+   * so its heading stays English unless the pack arrives as a prop. Until
+   * 2026-09-13 this template did not accept one at all and did not pass one
+   * down, which made that strip untranslatable without ejecting the file
+   * (Alexander found it on evoo: a Bulgarian page ending in "Related
+   * products / You might also want to check out these products").
+   */
+  labels?: Partial<ProductLabels>
   /** Drop the physical-facts section even for a product that has facts. */
   hideSpecs?: boolean
   /** Anything else the store wants in the accordion, appended in order. */
@@ -53,6 +65,7 @@ export function ProductTemplate({
   onAddToCart,
   openCart,
   promises,
+  labels,
   hideSpecs,
   sections,
 }: ProductTemplateProps) {
@@ -123,6 +136,7 @@ export function ProductTemplate({
             client={client}
             product={product}
             pricingContext={pricingContext}
+            labels={labels}
           />
         </Suspense>
       </div>

package/src/products/related-products.tsx

@@ -31,7 +31,13 @@ type RelatedProductsProps = {
   pricingContext?: PricingContextQuery
   /** 1–24, server default 12. */
   limit?: number
-  labels?: Pick<ProductLabels, "relatedProducts" | "relatedProductsDescription">
+  /**
+   * The store's product pack, or just the two keys this strip uses. It has
+   * to arrive as a PROP: this is a server component, so it cannot read
+   * `ProductLabelsProvider`, and its heading stays English without one.
+   * `ProductTemplate` passes the pack it is given straight through.
+   */
+  labels?: Partial<ProductLabels>
   /** Override the default ProductPreview with a store-specific card. */
   renderProduct?: ComponentType<{ product: StoreProduct }>
 }