create-ailk 0.21.0 → 0.23.0

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

@@ -0,0 +1,200 @@
+// oss: false
+/**
+ * #8848 D8, AC-5 — the ending delivers the deliverable by kind. FlowStepper
+ * is the ending suite's stub: it submits the configured steps through the
+ * real `onSubmitStep` and renders the `completedContent` it is given.
+ */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import type { ReactElement, ReactNode } from "react";
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: (namespace?: string) => (key: string) => (namespace ? `${namespace}.${key}` : key),
+  useMessages: () => ({}),
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- the boundary under test is the client wiring, not the actions
+jest.mock("../flow.actions", () => ({ submitFlowStepAction: jest.fn() }));
+// eslint-disable-next-line no-restricted-syntax -- see above
+jest.mock("../account-invite.actions", () => ({ accountInviteLinkAction: jest.fn() }));
+
+interface StubProps {
+  onSubmitStep: (payload: { stepKey: string; values: Record<string, unknown> }) => Promise<unknown>;
+  completedContent?: ReactNode;
+}
+
+jest.mock("@working-theory/ui-signal-collectors", () => ({
+  FlowStepper: (props: StubProps) => {
+    const react = require("react");
+    return react.createElement(
+      "div",
+      { "data-testid": "mock-card" },
+      react.createElement(
+        "button",
+        {
+          "data-testid": "mock-submit",
+          onClick: () => props.onSubmitStep({ stepKey: "contact", values: { email: "ana@example.com" } }),
+        },
+        "Submit",
+      ),
+      props.completedContent,
+    ) as ReactElement;
+  },
+}));
+
+import { submitFlowStepAction } from "../flow.actions";
+import { FlowStepperClient } from "../FlowStepperClient";
+
+const mockSubmit = submitFlowStepAction as jest.MockedFunction<typeof submitFlowStepAction>;
+const en = (s: string) => ({ en: s });
+
+/**
+ * A served config (#8848 D2): a gated block's target is projected out, which
+ * `FlowConfig` (the type `flows.get` answers with) cannot express — the one
+ * cast lives here.
+ */
+function config(extra: Record<string, unknown> = {}): FlowConfig {
+  const served = {
+    slug: "q3",
+    defaultLocale: "en",
+    steps: [
+      {
+        key: "contact",
+        type: "field",
+        copy: { title: en("Get the report") },
+        fields: [{ name: "email", inputType: "email", required: true, mapsTo: "email", copy: { label: en("Email") } }],
+      },
+    ],
+    deliverable: {
+      kind: "file",
+      gated: true,
+      title: en("Q3 report"),
+      cta: en("Read the report"),
+      geometry: "letter",
+      pages: 3,
+    },
+    deliverables: { assets: [{ assetKey: "q3.pdf" }], copy: { subject: en("s"), body: en("b") } },
+    ...extra,
+  };
+  // eslint-disable-next-line no-restricted-syntax -- a served gated block omits its target, which FlowConfig cannot express (see above)
+  return served as unknown as FlowConfig;
+}
+
+function respondWith(deliverable?: unknown): void {
+  mockSubmit.mockResolvedValue({
+    ok: true,
+    response: {
+      sessionId: "s1",
+      landed: "contact",
+      nextStepKey: null,
+      completed: true,
+      ...(deliverable !== undefined ? { deliverable } : {}),
+    },
+  } as Awaited<ReturnType<typeof submitFlowStepAction>>);
+}
+
+async function walk(cfg: FlowConfig, locale = "en"): Promise<void> {
+  render(<FlowStepperClient config={cfg} locale={locale} slug="q3" />);
+  await userEvent.setup().click(screen.getByTestId("mock-submit"));
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe("the ending delivers the deliverable (#8848 D8, AC-5)", () => {
+  it("a file response links the reader with its grant, labelled the block's cta", async () => {
+    respondWith({ kind: "file", grantId: "dgrant_x" });
+    await walk(config());
+
+    const action = await screen.findByTestId("flow-deliverable-action");
+    // `localeHref`: the default locale is unprefixed (`localePrefix: "as-needed"`).
+    expect(action.getAttribute("href")).toBe("/reports/q3?g=dgrant_x");
+    expect(action.textContent).toBe("Read the report");
+    expect(action.closest("[data-sentry-block]")).not.toBeNull();
+  });
+
+  it("prefixes another locale's reader link", async () => {
+    respondWith({ kind: "file", grantId: "dgrant_x" });
+    await walk(config(), "fr");
+
+    expect((await screen.findByTestId("flow-deliverable-action")).getAttribute("href")).toBe(
+      "/fr/reports/q3?g=dgrant_x",
+    );
+  });
+
+  it("a redirect ending never navigates away from the deliverable", async () => {
+    respondWith({ kind: "file", grantId: "dgrant_x" });
+    await walk(config({ ending: { default: { kind: "redirect", href: "/pricing" } } }));
+
+    expect(await screen.findByTestId("flow-deliverable-action")).toBeTruthy();
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it("a screen ending renders first, then the action", async () => {
+    respondWith({ kind: "file", grantId: "dgrant_x" });
+    await walk(config({ ending: { default: { kind: "screen", headline: en("Done") } } }));
+
+    const ending = await screen.findByTestId("flow-ending");
+    const action = screen.getByTestId("flow-deliverable-action");
+    expect(ending.compareDocumentPosition(action) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("a file walk with no deliverable in the response shows the by-email line and no link", async () => {
+    respondWith();
+    await walk(config());
+
+    expect(await screen.findByText("reports.fileByEmail")).toBeTruthy();
+    expect(screen.queryByTestId("flow-deliverable-action")).toBeNull();
+  });
+
+  it("a video response embeds the player", async () => {
+    respondWith({ kind: "video", src: "https://cdn.example/v.mp4" });
+    await walk(config({ deliverable: { kind: "video", gated: true, title: en("Talk") }, deliverables: undefined }));
+
+    const box = await screen.findByTestId("flow-deliverable-video");
+    await userEvent.setup().click(screen.getByTestId("video-embed-play-button"));
+    expect(box.querySelector("video source")?.getAttribute("src")).toBe("https://cdn.example/v.mp4");
+  });
+
+  it("a page response links the site page", async () => {
+    respondWith({ kind: "page", href: "/calc" });
+    await walk(config({ deliverable: { kind: "page", gated: true, title: en("Calc") }, deliverables: undefined }));
+
+    expect((await screen.findByTestId("flow-deliverable-action")).getAttribute("href")).toBe("/calc");
+  });
+
+  it.each([
+    { kind: "page", href: "//evil.example" },
+    { kind: "external", href: "javascript:alert(1)" },
+    { kind: "video", src: "http://cdn.example/v.mp4" },
+  ])("renders no link and no video for an unsafe target: %j", async (deliverable) => {
+    respondWith(deliverable);
+    await walk(
+      config({
+        deliverable: { kind: deliverable.kind, gated: true, title: en("X") },
+        deliverables: undefined,
+      }),
+    );
+
+    await screen.findByTestId("mock-card");
+    expect(screen.queryByTestId("flow-deliverable-action")).toBeNull();
+    expect(screen.queryByTestId("flow-deliverable-video")).toBeNull();
+    expect(document.querySelector("video")).toBeNull();
+  });
+
+  it("a config with no deliverable and no response key renders today's card", async () => {
+    respondWith();
+    await walk(config({ deliverable: undefined, deliverables: undefined }));
+
+    await screen.findByTestId("mock-card");
+    expect(screen.queryByTestId("flow-deliverable-action")).toBeNull();
+    expect(screen.queryByText("reports.fileByEmail")).toBeNull();
+  });
+});

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

@@ -0,0 +1,197 @@
+// oss: false
+/**
+ * #8840 D9, AC-3 — FlowStepperClient's standard-magnet wiring: the locale's
+ * policy links, the input-step count, and the flow's own ending (a screen in
+ * the finished card or a redirect to a site path, never `thankYou` once an
+ * ending exists). FlowStepper is a stub that records its props, submits the
+ * configured steps through the real `onSubmitStep`, and renders the
+ * `completedContent` it is given — as the invite test's stub does.
+ */
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import type { ReactElement, ReactNode } from "react";
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- the boundary under test is the client wiring, not the actions
+jest.mock("../flow.actions", () => ({ submitFlowStepAction: jest.fn() }));
+// eslint-disable-next-line no-restricted-syntax -- see above
+jest.mock("../account-invite.actions", () => ({ accountInviteLinkAction: jest.fn() }));
+
+type Step = { stepKey: string; values: Record<string, unknown> };
+let steps: Step[] = [];
+
+interface StubProps {
+  onSubmitStep: (payload: Step) => Promise<{ ok: boolean; response?: { completed: boolean } }>;
+  onCompleted?: unknown;
+  uncountedStepKeys?: readonly string[];
+  consentConfig?: { policies: Record<string, string> };
+  completedContent?: ReactNode;
+  hiddenValues?: Record<string, string>;
+  header?: ReactNode;
+}
+let lastProps: StubProps | undefined;
+
+jest.mock("@working-theory/ui-signal-collectors", () => ({
+  FlowStepper: (props: StubProps) => {
+    lastProps = props;
+    async function handleSubmit(): Promise<void> {
+      for (const step of steps) await props.onSubmitStep(step);
+    }
+    const react = require("react");
+    return react.createElement(
+      "div",
+      { "data-testid": "mock-card" },
+      react.createElement("button", { "data-testid": "mock-submit", onClick: handleSubmit }, "Submit"),
+      props.completedContent,
+    ) as ReactElement;
+  },
+}));
+
+import { submitFlowStepAction } from "../flow.actions";
+import { FlowStepperClient } from "../FlowStepperClient";
+
+const mockSubmit = submitFlowStepAction as jest.MockedFunction<typeof submitFlowStepAction>;
+const en = (s: string) => ({ en: s });
+
+function baseConfig(extra: Partial<FlowConfig> = {}): FlowConfig {
+  return {
+    slug: "growth",
+    defaultLocale: "en",
+    steps: [
+      {
+        key: "about",
+        type: "field",
+        copy: { title: en("About you") },
+        fields: [
+          { name: "first_name", inputType: "text", mapsTo: "givenName", copy: { label: en("First name") } },
+          { name: "email", inputType: "email", required: true, mapsTo: "email", copy: { label: en("Email") } },
+        ],
+      },
+      {
+        key: "pace",
+        type: "segmentation",
+        copy: { title: en("Pace?") },
+        questions: [{ name: "pace", options: [{ value: "fast", label: en("Fast") }, { value: "slow", label: en("Slow") }] }],
+      },
+      { key: "thanks", type: "message", copy: { title: en("Thanks") } },
+    ],
+    ...extra,
+  } as FlowConfig;
+}
+
+function completeOn(lastKey: string): void {
+  mockSubmit.mockImplementation(async (_slug, payload) => ({
+    ok: true,
+    response: {
+      sessionId: "s1",
+      landed: payload.stepKey,
+      nextStepKey: null,
+      completed: payload.stepKey === lastKey,
+    },
+  }));
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  lastProps = undefined;
+  steps = [
+    { stepKey: "about", values: { first_name: "Ana", email: "ana@example.com" } },
+    { stepKey: "pace", values: { pace: "fast" } },
+  ];
+  completeOn("pace");
+});
+
+async function walk(config: FlowConfig, locale = "en"): Promise<void> {
+  render(<FlowStepperClient config={config} locale={locale} slug={config.slug} />);
+  await userEvent.setup().click(screen.getByTestId("mock-submit"));
+}
+
+describe("the count and the registry (#8840 D9)", () => {
+  it("passes every message step's key as uncounted", () => {
+    render(<FlowStepperClient config={baseConfig()} locale="en" slug="growth" />);
+    expect(lastProps?.uncountedStepKeys).toEqual(["thanks"]);
+  });
+
+  it("localizes the policy links", () => {
+    render(<FlowStepperClient config={baseConfig()} locale="fr" slug="growth" />);
+    expect(lastProps?.consentConfig?.policies["terms"]).toBe("/fr/terms");
+    expect(lastProps?.consentConfig?.policies["privacy"]).toBe("/fr/privacy");
+  });
+
+  it("passes hiddenValues and header through", () => {
+    render(
+      <FlowStepperClient
+        config={baseConfig()}
+        locale="en"
+        slug="growth"
+        hiddenValues={{ job: "writer" }}
+        header={<span>Back</span>}
+      />,
+    );
+    expect(lastProps?.hiddenValues).toEqual({ job: "writer" });
+    expect(lastProps?.header).toBeDefined();
+  });
+});
+
+describe("the ending wins (#8840 D9)", () => {
+  const screenEnding = {
+    default: {
+      kind: "screen" as const,
+      headline: en("Thanks, {name}."),
+      body: en("We'll be in touch."),
+      ctas: [
+        { label: en("Book a call"), href: "/meet/intro" },
+        // Injected past the schema: the client re-checks every destination.
+        { label: en("Elsewhere"), href: "//evil.example" },
+      ],
+    },
+  };
+
+  it("with an ending and a thankYou, passes no onCompleted", () => {
+    render(
+      <FlowStepperClient
+        config={baseConfig({ ending: screenEnding, thankYou: { default: "thanks" } })}
+        locale="en"
+        slug="growth"
+      />,
+    );
+    expect(lastProps?.onCompleted).toBeUndefined();
+  });
+
+  it("a completing response renders the filled headline and the localized on-site CTA only", async () => {
+    await walk(baseConfig({ ending: screenEnding, thankYou: { default: "thanks" } }), "fr");
+    await screen.findByTestId("flow-ending");
+    expect(screen.getByRole("heading", { level: 2 }).textContent).toBe("Thanks, Ana.");
+    const links = screen.getAllByTestId("flow-ending-cta");
+    expect(links.map((a) => a.getAttribute("href"))).toEqual(["/fr/meet/intro"]);
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it("a redirect ending pushes the locale-prefixed site path", async () => {
+    await walk(baseConfig({ ending: { default: { kind: "redirect", href: "/pricing?plan=pro" } } }));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/en/pricing?plan=pro"));
+  });
+
+  it("a redirect href injected past the schema is never pushed", async () => {
+    await walk(baseConfig({ ending: { default: { kind: "redirect", href: "//evil.example" } } }));
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(2));
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("flow-ending")).toBeNull();
+  });
+
+  it("with no ending, nothing new renders and thankYou still navigates", async () => {
+    await walk(baseConfig({ thankYou: { default: "thanks" } }));
+    expect(lastProps?.completedContent).toBeUndefined();
+    expect(typeof lastProps?.onCompleted).toBe("function");
+  });
+});

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

@@ -0,0 +1,257 @@
+// 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
+ * calls the real `onCompleted` it is given; the Server Actions are doubles.
+ */
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- the boundary under test is the client wiring, not the actions
+jest.mock("../flow.actions", () => ({ submitFlowStepAction: jest.fn() }));
+// eslint-disable-next-line no-restricted-syntax -- see above
+jest.mock("../account-invite.actions", () => ({ accountInviteLinkAction: jest.fn() }));
+
+type Step = { stepKey: string; values: Record<string, unknown> };
+let steps: Step[] = [];
+
+interface StubProps {
+  onSubmitStep: (payload: Step & { locale?: string }) => Promise<{
+    ok: boolean;
+    response?: { completed: boolean; segment?: string };
+  }>;
+  onCompleted?: (result: { segment?: string }) => void;
+  completedAction?: ReactElement;
+}
+
+jest.mock("@working-theory/ui-signal-collectors", () => ({
+  FlowStepper: (props: StubProps) => {
+    async function handleSubmit(): Promise<void> {
+      for (const step of steps) {
+        const result = await props.onSubmitStep({ ...step, locale: "en" });
+        if (result.ok && result.response?.completed) {
+          props.onCompleted?.(
+            result.response.segment !== undefined ? { segment: result.response.segment } : {},
+          );
+        }
+      }
+    }
+    // The real FlowStepper renders `completedAction` inside its finished card.
+    return require("react").createElement(
+      "div",
+      { "data-testid": "mock-completed-card" },
+      require("react").createElement(
+        "button",
+        { "data-testid": "mock-submit", onClick: handleSubmit },
+        "Submit",
+      ),
+      props.completedAction,
+    ) as ReactElement;
+  },
+}));
+
+import { accountInviteLinkAction } from "../account-invite.actions";
+import { submitFlowStepAction } from "../flow.actions";
+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";
+const EMAIL = "jane@example.com";
+
+function config(opts: { tagged: boolean; thankYou: boolean; secondEmail?: boolean }): FlowConfig {
+  return {
+    slug: "get-a-quote",
+    defaultLocale: "en",
+    steps: [
+      {
+        key: "contact",
+        type: "field",
+        copy: { title: { en: "Let's get started" } },
+        fields: [
+          {
+            name: "email",
+            inputType: "email",
+            required: true,
+            ...(opts.tagged ? { mapsTo: "email" } : {}),
+            copy: { label: { en: "Email" } },
+          },
+          ...(opts.secondEmail
+            ? [
+                {
+                  name: "backup",
+                  inputType: "email",
+                  ...(opts.tagged ? { mapsTo: "email" } : {}),
+                  copy: { label: { en: "Backup" } },
+                },
+              ]
+            : []),
+        ],
+      },
+    ],
+    ...(opts.thankYou
+      ? { thankYou: { default: "flow-thanks", bySegment: { qualified: "flow-thanks-qualified" } } }
+      : {}),
+  } as FlowConfig;
+}
+
+function ok(response: Record<string, unknown>) {
+  return {
+    ok: true as const,
+    response: {
+      sessionId: "s",
+      landed: "contact",
+      nextStepKey: null,
+      completed: true,
+      ...response,
+    },
+  } as never;
+}
+
+async function walk(cfg: FlowConfig): Promise<void> {
+  render(<FlowStepperClient config={cfg} locale="en" slug="get-a-quote" />);
+  await userEvent.click(screen.getByTestId("mock-submit"));
+}
+
+beforeEach(() => {
+  mockPush.mockClear();
+  mockSubmit.mockReset();
+  mockLink.mockReset();
+  mockLink.mockResolvedValue(HREF);
+  steps = [{ stepKey: "contact", values: { email: EMAIL } }];
+  window.sessionStorage.clear();
+});
+
+describe("the finished panel (no thankYou block)", () => {
+  it("shows the prefilled link inside a Replay-blocked element", 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();
+    expect(mockLink).toHaveBeenCalledTimes(1);
+    expect(mockLink).toHaveBeenCalledWith(EMAIL);
+  });
+
+  it("only an email-tagged field counts", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+
+    await walk(config({ tagged: false, thankYou: false }));
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
+    expect(mockLink).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("uses the step's first tagged email field", async () => {
+    steps = [{ stepKey: "contact", values: { email: "first@example.com", backup: "second@example.com" } }];
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+
+    await walk(config({ tagged: true, thankYou: false, secondEmail: true }));
+
+    await screen.findByTestId("flow-account-invite");
+    expect(mockLink).toHaveBeenCalledWith("first@example.com");
+  });
+
+  it.each([
+    ["no next", { }],
+    ["a step that does not complete", { completed: false, next: { completion: "invite" } }],
+  ])("%s: no action call and no link", 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();
+  });
+
+  it("an action answer of null shows no link", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+    mockLink.mockResolvedValue(null);
+
+    await walk(config({ tagged: true, thankYou: false }));
+
+    await waitFor(() => expect(mockLink).toHaveBeenCalled());
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("a conflict forgets the email: a later completing step with no email field asks for no link", async () => {
+    mockSubmit
+      .mockResolvedValueOnce(ok({ completed: false }))
+      .mockResolvedValueOnce({ ok: false, kind: "step_conflict", message: "x" } as never)
+      .mockResolvedValueOnce(ok({ next: { completion: "invite" } }));
+    steps = [
+      { stepKey: "contact", values: { email: EMAIL } },
+      { stepKey: "contact", values: { email: EMAIL } },
+      { stepKey: "other", values: { note: "hi" } },
+    ];
+
+    await walk(config({ tagged: true, thankYou: false }));
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(3));
+    expect(mockLink).not.toHaveBeenCalled();
+  });
+});
+
+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" } }));
+
+    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).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();
+  });
+});