@asteby/storefront-react 0.26.1 → 0.28.0

package/dist/checkout.cjs

@@ -243,7 +243,8 @@ var ES2 = {
   phoneHint: "Solo para la paqueter\xEDa, por si necesita contactarte.",
   lookupFilled: "Completamos estado y ciudad con tu c\xF3digo postal.",
   provinceLocked: "Definido por tu c\xF3digo postal",
-  changePostalCode: "Cambiar c\xF3digo postal"
+  changePostalCode: "Cambiar c\xF3digo postal",
+  resolvedPlace: "Entrega en"
 };
 var EN2 = {
   email: "Email",
@@ -265,7 +266,8 @@ var EN2 = {
   phoneHint: "Only for the carrier, in case they need to reach you.",
   lookupFilled: "We filled in state and city from your postal code.",
   provinceLocked: "Set by your postal code",
-  changePostalCode: "Change postal code"
+  changePostalCode: "Change postal code",
+  resolvedPlace: "Delivering to"
 };
 function addressFieldsMessages(locale, overrides) {
   const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
@@ -324,8 +326,11 @@ var ADDRESS_FILL_EVENT_FLAG = "sfSynthetic";
 function isAddressFillEvent(event) {
   return event[ADDRESS_FILL_EVENT_FLAG] === true;
 }
+var SR_ONLY = { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" };
+var sameText = (a, b) => fold(a) === fold(b);
+var fold = (v) => v.normalize("NFD").replace(/[\u0300-\u036f]/g, "").trim().toLowerCase();
 function AddressFields(props) {
-  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, lockProvinceOnFill = true, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
+  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, lockProvinceOnFill = true, hideResolvedFields = true, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
   const showNeighborhood = props.neighborhood ?? true;
   const showReference = props.reference ?? true;
   const m = addressFieldsMessages(locale, messages);
@@ -336,6 +341,9 @@ function AddressFields(props) {
   const [filled, setFilled] = react.useState(false);
   const [provinceLocked, setProvinceLocked] = react.useState(false);
   const [coloniaSelect, setColoniaSelect] = react.useState(false);
+  const [resolved, setResolved] = react.useState(null);
+  const resolvedRef = react.useRef(false);
+  const [defaultsStale, setDefaultsStale] = react.useState(false);
   const coloniaSelectRef = react.useRef(false);
   const coloniaCarry = react.useRef(null);
   const lastZip = react.useRef(null);
@@ -370,6 +378,7 @@ function AddressFields(props) {
     if (!form) return;
     const locked = form.querySelector('[data-sf-locked="1"]');
     const touched = [];
+    if (resolvedRef.current) setDefaultsStale(true);
     if (locked) {
       unlockField(locked);
       touched.push(locked);
@@ -387,9 +396,32 @@ function AddressFields(props) {
       el.dispatchEvent(event);
     }
     lastZip.current = null;
+    resolvedRef.current = false;
+    setResolved(null);
     setProvinceLocked(false);
     setFilled(false);
   };
+  const resolveHidden = (info, form) => {
+    if (!form || !info.province || !info.city) return null;
+    if ((info.cities?.length ?? 0) > 1) return null;
+    let province = info.province.trim();
+    let provinceCode = null;
+    if (provinces && provinces.length) {
+      const hit = provinces.find((p) => sameText(p.name, province) || !!p.code && sameText(p.code, province));
+      if (!hit) return null;
+      province = hit.name;
+      provinceCode = hit.code ?? null;
+    }
+    const city = info.city.trim();
+    if (!province || !city) return null;
+    const theirs = (name, value) => {
+      const el = form.elements.namedItem(name);
+      if (!el || "length" in el && !(el instanceof HTMLSelectElement)) return false;
+      return !!el.value && el.dataset.sfAutofilled !== "1" && !sameText(el.value, value);
+    };
+    if (theirs(n("province"), province) || theirs(n("city"), city)) return null;
+    return { province, provinceCode, city, place: info.municipality?.trim() || city };
+  };
   const runLookup = (zip) => {
     const lookup = lookupRef.current;
     if (!lookup || !zip || zip === lastZip.current) return;
@@ -420,8 +452,14 @@ function AddressFields(props) {
             }
             return true;
           };
-          const a = fill2(n("province"), info.province, lockProvinceOnFill);
-          const b = fill2(n("city"), info.city);
+          const resolution = hideResolvedFields ? resolveHidden(info, form) : null;
+          if (resolution) {
+            resolvedRef.current = true;
+            setDefaultsStale(true);
+            setResolved(resolution);
+          }
+          const a = resolution ? false : fill2(n("province"), info.province, lockProvinceOnFill);
+          const b = resolution ? false : fill2(n("city"), info.city);
           const only = info.neighborhoods?.length === 1 ? info.neighborhoods[0] : null;
           const c = showNeighborhood ? fill2(n("neighborhood"), only) : false;
           setColonias(info.neighborhoods ?? []);
@@ -439,7 +477,7 @@ function AddressFields(props) {
           }
           coloniaSelectRef.current = wantSelect;
           setColoniaSelect(wantSelect);
-          setFilled(a || b || c || carried);
+          setFilled(!resolution && (a || b || c || carried));
         });
       },
       () => {
@@ -465,7 +503,20 @@ function AddressFields(props) {
     const zip = defaults?.zip;
     if (zip) runLookup(zip);
   }, []);
-  const hasLock = (root) => !!root?.closest("form")?.querySelector('[data-sf-locked="1"]');
+  const firstRender = react.useRef(true);
+  react.useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    const form = zipRef.current?.closest("form");
+    const el = (resolved ? form?.querySelector('input[type="hidden"][data-sf-resolved-field="city"]') : null) ?? zipRef.current?.querySelector("input");
+    if (!el) return;
+    const event = new Event("input", { bubbles: true });
+    Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
+    el.dispatchEvent(event);
+  }, [resolved]);
+  const hasLock = (root) => resolvedRef.current || !!root?.closest("form")?.querySelector('[data-sf-locked="1"]');
   const changeZip = () => {
     releaseLookup();
     const zipEl = zipRef.current?.querySelector("input");
@@ -482,35 +533,61 @@ function AddressFields(props) {
     /* @__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";
+  const showResolved = !!resolved && !errors[n("province")] && !errors[n("city")];
+  const startOf = (key) => resolved ? resolved[key] : defaultsStale ? "" : defaults?.[key] ?? "";
   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(
-      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 (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"), hint: provinceHint, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: zipRef, className: join(cx.half), "data-sf-zip": true, children: [
+      /* @__PURE__ */ jsxRuntime.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 (v !== lastZip.current && hasLock(zipRef.current)) releaseLookup();
+            if (postalCode?.maxLength && v.length === postalCode.maxLength) runLookup(v);
+          },
+          onBlur: (e) => runLookup(e.currentTarget.value.trim())
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sf-resolved": showResolved ? "" : void 0, className: showResolved || filled ? join(cx.hint) : void 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "aria-live": "polite", "data-sf-zip-status": true, style: showResolved || filled ? showResolved ? { display: "inline", margin: 0 } : void 0 : SR_ONLY, children: showResolved && resolved ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: SR_ONLY, children: [
+            m.resolvedPlace,
+            " "
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-sf-resolved-place": true, children: [
+            resolved.place,
+            ", ",
+            resolved.province
+          ] })
+        ] }) : filled ? m.lookupFilled : "" }),
+        showResolved ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " \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 })
+        ] }) : null
+      ] })
+    ] }),
+    showResolved && resolved ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: n("province"), value: resolved.province, "data-sf-resolved-field": "province" }),
+      resolved.provinceCode ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: n("province_code"), value: resolved.provinceCode, "data-sf-resolved-field": "province_code" }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: n("city"), value: resolved.city, "data-sf-resolved-field": "city" })
+    ] }) : null,
+    showResolved ? null : provinces && provinces.length ? /* @__PURE__ */ jsxRuntime.jsxs(CheckoutField, { ...common, as: "select", name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: startOf("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"), 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") }),
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(CheckoutField, { ...common, name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: startOf("province"), error: errors[n("province")] ?? null, classNames: field(cx, "half"), hint: provinceHint }),
+    showResolved ? null : /* @__PURE__ */ jsxRuntime.jsx(CheckoutField, { ...common, name: n("city"), label: m.city, autoComplete: "address-level2", defaultValue: startOf("city"), error: errors[n("city")] ?? null, classNames: field(cx, "half") }),
     showNeighborhood && coloniaSelect ? /* @__PURE__ */ jsxRuntime.jsxs(
       CheckoutField,
       {
@@ -543,7 +620,6 @@ function AddressFields(props) {
       }
     ) : null,
     colonias.length && !coloniaSelect ? /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: colonias.map((c) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: c }, c)) }) : null,
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -1310,7 +1386,7 @@ function matchRate(previous, rates) {
   }
   return rates.find((r) => sameCarrier(r) && norm3(r.title) === norm3(previous.title)) ?? null;
 }
-var SR_ONLY = { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" };
+var SR_ONLY2 = { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" };
 var useHydrated = () => react.useSyncExternalStore(
   () => () => {
   },
@@ -1397,7 +1473,7 @@ function DeliveryOptions(props) {
       ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.body, "data-sf-delivery-body": true, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.title, "data-sf-delivery-title": true, children: carrier ? opts.grouped ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: SR_ONLY, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: SR_ONLY2, children: [
             carrier,
             " "
           ] }),
@@ -1418,8 +1494,8 @@ function DeliveryOptions(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.root, "data-sf-delivery": true, "data-layout": layout, "aria-busy": loading || void 0, children: [
     partial && !errorText ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: cx.partial, "data-sf-delivery-partial": true, children: m.partial }) : null,
     requoted ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: cx.partial, "data-sf-delivery-requoted": true, children: m.requoted }) : null,
-    loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: SR_ONLY, role: "status", "data-sf-delivery-loading": true, children: m.loading }) : null,
-    props.announceReady && !loading && rates.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: SR_ONLY, role: "status", "data-sf-delivery-ready": true, children: freeRate ? m.freeShipping : m.ratesReady.replace("{n}", String(rates.length)) }) : null,
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: SR_ONLY2, role: "status", "data-sf-delivery-loading": true, children: m.loading }) : null,
+    props.announceReady && !loading && rates.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: SR_ONLY2, role: "status", "data-sf-delivery-ready": true, children: freeRate ? m.freeShipping : m.ratesReady.replace("{n}", String(rates.length)) }) : null,
     errorText && rates.length === 0 && !loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cx.error, "data-sf-delivery-error": true, children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: errorText }),
       onRetry ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx.retry, onClick: onRetry, "data-sf-delivery-retry": true, children: m.retry }) : null