@tribe-nest/forge 3.54.0 → 3.58.0

package/src/ui/styled/MembershipCheckout.tsx

@@ -1,12 +1,18 @@
 import { useEffect, useState, type CSSProperties } from "react";
 import { useMembershipCheckout } from "../headless/membership/useMembershipCheckout";
-import { useForgeT } from "../../i18n";
+import { useForgeLocale, useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter, useFormatCurrency, getCurrencySymbol } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
 import { usePricesIncludeTax, useSiteConfig } from "../../data/queries/useWebsite";
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { isMembershipInviteDead, useMembershipInviteInfo } from "../../data/queries/useMembership";
+import {
+  tierCardAction,
+  type MembershipApplicationOutcome,
+} from "../headless/membership/membershipApplication";
+import { formatTrialDate, tierTrialDays } from "../headless/membership/membershipTrial";
 import { readableTextOn } from "../theme/contrast";
 import { cycleFloor, cycleIsFree, offeredCycles, type BillingCycle } from "../format/membershipPwyw";
 import type { MembershipTier } from "../../types/models";
@@ -31,8 +37,20 @@ export interface MembershipCheckoutProps {
   successPath?: string;
   /** Where the "View memberships" link points when the artist sells no tiers. Default `/i/membership`. */
   membershipsPath?: string;
+  /**
+   * The fan's account page, where their applications are listed. The link
+   * after applying points here. Default `/i/account`.
+   */
+  accountPath?: string;
   /** Format a numeric amount for display. Defaults to the runtime currency formatter. */
   formatAmount?: (amount: number) => string;
+  /**
+   * A membership invite token. Omitted, the `invite` search param of the current
+   * url is used, so the invite email's link works with no wiring. The page then
+   * names the tier and the invited email before anything else, or says plainly
+   * that the invite is no longer valid.
+   */
+  inviteToken?: string | null;
   className?: string;
   style?: CSSProperties;
 }
@@ -67,18 +85,21 @@ export function MembershipCheckout({
   onComplete,
   successPath = "/i/account?tab=membership&confirmSubscription=true",
   membershipsPath = "/i/membership",
+  accountPath = "/i/account",
   formatAmount,
+  inviteToken,
   className,
   style,
 }: MembershipCheckoutProps) {
   const t = useForgeT();
+  const locale = useForgeLocale();
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
   const { data: siteConfig } = useSiteConfig();
   /** Settlement currency: the currency every tier number is already in. */
   const settlementCurrency = siteConfig?.currency;
   const { convertCurrency } = useFormatCurrency();
-  const { userSelectedCurrency } = usePublicAuth();
+  const { userSelectedCurrency, user } = usePublicAuth();
   /** What the visitor is reading prices in. Falls back to settlement when they
    * have not picked one, in which case both conversions below are identities. */
   const displayCurrency = (userSelectedCurrency as string | undefined) ?? settlementCurrency;
@@ -124,7 +145,9 @@ export function MembershipCheckout({
     returnPath: successPath,
     freeReturnPath: successPath,
     onComplete,
+    inviteToken,
   });
+  const inviteInfo = useMembershipInviteInfo(checkout.inviteToken);
 
   /**
    * The digits in the box, in the visitor's currency.
@@ -170,292 +193,609 @@ export function MembershipCheckout({
 
   if (checkout.isLoading) return <Loading fullPage />;
 
-  const tier = checkout.selectedTier;
+  // ---- Invite banner: the tier and the invited email, before anything else ---
+  // State the fan acts on (who the invite is for, whether it still works), so it
+  // is visible content rather than a hint.
+  const inviteDead = !!checkout.inviteToken && isMembershipInviteDead(inviteInfo.error);
+  const invite = inviteInfo.data;
+  const emailMismatch =
+    !!invite && !!user?.email && user.email.trim().toLowerCase() !== invite.email.trim().toLowerCase();
+  const banner =
+    inviteDead || invite ? (
+      <div
+        role={inviteDead || emailMismatch ? "alert" : "status"}
+        data-testid="membership-invite-banner"
+        style={{ ...box, maxWidth: 560, margin: "0 auto 24px", color: theme.colors.text }}
+      >
+        {inviteDead ? (
+          <>
+            <p style={{ fontWeight: 700 }}>{t("forge.membership_checkout.invite_dead_title")}</p>
+            <p style={{ fontSize: 14, opacity: 0.85, marginTop: 4 }}>{t("forge.membership_checkout.invite_dead_body")}</p>
+          </>
+        ) : (
+          invite && (
+            <>
+              <p style={{ fontWeight: 700 }}>
+                {t("forge.membership_checkout.invite_title", { tier_name: invite.membershipTierName })}
+              </p>
+              <p style={{ fontSize: 14, opacity: 0.85, marginTop: 4 }}>
+                {t("forge.membership_checkout.invite_for_email", { email: invite.email })}
+              </p>
+              {emailMismatch && (
+                <p style={{ fontSize: 14, marginTop: 8, fontWeight: 600 }}>
+                  {t("forge.membership_checkout.invite_email_mismatch", {
+                    signed_in_email: user?.email ?? "",
+                    email: invite.email,
+                  })}
+                </p>
+              )}
+            </>
+          )
+        )}
+      </div>
+    ) : null;
+
+  const content = renderStage();
+  return banner ? (
+    <>
+      {banner}
+      {content}
+    </>
+  ) : (
+    content
+  );
+
+  function renderStage() {
+    const tier = checkout.selectedTier;
 
-  // ---- Stage 1: pick a tier -------------------------------------------------
-  if (!tier) {
-    const tiers = checkout.tiers ?? [];
-    if (!tiers.length) {
+    // ---- Application submitted --------------------------------------------------
+    if (tier && checkout.applicationOutcome) {
       return (
-        <div className={className} style={card}>
-          <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>
-            {t("forge.membership_checkout.empty_title")}
-          </h1>
-          <p>{t("forge.membership_checkout.no_tier_body")}</p>
-          <a
-            href={membershipsPath}
-            style={{ ...button, marginTop: 16, display: "inline-block", textAlign: "center", textDecoration: "none" }}
-          >
-            {t("forge.membership_checkout.view_memberships")}
-          </a>
+        <div className={className} style={card} data-testid="membership-application-outcome">
+          <div style={box}>
+            <h1 style={{ fontSize: 24, fontWeight: 800, marginBottom: 8 }}>
+              {t(APPLICATION_OUTCOME_TITLE[checkout.applicationOutcome], { tier_name: tier.name })}
+            </h1>
+            <p style={{ opacity: 0.85 }}>
+              {checkout.applicationOutcome === "received" && checkout.application?.amount
+                ? t("forge.membership_checkout.application_received_paid_body", {
+                    tier_name: tier.name,
+                    amount: fmt(checkout.application.amount),
+                    cycle:
+                      checkout.application.billingCycle === "year"
+                        ? t("forge.membership_checkout.per_year")
+                        : t("forge.membership_checkout.per_month"),
+                  })
+                : t(APPLICATION_OUTCOME_BODY[checkout.applicationOutcome], { tier_name: tier.name })}
+            </p>
+          </div>
+          {/* A lodged or approved application is followed on the account page.
+              One that closed leaves the fan choosing again, so that goes back
+              to the tiers. */}
+          {checkout.applicationOutcome === "received" || checkout.applicationOutcome === "approved" ? (
+            <a
+              href={accountPath}
+              data-testid="membership-application-account-link"
+              style={{ ...ghostButton, display: "block", textAlign: "center", textDecoration: "none", boxSizing: "border-box" }}
+            >
+              {t("forge.membership_checkout.go_to_account")}
+            </a>
+          ) : (
+            <a
+              href={membershipsPath}
+              style={{ ...ghostButton, display: "block", textAlign: "center", textDecoration: "none", boxSizing: "border-box" }}
+            >
+              {t("forge.membership_checkout.view_memberships")}
+            </a>
+          )}
         </div>
       );
     }
 
-    return (
-      <div className={className} style={wide}>
-        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24, textAlign: "center" }}>
-          {t("forge.membership_checkout.choose_title")}
-        </h1>
-        <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
-          {tiers.map((option) => {
-            const isCurrent = option.id === checkout.currentTierId;
-            return (
-              <div
-                key={option.id}
-                style={{
-                  ...box,
-                  flex: "1 1 260px",
-                  maxWidth: 340,
-                  width: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 12,
-                  opacity: isCurrent ? 0.6 : 1,
-                  borderColor: isCurrent ? `${theme.colors.primary}99` : `${theme.colors.primary}30`,
-                }}
-              >
-                {isCurrent && (
-                  <span
-                    style={{
-                      alignSelf: "center",
-                      padding: "2px 10px",
-                      borderRadius: 999,
-                      fontSize: 12,
-                      fontWeight: 700,
-                      background: theme.colors.primary,
-                      color: readableTextOn(theme.colors.primary),
-                    }}
-                  >
-                    {t("forge.membership_checkout.current_plan")}
-                  </span>
-                )}
-                <h2 style={{ fontSize: 20, fontWeight: 700, textAlign: "center" }}>{option.name}</h2>
-                <p style={{ fontSize: 18, fontWeight: 700, textAlign: "center", color: theme.colors.primary }}>
-                  {tierPriceLabel(option, t, fmt)}
-                </p>
-                {!!option.benefits?.length && (
-                  <ul
-                    style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}
-                  >
-                    {option.benefits.slice(0, 3).map((b) => (
-                      <li key={b.id} style={{ display: "flex", gap: 8, fontSize: 14 }}>
-                        <span style={{ color: theme.colors.primary }}>✓</span>
-                        {b.title}
-                      </li>
-                    ))}
-                    {option.benefits.length > 3 && (
-                      <li style={{ fontSize: 12, opacity: 0.75 }}>
-                        {t("forge.membership_checkout.more_benefits", { count: option.benefits.length - 3 })}
-                      </li>
-                    )}
-                  </ul>
-                )}
-                <div style={{ marginTop: "auto" }}>
-                  {isCurrent ? (
-                    <p style={{ fontSize: 13, opacity: 0.75, textAlign: "center" }}>
-                      {t("forge.membership_checkout.on_this_plan")}
-                    </p>
-                  ) : (
-                    <button onClick={() => checkout.selectTier(option)} style={button}>
-                      {t("forge.membership_checkout.select_tier")}
-                    </button>
+    // ---- Stage 1: pick a tier -------------------------------------------------
+    if (!tier) {
+      const tiers = checkout.tiers ?? [];
+      if (!tiers.length) {
+        return (
+          <div className={className} style={card}>
+            <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>
+              {t("forge.membership_checkout.empty_title")}
+            </h1>
+            <p>{t("forge.membership_checkout.no_tier_body")}</p>
+            <a
+              href={membershipsPath}
+              style={{ ...button, marginTop: 16, display: "inline-block", textAlign: "center", textDecoration: "none" }}
+            >
+              {t("forge.membership_checkout.view_memberships")}
+            </a>
+          </div>
+        );
+      }
+
+      return (
+        <div className={className} style={wide}>
+          <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24, textAlign: "center" }}>
+            {t("forge.membership_checkout.choose_title")}
+          </h1>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
+            {tiers.map((option) => {
+              const isCurrent = option.id === checkout.currentTierId;
+              return (
+                <div
+                  key={option.id}
+                  style={{
+                    ...box,
+                    flex: "1 1 260px",
+                    maxWidth: 340,
+                    width: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 12,
+                    opacity: isCurrent ? 0.6 : 1,
+                    borderColor: isCurrent ? `${theme.colors.primary}99` : `${theme.colors.primary}30`,
+                  }}
+                >
+                  {isCurrent && (
+                    <span
+                      style={{
+                        alignSelf: "center",
+                        padding: "2px 10px",
+                        borderRadius: 999,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        background: theme.colors.primary,
+                        color: readableTextOn(theme.colors.primary),
+                      }}
+                    >
+                      {t("forge.membership_checkout.current_plan")}
+                    </span>
+                  )}
+                  <h2 style={{ fontSize: 20, fontWeight: 700, textAlign: "center" }}>{option.name}</h2>
+                  <p style={{ fontSize: 18, fontWeight: 700, textAlign: "center", color: theme.colors.primary }}>
+                    {tierPriceLabel(option, t, fmt)}
+                  </p>
+                  {tierTrialDays(option, user?.membership) > 0 && (
+                    <span
+                      data-testid="membership-tier-trial-badge"
+                      style={{
+                        alignSelf: "center",
+                        padding: "2px 10px",
+                        borderRadius: 999,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        border: `1px solid ${theme.colors.primary}`,
+                        color: theme.colors.primary,
+                      }}
+                    >
+                      {t("forge.membership_tiers.trial_badge", { days: tierTrialDays(option, user?.membership) })}
+                    </span>
                   )}
+                  {!!option.benefits?.length && (
+                    <ul
+                      style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}
+                    >
+                      {option.benefits.slice(0, 3).map((b) => (
+                        <li key={b.id} style={{ display: "flex", gap: 8, fontSize: 14 }}>
+                          <span style={{ color: theme.colors.primary }}>✓</span>
+                          {b.title}
+                        </li>
+                      ))}
+                      {option.benefits.length > 3 && (
+                        <li style={{ fontSize: 12, opacity: 0.75 }}>
+                          {t("forge.membership_checkout.more_benefits", { count: option.benefits.length - 3 })}
+                        </li>
+                      )}
+                    </ul>
+                  )}
+                  <div style={{ marginTop: "auto" }}>
+                    {isCurrent ? (
+                      <p style={{ fontSize: 13, opacity: 0.75, textAlign: "center" }}>
+                        {t("forge.membership_checkout.on_this_plan")}
+                      </p>
+                    ) : (
+                      <GridTierAction
+                        tier={option}
+                        trialDays={tierTrialDays(option, user?.membership)}
+                        onSelect={() => checkout.selectTier(option)}
+                        buttonStyle={button}
+                        t={t}
+                      />
+                    )}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
         </div>
-      </div>
-    );
-  }
+      );
+    }
+
+    // ---- Stage 3: payment -----------------------------------------------------
+    // The registered payment UI (Stripe) in manual mode, or the Paystack modal
+    // behind a pay button. The Paystack branch is also what a member who closed
+    // the popup comes back to, so it must render whether or not a Stripe secret
+    // was ever issued.
+    if (checkout.step === "payment" && (checkout.clientSecret || checkout.canOpenPaystack)) {
+      return (
+        <div className={className} style={card}>
+          <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>
+            {checkout.setupPurpose === "application"
+              ? t("forge.membership_checkout.application_card_title")
+              : checkout.setupPurpose === "trial"
+                ? t("forge.membership_checkout.trial_card_title")
+                : t("forge.membership_checkout.payment_title")}
+          </h1>
+          <p style={{ opacity: 0.75, marginBottom: 24 }}>
+            {t("forge.membership_checkout.payment_summary", {
+              tier_name: tier.name,
+              amount: fmt(checkout.amount),
+              cycle: checkout.billingCycle,
+            })}
+          </p>
+          <div style={box}>
+            {checkout.isPaystack ? (
+              <PaystackPayButton
+                onPay={checkout.openPaystackCheckout}
+                label={t("forge.membership_checkout.pay", { amount: fmt(checkout.amount) })}
+              />
+            ) : (
+              checkout.clientSecret &&
+              renderPayment({
+                clientSecret: checkout.clientSecret,
+                returnUrl:
+                  checkout.setupPurpose === "application" && checkout.applicationReturnUrl
+                    ? checkout.applicationReturnUrl
+                    : `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
+                amount: checkout.amount,
+                currency: settlementCurrency,
+                mode: "manual",
+                // A trial saves the card (a SetupIntent) for a subscription that
+                // starts now: the renderer says what is charged and when.
+                trial:
+                  checkout.setupPurpose === "trial" && checkout.trialEndsAt
+                    ? { endsAt: checkout.trialEndsAt, billingCycle: checkout.billingCycle }
+                    : null,
+                // An application's card was SAVED, not charged: tell the server,
+                // which moves it in front of the business. Otherwise (a charged
+                // card, or a trial's saved card) the account page still has to
+                // reconcile the subscription, so this completion asks for
+                // confirmation.
+                onSucceeded: () => void checkout.onPaymentSucceeded(),
+                onFailed: () => {},
+              })
+            )}
+          </div>
+          {checkout.error && <p style={errorText}>{checkout.error}</p>}
+          <button onClick={() => checkout.setStep("select")} style={ghostButton}>
+            {t("forge.membership_checkout.back")}
+          </button>
+        </div>
+      );
+    }
+
+    // ---- Stage 2: tier detail, billing cycle, pay-what-you-want ---------------
+    const cycles = checkout.cycles;
+    const showBillingToggle = cycles.month && cycles.year;
+    const tierAction = tierCardAction(tier);
+    /** An application already waiting, approved or declined: nothing to submit. */
+    const applicationBlocked = tierAction === "pending" || tierAction === "approved" || tierAction === "declined";
+    const applicationStateLine =
+      tierAction === "pending"
+        ? t("forge.membership_checkout.application_state_pending")
+        : tierAction === "approved"
+          ? t("forge.membership_checkout.application_state_approved")
+          : tierAction === "declined"
+            ? t("forge.membership_checkout.application_state_declined")
+            : tierAction === "complete"
+              ? t("forge.membership_checkout.application_state_complete")
+              : null;
+    const submitLabel = checkout.isApplication
+      ? t("forge.membership_checkout.apply")
+      : tierAction === "complete"
+        ? t("forge.membership_checkout.complete_membership")
+        : checkout.isChange
+          ? t("forge.membership_checkout.confirm_change")
+          : tierAction === "accept_invite"
+            ? t("forge.membership_checkout.accept_invite")
+            : checkout.trialDays > 0
+              ? t("forge.membership_checkout.start_free_trial")
+              : t("forge.membership_checkout.submit");
 
-  // ---- Stage 3: payment -----------------------------------------------------
-  // The registered payment UI (Stripe) in manual mode, or the Paystack modal
-  // behind a pay button. The Paystack branch is also what a member who closed
-  // the popup comes back to, so it must render whether or not a Stripe secret
-  // was ever issued.
-  if (checkout.step === "payment" && (checkout.clientSecret || checkout.canOpenPaystack)) {
     return (
       <div className={className} style={card}>
-        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>
-          {t("forge.membership_checkout.payment_title")}
+        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>
+          {t("forge.membership_checkout.title", { tier_name: tier.name })}
         </h1>
-        <p style={{ opacity: 0.75, marginBottom: 24 }}>
-          {t("forge.membership_checkout.payment_summary", {
-            tier_name: tier.name,
-            amount: fmt(checkout.amount),
-            cycle: checkout.billingCycle,
-          })}
-        </p>
+
         <div style={box}>
-          {checkout.isPaystack ? (
-            <PaystackPayButton
-              onPay={checkout.openPaystackCheckout}
-              label={t("forge.membership_checkout.pay", { amount: fmt(checkout.amount) })}
-            />
-          ) : (
-            checkout.clientSecret &&
-            renderPayment({
-              clientSecret: checkout.clientSecret,
-              returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
-              amount: checkout.amount,
-              currency: settlementCurrency,
-              mode: "manual",
-              // A card that has just been charged still needs the account page
-              // to reconcile the subscription, so this is the one completion
-              // that asks for confirmation.
-              onSucceeded: () => checkout.finish(true),
-              onFailed: () => {},
-            })
+          {tier.description && <p style={{ marginBottom: 16 }}>{tier.description}</p>}
+          {!!tier.benefits?.length && (
+            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+              {tier.benefits.map((b) => (
+                <li key={b.id} style={{ display: "flex", gap: 8 }}>
+                  <span style={{ color: theme.colors.primary }}>✓</span>
+                  {b.title}
+                </li>
+              ))}
+            </ul>
           )}
         </div>
-        {checkout.error && <p style={errorText}>{checkout.error}</p>}
-        <button onClick={() => checkout.setStep("select")} style={ghostButton}>
-          {t("forge.membership_checkout.back")}
-        </button>
-      </div>
-    );
-  }
 
-  // ---- Stage 2: tier detail, billing cycle, pay-what-you-want ---------------
-  const cycles = checkout.cycles;
-  const showBillingToggle = cycles.month && cycles.year;
-
-  return (
-    <div className={className} style={card}>
-      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>
-        {t("forge.membership_checkout.title", { tier_name: tier.name })}
-      </h1>
-
-      <div style={box}>
-        {tier.description && <p style={{ marginBottom: 16 }}>{tier.description}</p>}
-        {!!tier.benefits?.length && (
-          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
-            {tier.benefits.map((b) => (
-              <li key={b.id} style={{ display: "flex", gap: 8 }}>
-                <span style={{ color: theme.colors.primary }}>✓</span>
-                {b.title}
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+        <div style={box}>
+          {showBillingToggle && (
+            <div style={{ marginBottom: 16 }}>
+              <p style={{ fontSize: 14, marginBottom: 8 }}>{t("forge.membership_checkout.billing_cycle_label")}</p>
+              <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
+                {(["month", "year"] as const).map((cycle) => (
+                  <label key={cycle} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
+                    <input
+                      type="radio"
+                      name="billingCycle"
+                      checked={checkout.billingCycle === cycle}
+                      onChange={() => checkout.setBillingCycle(cycle)}
+                      style={{ accentColor: theme.colors.primary }}
+                    />
+                    {cycleLabel(tier, cycle, t, fmt)}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
 
-      <div style={box}>
-        {showBillingToggle && (
-          <div style={{ marginBottom: 16 }}>
-            <p style={{ fontSize: 14, marginBottom: 8 }}>{t("forge.membership_checkout.billing_cycle_label")}</p>
-            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
-              {(["month", "year"] as const).map((cycle) => (
-                <label key={cycle} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
-                  <input
-                    type="radio"
-                    name="billingCycle"
-                    checked={checkout.billingCycle === cycle}
-                    onChange={() => checkout.setBillingCycle(cycle)}
-                    style={{ accentColor: theme.colors.primary }}
-                  />
-                  {cycleLabel(tier, cycle, t, fmt)}
-                </label>
-              ))}
+          {tier.payWhatYouWant && (
+            <div style={{ marginBottom: 16 }}>
+              {/* The floor is printed in the SETTLEMENT currency because that is
+                  the currency of the number this box sends. A unit that changes
+                  what you type belongs in the label. */}
+              <label htmlFor="forge-pwyw-amount" style={{ fontSize: 14, display: "block", marginBottom: 8 }}>
+                {t("forge.membership_checkout.pwyw_label")}{" "}
+                {t("forge.membership_checkout.pwyw_min", { amount: fmt(checkout.minimumAmount) })}
+              </label>
+              <input
+                id="forge-pwyw-amount"
+                type="number"
+                min={Number(toDisplay(checkout.minimumAmount).toFixed(2))}
+                step="any"
+                value={typedAmount}
+                onChange={(e) => {
+                  setTypedAmount(e.target.value);
+                  // Converted back on the way out. The floor is checked against
+                  // THIS number, not the typed one, so a rate that rounds down
+                  // cannot slip a fan under the artist's minimum.
+                  checkout.setCustomAmount(toSettlement(Number(e.target.value)));
+                }}
+                aria-invalid={!!checkout.amountRefusal}
+                style={{
+                  width: "100%",
+                  height: 40,
+                  padding: "8px 12px",
+                  borderRadius: theme.cornerRadius,
+                  border: `1px solid ${checkout.amountRefusal ? "#ef4444" : `${theme.colors.primary}40`}`,
+                  background: "transparent",
+                  color: theme.colors.text,
+                  outline: "none",
+                }}
+              />
+              {/* What will ACTUALLY be taken, when rounding to a whole settlement
+                  unit means it is not quite what was typed. Shown only when the
+                  two differ, because a line that always appears is a line nobody
+                  reads. This is state the fan has to act on, not an explanation,
+                  so it stays visible rather than going behind a `?`. */}
+              {!checkout.amountRefusal && Number(typedAmount) > 0 && (() => {
+                const settled = toSettlement(Number(typedAmount));
+                const backInDisplay = Number(toDisplay(settled).toFixed(2));
+                return Math.abs(backInDisplay - Number(typedAmount)) >= 0.01 ? (
+                  <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6 }}>
+                    {t("forge.membership_checkout.pwyw_charged_as", { amount: fmt(settled) })}
+                  </p>
+                ) : null;
+              })()}
+              {checkout.amountRefusal && (
+                <p role="alert" style={errorText}>
+                  {checkout.amountRefusal.reason === "below_minimum"
+                    ? t("forge.membership_checkout.amount_below_minimum", {
+                        minimum: fmt(checkout.amountRefusal.minimum),
+                      })
+                    : t("forge.membership_checkout.amount_not_positive")}
+                </p>
+              )}
             </div>
+          )}
+
+          <div style={{ textAlign: "center", paddingTop: 16, borderTop: `1px solid ${theme.colors.primary}20` }}>
+            <p style={{ fontSize: 14, opacity: 0.75 }}>{t("forge.membership_checkout.total")}</p>
+            <p style={{ fontSize: 28, fontWeight: 800 }}>
+              {checkout.isFreeCycle ? t("forge.membership_checkout.free") : fmt(checkout.amount)}
+            </p>
+            <p style={{ fontSize: 14, opacity: 0.75 }}>
+              {checkout.billingCycle === "month"
+                ? t("forge.membership_checkout.per_month")
+                : t("forge.membership_checkout.per_year")}
+            </p>
+            {taxCaption && !checkout.isFreeCycle && (
+              <p style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{taxCaption}</p>
+            )}
+            {/* When the first charge falls is what the fan is agreeing to, so it
+                is content, not a hint. */}
+            {checkout.trialDays > 0 && checkout.trialEndsAt && (
+              <p data-testid="membership-checkout-trial-line" style={{ fontSize: 14, fontWeight: 600, marginTop: 8 }}>
+                {t("forge.membership_checkout.trial_line", {
+                  days: checkout.trialDays,
+                  date: formatTrialDate(checkout.trialEndsAt, locale),
+                })}
+              </p>
+            )}
           </div>
-        )}
+        </div>
 
-        {tier.payWhatYouWant && (
-          <div style={{ marginBottom: 16 }}>
-            {/* The floor is printed in the SETTLEMENT currency because that is
-                the currency of the number this box sends. A unit that changes
-                what you type belongs in the label. */}
-            <label htmlFor="forge-pwyw-amount" style={{ fontSize: 14, display: "block", marginBottom: 8 }}>
-              {t("forge.membership_checkout.pwyw_label")}{" "}
-              {t("forge.membership_checkout.pwyw_min", { amount: fmt(checkout.minimumAmount) })}
-            </label>
-            <input
-              id="forge-pwyw-amount"
-              type="number"
-              min={Number(toDisplay(checkout.minimumAmount).toFixed(2))}
-              step="any"
-              value={typedAmount}
-              onChange={(e) => {
-                setTypedAmount(e.target.value);
-                // Converted back on the way out. The floor is checked against
-                // THIS number, not the typed one, so a rate that rounds down
-                // cannot slip a fan under the artist's minimum.
-                checkout.setCustomAmount(toSettlement(Number(e.target.value)));
-              }}
-              aria-invalid={!!checkout.amountRefusal}
-              style={{
-                width: "100%",
-                height: 40,
-                padding: "8px 12px",
-                borderRadius: theme.cornerRadius,
-                border: `1px solid ${checkout.amountRefusal ? "#ef4444" : `${theme.colors.primary}40`}`,
-                background: "transparent",
-                color: theme.colors.text,
-                outline: "none",
-              }}
-            />
-            {/* What will ACTUALLY be taken, when rounding to a whole settlement
-                unit means it is not quite what was typed. Shown only when the
-                two differ, because a line that always appears is a line nobody
-                reads. This is state the fan has to act on, not an explanation,
-                so it stays visible rather than going behind a `?`. */}
-            {!checkout.amountRefusal && Number(typedAmount) > 0 && (() => {
-              const settled = toSettlement(Number(typedAmount));
-              const backInDisplay = Number(toDisplay(settled).toFixed(2));
-              return Math.abs(backInDisplay - Number(typedAmount)) >= 0.01 ? (
-                <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6 }}>
-                  {t("forge.membership_checkout.pwyw_charged_as", { amount: fmt(settled) })}
-                </p>
-              ) : null;
-            })()}
-            {checkout.amountRefusal && (
-              <p role="alert" style={errorText}>
-                {checkout.amountRefusal.reason === "below_minimum"
-                  ? t("forge.membership_checkout.amount_below_minimum", {
-                      minimum: fmt(checkout.amountRefusal.minimum),
-                    })
-                  : t("forge.membership_checkout.amount_not_positive")}
+        {/* The tier's questions, on every join mode. Answering them is part of
+            joining, and a refusal is content the fan acts on, so both stay
+            visible. */}
+        {checkout.questionnaire.length > 0 && !applicationBlocked && (
+          <div style={{ ...box, marginBottom: 16 }} data-testid="membership-questionnaire">
+            <h2 style={{ fontSize: 17, fontWeight: 700, marginBottom: 12 }}>
+              {t("forge.membership_checkout.questions_title")}
+            </h2>
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {checkout.questionnaire.map((q) => {
+                const value = checkout.questionnaireAnswers[q.id] ?? "";
+                const missing = !!checkout.questionnaireRefusal && !q.optional && !value.trim();
+                const fieldId = `forge-membership-question-${q.id}`;
+                const fieldStyle: CSSProperties = {
+                  width: "100%",
+                  padding: "8px 12px",
+                  borderRadius: theme.cornerRadius,
+                  border: `1px solid ${missing ? "#ef4444" : `${theme.colors.primary}40`}`,
+                  background: "transparent",
+                  color: theme.colors.text,
+                  outline: "none",
+                  boxSizing: "border-box",
+                };
+                return (
+                  <div key={q.id} style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}>
+                    <label htmlFor={fieldId}>
+                      {q.question}
+                      {!q.optional && (
+                        <span aria-hidden="true" style={{ color: "#ef4444" }}>
+                          {" "}
+                          *
+                        </span>
+                      )}
+                    </label>
+                    {q.type === "select" && q.options && q.options.length > 0 ? (
+                      <select
+                        id={fieldId}
+                        value={value}
+                        required={!q.optional}
+                        aria-invalid={missing}
+                        onChange={(e) => checkout.setQuestionnaireAnswer(q.id, e.target.value)}
+                        style={fieldStyle}
+                      >
+                        <option value="">{t("forge.membership_checkout.select_placeholder")}</option>
+                        {q.options.map((opt) => (
+                          <option key={opt} value={opt}>
+                            {opt}
+                          </option>
+                        ))}
+                      </select>
+                    ) : q.type === "textarea" ? (
+                      <textarea
+                        id={fieldId}
+                        value={value}
+                        rows={3}
+                        required={!q.optional}
+                        aria-invalid={missing}
+                        onChange={(e) => checkout.setQuestionnaireAnswer(q.id, e.target.value)}
+                        style={{ ...fieldStyle, resize: "vertical" }}
+                      />
+                    ) : (
+                      <input
+                        id={fieldId}
+                        value={value}
+                        required={!q.optional}
+                        aria-invalid={missing}
+                        onChange={(e) => checkout.setQuestionnaireAnswer(q.id, e.target.value)}
+                        style={{ ...fieldStyle, height: 40 }}
+                      />
+                    )}
+                    {missing && (
+                      <p style={{ color: "#ef4444", fontSize: 13 }}>{t("forge.membership_checkout.field_required")}</p>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+            {checkout.questionnaireRefusal && (
+              <p role="alert" data-testid="membership-questionnaire-refusal" style={errorText}>
+                {t("forge.membership_checkout.answer_required", {
+                  question: checkout.questionnaireRefusal.question,
+                })}
               </p>
             )}
           </div>
         )}
 
-        <div style={{ textAlign: "center", paddingTop: 16, borderTop: `1px solid ${theme.colors.primary}20` }}>
-          <p style={{ fontSize: 14, opacity: 0.75 }}>{t("forge.membership_checkout.total")}</p>
-          <p style={{ fontSize: 28, fontWeight: 800 }}>
-            {checkout.isFreeCycle ? t("forge.membership_checkout.free") : fmt(checkout.amount)}
-          </p>
-          <p style={{ fontSize: 14, opacity: 0.75 }}>
-            {checkout.billingCycle === "month"
-              ? t("forge.membership_checkout.per_month")
-              : t("forge.membership_checkout.per_year")}
+        {applicationStateLine && (
+          <p role="status" data-testid="membership-application-state" style={{ fontWeight: 600, marginBottom: 16 }}>
+            {applicationStateLine}
           </p>
-          {taxCaption && !checkout.isFreeCycle && (
-            <p style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{taxCaption}</p>
+        )}
+
+        {checkout.error && <p style={{ ...errorText, marginBottom: 16 }}>{checkout.error}</p>}
+
+        <div style={{ display: "flex", gap: 12 }}>
+          {!initialTierId && (
+            <button onClick={checkout.backToTierList} disabled={checkout.isProcessing} style={ghostButton}>
+              {t("forge.membership_checkout.back")}
+            </button>
+          )}
+          {!applicationBlocked && (
+            <button onClick={() => checkout.subscribe()} disabled={checkout.isProcessing} style={button}>
+              {checkout.isProcessing
+                ? t("forge.membership_checkout.submitting")
+                : submitLabel}
+            </button>
           )}
         </div>
       </div>
+    );
+  }
+}
 
-      {checkout.error && <p style={{ ...errorText, marginBottom: 16 }}>{checkout.error}</p>}
+const APPLICATION_OUTCOME_TITLE: Record<MembershipApplicationOutcome, string> = {
+  received: "forge.membership_checkout.application_received_title",
+  approved: "forge.membership_checkout.application_approved_title",
+  tier_full: "forge.membership_checkout.application_tier_full_title",
+  declined: "forge.membership_checkout.application_declined_title",
+  closed: "forge.membership_checkout.application_closed_title",
+};
 
-      <div style={{ display: "flex", gap: 12 }}>
-        {!initialTierId && (
-          <button onClick={checkout.backToTierList} disabled={checkout.isProcessing} style={ghostButton}>
-            {t("forge.membership_checkout.back")}
-          </button>
-        )}
-        <button onClick={() => checkout.subscribe()} disabled={checkout.isProcessing} style={button}>
-          {checkout.isProcessing
-            ? t("forge.membership_checkout.submitting")
-            : checkout.isChange
-              ? t("forge.membership_checkout.confirm_change")
-              : t("forge.membership_checkout.submit")}
-        </button>
-      </div>
-    </div>
+const APPLICATION_OUTCOME_BODY: Record<MembershipApplicationOutcome, string> = {
+  received: "forge.membership_checkout.application_received_body",
+  approved: "forge.membership_checkout.application_approved_body",
+  tier_full: "forge.membership_checkout.application_tier_full_body",
+  declined: "forge.membership_checkout.application_declined_body",
+  closed: "forge.membership_checkout.application_closed_body",
+};
+
+/** A tier card's action in the grid: a select button, or where the fan's application stands. */
+function GridTierAction({
+  tier,
+  trialDays,
+  onSelect,
+  buttonStyle,
+  t,
+}: {
+  tier: MembershipTier;
+  trialDays: number;
+  onSelect: () => void;
+  buttonStyle: CSSProperties;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}) {
+  const action = tierCardAction(tier);
+  if (action === "pending" || action === "approved" || action === "declined") {
+    return (
+      <p style={{ fontSize: 13, fontWeight: 600, textAlign: "center" }}>
+        {action === "pending"
+          ? t("forge.membership_tiers.application_pending")
+          : action === "approved"
+            ? t("forge.membership_tiers.application_approved")
+            : t("forge.membership_tiers.application_declined")}
+      </p>
+    );
+  }
+  return (
+    <button onClick={onSelect} style={buttonStyle}>
+      {action === "accept_invite"
+        ? t("forge.membership_tiers.accept_invite")
+        : action === "apply"
+          ? t("forge.membership_tiers.apply")
+          : action === "complete"
+            ? t("forge.membership_tiers.complete_membership")
+            : trialDays > 0
+              ? t("forge.membership_tiers.start_free_trial")
+              : t("forge.membership_checkout.select_tier")}
+    </button>
   );
 }