@tribe-nest/forge 3.22.0 → 3.23.0

package/src/utils/_tests/paystackCheckout.spec.ts

@@ -0,0 +1,266 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+/**
+ * The Paystack inline checkout helper: the ONE place Forge knows the popup
+ * exists, so it is the one place these rules are enforced.
+ *
+ * What is asserted here is what a fan actually experiences:
+ *
+ * - the modal opening at all, and paying continuing down the SAME return leg
+ *   the hosted redirect used (reference and trxref on the URL, so no finalise
+ *   page has to change);
+ * - closing the popup being a retryable non-event rather than a failed order;
+ * - and the three ways the modal can fail to appear (a blocked script, a
+ *   throwing `resumeTransaction`, and a silent no-show), each ending on the
+ *   hosted page rather than on a dead button.
+ *
+ * The last of those is the one worth a test: a fan looking at a button that did
+ * nothing is a lost sale that reports no error anywhere.
+ */
+
+type ResumeOptions = {
+  onSuccess?: (t: { reference?: string; trxref?: string }) => void;
+  onCancel?: () => void;
+  onLoad?: (r: unknown) => void;
+  onError?: (e: unknown) => void;
+};
+
+/** Set per test to drive the fake popup. */
+let resumeBehaviour: (accessCode: string, options: ResumeOptions) => void = () => {};
+const resumeCalls: { accessCode: string }[] = [];
+
+// The blocked-script case gets its own file (`paystackCheckoutBlocked.spec.ts`)
+// because a `vi.mock` factory is evaluated once per module registry, so the
+// import cannot be made to fail and succeed within one file.
+vi.mock("@paystack/inline-js", () => {
+  return {
+    default: class FakePaystackPop {
+      resumeTransaction(accessCode: string, options: ResumeOptions = {}) {
+        resumeCalls.push({ accessCode });
+        resumeBehaviour(accessCode, options);
+        return {};
+      }
+      cancelTransaction() {}
+    },
+  };
+});
+
+// Imported after the mock is registered (vitest hoists `vi.mock`, so a plain
+// top-level import would be fine; this is only for readability).
+import { openPaystackCheckout, paystackReturnUrl, hasPaystackSession } from "../paystackCheckout";
+
+const HOSTED = "https://checkout.paystack.com/abc123";
+const RETURN = "https://artist.test/checkout/finalise?orderId=order-1";
+
+/** jsdom refuses real navigation, so `location` is replaced with a plain bag. */
+let location: { href: string };
+
+const addPaystackIframe = () => {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("src", "https://checkout.paystack.com/frame");
+  document.body.appendChild(iframe);
+};
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  resumeCalls.length = 0;
+  resumeBehaviour = () => {};
+  document.body.innerHTML = "";
+  location = { href: "https://artist.test/checkout" };
+  Object.defineProperty(window, "location", { value: location, writable: true, configurable: true });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("paystackReturnUrl", () => {
+  it("appends the reference the hosted redirect would have carried", () => {
+    const url = paystackReturnUrl(RETURN, { reference: "pay-uuid" });
+    expect(url).toContain("orderId=order-1");
+    expect(url).toContain("reference=pay-uuid");
+    expect(url).toContain("trxref=pay-uuid");
+  });
+
+  it("falls back to trxref when only that is reported", () => {
+    expect(paystackReturnUrl(RETURN, { trxref: "pay-uuid" })).toContain("reference=pay-uuid");
+  });
+
+  it("returns the URL untouched when no reference came back", () => {
+    expect(paystackReturnUrl(RETURN, {})).toBe(RETURN);
+  });
+});
+
+describe("hasPaystackSession", () => {
+  it("is true for an access code, true for a hosted URL alone, false for neither", () => {
+    expect(hasPaystackSession({ accessCode: "ac" })).toBe(true);
+    expect(hasPaystackSession({ checkoutUrl: HOSTED })).toBe(true);
+    expect(hasPaystackSession({})).toBe(false);
+    expect(hasPaystackSession(null)).toBe(false);
+  });
+});
+
+describe("openPaystackCheckout", () => {
+  it("opens the modal and, on success, continues down the redirect's own return leg", async () => {
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onSuccess?.({ reference: "pay-uuid" });
+    };
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(outcome).toBe("succeeded");
+    expect(resumeCalls).toEqual([{ accessCode: "ac_1" }]);
+    // The fan stayed on the creator's site right up until the finalise page.
+    expect(location.href).toContain("/checkout/finalise");
+    expect(location.href).toContain("reference=pay-uuid");
+  });
+
+  it("hands success to the caller instead of navigating when it finalizes in place", async () => {
+    const onSuccess = vi.fn();
+    resumeBehaviour = (_code, options) => options.onSuccess?.({ reference: "pay-uuid" });
+
+    const outcome = await openPaystackCheckout(
+      { accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN },
+      { onSuccess },
+    );
+
+    expect(outcome).toBe("succeeded");
+    expect(onSuccess).toHaveBeenCalledWith({ reference: "pay-uuid" });
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+
+  it("treats a dismissal as retryable: no navigation, no error, and the same code opens again", async () => {
+    const onError = vi.fn();
+    const onDismiss = vi.fn();
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onCancel?.();
+    };
+
+    const first = await openPaystackCheckout(
+      { accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN },
+      { onDismiss, onError },
+    );
+
+    expect(first).toBe("dismissed");
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    // A closed popup is not a failure: nothing is reported and nothing moves.
+    expect(onError).not.toHaveBeenCalled();
+    expect(location.href).toBe("https://artist.test/checkout");
+
+    // ... and the very same session opens again on the next click.
+    resumeBehaviour = (_code, options) => options.onSuccess?.({ reference: "pay-uuid" });
+    const second = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    expect(second).toBe("succeeded");
+    expect(resumeCalls).toEqual([{ accessCode: "ac_1" }, { accessCode: "ac_1" }]);
+  });
+
+  it("reports a genuine provider failure as failed, without redirecting", async () => {
+    const onError = vi.fn();
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onError?.({ message: "Card declined" });
+    };
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED }, { onError });
+
+    expect(outcome).toBe("failed");
+    expect(onError).toHaveBeenCalledWith("Card declined");
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+
+  it("falls back to the hosted page when resumeTransaction throws", async () => {
+    resumeBehaviour = () => {
+      throw new Error("popup blew up");
+    };
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(outcome).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("falls back to the hosted page when the modal never appears", async () => {
+    // No onLoad, no iframe: exactly what a silently-blocked popup looks like.
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(await pending).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("does NOT redirect when the modal is up but the fan is still deciding", async () => {
+    let captured: ResumeOptions = {};
+    resumeBehaviour = (_code, options) => {
+      captured = options;
+      addPaystackIframe();
+    };
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(6000);
+    // The watchdog has long since fired; the iframe is what stops it acting.
+    expect(location.href).toBe("https://artist.test/checkout");
+
+    captured.onSuccess?.({ reference: "pay-uuid" });
+    expect(await pending).toBe("succeeded");
+    expect(location.href).toContain("reference=pay-uuid");
+  });
+
+  /**
+   * The two ways the modal-present check used to say yes when the fan was
+   * looking at nothing. Both suppress the hosted-page fallback, which is the
+   * only thing standing between that fan and a dead button.
+   */
+  it("still falls back when a DISMISSED modal's iframe is hidden rather than removed", async () => {
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("src", "https://checkout.paystack.com/frame");
+    iframe.style.display = "none";
+    document.body.appendChild(iframe);
+
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(await pending).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("still falls back when an unrelated iframe merely mentions paystack in its src", async () => {
+    // A third-party frame echoing the current page URL back in its own src is
+    // enough to match `iframe[src*="paystack"]` on any paystack-ish host.
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("src", "https://metrics.example.com/p?ref=https://paystack.artist.test/checkout");
+    document.body.appendChild(iframe);
+
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(await pending).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("goes straight to the hosted page when there is no access code to resume", async () => {
+    const outcome = await openPaystackCheckout({ checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(outcome).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+    expect(resumeCalls).toEqual([]);
+  });
+
+  it("reports unavailable, and never navigates, when there is no session at all", async () => {
+    const onError = vi.fn();
+
+    const outcome = await openPaystackCheckout({}, { onError });
+
+    expect(outcome).toBe("unavailable");
+    expect(onError).toHaveBeenCalled();
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+});

package/src/utils/_tests/paystackCheckoutBlocked.spec.ts

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+/**
+ * The blocked-script case, in its own file because a `vi.mock` factory is
+ * evaluated once per module registry: the import cannot both fail and succeed
+ * inside one spec file.
+ *
+ * This is the headline reason the Paystack bundle is loaded lazily rather than
+ * imported at the top of the module: a CSP, an ad blocker, an offline chunk or
+ * a corporate proxy takes the popup away, and the fan must still be able to pay
+ * on the hosted page instead of the whole page failing to render.
+ */
+
+vi.mock("@paystack/inline-js", () => {
+  throw new Error("chunk load failed");
+});
+
+import { openPaystackCheckout } from "../paystackCheckout";
+
+const HOSTED = "https://checkout.paystack.com/abc123";
+
+let location: { href: string };
+
+beforeEach(() => {
+  location = { href: "https://artist.test/checkout" };
+  Object.defineProperty(window, "location", { value: location, writable: true, configurable: true });
+});
+
+describe("openPaystackCheckout when the inline script cannot load", () => {
+  it("sends the fan to the hosted page rather than dead-ending them", async () => {
+    const outcome = await openPaystackCheckout({
+      accessCode: "ac_1",
+      checkoutUrl: HOSTED,
+      returnUrl: "https://artist.test/checkout/finalise?orderId=order-1",
+    });
+
+    expect(outcome).toBe("redirected");
+    expect(location.href).toBe(HOSTED);
+  });
+
+  it("reports the failure instead of navigating when there is no hosted URL to fall back to", async () => {
+    const onError = vi.fn();
+
+    const outcome = await openPaystackCheckout({ accessCode: "ac_1" }, { onError });
+
+    expect(outcome).toBe("unavailable");
+    expect(onError).toHaveBeenCalled();
+    expect(location.href).toBe("https://artist.test/checkout");
+  });
+});

package/src/utils/membershipAccess.ts

@@ -161,8 +161,8 @@ export function getMembershipStatusMessage(access: MembershipAccessSummary): Mem
       return {
         label: "Payment failed",
         detail: until
-          ? `We couldn't charge your payment method. You still have full access until ${until} — update your card to keep it.`
-          : "We couldn't charge your payment method. You still have full access — update your card to keep it.",
+          ? `We couldn't charge your payment method. You still have full access until ${until}. Update your card to keep it.`
+          : "We couldn't charge your payment method. You still have full access. Update your card to keep it.",
         showUpdatePayment: true,
         tone: "warning",
       };
@@ -171,7 +171,7 @@ export function getMembershipStatusMessage(access: MembershipAccessSummary): Mem
     case MEMBERSHIP_BILLING_STATE.pending:
       return {
         label: "Pending",
-        detail: "Your membership isn't active yet — finish checkout to unlock it.",
+        detail: "Your membership isn't active yet. Finish checkout to unlock it.",
         showUpdatePayment: false,
         tone: "neutral",
       };

package/src/utils/paystackCheckout.ts

@@ -0,0 +1,277 @@
+/// <reference path="../types/paystack-inline.d.ts" />
+
+/**
+ * Paystack inline checkout: the ONE place in Forge that knows the popup exists.
+ *
+ * The fan pays in a modal on the creator's own site instead of being sent to a
+ * Paystack-branded page and back. Every pillar (cart, tickets, courses,
+ * coaching, invoices, payment links, donations, offers, memberships) reaches
+ * Paystack through this function, so there is exactly one implementation of the
+ * lazy load, the fallback and the success navigation to reason about.
+ *
+ * Four properties are load-bearing:
+ *
+ * 1. **SSR safety.** Forge sites are TanStack Start, so this module is evaluated
+ *    on the server. Nothing here touches `window`, `document` or the Paystack
+ *    bundle at module scope; the browser check happens before any of it.
+ * 2. **Lazy load.** `@paystack/inline-js` is reached through a dynamic
+ *    `import()`, so it never enters the initial bundle and a blocked script
+ *    cannot break page render: it becomes a rejected promise we can handle.
+ * 3. **One runtime fallback, not a version shim.** When the modal cannot open
+ *    (import rejected, `resumeTransaction` threw, or nothing appeared within
+ *    `MODAL_OPEN_TIMEOUT_MS`), the fan goes to the hosted page carried on
+ *    `checkoutUrl`. The sale survives a blocked CDN, a CSP, or an extension.
+ *    This is about browser conditions, never about which Forge version a site
+ *    compiled against.
+ * 4. **Dismissal is not failure.** Closing the modal without paying resolves
+ *    `"dismissed"`. Nothing is marked failed and the caller can open it again.
+ *
+ * Stripe is untouched by any of this: it keeps reading `paymentSecret` as the
+ * PaymentIntent client secret, exactly as live sites already do.
+ */
+
+/** How a checkout attempt ended. */
+export type PaystackCheckoutOutcome =
+  /** Paid in the modal. */
+  | "succeeded"
+  /** The fan closed the modal without paying. Retryable, not a failure. */
+  | "dismissed"
+  /** Paystack reported a genuine failure after the modal opened. */
+  | "failed"
+  /** The modal could not be used, so the fan was sent to the hosted page. */
+  | "redirected"
+  /** Nothing could be done here at all (server render, or no session to open). */
+  | "unavailable";
+
+/** The bits of a completed Paystack transaction the return leg needs. */
+export type PaystackTransactionResult = {
+  reference?: string;
+  trxref?: string;
+  transaction?: string;
+  status?: string;
+};
+
+/**
+ * A started Paystack charge, exactly as `start-payment` reports it.
+ *
+ * `accessCode` and `checkoutUrl` arrive in the SAME `/transaction/initialize`
+ * response, which is why carrying the fallback costs one field rather than a
+ * second round trip.
+ */
+export type PaystackCheckoutSession = {
+  /** Checkout-session access code. Carries the session; no public key needed. */
+  accessCode?: string | null;
+  /** Hosted checkout URL. The runtime fallback. */
+  checkoutUrl?: string | null;
+  /** Where the redirect leg would have landed. Used on success by default. */
+  returnUrl?: string | null;
+};
+
+export type PaystackCheckoutHandlers = {
+  /**
+   * Paid. When omitted, the helper navigates to `returnUrl` with Paystack's own
+   * `reference`/`trxref` appended, byte for byte what the hosted redirect did,
+   * so every finalise page keeps working untouched. Supply this only when the
+   * surface finalises in place (a modal that shows its own receipt).
+   */
+  onSuccess?: (result: PaystackTransactionResult) => void;
+  /** The fan closed the modal. Re-enable the pay button; change nothing else. */
+  onDismiss?: () => void;
+  /** A real failure, or no usable session at all. */
+  onError?: (message?: string) => void;
+};
+
+/**
+ * How long to wait for the modal to show itself before deciding it will not.
+ *
+ * Long enough that a slow phone on a bad connection is not thrown out of a
+ * working modal, short enough that a fan staring at a dead button gives up
+ * before we do.
+ */
+const MODAL_OPEN_TIMEOUT_MS = 4000;
+const MODAL_POLL_MS = 200;
+
+const inBrowser = (): boolean => typeof window !== "undefined" && typeof document !== "undefined";
+
+/**
+ * Is Paystack's checkout iframe actually on screen right now?
+ *
+ * This decides whether the 4s watchdog falls back to the hosted page, so a
+ * false positive strands a fan on a dead button. The obvious selector,
+ * `iframe[src*="paystack"]`, produces one in two ways that both happen in
+ * practice:
+ *
+ *  1. A DISMISSED modal's iframe is hidden, not removed. On a second attempt it
+ *     still matches, so the watchdog concludes the modal opened when nothing
+ *     did. Hence the visibility check rather than mere presence.
+ *  2. Any iframe whose src merely CONTAINS the string, including third-party
+ *     frames that echo the current page URL back in their own src, which match
+ *     on any host with "paystack" in it. Hence matching the parsed HOST rather
+ *     than a substring of the whole URL.
+ */
+const modalIsPresent = (): boolean => {
+  const frames = Array.from(document.querySelectorAll<HTMLIFrameElement>("iframe[src]"));
+  return frames.some((frame) => {
+    let host: string;
+    try {
+      host = new URL(frame.src, window.location.href).hostname.toLowerCase();
+    } catch {
+      return false;
+    }
+    if (host !== "paystack.com" && !host.endsWith(".paystack.com")) return false;
+
+    // Visibility, not layout size. `getBoundingClientRect` would be the more
+    // thorough test, but the checks that matter are the ones Paystack actually
+    // uses to put a dismissed modal away, and this keeps the rule assertable.
+    if (frame.hidden) return false;
+    const style = window.getComputedStyle(frame);
+    return style.display !== "none" && style.visibility !== "hidden";
+  });
+};
+
+const errorMessageOf = (error: unknown): string | undefined => {
+  if (typeof error === "string") return error;
+  const message = (error as { message?: unknown } | null)?.message;
+  return typeof message === "string" ? message : undefined;
+};
+
+/**
+ * The URL the hosted redirect would have landed on.
+ *
+ * Paystack appends `reference` and `trxref` to the callback URL, and finalise
+ * pages have always been able to read them. Appending the same two params after
+ * a modal success is what makes "nothing downstream changes" literally true.
+ */
+export function paystackReturnUrl(returnUrl: string, result: PaystackTransactionResult): string {
+  const reference = result.reference || result.trxref;
+  if (!reference) return returnUrl;
+  try {
+    const base = inBrowser() ? window.location.href : undefined;
+    const url = new URL(returnUrl, base);
+    url.searchParams.set("reference", reference);
+    url.searchParams.set("trxref", reference);
+    return url.toString();
+  } catch {
+    // A relative URL with no base to resolve against. The caller's own return
+    // path is still the right destination; it just carries no reference.
+    return returnUrl;
+  }
+}
+
+/** True when a start-payment result is a Paystack session this helper can act on. */
+export function hasPaystackSession(session: PaystackCheckoutSession | null | undefined): boolean {
+  return !!(session && (session.accessCode || session.checkoutUrl));
+}
+
+/**
+ * Open the Paystack modal for a started charge.
+ *
+ * Resolves once the attempt has ended one way or another; it never rejects, so
+ * a caller can `await` it from a click handler without a try/catch.
+ */
+export async function openPaystackCheckout(
+  session: PaystackCheckoutSession,
+  handlers: PaystackCheckoutHandlers = {},
+): Promise<PaystackCheckoutOutcome> {
+  // Server render: do nothing at all, and say so rather than throwing.
+  if (!inBrowser()) return "unavailable";
+
+  const accessCode = session.accessCode || undefined;
+  const checkoutUrl = session.checkoutUrl || undefined;
+
+  if (!accessCode && !checkoutUrl) {
+    handlers.onError?.("This payment could not be started. Please try again.");
+    return "unavailable";
+  }
+
+  /** The one runtime fallback: the hosted page the same initialize call returned. */
+  const goToHostedPage = (): PaystackCheckoutOutcome => {
+    if (!checkoutUrl) {
+      handlers.onError?.("The payment window could not be opened. Please try again.");
+      return "unavailable";
+    }
+    window.location.href = checkoutUrl;
+    return "redirected";
+  };
+
+  if (!accessCode) return goToHostedPage();
+
+  let PaystackPop: typeof import("@paystack/inline-js").default;
+  try {
+    // Lazily imported so a blocked CDN, an offline chunk or a CSP is a rejected
+    // promise here instead of a page that will not render.
+    PaystackPop = (await import("@paystack/inline-js")).default;
+  } catch {
+    return goToHostedPage();
+  }
+
+  return new Promise<PaystackCheckoutOutcome>((resolve) => {
+    let settled = false;
+    let opened = false;
+    let poll: ReturnType<typeof setInterval> | undefined;
+    let watchdog: ReturnType<typeof setTimeout> | undefined;
+
+    const stopWatching = () => {
+      if (poll) clearInterval(poll);
+      if (watchdog) clearTimeout(watchdog);
+      poll = undefined;
+      watchdog = undefined;
+    };
+
+    const settle = (outcome: PaystackCheckoutOutcome) => {
+      if (settled) return false;
+      settled = true;
+      stopWatching();
+      resolve(outcome);
+      return true;
+    };
+
+    const succeed = (result: PaystackTransactionResult) => {
+      if (!settle("succeeded")) return;
+      if (handlers.onSuccess) {
+        handlers.onSuccess(result);
+        return;
+      }
+      // No handler: continue down the exact path the redirect used.
+      if (session.returnUrl) window.location.href = paystackReturnUrl(session.returnUrl, result);
+    };
+
+    try {
+      new PaystackPop().resumeTransaction(accessCode, {
+        onSuccess: (transaction) => succeed(transaction ?? {}),
+        // Closing the popup leaves the charge exactly where it was. Nothing is
+        // failed, nothing is cancelled server-side, and the same access code
+        // still opens the same session on the next click.
+        onCancel: () => {
+          if (settle("dismissed")) handlers.onDismiss?.();
+        },
+        // The iframe is up, so the watchdog has nothing left to rescue.
+        onLoad: () => {
+          opened = true;
+          stopWatching();
+        },
+        onError: (error) => {
+          if (settle("failed")) handlers.onError?.(errorMessageOf(error));
+        },
+      });
+    } catch {
+      // `resumeTransaction` threw synchronously, so the modal never got started.
+      settle(goToHostedPage());
+      return;
+    }
+
+    poll = setInterval(() => {
+      if (!modalIsPresent()) return;
+      opened = true;
+      stopWatching();
+    }, MODAL_POLL_MS);
+
+    watchdog = setTimeout(() => {
+      stopWatching();
+      if (settled || opened) return;
+      // The modal never appeared. Send the fan to the hosted page rather than
+      // leaving them looking at a button that did nothing.
+      settle(goToHostedPage());
+    }, MODAL_OPEN_TIMEOUT_MS);
+  });
+}

package/src/utils/ticketOrderOutcome.ts

@@ -118,7 +118,7 @@ export const TICKET_ORDER_REFUNDED_COPY = {
   eyebrow: "Refunded",
   heading: "This order was refunded",
   body:
-    "Your payment has been sent back to the original payment method — how long it takes to appear is up to your bank or card issuer. " +
+    "Your payment has been sent back to the original payment method. How long it takes to appear is up to your bank or card issuer. " +
     "These tickets have been cancelled and will not admit entry.",
   /** Replaces "Total paid" on the amount line. */
   totalLabel: "Total refunded",