@blamejs/blamejs-shop 0.1.19 → 0.1.22

package/lib/storefront.js

@@ -86,7 +86,7 @@ var LAYOUT =
   "  <title>{{title}} — {{shop_name}}</title>\n" +
   "  <meta name=\"description\" content=\"{{og_description}}\">\n" +
   "  <link rel=\"icon\" type=\"image/svg+xml\" href=\"/assets/brand/favicon.svg\">\n" +
-  "  <link rel=\"stylesheet\" href=\"{{theme_css}}\">\n" +
+  "  <link rel=\"stylesheet\" href=\"{{theme_css}}\"RAW_CSS_INTEGRITY>\n" +
   "  <meta property=\"og:type\" content=\"{{og_type}}\">\n" +
   "  <meta property=\"og:site_name\" content=\"{{shop_name}}\">\n" +
   "  <meta property=\"og:title\" content=\"{{og_title}}\">\n" +
@@ -211,10 +211,57 @@ var LAYOUT =
 // forces every active session to re-fetch.
 var DEFAULT_THEME_CSS_URL = "/assets/themes/default/css/main.css?v=" + require("../package.json").version;
 
+// Footer copyright year — resolved once at module load. It's a near-static
+// value (changes once a year); a `new Date()` allocation on every page
+// render was wasteful. Containers are long-lived and restart often enough
+// that a year-boundary staleness window doesn't matter for a copyright line.
+var _COPYRIGHT_YEAR = String(new Date().getUTCFullYear());
+
+// Client "island" scripts are served as external assets (same `?v=` cache-
+// bust as the CSS), never inline — the storefront's strict `script-src
+// 'self'` CSP blocks inline <script>, so an inline island silently fails
+// in production. `'self'` allows these /assets/ files; the R2 asset sync
+// (npm run sync-assets) uploads them alongside the stylesheets.
+var _ASSET_JS_VERSION = require("../package.json").version;
+var _assetFs = require("node:fs"); // allow:non-shop-require — one sync read of a bundled in-repo asset to compute its SRI hash via b.crypto.sri (the primitive needs the bytes); no remote/write, and b.staticServe.integrity is async so can't run at module load
+
+// Subresource Integrity for the static assets. `b.crypto.sri` (SHA-384,
+// W3C SRI 1.0) hashes the exact bytes the asset ships with; the browser
+// refuses to run/apply the resource if the served bytes don't match — a
+// defense against an R2/edge compromise or on-path injection. Computed
+// once per asset from the in-repo file (the same bytes the deploy's asset
+// sync uploads to R2), cached, and emitted as the `integrity` attribute.
+// Same-origin, so no `crossorigin` is required for the check to run.
+var _SRI_CACHE = {};
+function _assetSri(relUnderThemeAssets) {
+  if (Object.prototype.hasOwnProperty.call(_SRI_CACHE, relUnderThemeAssets)) {
+    return _SRI_CACHE[relUnderThemeAssets];
+  }
+  var sri = null;
+  try {
+    // Forward slashes resolve cross-platform for fs reads; avoids a
+    // node:path require for one join.
+    var p = __dirname + "/../themes/default/assets/" + relUnderThemeAssets;
+    sri = b.crypto.sri(_assetFs.readFileSync(p), { algorithm: "sha384" });
+  } catch (_e) { sri = null; } // asset absent (e.g. unit-test cwd) → omit integrity, don't crash render
+  _SRI_CACHE[relUnderThemeAssets] = sri;
+  return sri;
+}
+function _islandScript(name) {
+  var sri = _assetSri("js/" + name);
+  return "<script src=\"/assets/themes/default/js/" + name + "?v=" + _ASSET_JS_VERSION + "\"" +
+    (sri ? " integrity=\"" + sri + "\"" : "") + " defer></script>";
+}
+
 function _wrap(opts) {
   var themeCss = (opts && typeof opts.theme_css === "string" && opts.theme_css.length)
     ? opts.theme_css
     : DEFAULT_THEME_CSS_URL;
+  // SRI for the stylesheet — only for the default theme CSS we ship (and
+  // can hash); a custom operator-supplied `theme_css` is their asset with
+  // an unknown body, so it's left without an integrity attribute.
+  var cssSri = (themeCss === DEFAULT_THEME_CSS_URL) ? _assetSri("css/main.css") : null;
+  var themeCssIntegrity = cssSri ? " integrity=\"" + cssSri + "\"" : "";
   // OpenGraph / Twitter Card defaults — every page sets reasonable
   // fallbacks; per-page renderers (PDP, etc.) can override via
   // `opts.og_*` for a product-specific share preview.
@@ -228,16 +275,16 @@ function _wrap(opts) {
     title:          opts.title,
     shop_name:      shopName,
     cart_count:     opts.cart_count == null ? 0 : opts.cart_count,
-    year:           String(new Date().getUTCFullYear()),
+    year:           _COPYRIGHT_YEAR,
     search_q:       opts.search_q == null ? "" : opts.search_q,
-    theme_css:      themeCss,
+    theme_css:           themeCss,
     og_type:        ogType,
     og_title:       ogTitle,
     og_description: ogDescription,
     og_image:       ogImage,
     og_url:         ogUrl,
     body:           "RAW_BODY_PLACEHOLDER",
-  }).replace("RAW_BODY_PLACEHOLDER", opts.body);
+  }).replace("RAW_CSS_INTEGRITY", themeCssIntegrity).replace("RAW_BODY_PLACEHOLDER", opts.body);
   // The body is RAW HTML (already rendered + escaped at the
   // per-fragment level). The placeholder swap is post-render so the
   // outer renderer's HTML-escape doesn't double-escape the inner
@@ -1371,6 +1418,107 @@ function renderReturns(opts) {
   });
 }
 
+// Subscription status pill — mirrors `_returnStatusBadge`. The status
+// string is one of Stripe's enum values (active, trialing, past_due,
+// canceled, …), surfaced as a CSS-classed badge the theme can style.
+function _subscriptionStatusBadge(status) {
+  return "<span class=\"subscription-status subscription-status--" + b.template.escapeHtml(String(status)) + "\">" +
+    b.template.escapeHtml(String(status)) + "</span>";
+}
+
+// A subscription is cancelable from the storefront while it's still
+// billing — active or trialing, and not already wound down at period
+// end. A canceled / past_due / incomplete row shows no Cancel control.
+var CANCELABLE_SUB_STATUSES = ["active", "trialing", "past_due"];
+function _subscriptionIsCancelable(sub) {
+  return CANCELABLE_SUB_STATUSES.indexOf(sub.status) !== -1 && Number(sub.cancel_at_period_end) !== 1;
+}
+
+// Customer-facing subscription list. `opts.subscriptions` is an array of
+// subscription rows, each optionally carrying a resolved `plan` (joined
+// by the route). `opts.can_cancel` is false when the deploy has no
+// payment handle wired — the list renders read-only with a note, since
+// cancel composes Stripe. Empty state points at the catalog (creation is
+// a separate Stripe-subscription-checkout surface, not built here).
+function renderAccountSubscriptions(opts) {
+  var esc = b.template.escapeHtml;
+  var subs = opts.subscriptions || [];
+  var canCancel = opts.can_cancel !== false;
+  var rowsHtml = "";
+  for (var i = 0; i < subs.length; i += 1) {
+    var s = subs[i];
+    var plan = s.plan || null;
+    var planSummary = "";
+    if (plan) {
+      var every = Number(plan.interval_count) > 1
+        ? "every " + Number(plan.interval_count) + " " + esc(String(plan.interval)) + "s"
+        : "per " + esc(String(plan.interval));
+      // Plans mirror Stripe's lowercase currency; pricing.format wants
+      // the uppercase ISO 4217 code. A malformed currency / amount on a
+      // row falls back to the interval-only summary rather than throwing
+      // out of the renderer.
+      var ccy = String(plan.currency || "usd").toUpperCase();
+      var priceStr;
+      try { priceStr = esc(pricing.format(Number(plan.amount_minor), ccy)) + " "; }
+      catch (_e) { priceStr = ""; }
+      planSummary = priceStr + every;
+    } else {
+      planSummary = "Plan unavailable";
+    }
+    var periodEnd = s.current_period_end
+      ? new Date(Number(s.current_period_end)).toISOString().slice(0, 10)
+      : "";
+    var renewalNote = "";
+    if (Number(s.cancel_at_period_end) === 1 && periodEnd) {
+      renewalNote = "Ends <time datetime=\"" + esc(periodEnd) + "\">" + esc(periodEnd) + "</time>";
+    } else if (periodEnd) {
+      renewalNote = "Renews <time datetime=\"" + esc(periodEnd) + "\">" + esc(periodEnd) + "</time>";
+    }
+    var cancelControl = "";
+    if (canCancel && _subscriptionIsCancelable(s)) {
+      cancelControl =
+        "<form class=\"subscription-card__cancel\" method=\"post\" action=\"/account/subscriptions/" + esc(s.id) + "/cancel\">" +
+          "<label class=\"subscription-card__when\">" +
+            "<input type=\"checkbox\" name=\"immediate\" value=\"1\"> Cancel immediately (skip the rest of the period)" +
+          "</label>" +
+          "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Cancel subscription</button>" +
+        "</form>";
+    }
+    rowsHtml +=
+      "<li class=\"subscription-card\">" +
+        "<div class=\"subscription-card__head\">" +
+          "<span class=\"subscription-card__plan\">" + planSummary + "</span>" +
+          _subscriptionStatusBadge(s.status) +
+        "</div>" +
+        (renewalNote ? "<p class=\"subscription-card__meta\">" + renewalNote + "</p>" : "") +
+        cancelControl +
+      "</li>";
+  }
+  var note = canCancel
+    ? ""
+    : "<p class=\"subscription-note\">Cancellation isn't available on this store yet. Contact support to make changes.</p>";
+  var inner = rowsHtml
+    ? note + "<ul class=\"subscription-list\">" + rowsHtml + "</ul>"
+    : "<p class=\"subscription-empty\">You have no active subscriptions.</p>";
+  var body =
+    "<section class=\"account-subscriptions\">" +
+      "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+        "<li><a href=\"/account\">Account</a></li>" +
+        "<li aria-current=\"page\">Subscriptions</li>" +
+      "</ol></nav>" +
+      "<h1 class=\"account-subscriptions__title\">Subscriptions</h1>" +
+      (opts.notice ? "<p class=\"form-notice\" role=\"status\">" + esc(String(opts.notice)) + "</p>" : "") +
+      inner +
+    "</section>";
+  return _wrap({
+    title:      "Subscriptions",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    body:       body,
+  });
+}
+
 // Product-level "Save to wishlist" control + social-proof count.
 // Byte-compatible with the edge renderer (`worker/render/product.js`)
 // so both paths emit identical markup. Action-only label — the toggle
@@ -1593,6 +1741,7 @@ var CHECKOUT_PAGE =
   "      <label class=\"form-field\"><span class=\"form-field__label\">State / Region</span><input type=\"text\" name=\"state\" maxlength=\"5\" autocomplete=\"address-level1\" class=\"form-field__input--xs\"></label>\n" +
   "      <label class=\"form-field\"><span class=\"form-field__label\">Postal code</span><input type=\"text\" name=\"postal\" maxlength=\"16\" autocomplete=\"postal-code\" class=\"form-field__input--sm\"></label>\n" +
   "    </div>\n" +
+  "    <div class=\"form-row\"><label class=\"form-field\"><span class=\"form-field__label\">Gift card code <span class=\"small\">(optional)</span></span><input type=\"text\" name=\"gift_card_code\" autocomplete=\"off\" placeholder=\"XXXX-XXXX-XXXX-XXXX\" maxlength=\"24\"></label></div>\n" +
   "    <div class=\"checkout-summary\">\n" +
   "      <h3>Order summary</h3>\n" +
   "      <dl>\n" +
@@ -1638,6 +1787,63 @@ function renderCheckoutForm(opts) {
   });
 }
 
+// ---- gift-card balance check (customer-facing) -------------------------
+//
+// A bearer gift-card code is private — the page never confirms whether a
+// code "exists". A recognized active card shows its balance; anything else
+// (unknown, malformed, expired, voided, redeemed) shows the same generic
+// "couldn't find a balance" message so the page is not a code-probing
+// oracle. Server-rendered; the result re-renders the same page with the
+// outcome inline.
+var GIFT_CARD_PAGE =
+  "<section class=\"checkout-page\" style=\"max-width:32rem;margin:0 auto;\">\n" +
+  "  <header class=\"section-head\">\n" +
+  "    <p class=\"eyebrow\">Gift cards</p>\n" +
+  "    <h1 class=\"section-head__title\">Check a gift card balance</h1>\n" +
+  "    <p class=\"section-head__lede\">Enter the code printed on your gift card to see what's left to spend. Apply it at checkout.</p>\n" +
+  "  </header>\n" +
+  "  RAW_RESULT" +
+  "  <form method=\"post\" action=\"/gift-cards/balance\" class=\"form-stack\">\n" +
+  "    <div class=\"form-row\"><label class=\"form-field\"><span class=\"form-field__label\">Gift card code</span><input type=\"text\" name=\"code\" autocomplete=\"off\" placeholder=\"XXXX-XXXX-XXXX-XXXX\" maxlength=\"24\" required></label></div>\n" +
+  "    <div class=\"form-actions\"><button type=\"submit\" class=\"btn-primary\">Check balance</button></div>\n" +
+  "  </form>\n" +
+  "</section>\n";
+
+function renderGiftCardBalance(opts) {
+  opts = opts || {};
+  var shopName = opts.shop_name || "blamejs.shop";
+  var resultHtml = "";
+  if (opts.balance != null) {
+    var bal = pricing.format(opts.balance.balance_minor, opts.balance.currency);
+    resultHtml =
+      "<div class=\"checkout-summary\"><h3>Balance</h3><dl>" +
+      "<div class=\"checkout-summary__total\"><dt>Available</dt><dd>" + b.template.escapeHtml(bal) + "</dd></div>" +
+      "</dl></div>";
+  } else if (opts.not_found) {
+    resultHtml =
+      "<p class=\"auth-form__message auth-form__message--err\">" +
+      "We couldn't find a balance for that code. Check the characters and try again." +
+      "</p>";
+  }
+  if (opts.theme) {
+    return opts.theme.render("gift-card-balance", {
+      title:          "Gift card balance",
+      shop_name:      shopName,
+      cart_count:     opts.cart_count == null ? 0 : opts.cart_count,
+      result:         resultHtml,
+      asset_css_main: opts.theme.assetUrl("css/main.css"),
+    });
+  }
+  var body = GIFT_CARD_PAGE.replace("RAW_RESULT", resultHtml);
+  return _wrap({
+    title:      "Gift card balance",
+    shop_name:  shopName,
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    body:       body,
+  });
+}
+
 function _paypalCheckoutBlock(clientId, currency) {
   var esc = b.template.escapeHtml;
   var cid = esc(String(clientId));
@@ -1818,20 +2024,23 @@ function renderOrder(opts) {
   var tax      = pricing.format(o.tax_minor,         o.currency);
   var shipping = pricing.format(o.shipping_minor,    o.currency);
   var total    = pricing.format(o.grand_total_minor, o.currency);
+  var recs = opts.recommendations || [];
   if (opts.theme) {
     return opts.theme.render("order", {
-      title:          "Order " + o.id,
-      shop_name:      shopName,
-      cart_count:     cartCount,
-      order_id:       o.id,
-      status:         o.status,
-      lines:          rendered,
-      has_lines:      rendered.length > 0,
-      subtotal:       subtotal,
-      tax:            tax,
-      shipping:       shipping,
-      total:          total,
-      asset_css_main: opts.theme.assetUrl("css/main.css"),
+      title:               "Order " + o.id,
+      shop_name:           shopName,
+      cart_count:          cartCount,
+      order_id:            o.id,
+      status:              o.status,
+      lines:               rendered,
+      has_lines:           rendered.length > 0,
+      subtotal:            subtotal,
+      tax:                 tax,
+      shipping:            shipping,
+      total:               total,
+      recommendations:     recs,
+      has_recommendations: recs.length > 0,
+      asset_css_main:      opts.theme.assetUrl("css/main.css"),
     });
   }
   function _orderEsc(s) { return b.template.escapeHtml(s); }
@@ -1858,12 +2067,24 @@ function renderOrder(opts) {
     shipping:  shipping,
     total:     total,
   }).replace("RAW_LINES", rows);
+  // Post-purchase cross-sell rail — reuses the catalog grid + product-card
+  // markup (so it inherits the storefront's card styling), rendered only
+  // when the picker returned something.
+  var railHtml = "";
+  if (recs.length) {
+    var railCards = recs.map(function (p) { return _buildProductCard(p); }).join("");
+    railHtml =
+      "<section class=\"catalog-section order-recommendations\">" +
+        "<header class=\"section-head\"><h2 class=\"section-head__title\">Customers also bought</h2></header>" +
+        "<div class=\"grid\">" + railCards + "</div>" +
+      "</section>";
+  }
   return _wrap({
     title:      "Order " + o.id,
     shop_name:  shopName,
     cart_count: cartCount,
     theme_css: opts.theme_css,
-    body:       body,
+    body:       body + railHtml,
   });
 }
 
@@ -2272,28 +2493,7 @@ var ACCOUNT_LOGIN_PAGE =
   "    RAW_LOGIN_OAUTH\n" +
   "    <p class=\"auth-card__alt\">New here? <a href=\"/account/register\">Create an account →</a></p>\n" +
   "  </div>\n" +
-  "  <script>\n" +
-  "  (function () {\n" +
-  "    function _b64uToBuf(s){ s = s.replace(/-/g,'+').replace(/_/g,'/'); while(s.length%4)s+='='; var raw=atob(s); var arr=new Uint8Array(raw.length); for(var i=0;i<raw.length;i++)arr[i]=raw.charCodeAt(i); return arr.buffer; }\n" +
-  "    function _bufToB64u(buf){ var b=new Uint8Array(buf), s=''; for(var i=0;i<b.length;i++)s+=String.fromCharCode(b[i]); return btoa(s).replace(/\\+/g,'-').replace(/\\//g,'_').replace(/=+$/,''); }\n" + // allow:inline-base64url-three-replace — browser-side helper; the page has no `b.crypto` to call, btoa is the runtime-built-in equivalent
-  "    var form=document.getElementById('login-form');\n" +
-  "    var msg=document.getElementById('login-message');\n" +
-  "    form.addEventListener('submit', async function(ev){\n" +
-  "      ev.preventDefault(); msg.textContent='Requesting challenge...';\n" +
-  "      try {\n" +
-  "        var beginR = await fetch('/account/passkey/login-begin', { method:'POST', credentials:'same-origin', headers:{'content-type':'application/json'}, body: JSON.stringify({ email: document.getElementById('email').value }) });\n" +
-  "        if (!beginR.ok) { msg.textContent = 'Sign-in unavailable.'; return; }\n" +
-  "        var options = await beginR.json();\n" +
-  "        options.challenge = _b64uToBuf(options.challenge);\n" +
-  "        if (options.allowCredentials) options.allowCredentials = options.allowCredentials.map(function(c){ return Object.assign({}, c, { id: _b64uToBuf(c.id) }); });\n" +
-  "        var assertion = await navigator.credentials.get({ publicKey: options });\n" +
-  "        var payload = { id: assertion.id, rawId: _bufToB64u(assertion.rawId), type: assertion.type, response: { authenticatorData: _bufToB64u(assertion.response.authenticatorData), clientDataJSON: _bufToB64u(assertion.response.clientDataJSON), signature: _bufToB64u(assertion.response.signature), userHandle: assertion.response.userHandle ? _bufToB64u(assertion.response.userHandle) : null } };\n" +
-  "        var finishR = await fetch('/account/passkey/login-finish', { method:'POST', credentials:'same-origin', headers:{'content-type':'application/json'}, body: JSON.stringify(payload) });\n" +
-  "        if (finishR.ok) { window.location.href = '/account'; } else { msg.textContent = 'Sign-in failed.'; }\n" +
-  "      } catch (e) { msg.textContent = (e && e.message) || 'Sign-in error.'; }\n" +
-  "    });\n" +
-  "  })();\n" +
-  "  </script>\n" +
+  "  RAW_LOGIN_SCRIPT\n" +
   "</section>\n";
 
 var LOGIN_ERROR_MESSAGES = {
@@ -2321,7 +2521,8 @@ function renderAccountLogin(opts) {
     : "";
   var body = ACCOUNT_LOGIN_PAGE
     .replace("RAW_LOGIN_OAUTH", oauthHtml)
-    .replace("RAW_LOGIN_ERROR", errHtml);
+    .replace("RAW_LOGIN_ERROR", errHtml)
+    .replace("RAW_LOGIN_SCRIPT", _islandScript("passkey-login.js"));
   return _wrap({
     title:      "Sign in",
     shop_name:  opts.shop_name || "blamejs.shop",
@@ -2345,29 +2546,7 @@ var ACCOUNT_REGISTER_PAGE =
   "    </form>\n" +
   "    <p class=\"auth-card__alt\">Already have one? <a href=\"/account/login\">Sign in →</a></p>\n" +
   "  </div>\n" +
-  "  <script>\n" +
-  "  (function () {\n" +
-  "    function _b64uToBuf(s){ s = s.replace(/-/g,'+').replace(/_/g,'/'); while(s.length%4)s+='='; var raw=atob(s); var arr=new Uint8Array(raw.length); for(var i=0;i<raw.length;i++)arr[i]=raw.charCodeAt(i); return arr.buffer; }\n" +
-  "    function _bufToB64u(buf){ var b=new Uint8Array(buf), s=''; for(var i=0;i<b.length;i++)s+=String.fromCharCode(b[i]); return btoa(s).replace(/\\+/g,'-').replace(/\\//g,'_').replace(/=+$/,''); }\n" + // allow:inline-base64url-three-replace — browser-side helper; the page has no `b.crypto` to call, btoa is the runtime-built-in equivalent
-  "    var form=document.getElementById('reg-form');\n" +
-  "    var msg=document.getElementById('reg-message');\n" +
-  "    form.addEventListener('submit', async function(ev){\n" +
-  "      ev.preventDefault(); msg.textContent='Creating account...';\n" +
-  "      try {\n" +
-  "        var beginR = await fetch('/account/passkey/register-begin', { method:'POST', credentials:'same-origin', headers:{'content-type':'application/json'}, body: JSON.stringify({ email: document.getElementById('email').value, display_name: document.getElementById('display_name').value }) });\n" +
-  "        if (!beginR.ok) { msg.textContent = (await beginR.text()) || 'Registration unavailable.'; return; }\n" +
-  "        var options = await beginR.json();\n" +
-  "        options.challenge = _b64uToBuf(options.challenge);\n" +
-  "        options.user.id   = _b64uToBuf(options.user.id);\n" +
-  "        if (options.excludeCredentials) options.excludeCredentials = options.excludeCredentials.map(function(c){ return Object.assign({}, c, { id: _b64uToBuf(c.id) }); });\n" +
-  "        var att = await navigator.credentials.create({ publicKey: options });\n" +
-  "        var payload = { id: att.id, rawId: _bufToB64u(att.rawId), type: att.type, response: { attestationObject: _bufToB64u(att.response.attestationObject), clientDataJSON: _bufToB64u(att.response.clientDataJSON), transports: att.response.getTransports ? att.response.getTransports() : [] } };\n" +
-  "        var finishR = await fetch('/account/passkey/register-finish', { method:'POST', credentials:'same-origin', headers:{'content-type':'application/json'}, body: JSON.stringify(payload) });\n" +
-  "        if (finishR.ok) { window.location.href = '/account'; } else { msg.textContent = (await finishR.text()) || 'Enrollment failed.'; }\n" +
-  "      } catch (e) { msg.textContent = (e && e.message) || 'Registration error.'; }\n" +
-  "    });\n" +
-  "  })();\n" +
-  "  </script>\n" +
+  "  RAW_REGISTER_SCRIPT\n" +
   "</section>\n";
 
 function renderAccountRegister(opts) {
@@ -2377,7 +2556,7 @@ function renderAccountRegister(opts) {
     shop_name:  opts.shop_name || "blamejs.shop",
     cart_count: opts.cart_count,
     theme_css: opts.theme_css,
-    body:       ACCOUNT_REGISTER_PAGE,
+    body:       ACCOUNT_REGISTER_PAGE.replace("RAW_REGISTER_SCRIPT", _islandScript("passkey-register.js")),
   });
 }
 
@@ -2395,6 +2574,7 @@ var ACCOUNT_DASH_PAGE =
   "      <a class=\"btn-secondary\" href=\"/account/recently-viewed\">Recently viewed</a>\n" +
   "      <a class=\"btn-secondary\" href=\"/account/addresses\">Addresses</a>\n" +
   "      <a class=\"btn-secondary\" href=\"/account/returns\">Returns</a>\n" +
+  "      <a class=\"btn-secondary\" href=\"/account/subscriptions\">Subscriptions</a>\n" +
   "      <form method=\"post\" action=\"/account/logout\"><button type=\"submit\" class=\"btn-ghost\">Sign out</button></form>\n" +
   "    </div>\n" +
   "  </header>\n" +
@@ -2508,6 +2688,10 @@ function mount(router, deps) {
   // the inline-string templates above stay in force (operators on
   // older deploys keep their current look without a migration step).
   var theme = deps.theme || null;
+  // Subscription self-management — opts in /account/subscriptions. The
+  // cancel route additionally needs the payment handle (cancel composes
+  // Stripe via the primitive); without it the list stays read-only.
+  var subscriptions = deps.subscriptions || null;
 
   function _send(res, status, html) {
     res.status(status);
@@ -2883,8 +3067,17 @@ function mount(router, deps) {
           ship_to:              shipTo,
           selected_shipping_id: defaultShipId || "std",
           customer:             { email: body.email, name: body.name },
+          gift_card_code:       body.gift_card_code || undefined,
           idempotency_key:      "checkout:" + c.id + ":" + b.uuid.v7(),
         });
+        // When a gift card fully covered the order there's no Stripe
+        // intent — the order is already paid. Skip the pay-cookie +
+        // pay page and land the customer straight on the confirmation.
+        if (!result.payment_intent) {
+          res.status(303);
+          res.setHeader && res.setHeader("location", "/orders/" + result.order.id);
+          return res.end ? res.end() : res.send("");
+        }
         // Set a short-lived pay cookie so /pay/:order_id can serve the
         // client_secret without re-running confirm. Scoped to /pay/ +
         // SameSite=Strict so it's only ever sent to the pay route.
@@ -2895,7 +3088,12 @@ function mount(router, deps) {
         res.setHeader && res.setHeader("location", "/pay/" + result.order.id);
         return res.end ? res.end() : res.send("");
       } catch (e) {
-        res.status(e instanceof TypeError ? 400 : 500);
+        // A bad customer input (malformed shape OR a gift-card code the
+        // customer typed that can't be applied) is a 400, not a 500 —
+        // the gift-card errors carry a GIFTCARD_* code so a fat-fingered
+        // code re-prompts rather than 500-ing the checkout.
+        var clientErr = (e instanceof TypeError) || (e && typeof e.code === "string" && e.code.indexOf("GIFTCARD_") === 0);
+        res.status(clientErr ? 400 : 500);
         var msg = (e && e.message) || "checkout failed";
         return res.end ? res.end(msg) : res.send(msg);
       }
@@ -2933,14 +3131,22 @@ function mount(router, deps) {
             ship_to:              shipTo,
             selected_shipping_id: body.selected_shipping_id || defaultShipId || "std",
             customer:             { email: body.email, name: body.name },
+            gift_card_code:       body.gift_card_code || undefined,
             idempotency_key:      "paypal:" + c.id + ":" + b.uuid.v7(),
             return_url:           body.return_url || undefined,
             cancel_url:           body.cancel_url || undefined,
           });
+          // Gift card fully covered the order — no PayPal order id to
+          // approve. Tell the button to redirect straight to the
+          // confirmation page instead of opening the PayPal popup.
+          if (!created.paypal_order_id) {
+            return _json(200, { paid_by_gift_card: true, order_id: created.order.id, redirect: "/orders/" + created.order.id });
+          }
           // The PayPal JS SDK's createOrder expects `{ id }`.
           return _json(200, { id: created.paypal_order_id, order_id: created.order.id });
         } catch (e) {
-          return _json(e instanceof TypeError ? 400 : 502, { error: (e && e.message) || "paypal-create-failed" });
+          var gcErr = e && typeof e.code === "string" && e.code.indexOf("GIFTCARD_") === 0;
+          return _json((e instanceof TypeError || gcErr) ? 400 : 502, { error: (e && e.message) || "paypal-create-failed" });
         }
       });
 
@@ -3019,11 +3225,41 @@ function mount(router, deps) {
           hero_media: media.length ? media[0] : null,
         };
       }
+      // "Customers also bought" rail — co-purchase signals anchored on the
+      // order's own items (and excluding them, so we never recommend what
+      // was just bought). Best-effort: a read failure (engine not wired /
+      // tables not migrated) degrades to no rail rather than 500-ing the
+      // confirmation page.
+      var recommendations = [];
+      if (deps.recommendations) {
+        try {
+          var orderProductIds = [];
+          for (var li = 0; li < (o.lines || []).length; li += 1) {
+            var look = productLookup[o.lines[li].variant_id];
+            if (look && look.product && orderProductIds.indexOf(look.product.id) === -1) {
+              orderProductIds.push(look.product.id);
+            }
+          }
+          if (orderProductIds.length) {
+            // recommendForCart aggregates the co-purchase signal across
+            // EVERY purchased product (not just the first) and pivots the
+            // category-popular fallback off the order's dominant
+            // collection; it also self-excludes the order's own products,
+            // so a multi-item order's rail reflects the whole order.
+            var picks = await deps.recommendations.recommendForCart(orderProductIds, { limit: 4 });
+            for (var pi = 0; pi < picks.length; pi += 1) {
+              var card = await _decorateProductCard(picks[pi].product_id);
+              if (card) recommendations.push(card);
+            }
+          }
+        } catch (_e) { recommendations = []; }
+      }
       _send(res, 200, renderOrder({
-        order:          o,
-        product_lookup: productLookup,
-        shop_name:      shopName,
-        theme:          theme,
+        order:           o,
+        product_lookup:  productLookup,
+        recommendations: recommendations,
+        shop_name:       shopName,
+        theme:           theme,
       }));
     });
 
@@ -3084,6 +3320,47 @@ function mount(router, deps) {
     }
   }
 
+  // ---- gift-card balance check (customer-facing) ---------------------
+  //
+  // Mounts when deps.giftcards is wired. GET renders the lookup form;
+  // POST looks the code up and re-renders with the balance (or a
+  // generic not-found). The page is deliberately not a code-existence
+  // oracle: unknown, malformed, expired, voided, and redeemed codes
+  // all produce the same "couldn't find a balance" outcome.
+  if (deps.giftcards) {
+    router.get("/gift-cards", async function (req, res) {
+      _send(res, 200, renderGiftCardBalance({
+        shop_name: shopName, theme: theme, cart_count: await _cartCountForReq(req),
+      }));
+    });
+
+    router.post("/gift-cards/balance", async function (req, res) {
+      var body = req.body || {};
+      var code = typeof body.code === "string" ? body.code : "";
+      var balance = null;
+      var notFound = true;
+      try {
+        var view = await deps.giftcards.balance(code);
+        // Only an active card with a positive balance surfaces a
+        // number — an expired / voided / fully-redeemed card is the
+        // same dead end as an unknown code to the customer.
+        if (view && view.status === "active") {
+          balance = { balance_minor: view.balance_minor, currency: view.currency };
+          notFound = false;
+        }
+      } catch (e) {
+        // A malformed code throws TypeError at the canonicalizer —
+        // swallow it into the same generic not-found. Any other error
+        // (e.g. a DB fault) bubbles so it isn't masked as not-found.
+        if (!(e instanceof TypeError)) throw e;
+      }
+      _send(res, 200, renderGiftCardBalance({
+        shop_name: shopName, theme: theme, cart_count: await _cartCountForReq(req),
+        balance: balance, not_found: notFound,
+      }));
+    });
+  }
+
   // ---- customer accounts (passkey-only) ------------------------------
   //
   // Mount only when deps.customers is supplied (operator opts in by
@@ -3933,6 +4210,119 @@ function mount(router, deps) {
       _addrAction("archive",          function (id) { return deps.addresses.archive(id); });
     }
 
+    // Subscription self-management — the signed-in customer views their
+    // own recurring subscriptions and cancels them. The list mounts on
+    // the subscriptions primitive alone; the cancel route additionally
+    // needs the payment handle (cancel composes Stripe through
+    // `subscriptions.subscriptions.cancel`, mirroring the admin gate). A
+    // subscription is fetched + ownership-checked against the authed
+    // customer before any cancel — a guessed/forged id never reaches
+    // another customer's row. Creation (a Stripe subscription-checkout
+    // flow) is a separate surface; this is the management view.
+    if (subscriptions) {
+      var subsCanCancel = !!deps.payment;
+
+      function _subsAuth(req, res) {
+        var auth;
+        try { auth = _currentCustomer(req); }
+        catch (e) {
+          if (e && e.code === "vault/not-initialized") { _serviceUnavailable(res, "auth not configured"); return null; }
+          throw e;
+        }
+        if (!auth) {
+          res.status(303); res.setHeader && res.setHeader("location", "/account/login");
+          res.end ? res.end() : res.send("");
+          return null;
+        }
+        return auth;
+      }
+
+      // Resolve the customer's subscriptions and join each to its plan.
+      // Plans are batched: one `plans.get` per distinct plan_id, cached
+      // across rows, so a customer with many subscriptions on the same
+      // plan costs one plan read, not one per subscription (no N+1). A
+      // read failure (table not migrated) degrades to an empty list
+      // rather than 500-ing the account page.
+      async function _subsForCustomer(customerId) {
+        var rows;
+        try { rows = await subscriptions.subscriptions.list({ customer_id: customerId }); }
+        catch (e) {
+          if (e instanceof TypeError) return [];
+          throw e;
+        }
+        var planCache = {};
+        for (var i = 0; i < rows.length; i += 1) {
+          var pid = rows[i].plan_id;
+          if (pid != null && !Object.prototype.hasOwnProperty.call(planCache, pid)) {
+            try { planCache[pid] = await subscriptions.plans.get(pid); }
+            catch (_e) { planCache[pid] = null; }
+          }
+          rows[i].plan = pid != null ? planCache[pid] : null;
+        }
+        return rows;
+      }
+
+      // Load the subscription named in :id and confirm it belongs to the
+      // signed-in customer. A malformed id (guardUuid TypeError), a
+      // missing row, or another customer's subscription all return null
+      // after sending a 404 — never a 500, never a cross-customer cancel.
+      async function _ownedSubscription(req, res, auth) {
+        var sub;
+        try { sub = await subscriptions.subscriptions.get(req.params && req.params.id); }
+        catch (e) {
+          if (e instanceof TypeError) { _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme })); return null; }
+          throw e;
+        }
+        if (!sub || sub.customer_id !== auth.customer_id) {
+          _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
+          return null;
+        }
+        return sub;
+      }
+
+      router.get("/account/subscriptions", async function (req, res) {
+        var auth = _subsAuth(req, res); if (!auth) return;
+        var rows = await _subsForCustomer(auth.customer_id);
+        var cartCount = await _cartCountForReq(req);
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var canceled = !!(url && url.searchParams.get("canceled"));
+        _send(res, 200, renderAccountSubscriptions({
+          subscriptions: rows,
+          can_cancel:    subsCanCancel,
+          notice:        canceled ? "Your subscription has been canceled." : null,
+          shop_name:     shopName,
+          cart_count:    cartCount,
+        }));
+      });
+
+      // Cancel mounts only when payment is wired (cancel composes Stripe).
+      // Without payment the list above stays read-only with a note.
+      if (deps.payment) {
+        router.post("/account/subscriptions/:id/cancel", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          // Default cancel-at-period-end (the customer keeps access through
+          // the period they've paid for); the form opts into immediate via
+          // the `immediate` checkbox.
+          var atPeriodEnd = !((req.body || {}).immediate === "1");
+          try {
+            await subscriptions.subscriptions.cancel(sub.id, { at_period_end: atPeriodEnd });
+          } catch (e) {
+            // A bad id was already screened by _ownedSubscription; a
+            // downstream TypeError (shape) bounces back to the list with a
+            // notice rather than 500-ing.
+            if (e instanceof TypeError) {
+              res.status(303); res.setHeader && res.setHeader("location", "/account/subscriptions");
+              return res.end ? res.end() : res.send("");
+            }
+            throw e;
+          }
+          res.status(303); res.setHeader && res.setHeader("location", "/account/subscriptions?canceled=1");
+          return res.end ? res.end() : res.send("");
+        });
+      }
+    }
+
     // Self-serve returns — a customer requests an RMA against one of
     // their own orders and tracks its status. Operators action it via
     // the admin /admin/returns queue. Needs the returns primitive + an
@@ -4370,11 +4760,13 @@ module.exports = {
   renderProduct:         renderProduct,
   renderCart:            renderCart,
   renderCheckoutForm:    renderCheckoutForm,
+  renderGiftCardBalance: renderGiftCardBalance,
   renderPayPage:         renderPayPage,
   renderOrder:           renderOrder,
   renderAccountLogin:    renderAccountLogin,
   renderAccountRegister: renderAccountRegister,
   renderAccount:         renderAccount,
+  renderAccountSubscriptions: renderAccountSubscriptions,
   renderNotFound:        renderNotFound,
   // Layout exposed so operators forking the framework can override.
   _wrap:                 _wrap,