create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/flows/[slug]/results/[payload]/__tests__/ResultsClient.checkout.test.tsx

@@ -0,0 +1,457 @@
+/**
+ * Tests for the results page's purchase hand-off composition (#4842).
+ *
+ * AC-1 — no PII request leaves before the visitor chooses: with the actions
+ *   mocked and `globalThis.fetch` spied, rendering, opening "Why this?",
+ *   selecting Get Started (the email step + price card appear), and an
+ *   INVALID email submit all invoke nothing; only a valid email + Pay calls
+ *   `startCheckoutAction` — call counts asserted at each of the four points.
+ * AC-2 — Pay calls `startCheckoutAction(slug, input)` once with the answers,
+ *   email, locale, offerKey, the card's CURRENT seats / period / creditStop,
+ *   and the permalink `payload` the action builds the two return URLs from
+ *   (server-side, from the app's own origin — the #4875 security fix; the
+ *   URLs themselves are asserted in `checkout.actions.test.ts`) — no
+ *   `amount` / `total` / `unitAmount`.
+ * AC-3 — the configurable price card renders in the frame's SECOND slot
+ *   (`flow-frame-active` — DESIGN §7.6's flip: fields left, price card
+ *   right) at the D3 initial state showing `$249` (major units); stepping
+ *   seats to 2
+ *   re-renders `$498` with no request, and Pay then sends `seats: 2`; the
+ *   three frame regions are the SAME DOM nodes before and after the
+ *   transition; an offer with no seat-rate row — and every offer on a
+ *   register with no `rateTable.currency` — gets Book a Call, never Get
+ *   Started.
+ * AC-4 — "Email me this plan" + a valid email calls
+ *   `saveRecommendationAction` once, renders the saved micro-state, never
+ *   calls checkout, and leaves the safe-default side panel in place.
+ * AC-6 (the read half) — a `sessionStorage` entry rides as `sessionId` in
+ *   both bodies; absent, the key is omitted entirely.
+ *
+ * Mocks: `../../../checkout.actions` (both actions — the boundary under
+ * test is ResultsClient → the actions, covered on their own by
+ * `checkout.actions.test.ts`), `next-intl` (identity translator), and a
+ * `globalThis.fetch` spy. `@working-theory/api-client` is mocked exactly as
+ * `page.test.tsx` does so an accidental import can never reach the network.
+ */
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+const mockGet = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  flows: { get: (...args: unknown[]) => mockGet(...args) },
+}));
+
+const mockStart = jest.fn();
+const mockSave = jest.fn();
+// The boundary under test is ResultsClient's own wiring to its two Server
+// Actions, not the actions themselves (checkout.actions.test.ts) — the same
+// narrow-scope justification FlowStepperClient.permalink.test.tsx carries.
+// eslint-disable-next-line no-restricted-syntax -- see comment above
+jest.mock("../../../checkout.actions", () => ({
+  startCheckoutAction: (...args: unknown[]) => mockStart(...args),
+  saveRecommendationAction: (...args: unknown[]) => mockSave(...args),
+}));
+
+jest.mock("next-intl", () => ({
+  __esModule: true,
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+import { ResultsClient } from "../ResultsClient";
+
+const SLUG = "ailk-recommender";
+const PAYLOAD = "v1-abc123";
+const ANSWERS = { team_size: "agency", wants_seo: "yes" };
+const STORAGE_KEY = `ailk:flow-session:${SLUG}`;
+
+function fixtureConfig(overrides: Partial<FlowConfig> = {}): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: [
+      {
+        key: "team",
+        type: "segmentation",
+        copy: { title: { en: "Team" } },
+        questions: [
+          {
+            name: "team_size",
+            options: [
+              { value: "solo", label: { en: "Solo" } },
+              { value: "agency", label: { en: "Agency" } },
+            ],
+          },
+          {
+            name: "wants_seo",
+            options: [
+              { value: "yes", label: { en: "Yes" } },
+              { value: "no", label: { en: "No" } },
+            ],
+          },
+        ],
+      },
+    ],
+    offers: [
+      {
+        key: "pro",
+        copy: { name: { en: "Pro" }, description: { en: "For teams." } },
+        price: { kind: "exact", amount: 249, period: "annual" },
+        rules: [
+          { when: { answer: "team_size", eq: "agency" }, reason: { en: "You run an agency." } },
+        ],
+      },
+      {
+        key: "consult",
+        copy: { name: { en: "Consulting" } },
+        price: { kind: "label", label: { en: "Application-based" } },
+        rules: [
+          { when: { answer: "wants_seo", eq: "yes" }, reason: { en: "You want organic reach." } },
+        ],
+      },
+      {
+        key: "free",
+        copy: { name: { en: "Free" } },
+        price: { kind: "label", label: { en: "Free" } },
+        rules: [{ when: { answer: "team_size", eq: "solo" }, reason: { en: "Solo." } }],
+      },
+    ],
+    pairings: [
+      {
+        offers: ["pro", "consult"],
+        reason: { en: "Pro plus a consult covers both." },
+        when: { answer: "wants_seo", eq: "yes" },
+      },
+    ],
+    rateTable: {
+      currency: "usd",
+      seatRates: [
+        { offer: "pro", amount: 249, period: "annual" },
+        { offer: "pro", amount: 25, period: "monthly" },
+      ],
+      creditLadder: {
+        denomination: "annual",
+        tiers: [
+          { credits: 10, amount: 99 },
+          { credits: 50, amount: 399 },
+        ],
+        custom: { en: "Contact us" },
+      },
+    },
+    recommendation: { key: "recommendation", copy: { title: { en: "Your recommendation" } } },
+    ...overrides,
+  } as FlowConfig;
+}
+
+function renderResults(
+  config: FlowConfig = fixtureConfig(),
+  extra: { returnState?: "success" | "cancelled" } = {},
+): ReactElement {
+  const element = (
+    <ResultsClient
+      config={config}
+      locale="en"
+      answers={ANSWERS}
+      slug={SLUG}
+      payload={PAYLOAD}
+      {...extra}
+    />
+  );
+  render(element);
+  return element;
+}
+
+const fetchSpy = jest.fn();
+
+function expectNothingSent(): void {
+  expect(mockStart).not.toHaveBeenCalled();
+  expect(mockSave).not.toHaveBeenCalled();
+  expect(fetchSpy).not.toHaveBeenCalled();
+  expect(mockGet).not.toHaveBeenCalled();
+}
+
+const EXPECTED_INITIAL_BODY = {
+  answers: ANSWERS,
+  email: "jane@example.com",
+  locale: "en",
+  offerKey: "pro",
+  seats: 1,
+  period: "annual",
+  creditStop: { kind: "none" },
+  payload: PAYLOAD,
+};
+
+/**
+ * What a redirecting Server Action's `await` surfaces to the client on the
+ * SUCCESS path — Next's `NEXT_REDIRECT` control-flow error, recognised by its
+ * digest (`redirect-error.js`: `NEXT_REDIRECT;<push|replace>;<url>;<status>;`).
+ */
+function nextRedirectError(url: string): Error {
+  const err = new Error("NEXT_REDIRECT");
+  (err as Error & { digest: string }).digest = `NEXT_REDIRECT;push;${url};307;`;
+  return err;
+}
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, "fetch", {
+    value: fetchSpy,
+    configurable: true,
+    writable: true,
+  });
+});
+
+beforeEach(() => {
+  mockGet.mockReset();
+  mockStart.mockReset();
+  mockSave.mockReset();
+  fetchSpy.mockReset();
+  window.sessionStorage.clear();
+  // A redirecting action never resolves with a value on success (Next
+  // navigates) — the default mock mirrors that: it resolves `undefined`.
+  mockStart.mockResolvedValue(undefined);
+  mockSave.mockResolvedValue({ ok: true, leadId: "lead_1" });
+});
+
+async function submitEmail(
+  user: ReturnType<typeof userEvent.setup>,
+  email: string,
+  via: "enter" | "pay" | "save" = "enter",
+): Promise<void> {
+  const input = screen.getByLabelText(
+    via === "save" ? "emailStepSaveTitle" : "emailStepTitle",
+  );
+  await user.clear(input);
+  await user.type(input, email);
+  if (via === "enter") {
+    await user.keyboard("{Enter}");
+  } else {
+    await user.click(
+      screen.getByTestId(via === "pay" ? "flow-results-pay" : "flow-results-save"),
+    );
+  }
+}
+
+describe("AC-1 — no PII request leaves before the visitor chooses", () => {
+  it("invokes neither action nor fetch until a valid email + Pay", async () => {
+    const user = userEvent.setup();
+    renderResults();
+
+    // Point 1 — the cold render.
+    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
+    expectNothingSent();
+
+    // Point 2 — opening a "Why this?" disclosure.
+    await user.click(screen.getByTestId("recommendation-card-pro-why-trigger"));
+    expect(screen.getByText("You run an agency.")).toBeInTheDocument();
+    expectNothingSent();
+
+    // Point 3 — Get Started: the email step + the price card appear.
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    expect(screen.getByTestId("results-email-step")).toBeInTheDocument();
+    expect(screen.getByTestId("checkout-price-card")).toBeInTheDocument();
+    expectNothingSent();
+
+    // Point 4 — an invalid email shows the validation message, sends nothing.
+    await submitEmail(user, "not-an-email");
+    expect(screen.getByRole("alert")).toHaveTextContent("validationInvalidEmail");
+    expectNothingSent();
+
+    // Only a valid email + Pay (Enter submits — #4806 FR4) calls the action.
+    await submitEmail(user, "jane@example.com");
+    expect(mockStart).toHaveBeenCalledTimes(1);
+    expect(mockSave).not.toHaveBeenCalled();
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe("AC-2 — Pay calls checkout once, with no amount", () => {
+  it("sends exactly the answers, email, locale, offerKey, the card's state and the permalink payload", async () => {
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    await submitEmail(user, "jane@example.com", "pay");
+
+    expect(mockStart).toHaveBeenCalledTimes(1);
+    expect(mockStart).toHaveBeenCalledWith(SLUG, EXPECTED_INITIAL_BODY);
+    const body = mockStart.mock.calls[0]?.[1] as Record<string, unknown>;
+    expect(body).toEqual(EXPECTED_INITIAL_BODY);
+    for (const key of ["amount", "total", "unitAmount", "successUrl", "cancelUrl"]) {
+      expect(Object.keys(body)).not.toContain(key);
+    }
+    expect(body).not.toHaveProperty("sessionId");
+  });
+
+  it("never converts a NEXT_REDIRECT (the success path) into the error micro-state — Pay + Back stay pending", async () => {
+    const redirectErr = nextRedirectError("https://checkout.stripe.com/c/pay/cs_test_123");
+    mockStart.mockImplementation(() => {
+      throw redirectErr;
+    });
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    await submitEmail(user, "jane@example.com", "pay");
+    // Let the settled handler flush.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(mockStart).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(screen.getByTestId("flow-results-pay")).toBeDisabled();
+    expect(screen.getByRole("button", { name: "back" })).toBeDisabled();
+  });
+
+  it("a NON-redirect throw from the action IS the error micro-state", async () => {
+    mockStart.mockImplementation(() => {
+      throw new TypeError("fetch failed");
+    });
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    await submitEmail(user, "jane@example.com", "pay");
+    expect(await screen.findByRole("alert")).toHaveTextContent("checkoutError");
+    expect(screen.getByTestId("flow-results-pay")).not.toBeDisabled();
+  });
+
+  it("renders the checkout error and re-enables Pay when the action returns a failure", async () => {
+    mockStart.mockResolvedValue({ ok: false, kind: "not_configured" });
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    await submitEmail(user, "jane@example.com", "pay");
+    expect(await screen.findByRole("alert")).toHaveTextContent("checkoutError");
+    expect(screen.getByTestId("flow-results-pay")).not.toBeDisabled();
+  });
+});
+
+describe("AC-3 — the configurable price card mirrors price() in major units; unquotable offers get Book a Call", () => {
+  it("shows $249 at the D3 initial state, $498 after one seat step with no request, and Pay sends seats: 2", async () => {
+    const user = userEvent.setup();
+    renderResults();
+
+    const side = screen.getByTestId("flow-frame-side");
+    const activeRegion = screen.getByTestId("flow-frame-active");
+    const bar = screen.getByTestId("flow-frame-bar");
+    expect(within(side).getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
+
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+
+    // The same three DOM nodes — the frame is never remounted (#4806 FR7).
+    expect(screen.getByTestId("flow-frame-side")).toBe(side);
+    expect(screen.getByTestId("flow-frame-active")).toBe(activeRegion);
+    expect(screen.getByTestId("flow-frame-bar")).toBe(bar);
+
+    // DESIGN §7.6 — the flip: the email step takes the FIRST slot (left at
+    // md+, first in the mobile stack); the price card takes the SECOND.
+    expect(within(side).getByTestId("results-email-step")).toBeInTheDocument();
+    expect(within(side).queryByTestId("flow-side-panel-safe-default")).not.toBeInTheDocument();
+    const card = within(activeRegion).getByTestId("checkout-price-card");
+    expect(within(card).getByTestId("checkout-price-card-offer-name")).toHaveTextContent("Pro");
+    expect(within(card).getByTestId("checkout-price-card-total")).toHaveTextContent("$249");
+    expect(within(card).queryByText("$2.49")).not.toBeInTheDocument();
+    expect(within(bar).getByTestId("flow-results-pay")).toBeInTheDocument();
+
+    await user.click(within(card).getByTestId("checkout-price-card-seats-increment"));
+    expect(within(card).getByTestId("checkout-price-card-total")).toHaveTextContent("$498");
+    expectNothingSent();
+
+    await submitEmail(user, "jane@example.com", "pay");
+    expect(mockStart).toHaveBeenCalledTimes(1);
+    expect(mockStart.mock.calls[0]?.[1]).toEqual({
+      ...EXPECTED_INITIAL_BODY,
+      seats: 2,
+      period: "annual",
+      creditStop: { kind: "none" },
+    });
+  });
+
+  it("Back returns to the results view with the recommendation intact and nothing sent", async () => {
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    await user.click(screen.getByRole("button", { name: "back" }));
+    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
+    expect(screen.getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
+    expect(screen.queryByTestId("checkout-price-card")).not.toBeInTheDocument();
+    expectNothingSent();
+  });
+
+  it("an offer with no seat-rate row renders Book a Call, never Get Started", () => {
+    renderResults();
+    expect(screen.getByTestId("recommendation-card-consult-terminal-bookCall")).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("recommendation-card-consult-terminal-getStarted"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("recommendation-card-pro-terminal-getStarted")).toBeInTheDocument();
+    expect(screen.getByTestId("recommendation-pairing")).toBeInTheDocument();
+  });
+
+  it("every offer on a register with no rateTable.currency renders Book a Call", () => {
+    const config = fixtureConfig();
+    const { currency: _currency, ...rateTable } = config.rateTable!;
+    renderResults({ ...config, rateTable });
+    expect(screen.getByTestId("recommendation-card-pro-terminal-bookCall")).toBeInTheDocument();
+    expect(screen.getByTestId("recommendation-card-consult-terminal-bookCall")).toBeInTheDocument();
+    expect(screen.queryAllByTestId(/-terminal-getStarted$/)).toHaveLength(0);
+  });
+});
+
+describe("AC-4 — Email me this plan", () => {
+  it("calls saveRecommendationAction once, renders the saved state, never calls checkout, keeps the safe-default panel", async () => {
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByRole("button", { name: "emailMePlan" }));
+    expect(screen.getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
+    expect(screen.queryByTestId("checkout-price-card")).not.toBeInTheDocument();
+    expectNothingSent();
+
+    await submitEmail(user, "jane@example.com", "save");
+
+    expect(mockSave).toHaveBeenCalledTimes(1);
+    expect(mockSave).toHaveBeenCalledWith(SLUG, {
+      answers: ANSWERS,
+      email: "jane@example.com",
+      locale: "en",
+    });
+    expect(await screen.findByTestId("results-email-step-saved")).toBeInTheDocument();
+    expect(mockStart).not.toHaveBeenCalled();
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(screen.getByTestId("flow-side-panel-safe-default")).toBeInTheDocument();
+    expect(screen.queryByTestId("checkout-price-card")).not.toBeInTheDocument();
+  });
+});
+
+describe("AC-6 (read half) — session resume is forwarded, never fabricated", () => {
+  it("forwards a stored session id in both bodies", async () => {
+    window.sessionStorage.setItem(STORAGE_KEY, "fs_walk_1");
+    const user = userEvent.setup();
+    renderResults();
+
+    await user.click(screen.getByRole("button", { name: "emailMePlan" }));
+    await submitEmail(user, "jane@example.com", "save");
+    expect(mockSave.mock.calls[0]?.[1]).toMatchObject({ sessionId: "fs_walk_1" });
+
+    await user.click(screen.getByRole("button", { name: "back" }));
+    await user.click(screen.getByTestId("recommendation-card-pro-terminal-getStarted"));
+    await submitEmail(user, "jane@example.com", "pay");
+    expect(mockStart.mock.calls[0]?.[1]).toMatchObject({ sessionId: "fs_walk_1" });
+  });
+
+  it("omits the key entirely when no entry exists", async () => {
+    const user = userEvent.setup();
+    renderResults();
+    await user.click(screen.getByRole("button", { name: "emailMePlan" }));
+    await submitEmail(user, "jane@example.com", "save");
+    expect(mockSave.mock.calls[0]?.[1]).not.toHaveProperty("sessionId");
+  });
+});
+
+describe("D6 — the return micro-state renders over the same recommendation", () => {
+  it("renders the status line for success and nothing for an unrecognised value", () => {
+    renderResults(fixtureConfig(), { returnState: "success" });
+    expect(screen.getByTestId("flow-results-return-state")).toHaveTextContent("checkoutSuccess");
+    expect(screen.getByTestId("recommendation-card-pro")).toBeInTheDocument();
+  });
+});