@tribe-nest/forge 3.53.0 → 3.57.0

package/src/ui/payment/_tests/ForgeStripePaymentTrial.spec.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { ReactNode } from "react";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeStripePayment } from "../ForgeStripePayment";
+
+/**
+ * The built-in Stripe renderer routes on the SECRET: a SetupIntent secret is
+ * confirmed with `confirmSetup` whatever started it. A free trial on a paid
+ * membership reads "Start free trial" with the first-charge consent line under
+ * it; an application keeps its own copy; a PaymentIntent still pays.
+ */
+
+const stripe = vi.hoisted(() => ({
+  confirmSetup: vi.fn(async (_args: unknown) => ({ setupIntent: { status: "succeeded" } }) as Record<string, unknown>),
+  confirmPayment: vi.fn(async (_args: unknown) => ({ paymentIntent: { status: "succeeded" } }) as Record<string, unknown>),
+}));
+
+vi.mock("@stripe/stripe-js", () => ({ loadStripe: () => Promise.resolve({}) }));
+vi.mock("@stripe/react-stripe-js", () => ({
+  Elements: ({ children }: { children: ReactNode }) => <>{children}</>,
+  PaymentElement: () => null,
+  useStripe: () => stripe,
+  useElements: () => ({}),
+}));
+vi.mock("../../../data/queries/useWebsite", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../data/queries/useWebsite")>()),
+  useSiteConfig: () => ({ data: { stripePublishableKey: "pk_test", stripeAccountId: "acct_1", currency: "USD" } }),
+}));
+
+function mount(props: Partial<Parameters<typeof ForgeStripePayment>[0]>) {
+  const onSucceeded = vi.fn();
+  render(
+    <PublicAuthContext.Provider value={{ user: null, currencies: null, userSelectedCurrency: "USD" } as never}>
+      <ForgeStripePayment
+        clientSecret="seti_1_secret_2"
+        returnUrl="https://site.test/i/account?tab=membership&confirmSubscription=true"
+        amount={12}
+        currency="USD"
+        mode="manual"
+        onSucceeded={onSucceeded}
+        {...props}
+      />
+    </PublicAuthContext.Provider>,
+  );
+  return { onSucceeded };
+}
+
+beforeEach(() => {
+  stripe.confirmSetup.mockClear();
+  stripe.confirmPayment.mockClear();
+});
+afterEach(() => cleanup());
+
+describe("ForgeStripePayment: a free trial's SetupIntent", () => {
+  it("reads Start free trial, shows the consent line, and confirms with confirmSetup", async () => {
+    const { onSucceeded } = mount({ trial: { endsAt: "2026-10-01T12:00:00.000Z", billingCycle: "month" } });
+
+    const button = await screen.findByRole("button", { name: "Start free trial" });
+    const notice = screen.getByTestId("trial-consent-notice");
+    expect(notice.textContent).toMatch(
+      /^Nothing is charged today\. .*12.* per month from Oct 1, 2026\. Cancel before then and you will not be charged\.$/,
+    );
+    expect(screen.queryByTestId("setup-consent-notice")).toBeNull();
+
+    fireEvent.click(button);
+    await waitFor(() => expect(onSucceeded).toHaveBeenCalledTimes(1));
+    expect(stripe.confirmSetup).toHaveBeenCalledTimes(1);
+    expect(stripe.confirmSetup.mock.calls[0][0]).toMatchObject({
+      confirmParams: { return_url: "https://site.test/i/account?tab=membership&confirmSubscription=true" },
+      redirect: "if_required",
+    });
+    expect(stripe.confirmPayment).not.toHaveBeenCalled();
+  });
+
+  it("names a yearly cycle", async () => {
+    mount({ trial: { endsAt: "2026-10-01T12:00:00.000Z", billingCycle: "year" } });
+    expect((await screen.findByTestId("trial-consent-notice")).textContent).toContain(" per year from ");
+  });
+
+  it("keeps the application copy for a SetupIntent with no trial", async () => {
+    mount({ trial: null });
+    expect(await screen.findByRole("button", { name: "Submit application" })).toBeTruthy();
+    expect(screen.getByTestId("setup-consent-notice")).toBeTruthy();
+    expect(screen.queryByTestId("trial-consent-notice")).toBeNull();
+  });
+
+  it("ignores trial on a PaymentIntent and pays", async () => {
+    const { onSucceeded } = mount({
+      clientSecret: "pi_1_secret_2",
+      trial: { endsAt: "2026-10-01T12:00:00.000Z", billingCycle: "month" },
+    });
+    expect(screen.queryByTestId("trial-consent-notice")).toBeNull();
+    const button = await screen.findByRole("button", { name: /^Pay / });
+    fireEvent.click(button);
+    await waitFor(() => expect(onSucceeded).toHaveBeenCalledTimes(1));
+    expect(stripe.confirmPayment).toHaveBeenCalledTimes(1);
+    expect(stripe.confirmSetup).not.toHaveBeenCalled();
+  });
+});

package/src/ui/payment/_tests/stripeConfirmOutcome.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from "vitest";
+import {
+  deferredChargeNotice,
+  isDeferredSettlement,
+  isManualConfirmSuccess,
+  MANUAL_CONFIRM_SUCCESS_STATUSES,
+} from "../stripeConfirmOutcome";
+
+/**
+ * The one-line fix from the curated-access design (section 6.2, step 2): a
+ * deferred charge leaves the PaymentIntent at `requires_capture`, and the
+ * manual-mode branch of `ForgeStripePayment` used to read anything that was
+ * not `succeeded`/`processing` as "Payment did not complete". The decision is
+ * a pure function now, so the renderer cannot drift back.
+ */
+describe("isManualConfirmSuccess", () => {
+  it("REGRESSION: counts an authorised, uncaptured intent as the fan being done", () => {
+    expect(isManualConfirmSuccess("requires_capture")).toBe(true);
+  });
+
+  it("keeps the two statuses it always accepted", () => {
+    expect(isManualConfirmSuccess("succeeded")).toBe(true);
+    expect(isManualConfirmSuccess("processing")).toBe(true);
+  });
+
+  it("still refuses every status that means the fan is not done", () => {
+    for (const status of ["requires_payment_method", "requires_confirmation", "requires_action", "canceled"]) {
+      expect(isManualConfirmSuccess(status)).toBe(false);
+    }
+    expect(isManualConfirmSuccess(undefined)).toBe(false);
+    expect(isManualConfirmSuccess(null)).toBe(false);
+    expect(isManualConfirmSuccess("")).toBe(false);
+  });
+
+  it("exposes the same set the renderer reads, so a custom renderer can share it", () => {
+    expect([...MANUAL_CONFIRM_SUCCESS_STATUSES].sort()).toEqual(["processing", "requires_capture", "succeeded"]);
+  });
+});
+
+describe("isDeferredSettlement", () => {
+  it("is true only for an explicit deferred charge", () => {
+    expect(isDeferredSettlement("deferred")).toBe(true);
+    expect(isDeferredSettlement("immediate")).toBe(false);
+    // An older API build sends nothing, and nothing must render as a sale.
+    expect(isDeferredSettlement(undefined)).toBe(false);
+    expect(isDeferredSettlement(null)).toBe(false);
+  });
+});
+
+describe("deferredChargeNotice", () => {
+  it("promises a visible hold only when the provider actually places one", () => {
+    expect(deferredChargeNotice("authorization")).toBe("authorization");
+    expect(deferredChargeNotice("saved_instrument")).toBe("saved_instrument");
+  });
+
+  it("falls back to the quieter line for an unknown strategy", () => {
+    // Promising a hold that never appears is the larger lie of the two.
+    expect(deferredChargeNotice(undefined)).toBe("saved_instrument");
+    expect(deferredChargeNotice(null)).toBe("saved_instrument");
+  });
+});

package/src/ui/payment/_tests/stripeIntentKind.spec.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { isSetupConfirmSuccess, SETUP_CONFIRM_SUCCESS_STATUSES, stripeIntentKind } from "../stripeIntentKind";
+
+/**
+ * An application to a membership tier saves the card (a SetupIntent) instead of
+ * charging it. The renderer routes on the secret, and confirming a setup secret
+ * through `confirmPayment` fails with an error the fan cannot act on, so the
+ * routing is a pure function pinned here.
+ */
+describe("stripeIntentKind", () => {
+  it("routes a SetupIntent secret to the setup confirm", () => {
+    expect(stripeIntentKind("seti_1AbC_secret_xyz")).toBe("setup");
+  });
+
+  it("keeps every other secret on the payment confirm", () => {
+    expect(stripeIntentKind("pi_1AbC_secret_xyz")).toBe("payment");
+    // Only the prefix counts, never a substring.
+    expect(stripeIntentKind("pi_seti_secret")).toBe("payment");
+    expect(stripeIntentKind("")).toBe("payment");
+    expect(stripeIntentKind(undefined)).toBe("payment");
+    expect(stripeIntentKind(null)).toBe("payment");
+  });
+});
+
+describe("isSetupConfirmSuccess", () => {
+  it("counts a saved card, and a delayed method still processing, as the fan being done", () => {
+    expect(isSetupConfirmSuccess("succeeded")).toBe(true);
+    expect(isSetupConfirmSuccess("processing")).toBe(true);
+  });
+
+  it("refuses every status that means the card is not saved", () => {
+    for (const status of ["requires_payment_method", "requires_confirmation", "requires_action", "canceled"]) {
+      expect(isSetupConfirmSuccess(status)).toBe(false);
+    }
+    expect(isSetupConfirmSuccess(undefined)).toBe(false);
+    expect(isSetupConfirmSuccess(null)).toBe(false);
+    expect(isSetupConfirmSuccess("")).toBe(false);
+  });
+
+  it("exposes the set the renderer reads", () => {
+    expect([...SETUP_CONFIRM_SUCCESS_STATUSES].sort()).toEqual(["processing", "succeeded"]);
+  });
+});

package/src/ui/payment/stripeConfirmOutcome.ts

@@ -0,0 +1,50 @@
+import type { DeferredChargeStrategy, PaymentSettlement } from "../../types/models";
+
+/**
+ * The PaymentIntent statuses `confirmPayment` can leave behind that mean "the
+ * fan's part is done", in the manual (confirm-in-place) branch of
+ * `ForgeStripePayment`.
+ *
+ *   succeeded         charged
+ *   processing        a delayed-notification method (bank debit); charged later
+ *   requires_capture  AUTHORISED, not captured: a deferred charge. The platform
+ *                     captures it when the organiser approves a ticket request
+ *                     (curated access, feature 3) and cancels it otherwise.
+ *
+ * Before `requires_capture` was here a request checkout confirmed the card,
+ * Stripe answered exactly what a manual-capture intent answers, and the
+ * renderer told the fan "Payment did not complete" while the order was already
+ * on its way to `pending_approval`. Anything else (`requires_payment_method`,
+ * `requires_action` that did not resolve, `canceled`) is not done.
+ */
+export const MANUAL_CONFIRM_SUCCESS_STATUSES: ReadonlySet<string> = new Set([
+  "succeeded",
+  "processing",
+  "requires_capture",
+]);
+
+/** Does this post-confirm PaymentIntent status count as the fan having finished? */
+export function isManualConfirmSuccess(status: string | null | undefined): boolean {
+  return !!status && MANUAL_CONFIRM_SUCCESS_STATUSES.has(status);
+}
+
+/** A deferred charge: the card is committed now and taken only on approval. */
+export function isDeferredSettlement(settlement: PaymentSettlement | null | undefined): boolean {
+  return settlement === "deferred";
+}
+
+/**
+ * Which explanation goes under the pay button on a deferred charge.
+ *
+ * `authorization` places a hold the fan will SEE on their statement, so the
+ * line has to say so or the first thing they notice is a pending charge they
+ * were promised would not happen. `saved_instrument` (a provider that stores
+ * the card and charges it later) takes nothing, and the line says only that.
+ * An unknown strategy is treated as the quieter of the two: promising a hold
+ * that never appears is the lesser lie.
+ */
+export function deferredChargeNotice(
+  strategy: DeferredChargeStrategy | null | undefined,
+): "authorization" | "saved_instrument" {
+  return strategy === "authorization" ? "authorization" : "saved_instrument";
+}

package/src/ui/payment/stripeIntentKind.ts

@@ -0,0 +1,32 @@
+/**
+ * Which kind of Stripe intent a client secret belongs to.
+ *
+ * A PaymentIntent secret (`pi_..._secret_...`) takes money now; a SetupIntent
+ * secret (`seti_..._secret_...`) only saves the card for a later charge, which
+ * is what an application to a membership tier does: nothing is charged unless
+ * the business approves. The two confirm through different Stripe calls
+ * (`confirmPayment` vs `confirmSetup`), and calling the wrong one fails with an
+ * error the fan cannot act on, so the renderer routes on the secret itself.
+ */
+export type StripeIntentKind = "payment" | "setup";
+
+export function stripeIntentKind(clientSecret: string | null | undefined): StripeIntentKind {
+  return typeof clientSecret === "string" && clientSecret.startsWith("seti_") ? "setup" : "payment";
+}
+
+/**
+ * The SetupIntent statuses `confirmSetup` can leave behind that mean "the fan's
+ * part is done".
+ *
+ *   succeeded   the card is saved
+ *   processing  a delayed method; the provider finishes it and the webhook reports it
+ *
+ * Anything else (`requires_payment_method`, an unresolved `requires_action`,
+ * `canceled`) is not done.
+ */
+export const SETUP_CONFIRM_SUCCESS_STATUSES: ReadonlySet<string> = new Set(["succeeded", "processing"]);
+
+/** Does this post-confirm SetupIntent status count as the fan having finished? */
+export function isSetupConfirmSuccess(status: string | null | undefined): boolean {
+  return !!status && SETUP_CONFIRM_SUCCESS_STATUSES.has(status);
+}

package/src/ui/shell/TribeNestApp.tsx

@@ -16,6 +16,12 @@ import { previewDiagnosticsEnabled, resolvePreviewDiagnostics } from "./diagnost
 import type { ForgeSsrDiagnostics } from "../../types/diagnostics";
 import { captureAttributionRefFromUrl, readAttributionRef } from "../../utils/attribution";
 import { captureLandingFromUrl, postLandingBeacon } from "../../utils/landing";
+import { registerHostRuntime } from "../../runtime/hostRuntime";
+
+// Module scope, not a hook. The hosted `/i/*` bundle can be imported by the
+// very first page a visitor lands on, so the runtime it reads has to be
+// published before any component renders, not during one.
+registerHostRuntime();
 
 // Captures both attribution signals on first paint: the tracked-link `?tn_ref`
 // (stripped afterwards) and the first-touch landing snapshot (all utm/click-id

package/src/ui/styled/AccountDashboard.tsx

@@ -4,6 +4,8 @@ import {
   useUserOrders,
   useMyTickets,
   useCancelMyTicket,
+  isMyTicketRequestOpenOrEnded,
+  myTicketRequestState,
   myTicketHeldPassIds,
   myTicketPasses,
   type MyTicket,
@@ -23,6 +25,11 @@ import {
   type MyCourse,
   useCancelMembership,
   useMembershipAccess,
+  useMyMembershipApplications,
+  useWithdrawMembershipApplication,
+  useConfirmMembershipApplication,
+  type MembershipApplication,
+  type MembershipApplicationStatus,
   useOpenBillingPortal,
   useUpdateAccount,
   useChangePassword,
@@ -45,6 +52,8 @@ import { WalletPassButtons } from "./WalletPassButtons";
 import { TicketTransferPanel } from "./TicketTransfer";
 import { CartLineOptions } from "./CartLineOptions";
 import { FilmRentalList } from "./FilmLibrary";
+import { canWithdrawMembershipApplication } from "../headless/membership/membershipApplication";
+import { isMembershipInTrial } from "../headless/membership/membershipTrial";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -365,6 +374,14 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const [cancelError, setCancelError] = useState<string | null>(null);
 
   const membership = user?.membership;
+  /**
+   * Inside a free trial: nothing has been charged yet. The date the first
+   * charge falls and what it will be are state the member acts on (cancel
+   * before then, or not), so they are visible, not behind a hint.
+   */
+  const inTrial = isMembershipInTrial(membership);
+  const cycleWord = (cycle: string | undefined) =>
+    cycle === "year" ? tr("forge.account_dashboard.cycle_year") : tr("forge.account_dashboard.cycle_month");
   // Two separate questions, deliberately answered separately:
   //   `access.hasAccess` → are the benefits live (true through past_due/grace)
   //   `message`          → what the member is told, including a failed payment
@@ -445,7 +462,25 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
               ))}
             </ul>
           )}
-          {membership.endDate && (
+          {inTrial && membership.trialEndsAt && (
+            <div data-testid="membership-trial-state">
+              <p style={{ fontSize: 14, fontWeight: 600 }}>
+                {tr("forge.account_dashboard.membership_trial_until", { date: formatDate(membership.trialEndsAt) })}
+              </p>
+              <p style={{ fontSize: 14, opacity: 0.85, marginTop: 2 }}>
+                {access.cancelAtPeriodEnd
+                  ? tr("forge.account_dashboard.membership_trial_cancelled")
+                  : membership.subscriptionAmount
+                    ? tr("forge.account_dashboard.membership_trial_then", {
+                        amount: formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency),
+                        cycle: cycleWord(membership.billingCycle),
+                        date: formatDate(membership.trialEndsAt),
+                      })
+                    : null}
+              </p>
+            </div>
+          )}
+          {membership.endDate && !inTrial && (
             <p style={{ fontSize: 14, opacity: 0.8 }}>
               {access.billingState === "active"
                 ? tr("forge.account_dashboard.membership_renews_on", { date: formatDate(membership.endDate) })
@@ -502,7 +537,9 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
         <div role="alertdialog" aria-modal="true" style={{ ...card, marginTop: 16 }}>
           <p style={{ fontWeight: 700 }}>{tr("forge.account_dashboard.cancel_confirm_title")}</p>
           <p style={{ fontSize: 14, opacity: 0.85, marginTop: 8 }}>
-            {membership?.subscriptionAmount
+            {inTrial && membership?.trialEndsAt
+              ? tr("forge.account_dashboard.cancel_confirm_trial", { date: formatDate(membership.trialEndsAt) })
+              : membership?.subscriptionAmount
               ? membership.endDate
                 ? tr("forge.account_dashboard.cancel_confirm_paid_until", { date: formatDate(membership.endDate) })
                 : tr("forge.account_dashboard.cancel_confirm_paid")
@@ -528,6 +565,129 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
           </div>
         </div>
       )}
+
+      <MembershipApplicationsSection ctx={ctx} />
+    </div>
+  );
+}
+
+const APPLICATION_STATUS_LABEL: Record<MembershipApplicationStatus, string> = {
+  card_pending: "forge.account_dashboard.application_status_card_pending",
+  pending: "forge.account_dashboard.application_status_pending",
+  approved: "forge.account_dashboard.application_status_approved",
+  payment_failed: "forge.account_dashboard.application_status_payment_failed",
+  joined: "forge.account_dashboard.application_status_joined",
+  declined: "forge.account_dashboard.application_status_declined",
+  withdrawn: "forge.account_dashboard.application_status_withdrawn",
+  expired: "forge.account_dashboard.application_status_expired",
+};
+
+/**
+ * The fan's applications to membership tiers, with where each stands, so a fan
+ * who lost the email still knows. Renders nothing when there are none.
+ *
+ * A card that needed a bank redirect comes back here with `?confirmApplication=`:
+ * that application is confirmed once on arrival (idempotent on the server, and
+ * the provider's webhook reports it too, so this only makes the list current
+ * sooner).
+ */
+function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
+  const { user } = usePublicAuth();
+  const tr = useForgeT();
+  const { t, ghostButton, button } = useCardStyles();
+  const { formatAmount, formatDate, currency } = ctx;
+  const { data: applications } = useMyMembershipApplications(user?.id);
+  const withdraw = useWithdrawMembershipApplication();
+  const confirm = useConfirmMembershipApplication();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const id = new URLSearchParams(window.location.search).get("confirmApplication");
+    if (!id || !user?.id) return;
+    confirm.mutate({ applicationId: id });
+    // Once per arrival.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.id]);
+
+  if (!applications?.length) return null;
+
+  const onWithdraw = async (application: MembershipApplication) => {
+    setError(null);
+    try {
+      await withdraw.mutateAsync({ applicationId: application.id });
+    } catch (e) {
+      const detail = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setError(detail || tr("forge.account_dashboard.application_withdraw_error"));
+    }
+  };
+
+  return (
+    <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${t.primary}20` }}>
+      <h3 style={{ fontWeight: 700, marginBottom: 12, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.applications_title")}
+      </h3>
+      <ul
+        data-testid="membership-applications"
+        style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}
+      >
+        {applications.map((application) => (
+          <li
+            key={application.id}
+            style={{ display: "flex", gap: 12, justifyContent: "space-between", alignItems: "center", flexWrap: "wrap" }}
+          >
+            <div style={{ minWidth: 0 }}>
+              <p style={{ fontWeight: 600 }}>{application.membershipTierName ?? ""}</p>
+              <p style={{ fontSize: 13, opacity: 0.85 }}>{tr(APPLICATION_STATUS_LABEL[application.status])}</p>
+              {application.amount != null && application.billingCycle && (
+                <p style={{ fontSize: 13, opacity: 0.8 }}>
+                  {tr("forge.account_dashboard.membership_price", {
+                    amount: formatAmount(application.amount, application.currency || currency),
+                    cycle: application.billingCycle,
+                  })}
+                </p>
+              )}
+              {application.status === "payment_failed" && application.paymentWindowExpiresAt && (
+                <p style={{ fontSize: 13, fontWeight: 600 }}>
+                  {tr("forge.account_dashboard.application_complete_by", {
+                    date: formatDate(application.paymentWindowExpiresAt),
+                  })}
+                </p>
+              )}
+              {application.status === "declined" && application.decisionNote && (
+                <p style={{ fontSize: 13, opacity: 0.8, maxWidth: 480 }}>{application.decisionNote}</p>
+              )}
+              <p style={{ fontSize: 12, opacity: 0.65 }}>
+                {tr("forge.account_dashboard.application_submitted_on", { date: formatDate(application.createdAt) })}
+              </p>
+            </div>
+            {canWithdrawMembershipApplication(application.status) && (
+              <button
+                onClick={() => void onWithdraw(application)}
+                disabled={withdraw.isPending}
+                style={ghostButton}
+              >
+                {withdraw.isPending && withdraw.variables?.applicationId === application.id
+                  ? tr("forge.account_dashboard.application_withdrawing")
+                  : tr("forge.account_dashboard.application_withdraw")}
+              </button>
+            )}
+            {application.status === "payment_failed" && (
+              <a
+                href={`/i/membership/checkout?membershipTierId=${encodeURIComponent(application.membershipTierId)}`}
+                style={{ ...button, textDecoration: "none" }}
+              >
+                {tr("forge.account_dashboard.application_complete")}
+              </a>
+            )}
+          </li>
+        ))}
+      </ul>
+      {error && (
+        <p role="alert" style={{ fontSize: 13, marginTop: 8, color: t.primary }}>
+          {error}
+        </p>
+      )}
     </div>
   );
 }
@@ -599,17 +759,47 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
             const cancelled = !!ticket.selfCancelledAt;
             // Absent on an older API build, where every row WAS a purchase.
             const gifted = ticket.role === "holder";
+            /**
+             * A ticket REQUEST (curated access, feature 3). While it is pending,
+             * or once it ended without a sale, the row is a request and not a
+             * purchase: no passes exist, so nothing to cancel, transfer or add
+             * to a wallet, and the state line is the whole story. The "Decide
+             * by" date is the same one the fan's email carries, so somebody who
+             * lost the email still knows where they stand.
+             */
+            const requestState = myTicketRequestState(ticket);
+            const isRequestRow = isMyTicketRequestOpenOrEnded(ticket);
+            const requestEnded = isRequestRow && requestState !== "pending";
             return (
               <div
                 key={ticket.id}
-                style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16, opacity: cancelled ? 0.6 : 1 }}
+                data-testid={requestState ? `my-ticket-request-${requestState}` : undefined}
+                style={{
+                  border: `1px solid ${t.primary}20`,
+                  borderRadius: t.cornerRadius,
+                  padding: 16,
+                  opacity: cancelled || requestEnded ? 0.6 : 1,
+                }}
               >
                 <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, gap: 12 }}>
                   <div>
                     <div style={{ fontWeight: 600 }}>{ticket.eventTitle}</div>
                     <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(ticket.eventDateTime)}</div>
                   </div>
-                  {cancelled && (
+                  {requestState && (
+                    <span style={{ fontSize: 13, color: t.primary, textAlign: "right" }}>
+                      {requestState === "pending"
+                        ? tr("forge.account_dashboard.request_pending")
+                        : requestState === "approved"
+                          ? tr("forge.account_dashboard.request_approved")
+                          : requestState === "declined"
+                            ? tr("forge.account_dashboard.request_declined")
+                            : requestState === "expired"
+                              ? tr("forge.account_dashboard.request_expired")
+                              : tr("forge.account_dashboard.request_payment_failed")}
+                    </span>
+                  )}
+                  {cancelled && !requestState && (
                     <span style={{ fontSize: 13, color: t.primary }}>{tr("forge.account_dashboard.cancelled")}</span>
                   )}
                   {/* Says WHY this is in the list at all. Without it a
@@ -641,23 +831,57 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
                 {!gifted && (
                   <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
-                    <span>{tr("forge.account_dashboard.total")}</span>
+                    {/* Nothing has been taken on a pending request, and never
+                        will be on one that ended: the label says which. */}
+                    <span>
+                      {requestState === "pending"
+                        ? tr("forge.account_dashboard.total_on_approval")
+                        : tr("forge.account_dashboard.total")}
+                    </span>
                     <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
                   </div>
                 )}
 
+                {/* State the fan must act on (or wait on) stays visible: the
+                    deadline while pending, the organiser's note when declined,
+                    and where to go when the seat was released. */}
+                {requestState === "pending" && ticket.request?.expiresAt && (
+                  <div data-testid="my-ticket-decide-by" style={{ fontSize: 13, marginTop: 12, fontWeight: 600 }}>
+                    {tr("forge.account_dashboard.request_decide_by", { date: formatDate(ticket.request.expiresAt) })}
+                  </div>
+                )}
+                {requestState === "pending" && (
+                  <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>
+                    {tr("forge.account_dashboard.request_nothing_charged")}
+                  </div>
+                )}
+                {requestState === "declined" && ticket.request?.decisionNote && (
+                  <div data-testid="my-ticket-decision-note" style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>
+                    {tr("forge.account_dashboard.request_note", { note: ticket.request.decisionNote })}
+                  </div>
+                )}
+                {(requestState === "expired" || requestState === "payment_failed") && (
+                  <div style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>
+                    {tr("forge.account_dashboard.request_seat_released")}
+                  </div>
+                )}
+
                 {/* Diarise it — including the Apple option, which needs the
                     platform's own `.ics` and so could not exist before. Null
                     for a called-off show, and the component draws nothing. */}
-                <AddToCalendar
-                  variant="compact"
-                  title={ticket.eventTitle}
-                  start={ticket.eventDateTime}
-                  end={ticket.eventEndDateTime}
-                  icsUrl={ticket.calendarUrl}
-                  webcalUrl={ticket.calendarWebcalUrl}
-                  style={{ marginTop: 12 }}
-                />
+                {/* Not offered on a request: the fan has not been admitted to
+                    anything yet, and a calendar entry says they have. */}
+                {!isRequestRow && (
+                  <AddToCalendar
+                    variant="compact"
+                    title={ticket.eventTitle}
+                    start={ticket.eventDateTime}
+                    end={ticket.eventEndDateTime}
+                    icsUrl={ticket.calendarUrl}
+                    webcalUrl={ticket.calendarWebcalUrl}
+                    style={{ marginTop: 12 }}
+                  />
+                )}
 
                 {/*
                   Wallet passes (2.3). Renders NOTHING unless the API offers a
@@ -705,7 +929,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{ticket.cancellation.terms}</div>
                 )}
 
-                {!cancelled && ticket.cancellation.canCancel && (
+                {!cancelled && !isRequestRow && ticket.cancellation.canCancel && (
                   <button
                     onClick={() => void onCancel(ticket)}
                     disabled={pendingId === ticket.id}