@asteby/storefront-react 0.16.1 → 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). */
@@ -88,6 +95,13 @@ type AddressFieldsProps = Common & {
     /** Rendered after the fields (e.g. "save this address"). */
     children?: ReactNode;
 };
+/** Name of the property set to `true` on every event the lookup dispatches when it fills a field. */
+declare const ADDRESS_FILL_EVENT_FLAG = "sfSynthetic";
+/**
+ * Was this `input` event dispatched by `AddressFields` itself (a postal-code fill) and not typed by the buyer? The shop's
+ * own listeners (validation, autosave, delivery re-quote...) can ignore these. Real typing has `isTrusted: true`.
+ */
+declare function isAddressFillEvent(event: Event): boolean;
 declare function AddressFields(props: AddressFieldsProps): react.JSX.Element;
 
 type OrderSummaryMessages = {
@@ -452,4 +466,4 @@ type FlatRatesOptions = {
  */
 declare function flatRates<R extends ShippingRate>(input: readonly R[], options?: FlatRatesOptions): RecommendedRate<R>[];
 
-export { type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutFieldClassNames, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, FieldErrors, type FieldLayoutClassNames, FieldMessages, type FlatRatesOptions, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, findBrand, flatRates, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };
+export { ADDRESS_FILL_EVENT_FLAG, type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutFieldClassNames, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, FieldErrors, type FieldLayoutClassNames, FieldMessages, type FlatRatesOptions, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, findBrand, flatRates, isAddressFillEvent, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };

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). */
@@ -88,6 +95,13 @@ type AddressFieldsProps = Common & {
     /** Rendered after the fields (e.g. "save this address"). */
     children?: ReactNode;
 };
+/** Name of the property set to `true` on every event the lookup dispatches when it fills a field. */
+declare const ADDRESS_FILL_EVENT_FLAG = "sfSynthetic";
+/**
+ * Was this `input` event dispatched by `AddressFields` itself (a postal-code fill) and not typed by the buyer? The shop's
+ * own listeners (validation, autosave, delivery re-quote...) can ignore these. Real typing has `isTrusted: true`.
+ */
+declare function isAddressFillEvent(event: Event): boolean;
 declare function AddressFields(props: AddressFieldsProps): react.JSX.Element;
 
 type OrderSummaryMessages = {
@@ -452,4 +466,4 @@ type FlatRatesOptions = {
  */
 declare function flatRates<R extends ShippingRate>(input: readonly R[], options?: FlatRatesOptions): RecommendedRate<R>[];
 
-export { type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutFieldClassNames, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, FieldErrors, type FieldLayoutClassNames, FieldMessages, type FlatRatesOptions, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, findBrand, flatRates, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };
+export { ADDRESS_FILL_EVENT_FLAG, type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutFieldClassNames, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, FieldErrors, type FieldLayoutClassNames, FieldMessages, type FlatRatesOptions, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, findBrand, flatRates, isAddressFillEvent, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };

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.",
@@ -82,6 +84,10 @@ function lockField(el) {
     el.readOnly = true;
   }
 }
+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 showNeighborhood = props.neighborhood ?? true;
@@ -92,10 +98,36 @@ 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);
   lookupRef.current = lookupPostalCode;
+  const writer = useRef(Promise.resolve());
+  const enqueue = (task) => {
+    writer.current = writer.current.then(task).catch(() => {
+    });
+  };
+  useEffect(() => {
+    const form = zipRef.current?.closest("form");
+    if (!form) return;
+    const mark = (e) => {
+      if (!e.isTrusted) return;
+      const el = e.target;
+      if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
+        el.dataset.sfUserEdited = "1";
+        delete el.dataset.sfAutofilled;
+      }
+    };
+    form.addEventListener("input", mark, true);
+    form.addEventListener("change", mark, true);
+    return () => {
+      form.removeEventListener("input", mark, true);
+      form.removeEventListener("change", mark, true);
+    };
+  }, []);
   const runLookup = (zip) => {
     const lookup = lookupRef.current;
     if (!lookup || !zip || zip === lastZip.current) return;
@@ -104,28 +136,65 @@ function AddressFields(props) {
     const form = zipRef.current?.closest("form");
     void lookup(zip).then(
       (info) => {
-        if (!info || 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.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 }));
-          if (lock) lockField(el);
-          return true;
-        };
-        const a = fill2(n("province"), info.province, lockProvinceOnFill);
-        const b = fill2(n("city"), info.city);
-        setColonias(info.neighborhoods ?? []);
-        setFilled(a || b);
+        if (!info) return;
+        enqueue(() => {
+          if (lastZip.current !== zip) return;
+          const fill2 = (name, value, lock) => {
+            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 });
+            el2.dispatchEvent(event);
+            if (lock) lockField(el2);
+            return true;
+          };
+          const a = fill2(n("province"), info.province, lockProvinceOnFill);
+          const b = 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 ?? []);
+          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);
@@ -159,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,
@@ -170,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") }),
@@ -667,6 +753,6 @@ function DeliveryOptions(props) {
   ] });
 }
 
-export { AddressFields, ContactFields, DeliveryOptions, OrderSummary, OrderSummaryDisclosure, addressFieldsMessages, dedupeRates, deliveryMessages, flatRates, isQuoteChange, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };
+export { ADDRESS_FILL_EVENT_FLAG, AddressFields, ContactFields, DeliveryOptions, OrderSummary, OrderSummaryDisclosure, addressFieldsMessages, dedupeRates, deliveryMessages, flatRates, isAddressFillEvent, isQuoteChange, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };
 //# sourceMappingURL=checkout.js.map
 //# sourceMappingURL=checkout.js.map