@tribe-nest/forge 3.58.0 → 3.60.0

package/src/ui/styled/MembershipCheckout.tsx

@@ -16,6 +16,9 @@ import { formatTrialDate, tierTrialDays } from "../headless/membership/membershi
 import { readableTextOn } from "../theme/contrast";
 import { cycleFloor, cycleIsFree, offeredCycles, type BillingCycle } from "../format/membershipPwyw";
 import type { MembershipTier } from "../../types/models";
+import { useOptionalCommunityContext } from "../../contexts/CommunityContext";
+import { useCommunityViewerState } from "../../data/queries/useCommunities";
+import { communitiesListPath, communityAboutPath, communityHomePath } from "../headless/communities/paths";
 import { Loading } from "./Loading";
 import { PaystackPayButton } from "./PaystackPayButton";
 
@@ -25,23 +28,24 @@ export interface MembershipCheckoutProps {
   /**
    * Called when the subscription is finished in-app: a free activation, a tier
    * change settled by proration, or a paid card payment that succeeded. The
-   * host navigates however it wants (e.g. to the account page). Omit to fall
-   * back to Forge's default `window.location` redirect.
+   * host navigates however it wants. Omit to fall back to Forge's default
+   * `window.location` redirect, which lands inside the community.
    *
    * `requiresConfirmation` is true only for a real provider payment, which is
    * the only case the account page has anything to reconcile.
    */
   onComplete?: (result: { requiresConfirmation: boolean }) => void;
   /** The URL Stripe returns to for a PAID subscription (its `return_url`, and the
-   * free/paid fallback redirect). Default `/i/account?tab=membership&confirmSubscription=true`. */
+   * free/paid fallback redirect). Default: the community home with
+   * `confirmSubscription=1` (the community comes from `<CommunityProvider>`). */
   successPath?: string;
-  /** Where the "View memberships" link points when the artist sells no tiers. Default `/i/membership`. */
+  /** Where the "View memberships" link points when there are no tiers. Default: the community's About page. */
   membershipsPath?: string;
   /**
-   * The fan's account page, where their applications are listed. The link
-   * after applying points here. Default `/i/account`.
+   * Where the link after applying points: the community home, which shows the
+   * pending application. Default: the surrounding community's home.
    */
-  accountPath?: string;
+  homePath?: string;
   /** Format a numeric amount for display. Defaults to the runtime currency formatter. */
   formatAmount?: (amount: number) => string;
   /**
@@ -83,9 +87,9 @@ export interface MembershipCheckoutProps {
 export function MembershipCheckout({
   initialTierId,
   onComplete,
-  successPath = "/i/account?tab=membership&confirmSubscription=true",
-  membershipsPath = "/i/membership",
-  accountPath = "/i/account",
+  successPath,
+  membershipsPath: membershipsPathProp,
+  homePath: homePathProp,
   formatAmount,
   inviteToken,
   className,
@@ -140,12 +144,28 @@ export function MembershipCheckout({
   const taxCaption = priceTaxCaption({ pricesIncludeTax: usePricesIncludeTax() });
   const renderPayment = usePaymentRenderer();
 
+  const communityContext = useOptionalCommunityContext();
+  const slug = communityContext?.slug;
+  // Inside a community, the fan's membership IN IT (not `user.membership`, the
+  // newest one on the profile) decides "current plan" and join vs change.
+  const viewer = useCommunityViewerState(communityContext?.communityId ?? slug, {
+    enabled: !!(communityContext?.communityId ?? slug),
+  });
+  const current =
+    communityContext && viewer.data
+      ? viewer.data.membership
+        ? { tierId: viewer.data.membership.tierId, status: viewer.data.membership.status }
+        : null
+      : undefined;
+  const membershipsPath = membershipsPathProp ?? (slug ? communityAboutPath(slug) : communitiesListPath());
+  const homePath = homePathProp ?? (slug ? communityHomePath(slug) : communitiesListPath());
   const checkout = useMembershipCheckout({
     initialTierId,
     returnPath: successPath,
     freeReturnPath: successPath,
     onComplete,
     inviteToken,
+    current,
   });
   const inviteInfo = useMembershipInviteInfo(checkout.inviteToken);
 
@@ -269,16 +289,16 @@ export function MembershipCheckout({
                 : t(APPLICATION_OUTCOME_BODY[checkout.applicationOutcome], { tier_name: tier.name })}
             </p>
           </div>
-          {/* A lodged or approved application is followed on the account page.
-              One that closed leaves the fan choosing again, so that goes back
-              to the tiers. */}
+          {/* A lodged or approved application is followed inside the community,
+              which shows it pending. One that closed leaves the fan choosing
+              again, so that goes back to the tiers. */}
           {checkout.applicationOutcome === "received" || checkout.applicationOutcome === "approved" ? (
             <a
-              href={accountPath}
-              data-testid="membership-application-account-link"
+              href={homePath}
+              data-testid="membership-application-home-link"
               style={{ ...ghostButton, display: "block", textAlign: "center", textDecoration: "none", boxSizing: "border-box" }}
             >
-              {t("forge.membership_checkout.go_to_account")}
+              {t("forge.membership_checkout.go_to_community")}
             </a>
           ) : (
             <a
@@ -445,7 +465,7 @@ export function MembershipCheckout({
                 returnUrl:
                   checkout.setupPurpose === "application" && checkout.applicationReturnUrl
                     ? checkout.applicationReturnUrl
-                    : `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
+                    : `${typeof window !== "undefined" ? window.location.origin : ""}${checkout.returnPath}`,
                 amount: checkout.amount,
                 currency: settlementCurrency,
                 mode: "manual",

package/src/ui/styled/MembershipTierCallout.tsx

@@ -4,6 +4,8 @@ import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { membershipPriceLabel } from "../format/membershipPriceLabel";
+import { usePublicCommunities } from "../../data/queries/useCommunities";
+import { communityAboutPath } from "../headless/communities/paths";
 
 export interface MembershipTierCalloutProps {
   /** The tier the visitor is on their way to join. Nothing is drawn without it. */
@@ -30,6 +32,9 @@ export interface MembershipTierCalloutProps {
  * site remembers too. The client app has always shown this; code websites did
  * not, so this is the same reassurance in a Forge component.
  *
+ * A tier belongs to exactly one community, so the callout names it and links
+ * to its About page with the tier preselected, where the join happens in place.
+ *
  * 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
@@ -50,6 +55,9 @@ export function MembershipTierCallout({
   const { data: tiers } = useGetMembershipTiers(inviteToken ? { inviteToken } : {});
   const { data: invite } = useMembershipInviteInfo(inviteToken);
   const tier = membershipTierId ? tiers?.find((candidate) => candidate.id === membershipTierId) : undefined;
+  const tierCommunityId = (tier as { communityId?: string } | undefined)?.communityId;
+  const { data: communities } = usePublicCommunities({ enabled: !!tierCommunityId });
+  const community = tierCommunityId ? communities?.find((candidate) => candidate.id === tierCommunityId) : undefined;
 
   if (!tier) return null;
 
@@ -76,7 +84,18 @@ export function MembershipTierCallout({
       <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 || invite ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      <p style={{ fontSize: 14, marginBottom: shown.length || invite || community ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      {community && (
+        <p style={{ fontSize: 14, marginBottom: shown.length || invite ? 12 : 0 }}>
+          <a
+            href={communityAboutPath(community.slug, { tier: tier.id })}
+            data-testid="membership-tier-callout-community"
+            style={{ color: tokens.primary, fontWeight: 600 }}
+          >
+            {t("forge.membership_tier_callout.view_community", { community_name: community.name })}
+          </a>
+        </p>
+      )}
       {invite && invite.membershipTierId === tier.id && (
         <p style={{ fontSize: 14, fontWeight: 600, marginBottom: shown.length ? 12 : 0 }}>
           {t("forge.membership_tier_callout.invite_for_email", { email: invite.email })}

package/src/ui/styled/MembershipTiers.tsx

@@ -14,6 +14,9 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { useForgeT } from "../../i18n";
 import { PublicAuthContext } from "../../contexts/PublicAuthContext";
 import { membershipPriceLabel } from "../format/membershipPriceLabel";
+import { CommunityProvider, useOptionalCommunityContext } from "../../contexts/CommunityContext";
+import { usePublicCommunities } from "../../data/queries/useCommunities";
+import { communityAboutPath, communitiesListPath } from "../headless/communities/paths";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -21,8 +24,16 @@ export interface MembershipTiersProps {
   /** Format a numeric amount for display. Defaults to `$X.XX`. */
   formatAmount?: (amount: number) => string;
   /**
-   * Where "Select" sends the buyer. The chosen tier id is appended as the
-   * `membershipTierId` query param. Default `/i/membership/checkout`.
+   * The community whose tiers to show (slug or id). Omitted, the surrounding
+   * `<CommunityProvider>` is used; outside one, every tier on the profile is
+   * listed and each links to its own community.
+   */
+  community?: string;
+  /**
+   * Override where "Select" sends the buyer; the tier id is appended as the
+   * `membershipTierId` query param. Default: the tier's community About page
+   * with the tier preselected (`/i/communities/<slug>?tier=<id>`), which opens
+   * the join sheet in place.
    */
   checkoutPath?: string;
   /**
@@ -39,7 +50,11 @@ export interface MembershipTiersProps {
 }
 
 /**
- * Drop-in membership page. Renders every membership tier as a centered,
+ * Drop-in tier cards. `community` scopes them to one community:
+ *
+ *     <MembershipTiers community="fan-club" />
+ *
+ * Renders every membership tier as a centered,
  * responsive card row (a single tier sits at a natural card width rather than
  * stretching full-screen). "Select" routes to `checkoutPath` with the tier id,
  * or calls `onSelect` when provided.
@@ -53,14 +68,25 @@ export interface MembershipTiersProps {
  * "{days}-day free trial" badge, and an open tier's button reads "Start free
  * trial". An application tier keeps "Apply to join" (approval starts the trial).
  */
-export function MembershipTiers({
+export function MembershipTiers({ community, ...props }: MembershipTiersProps) {
+  if (community) {
+    return (
+      <CommunityProvider community={community}>
+        <MembershipTierCards {...props} />
+      </CommunityProvider>
+    );
+  }
+  return <MembershipTierCards {...props} />;
+}
+
+function MembershipTierCards({
   formatAmount,
-  checkoutPath = "/i/membership/checkout",
+  checkoutPath,
   onSelect,
   heading,
   className,
   style,
-}: MembershipTiersProps) {
+}: Omit<MembershipTiersProps, "community">) {
   const tokens = useThemeTokens();
   const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
@@ -68,6 +94,9 @@ export function MembershipTiers({
   const pricesIncludeTax = usePricesIncludeTax();
   const taxCaption = priceTaxCaption({ pricesIncludeTax });
   const { data: tiers, isLoading } = useGetMembershipTiers();
+  const context = useOptionalCommunityContext();
+  // Only needed to link a tier to its community when there is no provider.
+  const { data: communities } = usePublicCommunities({ enabled: !context && !checkoutPath && !onSelect });
   const withdraw = useWithdrawMembershipApplication();
   const [withdrawError, setWithdrawError] = useState<string | null>(null);
   // `null` still means "no heading"; anything else falls back to the default.
@@ -82,15 +111,24 @@ export function MembershipTiers({
   // the same sentence this page does.
   const priceLabel = (tier: MembershipTier) => membershipPriceLabel(tier, t, fmt);
 
-  const select = (tier: MembershipTier) => {
-    if (onSelect) return onSelect(tier);
-    if (typeof window !== "undefined") {
+  /** A tier belongs to exactly one community; its About page is where it is joined. */
+  const tierHref = (tier: MembershipTier): string => {
+    const invite = readMembershipInviteFromUrl();
+    if (checkoutPath) {
       const sep = checkoutPath.includes("?") ? "&" : "?";
-      const invite = readMembershipInviteFromUrl();
-      window.location.href = `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}${
+      return `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}${
         invite ? `&invite=${encodeURIComponent(invite)}` : ""
       }`;
     }
+    const tierCommunityId = (tier as MembershipTier & { communityId?: string }).communityId;
+    const slug =
+      context?.slug ?? communities?.find((candidate) => candidate.id === tierCommunityId)?.slug ?? undefined;
+    return slug ? communityAboutPath(slug, { tier: tier.id, ...(invite ? { invite } : {}) }) : communitiesListPath();
+  };
+
+  const select = (tier: MembershipTier) => {
+    if (onSelect) return onSelect(tier);
+    if (typeof window !== "undefined") window.location.href = tierHref(tier);
   };
 
   return (

package/src/ui/styled/Paywall.tsx

@@ -8,7 +8,7 @@ export interface PaywallProps {
   onAction?: () => void;
 }
 
-/** A themed "members only" card — pair with `<MembershipGate fallback={...}>`. */
+/** A themed "members only" card. Pair with `<CommunityGate fallback={...}>`. */
 export function Paywall({
   title = "Members only",
   message = "This content is available to members. Join to unlock it.",

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

@@ -106,7 +106,7 @@ function render(rows: MyBooking[]): string {
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
           >
-            <AccountDashboard tab="bookings" onNavigateMembership={() => {}} />
+            <AccountDashboard tab="bookings" />
           </ForgeThemeProvider>
         </PublicAuthContext.Provider>
       </ForgeClientProvider>

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

@@ -0,0 +1,151 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
+import axios, { type AxiosAdapter, type InternalAxiosRequestConfig } from "axios";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { AccountDashboard } from "../AccountDashboard";
+
+/**
+ * The account page's Memberships tab. A fan can belong to several communities
+ * of one creator, so the tab lists ONE CARD PER COMMUNITY from
+ * `/public/memberships/mine`, never the account's single legacy membership.
+ * Managing a membership happens inside its community, so each card opens it.
+ */
+
+const DAY = 24 * 60 * 60 * 1000;
+const inDays = (n: number) => new Date(Date.now() + n * DAY).toISOString();
+const fmt = (iso: string) => new Date(iso).toLocaleDateString("en", { year: "numeric", month: "short", day: "numeric" });
+
+const fan = {
+  id: "account-1",
+  email: "fan@example.com",
+  firstName: "Fan",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  // The legacy single membership must NOT be what the tab shows.
+  membership: { id: "legacy", membershipTierId: "t-legacy", status: "active", membershipTier: { id: "t-legacy", name: "LEGACY" } },
+};
+
+let realAdapter: AxiosAdapter | undefined;
+let requested: string[] = [];
+
+function mount(mine: unknown[], applications: unknown[] = [], communities: unknown[] = []) {
+  requested = [];
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = (async (config: InternalAxiosRequestConfig) => {
+    const url = config.url ?? "";
+    requested.push(url);
+    // `/public/memberships/mine` answers the server's real envelope,
+    // `[{ community, membership }]`, built from the flat rows the tests list.
+    const data = url.includes("/public/memberships/mine")
+      ? (mine as Array<Record<string, unknown>>).map(({ community, subscriptionAmount, subscriptionCurrency, ...membership }) => ({
+          community,
+          membership: { ...membership, amount: subscriptionAmount ?? null, currency: subscriptionCurrency ?? null },
+        }))
+      : url.includes("/public/membership-applications/mine")
+        ? applications
+        : url === "/public/communities"
+          ? communities
+          : [];
+    return { data, status: 200, statusText: "OK", headers: {}, config } as never;
+  }) as AxiosAdapter;
+  const navigate = vi.fn();
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ user: fan, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}>
+          <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+            <AccountDashboard tab="membership" navigate={navigate} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+  return { navigate };
+}
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+const row = (overrides: Record<string, unknown>) => ({
+  id: "m-1",
+  tierId: "tier-1",
+  tierName: "Inner Circle",
+  status: "active",
+  cancelAtPeriodEnd: false,
+  currentPeriodEnd: inDays(20),
+  subscriptionAmount: 10,
+  subscriptionCurrency: "USD",
+  billingCycle: "month",
+  community: { id: "c-1", name: "Fan Club", slug: "fan-club" },
+  ...overrides,
+});
+
+describe("AccountDashboard: My memberships", () => {
+  it("lists one card per community, from the memberships endpoint, not the legacy single membership", async () => {
+    mount([row({}), row({ id: "m-2", tierName: "Producers", community: { id: "c-2", name: "Producers Circle", slug: "producers" } })]);
+
+    const cards = await screen.findAllByTestId("my-membership");
+    expect(cards).toHaveLength(2);
+    expect(cards[0].textContent).toContain("Fan Club");
+    expect(cards[0].textContent).toContain("Inner Circle");
+    expect(cards[1].textContent).toContain("Producers Circle");
+    expect(document.body.textContent).not.toContain("LEGACY");
+    expect(requested).toContain("/public/memberships/mine");
+  });
+
+  it("opens the membership's community home, never the account page", async () => {
+    const { navigate } = mount([row({})]);
+    const card = await screen.findByTestId("my-membership");
+    fireEvent.click(within(card).getByRole("button", { name: "Open community" }));
+    expect(navigate).toHaveBeenCalledWith("/i/communities/fan-club/home");
+  });
+
+  it("says Renews on for a renewing membership and Ends on for a cancelled one", async () => {
+    const end = inDays(20);
+    mount([row({ currentPeriodEnd: end }), row({ id: "m-2", cancelAtPeriodEnd: true, currentPeriodEnd: end, community: { id: "c-2", name: "B", slug: "b" } })]);
+    const [renewing, ending] = await screen.findAllByTestId("my-membership");
+    expect(renewing.textContent).toContain(`Renews on ${fmt(end)}`);
+    expect(ending.textContent).toContain(`Ends on ${fmt(end)}`);
+  });
+
+  it("shows the trial end instead of the renewal during a free trial", async () => {
+    const ends = inDays(10);
+    mount([row({ trialEndsAt: ends, currentPeriodEnd: ends })]);
+    expect((await screen.findByTestId("my-membership-trial")).textContent).toContain(`Free trial until ${fmt(ends)}`);
+    expect(document.body.textContent).not.toContain("Renews on");
+  });
+
+  it("says so when the fan belongs to no community", async () => {
+    mount([]);
+    expect((await screen.findByTestId("my-memberships-empty")).textContent).toContain("not a member of any community");
+  });
+
+  it("finishes a payment_failed application on its community's About page, on that tier", async () => {
+    mount(
+      [],
+      [
+        {
+          id: "app-1",
+          membershipTierId: "tier-9",
+          membershipTierName: "Gold",
+          communityId: "c-9",
+          status: "payment_failed",
+          createdAt: "2026-09-01T00:00:00.000Z",
+        },
+      ],
+      [{ id: "c-9", name: "Gold Club", slug: "gold-club", memberCount: 1, tags: [] }],
+    );
+    const link = (await screen.findByRole("link", { name: /Complete/i })) as HTMLAnchorElement;
+    await vi.waitFor(() => expect(link.getAttribute("href")).toBe("/i/communities/gold-club?tier=tier-9"));
+  });
+});

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

@@ -106,7 +106,7 @@ function render(opts: { rentals: MyFilmRental[] | null; tab?: AccountTabKey }):
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
           >
-            <AccountDashboard tab={opts.tab ?? "rentals"} onNavigateMembership={() => {}} />
+            <AccountDashboard tab={opts.tab ?? "rentals"} />
           </ForgeThemeProvider>
         </PublicAuthContext.Provider>
       </ForgeClientProvider>

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

@@ -129,7 +129,13 @@ describe("CourseCallsSection", () => {
         id: "call-2",
         title: "Week 0 orientation",
         isOpen: false,
-        recording: { id: "rec-1", status: "ready", durationSeconds: 3600, watchUrl: "https://cdn.test/rec.mp4" },
+        recording: {
+          id: "rec-1",
+          status: "ready",
+          durationSeconds: 3600,
+          watchUrl: "https://cdn.test/rec.mp4",
+          transcript: null,
+        },
       }),
     );
     const { getAllByText, container } = mount();

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

@@ -8,6 +8,7 @@ import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
 import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
 import { Currency, type MembershipTier, type PublicAuthUser } from "../../../types/models";
 import { MembershipCheckout } from "../MembershipCheckout";
+import { InCommunity } from "../../../_tests/testCommunity";
 
 /**
  * Membership signup, end to end, over the REAL query/mutation layer.
@@ -66,6 +67,14 @@ const currencies = {
   exchangeRates: { [Currency.USD]: { [Currency.NGN]: 1500 } },
 };
 
+/**
+ * The viewer's membership IN THIS COMMUNITY, as `GET /public/communities/:ref/me`
+ * reports it. Inside a community the checkout reads the current tier from
+ * here, never from `user.membership` (the newest membership on the whole
+ * profile, which can belong to another community).
+ */
+let viewerMembership: { tierId: string; status: string } | null = null;
+
 function installAdapter(tiers: MembershipTier[]) {
   sent = [];
   const adapter: AxiosAdapter = async (config: InternalAxiosRequestConfig) => {
@@ -76,6 +85,15 @@ function installAdapter(tiers: MembershipTier[]) {
     const reply = (data: unknown) =>
       Promise.resolve({ data, status: 200, statusText: "OK", headers: {}, config } as never);
 
+    if (/\/public\/communities\/[^/]+\/me$/.test(url)) {
+      return reply({
+        state: viewerMembership ? "member" : "none",
+        membership: viewerMembership,
+        application: null,
+        upgradeTiers: [],
+        canInteract: true,
+      });
+    }
     if (url.includes("/public/membership-tiers")) return reply(tiers);
     if (url.includes("/public/websites/site-config")) return reply({ currency: "USD" });
     if (url.includes("/public/currencies")) return reply(currencies);
@@ -107,7 +125,13 @@ function installAdapter(tiers: MembershipTier[]) {
   axios.defaults.adapter = adapter;
 }
 
-function mount(opts: { tiers: MembershipTier[]; user?: PublicAuthUser; initialTierId?: string }) {
+function mount(opts: {
+  tiers: MembershipTier[];
+  user?: PublicAuthUser;
+  initialTierId?: string;
+  viewerMembership?: { tierId: string; status: string } | null;
+}) {
+  viewerMembership = opts.viewerMembership ?? null;
   installAdapter(opts.tiers);
   // `"initialTierId" in opts` rather than `??`, so a test can ask for NO
   // preselected tier (the grid) without the default quietly putting one back.
@@ -130,7 +154,9 @@ function mount(opts: { tiers: MembershipTier[]; user?: PublicAuthUser; initialTi
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
           >
-            <MembershipCheckout initialTierId={initialTierId} />
+            <InCommunity>
+              <MembershipCheckout initialTierId={initialTierId} />
+            </InCommunity>
           </ForgeThemeProvider>
         </PublicAuthContext.Provider>
       </ForgeClientProvider>
@@ -344,10 +370,9 @@ describe("billing cycles a tier actually sells", () => {
 
 describe("the tier grid, when no tier was chosen up front", () => {
   it("does not offer the tier the member is already on", async () => {
-    const onTier = { ...member, membership: { membershipTierId: "tier-1" } } as unknown as PublicAuthUser;
     mount({
       tiers: [tier({ id: "tier-1", name: "Inner Circle", priceMonthly: 10 }), tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })],
-      user: onTier,
+      viewerMembership: { tierId: "tier-1", status: "active" },
       initialTierId: undefined,
     });
 
@@ -371,13 +396,31 @@ describe("the tier grid, when no tier was chosen up front", () => {
   });
 
   it("calls a change a change for a member with a live subscription", async () => {
-    const paying = {
+    mount({
+      tiers: [tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })],
+      viewerMembership: { tierId: "tier-1", status: "active" },
+      initialTierId: "tier-2",
+    });
+
+    expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
+  });
+
+  it("REGRESSION: a membership in ANOTHER community does not turn a join into a change", async () => {
+    // `user.membership` is the newest membership on the profile. Here it lives
+    // in a different community, and this community's `/me` says: not a member.
+    const inOtherCommunity = {
       ...member,
-      membership: { membershipTierId: "tier-1", status: "active", paymentProviderSubscriptionId: "sub_123" },
+      membership: { membershipTierId: "tier-elsewhere", status: "active", paymentProviderSubscriptionId: "sub_other" },
     } as unknown as PublicAuthUser;
-    mount({ tiers: [tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })], user: paying, initialTierId: "tier-2" });
+    mount({
+      tiers: [tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })],
+      user: inOtherCommunity,
+      viewerMembership: null,
+      initialTierId: "tier-2",
+    });
 
-    expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
+    await waitFor(() => expect(sent.some((r) => /\/me$/.test(r.url))).toBe(true));
+    expect(screen.queryByRole("button", { name: "Confirm change" })).toBeNull();
   });
 });
 
@@ -452,7 +495,7 @@ describe("tier questionnaires", () => {
     ]);
   });
 
-  it("after applying, links to the account page rather than the membership list", async () => {
+  it("after applying, links inside the community (where it shows pending), never to the account page", async () => {
     mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
 
     fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
@@ -463,8 +506,8 @@ describe("tier questionnaires", () => {
     expect(applicationPosts()[0].body).not.toHaveProperty("message");
     expect(applicationPosts()[0].body?.questionnaire).toHaveLength(3);
     expect(await screen.findByText("Application received")).toBeTruthy();
-    const link = screen.getByRole("link", { name: "Go to your account" }) as HTMLAnchorElement;
-    expect(link.getAttribute("href")).toBe("/i/account");
+    const link = screen.getByRole("link", { name: "Go to the community" }) as HTMLAnchorElement;
+    expect(link.getAttribute("href")).toBe("/i/communities/fan-club/home");
     expect(screen.queryByRole("link", { name: "View memberships" })).toBeNull();
   });
 });

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

@@ -11,7 +11,7 @@ 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=…`,
+ * The auth guard sends them to `/i/login?redirect=/i/communities/<slug>?tier=…`,
  * 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.

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

@@ -121,7 +121,7 @@ describe("MembershipTiers: the card per join mode and application state", () =>
 
 describe("the invite token reaches the tier list", () => {
   it("forwards `?invite=` as inviteToken", async () => {
-    window.history.replaceState(null, "", "/i/membership?invite=tok-123");
+    window.history.replaceState(null, "", "/i/communities/fan-club?invite=tok-123");
     mount([tier("inv", { joinMode: "invite" })]);
     await cardOf("Tier inv");