@tribe-nest/forge 3.54.0 → 3.57.0

package/src/ui/payment/ForgeStripePayment.tsx

@@ -5,9 +5,11 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useFormatCurrency } from "../format/useFormatCurrency";
 import { useSiteConfig } from "../../data/queries/useWebsite";
-import { useForgeT } from "../../i18n";
+import { useForgeLocale, useForgeT } from "../../i18n";
+import { formatTrialDate } from "../headless/membership/membershipTrial";
 import type { PaymentRenderProps } from "./ForgePaymentProvider";
 import { deferredChargeNotice, isDeferredSettlement, isManualConfirmSuccess } from "./stripeConfirmOutcome";
+import { isSetupConfirmSuccess, stripeIntentKind, type StripeIntentKind } from "./stripeIntentKind";
 
 function alpha(hex: number) {
   return Math.round(hex * 255)
@@ -23,6 +25,13 @@ function alpha(hex: number) {
  * `useSiteConfig()` (Stripe Connect: `loadStripe(platformKey, { stripeAccount })`),
  * the appearance from `ForgeThemeProvider`, and the pay-button amount from
  * `useFormatCurrency()`. The consuming site wires nothing.
+ *
+ * A SetupIntent secret (`seti_...`) saves the card instead of charging it (an
+ * application to a membership tier): the same Element renders, the confirm goes
+ * through `stripe.confirmSetup`, and the button and the line under it say that
+ * the card is charged only on approval. A setup that starts a free trial on a
+ * paid membership (`trial` set) reads "Start free trial" and says nothing is
+ * charged today, then what is charged from which date.
  */
 export function ForgeStripePayment({
   clientSecret,
@@ -34,6 +43,7 @@ export function ForgeStripePayment({
   onFailed,
   settlement,
   deferredStrategy,
+  trial,
 }: PaymentRenderProps) {
   const theme = useForgeTheme();
   const { data: siteConfig } = useSiteConfig();
@@ -96,6 +106,7 @@ export function ForgeStripePayment({
   return (
     <Elements options={{ clientSecret, appearance, loader: "auto" }} stripe={stripePromise}>
       <Inner
+        intentKind={stripeIntentKind(clientSecret)}
         returnUrl={returnUrl}
         amount={amount}
         currency={currency}
@@ -104,12 +115,14 @@ export function ForgeStripePayment({
         onFailed={onFailed}
         settlement={settlement}
         deferredStrategy={deferredStrategy}
+        trial={trial}
       />
     </Elements>
   );
 }
 
 function Inner({
+  intentKind,
   returnUrl,
   amount,
   currency,
@@ -118,9 +131,11 @@ function Inner({
   onFailed,
   settlement,
   deferredStrategy,
-}: Omit<PaymentRenderProps, "clientSecret">) {
+  trial,
+}: Omit<PaymentRenderProps, "clientSecret"> & { intentKind: StripeIntentKind }) {
   const theme = useForgeTheme();
   const t = useForgeT();
+  const locale = useForgeLocale();
   const { formatCurrency } = useFormatCurrency();
   const stripe = useStripe();
   const elements = useElements();
@@ -133,15 +148,54 @@ function Inner({
   // it has been told their card was committed and nothing about why.
   const deferred = isDeferredSettlement(settlement);
   const formattedAmount = formatCurrency(amount, currency || undefined);
-  const buttonText = deferred
-    ? t("forge.forge_stripe_payment.authorize", { amount: formattedAmount })
-    : `Pay ${formattedAmount} Now`;
+  // A setup takes nothing now: the button submits the application, and the
+  // consent line under it is the thing the fan is agreeing to, so it is content.
+  const isSetup = intentKind === "setup";
+  // A trial also saves the card, but for a subscription the fan is starting now.
+  const isTrial = isSetup && !!trial;
+  const buttonText = isTrial
+    ? t("forge.forge_stripe_payment.start_free_trial")
+    : isSetup
+    ? t("forge.forge_stripe_payment.submit_application")
+    : deferred
+      ? t("forge.forge_stripe_payment.authorize", { amount: formattedAmount })
+      : `Pay ${formattedAmount} Now`;
 
   const handleSubmit = useCallback(async () => {
     if (!stripe || !elements) return;
     setIsLoading(true);
     setMessage("");
 
+    if (isSetup) {
+      if (mode === "manual") {
+        const { error, setupIntent } = await stripe.confirmSetup({
+          elements,
+          confirmParams: { return_url: returnUrl },
+          redirect: "if_required",
+        });
+        if (error) {
+          const msg = error.message ?? t("forge.forge_stripe_payment.setup_failed");
+          setMessage(msg);
+          setIsLoading(false);
+          onFailed?.(msg);
+          return;
+        }
+        setIsLoading(false);
+        if (isSetupConfirmSuccess(setupIntent?.status)) {
+          onSucceeded?.();
+          return;
+        }
+        const msg = t("forge.forge_stripe_payment.setup_incomplete");
+        setMessage(msg);
+        onFailed?.(msg);
+        return;
+      }
+      const { error } = await stripe.confirmSetup({ elements, confirmParams: { return_url: returnUrl } });
+      setMessage(error.message ?? t("forge.forge_stripe_payment.setup_failed"));
+      setIsLoading(false);
+      return;
+    }
+
     if (mode === "manual") {
       const { error, paymentIntent } = await stripe.confirmPayment({
         elements,
@@ -170,7 +224,7 @@ function Inner({
     const { error } = await stripe.confirmPayment({ elements, confirmParams: { return_url: returnUrl } });
     setMessage(error.message ?? "An unexpected error occurred.");
     setIsLoading(false);
-  }, [stripe, elements, mode, returnUrl, onSucceeded, onFailed]);
+  }, [stripe, elements, mode, returnUrl, onSucceeded, onFailed, isSetup, t]);
 
   return (
     <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
@@ -192,7 +246,24 @@ function Inner({
       >
         {isLoading ? "Processing…" : buttonText}
       </button>
-      {deferred && (
+      {isTrial && trial && (
+        <p data-testid="trial-consent-notice" style={{ margin: 0, fontSize: 13, opacity: 0.8, lineHeight: 1.5 }}>
+          {t("forge.forge_stripe_payment.trial_consent", {
+            amount: formattedAmount,
+            cycle:
+              trial.billingCycle === "year"
+                ? t("forge.forge_stripe_payment.cycle_year")
+                : t("forge.forge_stripe_payment.cycle_month"),
+            date: formatTrialDate(trial.endsAt, locale),
+          })}
+        </p>
+      )}
+      {isSetup && !isTrial && (
+        <p data-testid="setup-consent-notice" style={{ margin: 0, fontSize: 13, opacity: 0.8, lineHeight: 1.5 }}>
+          {t("forge.forge_stripe_payment.setup_charged_on_approval", { amount: formattedAmount })}
+        </p>
+      )}
+      {!isSetup && deferred && (
         <p data-testid="deferred-charge-notice" style={{ margin: 0, fontSize: 13, opacity: 0.8, lineHeight: 1.5 }}>
           {t("forge.forge_stripe_payment.deferred_charged_on_approval")}
           {deferredChargeNotice(deferredStrategy) === "authorization" && (

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/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/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/styled/AccountDashboard.tsx

@@ -25,6 +25,11 @@ import {
   type MyCourse,
   useCancelMembership,
   useMembershipAccess,
+  useMyMembershipApplications,
+  useWithdrawMembershipApplication,
+  useConfirmMembershipApplication,
+  type MembershipApplication,
+  type MembershipApplicationStatus,
   useOpenBillingPortal,
   useUpdateAccount,
   useChangePassword,
@@ -47,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",
@@ -367,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
@@ -447,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) })
@@ -504,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")
@@ -530,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>
   );
 }

package/src/ui/styled/LoginForm.tsx

@@ -17,10 +17,12 @@ export interface LoginFormProps {
    * form looks exactly as it did.
    */
   membershipTierId?: string;
+  /** The membership invite token riding on the same redirect, if any. See `MembershipTierCallout`. */
+  membershipInviteToken?: string;
 }
 
 /** Themed 2FA login form (credentials → emailed code), built on `useLoginFlow`. */
-export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId }: LoginFormProps) {
+export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId, membershipInviteToken }: LoginFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
   const flow = useLoginFlow({ onSuccess });
@@ -70,7 +72,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId
       <div style={card}>
         {/* Still on the way to the tier they picked, so it stays in view while
             they fetch the code out of their inbox. */}
-        <MembershipTierCallout membershipTierId={membershipTierId} />
+        <MembershipTierCallout membershipTierId={membershipTierId} inviteToken={membershipInviteToken} />
         <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>{t("forge.login_form.verify_title")}</h1>
         <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 24 }}>
           {t("forge.login_form.code_sent_to")} <strong>{flow.email}</strong>
@@ -118,7 +120,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId
     <div style={card}>
       {/* What the fan was doing when they hit this wall. Nothing is drawn when
           they came here on their own. */}
-      <MembershipTierCallout membershipTierId={membershipTierId} />
+      <MembershipTierCallout membershipTierId={membershipTierId} inviteToken={membershipInviteToken} />
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>{t("forge.login_form.title")}</h1>
       {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
       <form