create-ailk 0.27.0 → 0.28.1

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

@@ -0,0 +1,397 @@
+// oss: false
+/**
+ * Tests for the `/[locale]/flows/[slug]/results/[payload]` cold-load route
+ * (#4770).
+ *
+ * AC3 — a payload encoding a known answer set renders exactly the offer
+ *       names and matched reasons `recommend()` returns for those same
+ *       answers — asserted against the SAME fixture (`FIXTURE_CONFIG` +
+ *       `KNOWN_ANSWERS`) `recommend()` itself would score.
+ * AC4 — four cases `redirect()` to `/[locale]/flows/[slug]` and render no
+ *       results markup: invalid payload, stale-version payload, a
+ *       flowSlug-mismatched payload, and a non-recommending flow.
+ *
+ * `next/navigation`'s `redirect` is mocked to throw (mirrors the sibling
+ * `thanks/[slug]` route's `notFound` test pattern) so a redirect is
+ * observable via `.rejects.toThrow` without a real Next.js router. `next-intl`
+ * is mocked to an identity translator — `ResultsClient`'s only string comes
+ * from the `flow` namespace's `whyThis` key, which this test does not assert
+ * on by literal text.
+ */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import {
+  encodePermalink,
+  PERMALINK_VERSION,
+  recommend,
+  resolveLocalizedString,
+} from "@working-theory/validation";
+
+const mockGet = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  flows: { get: (...args: unknown[]) => mockGet(...args) },
+}));
+
+const mockRedirect = jest.fn((url: string) => {
+  throw new Error(`NEXT_REDIRECT:${url}`);
+});
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  redirect: (url: string) => mockRedirect(url),
+}));
+
+jest.mock("next-intl", () => ({
+  __esModule: true,
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+import Page, { generateMetadata } from "../page";
+
+const SLUG = "ailk-recommender";
+
+const KNOWN_ANSWERS = { team_size: "solo", wants_seo: "yes" };
+
+function fixtureConfig(overrides: Partial<FlowConfig> = {}): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: [
+      {
+        key: "team",
+        type: "segmentation",
+        copy: { title: { en: "Tell us about your 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: "free_oss",
+        copy: {
+          name: { en: "Free" },
+          description: { en: "Self-serve, open source." },
+        },
+        price: { kind: "label", label: { en: "Free" } },
+        rules: [
+          {
+            when: { answer: "team_size", eq: "solo" },
+            reason: { en: "You're a solo builder." },
+          },
+        ],
+      },
+      {
+        key: "seo_addon",
+        copy: {
+          name: { en: "SEO Add-on" },
+          description: { en: "AEO + SEO tuning." },
+        },
+        price: { kind: "label", label: { en: "Add-on" } },
+        rules: [
+          {
+            when: { answer: "wants_seo", eq: "yes" },
+            reason: { en: "You want more organic reach." },
+          },
+        ],
+      },
+    ],
+    recommendation: {
+      key: "recommendation",
+      copy: { title: { en: "Your recommendation" } },
+    },
+    ...overrides,
+  } as FlowConfig;
+}
+
+beforeEach(() => {
+  mockGet.mockReset();
+  mockRedirect.mockClear();
+});
+
+async function expectRedirectTo(
+  payload: string,
+  expectedUrl: string,
+): Promise<void> {
+  await expect(
+    Page({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload }),
+    }),
+  ).rejects.toThrow(`NEXT_REDIRECT:${expectedUrl}`);
+  expect(mockRedirect).toHaveBeenCalledWith(expectedUrl);
+}
+
+describe("AC4 — invalid / stale-version / mismatched / non-recommending all redirect to step 1", () => {
+  it("redirects on an invalid payload", async () => {
+    await expectRedirectTo("not-a-valid-payload!!!", `/en/flows/${SLUG}`);
+    // Never fetched the flow config for an undecodable payload.
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+
+  it("redirects on a stale-version payload", async () => {
+    const stalePayload = encodePermalink({
+      version: PERMALINK_VERSION - 1,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    await expectRedirectTo(stalePayload, `/en/flows/${SLUG}`);
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+
+  it("redirects when the payload's own flowSlug differs from the route's [slug]", async () => {
+    const mismatchedPayload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: "a-different-flow",
+      answers: KNOWN_ANSWERS,
+    });
+    await expectRedirectTo(mismatchedPayload, `/en/flows/${SLUG}`);
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+
+  it("redirects when the served flow is not a recommending flow (no offers)", async () => {
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    const {
+      offers: _offers,
+      mode: _mode,
+      ...nonRecommending
+    } = fixtureConfig();
+    mockGet.mockResolvedValueOnce({ ok: true, body: nonRecommending });
+
+    await expectRedirectTo(payload, `/en/flows/${SLUG}`);
+  });
+
+  it("redirects when the served flow declares mode !== 'recommending'", async () => {
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    mockGet.mockResolvedValueOnce({
+      ok: true,
+      body: fixtureConfig({ mode: "qualifying" }),
+    });
+
+    await expectRedirectTo(payload, `/en/flows/${SLUG}`);
+  });
+
+  it("no results markup renders on any redirect path (renders nothing before throwing)", async () => {
+    await expect(
+      Page({
+        params: Promise.resolve({
+          locale: "en",
+          slug: SLUG,
+          payload: "garbage",
+        }),
+      }),
+    ).rejects.toThrow();
+    expect(screen.queryByTestId("flow-results")).not.toBeInTheDocument();
+  });
+});
+
+describe("AC3 — a valid payload against a recommending flow renders exactly recommend()'s fits", () => {
+  it("renders exactly the offer names and matched reasons recommend() itself returns for the same answers", async () => {
+    const user = userEvent.setup();
+    const config = fixtureConfig();
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    mockGet.mockResolvedValueOnce({ ok: true, body: config });
+
+    // The SAME fixture (`config` + `KNOWN_ANSWERS`) drives BOTH the mocked
+    // server response AND this expectation — `recommend()` is the one
+    // source of truth for "which fits, in what order, with which reason,"
+    // never a second hand-typed list that could silently drift from it.
+    const expected = recommend(
+      {
+        key: SLUG,
+        offers: config.offers,
+        pairings: config.pairings,
+        rateTable: config.rateTable,
+        scoring: config.scoring,
+      },
+      KNOWN_ANSWERS,
+    );
+    expect(expected.fits.length).toBeGreaterThan(0);
+
+    const element = await Page({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload }),
+    });
+    render(element);
+
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        name: resolveLocalizedString(
+          config.recommendation!.copy.title,
+          "en",
+          config.defaultLocale,
+        ),
+      }),
+    ).toBeInTheDocument();
+
+    for (const fit of expected.fits) {
+      const offer = config.offers!.find((o) => o.key === fit.offerKey)!;
+      const name = resolveLocalizedString(
+        offer.copy.name,
+        "en",
+        config.defaultLocale,
+      );
+      // #4842 FR1 — the top fit's name is ALSO the safe-default side panel's
+      // `offerName`, so the FIRST fit renders exactly twice (panel + card)
+      // and every other fit exactly once.
+      expect(screen.getAllByText(name)).toHaveLength(
+        fit.offerKey === expected.fits[0]!.offerKey ? 2 : 1,
+      );
+      if (offer.copy.description) {
+        expect(
+          screen.getByText(
+            resolveLocalizedString(
+              offer.copy.description,
+              "en",
+              config.defaultLocale,
+            ),
+          ),
+        ).toBeInTheDocument();
+      }
+
+      // The matched reason renders inside the "Why this?" Popover
+      // disclosure — reveal it (mirrors packages/ui/src/blocks/__tests__/
+      // RecommendationCard.test.tsx's own click-to-reveal pattern).
+      await user.click(
+        screen.getByTestId(`recommendation-card-${fit.offerKey}-why-trigger`),
+      );
+      expect(
+        await screen.findByText(
+          resolveLocalizedString(fit.reason, "en", config.defaultLocale),
+        ),
+      ).toBeInTheDocument();
+    }
+  });
+});
+
+describe("generateMetadata", () => {
+  it("resolves the page title from the compiled recommendation marker", async () => {
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    mockGet.mockResolvedValueOnce({ ok: true, body: fixtureConfig() });
+
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload }),
+    });
+    expect(metadata.title).toBe("Your recommendation");
+  });
+
+  it("returns an empty metadata object for an invalid payload", async () => {
+    const metadata = await generateMetadata({
+      params: Promise.resolve({
+        locale: "en",
+        slug: SLUG,
+        payload: "garbage",
+      }),
+    });
+    expect(metadata).toEqual({});
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+});
+
+// ─── #4842 AC-5 — the `?checkout=` return states (additive; the cases above
+// are the regression floor and stay as they were) ───────────────────────────
+
+describe("AC-5 (#4842) — ?checkout= return states render over the same recommendation", () => {
+  function validPayload(): string {
+    return encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+  }
+
+  async function renderWithSearch(
+    checkout: string | undefined,
+  ): Promise<ReturnType<typeof recommend>> {
+    const config = fixtureConfig();
+    mockGet.mockResolvedValueOnce({ ok: true, body: config });
+    const expected = recommend(
+      {
+        key: SLUG,
+        offers: config.offers,
+        pairings: config.pairings,
+        rateTable: config.rateTable,
+        scoring: config.scoring,
+      },
+      KNOWN_ANSWERS,
+    );
+    const element = await Page({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload: validPayload() }),
+      searchParams: Promise.resolve(checkout === undefined ? {} : { checkout }),
+    });
+    render(element);
+    expect(mockRedirect).not.toHaveBeenCalled();
+    return expected;
+  }
+
+  function expectIdenticalFits(expected: ReturnType<typeof recommend>): void {
+    expect(expected.fits.length).toBeGreaterThan(0);
+    for (const fit of expected.fits) {
+      expect(screen.getByTestId(`recommendation-card-${fit.offerKey}`)).toBeInTheDocument();
+    }
+    expect(screen.getAllByTestId(/^recommendation-card-[a-z_]+$/)).toHaveLength(
+      expected.fits.length,
+    );
+  }
+
+  it("?checkout=success renders the success status line AND the identical fit cards", async () => {
+    const expected = await renderWithSearch("success");
+    expect(screen.getByTestId("flow-results-return-state")).toHaveTextContent("checkoutSuccess");
+    expect(screen.getByRole("status")).toBeInTheDocument();
+    expectIdenticalFits(expected);
+  });
+
+  it("?checkout=cancelled renders the cancelled status line AND the identical fit cards", async () => {
+    const expected = await renderWithSearch("cancelled");
+    expect(screen.getByTestId("flow-results-return-state")).toHaveTextContent("checkoutCancelled");
+    expectIdenticalFits(expected);
+  });
+
+  it("an unrecognised value renders no status line; the fits are unchanged", async () => {
+    const expected = await renderWithSearch("bogus");
+    expect(screen.queryByTestId("flow-results-return-state")).not.toBeInTheDocument();
+    expectIdenticalFits(expected);
+  });
+
+  it("a return param never changes which redirect guard fires (invalid payload still redirects to step 1)", async () => {
+    await expect(
+      Page({
+        params: Promise.resolve({ locale: "en", slug: SLUG, payload: "not-a-valid-payload!!!" }),
+        searchParams: Promise.resolve({ checkout: "success" }),
+      }),
+    ).rejects.toThrow(`NEXT_REDIRECT:/en/flows/${SLUG}`);
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/flows/[slug]/results/[payload]/checkout-seam.ts

@@ -0,0 +1,74 @@
+// oss: false
+/**
+ * checkout-seam.ts — where the results page meets commerce (#6786).
+ *
+ * The results page is signal-collectors' (it ships with the `flows` surface);
+ * checkout is commerce's optional add-on to it. A base file may not import a
+ * commerce file — `paidModuleTemplateExclusions()` sweeps every importer of a
+ * paid module's `ownedFiles` out of the keyless snapshot, and a scaffold
+ * without commerce has neither the file nor `@working-theory/ui-commerce` to
+ * resolve. So the dependency points the other way: commerce's
+ * `layout.tsx` beside this file provides a `ResultsCheckout` through
+ * `ResultsCheckoutContext`, and `ResultsClient` reads it. Next renders a
+ * route's `layout.tsx` only when the file exists, so a scaffold without
+ * commerce gets no provider, the context stays `undefined`, and the page
+ * offers no checkout action — every fit's terminal is Book a Call.
+ *
+ * Only types and the context live here; nothing in this file names a
+ * commerce module, and the types are structural so the commerce half
+ * satisfies them without either side importing the other's.
+ */
+import type {
+  FlowCheckoutInputRaw,
+  RecommendRegister,
+  WaitlistBillingPeriod,
+  WaitlistCreditStop,
+  WaitlistOffer,
+} from "@working-theory/validation";
+import type { ComponentType } from "react";
+import { createContext } from "react";
+
+import type { EmailMomentFailure } from "../../email-moment";
+
+/** The seats / period / credit stop Pay sends — what the price card shows. */
+export interface ResultsCheckoutConfiguration {
+  seats: number;
+  period: WaitlistBillingPeriod;
+  creditStop: WaitlistCreditStop;
+}
+
+/** The checkout view's price card, controlled by `ResultsClient`. */
+export interface ResultsPriceCardProps {
+  offer: WaitlistOffer;
+  currency: string;
+  locale: string;
+  defaultLocale?: string;
+  /** The register `price()` prices against — the same one the server serves. */
+  register: RecommendRegister;
+  value: ResultsCheckoutConfiguration;
+  onChange: (next: ResultsCheckoutConfiguration) => void;
+}
+
+/**
+ * Pay's input: the wire body MINUS the two return URLs (the action builds
+ * them from the app's own origin, #4875) PLUS the permalink `payload`.
+ */
+export type ResultsCheckoutInput = Omit<
+  FlowCheckoutInputRaw,
+  "successUrl" | "cancelUrl"
+> & {
+  payload: string;
+};
+
+export interface ResultsCheckout {
+  PriceCard: ComponentType<ResultsPriceCardProps>;
+  /** Pay — a returned value is always a failure; success `redirect()`s. */
+  start: (
+    slug: string,
+    input: ResultsCheckoutInput,
+  ) => Promise<EmailMomentFailure | undefined>;
+}
+
+export const ResultsCheckoutContext = createContext<
+  ResultsCheckout | undefined
+>(undefined);