@tribe-nest/forge 3.29.0 → 3.31.0

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

@@ -0,0 +1,134 @@
+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 { communityKeys, type CommunitySpace } from "../../../data/queries/useCommunity";
+import { AccountDashboard } from "../AccountDashboard";
+
+/**
+ * The account page's way into the members corner.
+ *
+ * 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 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.
+ *
+ * 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.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const space = (overrides: Partial<CommunitySpace> = {}): CommunitySpace => ({
+  id: "space-1",
+  profileId: PROFILE_ID,
+  name: "Backstage",
+  slug: "backstage",
+  description: null,
+  type: "feed",
+  courseId: null,
+  order: 0,
+  archivedAt: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+  tiers: [],
+  ...overrides,
+});
+
+/** A signed-in member holding a paid tier that renews. */
+const member = {
+  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",
+  membership: {
+    id: "membership-1",
+    membershipTierId: "tier-1",
+    endDate: "2026-12-01T00:00:00.000Z",
+    status: "active",
+    startDate: "2026-01-01T00:00:00.000Z",
+    subscriptionAmount: 10,
+    subscriptionCurrency: "USD",
+    billingCycle: "month",
+    membershipTier: { id: "tier-1", name: "Inner Circle", benefits: [] },
+  },
+};
+
+/**
+ * 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.
+ */
+function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: () => void }): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.spaces) queryClient.setQueryData(communityKeys.spaces(PROFILE_ID), opts.spaces);
+
+  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}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountDashboard
+              tab="membership"
+              onNavigateMembership={() => {}}
+              onNavigateCommunity={opts.onNavigateCommunity}
+            />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+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.
+    const html = render({ spaces: [space()], onNavigateCommunity: () => {} });
+
+    expect(html).toContain("Community spaces");
+  });
+
+  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: () => {} });
+
+    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");
+  });
+
+  it("draws nothing when the host site has no community 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.
+    const html = render({ spaces: [space()] });
+
+    expect(html).not.toContain("Community spaces");
+  });
+
+  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: () => {} });
+
+    expect(html).not.toContain("Community spaces");
+  });
+});

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

@@ -0,0 +1,125 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { BroadcastPassValidation } from "../broadcast/BroadcastPassValidation";
+import { EndedBroadcast } from "../broadcast/EndedBroadcast";
+import type { ILiveBroadcast } from "../../../types/models";
+
+/**
+ * The paywall in front of a live broadcast, and the screen that replaces it once
+ * the stream is over.
+ *
+ * Rendered through `react-dom/server`, which needs no DOM. Effects never fire
+ * under `renderToStaticMarkup`, so the props are the only data source and
+ * nothing reaches the network. Both components are presentational by design
+ * (their data hooks live one level up in `BroadcastWatch`), which is exactly
+ * what makes this possible.
+ *
+ * These are the REAL components a Forge code site renders, and the client app's
+ * copies are twins driven by the same `broadcastState` rules, so what is
+ * asserted here about WHAT IS SAID holds on both rendering stacks.
+ */
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function broadcast(overrides: Partial<ILiveBroadcast> = {}): ILiveBroadcast {
+  return {
+    id: "b1",
+    title: "Sunday Session",
+    createdAt: "2026-08-01T00:00:00.000Z",
+    updatedAt: "2026-08-01T00:00:00.000Z",
+    profileId: "p1",
+    streamTemplateId: "st1",
+    egressId: "e1",
+    events: [],
+    event: { id: "ev1", title: "Sunday Session", description: "", isPaid: true },
+    liveUrl: "https://cdn.example.com/secret-playlist.m3u8",
+    thumbnailUrl: "https://cdn.example.com/thumb.jpg",
+    ...overrides,
+  } as ILiveBroadcast;
+}
+
+const render = (node: React.ReactNode) =>
+  renderToStaticMarkup(<ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>);
+
+describe("BroadcastPassValidation", () => {
+  const gate = (props: Partial<React.ComponentProps<typeof BroadcastPassValidation>> = {}) =>
+    render(<BroadcastPassValidation broadcast={broadcast()} onValidate={() => {}} {...props} />);
+
+  it("REGRESSION: leaks NO playback url while the viewer is still outside the paywall", () => {
+    // The whole point of the gate. A page that renders the ticket box and the
+    // stream url in the same document has not gated anything: the url is two
+    // keystrokes away in the page source.
+    const html = gate();
+    expect(html).not.toContain("secret-playlist.m3u8");
+    expect(html).not.toContain("<video");
+  });
+
+  it("asks for the ticket id, and says what one looks like", () => {
+    const html = gate();
+    expect(html).toContain("Enter your ticket ID to join the broadcast (TN-XXXXXXX)");
+    expect(html).toContain('data-testid="broadcast-ticket-code"');
+    expect(html).toContain("Join Broadcast");
+  });
+
+  it("still shows the title and thumbnail, which are already public on the list", () => {
+    const html = gate();
+    expect(html).toContain("Sunday Session");
+    expect(html).toContain("thumb.jpg");
+  });
+
+  it("REGRESSION: keeps Join disabled until something is typed", () => {
+    // An enabled button on an empty box sends a blank code, which the server
+    // refuses, and the viewer reads the refusal as "my ticket is not valid".
+    expect(gate()).toContain("disabled");
+  });
+
+  it("says the code is in flight rather than leaving the button looking dead", () => {
+    const html = gate({ isValidating: true });
+    expect(html).toContain("Validating");
+    expect(html).toContain("disabled");
+  });
+
+  it("shows a refusal to the viewer, and names no other event", () => {
+    const html = gate({ error: "That ticket is not valid for this broadcast." });
+    expect(html).toContain("That ticket is not valid for this broadcast.");
+    expect(html).toContain('role="alert"');
+    expect(html).toContain('aria-invalid="true"');
+  });
+
+  it("offers a way to BUY when the caller supplies one, so the gate is not a dead end", () => {
+    const html = gate({ buyTickets: <div data-testid="buy">Buy tickets</div> });
+    expect(html).toContain("OR");
+    expect(html).toContain('data-testid="buy"');
+  });
+
+  it("shows no OR divider when there is nothing to buy", () => {
+    expect(gate()).not.toContain(">OR<");
+  });
+});
+
+describe("EndedBroadcast", () => {
+  const html = () => render(<EndedBroadcast broadcast={broadcast({ endedAt: "2026-08-18T11:00:00.000Z" })} />);
+
+  it("says the broadcast ended, over the thumbnail the viewer recognises", () => {
+    expect(html()).toContain("Broadcast Ended");
+    expect(html()).toContain("Sunday Session");
+  });
+
+  it("REGRESSION: keeps the two INSTRUCTIONS visible, not behind the ? ", () => {
+    // A host on a bad line drops and comes back. A viewer who is told nothing
+    // assumes the show is over and leaves, so what to DO stays on the page.
+    const markup = html();
+    expect(markup).toContain("keep refreshing this page");
+    expect(markup).toContain("Close the broadcast page");
+  });
+
+  it("puts the EXPLANATION behind the ?, per the house design law", () => {
+    const markup = html();
+    // The disclosure exists, named after what it explains rather than "help".
+    expect(markup).toContain('aria-label="Why did the broadcast end?"');
+    expect(markup).toContain('aria-expanded="false"');
+    // ...and its body is not on the page until it is opened.
+    expect(markup).not.toContain("unstable internet connection");
+  });
+});

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

@@ -0,0 +1,364 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, fireEvent, cleanup } 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 { Currency, type MembershipTier, type PublicAuthUser } from "../../../types/models";
+import { MembershipCheckout } from "../MembershipCheckout";
+
+/**
+ * Membership signup, end to end, over the REAL query/mutation layer.
+ *
+ * The two things asserted hardest are the two that cost money:
+ *
+ *  1. **What is SENT.** Every request is captured off the axios adapter, so
+ *     `amount` is checked as a number on the wire rather than as a number in a
+ *     component's state. A pay-what-you-want box that renders "25" and posts 0
+ *     passes any assertion made on the screen alone, and that is exactly the
+ *     defect this file exists for.
+ *  2. **Which currency that number is in.** The fan's chosen display currency
+ *     converts the totals they READ and must never touch the figure they TYPE:
+ *     the tier rows and the API are both in the tenant's settlement currency.
+ *
+ * jsdom, because the amount box is seeded by an effect and the whole flow is
+ * clicks. The adapter is swapped rather than the modules mocked, so
+ * `useCreateSubscription`, `useGetMembershipTiers`, `PublicAuthProvider` and the
+ * hook all stay in the path: a rename of an endpoint or a payload field fails
+ * here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const tier = (overrides: Partial<MembershipTier> = {}): MembershipTier => ({
+  id: "tier-1",
+  name: "Inner Circle",
+  description: "The good stuff",
+  payWhatYouWant: false,
+  benefits: [],
+  ...overrides,
+});
+
+const member: PublicAuthUser = {
+  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",
+};
+
+/** Every request the component made, in order. */
+let sent: { method: string; url: string; body: Record<string, unknown> | null }[] = [];
+let realAdapter: AxiosAdapter | undefined;
+
+/**
+ * The tenant settles in USD; this visitor reads prices in NGN at 1500 to the
+ * dollar. Any figure that has been through the rate is instantly recognisable.
+ */
+const currencies = {
+  supportedCurrencies: [Currency.USD, Currency.NGN],
+  userCurrency: Currency.NGN,
+  exchangeRates: { [Currency.USD]: { [Currency.NGN]: 1500 } },
+};
+
+function installAdapter(tiers: MembershipTier[]) {
+  sent = [];
+  const adapter: AxiosAdapter = async (config: InternalAxiosRequestConfig) => {
+    const url = config.url ?? "";
+    const body = config.data ? (JSON.parse(config.data as string) as Record<string, unknown>) : null;
+    sent.push({ method: (config.method ?? "get").toLowerCase(), url, body });
+
+    const reply = (data: unknown) =>
+      Promise.resolve({ data, status: 200, statusText: "OK", headers: {}, config } as never);
+
+    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);
+    if (url.includes("/public/payments/subscriptions/free")) return reply({ membershipId: "m-1" });
+    if (url.includes("/public/payments/subscriptions")) {
+      return reply({ membershipId: "m-1", subscriptionId: "s-1", clientSecret: "pi_secret", requiresPayment: true });
+    }
+    return reply({});
+  };
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = adapter;
+}
+
+function mount(opts: { tiers: MembershipTier[]; user?: PublicAuthUser; initialTierId?: string }) {
+  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.
+  const initialTierId = "initialTierId" in opts ? opts.initialTierId : "tier-1";
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={
+            {
+              user: opts.user ?? member,
+              isInitialized: true,
+              isAuthenticated: true,
+              currencies,
+              userSelectedCurrency: Currency.NGN,
+            } as never
+          }
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <MembershipCheckout initialTierId={initialTierId} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const amountBox = () => screen.getByRole("spinbutton") as HTMLInputElement;
+const subscribeButton = () =>
+  screen.getByRole("button", { name: /Subscribe|Confirm change|Processing/i }) as HTMLButtonElement;
+const subscriptionPosts = () =>
+  sent.filter((r) => r.method === "post" && r.url.includes("/public/payments/subscriptions"));
+
+beforeEach(() => {
+  sent = [];
+});
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+describe("pay-what-you-want: the figure that is sent", () => {
+  it("REGRESSION: sends the tier's floor when the fan touches nothing, never 0", async () => {
+    // The defect: `customAmount` initialised to 0 and nothing seeded it from the
+    // tier, so the first press of Subscribe posted `amount: 0`. The server takes
+    // the amount as a positive number and refuses that outright, so a
+    // pay-what-you-want tier could not be bought at all.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    expect(amountBox().value).toBe("37500");
+
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({
+      amount: 25,
+      billingCycle: "month",
+      membershipTierId: "tier-1",
+      profileId: PROFILE_ID,
+    });
+  });
+
+  it("sends a generous figure, converted from what was typed", async () => {
+    // The fan types naira because that is what the page is priced in; the API
+    // is charged in the settlement currency.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "60000" } });
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    // 60,000 naira at 1500 to the dollar.
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 40 });
+  });
+
+  it("REGRESSION: switching to yearly re-seeds the box to the YEARLY floor and sends it", async () => {
+    // The floor belongs to the cycle. Carrying the monthly minimum onto a yearly
+    // subscription sells a whole year for a month's money.
+    mount({
+      tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 5, payWhatYouWantYearlyMinimum: 50 })],
+    });
+
+    await waitFor(() => expect(amountBox().value).toBe("7500"));
+    const [monthly, yearly] = screen.getAllByRole("radio") as HTMLInputElement[];
+    expect(monthly.checked).toBe(true);
+    fireEvent.click(yearly);
+    // 50 USD, shown in the currency the fan is reading.
+    expect(amountBox().value).toBe("75000");
+
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 50, billingCycle: "year" });
+  });
+
+  it("refuses a figure under the floor beside the field, and sends nothing", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "3" } });
+    fireEvent.click(subscribeButton());
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+
+  it("refuses a cleared box, which is the zero the server will not take", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "" } });
+    fireEvent.click(subscribeButton());
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+});
+
+describe("currency: what converts and what does not", () => {
+  it("prints the pay-what-you-want floor in the VISITOR's currency", async () => {
+    // The whole screen is priced in naira, so the box is too. Pricing a tier in
+    // one currency and asking for the amount in another makes a fan do the
+    // arithmetic to buy something, and they will get it wrong.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const label = await screen.findByText(/How much would you like to pay/i);
+    // 25 USD at 1500 to the dollar.
+    expect(label.textContent).toContain("₦37,500");
+    expect(label.textContent).not.toContain("$25");
+  });
+
+  it("seeds the box with the floor, in the currency the fan is reading", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    expect(input.value).toBe("37500");
+  });
+
+  it("🔴 REGRESSION: sends a WHOLE settlement unit, never a raw quotient", async () => {
+    // Every membership price column is an `integer`. A raw quotient reached
+    // `ProfilePaymentPrice.findOne({ amount })` and Postgres answered
+    // `invalid input syntax for type integer: "426.76681461249575"` - a 500 on
+    // the subscribe button, from a number the fan never saw.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    // 40,001 naira at 1500 is 26.667 dollars, which does not divide evenly.
+    fireEvent.change(input, { target: { value: "40001" } });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const sent = (subscriptionPosts()[0].body as { amount: number }).amount;
+    expect(Number.isInteger(sent)).toBe(true);
+    expect(sent).toBe(27);
+  });
+
+  it("🔴 REGRESSION: converts what the fan TYPES back to the settlement currency", async () => {
+    // The half that stops the disaster. The API charges in USD, so a fan typing
+    // 37,500 meaning naira must be billed 25 dollars and not 37,500 of them.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "75000" } });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    // 75,000 naira at 1500 to the dollar is 50 dollars.
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 50 });
+  });
+
+  it("converts the total the fan only reads", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    // 25 USD at 1500 to the dollar.
+    expect(await screen.findByText("₦37,500")).toBeTruthy();
+  });
+
+  it("sends the settlement figure even while the screen reads naira", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 10 });
+  });
+});
+
+describe("billing cycles a tier actually sells", () => {
+  it("REGRESSION: buys a YEARLY-ONLY tier as a paid subscription, not as a free one", async () => {
+    // The defect: the cycle defaulted to the literal "month", the tier had no
+    // monthly price, so it was read as free and activated through
+    // `/subscriptions/free`. The fan got the tier and the artist got nothing.
+    mount({ tiers: [tier({ priceYearly: 100 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const post = subscriptionPosts()[0];
+    expect(post.url).not.toContain("/free");
+    expect(post.body).toMatchObject({ amount: 100, billingCycle: "year" });
+  });
+
+  it("offers no cycle choice when the tier sells only one", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    expect(screen.queryByRole("radio")).toBeNull();
+  });
+
+  it("activates a genuinely free tier through the free endpoint, with no amount", async () => {
+    mount({ tiers: [tier({ name: "Free Circle" })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const post = subscriptionPosts()[0];
+    expect(post.url).toContain("/subscriptions/free");
+    expect(post.body).not.toHaveProperty("amount");
+  });
+});
+
+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,
+      initialTierId: undefined,
+    });
+
+    expect(await screen.findByText("Current plan")).toBeTruthy();
+    // One button per selectable tier: the current one offers a sentence instead.
+    expect(screen.getAllByRole("button", { name: "Select this tier" })).toHaveLength(1);
+  });
+
+  it("REGRESSION: advertises a yearly-only pay-what-you-want tier on its yearly floor", async () => {
+    // Reading the monthly minimum unconditionally printed "from ₦0/mo", which
+    // reads as free and is the opposite of what the tier costs.
+    mount({
+      tiers: [tier({ payWhatYouWant: true, payWhatYouWantYearlyMinimum: 60 })],
+      initialTierId: undefined,
+    });
+
+    const label = await screen.findByText(/Pay what you want from/i);
+    // 60 USD at 1500 to the dollar, advertised per year.
+    expect(label.textContent).toContain("₦90,000");
+    expect(label.textContent).toContain("/yr");
+  });
+
+  it("calls a change a change for a member with a live subscription", async () => {
+    const paying = {
+      ...member,
+      membership: { membershipTierId: "tier-1", status: "active", paymentProviderSubscriptionId: "sub_123" },
+    } as unknown as PublicAuthUser;
+    mount({ tiers: [tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })], user: paying, initialTierId: "tier-2" });
+
+    expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
+  });
+});