@asteby/storefront-react 0.17.0 → 0.19.0

package/dist/payments.cjs

@@ -146,6 +146,7 @@ function sanitizeMercadoPagoFormData(data) {
 function mercadoPagoBricksAdapter(options = {}) {
   const allowed = options.allowedSdkOrigins ?? ["https://sdk.mercadopago.com"];
   const getSdk = options.getSdk ?? (() => typeof window !== "undefined" ? window.MercadoPago : void 0);
+  const retryDelay = options.collectRetryDelayMs ?? 400;
   const getDevice = options.getDeviceSessionId ?? (() => typeof window !== "undefined" ? window.MP_DEVICE_SESSION_ID : void 0);
   return {
     kind: MERCADOPAGO_BRICKS_KIND,
@@ -187,9 +188,21 @@ function mercadoPagoBricksAdapter(options = {}) {
       return {
         async collect() {
           if (gone) throw new Error("payment form is unmounted");
-          const raw = await controller.getFormData();
-          const provider_data = sanitizeMercadoPagoFormData(raw);
-          if (!provider_data.token) throw new Error("payment form incomplete");
+          const read = async () => {
+            const raw = await controller.getFormData();
+            const data = sanitizeMercadoPagoFormData(raw);
+            if (!data.token) throw new Error("payment form incomplete");
+            return data;
+          };
+          let provider_data;
+          try {
+            provider_data = await read();
+          } catch (first) {
+            if (gone) throw first;
+            await new Promise((r) => setTimeout(r, retryDelay));
+            if (gone) throw first;
+            provider_data = await read();
+          }
           const device = getDevice();
           return { provider_data, ...typeof device === "string" && device ? { device_session_id: device } : {} };
         },
@@ -621,7 +634,7 @@ function useEmbeddedPayment(options) {
     autoRetries = 2,
     retryDelayMs = 600,
     pollIntervalMs = 2e3,
-    pollTimeoutMs = 6e4,
+    pollTimeoutMs = 3e5,
     verifyTimeoutMs = 12e4,
     verifyIntervalMs = 2e3,
     scope = "default"
@@ -650,6 +663,7 @@ function useEmbeddedPayment(options) {
   const alive = react.useRef(true);
   const generation = react.useRef(0);
   const statusRef = react.useRef("idle");
+  const leftChallenge = react.useRef(false);
   statusRef.current = status;
   errorRef.current = error;
   const amountKey = `${amount.amount}|${amount.currency_code}`;
@@ -833,6 +847,7 @@ function useEmbeddedPayment(options) {
     (result) => {
       const o = storefront.paymentOutcome(result, live.current.locale, live.current.messages);
       pendingData.current = null;
+      leftChallenge.current = false;
       setOutcome(o);
       setError(null);
       setAttemptsLeft(o.attempts_left);
@@ -917,15 +932,21 @@ function useEmbeddedPayment(options) {
       setError(null);
       setOutcome(null);
       emit({ type: "submit" });
+      const withdrawn = () => !alive.current || form.current !== m;
+      const settle = () => {
+        if (alive.current) setStatus((s) => s === "processing" ? "idle" : s);
+      };
       let data;
       try {
         data = await m.collect();
       } catch {
+        if (withdrawn()) return settle();
         emit({ type: "tokenize_error" });
         setError({ kind: "generic", message: live.current.msgs["error.card_data"], retrySameAttempt: false, canRetry: true });
         setStatus("ready");
         return;
       }
+      if (withdrawn()) return settle();
       const attempt = readAttempt();
       setAttemptId(attempt);
       await send(data, attempt, total);
@@ -993,7 +1014,7 @@ function useEmbeddedPayment(options) {
     }
     let stop = false;
     const ctl = new AbortController();
-    const until = Date.now() + verifyTimeoutMs;
+    const until = Date.now() + (leftChallenge.current ? Math.max(verifyTimeoutMs, pollTimeoutMs) : verifyTimeoutMs);
     setVerifying(true);
     (async () => {
       let wait = verifyIntervalMs;
@@ -1005,6 +1026,8 @@ function useEmbeddedPayment(options) {
           const r = await transport.refresh({ signal: ctl.signal });
           if (stop || !alive.current) return;
           if (isResolvedAttempt(r)) {
+            const settled = r.payment.status === "paid" || r.payment.status === "failed" || r.payment.status === "expired" || r.payment.status === "cancelled";
+            if (leftChallenge.current && !settled && r.payment.action?.type === "challenge") continue;
             setVerifying(false);
             finish(r);
             return;
@@ -1019,11 +1042,18 @@ function useEmbeddedPayment(options) {
       ctl.abort();
       setVerifying(false);
     };
-  }, [unknownOutcome, transport, verifyTimeoutMs, verifyIntervalMs, finish]);
+  }, [unknownOutcome, transport, verifyTimeoutMs, verifyIntervalMs, pollTimeoutMs, finish]);
   const dismiss = react.useCallback(() => {
     setError(null);
     setOutcome((o) => o?.kind === "rejected" ? null : o);
   }, []);
+  const cancelChallenge = react.useCallback(() => {
+    if (statusRef.current !== "challenge") return;
+    leftChallenge.current = true;
+    setOutcome(null);
+    setError({ kind: "payment_in_progress", message: live.current.msgs["challenge.left"], retrySameAttempt: false, canRetry: false });
+    setStatus("blocked");
+  }, []);
   const message = status === "processing" ? msgs["state.processing"] : status === "fallback" ? msgs["state.fallback"] : error?.message ?? outcome?.message ?? (status === "loading" ? msgs["state.loading"] : null);
   return {
     status,
@@ -1039,7 +1069,8 @@ function useEmbeddedPayment(options) {
     containerId,
     submit,
     retry,
-    dismiss
+    dismiss,
+    cancelChallenge
   };
 }
 function VoucherCard({ outcome, locale, messages, className }) {
@@ -1076,15 +1107,55 @@ function VoucherCard({ outcome, locale, messages, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["voucher.email"] })
   ] });
 }
-function PaymentChallenge({ outcome, locale, messages, render, onCancel }) {
+function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs = 12e4 }) {
   const m = storefront.paymentMessages(locale, messages);
-  const { ref } = useModalDialog({ open: true, onClose: () => onCancel?.() });
+  const { ref } = useModalDialog({ open: true, onClose: () => {
+  } });
+  const [canEscape, setCanEscape] = react.useState(false);
+  const [closed, setClosed] = react.useState(false);
+  const cancelRef = react.useRef(onCancel);
+  cancelRef.current = onCancel;
+  const hasCancel = !!onCancel;
+  react.useEffect(() => {
+    if (!hasCancel) return;
+    const t = setTimeout(() => setCanEscape(true), escapeAfterMs);
+    return () => clearTimeout(t);
+  }, [hasCancel, escapeAfterMs]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onClosed = () => setClosed(true);
+    el.addEventListener("close", onClosed);
+    return () => el.removeEventListener("close", onClosed);
+  }, [ref]);
+  const reopen = () => {
+    const el = ref.current;
+    if (!el) return;
+    try {
+      if (typeof el.showModal === "function") el.showModal();
+      else el.setAttribute("open", "");
+    } catch {
+      el.setAttribute("open", "");
+    }
+    setClosed(false);
+    el.querySelector("[data-sf-autofocus]")?.focus({ preventScroll: true });
+  };
   const url = outcome.challenge?.url;
-  return /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
-    render ? render(outcome) : url ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: m["challenge.title"], style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["state.challenge"] }),
-    onCancel && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onCancel, style: { minWidth: 44, minHeight: 44 }, children: m["action.cancel"] })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    closed && /* @__PURE__ */ jsxRuntime.jsxs("p", { role: "status", "data-sf-challenge-closed": true, children: [
+      m["state.challenge"],
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: reopen, "data-sf-challenge-reopen": true, style: { minWidth: 44, minHeight: 44 }, children: m["challenge.title"] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sf-challenge-body": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
+      render ? render(outcome) : url ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: m["challenge.title"], "data-sf-challenge-frame": true, style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["state.challenge"] }),
+      hasCancel && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-challenge-escape": true, "aria-live": "polite", children: canEscape && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["challenge.escape_hint"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => cancelRef.current?.(), style: { minWidth: 44, minHeight: 44 }, children: m["challenge.escape"] })
+      ] }) })
+    ] }) })
+  ] });
 }
 var PaymentBrick = react.forwardRef(function PaymentBrick2(props, ref) {
   const { submitLabel, hideAmountInButton, renderVoucher, renderChallenge, minHeight = 360, className, style, ...hookOptions } = props;
@@ -1122,7 +1193,7 @@ var PaymentBrick = react.forwardRef(function PaymentBrick2(props, ref) {
       state.status === "network_error" && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void state.retry(), style: { minHeight: 44 }, children: m["action.retry"] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "aria-live": "polite", "data-sf-pay-message": true, children: state.message }),
     outcome?.kind === "voucher" && (renderVoucher ? renderVoucher(outcome) : /* @__PURE__ */ jsxRuntime.jsx(VoucherCard, { outcome, locale, ...props.messages ? { messages: props.messages } : {} })),
-    outcome?.kind === "challenge" && /* @__PURE__ */ jsxRuntime.jsx(PaymentChallenge, { outcome, locale, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
+    outcome?.kind === "challenge" && /* @__PURE__ */ jsxRuntime.jsx(PaymentChallenge, { outcome, locale, onCancel: state.cancelChallenge, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
     submitLabel !== void 0 && showForm && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {