@blamejs/blamejs-shop 0.3.53 → 0.3.54

package/lib/storefront.js

@@ -4101,6 +4101,57 @@ function renderReturns(opts) {
   });
 }
 
+// The signed-in customer's pickup (BOPIS) list. Each row links the parent
+// order and shows the FSM status + the scheduled window. Reuses the
+// return-card layout classes — no new CSS. location_code is operator free
+// text; the status is a fixed FSM enum — both escaped at the sink.
+function renderAccountPickups(opts) {
+  opts = opts || {};
+  var esc = b.template.escapeHtml;
+  var list = opts.pickups || [];
+  var rowsHtml = "";
+  for (var i = 0; i < list.length; i += 1) {
+    var p = list[i];
+    var when = p.scheduled_window_start
+      ? new Date(Number(p.scheduled_window_start)).toISOString().slice(0, 16).replace("T", " ")
+      : "";
+    rowsHtml +=
+      "<li class=\"return-card\">" +
+        "<div class=\"return-card__head\">" +
+          "<a class=\"return-card__rma\" href=\"/orders/" + esc(String(p.order_id)) + "\"><code>" + esc(String(p.order_id).slice(0, 8)) + "</code></a>" +
+          "<span class=\"return-status\">" + esc(_pickupStatusLabel(p.status)) + "</span>" +
+        "</div>" +
+        "<p class=\"return-card__meta\">" +
+          "Location <code>" + esc(String(p.location_code)) + "</code>" +
+          (when ? " &middot; <time>" + esc(when) + " UTC</time>" : "") +
+        "</p>" +
+      "</li>";
+  }
+  var inner = rowsHtml
+    ? "<ul class=\"return-list\">" + rowsHtml + "</ul>"
+    : "<div class=\"account-empty\">" +
+        "<p class=\"account-empty__lede\">No pickups yet. Choose “pick up in store” at checkout to schedule one.</p>" +
+        "<a class=\"btn-secondary\" href=\"/account/orders\">View your orders &rarr;</a>" +
+      "</div>";
+  var body =
+    "<section class=\"account-returns\">" +
+      "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+        "<li><a href=\"/account\">Account</a></li>" +
+        "<li aria-current=\"page\">Pickups</li>" +
+      "</ol></nav>" +
+      "<h1 class=\"account-returns__title\">Pickups</h1>" +
+      inner +
+    "</section>";
+  return _wrap({
+    title:      "Pickups",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    robots:     "noindex",
+    body:       body,
+  });
+}
+
 // Customer-facing phrasing for a return label's carrier-scan status. The
 // return-labels module's FSM enum (issued / shipped / in_transit /
 // delivered / exception) is operator/carrier vocabulary; these read for
@@ -6294,6 +6345,53 @@ function _loyaltyCheckoutField(bal, perUsd) {
     "</label></div>";
 }
 
+// The gift message / recipient / hide-prices fields appended into the
+// checkout form when the gift-options primitive is wired. These persist
+// post-commit via setForOrder (they need the order id). The wrap itself is
+// already a cart line (selected on /cart). All values are echoed nowhere
+// pre-submit (empty inputs), so no escaping is needed here, but the labels
+// are static framework copy. Returns "" when gift options aren't wired.
+function _checkoutGiftFields(opts) {
+  if (!opts.gift_enabled) return "";
+  var hasWrap = !!opts.gift_wrap_sku_in_cart;
+  return "<fieldset class=\"checkout-gift\">" +
+    "<legend>Gift options</legend>" +
+    (hasWrap
+      ? "<p class=\"checkout-gift__note\">A gift wrap is in your cart. Add a message and recipient below.</p>"
+      : "<p class=\"checkout-gift__note\">Sending this as a gift? Add a message and recipient. (Choose a gift wrap on the cart page.)</p>") +
+    "<label class=\"form-field\"><span>Recipient name <small>(optional)</small></span>" +
+      "<input type=\"text\" name=\"gift_recipient_name\" maxlength=\"120\" autocomplete=\"off\"></label>" +
+    "<label class=\"form-field\"><span>Gift message <small>(optional)</small></span>" +
+      "<textarea name=\"gift_message\" rows=\"3\" maxlength=\"500\" placeholder=\"Add a note for the recipient\"></textarea></label>" +
+    "<label class=\"form-field form-field--check\"><input type=\"checkbox\" name=\"gift_hide_prices\" value=\"1\">" +
+      "<span>Hide prices on the packing slip (gift receipt)</span></label>" +
+    "</fieldset>";
+}
+
+// The "pick up in store" location picker appended into the checkout form
+// when the click-and-collect primitive is wired AND at least one active
+// pickup location exists. The default is ship-to-me (empty value); choosing
+// a location schedules a pickup post-commit. location name/code are operator
+// free text — escaped at the sink. Returns "" when no locations.
+function _checkoutPickupPicker(opts) {
+  var locs = opts.pickup_locations || [];
+  if (!locs.length) return "";
+  var esc = b.template.escapeHtml;
+  var options = "<option value=\"\">Ship to my address</option>" +
+    locs.map(function (l) {
+      var addr = l.address || {};
+      var addrLine = [addr.city, addr.country].filter(Boolean).map(String).join(", ");
+      return "<option value=\"" + esc(String(l.code)) + "\">" +
+        esc(String(l.name)) + (addrLine ? " — " + esc(addrLine) : "") + "</option>";
+    }).join("");
+  return "<fieldset class=\"checkout-pickup\">" +
+    "<legend>Delivery method</legend>" +
+    "<label class=\"form-field\"><span>How would you like to get your order?</span>" +
+      "<select name=\"pickup_location_code\">" + options + "</select></label>" +
+    "<p class=\"checkout-pickup__note\">Choose a store to pick up in person, or ship to your address. Shipping is still quoted on the total.</p>" +
+    "</fieldset>";
+}
+
 function renderCheckoutForm(opts) {
   if (!opts) throw new TypeError("storefront.renderCheckoutForm: opts required");
   var lines  = opts.lines  || [];
@@ -6365,6 +6463,17 @@ function renderCheckoutForm(opts) {
   if (checkoutCaptcha) {
     body = body.replace("</form>", checkoutCaptcha + "</form>");
   }
+  // Pick-up-in-store location picker + gift personalization fields, appended
+  // into the form (container-only). Spliced via _spliceRaw so an operator
+  // free-text location name carrying a `$` can't trip dollar substitution.
+  var checkoutPickup = _checkoutPickupPicker(opts);
+  if (checkoutPickup) {
+    body = _spliceRaw(body, "</form>", checkoutPickup + "</form>");
+  }
+  var checkoutGift = _checkoutGiftFields(opts);
+  if (checkoutGift) {
+    body = body.replace("</form>", checkoutGift + "</form>");
+  }
   // Signed-in customer with a spendable points balance — surface a
   // redeem-at-checkout field. The block is appended as raw HTML (the
   // balance + value are numbers we control, the conversion ratio is the
@@ -6608,6 +6717,8 @@ var ORDER_PAGE =
   "          <tbody>{{line_rows}}</tbody>\n" +
   "        </table>\n" +
   "      </div>\n" +
+  "      RAW_ORDER_PICKUP" +
+  "      RAW_ORDER_GIFT" +
   "      RAW_ORDER_ACTIONS" +
   "      RAW_ORDER_RATING" +
   "    </div>\n" +
@@ -6945,6 +7056,60 @@ function _ratingNoticeFor(code) {
   return null;
 }
 
+// Human label for a pickup FSM status, for the customer order page.
+function _pickupStatusLabel(status) {
+  if (status === "scheduled") return "Scheduled for pickup";
+  if (status === "ready")     return "Ready for pickup";
+  if (status === "picked_up") return "Picked up";
+  if (status === "no_show")   return "Missed pickup";
+  if (status === "cancelled") return "Pickup cancelled";
+  return status;
+}
+
+// Customer-facing pickup (BOPIS) status panel on /orders/:id. The window
+// times come straight from the schedule row (operator-set epoch ms); the
+// location_code is operator-defined free text — escaped at the sink.
+// Returns "" when there's no schedule (the common no-pickup order).
+function _orderPickupBlock(pickup) {
+  if (!pickup) return "";
+  var esc = b.template.escapeHtml;
+  var when = "";
+  if (pickup.scheduled_window_start) {
+    var start = new Date(Number(pickup.scheduled_window_start));
+    var end = pickup.scheduled_window_end ? new Date(Number(pickup.scheduled_window_end)) : null;
+    when = "<p class=\"order-pickup__window\">Window: " + esc(start.toISOString().slice(0, 16).replace("T", " ")) +
+      (end ? " – " + esc(end.toISOString().slice(11, 16)) : "") + " UTC</p>";
+  }
+  return "<section class=\"order-pickup\">" +
+    "<h2 class=\"pdp__variants-title\">Pickup</h2>" +
+    "<p class=\"order-pickup__status\"><span class=\"pdp__badge\">" + esc(_pickupStatusLabel(pickup.status)) + "</span></p>" +
+    "<p class=\"order-pickup__loc\">Location: <code class=\"inline-code\">" + esc(String(pickup.location_code)) + "</code></p>" +
+    when +
+    "</section>";
+}
+
+// Customer-facing gift-options display on /orders/:id. The wrap_sku /
+// gift_message / recipient_name are customer (and operator) free text —
+// escaped at the sink. hide_prices is shown as a plain note. Returns ""
+// when no gift options are set.
+function _orderGiftBlock(gift) {
+  if (!gift || (!gift.wrap_sku && !gift.gift_message && !gift.recipient_name && !gift.hide_prices)) return "";
+  var esc = b.template.escapeHtml;
+  var parts = [];
+  if (gift.recipient_name) parts.push("<p class=\"order-gift__recipient\">To: " + esc(String(gift.recipient_name)) + "</p>");
+  if (gift.wrap_sku)       parts.push("<p class=\"order-gift__wrap\">Gift wrap: <code class=\"inline-code\">" + esc(String(gift.wrap_sku)) + "</code></p>");
+  if (gift.gift_message) {
+    // The message may be multi-line — split on LF and escape each line.
+    var lines = String(gift.gift_message).replace(/\r\n/g, "\n").split("\n")
+      .map(function (ln) { return esc(ln); }).join("<br>");
+    parts.push("<blockquote class=\"order-gift__message\">" + lines + "</blockquote>");
+  }
+  if (gift.hide_prices)    parts.push("<p class=\"order-gift__hide\">Prices hidden on the packing slip (gift receipt).</p>");
+  return "<section class=\"order-gift\">" +
+    "<h2 class=\"pdp__variants-title\">Gift options</h2>" + parts.join("") +
+    "</section>";
+}
+
 function renderOrder(opts) {
   if (!opts || !opts.order) throw new TypeError("storefront.renderOrder: opts.order required");
   var o = opts.order;
@@ -7006,6 +7171,8 @@ function renderOrder(opts) {
       ship_to:             o.ship_to || null,
       timeline_html:       timelineHtml,
       tracking_html:       trackingHtml,
+      pickup_html:         _orderPickupBlock(opts.pickup),
+      gift_html:           _orderGiftBlock(opts.gift_options),
       actions_html:        actionsHtml,
       rating_html:         ratingHtml,
       can_return:          _orderEligibleForReturn(o.status),
@@ -7057,8 +7224,13 @@ function renderOrder(opts) {
     .replace("RAW_REORDER_NOTICE", reorderNotice + cancelNotice)
     .replace("RAW_ORDER_TIMELINE", timelineHtml)
     .replace("RAW_ORDER_TRACKING", trackingHtml)
+    .replace("RAW_ORDER_PICKUP", _orderPickupBlock(opts.pickup))
     .replace("RAW_ORDER_ACTIONS", actionsHtml)
     .replace("RAW_SHIP_TO", _shipToAddressBlock(o.ship_to));
+  // The gift block carries customer free text (escaped, but a `$` in it would
+  // still trip String.replace's dollar substitution) — splice it via the
+  // replacer-function helper, never a replacement-string .replace.
+  body = _spliceRaw(body, "RAW_ORDER_GIFT", _orderGiftBlock(opts.gift_options));
   // The rating panel carries customer/operator free text (already escaped
   // into comment_html / response_html, but a `$` in that text would still
   // trip String.replace's dollar substitution) — splice it via the
@@ -7241,6 +7413,41 @@ function _buildCartTotalsRows(t, fmt, subtotalStr, totalStr) {
   return rows;
 }
 
+// The cart-page gift disclosure (CONTAINER-ONLY — the edge cart renders
+// only the cookie-less empty shell, never a cart with lines, so this block
+// is never reached at the edge; see [[storefront-dual-render]]). It offers a
+// wrap <select> (POST /cart/gift adds the wrap as a real cart LINE so the
+// fee flows through the quote + is charged) plus a remove control when a
+// wrap is already in the cart. The message / recipient / hide-prices fields
+// are collected at the checkout step (they need the order id to persist), so
+// the cart block is the wrap selector only. Wrap titles are operator free
+// text — escaped at the sink. Returns "" when no active wraps are defined.
+function _cartGiftBlock(opts) {
+  var wraps = opts.gift_wraps || [];
+  if (!wraps.length) return "";
+  var esc = b.template.escapeHtml;
+  var current = opts.gift_wrap_in_cart || "";
+  var options = "<option value=\"\">No gift wrap</option>" +
+    wraps.map(function (w) {
+      var feeStr = pricing.format(w.fee_minor, (opts.totals && opts.totals.currency) || "USD");
+      return "<option value=\"" + esc(String(w.wrap_sku)) + "\"" +
+        (w.wrap_sku === current ? " selected" : "") + ">" +
+        esc(String(w.title)) + " (" + esc(feeStr) + ")</option>";
+    }).join("");
+  return "<section class=\"cart-gift\">" +
+    "<details class=\"cart-gift__details\"" + (current ? " open" : "") + ">" +
+      "<summary class=\"cart-gift__summary\">Add a gift wrap</summary>" +
+      "<form method=\"post\" action=\"/cart/gift\" class=\"cart-gift__form\">" +
+        "<label class=\"form-field\"><span>Gift wrap</span>" +
+          "<select name=\"wrap_sku\">" + options + "</select>" +
+        "</label>" +
+        "<p class=\"cart-gift__note\">Add a gift message and recipient at checkout. The wrap fee is charged as a line on your order.</p>" +
+        "<button type=\"submit\" class=\"btn-secondary\">Update gift wrap</button>" +
+      "</form>" +
+    "</details>" +
+    "</section>";
+}
+
 function renderCart(opts) {
   if (!opts) throw new TypeError("storefront.renderCart: opts required");
   var lines  = opts.lines  || [];
@@ -7373,6 +7580,13 @@ function renderCart(opts) {
       .replace("RAW_TOTALS_ROWS", totalsRows)
       .replace("RAW_CHECKOUT_CTA", checkoutCta)
       .replace("RAW_CART_NOTICE", notice);
+    // CONTAINER-ONLY gift wrap disclosure, appended after the cart grid (a
+    // separate <section>, never spliced into the shared CART_PAGE markup the
+    // edge twin mirrors). Only reached for a cart with lines, which the edge
+    // never renders. Spliced via the body concat (the block carries operator
+    // free text already escaped; appending — not String.replace — so a `$`
+    // in a wrap title can't trip dollar substitution).
+    body = body + _cartGiftBlock(opts);
   }
   return _wrap(Object.assign({
     title:      "Cart",
@@ -8394,6 +8608,8 @@ var ACCOUNT_DASH_PAGE =
   "      <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/exchanges\">Exchanges</a>\n" +
+  "      RAW_PICKUPS_LINK\n" +
+  "      RAW_PAYMENT_METHODS_LINK\n" +
   "      <a class=\"btn-secondary\" href=\"/account/support\">Support</a>\n" +
   "      <a class=\"btn-secondary\" href=\"/account/loyalty\">Rewards</a>\n" +
   "      <a class=\"btn-secondary\" href=\"/account/credit\">Store credit</a>\n" +
@@ -8511,6 +8727,15 @@ function renderAccount(opts) {
     // links to a 404.
     .replace("RAW_PREORDER_LINK", opts.preorders_enabled
       ? "<a class=\"btn-secondary\" href=\"/account/preorders\">Pre-orders</a>"
+      : "")
+    // The Pickups + Payment-methods links render only when those routes are
+    // mounted (the primitive is wired), so a deploy without them never links
+    // to a 404.
+    .replace("RAW_PICKUPS_LINK", opts.pickups_enabled
+      ? "<a class=\"btn-secondary\" href=\"/account/pickups\">Pickups</a>"
+      : "")
+    .replace("RAW_PAYMENT_METHODS_LINK", opts.payment_methods_enabled
+      ? "<a class=\"btn-secondary\" href=\"/account/payment-methods\">Payment methods</a>"
       : "");
   return _wrap({
     title:      "Account",
@@ -8671,6 +8896,120 @@ function renderPasskeyRemoveConfirm(opts) {
   });
 }
 
+// ---- saved payment methods --------------------------------------------
+//
+// The signed-in customer's vaulted cards (Stripe pm_… tokens — the shop
+// never holds the PAN/CVV). Each card shows brand + last4 + expiry, a
+// Default badge, a Set-default form, and a Remove form; an "Add a card"
+// CTA links to the SetupIntent page. Brand/last4 are processor-supplied
+// short strings but escaped at the sink for consistency.
+function renderPaymentMethods(opts) {
+  opts = opts || {};
+  var esc = b.template.escapeHtml;
+  var list = opts.payment_methods || [];
+  var notice = opts.notice
+    ? "<p class=\"form-notice form-notice--err\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
+    : "";
+  var success = opts.success
+    ? "<p class=\"form-notice form-notice--ok\" role=\"status\">" + esc(String(opts.success)) + "</p>"
+    : "";
+  var rowsHtml = "";
+  for (var i = 0; i < list.length; i += 1) {
+    var pm = list[i];
+    var isDefault = Number(pm.is_default) === 1 || pm.is_default === true;
+    var expiry = (pm.exp_month != null && pm.exp_year != null)
+      ? esc(String(pm.exp_month).padStart ? String(pm.exp_month).padStart(2, "0") : String(pm.exp_month)) + "/" + esc(String(pm.exp_year))
+      : "";
+    rowsHtml +=
+      "<li class=\"pm-card\">" +
+        "<div class=\"pm-card__head\">" +
+          "<span class=\"pm-card__brand\">" + esc(String(pm.brand)) + " &middot; &middot;&middot;&middot;&middot; " + esc(String(pm.last4)) + "</span>" +
+          (isDefault ? "<span class=\"pdp__badge pdp__badge--ok\">Default</span>" : "") +
+        "</div>" +
+        (expiry ? "<p class=\"pm-card__exp\">Expires " + expiry + "</p>" : "") +
+        "<div class=\"pm-card__actions\">" +
+          (isDefault ? "" :
+            "<form method=\"post\" action=\"/account/payment-methods/" + esc(String(pm.id)) + "/default\">" +
+              "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Set as default</button></form>") +
+          "<form method=\"post\" action=\"/account/payment-methods/" + esc(String(pm.id)) + "/archive\">" +
+            "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Remove</button></form>" +
+        "</div>" +
+      "</li>";
+  }
+  var inner = rowsHtml
+    ? "<ul class=\"pm-list\">" + rowsHtml + "</ul>"
+    : "<div class=\"account-empty\"><p class=\"account-empty__lede\">No saved cards yet. Add one for faster checkout.</p></div>";
+  var body =
+    "<section class=\"account-payment-methods\">" +
+      "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+        "<li><a href=\"/account\">Account</a></li>" +
+        "<li aria-current=\"page\">Payment methods</li>" +
+      "</ol></nav>" +
+      "<h1 class=\"account-returns__title\">Payment methods</h1>" +
+      success + notice +
+      inner +
+      "<div class=\"account-payment-methods__cta\">" +
+        "<a class=\"btn-primary\" href=\"/account/payment-methods/add\">Add a card</a>" +
+      "</div>" +
+    "</section>";
+  return _wrap({
+    title:      "Payment methods",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    robots:     "noindex",
+    body:       body,
+  });
+}
+
+// The add-card page — a Stripe SetupIntent collected through the Payment
+// Element. Mirrors the pay page: external Stripe.js (admitted by the
+// route-scoped CSP set on GET) + the same-origin saved-card.js island. No
+// inline script. The publishable key rides an HTML-attribute-escaped data-*
+// attribute on the mount div, read by the island. The SetupIntent
+// client_secret is fetched by the island from POST
+// /account/payment-methods/setup-intent (so it's per-session, never cached
+// in the page HTML).
+var ADD_PAYMENT_METHOD_PAGE =
+  "<section class=\"pay-page account-add-card\">\n" +
+  "  <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>\n" +
+  "    <li><a href=\"/account\">Account</a></li>\n" +
+  "    <li><a href=\"/account/payment-methods\">Payment methods</a></li>\n" +
+  "    <li aria-current=\"page\">Add a card</li>\n" +
+  "  </ol></nav>\n" +
+  "  <header class=\"section-head\">\n" +
+  "    <p class=\"eyebrow\">Secure · Stripe</p>\n" +
+  "    <h1 class=\"section-head__title\">Add a card</h1>\n" +
+  "    <p class=\"section-head__lede\">Your card is stored securely with Stripe — this store never sees the full number.</p>\n" +
+  "  </header>\n" +
+  "  <div class=\"pay-card\" id=\"add-card-island\" data-pk=\"{{pk}}\">\n" +
+  "    <form id=\"add-card-form\" method=\"post\" action=\"/account/payment-methods\">\n" +
+  "      <input type=\"hidden\" name=\"setup_intent_id\" id=\"add-card-si\">\n" +
+  "      <div id=\"payment-element\" class=\"pay-card__element\"></div>\n" +
+  "      <button id=\"add-card-submit\" type=\"button\" class=\"btn-primary pay-card__submit\">Save card</button>\n" +
+  "      <p id=\"add-card-message\" class=\"pay-card__message\" role=\"status\"></p>\n" +
+  "    </form>\n" +
+  "  </div>\n" +
+  "  <script src=\"https://js.stripe.com/v3/\"></script>\n" +
+  "  RAW_ADD_CARD_SCRIPT\n" +
+  "</section>\n";
+
+function renderAddPaymentMethod(opts) {
+  opts = opts || {};
+  if (!opts.publishable_key) throw new TypeError("storefront.renderAddPaymentMethod: opts.publishable_key required");
+  var body = _render(ADD_PAYMENT_METHOD_PAGE, {
+    pk: opts.publishable_key,
+  }).replace("RAW_ADD_CARD_SCRIPT", _islandScript("saved-card.js"));
+  return _wrap({
+    title:      "Add a card",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    robots:     "noindex",
+    body:       body,
+  });
+}
+
 // ---- profile edit ------------------------------------------------------
 //
 // Display-name edit for the signed-in customer. Email is stored hash-only
@@ -11345,6 +11684,26 @@ function mount(router, deps) {
         hero_media: media.length ? media[0] : null,
       };
     }
+    // Gift options — the active wrap catalog for the cart-page gift UI, plus
+    // which wrap (if any) is already in the cart as a line so the selector
+    // can pre-select it. Drop-silent: an unmigrated gift_wraps table → no UI.
+    var giftWraps = [];
+    var giftWrapInCart = null;
+    if (deps.giftOptions) {
+      try {
+        giftWraps = await deps.giftOptions.listWraps({ active_only: true });
+        if (giftWraps.length) {
+          // A wrap is "in the cart" when one of its variant SKUs matches a
+          // cart line's sku — the wrap rides as a real line (see POST
+          // /cart/gift), so removing it removes the line.
+          var wrapSkuSet = {};
+          for (var gi = 0; gi < giftWraps.length; gi += 1) wrapSkuSet[giftWraps[gi].wrap_sku] = true;
+          for (var ci = 0; ci < lines.length; ci += 1) {
+            if (wrapSkuSet[lines[ci].sku]) { giftWrapInCart = lines[ci].sku; break; }
+          }
+        }
+      } catch (_e) { giftWraps = []; giftWrapInCart = null; }
+    }
     _send(res, 200, renderCart(Object.assign({
       lines:           lines,
       totals:          totals,
@@ -11353,6 +11712,8 @@ function mount(router, deps) {
       product_lookup:  productLookup,
       can_save:        !!(deps.saveForLater && deps.customers),
       checkout_available: !!(deps.checkout && deps.order),
+      gift_wraps:      giftWraps,
+      gift_wrap_in_cart: giftWrapInCart,
       added:           added,
       shop_name:       shopName,
       theme:           theme,
@@ -11462,6 +11823,28 @@ function mount(router, deps) {
           }
         } catch (_e) { prefill = null; }
       }
+      // Gift options — does the cart carry a wrap line? When it does (or the
+      // gift primitive is wired at all), surface the message/recipient/hide-
+      // prices fields so the customer can personalize the gift; they persist
+      // post-commit via setForOrder. Drop-silent on a read failure.
+      var giftWrapSkuInCart = null;
+      if (deps.giftOptions) {
+        try {
+          var coWraps = await deps.giftOptions.listWraps({ active_only: true });
+          var coWrapSet = {};
+          for (var wi = 0; wi < coWraps.length; wi += 1) coWrapSet[coWraps[wi].wrap_sku] = true;
+          for (var cli = 0; cli < lines.length; cli += 1) {
+            if (coWrapSet[lines[cli].sku]) { giftWrapSkuInCart = lines[cli].sku; break; }
+          }
+        } catch (_e) { giftWrapSkuInCart = null; }
+      }
+      // Click-and-collect — the active pickup locations for the "pick up in
+      // store" option. Drop-silent: an unmigrated table → no picker.
+      var pickupLocations = [];
+      if (deps.clickAndCollect) {
+        try { pickupLocations = await deps.clickAndCollect.availableLocations({ limit: 50 }); }
+        catch (_e) { pickupLocations = []; }
+      }
       return {
         lines: lines, totals: totals, totals_detail: totalsDetail,
         shop_name: shopName, theme: theme,
@@ -11469,6 +11852,9 @@ function mount(router, deps) {
         paypal_client_id: deps.paypal ? deps.paypal_client_id : null,
         loyalty_balance: loyaltyBalance,
         loyalty_points_per_usd: deps.loyalty ? deps.loyalty.REDEMPTION_POINTS_PER_USD : null,
+        gift_enabled: !!deps.giftOptions,
+        gift_wrap_sku_in_cart: giftWrapSkuInCart,
+        pickup_locations: pickupLocations,
         prefill: prefill,
         inline_error: inlineError || null,
         // CAPTCHA widget props — set only when a provider is active, so the
@@ -11492,6 +11878,72 @@ function mount(router, deps) {
       res.setHeader && res.setHeader("content-security-policy", securityMiddleware.scopedCsp(keys));
     }
 
+    // Persist the gift options + schedule a store pickup for a just-placed
+    // order. POST-COMMIT + drop-silent (each in its own try/catch): both run
+    // AFTER the charge and never change the amount — the wrap fee was already
+    // a real cart line in the quote. The wrap_sku written here is read off the
+    // cart's wrap line (so getForOrder shows it on the order page); the
+    // message/recipient/hide-prices come from the checkout form. A failure
+    // must NOT roll back the paid order.
+    async function _persistGiftAndPickup(cart, placedOrder, body) {
+      if (!placedOrder || !placedOrder.id) return;
+      // Gift options.
+      if (deps.giftOptions) {
+        try {
+          var orderLines = placedOrder.lines || [];
+          var wrapSku = null;
+          // Find the wrap line on the placed order (its sku matches an active
+          // wrap) so the order page can show "Gift wrap: <sku>".
+          var activeWraps = await deps.giftOptions.listWraps({ active_only: true });
+          var wrapSet = {};
+          for (var i = 0; i < activeWraps.length; i += 1) wrapSet[activeWraps[i].wrap_sku] = true;
+          for (var li = 0; li < orderLines.length; li += 1) {
+            if (wrapSet[orderLines[li].sku]) { wrapSku = orderLines[li].sku; break; }
+          }
+          var giftMessage   = (typeof body.gift_message === "string" && body.gift_message.trim()) ? body.gift_message : null;
+          var recipientName = (typeof body.gift_recipient_name === "string" && body.gift_recipient_name.trim()) ? body.gift_recipient_name : null;
+          var hidePrices    = body.gift_hide_prices === "1" || body.gift_hide_prices === true || body.gift_hide_prices === "on";
+          // Only write a row when there's something to record (a wrap line, a
+          // message, a recipient, or a hide-prices toggle).
+          if (wrapSku || giftMessage || recipientName || hidePrices) {
+            await deps.giftOptions.setForOrder({
+              order_id:       placedOrder.id,
+              wrap_sku:       wrapSku || undefined,
+              gift_message:   giftMessage || undefined,
+              recipient_name: recipientName || undefined,
+              hide_prices:    hidePrices,
+            });
+          }
+        } catch (_e) { /* drop-silent — a gift-options failure must not roll back the paid order */ }
+      }
+      // Pickup scheduling — when the customer chose "pick up in store". A
+      // default 1-hour window starting at the location's lead-time floor (the
+      // primitive enforces lead time + capacity; a refusal is swallowed). v1
+      // keeps shipping as quoted — the pickup choice doesn't suppress the
+      // shipping charge (re-open if operators need that).
+      if (deps.clickAndCollect) {
+        var locationCode = typeof body.pickup_location_code === "string" ? body.pickup_location_code.trim() : "";
+        if (locationCode) {
+          try {
+            var loc = await deps.clickAndCollect.getLocation(locationCode);
+            if (loc) {
+              var leadMs = Number(loc.lead_time_hours || 0) * b.constants.TIME.hours(1);
+              // Start the window one minute past the lead-time floor so the
+              // primitive's strict `< leadFloor` gate accepts it.
+              var start = Date.now() + leadMs + b.constants.TIME.minutes(1);
+              var end   = start + b.constants.TIME.hours(1);
+              await deps.clickAndCollect.scheduleAtLocation({
+                order_id:               placedOrder.id,
+                location_code:          locationCode,
+                scheduled_window_start: start,
+                scheduled_window_end:   end,
+              });
+            }
+          } catch (_e) { /* drop-silent — a scheduling failure must not roll back the paid order */ }
+        }
+      }
+    }
+
     router.get("/checkout", async function (req, res) {
       var sid = _readSidCookie(req);
       if (!sid) return _send(res, 303, "<a href=\"/cart\">Cart is empty</a>"), res.setHeader && res.setHeader("location", "/cart");
@@ -11580,6 +12032,13 @@ function mount(router, deps) {
           loyalty_redeem_points: _parseRedeemPoints(body.loyalty_redeem_points),
           idempotency_key:      "checkout:" + c.id + ":" + b.uuid.v7(),
         });
+        // POST-COMMIT, drop-silent: gift options + pickup scheduling. Both
+        // run AFTER the charge and DO NOT change the amount — the wrap FEE was
+        // already a real cart line in the quote, so it's charged; only the
+        // gift metadata (message/recipient/hide-prices) and the pickup
+        // schedule land here. A failure must never roll back a paid order, so
+        // each is its own try/catch (mirrors _recordAutoDiscounts).
+        await _persistGiftAndPickup(c, result.order, body);
         // 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.
@@ -11870,11 +12329,28 @@ function mount(router, deps) {
       // Operator trust badges at the order_confirmation placement (container-
       // only; drop-silent → "" on any failure).
       var ordTrustBadges = await _trustBadgesHtml("order_confirmation", req);
+      // Pickup (BOPIS) status — the IDOR gate above already proved ownership
+      // (or this is a guest order on its capability URL). Drop-silent
+      // defensive read: an unmigrated pickup table / bad shape → no panel.
+      var pickup = null;
+      if (deps.clickAndCollect) {
+        try { pickup = await deps.clickAndCollect.getScheduleByOrder(o.id); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; pickup = null; }
+      }
+      // Gift options — the order's wrap / message / recipient / hide-prices.
+      // Drop-silent: an unmigrated gift_options table / bad shape → no panel.
+      var giftOptionsRow = null;
+      if (deps.giftOptions) {
+        try { giftOptionsRow = await deps.giftOptions.getForOrder(o.id); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; giftOptionsRow = null; }
+      }
       _send(res, 200, renderOrder({
         order:           o,
         product_lookup:  productLookup,
         recommendations: recommendations,
         shipments:       shipments,
+        pickup:          pickup,
+        gift_options:    giftOptionsRow,
         trust_badges_html: ordTrustBadges,
         rating:          ratingRow,
         rating_eligible: ratingEligible,
@@ -12388,6 +12864,8 @@ function mount(router, deps) {
         order_product_lookup:  orderProductLookup,
         passkey_count:         passkeyCount,
         preorders_enabled:     !!preorder,
+        pickups_enabled:       !!deps.clickAndCollect,
+        payment_methods_enabled: !!(deps.paymentMethods && deps.payment),
         shop_name:             shopName,
         cart_count:            cartCount,
       }));
@@ -12658,6 +13136,181 @@ function mount(router, deps) {
       }
     });
 
+    // ---- saved payment methods (Stripe SetupIntent vault) -------------
+    //
+    // List / set-default / archive a customer's saved cards, plus an add-card
+    // flow over a Stripe SetupIntent (the shop never sees the PAN/CVV — only
+    // the opaque pm_… token). Mounts only when BOTH the paymentMethods
+    // primitive AND a Stripe payment handle are wired (the SetupIntent +
+    // payment-method reads need Stripe). The list/set-default/archive
+    // surfaces need no external JS; the add page reuses the route-scoped CSP +
+    // an external same-origin island (saved-card.js), mirroring the pay page.
+    if (deps.paymentMethods && deps.payment) {
+      // IDOR GATE — paymentMethods.get/setDefault/archive are keyed by id
+      // ALONE (no customer scope). Resolve the row by path id and confirm it
+      // belongs to the authed customer; a foreign / unknown / malformed id is
+      // a 404, never a cross-customer reveal or mutation. Mandatory before any
+      // read/mutate. Mirrors _ownedPasskey.
+      async function _ownedPaymentMethod(req, res, auth) {
+        var id = req.params && req.params.id;
+        var row;
+        try { row = await deps.paymentMethods.get(id); }
+        catch (e) {
+          // A malformed id throws TypeError from the uuid guard — a 404, not
+          // a 500 (a bad id is a missing record).
+          if (e instanceof TypeError) { _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme })); return null; }
+          throw e;
+        }
+        if (!row || row.customer_id !== auth.customer_id) {
+          _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
+          return null;
+        }
+        return row;
+      }
+
+      async function _renderPaymentMethodsPage(req, res, auth, notice, code) {
+        var rows = await deps.paymentMethods.listForCustomer(auth.customer_id);
+        var cartCount = await _cartCountForReq(req);
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var okKind = url ? url.searchParams.get("ok") : null;
+        var successCopy = null;
+        if (okKind === "added")    successCopy = "Card saved.";
+        if (okKind === "default")  successCopy = "Default card updated.";
+        if (okKind === "archived") successCopy = "Card removed.";
+        if (okKind === "exists")   successCopy = "That card is already on file.";
+        _send(res, code || 200, renderPaymentMethods({
+          payment_methods: rows,
+          notice:          notice || null,
+          success:         successCopy,
+          shop_name:       shopName,
+          cart_count:      cartCount,
+        }));
+      }
+
+      router.get("/account/payment-methods", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        await _renderPaymentMethodsPage(req, res, auth, null);
+      });
+
+      // The add-card page — loads Stripe.js (admitted by the route-scoped
+      // CSP) + the saved-card.js island that mounts a SetupIntent Payment
+      // Element. The publishable key rides a data-* attribute (no inline
+      // script). Requires the publishable key; absent it, a 503 like the pay
+      // page.
+      router.get("/account/payment-methods/add", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        var pk = deps.stripe_publishable_key || "";
+        if (!pk) {
+          return _send(res, 503, _wrap({
+            title: "Add a card", shop_name: shopName, theme_css: undefined, cart_count: await _cartCountForReq(req),
+            body: "<section class=\"account-returns\"><h1>Add a card</h1><p>Card storage isn't available right now.</p>" +
+                  "<a class=\"btn-secondary\" href=\"/account/payment-methods\">Back</a></section>",
+          }));
+        }
+        // Route-scoped CSP admits js.stripe.com (script/connect/frame) so the
+        // SDK + the same-origin saved-card.js island load — without relaxing
+        // the app-level strict CSP on any other route.
+        res.setHeader && res.setHeader("content-security-policy", securityMiddleware.scopedCsp(["stripe"]));
+        var cartCount = await _cartCountForReq(req);
+        _send(res, 200, renderAddPaymentMethod({
+          publishable_key: pk,
+          shop_name:       shopName,
+          cart_count:      cartCount,
+        }));
+      });
+
+      // Create (server-side) a SetupIntent for the shopper + return its
+      // client_secret as JSON (CSRF-tokened; NOT an edge path). A fresh
+      // Stripe Customer is minted per add (no stripe_customer_id column on
+      // the customers table; Stripe dedupes by metadata/email) — acceptable
+      // v1, documented in the build spec.
+      router.post("/account/payment-methods/setup-intent", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        function _json(status, obj) {
+          res.status(status);
+          res.setHeader && res.setHeader("content-type", "application/json; charset=utf-8");
+          var s = JSON.stringify(obj);
+          return res.end ? res.end(s) : res.send(s);
+        }
+        try {
+          var customer = await deps.payment.createCustomer({ metadata: { shop_customer_id: auth.customer_id } });
+          if (!customer || !customer.id) return _json(502, { error: "customer-create-failed" });
+          var si = await deps.payment.createSetupIntent({ customer: customer.id });
+          if (!si || !si.client_secret) return _json(502, { error: "setup-intent-failed" });
+          return _json(200, { client_secret: si.client_secret });
+        } catch (e) {
+          return _json(e instanceof TypeError ? 400 : 502, { error: (e && e.message) || "setup-intent-failed" });
+        }
+      });
+
+      // After Elements confirms the SetupIntent client-side, the browser
+      // POSTs the setup_intent_id back; the server reads it → the resulting
+      // pm_… → its display fields → stores via paymentMethods.add. A
+      // duplicate token (already on file) is an idempotent notice, not a 500.
+      router.post("/account/payment-methods", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        var body = req.body || {};
+        var setupIntentId = typeof body.setup_intent_id === "string" ? body.setup_intent_id : "";
+        if (!setupIntentId) return _renderPaymentMethodsPage(req, res, auth, "Couldn't add that card — please try again.", 400);
+        try {
+          var si = await deps.payment.retrieveSetupIntent(setupIntentId);
+          var pmId = si && si.payment_method;
+          if (!pmId) return _renderPaymentMethodsPage(req, res, auth, "That card couldn't be confirmed — please try again.", 400);
+          var pm = await deps.payment.retrievePaymentMethod(pmId);
+          var card = (pm && pm.card) || {};
+          if (!card.brand || !card.last4) {
+            return _renderPaymentMethodsPage(req, res, auth, "We couldn't read that card's details — please try again.", 400);
+          }
+          await deps.paymentMethods.add({
+            customer_id:     auth.customer_id,
+            processor:       "stripe",
+            processor_token: pmId,
+            brand:           card.brand,
+            last4:           card.last4,
+            exp_month:       Number(card.exp_month),
+            exp_year:        Number(card.exp_year),
+          });
+        } catch (e) {
+          if (e && e.code === "PAYMENT_METHOD_DUPLICATE_TOKEN") {
+            res.status(303); res.setHeader && res.setHeader("location", "/account/payment-methods?ok=exists");
+            return res.end ? res.end() : res.send("");
+          }
+          if (e instanceof TypeError) return _renderPaymentMethodsPage(req, res, auth, "That card couldn't be saved — please try again.", 400);
+          throw e;
+        }
+        res.status(303); res.setHeader && res.setHeader("location", "/account/payment-methods?ok=added");
+        return res.end ? res.end() : res.send("");
+      });
+
+      router.post("/account/payment-methods/:id/default", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        var pm = await _ownedPaymentMethod(req, res, auth); if (!pm) return;
+        try { await deps.paymentMethods.setDefault(pm.id); }
+        catch (e) {
+          if (e instanceof TypeError || (e && typeof e.code === "string" && e.code.indexOf("PAYMENT_METHOD_") === 0)) {
+            return _renderPaymentMethodsPage(req, res, auth, "Couldn't set that as your default card.", 400);
+          }
+          throw e;
+        }
+        res.status(303); res.setHeader && res.setHeader("location", "/account/payment-methods?ok=default");
+        return res.end ? res.end() : res.send("");
+      });
+
+      router.post("/account/payment-methods/:id/archive", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        var pm = await _ownedPaymentMethod(req, res, auth); if (!pm) return;
+        try { await deps.paymentMethods.archive({ payment_method_id: pm.id, reason: "customer_request" }); }
+        catch (e) {
+          if (e instanceof TypeError || (e && typeof e.code === "string" && e.code.indexOf("PAYMENT_METHOD_") === 0)) {
+            return _renderPaymentMethodsPage(req, res, auth, "Couldn't remove that card.", 400);
+          }
+          throw e;
+        }
+        res.status(303); res.setHeader && res.setHeader("location", "/account/payment-methods?ok=archived");
+        return res.end ? res.end() : res.send("");
+      });
+    }
+
     // Profile edit — display-name only. Email is hash-only + the OAuth
     // linking key, so the primitive refuses an email change without a
     // verification ceremony; the form shows it read-only. PRG with a
@@ -14935,6 +15588,26 @@ function mount(router, deps) {
       });
     }
 
+    // Click-and-collect — the signed-in customer's pickup list. Scoped via
+    // the primitive's customerSchedules, which resolves the customer→order
+    // linkage through the shared order handle, so a foreign order's pickup
+    // never appears here (the IDOR defense is the order-scoping). Mounts only
+    // when the primitive is wired.
+    if (deps.clickAndCollect) {
+      router.get("/account/pickups", async function (req, res) {
+        var auth = _accountAuth(req, res); if (!auth) return;
+        var schedules = [];
+        try { schedules = await deps.clickAndCollect.customerSchedules(auth.customer_id); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; schedules = []; }
+        var cartCount = await _cartCountForReq(req);
+        _send(res, 200, renderAccountPickups({
+          pickups:    schedules,
+          shop_name:  shopName,
+          cart_count: cartCount,
+        }));
+      });
+    }
+
     // Support tickets — the signed-in customer raises a ticket, lists
     // their own, reads a thread, and replies. EVERY route is login-gated
     // AND scoped to the session customer's id: the support primitive
@@ -16083,6 +16756,53 @@ function mount(router, deps) {
     res.end ? res.end() : res.send("");
   });
 
+  // POST /cart/gift — set (or clear) the cart's gift wrap. The wrap rides as
+  // a REAL cart line so its fee flows through pricing.totals and is charged
+  // by checkout.confirm (NEVER a post-commit hook — that would mis-charge).
+  // Selecting "No gift wrap" removes any wrap line. Selecting a wrap removes
+  // any prior wrap line then adds the chosen one (qty 1, capped by
+  // max_per_order). The message / recipient are collected at checkout (they
+  // need the order id). Mounts only when the gift-options primitive is wired.
+  if (deps.giftOptions) {
+    router.post("/cart/gift", async function (req, res) {
+      var body = req.body || {};
+      var wrapSku = typeof body.wrap_sku === "string" ? body.wrap_sku.trim() : "";
+      var resolved = await _getOrCreateCart(req, res, "USD");
+      var cartId = resolved.cart.id;
+      try {
+        // Resolve the active wrap catalog so we know every wrap sku (to
+        // remove a stale wrap line) and the selected wrap's cap.
+        var wraps = await deps.giftOptions.listWraps({ active_only: true });
+        var wrapBySku = {};
+        for (var i = 0; i < wraps.length; i += 1) wrapBySku[wraps[i].wrap_sku] = wraps[i];
+        // Remove any existing wrap line first (every active wrap's sku).
+        var existingLines = await deps.cart.listLines(cartId);
+        for (var li = 0; li < existingLines.length; li += 1) {
+          if (wrapBySku[existingLines[li].sku]) {
+            await deps.cart.removeLine(existingLines[li].id, cartId);
+          }
+        }
+        // Add the selected wrap (when one was chosen + it's a real active
+        // wrap). The wrap_sku is a real catalog variant; resolve its variant
+        // id and add it as a line — the price snapshot comes from the catalog
+        // price, so the fee is charged through the normal quote path.
+        if (wrapSku && wrapBySku[wrapSku]) {
+          var variant = await deps.catalog.variants.bySku(wrapSku);
+          if (variant) {
+            await deps.cart.addLine(cartId, { variant_id: variant.id, qty: 1 });
+          }
+        }
+      } catch (e) {
+        if (!(e instanceof TypeError)) throw e;
+        // A bad shape degrades to a silent no-op redirect rather than 500 —
+        // the cart is still valid, the wrap just wasn't changed.
+      }
+      res.status(303);
+      res.setHeader && res.setHeader("location", "/cart");
+      return res.end ? res.end() : res.send("");
+    });
+  }
+
   // POST /cart/bundle — add every member of a bundle to the cart at the
   // bundle price, atomically. Reads `bundle_sku` from the form body.
   // The price is recomputed server-side from the catalog + the bundle
@@ -16912,6 +17632,9 @@ module.exports = {
   renderAccount:         renderAccount,
   renderPasskeys:        renderPasskeys,
   renderPasskeyRemoveConfirm: renderPasskeyRemoveConfirm,
+  renderPaymentMethods:  renderPaymentMethods,
+  renderAddPaymentMethod: renderAddPaymentMethod,
+  renderAccountPickups:  renderAccountPickups,
   renderProfile:         renderProfile,
   renderAccountSubscriptions: renderAccountSubscriptions,
   renderCookiePreferences: renderCookiePreferences,