@asteby/storefront-react 0.24.0 → 0.26.0

package/dist/checkout.cjs

@@ -1180,7 +1180,10 @@ var ES4 = {
   moreOptions: "Ver m\xE1s opciones ({n})",
   otherCarriers: "Otras opciones",
   error: "No pudimos consultar las opciones de env\xEDo en este momento.",
-  retry: "Intentar de nuevo"
+  retry: "Intentar de nuevo",
+  freeShipping: "Env\xEDo gratis",
+  freeShippingNote: "Tu pedido ya incluye el env\xEDo: no tienes que elegir paqueter\xEDa.",
+  ratesReady: "Opciones de env\xEDo listas ({n})."
 };
 var EN4 = {
   etaOne: "Arrives in 1 business day",
@@ -1203,7 +1206,10 @@ var EN4 = {
   moreOptions: "Show more options ({n})",
   otherCarriers: "Other options",
   error: "We couldn't get delivery options right now.",
-  retry: "Try again"
+  retry: "Try again",
+  freeShipping: "Free shipping",
+  freeShippingNote: "Shipping is included in your order: there is no carrier to choose.",
+  ratesReady: "Delivery options ready ({n})."
 };
 function deliveryMessages(locale, overrides) {
   const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN4 : ES4;
@@ -1296,13 +1302,13 @@ function isQuoteChange(err) {
 }
 function matchRate(previous, rates) {
   if (!previous) return null;
-  const norm2 = (s) => (s ?? "").trim().toLowerCase();
-  const sameCarrier = (r) => norm2(r.carrier) === norm2(previous.carrier);
+  const norm3 = (s) => (s ?? "").trim().toLowerCase();
+  const sameCarrier = (r) => norm3(r.carrier) === norm3(previous.carrier);
   if (previous.service_code) {
-    const hit = rates.find((r) => sameCarrier(r) && norm2(r.service_code) === norm2(previous.service_code));
+    const hit = rates.find((r) => sameCarrier(r) && norm3(r.service_code) === norm3(previous.service_code));
     if (hit) return hit;
   }
-  return rates.find((r) => sameCarrier(r) && norm2(r.title) === norm2(previous.title)) ?? null;
+  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 useHydrated = () => react.useSyncExternalStore(
@@ -1339,7 +1345,8 @@ function DeliveryOptions(props) {
     children,
     layout = "list",
     error,
-    onRetry
+    onRetry,
+    free = false
   } = props;
   const locale = useResolvedLocale(props.locale);
   const m = react.useMemo(() => deliveryMessages(locale, props.messages), [locale, props.messages]);
@@ -1407,17 +1414,24 @@ function DeliveryOptions(props) {
     ] }, rate.id);
   };
   const errorText = error ? typeof error === "string" ? error : m.error : null;
+  const freeRate = free && !loading && pickup.length === 0 ? rates.find((r) => !r.pickup) ?? null : null;
   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,
     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
     ] }) : null,
+    freeRate ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.freeBanner, role: props.announceReady ? void 0 : "status", "data-sf-delivery-free-banner": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: rateValue(freeRate), ...testId ? { "data-testid": testId } : {} }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.free, "data-sf-delivery-free-title": true, children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m.freeShipping }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.freeShippingNote })
+    ] }) : null,
     children,
     loading && rates.length === 0 ? [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx.skeleton, "data-sf-delivery-skeleton": true, "aria-hidden": "true" }, i)) : null,
-    flat ? flat.map(({ rate, tags }) => rateRow(rate, { tags: showBadges ? tags : [] })) : plan ? plan.recommended.map(({ rate, tags }) => rateRow(rate, { tags: showBadges ? tags : [] })) : rates.map((rate) => rateRow(rate, { tags: badges.get(rate.id) ?? [] })),
+    freeRate ? null : flat ? flat.map(({ rate, tags }) => rateRow(rate, { tags: showBadges ? tags : [] })) : plan ? plan.recommended.map(({ rate, tags }) => rateRow(rate, { tags: showBadges ? tags : [] })) : rates.map((rate) => rateRow(rate, { tags: badges.get(rate.id) ?? [] })),
     plan && plan.moreCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cx.more, "data-sf-delivery-more": true, ...inMore ? { open: true } : {}, children: [
       /* @__PURE__ */ jsxRuntime.jsx("summary", { className: cx.moreSummary, "data-sf-delivery-more-summary": true, children: m.moreOptions.replace("{n}", String(plan.moreCount)) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-delivery-groups": true, children: plan.more.map((g) => {
@@ -1444,21 +1458,158 @@ function DeliveryOptions(props) {
     deadline ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, "data-sf-delivery-note": true, "data-soon": shownNote?.soon || void 0, "aria-live": "polite", children: shownNote?.text ?? "" }) : null
   ] });
 }
+var DEFAULT_QUOTE_NAMES = {
+  country_code: "country_code",
+  zip: "zip",
+  province: "province",
+  city: "city",
+  neighborhood: "neighborhood",
+  address1: "address1"
+};
+var DEFAULT_REQUIRED = ["zip", "province", "city", "neighborhood", "address1"];
+var QUOTE_KEYS = ["country_code", "zip", "province", "city"];
+var norm2 = (v) => v.normalize("NFD").replace(/[̀-ͯ]/g, "").trim().toLowerCase();
+function quoteFingerprint(a) {
+  return QUOTE_KEYS.map((k) => norm2(a[k] ?? "")).join("|");
+}
+function defaultRate(delivery) {
+  let best = null;
+  for (const r of delivery.rates) {
+    if (r.pickup) continue;
+    if (!best || Number(r.cost.amount) < Number(best.cost.amount)) best = r;
+  }
+  return best;
+}
+function readQuoteAddress(form, opts = {}) {
+  if (!form) return null;
+  const names = { ...DEFAULT_QUOTE_NAMES, ...opts.names };
+  const data = new FormData(form);
+  const get = (name) => String(data.get(name) ?? "").trim();
+  const address = {
+    country_code: get(names.country_code) || opts.defaultCountry || "MX",
+    zip: get(names.zip),
+    province: get(names.province),
+    city: get(names.city),
+    neighborhood: get(names.neighborhood),
+    address1: get(names.address1)
+  };
+  const valid = opts.validPostalCode ?? ((z) => /^\d{5}$/.test(z));
+  if (!valid(address.zip)) return null;
+  for (const k of opts.required ?? DEFAULT_REQUIRED) if (!address[k]) return null;
+  return address;
+}
+function useAutoQuote(options) {
+  const { formRef, debounceMs = 600, enabled = true } = options;
+  const [status, setStatus] = react.useState("idle");
+  const [delivery, setDelivery] = react.useState(null);
+  const [quotedFor, setQuotedFor] = react.useState(null);
+  const opts = react.useRef(options);
+  opts.current = options;
+  const timer = react.useRef(null);
+  const inflight = react.useRef(null);
+  const quotedFp = react.useRef(null);
+  const pendingFp = react.useRef(null);
+  const run = react.useCallback((address, fp) => {
+    inflight.current?.abort();
+    const ctl = new AbortController();
+    inflight.current = ctl;
+    pendingFp.current = fp;
+    setStatus("loading");
+    opts.current.quote(address, ctl.signal).then((d) => {
+      if (ctl.signal.aborted) return;
+      quotedFp.current = fp;
+      pendingFp.current = null;
+      setDelivery(d);
+      setQuotedFor(address);
+      setStatus("ready");
+      opts.current.onQuoted?.(d);
+    }).catch(() => {
+      if (ctl.signal.aborted) return;
+      pendingFp.current = null;
+      quotedFp.current = null;
+      setStatus("error");
+    });
+  }, []);
+  const evaluate = react.useCallback(
+    (force) => {
+      const address = readQuoteAddress(formRef.current, opts.current);
+      if (!address) {
+        if (timer.current) clearTimeout(timer.current);
+        timer.current = null;
+        inflight.current?.abort();
+        pendingFp.current = null;
+        setStatus("idle");
+        return;
+      }
+      const fp = quoteFingerprint(address);
+      if (!force && (fp === quotedFp.current || fp === pendingFp.current)) {
+        if (timer.current) clearTimeout(timer.current);
+        timer.current = null;
+        if (fp === quotedFp.current) setStatus("ready");
+        return;
+      }
+      if (timer.current) clearTimeout(timer.current);
+      if (force) {
+        timer.current = null;
+        run(address, fp);
+        return;
+      }
+      setStatus("waiting");
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        const latest = readQuoteAddress(formRef.current, opts.current);
+        if (latest) run(latest, quoteFingerprint(latest));
+      }, debounceMs);
+    },
+    [debounceMs, formRef, run]
+  );
+  react.useEffect(() => {
+    const form = formRef.current;
+    if (!enabled || !form) return;
+    const onChange = () => evaluate(false);
+    form.addEventListener("input", onChange);
+    form.addEventListener("change", onChange);
+    const first = setTimeout(onChange, 0);
+    return () => {
+      clearTimeout(first);
+      form.removeEventListener("input", onChange);
+      form.removeEventListener("change", onChange);
+      if (timer.current) clearTimeout(timer.current);
+      inflight.current?.abort();
+    };
+  }, [enabled, evaluate, formRef]);
+  const retry = react.useCallback(() => evaluate(true), [evaluate]);
+  const defaultValue = react.useMemo(() => {
+    if (!delivery) return null;
+    const saved = opts.current.savedValue;
+    if (saved?.startsWith("rate:")) {
+      const hit = delivery.rates.find((r) => `rate:${r.id}` === saved);
+      if (hit) return `rate:${hit.id}`;
+    }
+    const pick = (opts.current.pickDefault ?? defaultRate)(delivery);
+    return pick ? `rate:${pick.id}` : null;
+  }, [delivery, options.savedValue]);
+  const announce = status === "loading" || status === "waiting" ? "searching" : status === "error" ? "error" : status === "ready" ? delivery?.free ? "free" : "ready" : null;
+  return { status, delivery, defaultValue, quotedFor, retry, announce };
+}
 
 exports.ADDRESS_FILL_EVENT_FLAG = ADDRESS_FILL_EVENT_FLAG;
 exports.AddressFields = AddressFields;
 exports.BrandMark = BrandMark;
 exports.CheckoutField = CheckoutField;
 exports.ContactFields = ContactFields;
+exports.DEFAULT_QUOTE_NAMES = DEFAULT_QUOTE_NAMES;
 exports.DeliveryOptions = DeliveryOptions;
 exports.ErrorSummary = ErrorSummary;
 exports.OrderSummary = OrderSummary;
 exports.OrderSummaryDisclosure = OrderSummaryDisclosure;
+exports.QUOTE_KEYS = QUOTE_KEYS;
 exports.addressFieldsMessages = addressFieldsMessages;
 exports.brandKey = brandKey;
 exports.brandLogo = brandLogo;
 exports.brandName = brandName;
 exports.dedupeRates = dedupeRates;
+exports.defaultRate = defaultRate;
 exports.deliveryMessages = deliveryMessages;
 exports.fieldMessages = fieldMessages;
 exports.findBrand = findBrand;
@@ -1469,12 +1620,15 @@ exports.listBrands = listBrands;
 exports.matchRate = matchRate;
 exports.orderSummaryMessages = orderSummaryMessages;
 exports.quoteDeadline = quoteDeadline;
+exports.quoteFingerprint = quoteFingerprint;
 exports.quoteNote = quoteNote;
 exports.rateBadges = rateBadges;
 exports.rateCarrier = rateCarrier;
 exports.rateEta = rateEta;
 exports.rateService = rateService;
+exports.readQuoteAddress = readQuoteAddress;
 exports.recommendRates = recommendRates;
+exports.useAutoQuote = useAutoQuote;
 exports.useFieldErrors = useFieldErrors;
 exports.validationMessage = validationMessage;
 //# sourceMappingURL=checkout.cjs.map