@tribe-nest/forge 3.36.0 → 3.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.36.0",
+  "version": "3.38.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/headless/work/index.ts

@@ -8,6 +8,9 @@ export {
   useWorkInvite,
   useAcceptWorkInvite,
   useWorkProjectInvoices,
+  useWorkSharedDocuments,
+  useWorkOpenSharedDocument,
+  useUploadWorkDocument,
   formatWorkMoney,
   formatWorkDate,
   type WorkProjectSummary,
@@ -21,5 +24,6 @@ export {
   type WorkInviteContext,
   type WorkInviteAcceptResult,
   type WorkProjectInvoice,
+  type WorkSharedDocument,
   type UseWorkTaskCommentsResult,
 } from "./useWorkPortal";

package/src/ui/headless/work/useWorkPortal.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient, type UseQueryResult } from "@tanstack/react-query";
+import axios from "axios";
 import { useForge } from "../../../provider/ForgeProvider";
 
 /**
@@ -89,6 +90,25 @@ export interface WorkTaskAttachment {
   size: number | null;
 }
 
+/**
+ * A case-file document the firm has shared with the client, or one the client
+ * put there themselves. A file document describes itself but never carries an
+ * address: the bytes come only through `useWorkOpenSharedDocument`.
+ */
+export interface WorkSharedDocument {
+  id: string;
+  title: string;
+  docType: "page" | "file";
+  updatedAt: string;
+  sharedAt: string;
+  file: {
+    mediaId: string;
+    filename: string | null;
+    size: number;
+    type: string;
+  } | null;
+}
+
 export interface WorkProjectInvoice {
   id: string;
   invoiceNumber: string;
@@ -110,7 +130,7 @@ export interface WorkInviteContext {
   firstName: string | null;
   /**
    * The invited address already has an account, so the invite grants portal
-   * access but cannot set a credential — render "sign in", not a password
+   * access but cannot set a credential: render "sign in", not a password
    * form (C10).
    */
   requiresExistingLogin?: boolean;
@@ -124,7 +144,7 @@ export interface WorkInviteAcceptResult {
    */
   requiresLogin?: boolean;
   token?: string;
-  /** Rotating refresh token for the portal session (backend §7) — persist it. */
+  /** Rotating refresh token for the portal session (backend §7). Persist it. */
   refreshToken?: string;
   projectId: string;
   account: { id: string; email: string; firstName: string | null; lastName: string | null };
@@ -142,12 +162,14 @@ const keys = {
     ["work-portal-task-attachments", profileId, projectId, taskId] as const,
   projectInvoices: (profileId: string | undefined, projectId: string) =>
     ["work-portal-project-invoices", profileId, projectId] as const,
+  sharedDocuments: (profileId: string | undefined, projectId: string) =>
+    ["work-portal-shared-documents", profileId, projectId] as const,
 };
 
 // ── Authed client's projects ─────────────────────────────────────────────────
 
 /** The authenticated client's (non-archived) client projects with a task/done
- * summary — GET /public/work/projects. The token is the identity. */
+ * summary: GET /public/work/projects. The token is the identity. */
 export function useWorkPortalProjects(): UseQueryResult<WorkProjectSummary[]> {
   const { client, profileId } = useForge();
   return useQuery<WorkProjectSummary[]>({
@@ -163,7 +185,7 @@ export function useWorkPortalProjects(): UseQueryResult<WorkProjectSummary[]> {
 // ── Authed client's single-project report ────────────────────────────────────
 
 /** The authenticated client's overview + billable-only time report for one of
- * their projects — GET /public/work/projects/:id/report. */
+ * their projects: GET /public/work/projects/:id/report. */
 export function useWorkProjectReport(projectId: string): UseQueryResult<WorkProjectReportData> {
   const { client, profileId } = useForge();
   return useQuery<WorkProjectReportData>({
@@ -180,7 +202,7 @@ export function useWorkProjectReport(projectId: string): UseQueryResult<WorkProj
 
 // ── Public tokenized report (no login) ───────────────────────────────────────
 
-/** Login-free tokenized share of a project's time report — GET
+/** Login-free tokenized share of a project's time report: GET
  * /public/work/time-report/:token. The signed token IS the authorization. */
 export function useWorkTokenReport(token: string): UseQueryResult<WorkProjectReportData> {
   const { client } = useForge();
@@ -208,7 +230,7 @@ export interface UseWorkTaskCommentsResult {
 
 /**
  * The authenticated client's comment thread for a single task on one of their
- * projects — GET/POST /public/work/projects/:projectId/tasks/:taskId/comments.
+ * projects: GET/POST /public/work/projects/:projectId/tasks/:taskId/comments.
  * Newest first. The bearer token IS the client identity (server-enforced).
  * Posting invalidates the thread so the new comment appears. Tier-1 primitive:
  * returns clean data + a bound mutation, renders nothing.
@@ -259,7 +281,7 @@ export function useWorkTaskComments(projectId: string, taskId: string): UseWorkT
 
 /**
  * Read-only attachments the team has added to a task on one of the client's
- * projects — GET /public/work/projects/:projectId/tasks/:taskId/attachments.
+ * projects: GET /public/work/projects/:projectId/tasks/:taskId/attachments.
  * Tier-1 primitive: returns clean data, renders nothing.
  */
 export function useWorkTaskAttachments(projectId: string, taskId: string): UseQueryResult<WorkTaskAttachment[]> {
@@ -279,7 +301,7 @@ export function useWorkTaskAttachments(projectId: string, taskId: string): UseQu
 // ── Authed client's invoices for a project ───────────────────────────────────
 
 /**
- * The client's (non-draft) invoices for one of their projects —
+ * The client's (non-draft) invoices for one of their projects:
  * GET /public/work/projects/:id/invoices. Each carries a `payable` flag the
  * portal turns into a Pay button (links to /i/invoice/:id). Tier-1 primitive.
  */
@@ -295,11 +317,104 @@ export function useWorkProjectInvoices(projectId: string): UseQueryResult<WorkPr
   });
 }
 
+// ── Authed client's case-file documents ──────────────────────────────────────
+
+/**
+ * The documents on one of the client's projects that they may see: what the
+ * firm shared with them, and what they uploaded themselves:
+ * GET /public/work/projects/:id/documents. Tier-1 primitive.
+ */
+export function useWorkSharedDocuments(projectId: string): UseQueryResult<WorkSharedDocument[]> {
+  const { client, profileId } = useForge();
+  return useQuery<WorkSharedDocument[]>({
+    queryKey: keys.sharedDocuments(profileId, projectId),
+    queryFn: async () => {
+      const res = await client.get(`/public/work/projects/${projectId}/documents`, { params: { profileId } });
+      return res.data as WorkSharedDocument[];
+    },
+    enabled: !!profileId && !!client && !!projectId,
+  });
+}
+
+/**
+ * A sixty-second, single-use GET at one shared file's bytes:
+ * GET /public/work/projects/:id/documents/:documentId/content. Meant to be
+ * followed once, by the click that asked for it; never cache or render the URL.
+ */
+export function useWorkOpenSharedDocument(projectId: string) {
+  const { client, profileId } = useForge();
+  return useMutation<{ url: string }, unknown, string>({
+    mutationFn: async (documentId: string) => {
+      const res = await client.get(`/public/work/projects/${projectId}/documents/${documentId}/content`, {
+        params: { profileId },
+      });
+      return res.data as { url: string };
+    },
+  });
+}
+
+const mediaTypeFor = (file: File): "image" | "video" | "audio" | "document" | "other" => {
+  const mime = file.type || "";
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime.startsWith("audio/")) return "audio";
+  if (mime.startsWith("text/") || mime.includes("pdf") || mime.includes("word") || mime.includes("document")) {
+    return "document";
+  }
+  return "other";
+};
+
+/**
+ * Put a file into the client's matter, in three steps that must stay in this
+ * order:
+ *
+ *   1. sign a PUT into the firm's PRIVATE bucket
+ *      (POST /public/work/projects/:id/documents/upload-url);
+ *   2. send the bytes straight to object storage, with the Content-Type the
+ *      server SIGNED (derived from the extension allowlist, not the browser);
+ *   3. register the document (POST /public/work/projects/:id/documents), which
+ *      writes the row, shares it back to the client and queues extraction.
+ *
+ * A failure at any step is a failure of the whole upload. On success the
+ * shared-documents list is refetched so the new file appears at once.
+ */
+export function useUploadWorkDocument(projectId: string) {
+  const { client, profileId } = useForge();
+  const queryClient = useQueryClient();
+  return useMutation<WorkSharedDocument, unknown, { file: File; title?: string }>({
+    mutationFn: async ({ file, title }) => {
+      const { data: signed } = await client.post<{
+        presignedUrl: string;
+        key: string;
+        requiredHeaders?: Record<string, string>;
+      }>(`/public/work/projects/${projectId}/documents/upload-url`, { fileName: file.name }, { params: { profileId } });
+      await axios.put(signed.presignedUrl, file, {
+        headers: signed.requiredHeaders ?? { "Content-Type": file.type || "application/octet-stream" },
+      });
+      const { data } = await client.post(
+        `/public/work/projects/${projectId}/documents`,
+        {
+          storageKey: signed.key,
+          fileName: file.name,
+          fileSize: file.size,
+          mediaType: mediaTypeFor(file),
+          ...(title ? { title } : {}),
+        },
+        { params: { profileId } },
+      );
+      return data as WorkSharedDocument;
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: keys.sharedDocuments(profileId, projectId) });
+    },
+  });
+}
+
 // ── Client invite accept (public, no auth) ───────────────────────────────────
 
 /**
  * Fetch the branded context for an invite link (GET /public/work/invite).
- * Public — no bearer token needed; the link's token IS the credential.
+ * Public: no bearer token needed; the link's token IS the credential.
  * `null`/errored when the token or project is missing/invalid/expired.
  */
 export function useWorkInvite(
@@ -321,7 +436,7 @@ export function useWorkInvite(
 /**
  * Accept an invite (POST /public/work/invite/accept): set a password and
  * receive a fresh portal session token. The caller persists the token +
- * navigates. Public — no bearer token needed.
+ * navigates. Public: no bearer token needed.
  */
 export function useAcceptWorkInvite() {
   const { client } = useForge();

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