@cartbase/storefront 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.12.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": {
@@ -158,6 +158,8 @@
     "./products/product-actions": "./src/products/product-actions.tsx",
     "./products/mobile-actions": "./src/products/mobile-actions.tsx",
     "./products/product-tabs": "./src/products/product-tabs.tsx",
+    "./products/product-specs": "./src/products/product-specs.tsx",
+    "./products/product-promises": "./src/products/product-promises.tsx",
     "./products/product-info": "./src/products/product-info.tsx",
     "./products/product-preview": "./src/products/product-preview.tsx",
     "./products/related-products": "./src/products/related-products.tsx",

package/src/cart-drawer/labels.ts

@@ -99,7 +99,11 @@ export const defaultCartDrawerLabels: CartDrawerLabels = {
   addToCart: "Add",
 
   subtotal: "Subtotal",
-  taxAndShipping: "VAT included. Shipping calculated at checkout.",
+  // Neutral and true on every store: it states WHEN the numbers are worked
+  // out, not which tax regime applies. It read "VAT included. Shipping
+  // calculated at checkout." until 2026-09-13, and the first half is false
+  // wherever tax is added at checkout instead of sitting in the price.
+  taxAndShipping: "Taxes and shipping calculated at checkout.",
   shipping: "Shipping",
   free: "FREE",
   calculatedAtCheckout: "Calculated at checkout",

package/src/checkout/labels.ts

@@ -81,7 +81,13 @@ export type CheckoutLabels = {
   shippingCalc: string
   shippingFree: string
   tax: string
-  taxTooltip: string
+  /**
+   * What the tax is, in the store's words. OPTIONAL and undefined by
+   * default: a rate ("20% VAT") or a regime ("included in prices") is the
+   * store's fact, and the tooltip is simply absent when the store says
+   * nothing.
+   */
+  taxTooltip?: string
   total: string
   discount: string
   discountCode: string
@@ -306,8 +312,16 @@ export const defaultCheckoutLabels: CheckoutLabels = {
   shipping: "Shipping",
   shippingCalc: "Calculated at checkout",
   shippingFree: "Free",
-  tax: "VAT incl.",
-  taxTooltip: "20% VAT is included in prices",
+  // The row NAME, neutral on purpose: it sits beside a number, so it must
+  // say something, but "VAT incl." names one tax regime and asserts that
+  // prices include it. That is Bulgaria's answer, not Germany's, and not any
+  // US state's. A store that wants its own word sets it in its pack.
+  tax: "Tax",
+  // NO DEFAULT. The explanation used to read "20% VAT is included in
+  // prices", a rate and a regime the library cannot know, translated into
+  // three languages. A store writes it or the tooltip does not appear at
+  // all, which costs a shopper nothing.
+  taxTooltip: undefined,
   total: "Total",
   discount: "Discount",
   discountCode: "Discount code",

package/src/checkout/order-summary.tsx

@@ -431,24 +431,33 @@ export function OrderSummary({
           )}
 
           <div className="flex justify-between text-sm">
+            {/* The tax row's NAME always shows: it names the number beside
+                it. The explanation only shows if the store wrote one, because
+                what a tax is and whether it is included in the price is the
+                store's fact, not ours (2026-09-13: the default said "20% VAT
+                is included in prices", Bulgaria's rate, to every merchant). */}
             <span className="text-muted-foreground flex items-center gap-1 relative group">
               {labels.tax}
-              <svg
-                className="w-3.5 h-3.5 text-muted-foreground cursor-help"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <span className="absolute left-0 bottom-full mb-1.5 px-2.5 py-1.5 text-xs text-card bg-foreground rounded-md whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
-                {labels.taxTooltip}
-              </span>
+              {labels.taxTooltip && (
+                <>
+                  <svg
+                    className="w-3.5 h-3.5 text-muted-foreground cursor-help"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <span className="absolute left-0 bottom-full mb-1.5 px-2.5 py-1.5 text-xs text-card bg-foreground rounded-md whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
+                    {labels.taxTooltip}
+                  </span>
+                </>
+              )}
             </span>
             <Price
               amount={cart.tax_total ?? 0}

package/src/checkout/use-checkout-orchestration.ts

@@ -1136,9 +1136,11 @@ export function useCheckoutOrchestration({
         )
       })
     } else {
-      setPaymentError(
-        "Плащането не беше потвърдено. Моля, опитайте отново или изберете друг метод."
-      )
+      // The store's own words. This was a hardcoded BULGARIAN sentence until
+      // 2026-09-13: the 2026-09-13 morning sweep fixed the three error-copy
+      // modules and missed this one, because it sits in the 3DS-return
+      // effect rather than in a copy module. Same meaning, from the pack.
+      setPaymentError(checkoutLabels.paymentErrors.paymentNotAuthorized)
       logError?.("place_order_error", "redirect_not_succeeded", {
         via: "3ds_return",
         cartId: cart.id,

package/src/locales/bg.ts

@@ -36,16 +36,8 @@ export const bg: StorefrontLocale = {
     countryOfOrigin: "Произход",
     type: "Тип",
     weight: "Тегло",
+    weightUnit: "г",
     dimensions: "Размери",
-    fastDelivery: "Бърза доставка",
-    fastDeliveryDescription:
-      "Вашата пратка ще пристигне в рамките на 3-5 работни дни до офис на куриер или до вашия адрес.",
-    simpleExchanges: "Лесна замяна",
-    simpleExchangesDescription:
-      "Размерът не е точен? Без проблем — ще заменим продукта с нов.",
-    easyReturns: "Лесно връщане",
-    easyReturnsDescription:
-      "Просто върнете продукта и ще ви възстановим парите. Без въпроси — ще направим всичко възможно връщането да бъде безпроблемно.",
     relatedProducts: "Подобни продукти",
     relatedProductsDescription:
       "Може да ви заинтересуват и тези продукти.",
@@ -160,8 +152,12 @@ export const bg: StorefrontLocale = {
     shipping: "Доставка",
     shippingCalc: "Ще бъде изчислена",
     shippingFree: "Безплатна",
+    // The WORD is the pack's (a Bulgarian store's prices include ДДС). The
+    // RATE is not: it is the store's fact and it changes by law. Declared
+    // and deliberately empty, so the tooltip does not appear until a store
+    // writes its own.
     tax: "Вкл. ДДС",
-    taxTooltip: "ДДС 20% е включен в цените",
+    taxTooltip: undefined,
     total: "Обща сума",
     discount: "Отстъпка",
     discountCode: "Код за отстъпка",

package/src/locales/es.ts

@@ -42,16 +42,8 @@ export const es: StorefrontLocale = {
     countryOfOrigin: "País de origen",
     type: "Tipo",
     weight: "Peso",
+    weightUnit: "g",
     dimensions: "Dimensiones",
-    fastDelivery: "Entrega rápida",
-    fastDeliveryDescription:
-      "Tu paquete llegará en 3-5 días laborables a tu punto de recogida o a la comodidad de tu casa.",
-    simpleExchanges: "Cambios sencillos",
-    simpleExchangesDescription:
-      "¿No te queda del todo bien? Sin problema, cambiamos tu producto por uno nuevo.",
-    easyReturns: "Devoluciones fáciles",
-    easyReturnsDescription:
-      "Solo tienes que devolver tu producto y te reembolsamos el dinero. Sin preguntas: haremos todo lo posible para que tu devolución sea sencilla.",
     relatedProducts: "Productos relacionados",
     relatedProductsDescription:
       "Quizá también te interesen estos productos.",
@@ -164,8 +156,12 @@ export const es: StorefrontLocale = {
     shipping: "Envío",
     shippingCalc: "Se calcula en el pago",
     shippingFree: "Gratis",
+    // The WORD is the pack's. The RATE is not, and this one was WRONG: it
+    // said 20%, which is Bulgaria's rate, while Spain's IVA is 21%. It came
+    // from translating the old English default instead of asking whose fact
+    // it was. Declared and deliberately empty.
     tax: "IVA incl.",
-    taxTooltip: "El IVA del 20% está incluido en los precios",
+    taxTooltip: undefined,
     total: "Total",
     discount: "Descuento",
     discountCode: "Código de descuento",

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/index.ts

@@ -32,7 +32,9 @@ export {
   type AddToCartInput,
 } from "./product-actions"
 export { MobileActions, type MobileActionsProps } from "./mobile-actions"
-export { ProductTabs } from "./product-tabs"
+export { ProductTabs, type ProductSection } from "./product-tabs"
+export { ProductSpecs, hasProductSpecs } from "./product-specs"
+export { ProductPromises, type ProductPromise } from "./product-promises"
 export { ProductInfo, type ProductInfoProps } from "./product-info"
 export { ProductPreview, type ProductPreviewProps } from "./product-preview"
 export { RelatedProducts, type RelatedProductsProps } from "./related-products"

package/src/products/labels.ts

@@ -17,13 +17,19 @@ export type ProductLabels = {
   countryOfOrigin: string
   type: string
   weight: string
+  /**
+   * The unit the weight is shown in. The platform stores a bare number, so
+   * the library has to name a unit and "g" is its guess; a store selling in
+   * pounds or kilos says so here rather than editing a component.
+   */
+  weightUnit: string
   dimensions: string
-  fastDelivery: string
-  fastDeliveryDescription: string
-  simpleExchanges: string
-  simpleExchangesDescription: string
-  easyReturns: string
-  easyReturnsDescription: string
+  // NO DELIVERY, EXCHANGE OR RETURN COPY HERE (removed 2026-09-13). Those
+  // six keys carried the store's PROMISES ("Your package will arrive in 3-5
+  // business days", "we'll refund your money"), which the library cannot
+  // know and must never assert for a merchant. They are now the store's own
+  // content: `ProductPromise[]` passed to `ProductTabs`, and the section
+  // does not render when the store gives none.
   relatedProducts: string
   relatedProductsDescription: string
 }
@@ -41,16 +47,8 @@ export const defaultProductLabels: ProductLabels = {
   countryOfOrigin: "Country of origin",
   type: "Type",
   weight: "Weight",
+  weightUnit: "g",
   dimensions: "Dimensions",
-  fastDelivery: "Fast delivery",
-  fastDeliveryDescription:
-    "Your package will arrive in 3-5 business days at your pick up location or in the comfort of your home.",
-  simpleExchanges: "Simple exchanges",
-  simpleExchangesDescription:
-    "Is the fit not quite right? No worries - we'll exchange your product for a new one.",
-  easyReturns: "Easy returns",
-  easyReturnsDescription:
-    "Just return your product and we'll refund your money. No questions asked – we'll do our best to make sure your return is hassle-free.",
   relatedProducts: "Related products",
   relatedProductsDescription:
     "You might also want to check out these products.",

package/src/products/product-info.tsx

@@ -29,12 +29,43 @@ export function ProductInfo({ product }: ProductInfoProps) {
         >
           {product.title}
         </h2>
-        <p
-          className="text-sm text-muted-foreground whitespace-pre-line"
-          data-testid="product-description"
-        >
-          {product.description}
-        </p>
+        {product.description && (
+          <div
+            className={[
+              "text-sm text-muted-foreground",
+              // The editor's own structure, styled: paragraphs, lists,
+              // headings and links as the merchant wrote them.
+              "[&_p]:mb-3 [&_p:last-child]:mb-0",
+              "[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-3",
+              "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-3",
+              "[&_li]:mb-1",
+              "[&_strong]:font-semibold [&_strong]:text-foreground",
+              "[&_b]:font-semibold [&_b]:text-foreground",
+              "[&_em]:italic",
+              "[&_h1]:text-base [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:mt-4 [&_h1]:mb-2",
+              "[&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:mt-4 [&_h2]:mb-2",
+              "[&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:mt-3 [&_h3]:mb-1",
+              "[&_a]:underline [&_a]:text-foreground",
+              "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:italic",
+              "[&_table]:w-full [&_table]:text-left [&_td]:py-1 [&_th]:py-1 [&_th]:font-semibold",
+              "[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg",
+            ].join(" ")}
+            data-testid="product-description"
+            // The description is RICH TEXT, written in the admin's editor
+            // and stored as HTML. It used to render as {product.description}
+            // inside a <p>, so a shopper read the tags instead of the words
+            // (Alexander, on evoo, 2026-09-13).
+            //
+            // Rendering it raw is the platform's documented contract, the
+            // same one `api/content` states for pages and blog posts: every
+            // write path sanitizes on the way IN
+            // (`sanitizeContentHtml`: scripts, styles, event handlers and
+            // javascript: URLs are stripped, never escaped in), so the
+            // stored value is safe to render and sanitizing again on every
+            // read would only cost time.
+            dangerouslySetInnerHTML={{ __html: product.description }}
+          />
+        )}
       </div>
     </div>
   )

package/src/products/product-promises.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { RefreshCw, Truck, Undo2 } from "lucide-react"
+
+/**
+ * ONE PROMISE THE STORE MAKES: a delivery time, an exchange, a return.
+ *
+ * A PROMISE IS NOT A LABEL. A label names a piece of the interface, so the
+ * library owns it and translates it. A promise states a fact about the
+ * merchant's business, which the library cannot know and must never assert
+ * for them. Until 2026-09-13 it did: this section shipped "Your package
+ * will arrive in 3-5 business days" and "we'll refund your money" as label
+ * DEFAULTS, translated into three languages, on behalf of every merchant on
+ * earth. Alexander found it on evoo's product page.
+ *
+ * So there is no default here and none is not an error: a store that says
+ * nothing shows nothing.
+ */
+export type ProductPromise = {
+  /** A built-in mark, or none. */
+  icon?: "delivery" | "exchange" | "return"
+  title: string
+  body?: string
+}
+
+const ICONS = {
+  delivery: Truck,
+  exchange: RefreshCw,
+  return: Undo2,
+} as const
+
+/**
+ * The store's promises, in the order the store gave them. Any number: three
+ * is a convention, not a shape. Returns nothing for an empty list.
+ */
+export function ProductPromises({ promises }: { promises: ProductPromise[] }) {
+  if (!promises.length) return null
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-1 gap-y-8">
+        {promises.map((promise, i) => {
+          const Icon = promise.icon ? ICONS[promise.icon] : null
+          return (
+            <div key={`${promise.title}-${i}`} className="flex items-start gap-x-2">
+              {Icon && (
+                <Icon className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+              )}
+              <div>
+                <span className="font-semibold text-foreground">{promise.title}</span>
+                {promise.body && (
+                  <p className="max-w-sm text-muted-foreground">{promise.body}</p>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/products/product-specs.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+
+/**
+ * The product's physical facts: material, origin, type, weight, dimensions.
+ *
+ * IT RENDERS ONLY WHAT THE PRODUCT HAS, and nothing at all when it has
+ * none. That is the whole point of this file (2026-09-13). It used to be a
+ * fixed two-column grid of all five fields with "-" in every empty one, so
+ * a store selling food showed a table reading Material "-", Origin "-",
+ * Weight "-", Dimensions "-". Alexander found it on evoo. The admin has had
+ * an empty-cell law since 2026-08 for exactly this reason: a fact the
+ * merchant never entered is not a fact worth a row.
+ *
+ * A store mounts it if it wants it. `ProductTabs` offers it as a section
+ * and skips the section when this returns nothing.
+ */
+export function ProductSpecs({ product }: { product: StoreProduct }) {
+  const labels = useProductLabels()
+
+  const rows: Array<{ label: string; value: string }> = []
+  const add = (label: string, value: string | null | undefined) => {
+    const v = typeof value === "string" ? value.trim() : value
+    if (v) rows.push({ label, value: String(v) })
+  }
+
+  add(labels.material, product.material)
+  add(labels.countryOfOrigin, product.origin_country)
+  add(labels.type, product.type?.value)
+  add(labels.weight, product.weight ? `${product.weight} ${labels.weightUnit}` : null)
+  add(
+    labels.dimensions,
+    product.length && product.width && product.height
+      ? `${product.length}L x ${product.width}W x ${product.height}H`
+      : null
+  )
+
+  if (rows.length === 0) return null
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+        {rows.map((row) => (
+          <div key={row.label}>
+            <span className="font-semibold text-foreground">{row.label}</span>
+            <p className="text-muted-foreground">{row.value}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** True when this product has at least one physical fact to show. */
+export function hasProductSpecs(product: StoreProduct): boolean {
+  return !!(
+    product.material?.trim() ||
+    product.origin_country?.trim() ||
+    product.type?.value?.trim() ||
+    product.weight ||
+    (product.length && product.width && product.height)
+  )
+}

package/src/products/product-tabs.tsx

@@ -1,169 +1,123 @@
-"use client"
-
-/**
- * PDP info/shipping accordion — ported from
- * `@1click/ui/src/products/product-tabs.tsx` (v2.3.1). Data seam:
- * `HttpTypes.StoreProduct` → Cartbase `StoreProduct` (same physical fields:
- * material, origin_country, type.value, weight, length/width/height).
- * Layout, morphing +/− trigger, and label wiring unchanged.
- */
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { Truck, RefreshCw, Undo2 } from "lucide-react"
-
-import type { StoreProduct } from "../api/products"
-import { useProductLabels } from "./context"
-
-type ProductTabsProps = {
-  product: StoreProduct
-}
-
-export function ProductTabs({ product }: ProductTabsProps) {
-  const labels = useProductLabels()
-
-  const tabs = [
-    {
-      label: labels.productInformation,
-      component: <ProductInfoTab product={product} />,
-    },
-    {
-      label: labels.shippingAndReturns,
-      component: <ShippingInfoTab />,
-    },
-  ]
-
-  return (
-    <div className="w-full">
-      <AccordionPrimitive.Root type="multiple">
-        {tabs.map((tab, i) => (
-          <AccordionPrimitive.Item
-            key={i}
-            value={tab.label}
-            className="border-t border-border py-3 last:border-b"
-          >
-            <AccordionPrimitive.Header className="px-1">
-              <div className="flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">{tab.label}</span>
-                <AccordionPrimitive.Trigger>
-                  <MorphingTrigger />
-                </AccordionPrimitive.Trigger>
-              </div>
-            </AccordionPrimitive.Header>
-            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
-              <div className="w-full">{tab.component}</div>
-            </AccordionPrimitive.Content>
-          </AccordionPrimitive.Item>
-        ))}
-      </AccordionPrimitive.Root>
-    </div>
-  )
-}
-
-function ProductInfoTab({ product }: ProductTabsProps) {
-  const labels = useProductLabels()
-
-  return (
-    <div className="text-sm py-8">
-      <div className="grid grid-cols-2 gap-x-8">
-        <div className="flex flex-col gap-y-4">
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.material}
-            </span>
-            <p className="text-muted-foreground">
-              {product.material ? product.material : "-"}
-            </p>
-          </div>
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.countryOfOrigin}
-            </span>
-            <p className="text-muted-foreground">
-              {product.origin_country ? product.origin_country : "-"}
-            </p>
-          </div>
-          <div>
-            <span className="font-semibold text-foreground">{labels.type}</span>
-            <p className="text-muted-foreground">
-              {product.type ? product.type.value : "-"}
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-col gap-y-4">
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.weight}
-            </span>
-            <p className="text-muted-foreground">
-              {product.weight ? `${product.weight} g` : "-"}
-            </p>
-          </div>
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.dimensions}
-            </span>
-            <p className="text-muted-foreground">
-              {product.length && product.width && product.height
-                ? `${product.length}L x ${product.width}W x ${product.height}H`
-                : "-"}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ShippingInfoTab() {
-  const labels = useProductLabels()
-
-  return (
-    <div className="text-sm py-8">
-      <div className="grid grid-cols-1 gap-y-8">
-        <div className="flex items-start gap-x-2">
-          <Truck className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.fastDelivery}
-            </span>
-            <p className="max-w-sm text-muted-foreground">
-              {labels.fastDeliveryDescription}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-start gap-x-2">
-          <RefreshCw className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.simpleExchanges}
-            </span>
-            <p className="max-w-sm text-muted-foreground">
-              {labels.simpleExchangesDescription}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-start gap-x-2">
-          <Undo2 className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.easyReturns}
-            </span>
-            <p className="max-w-sm text-muted-foreground">
-              {labels.easyReturnsDescription}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function MorphingTrigger() {
-  return (
-    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
-      <div className="h-5 w-5">
-        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
-        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
-      </div>
-    </div>
-  )
-}
+"use client"
+
+/**
+ * The PDP accordion: ONE structure, and the sections are the store's.
+ *
+ * Rewritten 2026-09-13, on Alexander's reading of it: *"Why do we have the
+ * same component twice, one for product information and one for shipping
+ * and delivery? This is useless and redundant for a package that is for
+ * global use."* He is right, twice over.
+ *
+ * What was here: two bespoke tabs, always both, for one visual pattern. The
+ * first was a fixed grid of five physical fields with "-" in every empty
+ * one, so a store selling food rendered a table of dashes. The second
+ * asserted delivery, exchange and refund PROMISES out of label defaults,
+ * which the library cannot know for any merchant.
+ *
+ * What is here now: an accordion that renders the sections it is given, and
+ * NOTHING when it has none. The package still ships the two pieces stores
+ * usually want, `ProductSpecs` (only the facts the product has) and
+ * `ProductPromises` (only what the store says), both importable on their
+ * own, both skipped when they would be empty. Structure is ours; what a
+ * page says is the store's.
+ *
+ * Ported from `@1click/ui/src/products/product-tabs.tsx` (v2.3.1); the
+ * morphing +/− trigger is unchanged.
+ */
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import type { ReactNode } from "react"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+import { ProductPromises, type ProductPromise } from "./product-promises"
+import { ProductSpecs, hasProductSpecs } from "./product-specs"
+
+export type ProductSection = {
+  title: string
+  content: ReactNode
+}
+
+type ProductTabsProps = {
+  product: StoreProduct
+  /**
+   * The store's delivery, exchange and return promises. No default: with
+   * none, the section does not exist, because an absent section is better
+   * than a promise the store never made.
+   */
+  promises?: ProductPromise[]
+  /**
+   * Drop the physical-facts section even when the product has facts. It is
+   * offered by default because most catalogues want it; it is already
+   * skipped when the product has nothing to put in it.
+   */
+  hideSpecs?: boolean
+  /** Anything else the store wants in the accordion, appended in order. */
+  sections?: ProductSection[]
+}
+
+export function ProductTabs({
+  product,
+  promises,
+  hideSpecs,
+  sections,
+}: ProductTabsProps) {
+  const labels = useProductLabels()
+
+  const items: ProductSection[] = []
+
+  if (!hideSpecs && hasProductSpecs(product)) {
+    items.push({
+      title: labels.productInformation,
+      content: <ProductSpecs product={product} />,
+    })
+  }
+  if (promises?.length) {
+    items.push({
+      title: labels.shippingAndReturns,
+      content: <ProductPromises promises={promises} />,
+    })
+  }
+  if (sections?.length) items.push(...sections)
+
+  // Nothing to say, nothing drawn: no stray borders, no empty accordion.
+  if (items.length === 0) return null
+
+  return (
+    <div className="w-full">
+      <AccordionPrimitive.Root type="multiple">
+        {items.map((item, i) => (
+          <AccordionPrimitive.Item
+            key={`${item.title}-${i}`}
+            value={`${item.title}-${i}`}
+            className="border-t border-border py-3 last:border-b"
+          >
+            <AccordionPrimitive.Header className="px-1">
+              <div className="flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">{item.title}</span>
+                <AccordionPrimitive.Trigger>
+                  <MorphingTrigger />
+                </AccordionPrimitive.Trigger>
+              </div>
+            </AccordionPrimitive.Header>
+            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
+              <div className="w-full">{item.content}</div>
+            </AccordionPrimitive.Content>
+          </AccordionPrimitive.Item>
+        ))}
+      </AccordionPrimitive.Root>
+    </div>
+  )
+}
+
+function MorphingTrigger() {
+  return (
+    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
+      <div className="h-5 w-5">
+        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
+        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
+      </div>
+    </div>
+  )
+}
+
+export { type ProductTabsProps, type ProductPromise }

package/src/products/product-template.tsx

@@ -19,7 +19,9 @@ import type { PricingContextQuery } from "../api/types"
 import type { StoreProduct, StoreProductVariant } from "../api/products"
 import { ImageGallery } from "./image-gallery"
 import { ProductActions, type AddToCartInput } from "./product-actions"
-import { ProductTabs } from "./product-tabs"
+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"
@@ -32,6 +34,27 @@ type ProductTemplateProps = {
   addToCart: (input: AddToCartInput) => Promise<void>
   onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
   openCart?: () => void
+  /**
+   * The store's delivery, exchange and return promises, shown in the
+   * accordion. No default: with none, that section does not exist, because
+   * 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. */
+  sections?: ProductSection[]
 }
 
 export function ProductTemplate({
@@ -41,6 +64,10 @@ export function ProductTemplate({
   addToCart,
   onAddToCart,
   openCart,
+  promises,
+  labels,
+  hideSpecs,
+  sections,
 }: ProductTemplateProps) {
   if (!product || !product.id) {
     return notFound()
@@ -56,7 +83,12 @@ export function ProductTemplate({
       >
         <div className="flex flex-col sm:sticky sm:top-48 sm:py-0 sm:max-w-[300px] w-full py-8 gap-y-6">
           <ProductInfo product={product} />
-          <ProductTabs product={product} />
+          <ProductTabs
+            product={product}
+            promises={promises}
+            hideSpecs={hideSpecs}
+            sections={sections}
+          />
         </div>
         <div className="block w-full relative">
           <ImageGallery images={images} />
@@ -104,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 }>
 }

package/src/products/thumbnail.tsx

@@ -52,7 +52,12 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
           alt="Thumbnail"
           className="absolute inset-0 object-cover object-center"
           draggable={false}
-          quality={50}
+          // NO `quality` here (removed 2026-09-13). It asked for 50 while
+          // the scaffolded `next.config` allows [75], so Next warned on
+          // EVERY product image of every scaffolded store, both halves
+          // shipping from us. Next's own default is 75, which the scaffold
+          // allows, and a store that wants a different number sets it in
+          // its own config rather than having the library pick for it.
           sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
           fill
         />

package/src/reviews-ui/labels.ts

@@ -178,9 +178,9 @@ export const defaultReviewsUiLabels: ReviewsUiLabels = {
   copied: "Copied",
   copyAria: "Copy the code",
   rewardNote:
-    "We also emailed you the code. Use it on your next order — it is valid for a single use.",
+    "We also emailed you the code. Use it on your next order. It is valid for a single use.",
   codeUnavailable:
-    "The photo was saved. Something went wrong generating your discount code — write to us at {email} and we will send it right away.",
+    "The photo was saved. Something went wrong generating your discount code. Write to us at {email} and we will send it right away.",
   viewProduct: "View product",
   toStore: "Back to the store",
   errUnsupported: "The file {name} is not a supported format.",