create-ailk 0.32.0 → 0.33.0

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/FlowStepperClient.invite.test.tsx

@@ -1,8 +1,10 @@
 // oss: false
 /**
- * #8771 AC-4 — the walk shows "Track this in your account" with the email the
- * visitor gave already filled in, and keeps that email out of every URL it
- * navigates to. FlowStepper is a stub that submits a configurable step and
+ * #10826 D6 (AC-2) — a walk that completes on a `user` magnet (`next` is
+ * `{ completion: "invite" }`) lands on sign-up at once, through the prefilled
+ * sign-in link (`window.location.assign`), and writes no `/thanks` hand-off.
+ * A `null` link ends the walk as before; a deliverable is never lost to the
+ * navigation. FlowStepper is a stub that submits a configurable step and
  * calls the real `onCompleted` it is given; the Server Actions are doubles.
  */
 import { render, screen, waitFor } from "@testing-library/react";
@@ -70,10 +72,18 @@ import { FlowStepperClient } from "../FlowStepperClient";
 const mockSubmit = submitFlowStepAction as jest.MockedFunction<typeof submitFlowStepAction>;
 const mockLink = accountInviteLinkAction as jest.MockedFunction<typeof accountInviteLinkAction>;
 
-const HREF = "/sign-in?next=%2Faccount&email=jane%40example.com";
+// jsdom cannot forge `location.assign`, but performs a fragment navigation
+// (the LeadCaptureForm suite's idiom), so the link the action answers is a
+// fragment here and the navigation is read back from `location.hash`.
+const HREF = "#sign-up";
 const EMAIL = "jane@example.com";
 
-function config(opts: { tagged: boolean; thankYou: boolean; secondEmail?: boolean }): FlowConfig {
+function config(opts: {
+  tagged: boolean;
+  thankYou: boolean;
+  secondEmail?: boolean;
+  deliverable?: boolean;
+}): FlowConfig {
   return {
     slug: "get-a-quote",
     defaultLocale: "en",
@@ -106,6 +116,9 @@ function config(opts: { tagged: boolean; thankYou: boolean; secondEmail?: boolea
     ...(opts.thankYou
       ? { thankYou: { default: "flow-thanks", bySegment: { qualified: "flow-thanks-qualified" } } }
       : {}),
+    ...(opts.deliverable
+      ? { deliverable: { kind: "page", gated: true, href: "/guide", title: { en: "Guide" } } }
+      : {}),
   } as FlowConfig;
 }
 
@@ -127,8 +140,11 @@ async function walk(cfg: FlowConfig): Promise<void> {
   await userEvent.click(screen.getByTestId("mock-submit"));
 }
 
+const navigated = () => window.location.hash;
+
 beforeEach(() => {
   mockPush.mockClear();
+  window.location.hash = "";
   mockSubmit.mockReset();
   mockLink.mockReset();
   mockLink.mockResolvedValue(HREF);
@@ -136,20 +152,27 @@ beforeEach(() => {
   window.sessionStorage.clear();
 });
 
-describe("the finished panel (no thankYou block)", () => {
-  it("shows the prefilled link inside a Replay-blocked element", async () => {
+describe("a user magnet lands on sign-up (#10826 D6)", () => {
+  it("navigates to the prefilled sign-in link and writes no ailk:account-invite key", async () => {
     mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
 
     await walk(config({ tagged: true, thankYou: false }));
 
-    const link = await screen.findByTestId("flow-account-invite");
-    expect(link).toHaveAttribute("href", HREF);
-    expect(link).toHaveTextContent("trackInAccount");
-    expect(link.closest("[data-sentry-block]")).not.toBeNull();
-    // Inside the finished card, not a sibling after the frame (#8771 design review).
-    expect(link.closest('[data-testid="mock-completed-card"]')).not.toBeNull();
+    await waitFor(() => expect(navigated()).toBe(HREF));
     expect(mockLink).toHaveBeenCalledTimes(1);
     expect(mockLink).toHaveBeenCalledWith(EMAIL);
+    expect(window.sessionStorage.getItem("ailk:account-invite")).toBeNull();
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("navigates instead of the /thanks redirect on a flow with a thankYou block", async () => {
+    mockSubmit.mockResolvedValue(ok({ segment: "qualified", next: { completion: "invite" } }));
+
+    await walk(config({ tagged: true, thankYou: true }));
+
+    await waitFor(() => expect(navigated()).toBe(HREF));
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(window.sessionStorage.length).toBe(0);
   });
 
   it("only an email-tagged field counts", async () => {
@@ -159,7 +182,7 @@ describe("the finished panel (no thankYou block)", () => {
 
     await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
     expect(mockLink).not.toHaveBeenCalled();
-    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+    expect(navigated()).toBe("");
   });
 
   it("uses the step's first tagged email field", async () => {
@@ -168,31 +191,53 @@ describe("the finished panel (no thankYou block)", () => {
 
     await walk(config({ tagged: true, thankYou: false, secondEmail: true }));
 
-    await screen.findByTestId("flow-account-invite");
+    await waitFor(() => expect(navigated()).toBe(HREF));
     expect(mockLink).toHaveBeenCalledWith("first@example.com");
   });
 
   it.each([
-    ["no next", { }],
+    ["no next", {}],
     ["a step that does not complete", { completed: false, next: { completion: "invite" } }],
-  ])("%s: no action call and no link", async (_name, response) => {
+  ])("%s: no action call and no navigation", async (_name, response) => {
     mockSubmit.mockResolvedValue(ok(response));
 
     await walk(config({ tagged: true, thankYou: false }));
 
     await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
     expect(mockLink).not.toHaveBeenCalled();
-    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+    expect(navigated()).toBe("");
   });
 
-  it("an action answer of null shows no link", async () => {
-    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+  it("a null link (no sign-in on this site) ends the walk as before", async () => {
+    mockSubmit.mockResolvedValue(ok({ segment: "qualified", next: { completion: "invite" } }));
     mockLink.mockResolvedValue(null);
 
-    await walk(config({ tagged: true, thankYou: false }));
+    await walk(config({ tagged: true, thankYou: true }));
 
-    await waitFor(() => expect(mockLink).toHaveBeenCalled());
-    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/en/thanks/flow-thanks-qualified"));
+    expect(navigated()).toBe("");
+  });
+
+  it("a rejected action ends the walk as before", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+    mockLink.mockRejectedValue(new Error("boom"));
+
+    await walk(config({ tagged: true, thankYou: true }));
+
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/en/thanks/flow-thanks"));
+    expect(navigated()).toBe("");
+  });
+
+  it("a walk with a deliverable never navigates (#8848 D8)", async () => {
+    mockSubmit.mockResolvedValue(
+      ok({ next: { completion: "invite" }, deliverable: { kind: "page", href: "/guide" } }),
+    );
+
+    await walk(config({ tagged: true, thankYou: false, deliverable: true }));
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
+    expect(mockLink).not.toHaveBeenCalled();
+    expect(navigated()).toBe("");
   });
 
   it("a conflict forgets the email: a later completing step with no email field asks for no link", async () => {
@@ -210,48 +255,17 @@ describe("the finished panel (no thankYou block)", () => {
 
     await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(3));
     expect(mockLink).not.toHaveBeenCalled();
+    expect(navigated()).toBe("");
   });
-});
 
-describe("the /thanks hand-off (a thankYou block)", () => {
-  it("writes one sessionStorage item and pushes a URL with no email in it", async () => {
-    mockSubmit.mockResolvedValue(ok({ segment: "qualified", next: { completion: "invite" } }));
+  it("a completion with no next pushes /thanks with no email in the URL", async () => {
+    mockSubmit.mockResolvedValue(ok({}));
 
     await walk(config({ tagged: true, thankYou: true }));
 
     await waitFor(() => expect(mockPush).toHaveBeenCalled());
-    expect(JSON.parse(window.sessionStorage.getItem("ailk:account-invite") ?? "null")).toEqual({
-      thanks: "flow-thanks-qualified",
-      href: HREF,
-    });
     const url = mockPush.mock.calls[0]?.[0] as string;
-    expect(url).toBe("/en/thanks/flow-thanks-qualified");
+    expect(url).toBe("/en/thanks/flow-thanks");
     expect(url).not.toContain("@");
-    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
-  });
-
-  it("clears an earlier walk's hand-off when this completion has no link", async () => {
-    window.sessionStorage.setItem(
-      "ailk:account-invite",
-      JSON.stringify({ thanks: "flow-thanks", href: HREF }),
-    );
-    mockSubmit.mockResolvedValue(ok({}));
-
-    await walk(config({ tagged: true, thankYou: true }));
-
-    await waitFor(() => expect(mockPush).toHaveBeenCalled());
-    expect(window.sessionStorage.getItem("ailk:account-invite")).toBeNull();
-  });
-
-  it("a sessionStorage that throws still navigates", async () => {
-    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
-    const spy = jest.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
-      throw new Error("denied");
-    });
-
-    await walk(config({ tagged: true, thankYou: true }));
-
-    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/en/thanks/flow-thanks"));
-    spy.mockRestore();
   });
 });

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/verify.test.tsx

@@ -0,0 +1,249 @@
+/**
+ * A magnet Lead's confirm page and action (#10826, spec
+ * docs/specs/10826-the-four-conversions-as-completion-spec.md D5; AC-2).
+ *
+ * The page: `?lead=L&verify=N` renders one confirm button and calls no API
+ * while it renders; `?confirmed=1` and `?error=…` render their cards.
+ * The action: every bound argument is re-checked before any API call; the
+ * limit and the bot check run first; the API's answer picks the redirect,
+ * which is always same-site and never carries the nonce.
+ */
+import { render, screen } from "@testing-library/react";
+
+import en from "../../../../../messages/en.json";
+
+const mockRedirect = jest.fn((url: string) => {
+  throw new Error(`REDIRECT ${url}`);
+});
+const mockNotFound = jest.fn(() => {
+  throw new Error("NOT_FOUND");
+});
+jest.mock("next/navigation", () => ({
+  redirect: (url: string) => mockRedirect(url),
+  notFound: () => mockNotFound(),
+}));
+
+const mockHeaders = jest.fn(
+  async () => new Headers({ "x-forwarded-for": "203.0.113.9" }),
+);
+jest.mock("next/headers", () => ({
+  headers: () => mockHeaders(),
+}));
+
+const mockRunBotCheck = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- BotID is an external service boundary; lib/bot-check.ts is its one wrapper.
+jest.mock("../../../../../lib/bot-check", () => ({
+  runBotCheck: (...args: unknown[]) => mockRunBotCheck(...args),
+}));
+
+const mockVerifyLead = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  flows: { verifyLead: (...args: unknown[]) => mockVerifyLead(...args) },
+}));
+
+import { __resetRateLimit } from "../../../../../src/lib/rate-limit";
+import FlowVerifyPage from "../verify/page";
+import { confirmLeadEmailAction } from "../verify.actions";
+
+const SLUG = "growth-check";
+const LEAD = "lead_01920000-1082-7000-8000-000000000001";
+const NONCE = "N".repeat(43);
+
+async function renderPage(
+  query: Record<string, string>,
+  slug = SLUG,
+): Promise<void> {
+  render(
+    await FlowVerifyPage({
+      params: Promise.resolve({ locale: "en", slug }),
+      searchParams: Promise.resolve(query),
+    }),
+  );
+}
+
+/** Run the action; answer the redirect URL, asserting it never carries the nonce. */
+async function redirectOf(
+  args: [slug?: string, leadId?: string, nonce?: string, locale?: string] = [],
+): Promise<string> {
+  const [slug = SLUG, leadId = LEAD, nonce = NONCE, locale = "en"] = args;
+  await expect(
+    confirmLeadEmailAction(slug, leadId, nonce, locale),
+  ).rejects.toThrow(/^REDIRECT /);
+  const url = mockRedirect.mock.calls.at(-1)![0];
+  if (nonce.length > 0) expect(url).not.toContain(nonce);
+  return url;
+}
+
+const answer = (body: Record<string, unknown>) =>
+  mockVerifyLead.mockResolvedValue({ ok: true, body });
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  __resetRateLimit();
+  mockRunBotCheck.mockResolvedValue("pass");
+  answer({ outcome: "verified", landing: null });
+});
+
+describe("the confirm page (#10826 D5)", () => {
+  it("renders one confirm button on ?lead=&verify= and calls no API while rendering", async () => {
+    await renderPage({ lead: LEAD, verify: NONCE });
+    expect(screen.getByTestId("flow-verify-confirm")).toBeInTheDocument();
+    expect(screen.getByTestId("flow-verify-confirm-button")).toHaveTextContent(
+      en.flowVerify.confirmButton,
+    );
+    expect(mockVerifyLead).not.toHaveBeenCalled();
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(document.body.innerHTML).not.toContain(NONCE);
+  });
+
+  it("renders the confirmed card on ?confirmed=1", async () => {
+    await renderPage({ confirmed: "1" });
+    expect(screen.getByTestId("flow-verify-confirmed")).toHaveTextContent(
+      en.flowVerify.confirmedHeading,
+    );
+  });
+
+  it.each([
+    ["?error=invalid", { error: "invalid" }],
+    ["no query", {}],
+    ["a lead id of the wrong shape", { lead: "x", verify: NONCE }],
+    ["a 257-character nonce", { lead: LEAD, verify: "N".repeat(257) }],
+  ])("renders the error card on %s", async (_label, query) => {
+    await renderPage(query);
+    expect(screen.getByTestId("flow-verify-error")).toHaveTextContent(
+      en.flowVerify.errorHeading,
+    );
+    expect(mockVerifyLead).not.toHaveBeenCalled();
+  });
+
+  it("verify wins over confirmed, and confirmed over error", async () => {
+    await renderPage({
+      lead: LEAD,
+      verify: NONCE,
+      confirmed: "1",
+      error: "invalid",
+    });
+    expect(screen.getByTestId("flow-verify-confirm")).toBeInTheDocument();
+  });
+
+  it("is a 404 for an unreadable slug", async () => {
+    await expect(
+      renderPage({ lead: LEAD, verify: NONCE }, "Bad_Slug"),
+    ).rejects.toThrow("NOT_FOUND");
+  });
+});
+
+describe("confirmLeadEmailAction (#10826 D5)", () => {
+  it("posts the bound Lead id and nonce, forwarding the visitor's address", async () => {
+    await redirectOf();
+    expect(mockVerifyLead).toHaveBeenCalledWith(
+      SLUG,
+      { leadId: LEAD, nonce: NONCE },
+      { headers: { "x-forwarded-for": "203.0.113.9" } },
+    );
+  });
+
+  it("redirects a verified lead-link confirm to its landing", async () => {
+    answer({ outcome: "verified", landing: "/pricing?plan=growth" });
+    expect(await redirectOf()).toBe("/pricing?plan=growth");
+  });
+
+  it("redirects to the confirmed card on already_verified with no landing", async () => {
+    answer({ outcome: "already_verified", landing: null });
+    expect(await redirectOf()).toBe(`/flows/${SLUG}/verify?confirmed=1`);
+  });
+
+  it("redirects a user magnet's verified Lead to the sign-up landing (accountInviteHref)", async () => {
+    answer({
+      outcome: "verified",
+      landing: null,
+      signUpEmail: "a+b@x.example",
+    });
+    expect(await redirectOf()).toBe(
+      "/sign-in?next=%2Faccount&email=a%2Bb%40x.example",
+    );
+  });
+
+  it.each([
+    "//evil.example",
+    "/\\evil.example",
+    "https://evil.example",
+    "/\t/evil.example",
+    "/\n/evil.example",
+    "/ok path",
+    "/ok\\..\\evil",
+  ])("never redirects to a landing of %s (SEC-10826-5)", async (landing) => {
+    answer({ outcome: "verified", landing });
+    expect(await redirectOf()).toBe(`/flows/${SLUG}/verify?confirmed=1`);
+  });
+
+  it.each([
+    ["expired", { ok: true, body: { outcome: "expired", landing: null } }],
+    ["invalid", { ok: true, body: { outcome: "invalid", landing: null } }],
+    ["a non-2xx", { ok: false, status: 503 }],
+  ])("redirects to the error card on %s", async (_label, res) => {
+    mockVerifyLead.mockResolvedValue(res);
+    expect(await redirectOf()).toBe(`/flows/${SLUG}/verify?error=invalid`);
+  });
+
+  it("redirects to the error card when the call throws", async () => {
+    mockVerifyLead.mockRejectedValue(new Error("boom"));
+    expect(await redirectOf()).toBe(`/flows/${SLUG}/verify?error=invalid`);
+  });
+
+  it.each(["bot", "unavailable"])(
+    "makes no API call when the bot check answers %s",
+    async (verdict) => {
+      mockRunBotCheck.mockResolvedValue(verdict);
+      expect(await redirectOf()).toBe(`/flows/${SLUG}/verify?error=invalid`);
+      expect(mockVerifyLead).not.toHaveBeenCalled();
+    },
+  );
+
+  it("makes no API call once the visitor's limit (5 per 10 minutes) is spent", async () => {
+    const vercel = process.env.VERCEL;
+    process.env.VERCEL = "1";
+    mockHeaders.mockImplementation(
+      async () => new Headers({ "x-vercel-forwarded-for": "203.0.113.9" }),
+    );
+    try {
+      for (let i = 0; i < 5; i++) await redirectOf();
+      mockVerifyLead.mockClear();
+      expect(await redirectOf()).toBe(`/flows/${SLUG}/verify?error=invalid`);
+      expect(mockVerifyLead).not.toHaveBeenCalled();
+    } finally {
+      if (vercel === undefined) delete process.env.VERCEL;
+      else process.env.VERCEL = vercel;
+      mockHeaders.mockImplementation(
+        async () => new Headers({ "x-forwarded-for": "203.0.113.9" }),
+      );
+    }
+  });
+
+  it.each([
+    ["a traversal slug", ["x/../../v1/other"], "/?error=invalid"],
+    [
+      "a locale that is not enabled",
+      [SLUG, LEAD, NONCE, "/evil.example"],
+      `/flows/${SLUG}/verify?error=invalid`,
+    ],
+    [
+      "a 257-character nonce",
+      [SLUG, LEAD, "N".repeat(257)],
+      `/flows/${SLUG}/verify?error=invalid`,
+    ],
+    ["an empty nonce", [SLUG, LEAD, ""], `/flows/${SLUG}/verify?error=invalid`],
+    [
+      "a Lead id of the wrong shape",
+      [SLUG, "lead_x"],
+      `/flows/${SLUG}/verify?error=invalid`,
+    ],
+  ] as const)(
+    "refuses %s with no API call (SEC-10826-6)",
+    async (_label, args, href) => {
+      expect(await redirectOf([...args])).toBe(href);
+      expect(mockVerifyLead).not.toHaveBeenCalled();
+      expect(mockRunBotCheck).not.toHaveBeenCalled();
+    },
+  );
+});