@tribe-nest/forge 3.35.0 → 3.37.0

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

@@ -48,7 +48,12 @@ vi.mock("@paystack/inline-js", () => {
 
 // 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";
+import {
+  openPaystackCheckout,
+  paystackReturnUrl,
+  hasPaystackSession,
+  isPaystackPopupOpen,
+} from "../paystackCheckout";
 
 const HOSTED = "https://checkout.paystack.com/abc123";
 const RETURN = "https://artist.test/checkout/finalise?orderId=order-1";
@@ -264,3 +269,79 @@ describe("openPaystackCheckout", () => {
     expect(location.href).toBe("https://artist.test/checkout");
   });
 });
+
+/**
+ * The popup says when it is up, so the dialog it was opened from can stand
+ * down (`ui/headless/dialog.tsx`).
+ *
+ * A flag left stuck ON is worse than no flag: every dialog on the site would
+ * stay non-modal for the rest of the session. So each terminal outcome is
+ * asserted separately rather than trusting one shared teardown.
+ */
+describe("openPaystackCheckout popup state", () => {
+  it("is closed before anything is opened", () => {
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("is open while the fan is deciding, and closed again once they pay", async () => {
+    let captured: ResumeOptions = {};
+    resumeBehaviour = (_code, options) => {
+      captured = options;
+      options.onLoad?.({});
+    };
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(0);
+
+    // The card form is on screen: the dialog behind it must not be holding the
+    // page's pointer events hostage.
+    expect(isPaystackPopupOpen()).toBe(true);
+
+    captured.onSuccess?.({ reference: "pay-uuid" });
+    await pending;
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes on a dismissal, so the fan gets a normal dialog back", async () => {
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onCancel?.();
+    };
+
+    await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes on a provider failure", async () => {
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onError?.({ message: "Card declined" });
+    };
+
+    await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED }, { onError: vi.fn() });
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes when the popup never appears and the fan is sent to the hosted page", async () => {
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+    await pending;
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes when resumeTransaction throws before the popup exists", async () => {
+    resumeBehaviour = () => {
+      throw new Error("popup blew up");
+    };
+
+    await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+});

package/src/utils/paystackCheckout.ts

@@ -129,6 +129,45 @@ const modalIsPresent = (): boolean => {
   });
 };
 
+/**
+ * Is a Paystack popup on screen right now?
+ *
+ * Paystack appends its overlay to `document.body`, which puts it OUTSIDE any
+ * dialog the pay button was rendered in. A modal dialog is built to make
+ * exactly that unreachable: Radix sets `pointer-events: none` on the body and
+ * traps focus inside its own content, so the popup renders on top, looks
+ * usable, and swallows every click. A fan on a code website could not pay for
+ * tickets, a course, a coaching slot, a film, a donation or an offer, because
+ * all six open Paystack from inside a dialog.
+ *
+ * So the popup announces itself and the dialog primitives get out of the way
+ * (`ui/headless/dialog.tsx`). It is published from HERE rather than from a
+ * React module because this file is the one funnel every pillar already goes
+ * through, and a second place that knows when the popup is up is a second place
+ * to forget to clear it.
+ */
+let popupOpen = false;
+const popupListeners = new Set<() => void>();
+
+/** For `useSyncExternalStore`, and for anything else that needs the answer now. */
+export function isPaystackPopupOpen(): boolean {
+  return popupOpen;
+}
+
+/** Subscribe to popup open/close. Returns the unsubscribe. */
+export function subscribeToPaystackPopup(listener: () => void): () => void {
+  popupListeners.add(listener);
+  return () => {
+    popupListeners.delete(listener);
+  };
+}
+
+const setPopupOpen = (next: boolean): void => {
+  if (popupOpen === next) return;
+  popupOpen = next;
+  for (const listener of popupListeners) listener();
+};
+
 const errorMessageOf = (error: unknown): string | undefined => {
   if (typeof error === "string") return error;
   const message = (error as { message?: unknown } | null)?.message;
@@ -222,6 +261,10 @@ export async function openPaystackCheckout(
       if (settled) return false;
       settled = true;
       stopWatching();
+      // Every terminal outcome passes through here, which is what makes "the
+      // popup is up" impossible to leave stuck on: paid, dismissed, failed and
+      // fell-back-to-the-hosted-page all clear it.
+      setPopupOpen(false);
       resolve(outcome);
       return true;
     };
@@ -237,6 +280,10 @@ export async function openPaystackCheckout(
     };
 
     try {
+      // Announced BEFORE the iframe exists, not on `onLoad`. The dialog around
+      // the pay button has to have released the page by the time the popup is
+      // painted, and a fan taps the first card field the instant they see it.
+      setPopupOpen(true);
       new PaystackPop().resumeTransaction(accessCode, {
         onSuccess: (transaction) => succeed(transaction ?? {}),
         // Closing the popup leaves the charge exactly where it was. Nothing is