@blamejs/blamejs-shop 0.3.53 → 0.3.55

package/lib/storefront.js

@@ -2192,6 +2192,49 @@ function _buildPreorderNotice(marker) {
   return "<p class=\"" + cls + "\" role=\"" + role + "\">" + b.template.escapeHtml(n.copy) + "</p>\n      ";
 }
 
+// Map a thrown validator TypeError to the single form field it rejected, so a
+// re-render can mark exactly that input with aria-invalid + a per-field error
+// span (WCAG 3.3.1 Error Identification / 3.3.3 Error Suggestion) — IN ADDITION
+// to the page-top role="alert" summary banner the routes already render.
+//
+// The shop's validators throw "<module>: <field> <reason>" (or
+// "<module>.<method>: <field> <reason>") where the leading token after the
+// prefix IS the form `name`. This reads that already-thrown error; it does NOT
+// re-validate (the backend stays the single validator). `modulePrefix` is the
+// thrower's prefix (e.g. "addresses", "reviews", "productQA", "supportTickets")
+// and `formFields` is the set of `name`s the form actually renders, so an error
+// on a non-form internal (e.g. customer_id) returns null — the page-top banner
+// still shows, but no input is falsely marked.
+//
+// Returns { field, message } with the module prefix stripped from `message`
+// (so the per-field span carries just the human reason), or null when the
+// rejected token isn't one of this form's fields.
+function _fieldFromValidatorError(e, modulePrefix, formFields) {
+  var raw = (e && e.message) || "";
+  var prefixRe = new RegExp("^" + modulePrefix + "(?:\\.\\w+)?:\\s+");
+  var m = new RegExp("^" + modulePrefix + "(?:\\.\\w+)?:\\s+([a-z_]+)\\b").exec(raw);
+  var field = m && m[1];
+  if (!field || !formFields || !Object.prototype.hasOwnProperty.call(formFields, field)) return null;
+  return { field: field, message: raw.replace(prefixRe, "") };
+}
+
+// Build the aria-invalid + aria-describedby attribute fragment for an input
+// when `inv` (a { field, message } from _fieldFromValidatorError) names this
+// field. Empty string otherwise. `idPrefix` + field is the static, escaped id.
+function _fieldAriaAttr(idPrefix, name, inv) {
+  if (!inv || inv.field !== name) return "";
+  return " aria-invalid=\"true\" aria-describedby=\"" + b.template.escapeHtml(idPrefix + name) + "\"";
+}
+
+// Build the adjacent per-field error span (role="alert") for the rejected
+// field; empty string otherwise. The reason is escaped operator-validator
+// prose; the id is the static, escaped `idPrefix + name`.
+function _fieldErrorSpan(idPrefix, name, inv) {
+  if (!inv || inv.field !== name) return "";
+  return "<span class=\"form-field__error\" id=\"" + b.template.escapeHtml(idPrefix + name) +
+    "\" role=\"alert\">" + b.template.escapeHtml(inv.message == null ? "" : String(inv.message)) + "</span>";
+}
+
 var PRODUCT_PAGE =
   "<section class=\"pdp\">\n" +
   "  <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n" +
@@ -2486,17 +2529,20 @@ var REVIEW_FORM_PAGE =
   "  <h1 class=\"review-form-page__title\">Review {{title}}</h1>\n" +
   "  RAW_NOTICE_PLACEHOLDER\n" +
   "  <form class=\"review-form\" method=\"post\" action=\"/products/{{slug}}/review\">\n" +
-  "    <fieldset class=\"review-form__rating\">\n" +
+  "    <fieldset class=\"review-form__rating\"RAW_RATING_ARIA_PLACEHOLDER>\n" +
   "      <legend>Your rating</legend>\n" +
   "      RAW_STARS_PLACEHOLDER\n" +
+  "      RAW_RATING_ERROR_PLACEHOLDER\n" +
   "    </fieldset>\n" +
   "    <label class=\"form-field\">\n" +
   "      <span class=\"form-field__label\">Title</span>\n" +
-  "      <input type=\"text\" name=\"title\" maxlength=\"120\" required autocomplete=\"off\">\n" +
+  "      <input type=\"text\" name=\"title\" maxlength=\"120\" required autocomplete=\"off\"RAW_TITLE_ARIA_PLACEHOLDER>\n" +
+  "      RAW_TITLE_ERROR_PLACEHOLDER\n" +
   "    </label>\n" +
   "    <label class=\"form-field\">\n" +
   "      <span class=\"form-field__label\">Your review</span>\n" +
-  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\"></textarea>\n" +
+  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\"RAW_BODY_ARIA_PLACEHOLDER></textarea>\n" +
+  "      RAW_BODY_ERROR_PLACEHOLDER\n" +
   "    </label>\n" +
   "    <button type=\"submit\" class=\"btn-primary\">Submit review</button>\n" +
   "  </form>\n" +
@@ -2519,12 +2565,17 @@ function renderReviewForm(opts) {
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
-  var body = _render(REVIEW_FORM_PAGE, {
-    title: opts.product.title,
-    slug:  slug,
-  })
+  // On a validation re-render, mark the one rejected control. The rating is a
+  // <fieldset> (the aria goes on the group, per the existing fieldset/legend
+  // shape); title/body are ordinary inputs. ids are static "review-err-<name>".
+  var inv = opts.invalid_field || null;
+  var body = _render(REVIEW_FORM_PAGE, { title: opts.product.title, slug: slug })
     .replace("RAW_NOTICE_PLACEHOLDER", notice)
     .replace("RAW_STARS_PLACEHOLDER", stars);
+  ["rating", "title", "body"].forEach(function (name) {
+    body = _spliceRaw(body, "RAW_" + name.toUpperCase() + "_ARIA_PLACEHOLDER", _fieldAriaAttr("review-err-", name, inv));
+    body = _spliceRaw(body, "RAW_" + name.toUpperCase() + "_ERROR_PLACEHOLDER", _fieldErrorSpan("review-err-", name, inv));
+  });
   return _wrap({
     title:      "Review " + opts.product.title,
     shop_name:  opts.shop_name || "blamejs.shop",
@@ -2631,7 +2682,8 @@ var QA_FORM_PAGE =
   "  <form class=\"review-form\" method=\"post\" action=\"/products/{{slug}}/question\">\n" +
   "    <label class=\"form-field\">\n" +
   "      <span class=\"form-field__label\">Your question</span>\n" +
-  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\" required></textarea>\n" +
+  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\" requiredRAW_BODY_ARIA_PLACEHOLDER></textarea>\n" +
+  "      RAW_BODY_ERROR_PLACEHOLDER\n" +
   "    </label>\n" +
   "    <button type=\"submit\" class=\"btn-primary\">Submit question</button>\n" +
   "  </form>\n" +
@@ -2645,11 +2697,16 @@ function renderQuestionForm(opts) {
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
+  // Single field (`body`); on a re-render, mark it with aria-invalid + an
+  // adjacent error span. id is the static "qa-err-body".
+  var inv = opts.invalid_field || null;
   var body = _render(QA_FORM_PAGE, {
     title: opts.product.title,
     slug:  opts.product.slug,
   })
     .replace("RAW_NOTICE_PLACEHOLDER", notice);
+  body = _spliceRaw(body, "RAW_BODY_ARIA_PLACEHOLDER", _fieldAriaAttr("qa-err-", "body", inv));
+  body = _spliceRaw(body, "RAW_BODY_ERROR_PLACEHOLDER", _fieldErrorSpan("qa-err-", "body", inv));
   return _wrap({
     title:      "Ask about " + opts.product.title,
     shop_name:  opts.shop_name || "blamejs.shop",
@@ -3545,32 +3602,59 @@ function _addrField(name, labelText, value, opts) {
   // The `*` is a color-only visual cue; pair it with a visually-hidden
   // "(required)" so a screen reader announces the field's requiredness.
   var req = opts.required ? " <span class=\"form-field__req\" aria-hidden=\"true\">*</span><span class=\"sr-only\">(required)</span>" : "";
+  // On a validation re-render, the rejected field carries aria-invalid +
+  // aria-describedby pointing at an adjacent error span (WCAG 3.3.1/3.3.3).
+  // The id is a static prefix + field name (attacker-uncontrolled) but is
+  // still escaped for defense-in-depth; the reason is operator-validator
+  // prose, escaped via esc().
+  var errSpan = "";
+  if (opts.invalid) {
+    attrs += " aria-invalid=\"true\" aria-describedby=\"" + esc(opts.error_id) + "\"";
+    errSpan = "<span class=\"form-field__error\" id=\"" + esc(opts.error_id) +
+      "\" role=\"alert\">" + esc(opts.error_msg == null ? "" : String(opts.error_msg)) + "</span>";
+  }
   return "<label class=\"form-field\">" +
            "<span class=\"form-field__label\">" + esc(labelText) + req + "</span>" +
            "<input type=\"text\" name=\"" + esc(name) + "\" value=\"" + esc(value == null ? "" : String(value)) + "\"" + attrs + ">" +
+           errSpan +
          "</label>";
 }
 
 // Shared add/edit address form. `addr` pre-fills for edit (null = add).
-function _addressForm(action, addr, submitLabel) {
+// `invalidField` (optional) is a { field, message } picked off the
+// backend-thrown validator error so the one rejected input renders with
+// aria-invalid + a per-field error span (WCAG 3.3.1/3.3.3). When null, every
+// field renders byte-identically to the no-error path.
+function _addressForm(action, addr, submitLabel, invalidField) {
   var esc = b.template.escapeHtml;
   addr = addr || {};
   function _checked(v) { return Number(v) === 1 ? " checked" : ""; }
+  // Merge the per-field invalid marker into a field's opts when it is the one
+  // the validator rejected. The id is a static "addr-err-<name>" so it is
+  // attacker-uncontrolled.
+  function _mark(name, opts) {
+    if (invalidField && invalidField.field === name) {
+      opts.invalid = true;
+      opts.error_id = "addr-err-" + name;
+      opts.error_msg = invalidField.message;
+    }
+    return opts;
+  }
   return "<form class=\"address-form form-stack\" method=\"post\" action=\"" + esc(action) + "\">" +
-    _addrField("recipient_name", "Recipient name", addr.recipient_name, { required: true, maxlength: 120, autocomplete: "name" }) +
-    _addrField("label", "Label (e.g. Home, Work)", addr.label, { maxlength: 60 }) +
-    _addrField("company", "Company", addr.company, { maxlength: 120, autocomplete: "organization" }) +
-    _addrField("street_line1", "Street address", addr.street_line1, { required: true, maxlength: 200, autocomplete: "address-line1" }) +
-    _addrField("street_line2", "Apt / suite / unit", addr.street_line2, { maxlength: 200, autocomplete: "address-line2" }) +
+    _addrField("recipient_name", "Recipient name", addr.recipient_name, _mark("recipient_name", { required: true, maxlength: 120, autocomplete: "name" })) +
+    _addrField("label", "Label (e.g. Home, Work)", addr.label, _mark("label", { maxlength: 60 })) +
+    _addrField("company", "Company", addr.company, _mark("company", { maxlength: 120, autocomplete: "organization" })) +
+    _addrField("street_line1", "Street address", addr.street_line1, _mark("street_line1", { required: true, maxlength: 200, autocomplete: "address-line1" })) +
+    _addrField("street_line2", "Apt / suite / unit", addr.street_line2, _mark("street_line2", { maxlength: 200, autocomplete: "address-line2" })) +
     "<div class=\"form-row form-row--inline\">" +
-      _addrField("city", "City", addr.city, { required: true, maxlength: 120, autocomplete: "address-level2" }) +
-      _addrField("region", "State / region", addr.region, { maxlength: 120, autocomplete: "address-level1" }) +
+      _addrField("city", "City", addr.city, _mark("city", { required: true, maxlength: 120, autocomplete: "address-level2" })) +
+      _addrField("region", "State / region", addr.region, _mark("region", { maxlength: 120, autocomplete: "address-level1" })) +
     "</div>" +
     "<div class=\"form-row form-row--inline\">" +
-      _addrField("postal_code", "Postal code", addr.postal_code, { required: true, maxlength: 32, autocomplete: "postal-code" }) +
-      _addrField("country", "Country (ISO 3166-1)", addr.country || "US", { required: true, maxlength: 2, pattern: "[A-Za-z]{2}", autocomplete: "country" }) +
+      _addrField("postal_code", "Postal code", addr.postal_code, _mark("postal_code", { required: true, maxlength: 32, autocomplete: "postal-code" })) +
+      _addrField("country", "Country (ISO 3166-1)", addr.country || "US", _mark("country", { required: true, maxlength: 2, pattern: "[A-Za-z]{2}", autocomplete: "country" })) +
     "</div>" +
-    _addrField("phone", "Phone", addr.phone, { maxlength: 40, autocomplete: "tel" }) +
+    _addrField("phone", "Phone", addr.phone, _mark("phone", { maxlength: 40, autocomplete: "tel" })) +
     "<label class=\"address-form__check\"><input type=\"checkbox\" name=\"is_default_shipping\" value=\"1\"" + _checked(addr.is_default_shipping) + "> Default shipping address</label>" +
     "<label class=\"address-form__check\"><input type=\"checkbox\" name=\"is_default_billing\" value=\"1\"" + _checked(addr.is_default_billing) + "> Default billing address</label>" +
     "<button type=\"submit\" class=\"btn-primary\">" + esc(submitLabel) + "</button>" +
@@ -3642,7 +3726,7 @@ function renderAddresses(opts) {
       listHtml +
       "<h2 class=\"account-addresses__form-title\">" + esc(formHeading) + "</h2>" +
       notice +
-      _addressForm(formAction, editing, editing ? "Save changes" : "Add address") +
+      _addressForm(formAction, editing, editing ? "Save changes" : "Add address", opts.invalid_field || null) +
     "</section>";
   return _wrap({
     title:      "Addresses",
@@ -4101,6 +4185,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
@@ -4564,6 +4699,13 @@ function renderSupportNew(opts) {
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
+  // On a validation re-render, mark the one rejected field with aria-invalid +
+  // an adjacent error span (WCAG 3.3.1/3.3.3) via the shared field helpers.
+  // `opts.invalid_field` is the { field, message } the route picked off the
+  // backend-thrown error; ids are static "support-err-<name>".
+  var inv = opts.invalid_field || null;
+  function _supAria(name) { return _fieldAriaAttr("support-err-", name, inv); }
+  function _supErr(name) { return _fieldErrorSpan("support-err-", name, inv); }
   var body =
     "<section class=\"return-form-page\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -4575,14 +4717,14 @@ function renderSupportNew(opts) {
       notice +
       "<form class=\"return-form form-stack\" method=\"post\" action=\"/account/support\">" +
         "<label class=\"form-field\"><span class=\"form-field__label\">Email for our reply</span>" +
-          "<input type=\"email\" name=\"customer_email\" value=\"" + esc(v.customer_email == null ? "" : String(v.customer_email)) + "\" required autocomplete=\"email\" maxlength=\"254\"></label>" +
+          "<input type=\"email\" name=\"customer_email\" value=\"" + esc(v.customer_email == null ? "" : String(v.customer_email)) + "\" required autocomplete=\"email\" maxlength=\"254\"" + _supAria("customer_email") + ">" + _supErr("customer_email") + "</label>" +
         "<label class=\"form-field\"><span class=\"form-field__label\">Category</span>" +
-          "<select name=\"category\" required>" + categoryOpts + "</select></label>" +
+          "<select name=\"category\" required" + _supAria("category") + ">" + categoryOpts + "</select>" + _supErr("category") + "</label>" +
         orderField +
         "<label class=\"form-field\"><span class=\"form-field__label\">Subject</span>" +
-          "<input type=\"text\" name=\"subject\" value=\"" + esc(v.subject == null ? "" : String(v.subject)) + "\" required maxlength=\"200\"></label>" +
+          "<input type=\"text\" name=\"subject\" value=\"" + esc(v.subject == null ? "" : String(v.subject)) + "\" required maxlength=\"200\"" + _supAria("subject") + ">" + _supErr("subject") + "</label>" +
         "<label class=\"form-field\"><span class=\"form-field__label\">How can we help?</span>" +
-          "<textarea name=\"body\" required maxlength=\"8000\" rows=\"6\">" + esc(v.body == null ? "" : String(v.body)) + "</textarea></label>" +
+          "<textarea name=\"body\" required maxlength=\"8000\" rows=\"6\"" + _supAria("body") + ">" + esc(v.body == null ? "" : String(v.body)) + "</textarea>" + _supErr("body") + "</label>" +
         "<button type=\"submit\" class=\"btn-primary\">Send</button>" +
       "</form>" +
     "</section>";
@@ -6294,6 +6436,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 +6554,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 +6808,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 +7147,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 +7262,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 +7315,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 +7504,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 +7671,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 +8699,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 +8818,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 +8987,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 +11775,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 +11803,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 +11914,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 +11943,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 +11969,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 +12123,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 +12420,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 +12955,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 +13227,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
@@ -13914,7 +14658,7 @@ function mount(router, deps) {
         if (kind === "default-billing")  return "Default billing address updated.";
         return null;
       }
-      async function _renderAddrPage(req, res, auth, editAddr, notice, code) {
+      async function _renderAddrPage(req, res, auth, editAddr, notice, code, invalidField) {
         var rows = await deps.addresses.listForCustomer(auth.customer_id, { limit: 50 });
         var cartCount = await _cartCountForReq(req);
         var url = req.url ? new URL(req.url, "http://localhost") : null;
@@ -13924,15 +14668,24 @@ function mount(router, deps) {
         // when the ?undo=<id> marker round-trips a real owned address id.
         var undoId = (okKind === "removed" && url) ? url.searchParams.get("undo") : null;
         _send(res, code || 200, renderAddresses({
-          addresses:  rows,
-          edit:       editAddr || null,
-          notice:     notice || null,
-          success:    success,
-          undo_id:    undoId || null,
-          shop_name:  shopName,
-          cart_count: cartCount,
+          addresses:     rows,
+          edit:          editAddr || null,
+          notice:        notice || null,
+          success:       success,
+          undo_id:       undoId || null,
+          invalid_field: invalidField || null,
+          shop_name:     shopName,
+          cart_count:    cartCount,
         }));
       }
+      // The address form's renderable fields, by `name`. An error on a
+      // non-form internal (customer_id, address_id) returns null from the
+      // shared extractor, so the page-top banner still shows but no input is
+      // falsely marked.
+      var _ADDR_FORM_FIELDS = {
+        recipient_name: 1, label: 1, company: 1, street_line1: 1, street_line2: 1,
+        city: 1, region: 1, postal_code: 1, country: 1, phone: 1,
+      };
       function _addrInput(body, customerId) {
         return {
           customer_id:         customerId,
@@ -13969,7 +14722,10 @@ function mount(router, deps) {
         try {
           await deps.addresses.add(_addrInput(req.body || {}, auth.customer_id));
         } catch (e) {
-          if (e instanceof TypeError) return _renderAddrPage(req, res, auth, null, (e && e.message) || "Please check the address.", 400);
+          if (e instanceof TypeError) {
+            var inv = _fieldFromValidatorError(e, "addresses", _ADDR_FORM_FIELDS);
+            return _renderAddrPage(req, res, auth, null, (e && e.message) || "Please check the address.", 400, inv);
+          }
           throw e;
         }
         res.status(303); res.setHeader && res.setHeader("location", "/account/addresses?ok=added");
@@ -13984,7 +14740,8 @@ function mount(router, deps) {
         } catch (e) {
           if (e instanceof TypeError) {
             var merged = Object.assign({}, addr, _addrInput(req.body || {}, auth.customer_id));
-            return _renderAddrPage(req, res, auth, merged, (e && e.message) || "Please check the address.", 400);
+            var inv = _fieldFromValidatorError(e, "addresses", _ADDR_FORM_FIELDS);
+            return _renderAddrPage(req, res, auth, merged, (e && e.message) || "Please check the address.", 400, inv);
           }
           throw e;
         }
@@ -14935,6 +15692,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
@@ -15057,11 +15834,12 @@ function mount(router, deps) {
         } catch (e) {
           if (e instanceof TypeError) {
             return _send(res, 400, renderSupportNew({
-              orders:     await _orders(),
-              values:     body,
-              notice:     (e && e.message || "").replace(/^supportTickets[.:]\s*/, "") || "Please check your ticket and try again.",
-              shop_name:  shopName,
-              cart_count: cartCount,
+              orders:        await _orders(),
+              values:        body,
+              notice:        (e && e.message || "").replace(/^supportTickets[.:]\s*/, "") || "Please check your ticket and try again.",
+              invalid_field: _fieldFromValidatorError(e, "supportTickets", { customer_email: 1, category: 1, subject: 1, body: 1 }),
+              shop_name:     shopName,
+              cart_count:    cartCount,
             }));
           }
           throw e;
@@ -15745,10 +16523,11 @@ function mount(router, deps) {
           // anything else is a real 500.
           if (e instanceof TypeError) {
             return _send(res, 400, renderReviewForm({
-              product:    { title: ctx.product.title, slug: ctx.product.slug },
-              notice:     (e && e.message) || "Please check your review and try again.",
-              shop_name:  shopName,
-              cart_count: ctx.cartCount,
+              product:       { title: ctx.product.title, slug: ctx.product.slug },
+              notice:        (e && e.message) || "Please check your review and try again.",
+              invalid_field: _fieldFromValidatorError(e, "reviews", { rating: 1, title: 1, body: 1 }),
+              shop_name:     shopName,
+              cart_count:    ctx.cartCount,
             }));
           }
           throw e;
@@ -15816,10 +16595,11 @@ function mount(router, deps) {
           // anything else is a real 500.
           if (e instanceof TypeError) {
             return _send(res, 400, renderQuestionForm({
-              product:    { title: ctx.product.title, slug: ctx.product.slug },
-              notice:     (e && e.message) || "Please check your question and try again.",
-              shop_name:  shopName,
-              cart_count: ctx.cartCount,
+              product:       { title: ctx.product.title, slug: ctx.product.slug },
+              notice:        (e && e.message) || "Please check your question and try again.",
+              invalid_field: _fieldFromValidatorError(e, "productQA", { body: 1 }),
+              shop_name:     shopName,
+              cart_count:    ctx.cartCount,
             }));
           }
           throw e;
@@ -16083,6 +16863,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 +17739,9 @@ module.exports = {
   renderAccount:         renderAccount,
   renderPasskeys:        renderPasskeys,
   renderPasskeyRemoveConfirm: renderPasskeyRemoveConfirm,
+  renderPaymentMethods:  renderPaymentMethods,
+  renderAddPaymentMethod: renderAddPaymentMethod,
+  renderAccountPickups:  renderAccountPickups,
   renderProfile:         renderProfile,
   renderAccountSubscriptions: renderAccountSubscriptions,
   renderCookiePreferences: renderCookiePreferences,