@asteby/storefront-react 0.17.0 → 0.18.0

package/dist/checkout.d.cts

@@ -8,6 +8,7 @@ type AddressFieldKey = 'zip' | 'province' | 'city' | 'neighborhood' | 'address1'
 type ContactFieldKey = 'email' | 'phone' | 'first_name' | 'last_name';
 type AddressFieldsMessages = Record<AddressFieldKey | ContactFieldKey, string> & {
     provincePlaceholder: string;
+    neighborhoodPlaceholder: string;
     address1Hint: string;
     referenceHint: string;
     emailHint: string;
@@ -74,6 +75,12 @@ type AddressFieldsProps = Common & {
      * Never overwrites what the buyer typed.
      */
     lookupPostalCode?: (zip: string) => Promise<PostalCodeInfo | null>;
+    /**
+     * How to offer the colonias when the postal code has SEVERAL: `'datalist'` (default, suggestions on a text field) or
+     * `'select'` (a real list; the field becomes a `<select>` of those colonias, unless the buyer already typed one that
+     * is not in the list, which is kept as text). With exactly one colonia it is filled in either mode.
+     */
+    neighborhoodList?: 'datalist' | 'select';
     /** Show the colonia field: `true` (default, optional), `'required'`, or `false`. */
     neighborhood?: boolean | 'required';
     /** Show the delivery references field (default true, optional). */

package/dist/checkout.d.ts

@@ -8,6 +8,7 @@ type AddressFieldKey = 'zip' | 'province' | 'city' | 'neighborhood' | 'address1'
 type ContactFieldKey = 'email' | 'phone' | 'first_name' | 'last_name';
 type AddressFieldsMessages = Record<AddressFieldKey | ContactFieldKey, string> & {
     provincePlaceholder: string;
+    neighborhoodPlaceholder: string;
     address1Hint: string;
     referenceHint: string;
     emailHint: string;
@@ -74,6 +75,12 @@ type AddressFieldsProps = Common & {
      * Never overwrites what the buyer typed.
      */
     lookupPostalCode?: (zip: string) => Promise<PostalCodeInfo | null>;
+    /**
+     * How to offer the colonias when the postal code has SEVERAL: `'datalist'` (default, suggestions on a text field) or
+     * `'select'` (a real list; the field becomes a `<select>` of those colonias, unless the buyer already typed one that
+     * is not in the list, which is kept as text). With exactly one colonia it is filled in either mode.
+     */
+    neighborhoodList?: 'datalist' | 'select';
     /** Show the colonia field: `true` (default, optional), `'required'`, or `false`. */
     neighborhood?: boolean | 'required';
     /** Show the delivery references field (default true, optional). */

package/dist/checkout.js

@@ -21,6 +21,7 @@ var ES = {
   address2: "N\xFAmero interior o departamento",
   reference: "Referencias para la entrega",
   provincePlaceholder: "Elige tu estado",
+  neighborhoodPlaceholder: "Elige tu colonia",
   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.",
@@ -40,6 +41,7 @@ var EN = {
   address2: "Apartment, suite",
   reference: "Delivery notes",
   provincePlaceholder: "Choose your state",
+  neighborhoodPlaceholder: "Choose your neighborhood",
   address1Hint: "For example: 1234 Main St",
   referenceHint: "Cross streets, building color\u2026",
   emailHint: "We send the confirmation and tracking here.",
@@ -96,6 +98,9 @@ function AddressFields(props) {
   const listId = useId();
   const [colonias, setColonias] = useState([]);
   const [filled, setFilled] = useState(false);
+  const [coloniaSelect, setColoniaSelect] = useState(false);
+  const coloniaSelectRef = useRef(false);
+  const coloniaCarry = useRef(null);
   const lastZip = useRef(null);
   const zipRef = useRef(null);
   const lookupRef = useRef(lookupPostalCode);
@@ -135,18 +140,18 @@ function AddressFields(props) {
         enqueue(() => {
           if (lastZip.current !== zip) return;
           const fill2 = (name, value, lock) => {
-            const el = form?.elements.namedItem(name);
-            if (!el || !value || "length" in el && !(el instanceof HTMLSelectElement)) return false;
-            if (el.dataset.sfLocked === "1") return false;
-            if (el.dataset.sfUserEdited === "1" || el.ownerDocument.activeElement === el && el.value) 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";
+            const el2 = form?.elements.namedItem(name);
+            if (!el2 || !value || "length" in el2 && !(el2 instanceof HTMLSelectElement)) return false;
+            if (el2.dataset.sfLocked === "1") return false;
+            if (el2.dataset.sfUserEdited === "1" || el2.ownerDocument.activeElement === el2 && el2.value) return false;
+            if (el2.value && el2.dataset.sfAutofilled !== "1") return false;
+            if (el2 instanceof HTMLSelectElement && ![...el2.options].some((o) => o.value === value)) return false;
+            el2.value = value;
+            el2.dataset.sfAutofilled = "1";
             const event = new Event("input", { bubbles: true });
             Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
-            el.dispatchEvent(event);
-            if (lock) lockField(el);
+            el2.dispatchEvent(event);
+            if (lock) lockField(el2);
             return true;
           };
           const a = fill2(n("province"), info.province, lockProvinceOnFill);
@@ -154,13 +159,42 @@ function AddressFields(props) {
           const only = info.neighborhoods?.length === 1 ? info.neighborhoods[0] : null;
           const c = showNeighborhood ? fill2(n("neighborhood"), only) : false;
           setColonias(info.neighborhoods ?? []);
-          setFilled(a || b || c);
+          const list = info.neighborhoods ?? [];
+          const nameEl = form?.elements.namedItem(n("neighborhood"));
+          const el = nameEl && !("length" in nameEl && !(nameEl instanceof HTMLSelectElement)) ? nameEl : null;
+          const typed = el ? el.value : "";
+          const wantSelect = props.neighborhoodList === "select" && showNeighborhood !== false && list.length > 1 && (!typed || list.includes(typed));
+          let carried = false;
+          if (showNeighborhood && wantSelect !== coloniaSelectRef.current) {
+            const userEdited = el?.dataset.sfUserEdited === "1";
+            const value = only && !userEdited ? only : wantSelect ? list.includes(typed) ? typed : "" : typed;
+            coloniaCarry.current = { value, autofilled: !userEdited && (!!only || el?.dataset.sfAutofilled === "1"), userEdited };
+            carried = !!only && !userEdited;
+          }
+          coloniaSelectRef.current = wantSelect;
+          setColoniaSelect(wantSelect);
+          setFilled(a || b || c || carried);
         });
       },
       () => {
       }
     );
   };
+  useEffect(() => {
+    const carry = coloniaCarry.current;
+    coloniaCarry.current = null;
+    if (!carry || !carry.value) return;
+    const form = zipRef.current?.closest("form");
+    const el = form?.elements.namedItem(n("neighborhood"));
+    if (!el || "length" in el && !(el instanceof HTMLSelectElement)) return;
+    if (el instanceof HTMLSelectElement && ![...el.options].some((o) => o.value === carry.value)) return;
+    el.value = carry.value;
+    if (carry.userEdited) el.dataset.sfUserEdited = "1";
+    else if (carry.autofilled) el.dataset.sfAutofilled = "1";
+    const event = new Event("input", { bubbles: true });
+    Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
+    el.dispatchEvent(event);
+  }, [coloniaSelect]);
   useEffect(() => {
     const zip = defaults?.zip;
     if (zip) runLookup(zip);
@@ -194,7 +228,24 @@ function AddressFields(props) {
       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(
+    showNeighborhood && coloniaSelect ? /* @__PURE__ */ jsxs(
+      CheckoutField,
+      {
+        ...common,
+        as: "select",
+        name: n("neighborhood"),
+        label: m.neighborhood,
+        autoComplete: "address-level3",
+        optional: showNeighborhood !== "required",
+        defaultValue: colonias.includes(defaults?.neighborhood ?? "") ? defaults?.neighborhood ?? "" : "",
+        error: errors[n("neighborhood")] ?? null,
+        classNames: field(cx, "half"),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: showNeighborhood === "required", children: m.neighborhoodPlaceholder }),
+          colonias.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c))
+        ]
+      }
+    ) : showNeighborhood ? /* @__PURE__ */ jsx(
       CheckoutField,
       {
         ...common,
@@ -205,10 +256,10 @@ function AddressFields(props) {
         defaultValue: defaults?.neighborhood ?? "",
         error: errors[n("neighborhood")] ?? null,
         classNames: field(cx, "half"),
-        ...colonias.length ? { list: listId } : {}
+        ...colonias.length && !coloniaSelect ? { list: listId } : {}
       }
     ) : null,
-    colonias.length ? /* @__PURE__ */ jsx("datalist", { id: listId, children: colonias.map((c) => /* @__PURE__ */ jsx("option", { value: c }, c)) }) : null,
+    colonias.length && !coloniaSelect ? /* @__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") }),