@asteby/storefront-react 0.17.0 → 0.18.0

package/dist/payments.cjs

@@ -621,7 +621,7 @@ function useEmbeddedPayment(options) {
     autoRetries = 2,
     retryDelayMs = 600,
     pollIntervalMs = 2e3,
-    pollTimeoutMs = 6e4,
+    pollTimeoutMs = 3e5,
     verifyTimeoutMs = 12e4,
     verifyIntervalMs = 2e3,
     scope = "default"
@@ -650,6 +650,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 +834,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);
@@ -993,7 +995,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 +1007,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 +1023,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 +1050,8 @@ function useEmbeddedPayment(options) {
     containerId,
     submit,
     retry,
-    dismiss
+    dismiss,
+    cancelChallenge
   };
 }
 function VoucherCard({ outcome, locale, messages, className }) {
@@ -1076,15 +1088,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 +1174,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",
       {