@tribe-nest/forge 3.36.0 → 3.37.0

package/package.json

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

package/src/i18n/de.json

@@ -22,7 +22,6 @@
   "forge.account_dashboard.cancelled": "Storniert",
   "forge.account_dashboard.cancelling": "Wird storniert…",
   "forge.account_dashboard.close": "Schließen",
-  "forge.account_dashboard.community_spaces": "Community-Bereiche",
   "forge.account_dashboard.confirm_password": "Neues Passwort bestätigen",
   "forge.account_dashboard.current_password": "Aktuelles Passwort",
   "forge.account_dashboard.data_export_description": "Exportiere eine Kopie deiner persönlichen Daten.",
@@ -37,6 +36,7 @@
   "forge.account_dashboard.last_name": "Nachname",
   "forge.account_dashboard.leave_waitlist": "Warteliste verlassen",
   "forge.account_dashboard.log_out": "Abmelden",
+  "forge.account_dashboard.member_area": "Mitgliederbereich",
   "forge.account_dashboard.membership_cancel_error": "Wir konnten deine Mitgliedschaft nicht kündigen. Bitte versuche es erneut oder kontaktiere uns.",
   "forge.account_dashboard.membership_change": "Ändern",
   "forge.account_dashboard.membership_empty": "Du hast keine aktive Mitgliedschaft.",
@@ -939,6 +939,9 @@
   "forge.membership_checkout.title": "{tier_name} beitreten",
   "forge.membership_checkout.total": "Gesamt",
   "forge.membership_checkout.view_memberships": "Mitgliedschaften ansehen",
+  "forge.membership_tier_callout.benefits_label": "Vorteile:",
+  "forge.membership_tier_callout.join_title": "{tier_name} beitreten",
+  "forge.membership_tier_callout.more_benefits": "+{count} weitere Vorteile",
   "forge.membership_tiers.empty_title": "Keine Mitgliedschaften verfügbar.",
   "forge.membership_tiers.heading": "Mitgliedschaft",
   "forge.membership_tiers.price_free": "Kostenlos",

package/src/i18n/en.json

@@ -22,7 +22,6 @@
   "forge.account_dashboard.cancelled": "Cancelled",
   "forge.account_dashboard.cancelling": "Cancelling…",
   "forge.account_dashboard.close": "Close",
-  "forge.account_dashboard.community_spaces": "Community spaces",
   "forge.account_dashboard.confirm_password": "Confirm new password",
   "forge.account_dashboard.current_password": "Current password",
   "forge.account_dashboard.data_export_description": "Export a copy of your personal data.",
@@ -37,6 +36,7 @@
   "forge.account_dashboard.last_name": "Last name",
   "forge.account_dashboard.leave_waitlist": "Leave waitlist",
   "forge.account_dashboard.log_out": "Log out",
+  "forge.account_dashboard.member_area": "Member Area",
   "forge.account_dashboard.membership_cancel_error": "We couldn't cancel your membership. Please try again or contact us.",
   "forge.account_dashboard.membership_change": "Change",
   "forge.account_dashboard.membership_empty": "You don't have an active membership.",
@@ -939,6 +939,9 @@
   "forge.membership_checkout.title": "Join {tier_name}",
   "forge.membership_checkout.total": "Total",
   "forge.membership_checkout.view_memberships": "View memberships",
+  "forge.membership_tier_callout.benefits_label": "Benefits:",
+  "forge.membership_tier_callout.join_title": "Join {tier_name}",
+  "forge.membership_tier_callout.more_benefits": "+{count} more benefits",
   "forge.membership_tiers.empty_title": "No membership tiers available.",
   "forge.membership_tiers.heading": "Membership",
   "forge.membership_tiers.price_free": "Free",

package/src/ui/format/membershipPriceLabel.ts

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

package/src/ui/headless/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";

package/src/ui/styled/AccountDashboard.tsx

@@ -22,7 +22,6 @@ import {
   useCancelMembership,
   useMembershipAccess,
   useOpenBillingPortal,
-  useCommunitySpaces,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -98,14 +97,14 @@ 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;
   /**
@@ -211,8 +210,8 @@ export function AccountDashboard({
   const { data: siteConfig } = useSiteConfig();
   /**
    * Does this fan hold any rental at all? That is the whole gate on the Rentals
-   * tab, on the same principle as the community link above: the server's own
-   * answer decides, and a surface with nothing behind it is not drawn.
+   * 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
@@ -305,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.
@@ -426,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 && (

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

package/src/ui/styled/MembershipTierCallout.tsx

@@ -0,0 +1,91 @@
+import type { CSSProperties } from "react";
+import { useGetMembershipTiers } from "../../data/queries/useMembership";
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { membershipPriceLabel } from "../format/membershipPriceLabel";
+
+export interface MembershipTierCalloutProps {
+  /** The tier the visitor is on their way to join. Nothing is drawn without it. */
+  membershipTierId?: string;
+  /** How many benefits to list before summarising the rest. Default 3. */
+  maxBenefits?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * "Join {tier}", with its price and a few of its benefits.
+ *
+ * Drawn above the login and signup forms when a visitor was sent there from a
+ * membership checkout. Without it the fan clicks Join, gets an unexplained
+ * sign-in wall, and has to remember which tier they picked and trust that the
+ * site remembers too. The client app has always shown this; code websites did
+ * not, so this is the same reassurance in a Forge component.
+ *
+ * Renders NOTHING when there is no tier id, when the tiers have not loaded, or
+ * when the id matches nothing the artist sells. A form that pushes itself down
+ * the page a beat after it appeared is worse than one that never moved, and an
+ * id from a stale link must not print an empty box.
+ */
+export function MembershipTierCallout({
+  membershipTierId,
+  maxBenefits = 3,
+  className,
+  style,
+}: MembershipTierCalloutProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const fmt = useAmountFormatter();
+  // The tier list is one cached query per profile, so this shares the fetch the
+  // membership page and the checkout already make rather than adding a request.
+  const { data: tiers } = useGetMembershipTiers();
+  const tier = membershipTierId ? tiers?.find((candidate) => candidate.id === membershipTierId) : undefined;
+
+  if (!tier) return null;
+
+  const benefits = tier.benefits ?? [];
+  const shown = benefits.slice(0, maxBenefits);
+  const remaining = benefits.length - shown.length;
+
+  return (
+    <div
+      className={className}
+      style={{
+        // No width and no outer margin: this is placed INSIDE the host's card
+        // (the login and signup forms put it above their heading), so it must
+        // not carry a column of its own that fights the one around it.
+        marginBottom: 24,
+        padding: 16,
+        borderRadius: tokens.cornerRadius,
+        background: `${tokens.primary}1a`,
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 8, fontFamily: tokens.headingFontFamily }}>
+        {t("forge.membership_tier_callout.join_title", { tier_name: tier.name })}
+      </h2>
+      <p style={{ fontSize: 14, marginBottom: shown.length ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      {!!shown.length && (
+        <div style={{ fontSize: 14 }}>
+          <p style={{ fontWeight: 500, marginBottom: 4 }}>{t("forge.membership_tier_callout.benefits_label")}</p>
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+            {shown.map((benefit) => (
+              <li key={benefit.id} style={{ display: "flex", gap: 8 }}>
+                <span style={{ color: tokens.primary }}>✓</span>
+                {benefit.title}
+              </li>
+            ))}
+            {remaining > 0 && (
+              <li style={{ fontSize: 12, opacity: 0.75 }}>
+                {t("forge.membership_tier_callout.more_benefits", { count: remaining })}
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/MembershipTiers.tsx

@@ -5,7 +5,7 @@ import { useAmountFormatter } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { useForgeT } from "../../i18n";
-import { cycleFloor, offeredCycles } from "../format/membershipPwyw";
+import { membershipPriceLabel } from "../format/membershipPriceLabel";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -53,20 +53,10 @@ export function MembershipTiers({
   if (isLoading) return <Loading fullPage />;
   if (!tiers?.length) return <p style={{ color: tokens.text }}>{t("forge.membership_tiers.empty_title")}</p>;
 
-  // A tier priced on ONE cycle must be advertised on that cycle. Reading the
-  // monthly minimum unconditionally printed "Pay what you want from $0/mo" on a
-  // yearly-only tier, which reads as free and is the opposite of the truth.
-  const priceLabel = (tier: MembershipTier) => {
-    const cycles = offeredCycles(tier);
-    if (tier.payWhatYouWant) {
-      return cycles.month
-        ? t("forge.membership_tiers.price_pwyw", { amount: fmt(cycleFloor(tier, "month")) })
-        : t("forge.membership_tiers.price_pwyw_yearly", { amount: fmt(cycleFloor(tier, "year")) });
-    }
-    if (cycles.month) return t("forge.membership_tiers.price_monthly", { amount: fmt(cycleFloor(tier, "month")) });
-    if (cycles.year) return t("forge.membership_tiers.price_yearly", { amount: fmt(cycleFloor(tier, "year")) });
-    return freeLabel;
-  };
+  // A tier priced on ONE cycle must be advertised on that cycle. The rule lives
+  // in `membershipPriceLabel` so the login and signup callout prices a tier with
+  // the same sentence this page does.
+  const priceLabel = (tier: MembershipTier) => membershipPriceLabel(tier, t, fmt);
 
   const select = (tier: MembershipTier) => {
     if (onSelect) return onSelect(tier);

package/src/ui/styled/SignupForm.tsx

@@ -1,12 +1,19 @@
 import { useSignupForm } from "../headless/auth/useSignupForm";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { MembershipTierCallout } from "./MembershipTierCallout";
 
 export interface SignupFormProps {
   /** Called after a successful signup. The shell typically redirects here. */
   onSuccess?: (smartLinkPath?: string) => void;
   /** Href for the "Login" link. */
   loginHref: string;
+  /**
+   * The tier this visitor is on their way to join. Shown above the form, so a
+   * fan who pressed Join and landed on a signup wall can see which tier they
+   * picked and that the wall is part of joining it. It also rides along on the
+   * create-account request, where a coupon can turn it into a membership.
+   */
   membershipTierId?: string;
   couponCode?: string;
 }
@@ -64,6 +71,9 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
 
   return (
     <div style={card}>
+      {/* What the fan was doing when they hit this wall, kept in view through
+          the emailed-code step as well. Nothing is drawn without a tier. */}
+      <MembershipTierCallout membershipTierId={membershipTierId} />
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
         {form.awaitingCode ? t("forge.signup_form.verify_title") : t("forge.signup_form.title")}
       </h1>

package/src/ui/styled/_tests/AccountDashboardCommunity.spec.tsx

@@ -8,21 +8,20 @@ import { communityKeys, type CommunitySpace } from "../../../data/queries/useCom
 import { AccountDashboard } from "../AccountDashboard";
 
 /**
- * The account page's way into the members corner.
+ * The account page's way into the member area.
  *
  * Before this, a signed-in member landed on the membership card and the only
  * doors on it led back to billing: change the plan, cancel it, fix the card.
- * The community they were paying for was reachable only by typing the URL.
+ * The member area they were paying for was reachable only by typing the URL.
  *
- * The gate is the server's own answer. `/public/community/spaces` returns the
- * open spaces PLUS the ones gated to a tier the caller holds, so the list being
- * empty is the server saying "there is nothing here you can open". Drawing the
- * link anyway would walk a member into a bounce, which is why the empty case is
- * asserted as hard as the happy one.
+ * The first version gated the link on `/public/community/spaces` returning a
+ * space the caller could open, which hid it from precisely the fans who had not
+ * joined yet. Being signed in is now the whole gate: the member home shows the
+ * locked posts and the way to buy access, so it is never a dead end.
  *
  * Rendered through `react-dom/server`: no DOM, no effects, so the spaces query
- * is SEEDED into the react-query cache rather than mocked. That keeps the real
- * `useCommunitySpaces` in the path, and a rename of its query key fails here.
+ * is SEEDED into the react-query cache rather than mocked, which keeps the real
+ * data path in place for the rest of the card.
  */
 
 const PROFILE_ID = "profile-1";
@@ -65,21 +64,29 @@ const member = {
   },
 };
 
+/** The same signed-in fan, with no membership of any kind. */
+const nonMember = { ...member, membership: undefined };
+
 /**
  * The membership tab as a Forge code website draws it.
  *
- * `spaces === null` stands for the query never having answered (the member has
- * no accessible spaces cached), which is the state a non-member sits in.
+ * `spaces === null` stands for the query never having answered, which is the
+ * state every first paint sits in.
  */
-function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: () => void }): string {
+function render(opts: {
+  spaces: CommunitySpace[] | null;
+  user?: typeof member | typeof nonMember | null;
+  onNavigateCommunity?: () => void;
+}): string {
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   if (opts.spaces) queryClient.setQueryData(communityKeys.spaces(PROFILE_ID), opts.spaces);
+  const user = opts.user === undefined ? member : opts.user;
 
   return renderToStaticMarkup(
     <QueryClientProvider client={queryClient}>
       <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
         <PublicAuthContext.Provider
-          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+          value={{ user, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
         >
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
@@ -96,39 +103,47 @@ function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: (
   );
 }
 
-describe("AccountDashboard: the way into the members corner", () => {
-  it("REGRESSION: offers the community to a member who has a space to open", () => {
-    // The gap this closes. Without it the membership card's only exits are
-    // Change and Cancel, and the community is unreachable from the account page.
+describe("AccountDashboard: the way into the member area", () => {
+  it("REGRESSION: offers the member area to a member who has a space to open", () => {
+    // The original gap this closes. Without it the membership card's only exits
+    // are Change and Cancel, and the member area is unreachable from here.
     const html = render({ spaces: [space()], onNavigateCommunity: () => {} });
 
-    expect(html).toContain("Community spaces");
+    expect(html).toContain("Member Area");
+  });
+
+  it("REGRESSION: offers the member area to a signed-in fan with NO membership", () => {
+    // The second gap. The link used to require an openable space, so a fan who
+    // had not joined saw no way in, which is the fan the member home is most
+    // useful to: that page shows the locked posts and the offer to join.
+    const html = render({ spaces: [], user: nonMember, onNavigateCommunity: () => {} });
+
+    expect(html).toContain("Member Area");
+    // Still the non-member card and not some other state.
+    expect(html).toContain("You don&#x27;t have an active membership.");
   });
 
-  it("REGRESSION: says nothing when the member can open no space", () => {
-    // A link here would promise a door that is locked: the server returned no
-    // space this account may enter, so the honest account page is silent.
-    const html = render({ spaces: [], onNavigateCommunity: () => {} });
+  it("REGRESSION: offers it before the spaces query has answered", () => {
+    // First paint has no cached answer. The link no longer waits on that read,
+    // so it does not appear a beat late.
+    const html = render({ spaces: null, onNavigateCommunity: () => {} });
 
-    expect(html).not.toContain("Community spaces");
-    // The billing actions are untouched, so this is the entry point missing and
-    // not the whole card failing to draw.
-    expect(html).toContain("Change");
+    expect(html).toContain("Member Area");
   });
 
-  it("draws nothing when the host site has no community route to send anyone to", () => {
+  it("draws nothing when the host site has no member-area route to send anyone to", () => {
     // `onNavigateCommunity` is optional. A site that leaves it out gets no
-    // button, even with spaces in the cache, rather than a dead one.
+    // button rather than a dead one.
     const html = render({ spaces: [space()] });
 
-    expect(html).not.toContain("Community spaces");
+    expect(html).not.toContain("Member Area");
   });
 
-  it("stays quiet while the spaces query has not answered yet", () => {
-    // First paint has no cached answer. Guessing "yes" here would flash a link
-    // and then withdraw it from members who never had access.
-    const html = render({ spaces: null, onNavigateCommunity: () => {} });
+  it("draws nothing for a visitor who is not signed in", () => {
+    // The member area is behind a login. Offering it to a signed-out visitor
+    // sends them at a guard, not at the content.
+    const html = render({ spaces: [space()], user: null, onNavigateCommunity: () => {} });
 
-    expect(html).not.toContain("Community spaces");
+    expect(html).not.toContain("Member Area");
   });
 });

package/src/ui/styled/_tests/membershipTierCallout.spec.tsx

@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { LoginForm } from "../LoginForm";
+import { SignupForm } from "../SignupForm";
+import type { MembershipTier } from "../../../types/models";
+
+/**
+ * What a fan sees after pressing Join while signed out.
+ *
+ * The auth guard sends them to `/i/login?redirect=/i/membership/checkout?membershipTierId=…`,
+ * which up to now was a bare sign-in card: no mention of the tier they had just
+ * chosen, no sign that the wall was part of joining at all. The client app has
+ * always shown the tier on this screen, so this is code websites catching up.
+ *
+ * Rendered through `react-dom/server`, with the tier list SEEDED into the
+ * react-query cache rather than mocked, so the real `useGetMembershipTiers` stays
+ * in the path and a rename of its query key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const tier: MembershipTier = {
+  id: "tier-1",
+  profileId: PROFILE_ID,
+  name: "Inner Circle",
+  description: "The good stuff",
+  priceMonthly: 10,
+  priceYearly: null,
+  payWhatYouWant: false,
+  payWhatYouWantMinimum: null,
+  payWhatYouWantMaximum: null,
+  isDefault: false,
+  archived: false,
+  order: 0,
+  benefits: [
+    { id: "b1", title: "Early demos" },
+    { id: "b2", title: "Monthly livestream" },
+    { id: "b3", title: "Discord access" },
+    { id: "b4", title: "Name in the credits" },
+  ],
+} as unknown as MembershipTier;
+
+function render(node: React.ReactNode, opts: { tiers?: MembershipTier[] } = {}): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.tiers) queryClient.setQueryData(["membership-tiers", PROFILE_ID], opts.tiers);
+  // Settlement currency, or every price formats as "N/A".
+  queryClient.setQueryData(["site-config", PROFILE_ID], { currency: "USD" });
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: null, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            {node}
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("the tier a signed-out fan was on their way to join", () => {
+  it("REGRESSION: names the tier, its price and its benefits above the login form", () => {
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />, {
+      tiers: [tier],
+    });
+
+    expect(html).toContain("Join Inner Circle");
+    expect(html).toContain("$10/mo");
+    expect(html).toContain("Early demos");
+    // The login form itself is untouched underneath.
+    expect(html).toContain("Password");
+  });
+
+  it("lists three benefits and counts the rest", () => {
+    // The whole list would push the form itself below the fold on a phone.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />, {
+      tiers: [tier],
+    });
+
+    expect(html).toContain("Discord access");
+    expect(html).not.toContain("Name in the credits");
+    expect(html).toContain("+1 more benefits");
+  });
+
+  it("REGRESSION: shows the same tier on the signup form", () => {
+    // A fan with no account gets sent on from login to signup, and the tier has
+    // to survive that hop or the reassurance disappears halfway through.
+    const html = render(<SignupForm loginHref="/i/login" membershipTierId="tier-1" />, { tiers: [tier] });
+
+    expect(html).toContain("Join Inner Circle");
+  });
+
+  it("says nothing when the visitor came to log in on their own", () => {
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" />, { tiers: [tier] });
+
+    expect(html).not.toContain("Join Inner Circle");
+    expect(html).toContain("Password");
+  });
+
+  it("says nothing when the id matches no tier the artist sells", () => {
+    // A stale link, or a tier that has since been archived. An empty box with a
+    // heading and no tier in it would be worse than no box.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="gone" />, {
+      tiers: [tier],
+    });
+
+    expect(html).not.toContain("Join");
+  });
+
+  it("says nothing before the tier list has arrived", () => {
+    // First paint has no cached answer. Drawing a heading now and the tier a
+    // beat later would move the form under the visitor's cursor.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />);
+
+    expect(html).not.toContain("Join Inner Circle");
+  });
+});