create-ailk 0.19.0 → 0.20.0

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

@@ -19,7 +19,14 @@
  *     https; no deliverer is shown;
  *   - the review form shows on the latest version only, only while the
  *     artifact is not approved and that version has no review; after a
- *     Request changes the page says the next version will appear there.
+ *     Request changes the page says the next version will appear there;
+ *   - a proposal (#8516, spec
+ *     docs/specs/8516-proposals-as-an-artifact-kind-spec.md D19, AC-3, AC-4)
+ *     reads "Proposal" and its price, answers "Your decision on version <n>"
+ *     with Approve proposal / Request changes, and in the latest version's
+ *     place shows Pay now while payment is due, "Paid <date>" once paid, and
+ *     the pending line on `?paid=1` before the webhook lands — while a
+ *     deliverable renders exactly as before.
  */
 
 import { fireEvent, render, screen, within } from "@testing-library/react";
@@ -205,9 +212,15 @@ async function renderList(): Promise<void> {
   render(await ListPage({ params: Promise.resolve({ locale: "en" }) }));
 }
 
-async function renderArtifact(pieceId: string): Promise<void> {
+async function renderArtifact(
+  pieceId: string,
+  searchParams?: Record<string, string>,
+): Promise<void> {
   render(
-    await ArtifactPage({ params: Promise.resolve({ locale: "en", pieceId }) }),
+    await ArtifactPage({
+      params: Promise.resolve({ locale: "en", pieceId }),
+      ...(searchParams ? { searchParams: Promise.resolve(searchParams) } : {}),
+    }),
   );
 }
 
@@ -512,3 +525,163 @@ describe("the review form's place (D4, C3, AC-4)", () => {
     );
   });
 });
+
+// #8516 D19 — a priced proposal, unreviewed, as apps/api serves it.
+const PROPOSAL_ID = "piece_01920000-0000-7000-8000-00000000000d";
+const PROPOSAL = {
+  id: PROPOSAL_ID,
+  title: "Site redesign",
+  approvedAt: null,
+  kind: "proposal",
+  price: { amount: 120000, currency: "usd" },
+  payment: null,
+  versions: [version({ version: 1, deliveredAt: "2026-10-01T12:00:00.000Z" })],
+};
+const APPROVED_AT = "2026-10-05T09:00:00.000Z";
+const PAID_AT = "2026-10-06T09:30:00.000Z";
+
+function approvedProposal(payment: unknown) {
+  const [latest] = PROPOSAL.versions;
+  return {
+    ...PROPOSAL,
+    approvedAt: APPROVED_AT,
+    payment,
+    versions: [{ ...latest!, review: "approved", reviewedAt: APPROVED_AT }],
+  };
+}
+
+// An older hub serves no `kind`, `price` or `payment` (#8516 D4: optional).
+const ALPHA_WITHOUT_KIND = {
+  id: ID.mango,
+  title: "Mango brief",
+  approvedAt: null,
+  versions: [version({ version: 1 })],
+};
+
+const PAY_IDS = ["artifact-pay-form", "artifact-pay", "artifact-paid-pending"];
+
+describe("a proposal (#8516 D19, AC-3, AC-4)", () => {
+  it("renders Proposal, its price, the decision heading and Approve proposal / Request changes", async () => {
+    mockArtifacts.mockResolvedValue(ok([PROPOSAL]));
+    await renderArtifact(PROPOSAL_ID);
+    const page = screen.getByTestId("artifact");
+    expect(within(page).getByText("Proposal")).toBeInTheDocument();
+    expect(within(page).queryByText("Artifact")).toBeNull();
+    expect(screen.getByTestId("artifact-price")).toHaveTextContent(
+      "Price $1,200.00",
+    );
+    const v1 = screen.getByTestId("artifact-version-1");
+    expect(within(v1).getByRole("heading", { level: 3 })).toHaveTextContent(
+      "Your decision on version 1",
+    );
+    expect(within(v1).getByTestId("artifact-review-approve")).toHaveTextContent(
+      "Approve proposal",
+    );
+    expect(
+      within(v1).getByTestId("artifact-review-request-changes"),
+    ).toHaveTextContent("Request changes");
+    for (const id of PAY_IDS) expect(screen.queryByTestId(id)).toBeNull();
+    expect(screen.queryByTestId("artifact-paid")).toBeNull();
+  });
+
+  it("a currency Intl cannot format falls back to the amount and code instead of erroring the page", async () => {
+    mockArtifacts.mockResolvedValue(
+      ok([{ ...PROPOSAL, price: { amount: 120000, currency: "u$" } }]),
+    );
+    await renderArtifact(PROPOSAL_ID);
+    expect(screen.getByTestId("artifact-price")).toHaveTextContent("Price 1200 U$");
+  });
+
+  it("a deliverable still renders Artifact, no price and Approve", async () => {
+    mockArtifacts.mockResolvedValue(
+      ok([{ ...VERSIONED, kind: "deliverable", price: null, payment: null }]),
+    );
+    await renderArtifact(ID.alpha);
+    const page = screen.getByTestId("artifact");
+    expect(within(page).getByText("Artifact")).toBeInTheDocument();
+    expect(within(page).queryByText("Proposal")).toBeNull();
+    expect(screen.queryByTestId("artifact-price")).toBeNull();
+    expect(page.textContent).not.toMatch(/Price/);
+    const v3 = screen.getByTestId("artifact-version-3");
+    expect(within(v3).getByRole("heading", { level: 3 })).toHaveTextContent(
+      "Review version 3",
+    );
+    expect(within(v3).getByTestId("artifact-review-approve")).toHaveTextContent(
+      /^Approve$/,
+    );
+    for (const id of PAY_IDS) expect(screen.queryByTestId(id)).toBeNull();
+  });
+
+  it("an older hub's artifact with no kind renders as a deliverable", async () => {
+    mockArtifacts.mockResolvedValue(ok([ALPHA_WITHOUT_KIND]));
+    await renderArtifact(ID.mango);
+    expect(
+      within(screen.getByTestId("artifact")).getByText("Artifact"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("artifact-price")).toBeNull();
+    expect(screen.getByTestId("artifact-review-approve")).toHaveTextContent(
+      /^Approve$/,
+    );
+  });
+
+  it("while payment is due, Pay now sits in the latest version's place and the review form is gone", async () => {
+    mockArtifacts.mockResolvedValue(ok([approvedProposal({ status: "due" })]));
+    await renderArtifact(PROPOSAL_ID);
+    const v1 = screen.getByTestId("artifact-version-1");
+    expect(within(v1).getByTestId("artifact-pay")).toHaveTextContent("Pay now");
+    expect(screen.getAllByTestId("artifact-pay")).toHaveLength(1);
+    expect(screen.queryByTestId("artifact-review-approve")).toBeNull();
+    expect(screen.queryByTestId("artifact-paid")).toBeNull();
+    expect(screen.queryByTestId("artifact-paid-pending")).toBeNull();
+    expect(screen.getByTestId("artifact-status")).toHaveTextContent("Approved");
+  });
+
+  it("once paid, the latest version says Paid <date> and offers no Pay now", async () => {
+    mockArtifacts.mockResolvedValue(
+      ok([approvedProposal({ status: "paid", paidAt: PAID_AT })]),
+    );
+    await renderArtifact(PROPOSAL_ID, { paid: "1" });
+    const v1 = screen.getByTestId("artifact-version-1");
+    expect(within(v1).getByTestId("artifact-paid")).toHaveTextContent(
+      `Paid ${medium(PAID_AT)}`,
+    );
+    for (const id of PAY_IDS) expect(screen.queryByTestId(id)).toBeNull();
+  });
+
+  it("back from Stripe (?paid=1) before the webhook lands, it says the payment was received instead of Pay now", async () => {
+    mockArtifacts.mockResolvedValue(ok([approvedProposal({ status: "due" })]));
+    await renderArtifact(PROPOSAL_ID, { paid: "1" });
+    const v1 = screen.getByTestId("artifact-version-1");
+    expect(within(v1).getByTestId("artifact-paid-pending")).toHaveTextContent(
+      "Payment received — it may take a minute to show here.",
+    );
+    expect(screen.queryByTestId("artifact-pay")).toBeNull();
+    expect(screen.queryByTestId("artifact-paid")).toBeNull();
+  });
+
+  it("an approved proposal with no payment surface (payment null) shows neither Pay now nor Paid", async () => {
+    mockArtifacts.mockResolvedValue(ok([approvedProposal(null)]));
+    await renderArtifact(PROPOSAL_ID, { paid: "1" });
+    for (const id of PAY_IDS) expect(screen.queryByTestId(id)).toBeNull();
+    expect(screen.queryByTestId("artifact-paid")).toBeNull();
+    expect(screen.getByTestId("artifact-price")).toHaveTextContent(
+      "Price $1,200.00",
+    );
+  });
+
+  it("the list reads Proposal · Version <n> in a proposal's caption and Latest cell, and a deliverable's as before", async () => {
+    mockArtifacts.mockResolvedValue(ok([PROPOSAL, ALPHA]));
+    await renderList();
+    const captions = screen.getAllByTestId("artifacts-row");
+    expect(captions.map((c) => c.textContent)).toEqual([
+      expect.stringContaining("Proposal · Version 1 · Ready for review"),
+      expect.stringContaining("Version 1 · Ready for review"),
+    ]);
+    expect(captions[1]!.textContent).not.toContain("Proposal");
+    const row = screen.getByTestId(`artifacts-table-row-${PROPOSAL_ID}`);
+    expect(row).toHaveTextContent("Proposal · Version 1");
+    expect(
+      screen.getByTestId(`artifacts-table-row-${ID.alpha}`),
+    ).not.toHaveTextContent("Proposal");
+  });
+});

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

@@ -0,0 +1,193 @@
+/**
+ * Pay now on an approved proposal (#8516, spec
+ * docs/specs/8516-proposals-as-an-artifact-kind-spec.md D19, AC-4, AC-7).
+ *
+ * Two layers:
+ *   - `payForProposal` (the Server Action), with the api-client's
+ *     `member.payArtifact` as the one mocked boundary: it asks once with the
+ *     caller's init and redirects only to a Stripe Checkout URL; a refusal, a
+ *     throw or a URL on any other host is `payment_failed` with no redirect,
+ *     and a log line carries `err.name` only — never the URL or the id.
+ *   - `PayForm` (the client form): one button and no input of any kind — no
+ *     card, number or expiry field; payment happens on Stripe's page.
+ */
+
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+
+const mockPayArtifact = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  member: {
+    reviewArtifact: jest.fn(),
+    payArtifact: (...args: unknown[]) => mockPayArtifact(...args),
+  },
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest
+    .fn()
+    .mockResolvedValue(new Headers({ origin: "https://site.example.com" })),
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+// Next's `redirect()` throws NEXT_REDIRECT; the mock does too, so a catch
+// that swallowed it would show up as a resolved action.
+const mockRedirect = jest.fn((url: string): never => {
+  throw new Error(`NEXT_REDIRECT ${url}`);
+});
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn() }),
+  redirect: (url: string) => mockRedirect(url),
+}));
+
+import messages from "../../../../../../messages/en.json";
+import { PayForm, type PayFormLabels } from "../[pieceId]/pay-form";
+import * as actions from "../artifact-actions";
+import { payForProposal } from "../artifact-actions";
+
+const PIECE = "piece_01920000-0000-7000-8000-00000000000d";
+const INIT = {
+  headers: { cookie: "session=abc", origin: "https://site.example.com" },
+};
+const CHECKOUT = "https://checkout.stripe.com/c/pay/cs_test_x";
+const p = messages.account.artifacts.proposal;
+const LABELS: PayFormLabels = {
+  pay: p.pay,
+  paying: p.paying,
+  error: p.payError,
+};
+
+function pay(pieceId = PIECE) {
+  const data = new FormData();
+  data.set("pieceId", pieceId);
+  return payForProposal({ kind: "idle" }, data);
+}
+
+function refusal(status: number, code: string) {
+  return {
+    ok: false,
+    status,
+    body: { ok: false, error: { code, message: "x" } },
+  };
+}
+
+let errorSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  mockPayArtifact
+    .mockReset()
+    .mockResolvedValue({ ok: true, body: { url: CHECKOUT } });
+  mockRedirect.mockClear();
+  errorSpy = jest.spyOn(console, "error").mockImplementation(() => undefined);
+});
+
+afterEach(() => {
+  errorSpy.mockRestore();
+});
+
+describe("payForProposal (D19, AC-4, AC-7)", () => {
+  it("calls member.payArtifact once with the caller's init and redirects to the Checkout URL", async () => {
+    await expect(pay()).rejects.toThrow("NEXT_REDIRECT");
+    expect(mockPayArtifact).toHaveBeenCalledTimes(1);
+    expect(mockPayArtifact).toHaveBeenCalledWith(PIECE, INIT);
+    expect(mockRedirect).toHaveBeenCalledTimes(1);
+    expect(mockRedirect).toHaveBeenCalledWith(CHECKOUT);
+  });
+
+  it.each([
+    ["a 409 proposal_paid refusal", refusal(409, "proposal_paid")],
+    ["a 404 (no payment surface)", refusal(404, "not_found")],
+    ["a 502 payment_unavailable", refusal(502, "payment_unavailable")],
+    [
+      "a URL on another host",
+      { ok: true, body: { url: "https://evil.example/x" } },
+    ],
+    [
+      "a look-alike Stripe host",
+      { ok: true, body: { url: "https://checkout.stripe.com.evil.example/x" } },
+    ],
+    [
+      "a URL with userinfo",
+      { ok: true, body: { url: "https://user@checkout.stripe.com/x" } },
+    ],
+    ["a body with no URL", { ok: true, body: {} }],
+  ])("%s is payment_failed with no redirect", async (_case, res) => {
+    mockPayArtifact.mockResolvedValue(res);
+    await expect(pay()).resolves.toEqual({
+      kind: "error",
+      reason: "payment_failed",
+    });
+    expect(mockPayArtifact).toHaveBeenCalledTimes(1);
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+
+  it("a malformed piece id is payment_failed with no call", async () => {
+    await expect(pay("x")).resolves.toEqual({
+      kind: "error",
+      reason: "payment_failed",
+    });
+    expect(mockPayArtifact).not.toHaveBeenCalled();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+
+  it("a throw is payment_failed, logged by err.name only — never the URL or the piece id", async () => {
+    mockPayArtifact.mockRejectedValue(
+      new TypeError(`fetch failed ${CHECKOUT} ${PIECE}`),
+    );
+    await expect(pay()).resolves.toEqual({
+      kind: "error",
+      reason: "payment_failed",
+    });
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(errorSpy).toHaveBeenCalledWith(
+      "[account] payment failed errName=TypeError",
+    );
+    const logged = JSON.stringify(errorSpy.mock.calls);
+    expect(logged).not.toContain(CHECKOUT);
+    expect(logged).not.toContain(PIECE);
+  });
+});
+
+describe("PayForm (D19, AC-7)", () => {
+  it("renders one primary Pay now button with a 44px target and no input of any kind", () => {
+    const { container } = render(<PayForm pieceId={PIECE} labels={LABELS} />);
+    expect(screen.getAllByRole("button")).toHaveLength(1);
+    const button = screen.getByTestId("artifact-pay");
+    expect(button).toHaveTextContent("Pay now");
+    expect(button).toHaveClass("min-h-(--control-height-big)");
+    expect(container.querySelectorAll("input, select, textarea")).toHaveLength(
+      0,
+    );
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(screen.queryByRole("spinbutton")).toBeNull();
+    expect(container.textContent).not.toMatch(/card|expiry|cvc/i);
+  });
+
+  it("Pay now sends the piece to payForProposal; a failure shows the error line", async () => {
+    const paySpy = jest.spyOn(actions, "payForProposal");
+    mockPayArtifact.mockResolvedValue(refusal(502, "payment_unavailable"));
+    render(<PayForm pieceId={PIECE} labels={LABELS} />);
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("artifact-pay"));
+    });
+    expect(paySpy).toHaveBeenCalledTimes(1);
+    expect((paySpy.mock.calls[0]![1] as FormData).get("pieceId")).toBe(PIECE);
+    expect(mockPayArtifact).toHaveBeenCalledTimes(1);
+    expect(mockPayArtifact).toHaveBeenCalledWith(PIECE, INIT);
+    await waitFor(() =>
+      expect(screen.getByTestId("artifact-pay-error")).toHaveTextContent(
+        p.payError,
+      ),
+    );
+    expect(mockRedirect).not.toHaveBeenCalled();
+    paySpy.mockRestore();
+  });
+});

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

@@ -10,6 +10,12 @@
  *     the `FormData` each button sends: the verdict and the comment, a
  *     refusal that keeps the typed comment, and a sent review that refreshes
  *     the page once.
+ *   - a proposal (#8516, spec
+ *     docs/specs/8516-proposals-as-an-artifact-kind-spec.md D19, AC-3, AC-4):
+ *     Approve proposal posts exactly what Approve posts; an approval whose
+ *     answered artifact owes a payment opens it through `member.payArtifact`
+ *     and redirects only to a Stripe Checkout URL — any other outcome is
+ *     `payment_failed`, with no redirect, and the form then offers Pay now.
  */
 
 import {
@@ -21,10 +27,12 @@ import {
 } from "@testing-library/react";
 
 const mockReviewArtifact = jest.fn();
+const mockPayArtifact = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   member: {
     reviewArtifact: (...args: unknown[]) => mockReviewArtifact(...args),
+    payArtifact: (...args: unknown[]) => mockPayArtifact(...args),
   },
 }));
 
@@ -37,12 +45,19 @@ jest.mock("next/headers", () => ({
 }));
 
 const mockRefresh = jest.fn();
+// Next's `redirect()` throws NEXT_REDIRECT; the mock does too, so a catch
+// that swallowed it would show up as a resolved action.
+const mockRedirect = jest.fn((url: string): never => {
+  throw new Error(`NEXT_REDIRECT ${url}`);
+});
 jest.mock("next/navigation", () => ({
   __esModule: true,
   useRouter: () => ({ push: jest.fn(), refresh: mockRefresh }),
+  redirect: (url: string) => mockRedirect(url),
 }));
 
 import messages from "../../../../../../messages/en.json";
+import { type PayFormLabels } from "../[pieceId]/pay-form";
 import { ReviewForm, type ReviewFormLabels } from "../[pieceId]/review-form";
 import * as actions from "../artifact-actions";
 import { submitArtifactReview } from "../artifact-actions";
@@ -52,6 +67,7 @@ const INIT = {
   headers: { cookie: "session=abc", origin: "https://site.example.com" },
 };
 const COMMENT = "Tighten the logo";
+const CHECKOUT = "https://checkout.stripe.com/c/pay/cs_test_x";
 
 function form(fields: Record<string, string>): FormData {
   const data = new FormData();
@@ -88,6 +104,11 @@ beforeEach(() => {
   mockReviewArtifact
     .mockReset()
     .mockResolvedValue({ ok: true, body: { artifact: {} } });
+  mockPayArtifact.mockReset().mockResolvedValue({
+    ok: true,
+    body: { url: CHECKOUT },
+  });
+  mockRedirect.mockClear();
   mockRefresh.mockReset();
   errorSpy = jest.spyOn(console, "error").mockImplementation(() => undefined);
 });
@@ -198,7 +219,116 @@ describe("submitArtifactReview (D6, AC-5)", () => {
   });
 });
 
+/** The review's answer: the artifact as reviewed, with its payment state. */
+function answered(payment: unknown) {
+  return {
+    ok: true,
+    body: {
+      artifact: {
+        id: PIECE,
+        title: "Site redesign",
+        approvedAt: "2026-10-05T09:00:00.000Z",
+        kind: "proposal",
+        price: { amount: 120000, currency: "usd" },
+        payment,
+        versions: [],
+      },
+    },
+  };
+}
+
+describe("submitArtifactReview on a proposal (#8516 D19, AC-3, AC-4)", () => {
+  it("Approve proposal posts { version, review: approved } once through member.reviewArtifact, exactly as Approve does", async () => {
+    mockReviewArtifact.mockResolvedValue(answered(null));
+    await expect(review({})).resolves.toEqual({ kind: "reviewed" });
+    expect(mockReviewArtifact).toHaveBeenCalledTimes(1);
+    expect(mockReviewArtifact).toHaveBeenCalledWith(
+      PIECE,
+      { version: 3, review: "approved" },
+      INIT,
+    );
+    expect(mockPayArtifact).not.toHaveBeenCalled();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+
+  it("an approval whose answered artifact is due calls member.payArtifact once and redirects to the Checkout URL", async () => {
+    mockReviewArtifact.mockResolvedValue(answered({ status: "due" }));
+    await expect(review({})).rejects.toThrow("NEXT_REDIRECT");
+    expect(mockReviewArtifact).toHaveBeenCalledTimes(1);
+    expect(mockPayArtifact).toHaveBeenCalledTimes(1);
+    expect(mockPayArtifact).toHaveBeenCalledWith(PIECE, INIT);
+    expect(mockRedirect).toHaveBeenCalledTimes(1);
+    expect(mockRedirect).toHaveBeenCalledWith(CHECKOUT);
+  });
+
+  it.each([
+    ["a payArtifact refusal", refusal(409, "proposal_not_approved")],
+    ["a 404 (no payment surface)", refusal(404, "not_found")],
+    [
+      "a URL on another host",
+      { ok: true, body: { url: "https://evil.example/x" } },
+    ],
+    [
+      "a look-alike Stripe host",
+      { ok: true, body: { url: "https://checkout.stripe.com.evil.example/x" } },
+    ],
+    [
+      "a plain-http Checkout URL",
+      { ok: true, body: { url: "http://checkout.stripe.com/x" } },
+    ],
+  ])(
+    "%s after a due approval is payment_failed with no redirect",
+    async (_case, res) => {
+      mockReviewArtifact.mockResolvedValue(answered({ status: "due" }));
+      mockPayArtifact.mockResolvedValue(res);
+      await expect(review({})).resolves.toEqual({
+        kind: "error",
+        reason: "payment_failed",
+      });
+      expect(mockReviewArtifact).toHaveBeenCalledTimes(1);
+      expect(mockPayArtifact).toHaveBeenCalledTimes(1);
+      expect(mockRedirect).not.toHaveBeenCalled();
+    },
+  );
+
+  it("a payArtifact throw is payment_failed, logged by err.name only — never the URL", async () => {
+    mockReviewArtifact.mockResolvedValue(answered({ status: "due" }));
+    mockPayArtifact.mockRejectedValue(
+      new TypeError(`fetch failed ${CHECKOUT}`),
+    );
+    await expect(review({})).resolves.toEqual({
+      kind: "error",
+      reason: "payment_failed",
+    });
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(errorSpy).toHaveBeenCalledWith(
+      "[account] payment failed errName=TypeError",
+    );
+    expect(JSON.stringify(errorSpy.mock.calls)).not.toContain(CHECKOUT);
+  });
+
+  it.each([
+    ["paid", { status: "paid", paidAt: "2026-10-06T09:30:00.000Z" }],
+    ["no payment surface", null],
+  ])("an approval answered %s opens no payment", async (_case, payment) => {
+    mockReviewArtifact.mockResolvedValue(answered(payment));
+    await expect(review({})).resolves.toEqual({ kind: "reviewed" });
+    expect(mockPayArtifact).not.toHaveBeenCalled();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+
+  it("a changes-requested review never opens a payment", async () => {
+    mockReviewArtifact.mockResolvedValue(answered({ status: "due" }));
+    await expect(
+      review({ review: "changes-requested", comment: COMMENT }),
+    ).resolves.toEqual({ kind: "reviewed" });
+    expect(mockPayArtifact).not.toHaveBeenCalled();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+});
+
 const r = messages.account.artifacts.review;
+const p = messages.account.artifacts.proposal;
 const LABELS: ReviewFormLabels = {
   heading: r.heading.replace("{version}", "3"),
   comment: r.comment,
@@ -213,8 +343,14 @@ const LABELS: ReviewFormLabels = {
     not_latest: r.errors.notLatest,
     rate_limited: r.errors.rateLimited,
     failed: r.errors.failed,
+    payment_failed: p.payError,
   },
 };
+const PAY_LABELS: PayFormLabels = {
+  pay: p.pay,
+  paying: p.paying,
+  error: p.payError,
+};
 
 describe("ReviewForm (D7, AC-6)", () => {
   // A pass-through spy: the real action runs; the spy reads what it was sent.
@@ -286,3 +422,55 @@ describe("ReviewForm (D7, AC-6)", () => {
     );
   });
 });
+
+describe("ReviewForm on a proposal (#8516 D19, AC-3)", () => {
+  const PROPOSAL_LABELS: ReviewFormLabels = {
+    ...LABELS,
+    heading: p.heading.replace("{version}", "1"),
+    approve: p.approve,
+  };
+
+  it("labels the decision by prop: Your decision on version <n>, Approve proposal, Request changes", () => {
+    render(
+      <ReviewForm
+        pieceId={PIECE}
+        version={1}
+        labels={PROPOSAL_LABELS}
+        pay={PAY_LABELS}
+      />,
+    );
+    expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+      "Your decision on version 1",
+    );
+    expect(screen.getByTestId("artifact-review-approve")).toHaveTextContent(
+      "Approve proposal",
+    );
+    expect(
+      screen.getByTestId("artifact-review-request-changes"),
+    ).toHaveTextContent("Request changes");
+  });
+
+  it("an approval whose payment could not open shows the error and offers Pay now in the form's place", async () => {
+    mockReviewArtifact.mockResolvedValue(answered({ status: "due" }));
+    mockPayArtifact.mockResolvedValue(refusal(502, "payment_unavailable"));
+    render(
+      <ReviewForm
+        pieceId={PIECE}
+        version={3}
+        labels={PROPOSAL_LABELS}
+        pay={PAY_LABELS}
+      />,
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("artifact-review-approve"));
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("artifact-review-error")).toHaveTextContent(
+        p.payError,
+      ),
+    );
+    expect(screen.getByTestId("artifact-pay")).toHaveTextContent("Pay now");
+    expect(screen.queryByTestId("artifact-review-approve")).toBeNull();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+});