@tribe-nest/forge 3.35.0 → 3.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.35.0",
+  "version": "3.37.0",
   "publishConfig": {
     "access": "public"
   },

package/src/data/queries/_tests/paymentFlowReturnUrl.spec.tsx

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+/**
+ * The way back from a Paystack payment.
+ *
+ * Four checkouts (event tickets, courses, coaching, offers) build their finalise
+ * URL from an id that does not exist until the resource is created, so they hand
+ * it to `start({ …, returnUrl })` and never as a hook option. The Paystack
+ * session was assembled from the OPTION alone, so for all four it carried no
+ * return URL: the buyer paid, the popup closed, and the helper had nowhere to
+ * send them. They were left sitting on the checkout they had just paid on, with
+ * no receipt, no confirmation and no error — while the charge itself succeeded
+ * every time.
+ *
+ * Stripe never had this: it hands its own `return_url` to `confirmPayment`.
+ *
+ * The real helper is in the path here, with only `@paystack/inline-js` faked, so
+ * this asserts the navigation a fan actually gets rather than what was passed
+ * between two of our own functions.
+ */
+
+type ResumeOptions = {
+  onSuccess?: (t: { reference?: string }) => void;
+  onCancel?: () => void;
+  onLoad?: (r: unknown) => void;
+  onError?: (e: unknown) => void;
+};
+
+let captured: ResumeOptions = {};
+
+vi.mock("@paystack/inline-js", () => ({
+  default: class FakePaystackPop {
+    resumeTransaction(_accessCode: string, options: ResumeOptions = {}) {
+      captured = options;
+      options.onLoad?.({});
+      return {};
+    }
+    cancelTransaction() {}
+  },
+}));
+
+const post = vi.fn();
+
+vi.mock("../../../provider/ForgeProvider", () => ({
+  useForge: () => ({ client: { post }, profileId: "profile-1" }),
+}));
+
+import { usePaymentFlow } from "../usePaymentFlow";
+
+const FINALISE = "https://artist.test/i/events/summer-show/finalise?orderId=order-1";
+
+const wrapper = ({ children }: { children: ReactNode }) => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+let location: { href: string };
+
+beforeEach(() => {
+  captured = {};
+  post.mockReset();
+  post.mockResolvedValue({
+    data: { paymentProvider: "paystack", accessCode: "ac_1", checkoutUrl: "https://checkout.paystack.com/ac_1" },
+  });
+  location = { href: "https://artist.test/i/events/summer-show" };
+  Object.defineProperty(window, "location", { value: location, writable: true, configurable: true });
+});
+
+/** A ticket checkout: nothing is known until the order exists, so nothing is static. */
+const useClickDrivenFlow = () => usePaymentFlow({ path: "/public/events/event-1/start-payment", autoStart: false });
+
+/**
+ * Pay in the popup the flow opened for itself.
+ *
+ * `usePaymentFlow` auto-opens once a charge lands, which is what the ticket
+ * checkout relies on ("Paystack redirected" is its whole payment step), so the
+ * spec waits for that rather than racing it with a hand-driven open.
+ */
+async function payInPopup(reference = "pay-uuid"): Promise<void> {
+  await waitFor(() => expect(captured.onSuccess).toBeTypeOf("function"));
+  await act(async () => {
+    captured.onSuccess?.({ reference });
+  });
+}
+
+describe("usePaymentFlow: returning from a Paystack payment", () => {
+  it("REGRESSION: sends the buyer to the finalise URL the charge was started with", async () => {
+    const { result } = renderHook(useClickDrivenFlow, { wrapper });
+
+    await act(async () => {
+      await result.current.start({ orderId: "order-1", returnUrl: FINALISE });
+    });
+
+    // The server was told where to come back to...
+    expect(post).toHaveBeenCalledWith(
+      "/public/events/event-1/start-payment",
+      expect.objectContaining({ orderId: "order-1", returnUrl: FINALISE }),
+    );
+
+    await payInPopup();
+
+    // ...and so is the buyer. Before this fix `location.href` never moved.
+    expect(location.href).toContain("/finalise");
+    expect(location.href).toContain("orderId=order-1");
+    // The two params every finalise page already reads off a hosted redirect.
+    expect(location.href).toContain("reference=pay-uuid");
+    expect(location.href).toContain("trxref=pay-uuid");
+  });
+
+  it("still honours a static returnUrl for the flows that have one up front", async () => {
+    // The cart, film rentals and payment links pass it as an option, and that
+    // path must not regress while the click-driven one is fixed.
+    const { result } = renderHook(
+      () => usePaymentFlow({ path: "/public/payment-links/link-1/start-payment", returnUrl: FINALISE, autoStart: false }),
+      { wrapper },
+    );
+
+    await act(async () => {
+      await result.current.start();
+    });
+    await payInPopup();
+
+    expect(location.href).toContain("reference=pay-uuid");
+  });
+
+  it("leaves navigation alone when the surface finalises in place", async () => {
+    // Donations show their own thank-you step, so they pass `onPaystackSuccess`
+    // and must NOT be navigated away from it.
+    const onPaystackSuccess = vi.fn();
+    const { result } = renderHook(
+      () =>
+        usePaymentFlow({ path: "/public/donations/d-1/start-payment", autoStart: false, onPaystackSuccess }),
+      { wrapper },
+    );
+
+    await act(async () => {
+      await result.current.start({ returnUrl: FINALISE });
+    });
+    await payInPopup();
+
+    expect(onPaystackSuccess).toHaveBeenCalledWith({ reference: "pay-uuid" });
+    expect(location.href).toBe("https://artist.test/i/events/summer-show");
+  });
+
+  it("carries the LATEST start's URL when a charge is re-minted", async () => {
+    // A discount code re-starts the charge. Sending the buyer to the first
+    // attempt's finalise page would land them on a different order.
+    const { result } = renderHook(useClickDrivenFlow, { wrapper });
+
+    await act(async () => {
+      await result.current.start({ orderId: "order-1", returnUrl: "https://artist.test/finalise?orderId=order-1" });
+    });
+    await act(async () => {
+      await result.current.start({ orderId: "order-2", returnUrl: "https://artist.test/finalise?orderId=order-2" });
+    });
+    await payInPopup();
+
+    expect(location.href).toContain("orderId=order-2");
+    expect(location.href).not.toContain("orderId=order-1");
+  });
+});

package/src/data/queries/usePaymentFlow.ts

@@ -63,10 +63,32 @@ export function usePaymentFlow(opts: UsePaymentFlowOptions) {
     onError: opts.onPaystackError,
   };
 
+  /**
+   * The return URL the charge was actually STARTED with.
+   *
+   * Click-driven flows (event tickets, courses, coaching, offers) build their
+   * finalise URL from an id that does not exist until the resource is created,
+   * so they pass it in the `start()` override and never as a hook option. The
+   * Paystack session was read from the OPTION alone, so for all four it was
+   * `undefined`: the fan paid, the popup closed, `openPaystackCheckout` had
+   * nowhere to send them, and they sat on the checkout they had just paid on
+   * with no receipt and no confirmation. The charge was fine every time; only
+   * the way back was missing. Stripe was unaffected because it hands its own
+   * `return_url` to `confirmPayment`.
+   *
+   * A ref rather than state: it is read when the popup is opened, never
+   * rendered, and a re-render on every start would re-run the auto-open effect.
+   */
+  const startedReturnUrlRef = useRef<string | undefined>(undefined);
+
   const mutation = useMutation<PaymentFlowResult, unknown, Record<string, unknown> | undefined>({
     mutationFn: async (override) => {
       // override wins — click-driven flows pass a just-created orderId/returnUrl.
-      const res = await client.post(path as string, { ...body, profileId, returnUrl, ...(override ?? {}) });
+      const payload = { ...body, profileId, returnUrl, ...(override ?? {}) };
+      // Whatever the server was told, byte for byte. Resolving it any other way
+      // is how these two drift apart again.
+      startedReturnUrlRef.current = (payload.returnUrl as string | undefined) || undefined;
+      const res = await client.post(path as string, payload);
       const data = res.data as PaymentStartResponse;
       const provider = (data.paymentProvider ?? data.paymentProviderName) as PaymentProviderName | undefined;
       return { ...data, provider };
@@ -88,8 +110,11 @@ export function usePaymentFlow(opts: UsePaymentFlowOptions) {
    * session, which is what makes "closed it by accident" recoverable.
    */
   const openPaystack = useCallback(async (): Promise<PaystackCheckoutOutcome> => {
-    if (!hasPaystackSession(session)) return "unavailable";
-    return openPaystackCheckout(session, {
+    // The URL the charge was started with wins over the static option: for a
+    // click-driven flow it is the only one there has ever been.
+    const active = { ...session, returnUrl: startedReturnUrlRef.current ?? session.returnUrl };
+    if (!hasPaystackSession(active)) return "unavailable";
+    return openPaystackCheckout(active, {
       onSuccess: handlersRef.current.onSuccess,
       onDismiss: handlersRef.current.onDismiss,
       onError: handlersRef.current.onError,

package/src/i18n/de.json

@@ -22,7 +22,6 @@
   "forge.account_dashboard.cancelled": "Storniert",
   "forge.account_dashboard.cancelling": "Wird storniert…",
   "forge.account_dashboard.close": "Schließen",
-  "forge.account_dashboard.community_spaces": "Community-Bereiche",
   "forge.account_dashboard.confirm_password": "Neues Passwort bestätigen",
   "forge.account_dashboard.current_password": "Aktuelles Passwort",
   "forge.account_dashboard.data_export_description": "Exportiere eine Kopie deiner persönlichen Daten.",
@@ -37,6 +36,7 @@
   "forge.account_dashboard.last_name": "Nachname",
   "forge.account_dashboard.leave_waitlist": "Warteliste verlassen",
   "forge.account_dashboard.log_out": "Abmelden",
+  "forge.account_dashboard.member_area": "Mitgliederbereich",
   "forge.account_dashboard.membership_cancel_error": "Wir konnten deine Mitgliedschaft nicht kündigen. Bitte versuche es erneut oder kontaktiere uns.",
   "forge.account_dashboard.membership_change": "Ändern",
   "forge.account_dashboard.membership_empty": "Du hast keine aktive Mitgliedschaft.",
@@ -62,6 +62,7 @@
   "forge.account_dashboard.profile_section_title": "Profilangaben",
   "forge.account_dashboard.profile_update_error": "Profil konnte nicht aktualisiert werden.",
   "forge.account_dashboard.profile_update_success": "Profil aktualisiert.",
+  "forge.account_dashboard.rentals_title": "Meine Ausleihen",
   "forge.account_dashboard.request_deletion": "Kontolöschung beantragen",
   "forge.account_dashboard.reschedule": "Verschieben",
   "forge.account_dashboard.reschedule_empty": "In den nächsten zwei Wochen sind keine anderen Zeiten frei.",
@@ -80,6 +81,7 @@
   "forge.account_dashboard.tab_membership": "Mitgliedschaft",
   "forge.account_dashboard.tab_notifications": "Mitteilungen",
   "forge.account_dashboard.tab_orders": "Bestellungen",
+  "forge.account_dashboard.tab_rentals": "Ausleihen",
   "forge.account_dashboard.tab_saved": "Gespeichert",
   "forge.account_dashboard.tab_tickets": "Tickets",
   "forge.account_dashboard.tab_waitlist": "Warteliste",
@@ -937,6 +939,9 @@
   "forge.membership_checkout.title": "{tier_name} beitreten",
   "forge.membership_checkout.total": "Gesamt",
   "forge.membership_checkout.view_memberships": "Mitgliedschaften ansehen",
+  "forge.membership_tier_callout.benefits_label": "Vorteile:",
+  "forge.membership_tier_callout.join_title": "{tier_name} beitreten",
+  "forge.membership_tier_callout.more_benefits": "+{count} weitere Vorteile",
   "forge.membership_tiers.empty_title": "Keine Mitgliedschaften verfügbar.",
   "forge.membership_tiers.heading": "Mitgliedschaft",
   "forge.membership_tiers.price_free": "Kostenlos",

package/src/i18n/en.json

@@ -22,7 +22,6 @@
   "forge.account_dashboard.cancelled": "Cancelled",
   "forge.account_dashboard.cancelling": "Cancelling…",
   "forge.account_dashboard.close": "Close",
-  "forge.account_dashboard.community_spaces": "Community spaces",
   "forge.account_dashboard.confirm_password": "Confirm new password",
   "forge.account_dashboard.current_password": "Current password",
   "forge.account_dashboard.data_export_description": "Export a copy of your personal data.",
@@ -37,6 +36,7 @@
   "forge.account_dashboard.last_name": "Last name",
   "forge.account_dashboard.leave_waitlist": "Leave waitlist",
   "forge.account_dashboard.log_out": "Log out",
+  "forge.account_dashboard.member_area": "Member Area",
   "forge.account_dashboard.membership_cancel_error": "We couldn't cancel your membership. Please try again or contact us.",
   "forge.account_dashboard.membership_change": "Change",
   "forge.account_dashboard.membership_empty": "You don't have an active membership.",
@@ -62,6 +62,7 @@
   "forge.account_dashboard.profile_section_title": "Profile Information",
   "forge.account_dashboard.profile_update_error": "Failed to update profile.",
   "forge.account_dashboard.profile_update_success": "Profile updated.",
+  "forge.account_dashboard.rentals_title": "My Rentals",
   "forge.account_dashboard.request_deletion": "Request Account Deletion",
   "forge.account_dashboard.reschedule": "Reschedule",
   "forge.account_dashboard.reschedule_empty": "No other times are open in the next two weeks.",
@@ -80,6 +81,7 @@
   "forge.account_dashboard.tab_membership": "Membership",
   "forge.account_dashboard.tab_notifications": "Notifications",
   "forge.account_dashboard.tab_orders": "Orders",
+  "forge.account_dashboard.tab_rentals": "Rentals",
   "forge.account_dashboard.tab_saved": "Saved",
   "forge.account_dashboard.tab_tickets": "Tickets",
   "forge.account_dashboard.tab_waitlist": "Waitlist",
@@ -937,6 +939,9 @@
   "forge.membership_checkout.title": "Join {tier_name}",
   "forge.membership_checkout.total": "Total",
   "forge.membership_checkout.view_memberships": "View memberships",
+  "forge.membership_tier_callout.benefits_label": "Benefits:",
+  "forge.membership_tier_callout.join_title": "Join {tier_name}",
+  "forge.membership_tier_callout.more_benefits": "+{count} more benefits",
   "forge.membership_tiers.empty_title": "No membership tiers available.",
   "forge.membership_tiers.heading": "Membership",
   "forge.membership_tiers.price_free": "Free",

package/src/ui/format/membershipPriceLabel.ts

@@ -0,0 +1,29 @@
+import type { ForgeT } from "../../i18n";
+import type { MembershipTier } from "../../types/models";
+import { cycleFloor, offeredCycles } from "./membershipPwyw";
+
+/**
+ * The one sentence that prices a membership tier.
+ *
+ * Shared rather than copied, because the rule it encodes was a bug: a tier
+ * priced on ONE cycle has to be advertised on that cycle. Reading the monthly
+ * minimum unconditionally printed "Pay what you want from $0/mo" on a
+ * yearly-only tier, which reads as free and is the opposite of the truth. A
+ * second copy of this in the next surface that prices a tier would be the copy
+ * that misses the next fix.
+ *
+ * The keys stay under `forge.membership_tiers.*`: this is one sentence about one
+ * thing, and every surface that shows a tier price must say it the same way, so
+ * an operator editing the copy edits it once.
+ */
+export function membershipPriceLabel(tier: MembershipTier, t: ForgeT, fmt: (amount: number) => string): string {
+  const cycles = offeredCycles(tier);
+  if (tier.payWhatYouWant) {
+    return cycles.month
+      ? t("forge.membership_tiers.price_pwyw", { amount: fmt(cycleFloor(tier, "month")) })
+      : t("forge.membership_tiers.price_pwyw_yearly", { amount: fmt(cycleFloor(tier, "year")) });
+  }
+  if (cycles.month) return t("forge.membership_tiers.price_monthly", { amount: fmt(cycleFloor(tier, "month")) });
+  if (cycles.year) return t("forge.membership_tiers.price_yearly", { amount: fmt(cycleFloor(tier, "year")) });
+  return t("forge.membership_tiers.price_free");
+}

package/src/ui/headless/_tests/dialogPaystackStandDown.spec.tsx

@@ -0,0 +1,185 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { act, render, fireEvent } from "@testing-library/react";
+
+/**
+ * The bug this file exists for: a fan on a code website could not pay with
+ * Paystack from inside a dialog.
+ *
+ * Paystack appends its checkout overlay to `document.body`. A modal Radix
+ * dialog sets `pointer-events: none` on that same body and traps focus inside
+ * its own content, so the popup arrives on top of the page, looks completely
+ * normal, and eats every click and keystroke aimed at it. The fan sees the card
+ * form and cannot type in it. Event tickets, courses, coaching, films,
+ * donations and offers all open the popup from inside one of these dialogs, so
+ * every one of them was unpayable on Paystack.
+ *
+ * It went unnoticed because the only inline-checkout UI coverage was the
+ * payment-link page, which is a plain page with no dialog on it.
+ *
+ * jsdom rather than `renderToStaticMarkup`: the whole behaviour is mount
+ * effects (Radix writes the body style on mount and restores it on unmount), so
+ * there is nothing to assert without a real DOM lifecycle.
+ */
+
+type ResumeOptions = {
+  onSuccess?: (t: { reference?: string }) => void;
+  onCancel?: () => void;
+  onLoad?: (r: unknown) => void;
+  onError?: (e: unknown) => void;
+};
+
+let captured: ResumeOptions = {};
+
+vi.mock("@paystack/inline-js", () => ({
+  default: class FakePaystackPop {
+    resumeTransaction(_accessCode: string, options: ResumeOptions = {}) {
+      captured = options;
+      options.onLoad?.({});
+      return {};
+    }
+    cancelTransaction() {}
+  },
+}));
+
+import { openPaystackCheckout } from "../../../utils/paystackCheckout";
+import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle } from "../dialog";
+
+/** jsdom refuses real navigation, so `location` is replaced with a plain bag. */
+beforeEach(() => {
+  captured = {};
+  Object.defineProperty(window, "location", {
+    value: { href: "https://artist.test/tickets" },
+    writable: true,
+    configurable: true,
+  });
+});
+
+function Checkout({ open, onOpenChange }: { open: boolean; onOpenChange?: (next: boolean) => void }) {
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Tickets</DialogTitle>
+          <button type="button">Pay</button>
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+/**
+ * Open the popup the way a pay button does, and leave it open.
+ *
+ * The attempt is handed back inside an object rather than as the promise
+ * itself: `await` flattens a promise returned from an async function, and this
+ * one deliberately does not settle until the fan acts.
+ */
+async function openPopup(): Promise<{ attempt: Promise<unknown> }> {
+  let attempt: Promise<unknown> = Promise.resolve();
+  await act(async () => {
+    attempt = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: "https://checkout.paystack.com/abc" });
+    // Let the dynamic import of the SDK land.
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+  return { attempt };
+}
+
+/** Close the popup and let the attempt finish, as a dismissal does. */
+async function dismissPopup(attempt: Promise<unknown>): Promise<void> {
+  await act(async () => {
+    captured.onCancel?.();
+    await attempt;
+  });
+}
+
+describe("the dialog and the Paystack popup", () => {
+  it("locks the page while it is an ordinary modal", () => {
+    // The baseline, asserted so the rest of this file cannot pass by the
+    // dialog simply never being modal in the first place.
+    render(<Checkout open />);
+
+    expect(document.body.style.pointerEvents).toBe("none");
+  });
+
+  it("REGRESSION: releases the page the moment the popup opens", async () => {
+    render(<Checkout open />);
+    expect(document.body.style.pointerEvents).toBe("none");
+
+    const { attempt } = await openPopup();
+
+    // The fan can now reach the card form. This one assertion is the bug.
+    expect(document.body.style.pointerEvents).not.toBe("none");
+
+    await dismissPopup(attempt);
+  });
+
+  it("stays out of the way after a dismissal rather than remounting the checkout under the fan", async () => {
+    // Radix renders modal and non-modal content as different components, so
+    // flipping back would remount everything inside the dialog in front of
+    // somebody who just closed the popup and is about to try again.
+    render(<Checkout open />);
+    const { attempt } = await openPopup();
+
+    await dismissPopup(attempt);
+
+    expect(document.body.style.pointerEvents).not.toBe("none");
+  });
+
+  it("is a normal modal again the next time it opens", async () => {
+    // Closed by its owner setting `open` to false, with no `onOpenChange` in
+    // sight. That is how the ticket modal closes when a buyer sends their
+    // selection to the cart, and watching only `onOpenChange` left those
+    // dialogs non-modal for the rest of the visit.
+    const { rerender } = render(<Checkout open />);
+    const { attempt } = await openPopup();
+    await dismissPopup(attempt);
+
+    await act(async () => {
+      rerender(<Checkout open={false} />);
+    });
+    await act(async () => {
+      rerender(<Checkout open />);
+    });
+
+    expect(document.body.style.pointerEvents).toBe("none");
+  });
+
+  it("REGRESSION: Escape closes the payment window, not the checkout behind it", async () => {
+    // Non-modal dialogs still dismiss on Escape, and a fan pressing it means
+    // "close Paystack". Taking the checkout down with it loses the order.
+    const onOpenChange = vi.fn();
+    render(<Checkout open onOpenChange={onOpenChange} />);
+    const { attempt } = await openPopup();
+
+    await act(async () => {
+      fireEvent.keyDown(document, { key: "Escape" });
+    });
+
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+
+    await dismissPopup(attempt);
+  });
+
+  it("REGRESSION: a click on Paystack's own backdrop does not close the checkout", async () => {
+    // Paystack's overlay is a node in THIS document, outside the dialog
+    // content, so a non-modal dialog reads a tap beside the card form as an
+    // outside interaction and dismisses.
+    const onOpenChange = vi.fn();
+    render(<Checkout open onOpenChange={onOpenChange} />);
+    const { attempt } = await openPopup();
+
+    const backdrop = document.createElement("div");
+    document.body.appendChild(backdrop);
+    await act(async () => {
+      fireEvent.pointerDown(backdrop);
+      fireEvent.mouseDown(backdrop);
+    });
+
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+
+    await dismissPopup(attempt);
+  });
+});

package/src/ui/headless/dialog.tsx

@@ -1,14 +1,149 @@
-// Unstyled dialog primitives — thin re-export of Radix Dialog so the headless
+// Unstyled dialog primitives — a thin wrapper over Radix Dialog so the headless
 // blocks get portal + focus-trap + a11y + keyboard for free, with zero styling.
-export {
-  Root as DialogRoot,
+//
+// Thin, but no longer a bare re-export: `DialogRoot` and `DialogContent` stand
+// down while a Paystack popup is on screen. See `usePaystackPopupOpen` below
+// for why that is not optional.
+import * as React from "react";
+import {
+  Root,
   Trigger as DialogTrigger,
   Portal as DialogPortal,
   Overlay as DialogOverlay,
-  Content as DialogContent,
+  Content,
   Close as DialogClose,
   Title as DialogTitle,
   Description as DialogDescription,
 } from "@radix-ui/react-dialog";
+import { isPaystackPopupOpen, subscribeToPaystackPopup } from "../../utils/paystackCheckout";
 
+export { DialogTrigger, DialogPortal, DialogOverlay, DialogClose, DialogTitle, DialogDescription };
 export { Slot } from "@radix-ui/react-slot";
+
+/**
+ * Is Paystack's popup on screen right now?
+ *
+ * Exported for a site that builds its own dialog instead of using these
+ * primitives: the popup lives on `document.body`, so ANY modal layer that locks
+ * the page will lock the popup out with it.
+ */
+export function usePaystackPopupOpen(): boolean {
+  return React.useSyncExternalStore(
+    subscribeToPaystackPopup,
+    isPaystackPopupOpen,
+    // SSR: no popup can be open on the server, and guessing "yes" would render
+    // a non-modal dialog that turns modal on hydration.
+    () => false,
+  );
+}
+
+/**
+ * The dialog root, which STOPS BEING MODAL once a Paystack popup opens inside
+ * it.
+ *
+ * A modal Radix dialog sets `pointer-events: none` on `document.body` and traps
+ * focus in its own content. Paystack appends its overlay to the body, outside
+ * that content, so both of those apply to the popup: the fan sees the card form
+ * on top of everything, clicks it, and nothing happens — the dialog they opened
+ * it from is eating every event. Every Paystack pillar on a code website (event
+ * tickets, courses, coaching, films, donations, offers) opens the popup from
+ * inside one of these, so all six were unpayable.
+ *
+ * Non-modal content drops both behaviours, which is exactly the amount of
+ * getting-out-of-the-way required, and the popup's own overlay is still on top
+ * of the page at a z-index nothing here competes with.
+ *
+ * ## Why it does not switch back when the popup closes
+ *
+ * Radix renders modal and non-modal content as DIFFERENT components, so
+ * flipping the flag remounts everything inside the dialog. Once is free: the
+ * popup is covering the screen at that moment and the pillar hooks that hold
+ * the checkout state live OUTSIDE the dialog content. Flipping back on dismissal
+ * would remount a second time in front of the fan, resetting whatever they had
+ * typed into the step they are looking at. So the dialog stays non-modal until
+ * it CLOSES, and opens modal again next time.
+ *
+ * A host that passes `modal={false}` keeps it: this only ever removes modality.
+ */
+export function DialogRoot({
+  modal,
+  open,
+  onOpenChange,
+  ...props
+}: React.ComponentProps<typeof Root>): React.ReactElement {
+  const popupOpen = usePaystackPopupOpen();
+  const [stoodDown, setStoodDown] = React.useState(false);
+
+  React.useEffect(() => {
+    if (popupOpen) setStoodDown(true);
+  }, [popupOpen]);
+
+  /**
+   * Closing ends the stand-down, so the NEXT time this dialog opens it is an
+   * ordinary modal again.
+   *
+   * Both routes are covered on purpose. A CONTROLLED dialog can be closed by
+   * its owner setting `open` to false without `onOpenChange` ever firing (the
+   * ticket modal does exactly that when the buyer sends a selection to the
+   * cart), and an UNCONTROLLED one has no `open` prop to watch.
+   */
+  React.useEffect(() => {
+    if (open === false) setStoodDown(false);
+  }, [open]);
+
+  return (
+    <Root
+      {...props}
+      open={open}
+      modal={modal === false ? false : !stoodDown}
+      onOpenChange={(next) => {
+        if (!next) setStoodDown(false);
+        onOpenChange?.(next);
+      }}
+    />
+  );
+}
+
+/**
+ * The dialog body, which refuses to fight the Paystack popup for focus or for
+ * the fan's clicks.
+ *
+ * Three defaults have to be suspended while the popup is up, and all three are
+ * the dialog doing its job in a situation where its job is wrong:
+ *
+ *  - **Auto-focus on open.** A non-modal remount focuses its first control,
+ *    which would yank the caret out of the card field the fan is typing in.
+ *  - **Dismiss on outside interaction.** Paystack's backdrop is a click in THIS
+ *    document, outside this content, so closing the popup by tapping beside it
+ *    would take the checkout down with it.
+ *  - **Dismiss on Escape.** Same thing with the key that means "close the
+ *    payment window".
+ *
+ * Each host handler still runs; the suspension is applied after it, so a
+ * surface that wants its own behaviour keeps it everywhere except here.
+ */
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof Content>,
+  React.ComponentPropsWithoutRef<typeof Content>
+>(function DialogContent({ onOpenAutoFocus, onInteractOutside, onEscapeKeyDown, ...props }, ref) {
+  const popupOpen = usePaystackPopupOpen();
+
+  return (
+    <Content
+      {...props}
+      ref={ref}
+      onOpenAutoFocus={(event) => {
+        onOpenAutoFocus?.(event);
+        if (popupOpen) event.preventDefault();
+      }}
+      onInteractOutside={(event) => {
+        onInteractOutside?.(event);
+        if (popupOpen) event.preventDefault();
+      }}
+      onEscapeKeyDown={(event) => {
+        onEscapeKeyDown?.(event);
+        if (popupOpen) event.preventDefault();
+      }}
+    />
+  );
+});