@asteby/storefront-react 0.17.0 → 0.18.0

package/dist/payments.css

@@ -87,3 +87,68 @@
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+
+/*
+ * 3DS challenge (`<PaymentChallenge>`): a near full-screen modal. Colors are fixed on purpose: the bank page inside
+ * the iframe is always white, and the dialog often lives in a themed (dark) panel. Override with a more specific rule.
+ */
+dialog[data-sf-challenge] {
+  margin: auto;
+  box-sizing: border-box;
+  width: min(60rem, calc(100% - 2rem));
+  max-width: none;
+  max-height: 94dvh;
+  overflow: auto;
+  border: 1px solid #c9d2ee;
+  border-radius: 0.75rem;
+  background: #ffffff;
+  color: #0b1220;
+  /* Claro aunque la página esté en oscuro: barras de desplazamiento y controles del navegador sobre fondo blanco. */
+  color-scheme: light;
+  padding: 1.25rem;
+}
+dialog[data-sf-challenge]::backdrop {
+  background: rgb(0 8 31 / 0.72);
+}
+dialog[data-sf-challenge] h2 {
+  margin: 0 0 0.75rem;
+  font-weight: 800;
+  color: #001963;
+}
+dialog[data-sf-challenge] h2:focus {
+  outline: none;
+}
+dialog[data-sf-challenge] [data-sf-challenge-frame] {
+  display: block;
+  height: min(70dvh, 40rem);
+  background: #ffffff;
+}
+dialog[data-sf-challenge] [data-sf-challenge-escape] {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+}
+dialog[data-sf-challenge] [data-sf-challenge-escape]:empty {
+  margin: 0;
+}
+dialog[data-sf-challenge] [data-sf-challenge-escape] button {
+  margin-top: 0.5rem;
+  padding: 0 1rem;
+  background: #ffffff;
+  color: #0b1220;
+  border: 1px solid #8a94b3;
+  border-radius: 0.5rem;
+  font-weight: 600;
+}
+@media (max-width: 40rem) {
+  dialog[data-sf-challenge] {
+    width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border: 0;
+    padding: 1rem;
+  }
+  dialog[data-sf-challenge] [data-sf-challenge-frame] {
+    height: calc(100dvh - 8rem);
+  }
+}

package/dist/payments.d.cts

@@ -226,6 +226,14 @@ type EmbeddedPaymentState = {
     retry: () => Promise<void>;
     /** After a rejection: clears the message (the form is remounted by the hook). */
     dismiss: () => void;
+    /**
+     * Leaves a pending 3DS challenge (the buyer's emergency exit). The outcome is UNKNOWN (the bank may still approve the
+     * attempt the buyer just verified), so the attempt key is kept and no new payment can start: the hook verifies the
+     * payment state through `transport.refresh` (status `blocked`, `error.kind = 'payment_in_progress'`, `verifying`).
+     * Only a definitive answer settles it: approved, or rejected / expired / cancelled, which gives a new attempt and a
+     * fresh form. A still-pending challenge does not reopen the dialog.
+     */
+    cancelChallenge: () => void;
 };
 /**
  * Embedded payment state machine for one card form.
@@ -256,10 +264,20 @@ type PaymentChallengeProps = {
     messages?: Partial<PaymentMessages>;
     /** Replace the default iframe (e.g. mount the provider's status screen). */
     render?: (outcome: PaymentOutcome) => ReactNode;
+    /**
+     * The buyer's emergency exit. The dialog is NOT dismissible (no Esc, no backdrop click) while the payment is in
+     * progress; this button only appears after `escapeAfterMs`, so a stuck bank page never traps the buyer (WCAG 2.2.1).
+     */
     onCancel?: () => void;
+    /** How long the dialog stays locked before the exit shows. Default 120000. */
+    escapeAfterMs?: number;
 };
-/** 3DS inside the page: a modal dialog with title and focus trap. Default content is the bank's https iframe. */
-declare function PaymentChallenge({ outcome, locale, messages, render, onCancel }: PaymentChallengeProps): react.JSX.Element;
+/**
+ * 3DS inside the page: a near full-screen modal dialog (`showModal()`: focus trap, inert page) with an accessible title.
+ * Esc and backdrop clicks do nothing until the payment ends (the owner unmounts it). Default content is the bank's
+ * https iframe. Layout comes from `payments.css` (`dialog[data-sf-challenge]`), overridable with your own CSS.
+ */
+declare function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs }: PaymentChallengeProps): react.JSX.Element;
 type PaymentBrickHandle = EmbeddedPaymentState;
 type PaymentBrickProps = Omit<UseEmbeddedPaymentOptions, 'amount'> & {
     /** The server's total. Shown on the button and passed to the provider widget. */

package/dist/payments.d.ts

@@ -226,6 +226,14 @@ type EmbeddedPaymentState = {
     retry: () => Promise<void>;
     /** After a rejection: clears the message (the form is remounted by the hook). */
     dismiss: () => void;
+    /**
+     * Leaves a pending 3DS challenge (the buyer's emergency exit). The outcome is UNKNOWN (the bank may still approve the
+     * attempt the buyer just verified), so the attempt key is kept and no new payment can start: the hook verifies the
+     * payment state through `transport.refresh` (status `blocked`, `error.kind = 'payment_in_progress'`, `verifying`).
+     * Only a definitive answer settles it: approved, or rejected / expired / cancelled, which gives a new attempt and a
+     * fresh form. A still-pending challenge does not reopen the dialog.
+     */
+    cancelChallenge: () => void;
 };
 /**
  * Embedded payment state machine for one card form.
@@ -256,10 +264,20 @@ type PaymentChallengeProps = {
     messages?: Partial<PaymentMessages>;
     /** Replace the default iframe (e.g. mount the provider's status screen). */
     render?: (outcome: PaymentOutcome) => ReactNode;
+    /**
+     * The buyer's emergency exit. The dialog is NOT dismissible (no Esc, no backdrop click) while the payment is in
+     * progress; this button only appears after `escapeAfterMs`, so a stuck bank page never traps the buyer (WCAG 2.2.1).
+     */
     onCancel?: () => void;
+    /** How long the dialog stays locked before the exit shows. Default 120000. */
+    escapeAfterMs?: number;
 };
-/** 3DS inside the page: a modal dialog with title and focus trap. Default content is the bank's https iframe. */
-declare function PaymentChallenge({ outcome, locale, messages, render, onCancel }: PaymentChallengeProps): react.JSX.Element;
+/**
+ * 3DS inside the page: a near full-screen modal dialog (`showModal()`: focus trap, inert page) with an accessible title.
+ * Esc and backdrop clicks do nothing until the payment ends (the owner unmounts it). Default content is the bank's
+ * https iframe. Layout comes from `payments.css` (`dialog[data-sf-challenge]`), overridable with your own CSS.
+ */
+declare function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs }: PaymentChallengeProps): react.JSX.Element;
 type PaymentBrickHandle = EmbeddedPaymentState;
 type PaymentBrickProps = Omit<UseEmbeddedPaymentOptions, 'amount'> & {
     /** The server's total. Shown on the button and passed to the provider widget. */

package/dist/payments.js

@@ -485,7 +485,7 @@ function useEmbeddedPayment(options) {
     autoRetries = 2,
     retryDelayMs = 600,
     pollIntervalMs = 2e3,
-    pollTimeoutMs = 6e4,
+    pollTimeoutMs = 3e5,
     verifyTimeoutMs = 12e4,
     verifyIntervalMs = 2e3,
     scope = "default"
@@ -514,6 +514,7 @@ function useEmbeddedPayment(options) {
   const alive = useRef(true);
   const generation = useRef(0);
   const statusRef = useRef("idle");
+  const leftChallenge = useRef(false);
   statusRef.current = status;
   errorRef.current = error;
   const amountKey = `${amount.amount}|${amount.currency_code}`;
@@ -697,6 +698,7 @@ function useEmbeddedPayment(options) {
     (result) => {
       const o = paymentOutcome(result, live.current.locale, live.current.messages);
       pendingData.current = null;
+      leftChallenge.current = false;
       setOutcome(o);
       setError(null);
       setAttemptsLeft(o.attempts_left);
@@ -857,7 +859,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;
@@ -869,6 +871,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;
@@ -883,11 +887,18 @@ function useEmbeddedPayment(options) {
       ctl.abort();
       setVerifying(false);
     };
-  }, [unknownOutcome, transport, verifyTimeoutMs, verifyIntervalMs, finish]);
+  }, [unknownOutcome, transport, verifyTimeoutMs, verifyIntervalMs, pollTimeoutMs, finish]);
   const dismiss = useCallback(() => {
     setError(null);
     setOutcome((o) => o?.kind === "rejected" ? null : o);
   }, []);
+  const cancelChallenge = 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,
@@ -903,7 +914,8 @@ function useEmbeddedPayment(options) {
     containerId,
     submit,
     retry,
-    dismiss
+    dismiss,
+    cancelChallenge
   };
 }
 function VoucherCard({ outcome, locale, messages, className }) {
@@ -940,15 +952,55 @@ function VoucherCard({ outcome, locale, messages, className }) {
     /* @__PURE__ */ jsx("p", { children: m["voucher.email"] })
   ] });
 }
-function PaymentChallenge({ outcome, locale, messages, render, onCancel }) {
+function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs = 12e4 }) {
   const m = paymentMessages(locale, messages);
-  const { ref } = useModalDialog({ open: true, onClose: () => onCancel?.() });
+  const { ref } = useModalDialog({ open: true, onClose: () => {
+  } });
+  const [canEscape, setCanEscape] = useState(false);
+  const [closed, setClosed] = useState(false);
+  const cancelRef = useRef(onCancel);
+  cancelRef.current = onCancel;
+  const hasCancel = !!onCancel;
+  useEffect(() => {
+    if (!hasCancel) return;
+    const t = setTimeout(() => setCanEscape(true), escapeAfterMs);
+    return () => clearTimeout(t);
+  }, [hasCancel, escapeAfterMs]);
+  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__ */ jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
-    render ? render(outcome) : url ? /* @__PURE__ */ jsx("iframe", { src: url, title: m["challenge.title"], style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsx("p", { children: m["state.challenge"] }),
-    onCancel && /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, style: { minWidth: 44, minHeight: 44 }, children: m["action.cancel"] })
-  ] }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    closed && /* @__PURE__ */ jsxs("p", { role: "status", "data-sf-challenge-closed": true, children: [
+      m["state.challenge"],
+      " ",
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: reopen, "data-sf-challenge-reopen": true, style: { minWidth: 44, minHeight: 44 }, children: m["challenge.title"] })
+    ] }),
+    /* @__PURE__ */ jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxs("div", { "data-sf-challenge-body": true, children: [
+      /* @__PURE__ */ jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
+      render ? render(outcome) : url ? /* @__PURE__ */ jsx("iframe", { src: url, title: m["challenge.title"], "data-sf-challenge-frame": true, style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsx("p", { children: m["state.challenge"] }),
+      hasCancel && /* @__PURE__ */ jsx("div", { "data-sf-challenge-escape": true, "aria-live": "polite", children: canEscape && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { children: m["challenge.escape_hint"] }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => cancelRef.current?.(), style: { minWidth: 44, minHeight: 44 }, children: m["challenge.escape"] })
+      ] }) })
+    ] }) })
+  ] });
 }
 var PaymentBrick = forwardRef(function PaymentBrick2(props, ref) {
   const { submitLabel, hideAmountInButton, renderVoucher, renderChallenge, minHeight = 360, className, style, ...hookOptions } = props;
@@ -986,7 +1038,7 @@ var PaymentBrick = forwardRef(function PaymentBrick2(props, ref) {
       state.status === "network_error" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void state.retry(), style: { minHeight: 44 }, children: m["action.retry"] })
     ] }) : /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", "data-sf-pay-message": true, children: state.message }),
     outcome?.kind === "voucher" && (renderVoucher ? renderVoucher(outcome) : /* @__PURE__ */ jsx(VoucherCard, { outcome, locale, ...props.messages ? { messages: props.messages } : {} })),
-    outcome?.kind === "challenge" && /* @__PURE__ */ jsx(PaymentChallenge, { outcome, locale, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
+    outcome?.kind === "challenge" && /* @__PURE__ */ jsx(PaymentChallenge, { outcome, locale, onCancel: state.cancelChallenge, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
     submitLabel !== void 0 && showForm && /* @__PURE__ */ jsxs(
       "button",
       {