@tribe-nest/forge 3.35.0 → 3.37.0

package/src/ui/headless/membership/_tests/membershipCheckoutRefetch.spec.tsx

@@ -0,0 +1,136 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useMembershipCheckout } from "../useMembershipCheckout";
+import type { MembershipTier } from "../../../../types/models";
+
+/**
+ * The member the account page reads is re-read before the checkout hands over.
+ *
+ * A host that passes `onComplete` navigates with its own router, and that does
+ * NOT re-read the signed-in member: `user` is context state, fetched once when
+ * the page was first opened. So a fan who joined a free tier arrived on an
+ * account page still holding the user they were BEFORE they joined, and it
+ * offered them "Join" over a live membership until they refreshed by hand.
+ *
+ * Three seams, all mocked at the module boundary so nothing touches the network:
+ * the auth context (for `refetchUser`), the tier list, and the subscription
+ * mutations.
+ */
+
+const auth = vi.hoisted(() => ({
+  user: { id: "account-1", membership: undefined as unknown },
+  refetchUser: vi.fn(async () => {}),
+}));
+
+const subscriptions = vi.hoisted(() => ({
+  createFree: vi.fn(async () => ({})),
+  createPaid: vi.fn(async () => ({}) as Record<string, unknown>),
+}));
+
+/** Every call in the order it happened, which is the whole assertion. */
+const calls = vi.hoisted(() => [] as string[]);
+
+vi.mock("../../../../contexts/PublicAuthContext", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../contexts/PublicAuthContext")>()),
+  usePublicAuth: () => ({ user: auth.user, refetchUser: auth.refetchUser }),
+}));
+
+vi.mock("../../../../data/queries/useMembership", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../data/queries/useMembership")>()),
+  useGetMembershipTiers: () => ({ data: tiers, isLoading: false }),
+}));
+
+vi.mock("../../../../data/queries/useSubscriptions", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../data/queries/useSubscriptions")>()),
+  useCreateSubscription: () => ({ mutateAsync: subscriptions.createPaid, isPending: false }),
+  useCreateFreeSubscription: () => ({ mutateAsync: subscriptions.createFree, isPending: false }),
+  useConfirmLatestSubscription: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}));
+
+const tier = (overrides: Partial<MembershipTier>): MembershipTier =>
+  ({
+    id: "tier-free",
+    profileId: "profile-1",
+    name: "Free tier",
+    priceMonthly: 0,
+    priceYearly: null,
+    payWhatYouWant: false,
+    benefits: [],
+    ...overrides,
+  }) as unknown as MembershipTier;
+
+const tiers: MembershipTier[] = [
+  tier({}),
+  tier({ id: "tier-paid", name: "Inner Circle", priceMonthly: 10 } as Partial<MembershipTier>),
+];
+
+beforeEach(() => {
+  calls.length = 0;
+  auth.refetchUser.mockClear();
+  auth.refetchUser.mockImplementation(async () => {
+    calls.push("refetch");
+  });
+  subscriptions.createFree.mockClear();
+  subscriptions.createFree.mockResolvedValue({});
+  subscriptions.createPaid.mockClear();
+});
+
+const onComplete = () => calls.push("complete");
+
+describe("useMembershipCheckout: the member is re-read before the host navigates", () => {
+  it("REGRESSION: refetches the member after a free activation, before handing over", async () => {
+    const { result } = renderHook(() => useMembershipCheckout({ initialTierId: "tier-free", onComplete }));
+
+    await act(async () => {
+      await result.current.subscribe();
+    });
+
+    expect(subscriptions.createFree).toHaveBeenCalledTimes(1);
+    // Order matters: handing over first means the account page renders from the
+    // stale user and never re-renders, which IS the bug.
+    expect(calls).toEqual(["refetch", "complete"]);
+  });
+
+  it("REGRESSION: refetches when the server settled a tier change with nothing to pay", async () => {
+    // Proration on an existing subscription: `requiresPayment` false, no card
+    // step, and the same stale-user landing as a free join.
+    subscriptions.createPaid.mockResolvedValue({ requiresPayment: false });
+    const { result } = renderHook(() => useMembershipCheckout({ initialTierId: "tier-paid", onComplete }));
+
+    await act(async () => {
+      await result.current.subscribe();
+    });
+
+    expect(calls).toEqual(["refetch", "complete"]);
+  });
+
+  it("leaves the confirmation leg to the account page", async () => {
+    // A real provider payment has to be reconciled first, and the account page
+    // re-reads the member AFTER that. Refetching here would read the membership
+    // a beat too early and cache the pre-payment answer.
+    const { result } = renderHook(() => useMembershipCheckout({ initialTierId: "tier-paid", onComplete }));
+
+    await act(async () => {
+      await result.current.finish(true);
+    });
+
+    expect(auth.refetchUser).not.toHaveBeenCalled();
+    expect(calls).toEqual(["complete"]);
+  });
+
+  it("does not refetch when the fan still has a card step in front of them", async () => {
+    // Stripe handed back a client secret: nothing has been paid, nothing has
+    // changed about the member, and the checkout is still on screen.
+    subscriptions.createPaid.mockResolvedValue({ requiresPayment: true, clientSecret: "cs_test" });
+    const { result } = renderHook(() => useMembershipCheckout({ initialTierId: "tier-paid", onComplete }));
+
+    await act(async () => {
+      await result.current.subscribe();
+    });
+
+    expect(auth.refetchUser).not.toHaveBeenCalled();
+    expect(calls).toEqual([]);
+    expect(result.current.step).toBe("payment");
+  });
+});

package/src/ui/headless/membership/useMembershipCheckout.ts

@@ -79,7 +79,7 @@ const errMessage = (e: unknown) =>
  * provider tree. Read that file before changing anything about money here.
  */
 export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
-  const { user } = usePublicAuth();
+  const { user, refetchUser } = usePublicAuth();
   const { data: tiers, isLoading } = useGetMembershipTiers();
   const createPaid = useCreateSubscription();
   const createFree = useCreateFreeSubscription();
@@ -167,7 +167,21 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
   const isChange =
     !!membership?.paymentProviderSubscriptionId && membership.status === "active" && !isFreeCycle && !!selectedTier;
 
-  const finish = (requiresConfirmation: boolean) => {
+  /**
+   * `await`ed by every caller, because of the refetch below.
+   *
+   * A host that passes `onComplete` navigates with its own router, which does
+   * NOT re-read the signed-in member: `user` is context state, loaded once when
+   * the page was first opened. So a fan who joined a free tier, or moved tier by
+   * proration, landed on an account page still holding the user they were before
+   * they pressed the button, and it offered them "Join" over a membership that
+   * was already live until they hard-refreshed.
+   *
+   * The confirmation leg is left alone on purpose: it has a provider payment to
+   * reconcile first, and the account page re-reads the member AFTER that.
+   */
+  const finish = async (requiresConfirmation: boolean) => {
+    if (!requiresConfirmation) await refetchUser();
     if (opts.onComplete) {
       opts.onComplete({ requiresConfirmation });
       return;
@@ -207,7 +221,7 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
     try {
       if (isFreeCycle) {
         await createFree.mutateAsync({ membershipTierId: selectedTier.id, attributionRefId, ...landing });
-        finish(false);
+        await finish(false);
         return;
       }
       const data = await createPaid.mutateAsync({
@@ -228,7 +242,7 @@ export function useMembershipCheckout(opts: UseMembershipCheckoutOptions = {}) {
       // membership nobody has paid for.
       const requiresPayment = data.requiresPayment ?? !!(data.clientSecret || data.accessCode || data.checkoutUrl);
       if (!requiresPayment) {
-        finish(false);
+        await finish(false);
         return;
       }
 

package/src/ui/index.ts

@@ -96,6 +96,7 @@ export { ProductBrowseNav, type ProductBrowseNavProps } from "./styled/ProductBr
 export { Addons, type AddonsProps } from "./styled/Addons";
 export { BundleConfirmation, type BundleConfirmationProps } from "./styled/BundleConfirmation";
 export { ProductDetail, type ProductDetailProps } from "./styled/ProductDetail";
+export { MembershipTierCallout, type MembershipTierCalloutProps } from "./styled/MembershipTierCallout";
 export { MembershipTiers, type MembershipTiersProps } from "./styled/MembershipTiers";
 export { EventsList, type EventsListProps } from "./styled/EventsList";
 export { EventTickets, type EventTicketsProps } from "./styled/EventTickets";
@@ -200,7 +201,10 @@ export { CourseAccess, type CourseAccessProps } from "./styled/CourseAccess";
 // five gate states each strand somebody if drawn as one of the others.
 export { FilmCatalog, rentalWindowLabel, type FilmCatalogProps } from "./styled/FilmCatalog";
 export { FilmDetail, type FilmDetailProps } from "./styled/FilmDetail";
-export { FilmLibrary, type FilmLibraryProps } from "./styled/FilmLibrary";
+// `FilmRentalList` is the library WITHOUT its page heading: the rows on their
+// own, for a surface that supplies its own title (the account dashboard's
+// Rentals tab does exactly this). Same rows, same live/expired rule.
+export { FilmLibrary, FilmRentalList, type FilmLibraryProps, type FilmRentalListProps } from "./styled/FilmLibrary";
 export { FilmWatch, type FilmWatchProps, type FilmPlayerRenderProps } from "./styled/FilmWatch";
 export { DonationPage, type DonationPageProps } from "./styled/DonationPage";
 export { ReviewsSection, StarRow, type ReviewsSectionProps } from "./styled/ReviewsSection";

package/src/ui/styled/AccountDashboard.tsx

@@ -18,10 +18,10 @@ import {
   useSavedPosts,
   useNotificationPreferences,
   useUpdateNotificationPreference,
+  useMyFilmRentals,
   useCancelMembership,
   useMembershipAccess,
   useOpenBillingPortal,
-  useCommunitySpaces,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -42,6 +42,7 @@ import { AddToCalendar } from "./AddToCalendar";
 import { WalletPassButtons } from "./WalletPassButtons";
 import { TicketTransferPanel } from "./TicketTransfer";
 import { CartLineOptions } from "./CartLineOptions";
+import { FilmRentalList } from "./FilmLibrary";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -54,6 +55,13 @@ export const ACCOUNT_TABS = [
   // "order" — the Orders tab covers product orders only — so it needs its own
   // tab or it is unreachable, which is what it was.
   "bookings",
+  // Films and series this fan has rented. Next to the other purchase surfaces
+  // because it answers the same question they do: what did I buy from this
+  // artist, and can I use it right now?
+  //
+  // Drawn only when the fan actually holds a rental (see `visibleTabs`), so the
+  // tab does not appear on the account page of every site that never sells one.
+  "rentals",
   "saved",
   "account",
   "notifications",
@@ -70,6 +78,7 @@ const TAB_LABEL_KEYS: Record<AccountTabKey, string> = {
   tickets: "forge.account_dashboard.tab_tickets",
   waitlist: "forge.account_dashboard.tab_waitlist",
   bookings: "forge.account_dashboard.tab_bookings",
+  rentals: "forge.account_dashboard.tab_rentals",
   saved: "forge.account_dashboard.tab_saved",
   account: "forge.account_dashboard.tab_account",
   notifications: "forge.account_dashboard.tab_notifications",
@@ -88,16 +97,25 @@ export interface AccountDashboardProps {
    */
   onNavigateMembership?: () => void;
   /**
-   * Navigate to the community spaces, the member home's Spaces tab (host maps
-   * this to its router, e.g. `/i/members/spaces`).
+   * Navigate to the member area, the member home (host maps this to its router,
+   * e.g. `/i/members`).
    *
-   * Optional, and drawn only when the signed-in member has at least one space
-   * they can actually open: `/public/community/spaces` returns open spaces plus
-   * the spaces gated to a tier they hold, so an empty list is the server saying
-   * there is no door here. Without that check the account page would offer a
-   * member a room they get bounced out of, which is worse than no link at all.
+   * Optional, and drawn for every signed-in visitor, membership or none. It used
+   * to be gated on `/public/community/spaces` returning a space they could open,
+   * which hid the member area from exactly the people who had not joined yet:
+   * the member home itself shows the locked posts and the way to buy access, so
+   * the door is never a dead end.
    */
   onNavigateCommunity?: () => void;
+  /**
+   * Navigate to a film route from the Rentals tab (watch, resume, rent again).
+   *
+   * Takes the href rather than being one callback per destination, because a
+   * rental row points at a title AND at the episode the fan got to, so the
+   * target is data rather than a fixed page. Left out, the row falls back to a
+   * full-page visit, which works on any site and is merely slower.
+   */
+  onNavigateFilm?: (href: string) => void;
   /**
    * Optional currency formatter override. Defaults to Forge's `useFormatCurrency`
    * (which honors the visitor's selected currency + tenant exchange rates), so the
@@ -164,6 +182,7 @@ interface TabContext {
   currency?: string;
   onNavigateMembership?: () => void;
   onNavigateCommunity?: () => void;
+  onNavigateFilm?: (href: string) => void;
 }
 
 // ---- page -------------------------------------------------------------------
@@ -178,6 +197,7 @@ export function AccountDashboard({
   onTabChange,
   onNavigateMembership,
   onNavigateCommunity,
+  onNavigateFilm,
   formatAmount,
   formatDate,
   currency,
@@ -188,6 +208,17 @@ export function AccountDashboard({
   const { t } = useCardStyles();
   const tr = useForgeT();
   const { data: siteConfig } = useSiteConfig();
+  /**
+   * Does this fan hold any rental at all? That is the whole gate on the Rentals
+   * tab: the server's own answer decides, and a surface with nothing behind it
+   * is not drawn.
+   *
+   * Film rentals are off by default and per profile, so on most sites this read
+   * comes back empty for ever and the tab never appears. It is the SAME query
+   * `FilmRentalList` runs inside the tab (same key, same arguments), so
+   * react-query serves both from one request rather than two.
+   */
+  const { data: rentals } = useMyFilmRentals(user?.id);
 
   const fmtAmount = useAmountFormatter(formatAmount);
   const fmtDate = formatDate ?? defaultFormatDate;
@@ -200,8 +231,18 @@ export function AccountDashboard({
     currency: currency ?? siteConfig?.currency,
     onNavigateMembership,
     onNavigateCommunity,
+    onNavigateFilm,
   };
 
+  /**
+   * The strip hides Rentals until there is something in it. The one exception
+   * is the tab currently being shown, so a link straight to `?tab=rentals` (a
+   * receipt email, a bookmark) does not land on a page whose strip disowns the
+   * panel underneath it.
+   */
+  const hasRentals = (rentals?.total ?? 0) > 0;
+  const visibleTabs = ACCOUNT_TABS.filter((key) => key !== "rentals" || hasRentals || tab === "rentals");
+
   if (!user) return <Loading fullPage />;
 
   return (
@@ -222,7 +263,7 @@ export function AccountDashboard({
       </div>
 
       <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24 }}>
-        {ACCOUNT_TABS.map((tabKey) => (
+        {visibleTabs.map((tabKey) => (
           <button
             key={tabKey}
             onClick={() => onTabChange?.(tabKey)}
@@ -247,6 +288,7 @@ export function AccountDashboard({
       {tab === "tickets" && <TicketsTab ctx={ctx} />}
       {tab === "waitlist" && <WaitlistTab ctx={ctx} />}
       {tab === "bookings" && <BookingsTab ctx={ctx} />}
+      {tab === "rentals" && <RentalsTab ctx={ctx} />}
       {tab === "saved" && <SavedTab />}
       {tab === "account" && <AccountTab ctx={ctx} />}
       {tab === "notifications" && <NotificationsTab />}
@@ -262,12 +304,12 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const tr = useForgeT();
   const { formatAmount, formatDate, currency, onNavigateMembership, onNavigateCommunity } = ctx;
   const cancelMembership = useCancelMembership();
-  // The way into the community, which the account page had no link to at all.
-  // The list is already access-filtered by the server (open spaces plus the
-  // ones gated to a tier this member holds), so its emptiness is the whole
-  // gate: no spaces, no link, and nobody is sent at a locked door.
-  const { data: communitySpaces } = useCommunitySpaces();
-  const canOpenCommunity = !!onNavigateCommunity && (communitySpaces?.length ?? 0) > 0;
+  // The way into the member area. Being signed in is the whole gate: a fan with
+  // no membership needs this door most, because the member home is where the
+  // locked posts and the offer to join actually live. The old gate asked
+  // `/public/community/spaces` for an openable space first, so a fan who had not
+  // joined saw no way in at all.
+  const canOpenCommunity = !!onNavigateCommunity && !!user;
   const [isCancelling, setIsCancelling] = useState(false);
   /**
    * Cancelling is destructive and irreversible from here, so it asks first.
@@ -383,7 +425,7 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             what the membership is FOR, not another thing to do to the plan. */}
         {canOpenCommunity && (
           <button onClick={() => onNavigateCommunity?.()} style={{ ...ghostButton, marginRight: "auto" }}>
-            {tr("forge.account_dashboard.community_spaces")}
+            {tr("forge.account_dashboard.member_area")}
           </button>
         )}
         {message.showUpdatePayment && (
@@ -1286,6 +1328,35 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
   );
 }
 
+// ---- Rentals tab ------------------------------------------------------------
+
+/**
+ * Films and series this fan has rented, live and expired.
+ *
+ * `/i/films/library` already answered this, and nothing on the account page led
+ * to it: a fan who rented a film found their tickets, their orders and their
+ * sessions here and no sign that the rental existed. This is that page's list,
+ * rendered in the tab strip where a buyer looks for a purchase.
+ *
+ * The affordance per row comes from the SERVER's `isLive`, not from arithmetic
+ * repeated here: a running window offers Watch (Resume, when there is progress
+ * to resume), and a window that has closed or been refunded offers Rent again.
+ * That decision lives in one place, `FilmRentalList`, and both surfaces read it.
+ */
+function RentalsTab({ ctx }: { ctx: TabContext }) {
+  const { t, card } = useCardStyles();
+  const tr = useForgeT();
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.rentals_title")}
+      </h2>
+      <FilmRentalList navigate={ctx.onNavigateFilm} />
+    </div>
+  );
+}
+
 // ---- Orders tab -------------------------------------------------------------
 
 function OrdersTab({ ctx }: { ctx: TabContext }) {

package/src/ui/styled/FilmLibrary.tsx

@@ -11,7 +11,7 @@ import {
 } from "../../data/queries/useFilms";
 import { useForgeT, type ForgeT } from "../../i18n";
 
-export interface FilmLibraryProps {
+export interface FilmRentalListProps {
   /** Where films live. Default `/i/films`. */
   basePath?: string;
   /** SPA navigation adapter. Defaults to a full-page visit. */
@@ -20,27 +20,30 @@ export interface FilmLibraryProps {
   style?: CSSProperties;
 }
 
+/** The page takes exactly what the list takes: it adds a heading, nothing else. */
+export type FilmLibraryProps = FilmRentalListProps;
+
 /**
- * The fan's own rentals: what is running, what has not been started, and what
- * has run out.
+ * The rentals themselves, with no page furniture around them.
  *
- * Expired rentals are here deliberately. The library is where a fan re-rents,
- * and a rental that vanishes on expiry reads as "you were robbed" rather than
- * "that ended" - so an expired row keeps its title, states plainly that the
- * window closed, and offers the way back.
+ * Split out of `FilmLibrary` so the account dashboard's Rentals tab renders the
+ * SAME rows as `/i/films/library` rather than a second implementation of "is
+ * this window still open". Two answers to that question is one answer too many:
+ * the divergent copy would appear on whichever surface was edited second, and
+ * the fan would be told two different things about the same rental.
  *
- * A row states one fact the reader must act on, so it stays visible rather than
- * going behind a `?`: how long is left. There is no "what was bought" line any
- * more, because a rental is always the whole title and the title is the row.
+ * It fetches its own data. `useMyFilmRentals` is keyed on the account, so a host
+ * that already read it (the dashboard does, to decide whether to draw the tab at
+ * all) shares one request through react-query rather than making a second.
  */
-export function FilmLibrary({ basePath = "/i/films", navigate, className, style }: FilmLibraryProps) {
+export function FilmRentalList({ basePath = "/i/films", navigate, className, style }: FilmRentalListProps) {
   const t = useForgeT();
   const tokens = useThemeTokens();
   const { user, isInitialized } = usePublicAuth();
   const { data, isLoading } = useMyFilmRentals(user?.id);
   const go = navigate ?? ((href: string) => window.location.assign(href));
 
-  if (!isInitialized || isLoading) return <Loading fullPage />;
+  if (!isInitialized || isLoading) return <Loading />;
 
   const rentals = data?.data ?? [];
 
@@ -61,23 +64,11 @@ export function FilmLibrary({ basePath = "/i/films", navigate, className, style
         display: "flex",
         flexDirection: "column",
         gap: 16,
-        maxWidth: 900,
-        margin: "0 auto",
         color: tokens.text,
         fontFamily: tokens.fontFamily,
         ...style,
       }}
     >
-      <h1
-        style={{
-          fontSize: 24,
-          fontWeight: 800,
-          fontFamily: tokens.headingFontFamily || tokens.fontFamily,
-        }}
-      >
-        {t("forge.film_library.heading")}
-      </h1>
-
       {rentals.length === 0 && (
         <div style={notice}>
           <p style={{ marginBottom: 12 }}>{t("forge.film_library.empty")}</p>
@@ -107,6 +98,52 @@ export function FilmLibrary({ basePath = "/i/films", navigate, className, style
   );
 }
 
+/**
+ * The fan's own rentals as a PAGE: what is running, what has not been started,
+ * and what has run out.
+ *
+ * Expired rentals are here deliberately. The library is where a fan re-rents,
+ * and a rental that vanishes on expiry reads as "you were robbed" rather than
+ * "that ended" - so an expired row keeps its title, states plainly that the
+ * window closed, and offers the way back.
+ *
+ * A row states one fact the reader must act on, so it stays visible rather than
+ * going behind a `?`: how long is left. There is no "what was bought" line any
+ * more, because a rental is always the whole title and the title is the row.
+ */
+export function FilmLibrary({ basePath, navigate, className, style }: FilmLibraryProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        maxWidth: 900,
+        margin: "0 auto",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      <h1
+        style={{
+          fontSize: 24,
+          fontWeight: 800,
+          fontFamily: tokens.headingFontFamily || tokens.fontFamily,
+        }}
+      >
+        {t("forge.film_library.heading")}
+      </h1>
+
+      <FilmRentalList basePath={basePath} navigate={navigate} />
+    </div>
+  );
+}
+
 /** Where the fan got to in the episode they should resume, or null. */
 function resumeTarget(rental: MyFilmRental): { episodeId: string; entry: FilmWatchProgressEntry } | null {
   // The furthest-along INCOMPLETE episode: resuming a finished one is how a

package/src/ui/styled/LoginForm.tsx

@@ -1,6 +1,7 @@
 import { useLoginFlow } from "../headless/auth/useLoginFlow";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useForgeT } from "../../i18n";
+import { MembershipTierCallout } from "./MembershipTierCallout";
 
 export interface LoginFormProps {
   /** Called after a successful login. The shell typically redirects here. */
@@ -9,10 +10,17 @@ export interface LoginFormProps {
   signupHref: string;
   /** Href for the "Forgot password?" link. */
   forgotHref: string;
+  /**
+   * The tier this visitor was on their way to join, shown above the form so
+   * they can see the sign-in wall is part of joining and which tier they picked.
+   * Hosts read it off the `redirect` they were sent here with. Left out, the
+   * form looks exactly as it did.
+   */
+  membershipTierId?: string;
 }
 
 /** Themed 2FA login form (credentials → emailed code), built on `useLoginFlow`. */
-export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps) {
+export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId }: LoginFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
   const flow = useLoginFlow({ onSuccess });
@@ -60,6 +68,9 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
   if (flow.step === "code") {
     return (
       <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} />
         <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>
@@ -105,6 +116,9 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
 
   return (
     <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} />
       <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