@tokenoftrust/storefront-runner 2.4.38 → 2.4.39

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/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/package.json

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