@asteby/storefront-react 0.16.1 → 0.17.0

package/dist/checkout.d.cts

@@ -88,6 +88,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 +459,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

@@ -88,6 +88,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 +459,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

@@ -82,6 +82,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;
@@ -96,6 +100,29 @@ function AddressFields(props) {
   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,23 +131,31 @@ 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 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 event = new Event("input", { bubbles: true });
+            Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
+            el.dispatchEvent(event);
+            if (lock) lockField(el);
+            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 ?? []);
+          setFilled(a || b || c);
+        });
       },
       () => {
       }
@@ -667,6 +702,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