@asteby/storefront-react 0.11.0 → 0.12.0

package/dist/checkout.js

@@ -1,13 +1,571 @@
-import { brandName, BrandMark } from './chunk-3ZJTDFHE.js';
-export { BrandMark, brandKey, brandLogo, brandName, findBrand, listBrands } from './chunk-3ZJTDFHE.js';
+import { brandName, BrandMark, brandKey } from './chunk-ODIQR6TG.js';
+export { BrandMark, brandKey, brandLogo, brandName, findBrand, listBrands } from './chunk-ODIQR6TG.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import './chunk-DQBL2DFJ.js';
-import { useMemo, useSyncExternalStore } from 'react';
-import { formatMoney } from '@asteby/storefront';
+import { useRef, useState, useEffect, useId, useMemo, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { formatMoney } from '@asteby/storefront';
 
-// src/checkout/delivery.ts
 var ES = {
+  valueMissing: "Completa este campo.",
+  choiceMissing: "Elige una opci\xF3n.",
+  email: "Escribe un correo v\xE1lido, por ejemplo nombre@correo.com.",
+  tel: "Escribe un tel\xE9fono v\xE1lido.",
+  pattern: "Revisa el formato.",
+  tooShort: "Escribe al menos {n} caracteres.",
+  server: "Revisa este campo.",
+  summaryOne: "Revisa 1 campo para continuar",
+  summaryMany: "Revisa {n} campos para continuar",
+  optional: "(opcional)"
+};
+var EN = {
+  valueMissing: "Fill in this field.",
+  choiceMissing: "Choose an option.",
+  email: "Enter a valid email, like name@example.com.",
+  tel: "Enter a valid phone number.",
+  pattern: "Check the format.",
+  tooShort: "Enter at least {n} characters.",
+  server: "Check this field.",
+  summaryOne: "Check 1 field to continue",
+  summaryMany: "Check {n} fields to continue",
+  optional: "(optional)"
+};
+function fieldMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
+  return overrides ? { ...base, ...overrides } : base;
+}
+var isControl = (el) => !!el && typeof el.tagName === "string" && ["INPUT", "SELECT", "TEXTAREA"].includes(el.tagName) && !!el.name;
+function validationMessage(el, m = ES) {
+  const v = el.validity;
+  if (!v || v.valid) return null;
+  const own = el.getAttribute("data-sf-error");
+  if (own) return own;
+  if (v.valueMissing) return el instanceof HTMLInputElement && (el.type === "radio" || el.type === "checkbox") ? m.choiceMissing : m.valueMissing;
+  if (v.typeMismatch && el instanceof HTMLInputElement) return el.type === "email" ? m.email : el.type === "tel" ? m.tel : m.pattern;
+  if (v.patternMismatch) return el.getAttribute("title") || (el instanceof HTMLInputElement && el.type === "tel" ? m.tel : m.pattern);
+  if (v.tooShort && el instanceof HTMLInputElement) return m.tooShort.replace("{n}", String(el.minLength));
+  return el.validationMessage || m.pattern;
+}
+function labelOf(el) {
+  if (el instanceof HTMLInputElement && el.type === "radio") {
+    const legend = el.closest("fieldset")?.querySelector("legend");
+    if (legend?.textContent) return legend.textContent.trim();
+  }
+  const text = el.labels?.[0]?.getAttribute("data-sf-label") ?? el.labels?.[0]?.textContent ?? el.getAttribute("aria-label") ?? el.name;
+  return text.trim();
+}
+function useFieldErrors(formRef, options = {}) {
+  const m = fieldMessages(options.locale, options.messages);
+  const live = useRef(m);
+  live.current = m;
+  const server = [...options.serverFields ?? []];
+  const serverKey = server.join("|");
+  const [errors, setErrors] = useState(() => Object.fromEntries(server.map((n) => [n, options.serverMessages?.[n] ?? m.server])));
+  const [summary, setSummary] = useState(null);
+  const [summaryKey, setSummaryKey] = useState(0);
+  useEffect(() => {
+    if (!server.length) return;
+    const form = formRef.current;
+    const items = [];
+    const next = {};
+    for (const name of server) {
+      const msg = options.serverMessages?.[name] ?? live.current.server;
+      next[name] = msg;
+      const el = form?.elements.namedItem(name);
+      const ctl = el && "length" in el && !(el instanceof HTMLSelectElement) ? el[0] : el;
+      if (ctl) items.push({ name, id: ctl.id || name, label: labelOf(ctl), message: msg });
+    }
+    setErrors((e) => ({ ...e, ...next }));
+    if (items.length) {
+      setSummary(items);
+      setSummaryKey((k) => k + 1);
+    }
+  }, [serverKey]);
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form) return;
+    let batch = null;
+    const set = (name, msg) => setErrors((e) => {
+      if (msg === null) {
+        if (!(name in e)) return e;
+        const { [name]: _gone, ...rest } = e;
+        return rest;
+      }
+      return e[name] === msg ? e : { ...e, [name]: msg };
+    });
+    const onBlur = (ev) => {
+      const el = ev.target;
+      if (!isControl(el) || el instanceof HTMLInputElement && (el.type === "radio" || el.type === "checkbox" || el.type === "hidden")) return;
+      if (!el.value) return;
+      set(el.name, validationMessage(el, live.current));
+    };
+    const onInput = (ev) => {
+      const el = ev.target;
+      if (!isControl(el)) return;
+      setErrors((e) => {
+        if (!(el.name in e)) return e;
+        const msg = el.validity.valid ? null : validationMessage(el, live.current);
+        if (msg !== null) return e;
+        const { [el.name]: _gone, ...rest } = e;
+        return rest;
+      });
+    };
+    const onInvalid = (ev) => {
+      const el = ev.target;
+      if (!isControl(el)) return;
+      ev.preventDefault();
+      if (!batch) {
+        batch = [];
+        queueMicrotask(() => {
+          const list = batch ?? [];
+          batch = null;
+          const seen = /* @__PURE__ */ new Set();
+          const items = [];
+          const next = {};
+          for (const c of list) {
+            if (seen.has(c.name)) continue;
+            seen.add(c.name);
+            const msg = validationMessage(c, live.current) ?? live.current.valueMissing;
+            next[c.name] = msg;
+            items.push({ name: c.name, id: c.id || c.name, label: labelOf(c), message: msg });
+          }
+          setErrors((e) => ({ ...e, ...next }));
+          setSummary(items);
+          setSummaryKey((k) => k + 1);
+        });
+      }
+      batch.push(el);
+    };
+    form.addEventListener("focusout", onBlur);
+    form.addEventListener("input", onInput);
+    form.addEventListener("change", onInput);
+    form.addEventListener("invalid", onInvalid, true);
+    return () => {
+      form.removeEventListener("focusout", onBlur);
+      form.removeEventListener("input", onInput);
+      form.removeEventListener("change", onInput);
+      form.removeEventListener("invalid", onInvalid, true);
+    };
+  }, [formRef]);
+  const shown = summary ? summary.filter((s) => s.name in errors).map((s) => ({ ...s, message: errors[s.name] })) : null;
+  return {
+    errors,
+    summary: shown && shown.length ? shown : null,
+    summaryKey,
+    clear: () => {
+      setErrors({});
+      setSummary(null);
+    }
+  };
+}
+function ErrorSummary({ items, focusKey, locale, messages, title, className, classNames: cx = {} }) {
+  const ref = useRef(null);
+  const m = fieldMessages(locale, messages);
+  const has = !!items && items.length > 0;
+  useEffect(() => {
+    if (has) ref.current?.focus();
+  }, [focusKey]);
+  if (!has) return null;
+  const n = items.length;
+  return /* @__PURE__ */ jsxs("div", { ref, role: "alert", tabIndex: -1, className, "data-sf-error-summary": true, "aria-labelledby": "sf-error-summary-title", children: [
+    /* @__PURE__ */ jsx("p", { id: "sf-error-summary-title", className: cx.title, "data-sf-error-summary-title": true, children: title ?? (n === 1 ? m.summaryOne : m.summaryMany.replace("{n}", String(n))) }),
+    /* @__PURE__ */ jsx("ul", { className: cx.list, children: items.map((it) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: `#${it.id}`,
+        className: cx.link,
+        onClick: (e) => {
+          const el = document.getElementById(it.id);
+          if (!el) return;
+          e.preventDefault();
+          el.focus();
+          el.scrollIntoView?.({ block: "center" });
+        },
+        children: [
+          it.label,
+          ": ",
+          it.message
+        ]
+      }
+    ) }, it.name)) })
+  ] });
+}
+function CheckoutField(props) {
+  const { name, label, id = name, error, hint, optional = false, classNames: cx = {}, locale, messages, ...rest } = props;
+  const m = fieldMessages(locale, messages);
+  const hintId = hint ? `${id}-hint` : void 0;
+  const errorId = `${id}-error`;
+  const describedBy = [hintId, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const common = {
+    id,
+    name,
+    required: !optional,
+    "aria-invalid": error ? true : void 0,
+    "aria-describedby": describedBy,
+    className: cx.input,
+    "data-sf-field-control": ""
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-field": true, "data-invalid": error ? "" : void 0, children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: cx.label, "data-sf-label": label, children: [
+      label,
+      optional ? /* @__PURE__ */ jsxs("span", { className: cx.optional, "data-sf-field-optional": true, children: [
+        " ",
+        m.optional
+      ] }) : null
+    ] }),
+    hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: cx.hint, "data-sf-field-hint": true, children: hint }) : null,
+    rest.as === "select" ? (() => {
+      const { as: _as, children, ...select } = rest;
+      return /* @__PURE__ */ jsx("select", { ...select, ...common, children });
+    })() : (() => {
+      const { as: _as, ...input } = rest;
+      return /* @__PURE__ */ jsx("input", { ...input, ...common });
+    })(),
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: cx.error, "data-sf-field-error": true, children: error }) : null
+  ] });
+}
+var ES2 = {
+  email: "Correo",
+  phone: "Tel\xE9fono",
+  first_name: "Nombre",
+  last_name: "Apellidos",
+  zip: "C\xF3digo postal",
+  province: "Estado",
+  city: "Ciudad o municipio",
+  neighborhood: "Colonia",
+  address1: "Calle y n\xFAmero",
+  address2: "N\xFAmero interior o departamento",
+  reference: "Referencias para la entrega",
+  provincePlaceholder: "Elige tu estado",
+  address1Hint: "Por ejemplo: Av. Insurgentes Sur 1234",
+  referenceHint: "Entre qu\xE9 calles, color de la fachada\u2026",
+  emailHint: "Te enviamos aqu\xED la confirmaci\xF3n y el seguimiento.",
+  phoneHint: "Solo para la paqueter\xEDa, por si necesita contactarte.",
+  lookupFilled: "Completamos estado y ciudad con tu c\xF3digo postal."
+};
+var EN2 = {
+  email: "Email",
+  phone: "Phone",
+  first_name: "First name",
+  last_name: "Last name",
+  zip: "Postal code",
+  province: "State",
+  city: "City",
+  neighborhood: "Neighborhood",
+  address1: "Street and number",
+  address2: "Apartment, suite",
+  reference: "Delivery notes",
+  provincePlaceholder: "Choose your state",
+  address1Hint: "For example: 1234 Main St",
+  referenceHint: "Cross streets, building color\u2026",
+  emailHint: "We send the confirmation and tracking here.",
+  phoneHint: "Only for the carrier, in case they need to reach you.",
+  lookupFilled: "We filled in state and city from your postal code."
+};
+function addressFieldsMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
+  return overrides ? { ...base, ...overrides } : base;
+}
+var join = (...c) => c.filter(Boolean).join(" ") || void 0;
+var field = (cx, span) => ({ ...cx, root: join(cx.root, cx[span]) });
+function ContactFields({ defaults = {}, names = {}, errors = {}, phone, hints = true, locale, messages, fieldMessages: fm, classNames: cx = {} }) {
+  const m = addressFieldsMessages(locale, messages);
+  const n = (k) => names[k] ?? k;
+  const common = { ...locale ? { locale } : {}, ...fm ? { messages: fm } : {} };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("email"), label: m.email, type: "email", autoComplete: "email", inputMode: "email", autoCapitalize: "none", spellCheck: false, defaultValue: defaults.email ?? "", error: errors[n("email")] ?? null, hint: hints ? m.emailHint : void 0, classNames: field(cx, "wide") }),
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("phone"), label: m.phone, type: "tel", autoComplete: "tel", inputMode: "tel", defaultValue: defaults.phone ?? "", error: errors[n("phone")] ?? null, hint: hints ? m.phoneHint : void 0, classNames: field(cx, "wide"), ...phone?.pattern ? { pattern: phone.pattern } : {}, ...phone?.title ? { title: phone.title } : {}, ...phone?.minLength ? { minLength: phone.minLength } : {} }),
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("first_name"), label: m.first_name, autoComplete: "given-name", defaultValue: defaults.first_name ?? "", error: errors[n("first_name")] ?? null, classNames: field(cx, "half") }),
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("last_name"), label: m.last_name, autoComplete: "family-name", defaultValue: defaults.last_name ?? "", error: errors[n("last_name")] ?? null, classNames: field(cx, "half") })
+  ] });
+}
+function AddressFields(props) {
+  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
+  const showNeighborhood = props.neighborhood ?? true;
+  const showReference = props.reference ?? true;
+  const m = addressFieldsMessages(locale, messages);
+  const n = (k) => names[k] ?? k;
+  const common = { ...locale ? { locale } : {}, ...fm ? { messages: fm } : {} };
+  const listId = useId();
+  const [colonias, setColonias] = useState([]);
+  const [filled, setFilled] = useState(false);
+  const lastZip = useRef(null);
+  const zipRef = useRef(null);
+  const lookupRef = useRef(lookupPostalCode);
+  lookupRef.current = lookupPostalCode;
+  const runLookup = (zip) => {
+    const lookup = lookupRef.current;
+    if (!lookup || !zip || zip === lastZip.current) return;
+    if (postalCode?.pattern && !new RegExp(`^(?:${postalCode.pattern})$`).test(zip)) return;
+    lastZip.current = zip;
+    const form = zipRef.current?.closest("form");
+    void lookup(zip).then(
+      (info) => {
+        if (!info || lastZip.current !== zip) return;
+        const fill2 = (name, value) => {
+          const el = form?.elements.namedItem(name);
+          if (!el || !value || "length" in el && !(el instanceof HTMLSelectElement)) return false;
+          if (el.value && el.dataset.sfAutofilled !== "1") return false;
+          if (el instanceof HTMLSelectElement && ![...el.options].some((o) => o.value === value)) return false;
+          el.value = value;
+          el.dataset.sfAutofilled = "1";
+          el.dispatchEvent(new Event("input", { bubbles: true }));
+          return true;
+        };
+        const a = fill2(n("province"), info.province);
+        const b = fill2(n("city"), info.city);
+        setColonias(info.neighborhoods ?? []);
+        setFilled(a || b);
+      },
+      () => {
+      }
+    );
+  };
+  useEffect(() => {
+    const zip = defaults?.zip;
+    if (zip) runLookup(zip);
+  }, []);
+  const numericZip = postalCode?.inputMode === "numeric";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: zipRef, className: join(cx.half), "data-sf-zip": true, children: /* @__PURE__ */ jsx(
+      CheckoutField,
+      {
+        ...common,
+        name: n("zip"),
+        label: m.zip,
+        autoComplete: "postal-code",
+        inputMode: postalCode?.inputMode ?? "text",
+        ...postalCode?.pattern ? { pattern: postalCode.pattern } : {},
+        ...postalCode?.maxLength ? { maxLength: postalCode.maxLength } : {},
+        ...postalCode?.title ? { title: postalCode.title } : {},
+        ...numericZip ? { autoCapitalize: "none" } : {},
+        defaultValue: defaults?.zip ?? "",
+        error: errors[n("zip")] ?? null,
+        classNames: { ...cx, root: cx.root },
+        onInput: (e) => {
+          const v = e.currentTarget.value.trim();
+          if (postalCode?.maxLength && v.length === postalCode.maxLength) runLookup(v);
+        },
+        onBlur: (e) => runLookup(e.currentTarget.value.trim())
+      }
+    ) }),
+    provinces && provinces.length ? /* @__PURE__ */ jsxs(CheckoutField, { ...common, as: "select", name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half"), children: [
+      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: m.provincePlaceholder }),
+      provinces.map((p) => /* @__PURE__ */ jsx("option", { value: p.name, children: p.name }, p.code ?? p.name))
+    ] }) : /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half") }),
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("city"), label: m.city, autoComplete: "address-level2", defaultValue: defaults?.city ?? "", error: errors[n("city")] ?? null, classNames: field(cx, "half") }),
+    showNeighborhood ? /* @__PURE__ */ jsx(
+      CheckoutField,
+      {
+        ...common,
+        name: n("neighborhood"),
+        label: m.neighborhood,
+        autoComplete: "address-level3",
+        optional: showNeighborhood !== "required",
+        defaultValue: defaults?.neighborhood ?? "",
+        error: errors[n("neighborhood")] ?? null,
+        classNames: field(cx, "half"),
+        ...colonias.length ? { list: listId } : {}
+      }
+    ) : null,
+    colonias.length ? /* @__PURE__ */ jsx("datalist", { id: listId, children: colonias.map((c) => /* @__PURE__ */ jsx("option", { value: c }, c)) }) : null,
+    /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", "data-sf-zip-status": true, style: filled ? void 0 : { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }, className: filled ? join(cx.hint, cx.wide) : void 0, children: filled ? m.lookupFilled : "" }),
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("address1"), label: m.address1, autoComplete: "address-line1", defaultValue: defaults?.address1 ?? "", error: errors[n("address1")] ?? null, hint: m.address1Hint, classNames: field(cx, "wide") }),
+    /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("address2"), label: m.address2, autoComplete: "address-line2", optional: true, defaultValue: defaults?.address2 ?? "", error: errors[n("address2")] ?? null, classNames: field(cx, "half") }),
+    showReference ? /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("reference"), label: m.reference, optional: true, defaultValue: defaults?.reference ?? "", error: errors[n("reference")] ?? null, hint: m.referenceHint, classNames: field(cx, "wide"), maxLength: 200 }) : null,
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: "country_code", value: countryCode }),
+    children
+  ] });
+}
+var ES3 = {
+  title: "Tu pedido",
+  subtotal: "Subtotal",
+  discount: "Descuento",
+  shipping: "Env\xEDo",
+  shippingPending: "Al elegir la entrega",
+  updating: "Actualizando\u2026",
+  free: "Gratis",
+  taxes: "Impuestos",
+  taxesIncluded: "Incluye {amount} de impuestos",
+  total: "Total",
+  quantity: "Cantidad: {n}",
+  show: "Ver resumen del pedido",
+  hide: "Ocultar resumen del pedido"
+};
+var EN3 = {
+  title: "Your order",
+  subtotal: "Subtotal",
+  discount: "Discount",
+  shipping: "Shipping",
+  shippingPending: "Calculated at delivery",
+  updating: "Updating\u2026",
+  free: "Free",
+  taxes: "Taxes",
+  taxesIncluded: "Includes {amount} in taxes",
+  total: "Total",
+  quantity: "Quantity: {n}",
+  show: "Show order summary",
+  hide: "Hide order summary"
+};
+function orderSummaryMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN3 : ES3;
+  return overrides ? { ...base, ...overrides } : base;
+}
+var isZero = (m) => !!m && Number(m.amount) === 0;
+var positive = (m) => !!m && Number(m.amount) > 0;
+function OrderSummary(props) {
+  const { lines, cost, updating = false, renderLineMedia, renderAmount, title, headingLevel = 2, classNames: cx = {}, children } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = orderSummaryMessages(locale, props.messages);
+  const money = (v) => renderAmount ? renderAmount(v) : formatMoney(v, locale);
+  const H = headingLevel === 3 ? "h3" : "h2";
+  const discounts = cost.discounts?.filter((d) => positive(d.amount)) ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-summary": true, children: [
+    title === false ? null : /* @__PURE__ */ jsx(H, { className: cx.title, "data-sf-summary-title": true, children: title ?? m.title }),
+    /* @__PURE__ */ jsx("ul", { className: cx.lines, "data-sf-summary-lines": true, children: lines.map((l) => {
+      const variant = l.merchandise.title && !/^default( title)?$/i.test(l.merchandise.title) ? l.merchandise.title : null;
+      return /* @__PURE__ */ jsxs("li", { className: cx.line, "data-sf-summary-line": true, children: [
+        renderLineMedia ? /* @__PURE__ */ jsxs("span", { className: cx.media, "data-sf-summary-media": true, children: [
+          renderLineMedia(l),
+          l.quantity > 1 ? /* @__PURE__ */ jsx("span", { className: cx.qty, "data-sf-summary-qty": true, "aria-hidden": "true", children: l.quantity }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs("span", { "data-sf-summary-line-body": true, children: [
+          /* @__PURE__ */ jsxs("span", { className: cx.lineTitle, "data-sf-summary-line-title": true, children: [
+            !renderLineMedia && l.quantity > 1 ? `${l.quantity} \xD7 ` : null,
+            l.merchandise.product.title
+          ] }),
+          variant ? /* @__PURE__ */ jsx("span", { className: cx.variant, "data-sf-summary-variant": true, children: variant }) : null,
+          renderLineMedia || l.quantity > 1 ? /* @__PURE__ */ jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }, children: m.quantity.replace("{n}", String(l.quantity)) }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: cx.linePrice, "data-sf-summary-line-price": true, children: money(l.cost.total) })
+      ] }, l.id);
+    }) }),
+    children,
+    /* @__PURE__ */ jsxs("dl", { className: cx.totals, "data-sf-summary-totals": true, "aria-busy": updating || void 0, children: [
+      /* @__PURE__ */ jsxs("div", { className: cx.row, "data-sf-summary-row": "subtotal", children: [
+        /* @__PURE__ */ jsx("dt", { children: m.subtotal }),
+        /* @__PURE__ */ jsx("dd", { children: money(cost.subtotal) })
+      ] }),
+      discounts.length ? discounts.map((d) => /* @__PURE__ */ jsxs("div", { className: cx.row ? `${cx.row} ${cx.discount ?? ""}`.trim() : cx.discount, "data-sf-summary-row": "discount", children: [
+        /* @__PURE__ */ jsx("dt", { children: d.code ? `${m.discount} (${d.code})` : d.title || m.discount }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          "\u2212",
+          money(d.amount)
+        ] })
+      ] }, d.id)) : positive(cost.discount) ? /* @__PURE__ */ jsxs("div", { className: cx.row ? `${cx.row} ${cx.discount ?? ""}`.trim() : cx.discount, "data-sf-summary-row": "discount", children: [
+        /* @__PURE__ */ jsx("dt", { children: m.discount }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          "\u2212",
+          money(cost.discount)
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: cx.row, "data-sf-summary-row": "shipping", children: [
+        /* @__PURE__ */ jsx("dt", { children: m.shipping }),
+        /* @__PURE__ */ jsx("dd", { className: updating || !cost.shipping ? cx.muted : void 0, children: updating ? m.updating : !cost.shipping ? m.shippingPending : isZero(cost.shipping) ? /* @__PURE__ */ jsx("span", { className: cx.free, children: m.free }) : money(cost.shipping) })
+      ] }),
+      positive(cost.tax) && !cost.tax_included ? /* @__PURE__ */ jsxs("div", { className: cx.row, "data-sf-summary-row": "tax", children: [
+        /* @__PURE__ */ jsx("dt", { children: m.taxes }),
+        /* @__PURE__ */ jsx("dd", { children: money(cost.tax) })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: cx.total, "data-sf-summary-row": "total", children: [
+        /* @__PURE__ */ jsx("dt", { children: m.total }),
+        /* @__PURE__ */ jsx("dd", { "aria-live": "polite", "data-updating": updating || void 0, children: money(cost.total) })
+      ] })
+    ] }),
+    positive(cost.tax) && cost.tax_included ? /* @__PURE__ */ jsx("p", { className: cx.note, "data-sf-summary-tax-note": true, children: m.taxesIncluded.split("{amount}").flatMap((part, i) => i === 0 ? [part] : [/* @__PURE__ */ jsx("span", { children: money(cost.tax) }, i), part]) }) : null
+  ] });
+}
+function OrderSummaryDisclosure({ total, updating, renderAmount, locale: loc, messages, defaultOpen = false, className, classNames: cx = {}, children }) {
+  const locale = useResolvedLocale(loc);
+  const m = orderSummaryMessages(locale, messages);
+  return /* @__PURE__ */ jsxs("details", { className, "data-sf-summary-disclosure": true, ...defaultOpen ? { open: true } : {}, children: [
+    /* @__PURE__ */ jsxs("summary", { className: cx.summary, "data-sf-summary-toggle": true, children: [
+      /* @__PURE__ */ jsxs("span", { className: cx.label, "data-sf-summary-toggle-label": true, children: [
+        /* @__PURE__ */ jsx("span", { "data-sf-summary-show": true, children: m.show }),
+        /* @__PURE__ */ jsx("span", { "data-sf-summary-hide": true, children: m.hide })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: cx.total, "data-sf-summary-toggle-total": true, "data-updating": updating || void 0, children: renderAmount ? renderAmount(total) : formatMoney(total, locale) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cx.panel, "data-sf-summary-panel": true, children })
+  ] });
+}
+
+// src/checkout/recommend.ts
+var costOf = (r) => {
+  const n = Number(r.cost.amount);
+  return Number.isFinite(n) ? n : null;
+};
+var daysOf = (r) => r.eta_days_max ?? r.eta_days_min ?? null;
+var norm = (s) => (s ?? "").trim().toLowerCase();
+var carrierKey = (r) => r.carrier ? brandKey(r.carrier) : r.provider ? brandKey(r.provider) : "";
+function dedupeRates(rates) {
+  const best = /* @__PURE__ */ new Map();
+  const keyOf = (r) => `${carrierKey(r)}|${norm(r.service_code) || norm(r.title)}|${daysOf(r) ?? ""}|${r.cost.currency_code}`;
+  for (const r of rates) {
+    const k = keyOf(r);
+    const prev = best.get(k);
+    const c = costOf(r);
+    if (!prev || c !== null && (costOf(prev) === null || c < costOf(prev))) best.set(k, r);
+  }
+  const keep = new Set(best.values());
+  return rates.filter((r) => keep.has(r));
+}
+function recommendRates(input, options = {}) {
+  const count = Math.max(1, options.count ?? 3);
+  const rates = options.dedupe === false ? [...input] : dedupeRates(input);
+  const collapseAfter = options.collapseAfter ?? count + 1;
+  const sameCurrency = new Set(rates.map((r) => r.cost.currency_code)).size <= 1;
+  const byCost = (a, b) => (costOf(a) ?? Infinity) - (costOf(b) ?? Infinity);
+  const byDays = (a, b) => (daysOf(a) ?? Infinity) - (daysOf(b) ?? Infinity);
+  const tags = /* @__PURE__ */ new Map();
+  const tag = (r, t) => tags.set(r, [...tags.get(r) ?? [], t]);
+  const cheapest = sameCurrency && rates.length > 1 ? [...rates].sort((a, b) => byCost(a, b) || byDays(a, b))[0] : void 0;
+  if (cheapest && costOf(cheapest) !== null) tag(cheapest, "cheapest");
+  const fastest = rates.length > 1 ? [...rates].sort((a, b) => byDays(a, b) || byCost(a, b))[0] : void 0;
+  if (fastest && daysOf(fastest) !== null && (!cheapest || fastest === cheapest || (daysOf(cheapest) ?? Infinity) > daysOf(fastest))) tag(fastest, "fastest");
+  const chosen = [];
+  for (const r of [cheapest, fastest]) if (r && tags.has(r) && !chosen.includes(r)) chosen.push(r);
+  if (rates.length > collapseAfter) {
+    const rank = (sorted, val) => {
+      const out = /* @__PURE__ */ new Map();
+      let pos = 0;
+      let last;
+      sorted.forEach((r, i) => {
+        const v = val(r);
+        if (v !== last) pos = i;
+        last = v;
+        out.set(r, v === null ? sorted.length : pos);
+      });
+      return out;
+    };
+    const priceRank = rank([...rates].sort(byCost), costOf);
+    const timeRank = rank([...rates].sort(byDays), daysOf);
+    const rest = rates.filter((r) => !chosen.includes(r)).sort((a, b) => priceRank.get(a) + timeRank.get(a) - (priceRank.get(b) + timeRank.get(b)) || byCost(a, b));
+    let first = true;
+    for (const r of rest) {
+      if (chosen.length >= count) break;
+      chosen.push(r);
+      if (first) tag(r, "best_value");
+      first = false;
+    }
+  } else {
+    for (const r of rates) if (!chosen.includes(r)) chosen.push(r);
+  }
+  const recommended = chosen.sort(byCost).map((rate) => ({ rate, tags: tags.get(rate) ?? [] }));
+  const groups = /* @__PURE__ */ new Map();
+  for (const r of [...rates].sort(byCost)) {
+    if (chosen.includes(r)) continue;
+    const key = carrierKey(r);
+    const g = groups.get(key) ?? { key, carrier: r.carrier ?? r.provider ?? null, rates: [] };
+    g.rates.push(r);
+    groups.set(key, g);
+  }
+  const more = [...groups.values()];
+  return { recommended, more, moreCount: more.reduce((n, g) => n + g.rates.length, 0) };
+}
+
+// src/checkout/delivery.ts
+var ES4 = {
   etaOne: "Llega en 1 d\xEDa h\xE1bil",
   etaMany: "Llega en {n} d\xEDas h\xE1biles",
   etaRange: "Llega en {min} a {max} d\xEDas h\xE1biles",
@@ -21,11 +579,16 @@ var ES = {
   quoteTomorrow: "Precios de env\xEDo vigentes hasta ma\xF1ana a las {time}.",
   quoteLater: "Precios de env\xEDo vigentes hasta el {date}.",
   quoteSoon: "Los precios de env\xEDo vencen pronto ({time}).",
-  partial: "No pudimos consultar todas las paqueter\xEDas. Estas son las opciones disponibles ahora.",
+  partial: "Algunas paqueter\xEDas no respondieron a tiempo; estas son las opciones disponibles.",
   loading: "Buscando opciones de env\xEDo\u2026",
-  requoted: "Las tarifas de env\xEDo cambiaron y ya est\xE1n actualizadas. Revisa tu env\xEDo antes de pagar."
+  requoted: "Las tarifas de env\xEDo cambiaron y ya est\xE1n actualizadas. Revisa tu env\xEDo antes de pagar.",
+  bestValue: "Recomendado",
+  moreOptions: "Ver m\xE1s opciones ({n})",
+  otherCarriers: "Otras opciones",
+  error: "No pudimos consultar las opciones de env\xEDo en este momento.",
+  retry: "Intentar de nuevo"
 };
-var EN = {
+var EN4 = {
   etaOne: "Arrives in 1 business day",
   etaMany: "Arrives in {n} business days",
   etaRange: "Arrives in {min} to {max} business days",
@@ -41,10 +604,15 @@ var EN = {
   quoteSoon: "Shipping prices expire soon ({time}).",
   partial: "We couldn't reach every carrier. These are the options available now.",
   loading: "Looking for delivery options\u2026",
-  requoted: "Shipping rates changed and are now up to date. Check your delivery before paying."
+  requoted: "Shipping rates changed and are now up to date. Check your delivery before paying.",
+  bestValue: "Recommended",
+  moreOptions: "Show more options ({n})",
+  otherCarriers: "Other options",
+  error: "We couldn't get delivery options right now.",
+  retry: "Try again"
 };
 function deliveryMessages(locale, overrides) {
-  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN4 : ES4;
   return overrides ? { ...base, ...overrides } : base;
 }
 var fill = (tpl, vars) => tpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? "")).replace(/\.\.$/, ".");
@@ -64,7 +632,7 @@ function rateService(rate) {
   }
   return title;
 }
-function rateEta(rate, messages = ES) {
+function rateEta(rate, messages = ES4) {
   const { eta_days_min: min, eta_days_max: max } = rate;
   if (typeof min === "number" && typeof max === "number") {
     if (min === max) return min === 1 ? messages.etaOne : fill(messages.etaMany, { n: min });
@@ -74,11 +642,11 @@ function rateEta(rate, messages = ES) {
   if (typeof min === "number") return min === 1 ? messages.etaOne : fill(messages.etaFrom, { min });
   return rate.eta ?? null;
 }
-var costOf = (r) => {
+var costOf2 = (r) => {
   const n = Number(r.cost.amount);
   return Number.isFinite(n) ? n : null;
 };
-var daysOf = (r) => r.eta_days_max ?? r.eta_days_min ?? null;
+var daysOf2 = (r) => r.eta_days_max ?? r.eta_days_min ?? null;
 function rateBadges(rates) {
   const out = /* @__PURE__ */ new Map();
   if (rates.length < 2) return out;
@@ -92,10 +660,10 @@ function rateBadges(rates) {
   };
   const currencies = new Set(rates.map((r) => r.cost.currency_code));
   if (currencies.size === 1) {
-    const id = unique(rates.map((r) => [r.id, costOf(r)]));
+    const id = unique(rates.map((r) => [r.id, costOf2(r)]));
     if (id) add(id, "cheapest");
   }
-  const fast = unique(rates.map((r) => [r.id, daysOf(r)]));
+  const fast = unique(rates.map((r) => [r.id, daysOf2(r)]));
   if (fast) add(fast, "fastest");
   return out;
 }
@@ -114,7 +682,7 @@ function quoteNote(deadline, opts = {}) {
   const now = opts.now ?? /* @__PURE__ */ new Date();
   const left = deadline.getTime() - now.getTime();
   if (left <= 0) return null;
-  const m = opts.messages ?? ES;
+  const m = opts.messages ?? ES4;
   const locale = opts.locale ?? "es-MX";
   const tz = opts.timeZone ? { timeZone: opts.timeZone } : {};
   const time = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", ...tz }).format(deadline);
@@ -134,13 +702,13 @@ function isQuoteChange(err) {
 }
 function matchRate(previous, rates) {
   if (!previous) return null;
-  const norm = (s) => (s ?? "").trim().toLowerCase();
-  const sameCarrier = (r) => norm(r.carrier) === norm(previous.carrier);
+  const norm2 = (s) => (s ?? "").trim().toLowerCase();
+  const sameCarrier = (r) => norm2(r.carrier) === norm2(previous.carrier);
   if (previous.service_code) {
-    const hit = rates.find((r) => sameCarrier(r) && norm(r.service_code) === norm(previous.service_code));
+    const hit = rates.find((r) => sameCarrier(r) && norm2(r.service_code) === norm2(previous.service_code));
     if (hit) return hit;
   }
-  return rates.find((r) => sameCarrier(r) && norm(r.title) === norm(previous.title)) ?? null;
+  return rates.find((r) => sameCarrier(r) && norm2(r.title) === norm2(previous.title)) ?? null;
 }
 var SR_ONLY = { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" };
 var useHydrated = () => useSyncExternalStore(
@@ -174,7 +742,10 @@ function DeliveryOptions(props) {
     renderAmount,
     classNames: cx = {},
     testId,
-    children
+    children,
+    layout = "list",
+    error,
+    onRetry
   } = props;
   const locale = useResolvedLocale(props.locale);
   const m = useMemo(() => deliveryMessages(locale, props.messages), [locale, props.messages]);
@@ -187,7 +758,13 @@ function DeliveryOptions(props) {
   const deadline = mode === "never" ? null : quoteDeadline(rates);
   const note = hydrated && deadline ? quoteNote(deadline, { locale, messages: m, ...timeZone ? { timeZone } : {} }) : null;
   const shownNote = note && (mode === "always" || note.soon) ? note : null;
-  const radio = (v) => /* @__PURE__ */ jsx(
+  const current = value ?? defaultValue ?? null;
+  const plan = useMemo(
+    () => layout === "recommended" ? recommendRates(rates, { count: props.recommendedCount ?? 3 }) : null,
+    [layout, rates, props.recommendedCount]
+  );
+  const inMore = plan ? plan.more.some((g) => g.rates.some((r) => rateValue(r) === current)) : false;
+  const radio = (v, describedBy) => /* @__PURE__ */ jsx(
     "input",
     {
       type: "radio",
@@ -195,36 +772,66 @@ function DeliveryOptions(props) {
       value: v,
       required,
       className: cx.radio,
+      ...{},
       ...value !== void 0 ? { checked: value === v, onChange: () => onValueChange?.(v) } : { defaultChecked: v === defaultValue, ...onValueChange ? { onChange: () => onValueChange(v) } : {} },
       ...testId ? { "data-testid": testId } : {}
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-delivery": true, "aria-busy": loading || void 0, children: [
-    partial ? /* @__PURE__ */ jsx("p", { role: "status", className: cx.partial, "data-sf-delivery-partial": true, children: m.partial }) : null,
+  const tagText = (t) => t === "cheapest" ? m.cheapest : t === "fastest" ? m.fastest : m.bestValue;
+  const rateRow = (rate, opts) => {
+    const carrier = rateCarrier(rate);
+    const service = rateService(rate);
+    const eta = rateEta(rate, m);
+    return /* @__PURE__ */ jsxs("label", { className: cx.option, "data-sf-delivery-option": true, "data-loading": loading || void 0, "data-grouped": opts.grouped || void 0, children: [
+      radio(rateValue(rate)),
+      marks && !opts.grouped ? (
+        // Fixed slot: logos of different widths do not push the text column out of line.
+        /* @__PURE__ */ jsx("span", { "data-sf-delivery-mark": true, "aria-hidden": "true", children: /* @__PURE__ */ jsx(BrandMark, { brand: rate.carrier ?? rate.provider ?? rate.title, size: 28, ...cx.mark ? { className: cx.mark } : {} }) })
+      ) : null,
+      /* @__PURE__ */ jsxs("span", { className: cx.body, "data-sf-delivery-body": true, children: [
+        /* @__PURE__ */ jsx("span", { className: cx.title, "data-sf-delivery-title": true, children: carrier ? opts.grouped ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { style: SR_ONLY, children: [
+            carrier,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: cx.carrier, "data-sf-delivery-carrier": true, "data-sf-delivery-service-only": true, children: service })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: cx.carrier, "data-sf-delivery-carrier": true, children: carrier }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: cx.service, "data-sf-delivery-service": true, children: service })
+        ] }) : /* @__PURE__ */ jsx("span", { className: cx.carrier, "data-sf-delivery-carrier": true, children: service }) }),
+        eta ? /* @__PURE__ */ jsx("span", { className: cx.eta, "data-sf-delivery-eta": true, children: eta }) : null,
+        opts.tags.length ? /* @__PURE__ */ jsx("span", { className: cx.badges, "data-sf-delivery-badges": true, children: opts.tags.map((b) => /* @__PURE__ */ jsx("span", { className: cx.badge, "data-sf-delivery-badge": b, children: tagText(b) }, b)) }) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: cx.price, "data-sf-delivery-price": true, children: amount(rate.cost) })
+    ] }, rate.id);
+  };
+  const errorText = error ? typeof error === "string" ? error : m.error : null;
+  return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-delivery": true, "data-layout": layout, "aria-busy": loading || void 0, children: [
+    partial && !errorText ? /* @__PURE__ */ jsx("p", { role: "status", className: cx.partial, "data-sf-delivery-partial": true, children: m.partial }) : null,
     requoted ? /* @__PURE__ */ jsx("p", { role: "status", className: cx.partial, "data-sf-delivery-requoted": true, children: m.requoted }) : null,
     loading ? /* @__PURE__ */ jsx("span", { style: SR_ONLY, role: "status", "data-sf-delivery-loading": true, children: m.loading }) : null,
+    errorText && rates.length === 0 && !loading ? /* @__PURE__ */ jsxs("div", { role: "alert", className: cx.error, "data-sf-delivery-error": true, children: [
+      /* @__PURE__ */ jsx("p", { children: errorText }),
+      onRetry ? /* @__PURE__ */ jsx("button", { type: "button", className: cx.retry, onClick: onRetry, "data-sf-delivery-retry": true, children: m.retry }) : null
+    ] }) : null,
     children,
     loading && rates.length === 0 ? [0, 1, 2].map((i) => /* @__PURE__ */ jsx("div", { className: cx.skeleton, "data-sf-delivery-skeleton": true, "aria-hidden": "true" }, i)) : null,
-    rates.map((rate) => {
-      const carrier = rateCarrier(rate);
-      const service = rateService(rate);
-      const eta = rateEta(rate, m);
-      const own = badges.get(rate.id) ?? [];
-      return /* @__PURE__ */ jsxs("label", { className: cx.option, "data-sf-delivery-option": true, "data-loading": loading || void 0, children: [
-        radio(rateValue(rate)),
-        marks ? /* @__PURE__ */ jsx(BrandMark, { brand: rate.carrier ?? rate.provider ?? rate.title, size: 28, ...cx.mark ? { className: cx.mark } : {} }) : null,
-        /* @__PURE__ */ jsxs("span", { className: cx.body, "data-sf-delivery-body": true, children: [
-          /* @__PURE__ */ jsx("span", { className: cx.title, "data-sf-delivery-title": true, children: carrier ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: cx.carrier, "data-sf-delivery-carrier": true, children: carrier }),
-            " ",
-            /* @__PURE__ */ jsx("span", { className: cx.service, "data-sf-delivery-service": true, children: service })
-          ] }) : /* @__PURE__ */ jsx("span", { className: cx.carrier, "data-sf-delivery-carrier": true, children: service }) }),
-          eta ? /* @__PURE__ */ jsx("span", { className: cx.eta, "data-sf-delivery-eta": true, children: eta }) : null,
-          own.length ? /* @__PURE__ */ jsx("span", { className: cx.badges, "data-sf-delivery-badges": true, children: own.map((b) => /* @__PURE__ */ jsx("span", { className: cx.badge, "data-sf-delivery-badge": b, children: b === "cheapest" ? m.cheapest : m.fastest }, b)) }) : null
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: cx.price, "data-sf-delivery-price": true, children: amount(rate.cost) })
-      ] }, rate.id);
-    }),
+    plan ? plan.recommended.map(({ rate, tags }) => rateRow(rate, { tags: showBadges ? tags : [] })) : rates.map((rate) => rateRow(rate, { tags: badges.get(rate.id) ?? [] })),
+    plan && plan.moreCount > 0 ? /* @__PURE__ */ jsxs("details", { className: cx.more, "data-sf-delivery-more": true, ...inMore ? { open: true } : {}, children: [
+      /* @__PURE__ */ jsx("summary", { className: cx.moreSummary, "data-sf-delivery-more-summary": true, children: m.moreOptions.replace("{n}", String(plan.moreCount)) }),
+      /* @__PURE__ */ jsx("div", { "data-sf-delivery-groups": true, children: plan.more.map((g) => {
+        const carrierName = g.carrier ? rateCarrier({ carrier: g.carrier }) : null;
+        const id = `${name}-group-${g.key || "other"}`;
+        return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": id, className: cx.group, "data-sf-delivery-group": g.key || "other", children: [
+          /* @__PURE__ */ jsxs("p", { id, className: cx.groupTitle, "data-sf-delivery-group-title": true, children: [
+            marks && g.carrier ? /* @__PURE__ */ jsx(BrandMark, { brand: g.carrier, size: 22 }) : null,
+            /* @__PURE__ */ jsx("span", { children: carrierName ?? m.otherCarriers })
+          ] }),
+          g.rates.map((rate) => rateRow(rate, { tags: [], grouped: Boolean(carrierName) }))
+        ] }, g.key || "other");
+      }) })
+    ] }) : null,
     pickup.map((b) => /* @__PURE__ */ jsxs("label", { className: cx.option, "data-sf-delivery-option": true, "data-sf-delivery-pickup": true, children: [
       radio(pickupValue(b)),
       marks ? /* @__PURE__ */ jsx(PickupGlyph, { size: 28 }) : null,
@@ -238,6 +845,6 @@ function DeliveryOptions(props) {
   ] });
 }
 
-export { DeliveryOptions, deliveryMessages, isQuoteChange, matchRate, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService };
+export { AddressFields, CheckoutField, ContactFields, DeliveryOptions, ErrorSummary, OrderSummary, OrderSummaryDisclosure, addressFieldsMessages, dedupeRates, deliveryMessages, fieldMessages, isQuoteChange, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates, useFieldErrors, validationMessage };
 //# sourceMappingURL=checkout.js.map
 //# sourceMappingURL=checkout.js.map