@asteby/storefront-react 0.21.0 → 0.22.0

package/dist/checkout.d.cts

@@ -14,6 +14,10 @@ type AddressFieldsMessages = Record<AddressFieldKey | ContactFieldKey, string> &
     emailHint: string;
     phoneHint: string;
     lookupFilled: string;
+    /** Tooltip and note of a state the postal code defined (locked). */
+    provinceLocked: string;
+    /** Discreet action that releases the locked state so the buyer can fix the postal code. */
+    changePostalCode: string;
 };
 declare function addressFieldsMessages(locale?: string | null, overrides?: Partial<AddressFieldsMessages> | null): AddressFieldsMessages;
 type FieldLayoutClassNames = CheckoutFieldClassNames & {
@@ -88,8 +92,11 @@ type AddressFieldsProps = Common & {
     /**
      * Once `lookupPostalCode` fills the state field (never over what the buyer already typed), lock it: a plain
      * `<input>` turns read-only; a `<select>` (from `provinces`) turns disabled with a hidden field that keeps
-     * submitting its value. The buyer corrects the state by correcting the postal code. Default false: the filled
-     * state stays as editable as any other field. Marked with `data-sf-locked="1"` for the shop's own styling.
+     * submitting its value. The state is the postal code's: the field shows a lock, the tooltip `provinceLocked` and a
+     * discreet `changePostalCode` action; editing the postal code releases the lock and clears what the lookup filled
+     * (also when the new code resolves nothing), so a stale state is never left behind. Default TRUE (the server
+     * validates the pair again; set `false` to keep the filled state as editable as any field). Marked with
+     * `data-sf-locked="1"` for the shop's own styling.
      */
     lockProvinceOnFill?: boolean;
     /** Rendered after the fields (e.g. "save this address"). */

package/dist/checkout.d.ts

@@ -14,6 +14,10 @@ type AddressFieldsMessages = Record<AddressFieldKey | ContactFieldKey, string> &
     emailHint: string;
     phoneHint: string;
     lookupFilled: string;
+    /** Tooltip and note of a state the postal code defined (locked). */
+    provinceLocked: string;
+    /** Discreet action that releases the locked state so the buyer can fix the postal code. */
+    changePostalCode: string;
 };
 declare function addressFieldsMessages(locale?: string | null, overrides?: Partial<AddressFieldsMessages> | null): AddressFieldsMessages;
 type FieldLayoutClassNames = CheckoutFieldClassNames & {
@@ -88,8 +92,11 @@ type AddressFieldsProps = Common & {
     /**
      * Once `lookupPostalCode` fills the state field (never over what the buyer already typed), lock it: a plain
      * `<input>` turns read-only; a `<select>` (from `provinces`) turns disabled with a hidden field that keeps
-     * submitting its value. The buyer corrects the state by correcting the postal code. Default false: the filled
-     * state stays as editable as any other field. Marked with `data-sf-locked="1"` for the shop's own styling.
+     * submitting its value. The state is the postal code's: the field shows a lock, the tooltip `provinceLocked` and a
+     * discreet `changePostalCode` action; editing the postal code releases the lock and clears what the lookup filled
+     * (also when the new code resolves nothing), so a stale state is never left behind. Default TRUE (the server
+     * validates the pair again; set `false` to keep the filled state as editable as any field). Marked with
+     * `data-sf-locked="1"` for the shop's own styling.
      */
     lockProvinceOnFill?: boolean;
     /** Rendered after the fields (e.g. "save this address"). */

package/dist/checkout.js

@@ -28,7 +28,9 @@ var ES = {
   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 EN = {
   email: "Email",
@@ -48,7 +50,9 @@ var EN = {
   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") ? EN : ES;
@@ -74,8 +78,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);
@@ -86,12 +92,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);
@@ -100,6 +121,7 @@ function AddressFields(props) {
   const listId = useId();
   const [colonias, setColonias] = useState([]);
   const [filled, setFilled] = useState(false);
+  const [provinceLocked, setProvinceLocked] = useState(false);
   const [coloniaSelect, setColoniaSelect] = useState(false);
   const coloniaSelectRef = useRef(false);
   const coloniaCarry = useRef(null);
@@ -130,6 +152,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;
@@ -153,7 +200,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);
@@ -201,6 +252,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__ */ jsxs("span", { "data-sf-province-locked": "", title: m.provinceLocked, children: [
+    /* @__PURE__ */ 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__ */ jsx("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+    ] }),
+    m.provinceLocked,
+    " \xB7 ",
+    /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref: zipRef, className: join(cx.half), "data-sf-zip": true, children: /* @__PURE__ */ jsx(
@@ -220,15 +287,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__ */ 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__ */ 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__ */ 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("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half"), hint: provinceHint }),
     /* @__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 && coloniaSelect ? /* @__PURE__ */ jsxs(
       CheckoutField,