@tokenoftrust/storefront-runner 2.4.38 → 2.4.40

package/apps/storefront/env.d.ts

@@ -141,6 +141,17 @@ declare global {
        * inside this prefix on the client.
        */
       basePath: string;
+      /**
+       * The tenant's REAL routed prefix, always — never overridden to a candidate/
+       * revision-pinned render's own prefix the way {@link basePath} is. A pinned
+       * preview (`/preview/render/<tenant>/<changeId>`, `/preview/rev/<sha>`,
+       * `/preview/staged/<sha>`) has no API mirror under its prefix (the catch-all
+       * preview route only renders pages), so any same-origin fetch to a real
+       * backend endpoint (`/api/...`) must be built from THIS, not `basePath`, or
+       * it 404s under preview. Nav hrefs still want `basePath` so they stay inside
+       * the pinned render.
+       */
+      apiBasePath: string;
       /**
        * Which customization environment to serve. "live" on production
        * hosts; "test" only behind a valid, tenant-bound preview token on a

package/apps/storefront/public/shared/commerce-chrome.css

@@ -330,10 +330,13 @@ a.article-card__tag:hover { text-decoration: underline; }
 .age-gate__panel { width: min(30rem, 100%); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 40px); text-align: center; }
 .age-gate__mark { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; color: var(--color-text); }
 .age-gate__mark .is-red { color: var(--color-primary); }
+.age-gate__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
 .age-gate h2 { margin-top: 14px; font-size: clamp(1.4rem, 3vw, 1.85rem); }
 .age-gate p { margin-top: 10px; color: var(--color-text); }
 .age-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
 .age-gate__actions .btn { min-width: 9rem; }
+.age-gate__help { font-size: .875rem; }
+.age-gate__help a { color: var(--color-accent-ink, var(--color-primary)); text-decoration: underline; }
 .age-gate__deny { display: none; }
 .age-gate.is-denied .age-gate__enter, .age-gate.is-denied .age-gate__lede { display: none; }
 .age-gate.is-denied .age-gate__deny { display: block; margin-top: 18px; color: var(--color-error); font-weight: 600; }

package/apps/storefront/src/components/chrome/SiteFooter.astro

@@ -50,7 +50,7 @@ const {
   class: className,
 } = Astro.props;
 
-const { basePath } = Astro.locals;
+const { basePath, apiBasePath } = Astro.locals;
 const hrefOf = (l: ChromeLink) => (l.external ? l.href : withBase(basePath, l.href));
 const showLogo = !!brand?.logo && /^(https?:|\/)/.test(brand.logo.src);
 const columnLinkStamp = (l: ChromeLink, colIndex: number, index: number) =>
@@ -184,7 +184,7 @@ const collapsible = variant === "light-collapsible";
           {newsletter.title && <h3 class="font-display text-base font-semibold">{newsletter.title}</h3>}
           {newsletter.body && <p class="mt-1 text-sm text-muted">{newsletter.body}</p>}
           <form
-            action={withBase(basePath, newsletter.action ?? "/api/newsletter")}
+            action={withBase(apiBasePath, newsletter.action ?? "/api/newsletter")}
             method="post"
             class="mt-4 flex max-w-md flex-col gap-3 sm:flex-row sm:flex-wrap"
           >

package/apps/storefront/src/lib/rawChrome.ts

@@ -47,7 +47,7 @@ import type {
   HeaderVariant,
   SocialLink,
 } from "./chrome/model.js";
-import { resolveAgeGateCopy, resolveChromeAssignment } from "./chrome/model.js";
+import { isSafeAgeGateHref, resolveAgeGateCopy, resolveChromeAssignment } from "./chrome/model.js";
 import { resolveHeaderVariant } from "./chrome/variant.js";
 
 /** HTML-escape text/attribute content. Covers the five significant characters. */
@@ -436,6 +436,9 @@ function renderHeader(header: ChromeHeader, variant: HeaderVariant, currentPath?
  * can't close the tag early.
  */
 function renderAgeGate(g: ChromeAgeGate): string {
+  // showNo/eyebrow/helpLink defaults mirror resolveAgeGateRuntime (AgeGate.tsx)
+  // exactly, so the raw-chrome gate and the component gate present identically
+  // for the same chrome.json.
   const resolved = {
     ...g,
     title: resolveAgeGateCopy(g.title, g.minAge),
@@ -444,6 +447,13 @@ function renderAgeGate(g: ChromeAgeGate): string {
     noLabel: resolveAgeGateCopy(g.noLabel, g.minAge),
     denyText: resolveAgeGateCopy(g.denyText, g.minAge),
     fineText: resolveAgeGateCopy(g.fineText, g.minAge),
+    showNo: g.showNo !== false,
+    eyebrow:
+      g.eyebrow === false ? null : (resolveAgeGateCopy(g.eyebrow, g.minAge) ?? "Age verification"),
+    helpLink:
+      g.helpLink && isSafeAgeGateHref(g.helpLink.href)
+        ? { label: resolveAgeGateCopy(g.helpLink.label, g.minAge) ?? g.helpLink.label, href: g.helpLink.href }
+        : null,
   };
   const json = JSON.stringify(resolved).replace(/</g, "\\u003c");
   return `<script type="application/json" id="tot-age-gate-config">${json}</script>`;
@@ -726,20 +736,28 @@ export const CHROME_BEHAVIOR_JS = `(function () {
             return '<span' + (p.className ? ' class="' + gescape(p.className) + '"' : '') + '>' + gescape(p.text) + '</span>';
           }).join('') + '</p>'
         : '';
+      var geyebrow = !gmark && gcfg.eyebrow ? '<p class="age-gate__eyebrow">' + gescape(gcfg.eyebrow) + '</p>' : '';
       var gtitle = gescape(gcfg.title || ('Are you ' + gcfg.minAge + ' or older?'));
       var glede = gcfg.lede ? '<p class="age-gate__lede" id="ageGateBody">' + gescape(gcfg.lede) + '</p>' : '';
       var gfine = gcfg.fineText ? '<p class="age-gate__fine">' + gescape(gcfg.fineText) + '</p>' : '';
       var gdeny = gescape(gcfg.denyText || ('You must be ' + gcfg.minAge + ' or older to enter this site.'));
       var gdescribedby = gcfg.lede ? ' aria-describedby="ageGateBody"' : '';
+      var gnoButton = gcfg.showNo
+        ? '<button type="button" class="btn btn-outline age-gate__enter" id="ageNo">' + gescape(gcfg.noLabel || ('No, I am under ' + gcfg.minAge)) + '</button>'
+        : '';
+      var ghelp = gcfg.helpLink
+        ? '<p class="age-gate__help"><a href="' + gescape(gcfg.helpLink.href) + '">' + gescape(gcfg.helpLink.label) + '</a></p>'
+        : '';
 
       mount.innerHTML =
         '<div class="age-gate" id="ageGate" role="dialog" aria-modal="true" aria-labelledby="ageGateTitle"' + gdescribedby + '>' +
-        '<div class="age-gate__panel">' + gmark +
+        '<div class="age-gate__panel">' + gmark + geyebrow +
         '<h2 id="ageGateTitle">' + gtitle + '</h2>' + glede +
         '<div class="age-gate__actions">' +
         '<button type="button" class="btn btn-primary age-gate__enter" id="ageYes">' + gescape(gcfg.yesLabel || ('Yes, I am ' + gcfg.minAge + '+')) + '</button>' +
-        '<button type="button" class="btn btn-outline age-gate__enter" id="ageNo">' + gescape(gcfg.noLabel || ('No, I am under ' + gcfg.minAge)) + '</button>' +
+        gnoButton +
         '</div>' +
+        ghelp +
         '<p class="age-gate__deny" id="ageDeny">' + gdeny + '</p>' + gfine +
         '</div></div>';
 

package/apps/storefront/src/middleware/renderChain.ts

@@ -668,6 +668,12 @@ export async function runRenderChain(input: RenderChainInput): Promise<Response>
   // `/preview/render/<tenant>/<changeId>`) so a pinned page's OWN generated
   // links stay inside that candidate instead of escaping to the live host.
   locals.basePath = candidatePin ? candidatePin.basePath : basePath;
+  // ALWAYS the real tenant-routed prefix, even under a candidate/revision pin —
+  // fb-1791905696516-ubw8a3: a pinned preview's catch-all route only knows how to
+  // RENDER a page, so same-origin fetches to a real `/api/...` backend endpoint
+  // (checkout handoff, compliance preflight, newsletter) must stay off `basePath`
+  // once it's pin-overridden, or they 404 under preview.
+  locals.apiBasePath = basePath;
   // Renderer-owned four-stage browser environment (ADR 0014 E1 / 0017), computed
   // ONCE here from authoritative request state and serialized before app code by
   // both document mounts (Layout.astro + rawHtmlResponse). The candidate render

package/apps/storefront/src/pages/index.astro

@@ -43,7 +43,7 @@ import {
   type CommerceStaticResolved,
 } from "@/lib/homeVisualParity";
 
-const { tenant, tot, content, basePath, canonicalBase, features, capabilities } = Astro.locals;
+const { tenant, tot, content, basePath, apiBasePath, canonicalBase, features, capabilities } = Astro.locals;
 const marketing = !features.catalog;
 
 // Raw-HTML home (vendor-injected): serve the tenant's own self-contained
@@ -296,7 +296,7 @@ const homeSectionWidgets = marketing
               </h2>
               {b.body && <p class="mt-3 text-[var(--color-muted)]">{b.body}</p>}
               <form
-                action={withBase(basePath, "/api/newsletter")}
+                action={withBase(apiBasePath, "/api/newsletter")}
                 method="post"
                 class="mx-auto mt-7 flex max-w-md flex-col gap-3 sm:flex-row"
               >

package/apps/storefront/src/pages/products/[handle].astro

@@ -49,7 +49,7 @@ import { getRegistryService } from "@/lib/apps/registryAccess.js";
 import { renderWidgetSlot } from "@/lib/apps/widgets/renderSlot.js";
 
 const { handle } = Astro.params;
-const { tenant, tot, canonicalBase, basePath, commerce } = Astro.locals;
+const { tenant, tot, canonicalBase, basePath, apiBasePath, commerce } = Astro.locals;
 // Commerce-only route: marketing tenants have no product detail pages.
 if (!Astro.locals.features.catalog) return new Response(null, { status: 404 });
 const compliance = tenant.compliance;
@@ -380,7 +380,7 @@ const jsonLd = [productJsonLd, breadcrumbLd(crumbs, canonicalBase)];
           productTitle={product.title}
           checkoutCart={checkoutCart}
           pricing={pricing}
-          handoffUrl={withBase(basePath, "/api/commerce/checkout-handoff")}
+          handoffUrl={withBase(apiBasePath, "/api/commerce/checkout-handoff")}
         />
         {/* Regulated-tenant checkout ENFORCEMENT gate. Intercepts the
             managed-cart handoff to clear age + ship-to compliance server-side
@@ -389,7 +389,7 @@ const jsonLd = [productJsonLd, breadcrumbLd(crumbs, canonicalBase)];
         {checkoutCart && isRegulatedTenant(tenant) && compliance?.minAge && (
           <CheckoutComplianceGate
             client:load
-            preflightUrl={withBase(basePath, "/api/compliance/preflight")}
+            preflightUrl={withBase(apiBasePath, "/api/compliance/preflight")}
             minAge={compliance.minAge}
           />
         )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "2.4.38",
+  "version": "2.4.40",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",