@asteby/storefront-react 0.20.0 → 0.22.0

package/dist/checkout.cjs

@@ -241,7 +241,9 @@ var ES2 = {
   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."
+  lookupFilled: "Completamos estado y ciudad con tu c\xF3digo postal.",
+  provinceLocked: "Definido por tu c\xF3digo postal",
+  changePostalCode: "Cambiar c\xF3digo postal"
 };
 var EN2 = {
   email: "Email",
@@ -261,7 +263,9 @@ var EN2 = {
   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."
+  lookupFilled: "We filled in state and city from your postal code.",
+  provinceLocked: "Set by your postal code",
+  changePostalCode: "Change postal code"
 };
 function addressFieldsMessages(locale, overrides) {
   const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
@@ -287,8 +291,10 @@ function lockField(el) {
   if (el instanceof HTMLSelectElement) {
     const name = el.getAttribute("name");
     if (name) {
+      el.dataset.sfName = name;
       const hidden = document.createElement("input");
       hidden.type = "hidden";
+      hidden.dataset.sfLockMirror = "1";
       hidden.name = name;
       hidden.value = el.value;
       el.insertAdjacentElement("afterend", hidden);
@@ -299,12 +305,27 @@ function lockField(el) {
     el.readOnly = true;
   }
 }
+function unlockField(el) {
+  if (el.dataset.sfLocked !== "1") return;
+  delete el.dataset.sfLocked;
+  el.removeAttribute("aria-readonly");
+  el.removeAttribute("title");
+  if (el instanceof HTMLSelectElement) {
+    const mirror = el.nextElementSibling;
+    if (mirror instanceof HTMLInputElement && mirror.dataset.sfLockMirror === "1") mirror.remove();
+    if (el.dataset.sfName) el.setAttribute("name", el.dataset.sfName);
+    delete el.dataset.sfName;
+    el.disabled = false;
+  } else {
+    el.readOnly = false;
+  }
+}
 var ADDRESS_FILL_EVENT_FLAG = "sfSynthetic";
 function isAddressFillEvent(event) {
   return event[ADDRESS_FILL_EVENT_FLAG] === true;
 }
 function AddressFields(props) {
-  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, lockProvinceOnFill, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
+  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, lockProvinceOnFill = true, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
   const showNeighborhood = props.neighborhood ?? true;
   const showReference = props.reference ?? true;
   const m = addressFieldsMessages(locale, messages);
@@ -313,6 +334,7 @@ function AddressFields(props) {
   const listId = react.useId();
   const [colonias, setColonias] = react.useState([]);
   const [filled, setFilled] = react.useState(false);
+  const [provinceLocked, setProvinceLocked] = react.useState(false);
   const [coloniaSelect, setColoniaSelect] = react.useState(false);
   const coloniaSelectRef = react.useRef(false);
   const coloniaCarry = react.useRef(null);
@@ -343,6 +365,31 @@ function AddressFields(props) {
       form.removeEventListener("change", mark, true);
     };
   }, []);
+  const releaseLookup = () => {
+    const form = zipRef.current?.closest("form");
+    if (!form) return;
+    const locked = form.querySelector('[data-sf-locked="1"]');
+    const touched = [];
+    if (locked) {
+      unlockField(locked);
+      touched.push(locked);
+    }
+    for (const key of ["province", "city", "neighborhood"]) {
+      const el = form.elements.namedItem(n(key));
+      if (el && !("length" in el && !(el instanceof HTMLSelectElement)) && !touched.includes(el)) touched.push(el);
+    }
+    for (const el of touched) {
+      if (el.dataset.sfAutofilled !== "1") continue;
+      el.value = "";
+      delete el.dataset.sfAutofilled;
+      const event = new Event("input", { bubbles: true });
+      Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
+      el.dispatchEvent(event);
+    }
+    lastZip.current = null;
+    setProvinceLocked(false);
+    setFilled(false);
+  };
   const runLookup = (zip) => {
     const lookup = lookupRef.current;
     if (!lookup || !zip || zip === lastZip.current) return;
@@ -366,7 +413,11 @@ function AddressFields(props) {
             const event = new Event("input", { bubbles: true });
             Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
             el2.dispatchEvent(event);
-            if (lock) lockField(el2);
+            if (lock) {
+              lockField(el2);
+              el2.title = m.provinceLocked;
+              setProvinceLocked(true);
+            }
             return true;
           };
           const a = fill2(n("province"), info.province, lockProvinceOnFill);
@@ -414,6 +465,22 @@ function AddressFields(props) {
     const zip = defaults?.zip;
     if (zip) runLookup(zip);
   }, []);
+  const hasLock = (root) => !!root?.closest("form")?.querySelector('[data-sf-locked="1"]');
+  const changeZip = () => {
+    releaseLookup();
+    const zipEl = zipRef.current?.querySelector("input");
+    zipEl?.focus();
+    zipEl?.select();
+  };
+  const provinceHint = provinceLocked ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-sf-province-locked": "", title: m.provinceLocked, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { display: "inline-block", verticalAlign: "-1px", marginRight: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+    ] }),
+    m.provinceLocked,
+    " \xB7 ",
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-sf-change-zip": "", onClick: changeZip, style: { background: "none", border: 0, padding: 0, font: "inherit", color: "inherit", textDecoration: "underline", cursor: "pointer" }, children: m.changePostalCode })
+  ] }) : void 0;
   const numericZip = postalCode?.inputMode === "numeric";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: zipRef, className: join(cx.half), "data-sf-zip": true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -433,15 +500,16 @@ function AddressFields(props) {
         classNames: { ...cx, root: cx.root },
         onInput: (e) => {
           const v = e.currentTarget.value.trim();
+          if (v !== lastZip.current && hasLock(zipRef.current)) releaseLookup();
           if (postalCode?.maxLength && v.length === postalCode.maxLength) runLookup(v);
         },
         onBlur: (e) => runLookup(e.currentTarget.value.trim())
       }
     ) }),
-    provinces && provinces.length ? /* @__PURE__ */ jsxRuntime.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: [
+    provinces && provinces.length ? /* @__PURE__ */ jsxRuntime.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"), hint: provinceHint, children: [
       /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: m.provincePlaceholder }),
       provinces.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.name, children: p.name }, p.code ?? p.name))
-    ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CheckoutField, { ...common, name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half"), hint: provinceHint }),
     /* @__PURE__ */ jsxRuntime.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 && coloniaSelect ? /* @__PURE__ */ jsxRuntime.jsxs(
       CheckoutField,
@@ -493,6 +561,129 @@ function useResolvedLocale(locale) {
   const sf = useOptionalStorefront();
   return locale ?? sf?.locale ?? "es-MX";
 }
+var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
+var defaultImageLoader = (src, width, height) => {
+  try {
+    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
+    const url = new URL(src, "http://relative.invalid");
+    url.searchParams.set("width", String(width));
+    if (height) url.searchParams.set("height", String(height));
+    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
+  } catch {
+    return src;
+  }
+};
+function parseRatio(ratio) {
+  if (!ratio) return null;
+  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
+  return w && h ? w / h : null;
+}
+function Image({
+  data,
+  sizes = "100vw",
+  widths = DEFAULT_IMAGE_WIDTHS,
+  loader = defaultImageLoader,
+  priority = false,
+  aspectRatio,
+  alt,
+  loading,
+  decoding,
+  ...rest
+}) {
+  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
+  let candidates = [...widths].sort((a, b) => a - b);
+  if (data.width) {
+    const capped = candidates.filter((w) => w <= data.width);
+    candidates = capped.length ? capped : [data.width];
+  }
+  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
+  const width = data.width ?? candidates[candidates.length - 1];
+  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: data.url,
+      alt: alt ?? data.alt ?? "",
+      ...srcSet ? { srcSet, sizes } : {},
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      loading: loading ?? (priority ? "eager" : "lazy"),
+      decoding: decoding ?? (priority ? "auto" : "async"),
+      ...priority ? { fetchPriority: "high" } : {},
+      ...rest
+    }
+  );
+}
+function productInitials(name) {
+  const words = (name ?? "").normalize("NFKC").split(/[\s\-_/.,()]+/).map((w) => Array.from(w).find((c) => /\p{L}|\p{N}/u.test(c)) ?? "").filter(Boolean);
+  if (words.length === 0) return "";
+  return (words.length > 1 ? words[0] + words[1] : words[0]).toLocaleUpperCase();
+}
+function ProductThumb({
+  image,
+  name,
+  size = 56,
+  ratio = "1/1",
+  fit = "contain",
+  quantity,
+  decorative = false,
+  zoom = true,
+  priority = false,
+  sizes,
+  loader,
+  className,
+  classNames: cx = {}
+}) {
+  const url = image?.url || null;
+  const [state, setState] = react.useState(url ? "loading" : "fallback");
+  const box = react.useRef(null);
+  react.useEffect(() => {
+    const img = box.current?.querySelector("img");
+    setState(!url ? "fallback" : img?.complete ? img.naturalWidth > 0 ? "loaded" : "fallback" : "loading");
+  }, [url]);
+  const label = name?.trim() || "";
+  const initials = productInitials(label);
+  const showBadge = typeof quantity === "number" && quantity > 1;
+  const a11y = state === "fallback" && !decorative && label ? { role: "img", "aria-label": label } : { "aria-hidden": decorative || state === "fallback" ? true : void 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: box,
+      className: [cx.root, className].filter(Boolean).join(" ") || void 0,
+      style: { ["--sf-preview-size"]: `${size}px`, ["--sf-preview-ratio"]: ratio.replace(":", "/") },
+      "data-sf-thumb": "",
+      "data-state": state,
+      "data-fit": fit,
+      "data-zoom": zoom || void 0,
+      ...a11y,
+      children: [
+        url && state !== "fallback" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Image,
+          {
+            data: { url, alt: image?.alt ?? null, ...image?.width ? { width: image.width } : {}, ...image?.height ? { height: image.height } : {} },
+            alt: decorative ? "" : image?.alt ?? label,
+            aspectRatio: ratio,
+            sizes: sizes ?? `${size * 2}px`,
+            widths: [Math.round(size), Math.round(size * 2), Math.round(size * 3)],
+            ...loader !== void 0 ? { loader } : {},
+            priority,
+            className: cx.img,
+            onLoad: () => setState("loaded"),
+            onError: () => setState("fallback")
+          }
+        ) : null,
+        state === "fallback" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.fallback, "data-sf-thumb-fallback": "", "aria-hidden": "true", children: initials ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-sf-thumb-initial": "", children: initials }) : /* @__PURE__ */ jsxRuntime.jsx(PackageGlyph, {}) }) : null,
+        showBadge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.badge, "data-sf-thumb-qty": "", "aria-hidden": "true", children: quantity }) : null
+      ]
+    }
+  );
+}
+function PackageGlyph() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "45%", height: "45%", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 8 12 3 3 8v8l9 5 9-5V8Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 8 9 5 9-5M12 13v8" })
+  ] });
+}
 var ES3 = {
   title: "Tu pedido",
   subtotal: "Subtotal",
@@ -527,13 +718,18 @@ function orderSummaryMessages(locale, overrides) {
   const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN3 : ES3;
   return overrides ? { ...base, ...overrides } : base;
 }
+function defaultLineMedia(l) {
+  const img = l.merchandise.image ?? l.merchandise.product.featured_image ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ProductThumb, { image: img, name: l.merchandise.product.title, size: 56, decorative: true, zoom: false });
+}
 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 { lines, cost, updating = false, media = true, 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) : storefront.formatMoney(v, locale);
+  const renderLineMedia = props.renderLineMedia ?? (media ? defaultLineMedia : void 0);
   const H = headingLevel === 3 ? "h3" : "h2";
   const discounts = cost.discounts?.filter((d) => positive(d.amount)) ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.root, "data-sf-summary": true, children: [