create-ailk 0.18.0 → 0.19.1

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/hub-mode.test.tsx

@@ -9,19 +9,38 @@
  * suites (spec 7894 D9), so it runs in this monorepo only.
  *
  * Covers:
- *   - AC-7: with the hub answering 404 to the base reads (the hub credential
- *     is admitted on none of them, D6), `loadInboxItems` loads `[]` for
- *     `result` and `purchase` with `failed` false — an empty Inbox, never an
- *     error row — and every read carries the Bearer credential, not a cookie.
- *   - AC-5: the settings page renders no `NameForm` and no deletion request,
- *     and links to `<AILK_HUB_SIGN_IN_URL>/account/settings` instead; Billing
- *     is absent (its read answers 404).
+ *   - AC-7: with the hub answering 404 to every read (the hub credential
+ *     is admitted on none of them, D6), `loadInboxItems` loads `[]` with
+ *     `failed` false — an empty Inbox, never an error row — and every read
+ *     carries the Bearer credential, not a cookie. The purchase and
+ *     appointment kinds read `member.purchases` and `member.appointments`,
+ *     never `flowCheckouts.me` (#8231 D5–D7).
+ *   - AC-5, as #8232 rewrites it (spec
+ *     docs/specs/8232-member-settings-account-general-and-spec.md D2–D7, D9;
+ *     its AC-2 and AC-7): General no longer links to the hub's settings.
+ *     Where the hub answers the member routes, the name, photo and deletion
+ *     go through the member API with the Bearer credential, and a save
+ *     re-seals the session cookie; where it answers none (the fixture's 404),
+ *     the name is read-only and no deletion path is offered. Billing says
+ *     there is no subscription without reading `subscription.me`.
+ *   - #8217 AC-1 (spec docs/specs/8217-spoke-billing-spoke-checkout-reads-spec.md
+ *     D10–D12): Billing reads the seam's `loadSpokeBilling` — the plan, the
+ *     card and Manage billing for a subscription; the plain none line with
+ *     no button for none or a spoke without the action (`null`); the
+ *     unreadable line; the error row for a failed read — and never calls
+ *     `subscription.me` or `member.billing` itself. `openBillingPortal`
+ *     redirects to the loader's portal URL, and to nothing without one.
+ *   - #8431 AC-4 (spec docs/specs/8431-account-security-tab-human-sign-spec.md
+ *     D1–D3): Security says the hub manages sign-in and links to the hub's
+ *     own Security page, offers no password control and never reads the
+ *     seam's accounts; Log out POSTs the spoke's sign-out endpoint, never
+ *     Better Auth, and lands on `/account` only when it succeeded.
  */
 import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 
-import { render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 jest.mock("next-intl/server", () => {
   const msgs: unknown = require("../../../../../messages/en.json");
@@ -35,22 +54,31 @@ jest.mock("next-intl/server", () => {
     getTranslations: async (arg: string | { namespace?: string; locale?: string }) => {
       const ns = typeof arg === "string" ? arg : (arg.namespace ?? "");
       const messages = dig(msgs, ns);
-      return (key: string): string => {
+      return (key: string, values?: Record<string, unknown>): string => {
         const value = dig(messages, key);
-        return typeof value === "string" ? value : `${ns}.${key}`;
+        if (typeof value !== "string") return `${ns}.${key}`;
+        return value.replace(/\{(\w+)\}/g, (m, name: string) =>
+          values && name in values ? String(values[name]) : m,
+        );
       };
     },
   };
 });
 
 const mockHeaders = jest.fn();
+const mockCookieSet = jest.fn();
 jest.mock("next/headers", () => ({
   __esModule: true,
   headers: (...args: unknown[]) => mockHeaders(...args),
-  cookies: jest.fn().mockResolvedValue({ toString: () => "" }),
+  cookies: jest.fn().mockImplementation(async () => ({
+    toString: () => "",
+    set: (...args: unknown[]) => mockCookieSet(...args),
+  })),
 }));
 
 const mockReadSession = jest.fn();
+const mockLoadSpokeBilling = jest.fn();
+const mockReadOwnAccounts = jest.fn();
 // eslint-disable-next-line no-restricted-syntax -- #507: the seam is generated per build (#7894 D8); its `signIn: "hub"` render is the boundary under test, and no env or HTTP surface selects it.
 jest.mock("../../../../../lib/topology.generated", () => ({
   __esModule: true,
@@ -62,6 +90,10 @@ jest.mock("../../../../../lib/topology.generated", () => ({
   SIGN_OUT_ENDPOINT: "/api/hub-session/sign-out",
   readSession: (...args: unknown[]) => mockReadSession(...args),
   registerSiteStores: () => Promise.resolve(),
+  // #8217 D7 — the billing render's loader; `null` is a spoke without the action.
+  loadSpokeBilling: (...args: unknown[]) => mockLoadSpokeBilling(...args),
+  // #8431 D2a — a spoke has no local accounts; Security must never ask.
+  readOwnAccounts: (...args: unknown[]) => mockReadOwnAccounts(...args),
 }));
 
 const mockLeadsSubmit = jest.fn();
@@ -70,40 +102,61 @@ const mockWaitlistMe = jest.fn();
 const mockFlowCheckoutsMe = jest.fn();
 const mockSubscriptionMe = jest.fn();
 const mockMemberRead = jest.fn();
+const mockMemberPurchases = jest.fn();
+const mockMemberAppointments = jest.fn();
+const mockUpdateProfile = jest.fn();
+const mockRequestDeletion = jest.fn();
+const mockHubMe = jest.fn();
+const mockMemberBilling = jest.fn();
+const mockPortalSession = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   waitlistSignups: { me: (...args: unknown[]) => mockWaitlistMe(...args) },
   flowCheckouts: { me: (...args: unknown[]) => mockFlowCheckoutsMe(...args) },
   subscription: {
     me: (...args: unknown[]) => mockSubscriptionMe(...args),
-    portalSession: jest.fn(),
+    portalSession: (...args: unknown[]) => mockPortalSession(...args),
   },
   leads: { submit: (...args: unknown[]) => mockLeadsSubmit(...args) },
   // #7920 — the member kinds read the hub with the credential; 404 here.
   member: {
     pieces: (...args: unknown[]) => mockMemberRead(...args),
     messages: (...args: unknown[]) => mockMemberRead(...args),
+    purchases: (...args: unknown[]) => mockMemberPurchases(...args),
+    appointments: (...args: unknown[]) => mockMemberAppointments(...args),
+    updateProfile: (...args: unknown[]) => mockUpdateProfile(...args),
+    requestDeletion: (...args: unknown[]) => mockRequestDeletion(...args),
+    // #8217 — only the rendered billing action reads it; billing-source.ts never does.
+    billing: (...args: unknown[]) => mockMemberBilling(...args),
   },
   visitorForwardHeaders: () => null,
-  hubSignIn: { me: jest.fn() },
+  hubSignIn: { me: (...args: unknown[]) => mockHubMe(...args) },
 }));
 
+const mockUpdateUser = jest.fn();
+const mockSignOut = jest.fn();
 jest.mock("better-auth/react", () => ({
   __esModule: true,
-  createAuthClient: () => ({ signOut: jest.fn(), updateUser: jest.fn() }),
+  createAuthClient: () => ({
+    signOut: (...args: unknown[]) => mockSignOut(...args),
+    updateUser: (...args: unknown[]) => mockUpdateUser(...args),
+  }),
 }));
 
+const mockRedirect = jest.fn();
+const mockPush = jest.fn();
 jest.mock("next/navigation", () => ({
   __esModule: true,
-  useRouter: () => ({ push: jest.fn(), refresh: jest.fn() }),
-  usePathname: () => "/account/settings",
-  redirect: jest.fn(),
+  useRouter: () => ({ push: mockPush, refresh: jest.fn(), replace: jest.fn() }),
+  usePathname: () => "/account/general",
+  redirect: (...args: unknown[]) => mockRedirect(...args),
 }));
 
-import { seal } from "../../../../../lib/hub-session/seal";
+import { seal, unseal } from "../../../../../lib/hub-session/seal";
 import { accountSession, loadInboxItems } from "../account-data";
+import { openBillingPortal } from "../actions";
+import GeneralPage from "../general/page";
 import { submitSupportRequest } from "../support-actions";
-import Page from "../settings/page";
 
 const HUB = "https://hub.example.com";
 const SESSION_SECRET = "s".repeat(43);
@@ -142,6 +195,20 @@ beforeEach(() => {
   mockFlowCheckoutsMe.mockReset().mockResolvedValue(notFound);
   mockSubscriptionMe.mockReset().mockResolvedValue(notFound);
   mockMemberRead.mockReset().mockResolvedValue(notFound);
+  mockMemberPurchases.mockReset().mockResolvedValue(notFound);
+  mockMemberAppointments.mockReset().mockResolvedValue(notFound);
+  mockUpdateProfile.mockReset();
+  mockRequestDeletion.mockReset();
+  mockHubMe.mockReset();
+  mockLoadSpokeBilling.mockReset().mockResolvedValue(null);
+  mockMemberBilling.mockReset();
+  mockPortalSession.mockReset();
+  mockRedirect.mockReset();
+  mockCookieSet.mockReset();
+  mockUpdateUser.mockReset();
+  mockReadOwnAccounts.mockReset().mockResolvedValue(null);
+  mockSignOut.mockReset();
+  mockPush.mockReset();
 });
 
 afterEach(() => {
@@ -150,16 +217,17 @@ afterEach(() => {
 });
 
 describe("AC-7 — the base Inbox kinds on a hub-mode spoke", () => {
-  it("loads [] for result and purchase, with failed false, when the hub answers 404", async () => {
+  it("loads [] for every kind, with failed false, when the hub answers 404", async () => {
     const session = await accountSession("en");
     if (session === null) throw new Error("expected a session");
     expect(session.ctx.init).toEqual({ headers: { authorization: `Bearer ${CREDENTIAL}` } });
 
     const inbox = await loadInboxItems(session.ctx);
     expect(inbox).toEqual({ items: [], failed: false });
-    expect(mockFlowCheckoutsMe).toHaveBeenCalledWith({
-      headers: { authorization: `Bearer ${CREDENTIAL}` },
-    });
+    const bearer = { headers: { authorization: `Bearer ${CREDENTIAL}` } };
+    expect(mockMemberPurchases).toHaveBeenCalledWith(bearer);
+    expect(mockMemberAppointments).toHaveBeenCalledWith(bearer);
+    expect(mockFlowCheckoutsMe).not.toHaveBeenCalled();
   });
 
   it("has no session when the seam reads none", async () => {
@@ -168,23 +236,77 @@ describe("AC-7 — the base Inbox kinds on a hub-mode spoke", () => {
   });
 });
 
-describe("AC-5 — the settings page on a hub-mode spoke", () => {
-  async function renderPage(): Promise<void> {
-    render(await Page({ params: Promise.resolve({ locale: "en" }) }));
+describe("AC-5 — General and Billing on a hub-mode spoke (#8232)", () => {
+  const bearer = { headers: { authorization: `Bearer ${CREDENTIAL}` } };
+
+  async function renderGeneral(): Promise<void> {
+    render(await GeneralPage({ params: Promise.resolve({ locale: "en" }) }));
   }
 
-  it("renders no NameForm and no deletion request, and links to the hub's account settings", async () => {
-    await renderPage();
-    expect(screen.queryByTestId("account-name-form")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("account-deletion-request")).not.toBeInTheDocument();
-    const href = `${HUB}/account/settings`;
-    expect(screen.getByTestId("account-settings-manage-on-hub")).toHaveAttribute("href", href);
-    expect(screen.getByTestId("account-privacy-manage-on-hub")).toHaveAttribute("href", href);
-    expect(screen.getByTestId("account-settings-name")).toHaveTextContent("Ada Lovelace");
-    expect(screen.getByText(/You sign in through our main site/)).toBeInTheDocument();
+  describe("a hub that answers the member routes", () => {
+    beforeEach(() => {
+      mockMemberRead.mockResolvedValue({ ok: true, body: [] });
+    });
+
+    it("renders the name and photo form and the deletion button, with no link to the hub's settings", async () => {
+      await renderGeneral();
+      expect(screen.getByTestId("account-general-form")).toBeInTheDocument();
+      expect(screen.getByLabelText("Name")).toHaveValue("Ada Lovelace");
+      // No hub read carries the photo, so the field starts empty (C5).
+      expect(screen.getByLabelText("Photo")).toHaveValue("");
+      expect(screen.getByTestId("account-deletion-request")).toBeInTheDocument();
+      expect(screen.queryByTestId("account-settings-manage-on-hub")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("account-privacy-manage-on-hub")).not.toBeInTheDocument();
+      expect(document.querySelector(`a[href^="${HUB}"]`)).toBeNull();
+    });
+
+    it("saves the name through member.updateProfile with the Bearer credential, then re-seals the session", async () => {
+      mockUpdateProfile.mockResolvedValue({ ok: true, body: { name: "Ada King", image: null } });
+      mockHubMe.mockResolvedValue({ ok: true, body: { user: { ...USER, name: "Ada King" }, billingCustomerId: null } });
+      await renderGeneral();
+      fireEvent.change(screen.getByLabelText("Name"), { target: { value: "Ada King" } });
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("account-general-save"));
+      });
+      expect(mockUpdateProfile).toHaveBeenCalledWith({ name: "Ada King" }, bearer);
+      expect(mockUpdateUser).not.toHaveBeenCalled();
+      expect(mockHubMe).toHaveBeenCalledWith(bearer);
+      expect(mockCookieSet).toHaveBeenCalledTimes(1);
+      const [name, value] = mockCookieSet.mock.calls[0] as [string, string];
+      expect(name).toBe("__Host-ailk-hub-session");
+      expect(unseal(value, SESSION_SECRET, "session", name)).toMatchObject({
+        accessToken: CREDENTIAL,
+        user: { name: "Ada King" },
+      });
+    });
+
+    it("the deletion request goes through the member API and names the hub operator", async () => {
+      mockRequestDeletion.mockResolvedValue({ ok: true, body: { sentTo: "hub-operator" } });
+      await renderGeneral();
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("account-deletion-request"));
+      });
+      expect(mockRequestDeletion).toHaveBeenCalledWith({}, bearer);
+      await waitFor(() => expect(screen.getByRole("status")).toHaveTextContent("Sent to the hub operator."));
+      expect(mockLeadsSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("a hub that answers no member route (the fixture's 404)", () => {
+    it("shows the name read-only and offers no save and no deletion path", async () => {
+      await renderGeneral();
+      expect(screen.getByTestId("account-general-name-text")).toHaveTextContent("Ada Lovelace");
+      expect(screen.queryByTestId("account-general-form")).not.toBeInTheDocument();
+      expect(screen.queryByLabelText("Photo")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("account-deletion-request")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("account-deletion-support")).not.toBeInTheDocument();
+      expect(screen.getByText("This site can't take deletion requests right now.")).toBeInTheDocument();
+      expect(document.querySelector(`a[href^="${HUB}"]`)).toBeNull();
+      expect(mockUpdateUser).not.toHaveBeenCalled();
+    });
   });
 
-  it("files a posted deletion request as a support request — the hub owns the account (SEC-7894-11)", async () => {
+  it("files a posted deletion request as a support request — Support files support only (SEC-7894-11)", async () => {
     mockLeadsSubmit.mockResolvedValue({ ok: true, body: {} });
     const form = new FormData();
     form.set("kind", "deletion");
@@ -196,11 +318,194 @@ describe("AC-5 — the settings page on a hub-mode spoke", () => {
     );
   });
 
-  it("omits Billing, whose read answers 404 for the hub credential", async () => {
-    await renderPage();
-    expect(document.getElementById("billing")).not.toBeInTheDocument();
-    expect(mockSubscriptionMe).toHaveBeenCalledWith({
-      headers: { authorization: `Bearer ${CREDENTIAL}` },
+  it("Billing says there is no subscription, with no button, without reading subscription.me", async () => {
+    // The Billing route's own page, loaded with `import()`: architecture.yaml bans
+    // a static import of a relative billing/ path to keep OSS code out of the
+    // apps-paid/billing service's source, and this route directory shares the name.
+    const { default: BillingPage } = await import("../billing/page");
+    render(await BillingPage({ params: Promise.resolve({ locale: "en" }) }));
+    expect(screen.getByTestId("account-billing-none")).toHaveTextContent("You don't have a subscription.");
+    expect(screen.queryByTestId("account-billing-manage")).not.toBeInTheDocument();
+    expect(mockSubscriptionMe).not.toHaveBeenCalled();
+  });
+});
+
+describe("#8431 AC-4 — Security on a hub-mode spoke", () => {
+  const realFetch = Object.getOwnPropertyDescriptor(globalThis, "fetch");
+  const mockFetch = jest.fn();
+
+  beforeEach(() => {
+    mockFetch.mockReset();
+    Object.defineProperty(globalThis, "fetch", { value: mockFetch, writable: true, configurable: true });
+  });
+
+  afterEach(() => {
+    if (realFetch) Object.defineProperty(globalThis, "fetch", realFetch);
+    else Reflect.deleteProperty(globalThis, "fetch");
+  });
+
+  async function renderSecurity(): Promise<void> {
+    const { default: SecurityPage } = await import("../security/page");
+    render(await SecurityPage({ params: Promise.resolve({ locale: "en" }) }));
+  }
+
+  it("says the hub manages sign-in and links to the hub's Security page — no password control", async () => {
+    await renderSecurity();
+    expect(screen.getByTestId("account-security-hub").textContent).toBe(
+      "Your sign-in is managed at hub.example.com.",
+    );
+    const links = screen.getAllByTestId("account-security-hub-link");
+    expect(links).toHaveLength(1);
+    expect(links[0]).toHaveAttribute("href", `${HUB}/account/security`);
+    expect(screen.getByTestId("account-security-log-out")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-security-password")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-security-sentence")).not.toBeInTheDocument();
+    expect(screen.queryByText(/other devices/i)).toBeNull();
+    expect(mockReadOwnAccounts).not.toHaveBeenCalled();
+  });
+
+  it("with the hub config absent says 'our main site' and links nowhere", async () => {
+    delete process.env.AILK_HUB_CLIENT_SECRET;
+    await renderSecurity();
+    expect(screen.getByTestId("account-security-hub").textContent).toBe(
+      "Your sign-in is managed by our main site.",
+    );
+    expect(screen.queryByTestId("account-security-hub-link")).not.toBeInTheDocument();
+    expect(screen.getByTestId("account-security-log-out")).toBeInTheDocument();
+  });
+
+  it("Log out POSTs the spoke's sign-out endpoint, never Better Auth, and on a 204 lands on /account", async () => {
+    mockFetch.mockResolvedValue({ ok: true, status: 204 });
+    await renderSecurity();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("account-security-log-out"));
+    });
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+    expect(mockFetch).toHaveBeenCalledWith("/api/hub-session/sign-out", {
+      method: "POST",
+      credentials: "same-origin",
     });
+    expect(mockSignOut).not.toHaveBeenCalled();
+    expect(mockPush).toHaveBeenCalledWith("/account");
+  });
+
+  it("a refused sign-out (403) navigates nowhere and shows the error", async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 403 });
+    await renderSecurity();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("account-security-log-out"));
+    });
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(mockSignOut).not.toHaveBeenCalled();
+    expect(screen.getByTestId("account-security-log-out-error")).toBeInTheDocument();
+  });
+});
+
+describe("#8217 AC-1 — Billing on a hub-mode spoke reads the seam's spoke billing (D10–D12)", () => {
+  const VISA = { brand: "visa", last4: "4242", expMonth: 4, expYear: 2030 };
+  const PORTAL_URL = "https://billing.stripe.com/p/session/test_fake";
+
+  /** A `SpokeBilling` stub: what the rendered action returns. */
+  function stub(read: unknown, portalUrl: string | null = PORTAL_URL) {
+    return { read: jest.fn().mockResolvedValue(read), portalUrl: jest.fn().mockResolvedValue(portalUrl) };
+  }
+
+  async function renderBilling(): Promise<void> {
+    // The Billing route's own page, loaded with `import()` — see the AC-5 case above.
+    const { default: BillingPage } = await import("../billing/page");
+    render(await BillingPage({ params: Promise.resolve({ locale: "en" }) }));
+  }
+
+  afterEach(() => {
+    // Every case: billing-source.ts reads neither the hub's subscription nor its billing ids.
+    expect(mockSubscriptionMe).not.toHaveBeenCalled();
+    expect(mockMemberBilling).not.toHaveBeenCalled();
+  });
+
+  it("a subscription renders the plan, the card and Manage billing", async () => {
+    mockLoadSpokeBilling.mockResolvedValue(
+      stub({ kind: "subscription", status: "active", planName: "Pro", paymentMethod: VISA, unreadable: false }),
+    );
+    await renderBilling();
+    const card = screen.getByTestId("account-billing-card");
+    expect(card).toHaveTextContent("Pro");
+    expect(card).toHaveTextContent("Active");
+    expect(card).toHaveTextContent("visa ending in 4242, expires 04/2030");
+    expect(screen.getByTestId("account-billing-manage")).toHaveTextContent("Manage billing");
+    expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-unreadable")).not.toBeInTheDocument();
+  });
+
+  it("none renders the plain none line and no button", async () => {
+    mockLoadSpokeBilling.mockResolvedValue(stub({ kind: "none", unreadable: false }, null));
+    await renderBilling();
+    expect(screen.getByTestId("account-billing-none")).toHaveTextContent("You don't have a subscription.");
+    expect(screen.queryByTestId("account-billing-manage")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-unreadable")).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ["none", { kind: "none", unreadable: true }, "account-billing-card"],
+    [
+      "a subscription",
+      { kind: "subscription", status: "past_due", planName: null, paymentMethod: null, unreadable: true },
+      "account-billing-card",
+    ],
+  ])("unreadable: true on %s adds the unreadable line after it", async (_label, read, baseTestId) => {
+    mockLoadSpokeBilling.mockResolvedValue(stub(read));
+    await renderBilling();
+    const line = screen.getByTestId("account-billing-unreadable");
+    expect(line).toHaveTextContent("Some of your billing is with another Stripe account, so it isn't shown here.");
+    const base = screen.getByTestId(baseTestId);
+    expect(base.compareDocumentPosition(line) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("a failed read renders the error row, never 'no subscription'", async () => {
+    mockLoadSpokeBilling.mockResolvedValue(stub({ kind: "failed" }));
+    await renderBilling();
+    expect(screen.getByTestId("inbox-error")).toHaveTextContent("We couldn't load your billing details.");
+    expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-unreadable")).not.toBeInTheDocument();
+  });
+
+  it("a loader that fails to load renders the error row", async () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    mockLoadSpokeBilling.mockRejectedValue(new SyntaxError("checkout-config.ts is malformed"));
+    await renderBilling();
+    expect(screen.getByTestId("inbox-error")).toBeInTheDocument();
+    expect(errorSpy.mock.calls.map((args) => args.join(" "))).toEqual([
+      "[account] read failed source=spoke-billing errName=SyntaxError",
+    ]);
+    errorSpy.mockRestore();
+  });
+
+  it("a spoke without the action (the loader resolves null) renders none and no button", async () => {
+    await renderBilling();
+    expect(screen.getByTestId("account-billing-none")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-manage")).not.toBeInTheDocument();
+    expect(mockLoadSpokeBilling).toHaveBeenCalledTimes(1);
+  });
+
+  it("openBillingPortal redirects to the loader's portal URL", async () => {
+    const billing = stub({ kind: "none", unreadable: false });
+    mockLoadSpokeBilling.mockResolvedValue(billing);
+    await openBillingPortal();
+    expect(billing.portalUrl).toHaveBeenCalledWith();
+    expect(mockRedirect).toHaveBeenCalledTimes(1);
+    expect(mockRedirect).toHaveBeenCalledWith(PORTAL_URL);
+    expect(mockPortalSession).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ["the loader's portal is null", () => mockLoadSpokeBilling.mockResolvedValue(stub({ kind: "none", unreadable: false }, null))],
+    ["there is no loader", () => mockLoadSpokeBilling.mockResolvedValue(null)],
+    ["the loader fails to load", () => mockLoadSpokeBilling.mockRejectedValue(new Error("load failed"))],
+  ])("openBillingPortal redirects nowhere when %s", async (_label, arrange) => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    arrange();
+    await openBillingPortal();
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(mockPortalSession).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
   });
 });

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/item.test.tsx

@@ -9,6 +9,8 @@
  *   2. An unknown kind, or an id the kind did not load, is a not-found —
  *      never an empty frame.
  *   3. A failed read renders an error with Retry (D12's posture).
+ *
+ * The `purchase` kind reads `member.purchases` (#8231 D5).
  */
 import { fireEvent, render, screen, within } from "@testing-library/react";
 
@@ -49,12 +51,12 @@ jest.mock("../../../../../auth", () => ({
 }));
 
 const mockSignupMe = jest.fn();
-const mockCheckoutsMe = jest.fn();
+const mockMemberPurchases = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   waitlistSignups: { me: (...args: unknown[]) => mockSignupMe(...args) },
-  flowCheckouts: { me: (...args: unknown[]) => mockCheckoutsMe(...args) },
   subscription: { me: jest.fn() },
+  member: { purchases: (...args: unknown[]) => mockMemberPurchases(...args) },
 }));
 
 const mockNotFound = jest.fn(() => {
@@ -74,22 +76,18 @@ const SESSION = {
   user: { id: "user_1", name: "Ada", email: "ada@example.com", emailVerified: true },
 };
 
-const CHECKOUT = {
+const PURCHASE = {
   id: "fc_done",
-  flowSlug: "founder-flow",
-  experimentKey: "ailk-founder-diagnostic",
-  offerKey: "pro",
-  status: "completed",
+  offering: "pro",
   amountMinor: 4900,
   currency: "usd",
   period: "monthly",
-  completedAt: "2026-09-04T10:00:00.000Z",
-  createdAt: "2026-09-04T09:58:00.000Z",
+  purchasedAt: "2026-09-04T10:00:00.000Z",
 };
 
 beforeEach(() => {
   mockGetSession.mockReset().mockResolvedValue(SESSION);
-  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: [CHECKOUT] });
+  mockMemberPurchases.mockReset().mockResolvedValue({ ok: true, body: { items: [PURCHASE] } });
   mockSignupMe.mockReset();
   mockNotFound.mockClear();
   mockRefresh.mockReset();
@@ -113,7 +111,7 @@ describe("one Inbox item", () => {
   });
 
   it("decodes an encoded id segment", async () => {
-    mockCheckoutsMe.mockResolvedValue({ ok: true, body: [{ ...CHECKOUT, id: "fc done" }] });
+    mockMemberPurchases.mockResolvedValue({ ok: true, body: { items: [{ ...PURCHASE, id: "fc done" }] } });
     await renderItem("purchase", "fc%20done");
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("pro");
   });
@@ -125,7 +123,7 @@ describe("one Inbox item", () => {
 
   it("an unknown kind is a not-found", async () => {
     await expect(renderItem("nope", "fc_done")).rejects.toThrow("NEXT_NOT_FOUND");
-    expect(mockCheckoutsMe).not.toHaveBeenCalled();
+    expect(mockMemberPurchases).not.toHaveBeenCalled();
   });
 
   it("an id the kind did not load is a not-found", async () => {
@@ -133,7 +131,7 @@ describe("one Inbox item", () => {
   });
 
   it("a failed read renders an error with Retry, not a not-found", async () => {
-    mockCheckoutsMe.mockResolvedValue({ ok: false, status: 500, body: {} });
+    mockMemberPurchases.mockResolvedValue({ ok: false, status: 500, body: {} });
     await renderItem("purchase", "fc_done");
     expect(mockNotFound).not.toHaveBeenCalled();
     expect(screen.getByTestId("inbox-error")).toHaveTextContent("We couldn't load this item.");