create-ailk 0.32.0 → 0.33.0

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

@@ -13,7 +13,8 @@
  *     Book-a-Call rail, §7.3); active region = the fits as
  *     `RecommendationCard` (first fit `emphasis: "recommended"`, each with a
  *     per-offer terminal — D2) + `PairingCard` when one matched; bar
- *     `leading` = "Email me this plan" (D5).
+ *     `leading` = "Email me this plan" (D5), absent when the served
+ *     conversion is `none` (#10826).
  *   - **checkout** — Get Started performs DESIGN §7.6's panel FLIP: the
  *     email step takes the frame's first (side) slot — "fields left" — and
  *     the configurable price card (#4865, D3) takes the second (active)
@@ -25,6 +26,14 @@
  *   - **save** — the same email step with the save framing; the side panel
  *     stays the safe-default card (FR4); success renders the saved state.
  *
+ * #10828 — a scored register's results open with the respondent's own
+ * score: the overall points out of the max and its Level name, then one
+ * `ScoreBar` per dimension in register order, then the cards. The score is
+ * `evaluateWaitlistScoring` over the decoded answers, run here as
+ * `recommend()` is; a Level is named by the register's `levels.names`, else
+ * "Level {n}". An unscored register (no scoring, or no points to score)
+ * renders the cards only.
+ *
  * The three frame regions keep their DOM identity across every transition
  * (#4806 FR7 — the frame is rendered once; only its slots change).
  *
@@ -54,6 +63,7 @@ import {
   Heading,
   PairingCard,
   RecommendationCard,
+  ScoreBar,
   Text,
 } from "@working-theory/ui";
 import {
@@ -61,16 +71,24 @@ import {
   type FlowSidePanelView,
 } from "@working-theory/ui-signal-collectors";
 import type {
+  FlowCompletion,
   FlowConfig,
   FlowSaveInput,
+  LookupKeyPeriod,
   RecommendRegister,
   WaitlistBillingPeriod,
 } from "@working-theory/validation";
-import { recommend, resolveLocalizedString } from "@working-theory/validation";
+import {
+  evaluateWaitlistScoring,
+  flowRecommendRegister,
+  recommend,
+  resolveLocalizedString,
+} from "@working-theory/validation";
 import { useTranslations } from "next-intl";
 import type { ReactElement, ReactNode } from "react";
 import { useContext, useEffect, useMemo, useState } from "react";
 
+import { formatMinorUnits } from "../../../../../../lib/offerings-pricing";
 import { saveRecommendationAction } from "../../save.actions";
 
 import type {
@@ -82,8 +100,27 @@ import { ResultsEmailStep } from "./ResultsEmailStep";
 
 export type ResultsReturnState = "success" | "cancelled";
 
+/**
+ * #10827 — the matched by-result row's offering, resolved by the page from
+ * the shown set: named from the offering; `price` and `href` (its
+ * `/pricing?plan=` card) only while it is shown — a draft has neither.
+ */
+export interface ResultsOfferingCard {
+  offeringKey: string;
+  title: string;
+  /** Stripe minor units, from the offering's own Price. */
+  price?: { amount: number; currency: string; period: LookupKeyPeriod };
+  href?: string;
+  /**
+   * A checkout row's shown offering: on load the browser goes to `href`, the
+   * Offerings buy route, as a top-level navigation; the card is the fallback.
+   */
+  checkoutOnLoad?: true;
+}
+
 interface Props {
-  config: FlowConfig;
+  /** The served config; `conversion` is the magnet's (#10826), absent from an older API. */
+  config: FlowConfig & { conversion?: FlowCompletion };
   locale: string;
   answers: Record<string, string | string[]>;
   slug: string;
@@ -91,6 +128,8 @@ interface Props {
   payload: string;
   /** FR7/D6 — the `?checkout=` return micro-state, validated by the page. */
   returnState?: ResultsReturnState;
+  /** #10827 — the matched by-result row's offering card. */
+  offeringCard?: ResultsOfferingCard;
 }
 
 type View = "results" | "checkout" | "save";
@@ -147,22 +186,34 @@ export function ResultsClient({
   slug,
   payload,
   returnState,
+  offeringCard,
 }: Props): ReactElement {
   const t = useTranslations("flow");
+  const tOfferings = useTranslations("pricingOfferings");
+  // #10828 — the score's two words, from the catalog's existing entries.
+  const tScore = useTranslations("account.results");
+  const tLevel = useTranslations("waitlistDashboard.level");
   const checkout = useContext(ResultsCheckoutContext);
   const { defaultLocale, offers = [], recommendation } = config;
 
-  const register = useMemo<RecommendRegister>(
-    () => ({
-      key: config.experiment?.key ?? config.slug,
-      offers: config.offers,
-      pairings: config.pairings,
-      rateTable: config.rateTable,
-      scoring: config.scoring,
-    }),
-    [config],
-  );
+  const register = useMemo<RecommendRegister>(() => flowRecommendRegister(config), [config]);
   const result = useMemo(() => recommend(register, answers), [register, answers]);
+  // #10828 — no points to score (max 0) is an unscored register. The
+  // evaluator returns `dimensions` 1:1 with, and in the order of, the
+  // register's own, so each takes its name by index.
+  const score = useMemo(() => {
+    const scoring = config.scoring;
+    if (!scoring) return undefined;
+    const scored = evaluateWaitlistScoring(scoring, answers);
+    if (scored.total.max <= 0) return undefined;
+    return {
+      total: scored.total,
+      dimensions: scored.dimensions.map((dimension, i) => ({
+        ...dimension,
+        name: scoring.dimensions?.[i]?.name ?? dimension.key,
+      })),
+    };
+  }, [config.scoring, answers]);
   const currency = config.rateTable?.currency;
 
   const [view, setView] = useState<View>("results");
@@ -200,6 +251,34 @@ export function ResultsClient({
     "one-time": t("priceCard.periodLabels.one-time"),
   };
 
+  /** #10827 — an offering's Price as `/pricing` words it. */
+  function offeringPriceLabel(price: NonNullable<ResultsOfferingCard["price"]>): string {
+    const amount = formatMinorUnits(price.amount, price.currency, locale);
+    if (price.period === "monthly") return tOfferings("monthly", { amount });
+    if (price.period === "yearly") return tOfferings("annual", { amount });
+    return tOfferings("oneTime", { amount });
+  }
+
+  const offeringHref = offeringCard?.href;
+  const checkoutOnLoad = offeringCard?.checkoutOnLoad === true;
+
+  // #10827 — straight to checkout: the buy route sells only on a top-level
+  // document load, which a server redirect inside the walk's client-side
+  // navigation is not. Only when this tab just walked the flow (the session
+  // entry `FlowStepperClient` writes before it navigates here) — a cold load
+  // of a shared or cross-site permalink, and a `?checkout=` return, show the
+  // card and wait for the click. `replace`, so Back from Stripe skips this page.
+  useEffect(() => {
+    if (!checkoutOnLoad || offeringHref === undefined || returnState !== undefined) return;
+    let walked = false;
+    try {
+      walked = Boolean(window.sessionStorage.getItem(flowSessionStorageKey(slug)));
+    } catch {
+      // a privacy mode: the click alone
+    }
+    if (walked) window.location.replace(offeringHref);
+  }, [checkoutOnLoad, offeringHref, returnState, slug]);
+
   const topFit = result.fits[0];
   const topOffer = topFit
     ? offers.find((offer) => offer.key === topFit.offerKey)
@@ -369,6 +448,8 @@ export function ResultsClient({
   if (view === "results") {
     const heading = recommendation ? resolve(recommendation.copy.title) : undefined;
     const body = recommendation?.copy.body ? resolve(recommendation.copy.body) : undefined;
+    const levelName = (level: number): string =>
+      config.scoring?.levels?.names[level - 1] ?? tLevel("label", { n: level });
 
     active = (
       <div data-testid="flow-results">
@@ -389,10 +470,71 @@ export function ResultsClient({
             {body}
           </Text>
         ) : null}
+        {score ? (
+          <div data-testid="flow-results-score" className="mt-block-loose flex flex-col gap-6">
+            <ScoreBar
+              size="lg"
+              label={tScore("score")}
+              points={score.total.points}
+              max={score.total.max}
+              pct={score.total.pct}
+              levelName={levelName(score.total.level)}
+              locale={locale}
+              data-testid="flow-results-score-total"
+            />
+            {score.dimensions.length > 0 ? (
+              <div className="flex flex-col gap-4">
+                {score.dimensions.map((dimension) => (
+                  <ScoreBar
+                    key={dimension.key}
+                    label={dimension.name}
+                    points={dimension.points}
+                    max={dimension.max}
+                    pct={dimension.pct}
+                    levelName={levelName(dimension.level)}
+                    locale={locale}
+                    data-testid={`flow-results-score-dimension-${dimension.key}`}
+                  />
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
         <div className="mt-block-loose flex flex-col gap-4">
+          {offeringCard ? (
+            <RecommendationCard
+              data-testid={`recommendation-card-${offeringCard.offeringKey}`}
+              title={offeringCard.title}
+              emphasis="recommended"
+              recommendedLabel={t("priceCard.eyebrow")}
+              {...(offeringCard.price
+                ? {
+                    price: {
+                      kind: "label",
+                      label: { [locale]: offeringPriceLabel(offeringCard.price) },
+                      currency: offeringCard.price.currency,
+                      locale,
+                      periodLabels,
+                      fromPrefix: t("price.fromPrefix"),
+                    },
+                  }
+                : {})}
+              {...(offeringHref !== undefined
+                ? {
+                    terminal: {
+                      kind: "getStarted",
+                      label: t("getStarted"),
+                      onSelect: () => window.location.assign(offeringHref),
+                    },
+                  }
+                : {})}
+            />
+          ) : null}
           {result.fits.map((fit, index) => {
             const offer = offers.find((o) => o.key === fit.offerKey);
             if (!offer) return null;
+            // #10827 — one recommended card: a by-result card takes the badge.
+            const recommendedFit = index === 0 && !offeringCard;
             // Get Started only where commerce is on (#6786) AND the offer is quotable (D2).
             const quotable =
               checkout !== undefined &&
@@ -427,8 +569,8 @@ export function ResultsClient({
                 {...(offer.copy.description
                   ? { description: resolve(offer.copy.description) }
                   : {})}
-                emphasis={index === 0 ? "recommended" : "default"}
-                {...(index === 0 ? { recommendedLabel: t("priceCard.eyebrow") } : {})}
+                emphasis={recommendedFit ? "recommended" : "default"}
+                {...(recommendedFit ? { recommendedLabel: t("priceCard.eyebrow") } : {})}
                 {...(price !== undefined ? { price } : {})}
                 terminal={terminal}
                 whyThis={{ label: t("whyThis"), content: resolve(fit.reason) }}
@@ -448,11 +590,13 @@ export function ResultsClient({
         </div>
       </div>
     );
-    leading = (
-      <Button type="button" variant="ghost" size="big" onClick={openSave}>
-        {t("emailMePlan")}
-      </Button>
-    );
+    // #10826 — a magnet that converts no one (`none`) asks for no email.
+    leading =
+      config.conversion === "none" ? undefined : (
+        <Button type="button" variant="ghost" size="big" onClick={openSave}>
+          {t("emailMePlan")}
+        </Button>
+      );
     trailing = undefined;
   } else {
     const isCheckout = view === "checkout";

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

@@ -0,0 +1,269 @@
+// oss: false
+/**
+ * Tests for the by-result rows on the results permalink (#10827).
+ *
+ * `recommend()` returns the first matching row's `routeTo`; the page then
+ * sends a checkout row with a shown `_monthly` key straight to the Offerings
+ * buy route (a top-level navigation from the browser), and renders an offering row as one card named from the
+ * offering — priced, with its `/pricing?plan=` link, only while the offering
+ * is shown. A draft (an offering not in the shown set) renders its card with
+ * no price and no link, for either kind.
+ *
+ * Mocks mirror `landing.test.tsx`; the clock moves 16 s between cases so the
+ * page's 15 s shown-set read never carries over.
+ */
+import { render, screen } from "@testing-library/react";
+import type { FlowConfig, FlowResultRow } from "@working-theory/validation";
+import {
+  encodePermalink,
+  PERMALINK_VERSION,
+  workspaceShownSetWireSchema,
+} from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+const mockGet = jest.fn();
+const mockShown = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  flows: { get: (...args: unknown[]) => mockGet(...args) },
+  offerings: { shown: (...args: unknown[]) => mockShown(...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 from "../page";
+
+const SLUG = "readiness";
+const en = (s: string) => ({ en: s });
+
+/** A scored diagnostic — never 0, monthly 2, weekly 4 points — with rows only. */
+function config(byResult: FlowResultRow[]): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: [
+      {
+        key: "q0",
+        type: "segmentation",
+        copy: { title: en("How often do you ship?") },
+        questions: [
+          {
+            name: "cadence",
+            options: [
+              { value: "never", label: en("Never") },
+              { value: "monthly", label: en("Monthly") },
+              { value: "weekly", label: en("Weekly") },
+            ],
+          },
+        ],
+      },
+    ],
+    scoring: {
+      version: 1,
+      points: [
+        {
+          name: "p_cadence",
+          question: "cadence",
+          kind: "optionWeights",
+          weights: { never: 0, monthly: 2, weekly: 4 },
+        },
+      ],
+      scores: { total: { sum: ["p_cadence"] } },
+      tiers: [{ key: "all", when: { score: "total", gte: 0 } }],
+      default: "all",
+    },
+    recommendation: { key: "result", copy: { title: en("Your result") }, byResult },
+  } as FlowConfig;
+}
+
+const SHOWN_SET = workspaceShownSetWireSchema.parse({
+  productIds: ["prod_growth"],
+  recommended: { plan: null, addon: null },
+  offerings: [
+    {
+      productId: "prod_growth",
+      plan: "growth-ops-growth",
+      name: "Growth Ops - Growth",
+      description: null,
+      marketingFeatures: [],
+      unitLabel: null,
+      note: null,
+      termsNote: null,
+      ailkGroup: "plan",
+      ailkOrder: null,
+      recommended: false,
+      prices: [
+        {
+          priceId: "price_growth_monthly",
+          lookupKey: "growth-ops-growth_monthly",
+          plan: "growth-ops-growth",
+          period: "monthly",
+          interval: "month",
+          amount: 120000,
+          currency: "usd",
+        },
+      ],
+    },
+  ],
+  state: "current",
+  snapshotAt: "2026-11-04T12:00:00.000Z",
+});
+
+function page(answers: Record<string, string>): Promise<ReactElement> {
+  return Page({
+    params: Promise.resolve({
+      locale: "en",
+      slug: SLUG,
+      payload: encodePermalink({ version: PERMALINK_VERSION, flowSlug: SLUG, answers }),
+    }),
+  });
+}
+
+async function redirectOf(answers: Record<string, string>): Promise<string | null> {
+  const err = await page(answers).then(
+    () => null,
+    (e: unknown) => e,
+  );
+  const message = err instanceof Error ? err.message : "";
+  return message.startsWith("NEXT_REDIRECT:") ? message.slice("NEXT_REDIRECT:".length) : null;
+}
+
+const checkoutRow = (offeringKey: string): FlowResultRow => ({
+  when: { kind: "tier", op: "is", level: 4 },
+  routeTo: { kind: "checkout", offeringKey },
+});
+const offeringRow = (offeringKey: string): FlowResultRow => ({
+  when: { kind: "answer", op: "atLeast", question: "cadence", value: "monthly" },
+  routeTo: { kind: "offering", offeringKey },
+});
+
+/** The navigations jsdom was asked for and reports as not implemented. */
+let consoleError: jest.SpyInstance<void, unknown[]>;
+function navigations(): unknown[] {
+  return consoleError.mock.calls.filter((args) =>
+    args.some((arg: unknown) => String(arg instanceof Error ? arg.message : arg).includes("navigation")),
+  );
+}
+
+beforeAll(() => {
+  jest.useFakeTimers({ now: new Date("2026-11-04T12:00:00.000Z") });
+});
+
+afterAll(() => {
+  jest.useRealTimers();
+});
+
+beforeEach(() => {
+  jest.setSystemTime(Date.now() + 16_000);
+  mockGet.mockReset();
+  mockShown.mockReset();
+  mockRedirect.mockClear();
+  consoleError = jest.spyOn(console, "error").mockImplementation(() => undefined);
+  window.sessionStorage.clear();
+  mockShown.mockResolvedValue({ ok: true, status: 200, body: { status: "shown", shownSet: SHOWN_SET } });
+});
+
+afterEach(() => {
+  consoleError.mockRestore();
+  // Every landing is a root-relative path of grammar characters only.
+  for (const [url] of mockRedirect.mock.calls) {
+    expect(url).toMatch(/^\/[a-z0-9/?=_-]+$/);
+    expect(url).not.toContain("//");
+  }
+});
+
+describe("#10827 — a checkout row sends the respondent to checkout", () => {
+  it("a shown _monthly key → a top-level navigation to the Offerings buy route for that key", async () => {
+    // The walk arrives by a client-side navigation, which the buy route
+    // refuses — so the browser, not a server redirect, goes to checkout.
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([checkoutRow("growth-ops-growth_monthly")]) });
+    // This tab just walked the flow: `FlowStepperClient`'s session entry.
+    window.sessionStorage.setItem(`ailk:flow-session:${SLUG}`, "sess_1");
+    render(await page({ cadence: "weekly" }));
+    expect(mockRedirect).not.toHaveBeenCalled();
+    // jsdom performs no navigation; it reports each one it was asked for.
+    expect(navigations()).toHaveLength(1);
+    expect(screen.getByTestId("recommendation-card-growth-ops-growth_monthly-terminal-getStarted")).toBeInTheDocument();
+    // The card stays as the fallback, priced from the offering.
+    expect(screen.getByTestId("recommendation-card-growth-ops-growth_monthly-price")).toBeInTheDocument();
+  });
+
+  it.each<[string, Record<string, string> | undefined, boolean]>([
+    ["a cold load of a shared permalink (no walk in this tab)", undefined, false],
+    ["a ?checkout=cancelled return", { checkout: "cancelled" }, true],
+  ])("%s shows the priced card and waits for the click", async (_label, search, walked) => {
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([checkoutRow("growth-ops-growth_monthly")]) });
+    if (walked) window.sessionStorage.setItem(`ailk:flow-session:${SLUG}`, "sess_1");
+    render(
+      await Page({
+        params: Promise.resolve({
+          locale: "en",
+          slug: SLUG,
+          payload: encodePermalink({ version: PERMALINK_VERSION, flowSlug: SLUG, answers: { cadence: "weekly" } }),
+        }),
+        ...(search !== undefined ? { searchParams: Promise.resolve(search) } : {}),
+      }),
+    );
+    expect(navigations()).toEqual([]);
+    expect(screen.getByTestId("recommendation-card-growth-ops-growth_monthly-terminal-getStarted")).toBeInTheDocument();
+  });
+
+  it("a {plan} key → the /pricing?plan= landing", async () => {
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([checkoutRow("growth-ops-growth")]) });
+    await expect(redirectOf({ cadence: "weekly" })).resolves.toBe("/en/pricing?plan=growth-ops-growth");
+  });
+
+  it("a key not shown (a draft) renders its card with no price and no checkout", async () => {
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([checkoutRow("ai-readiness-workshop_monthly")]) });
+    render(await page({ cadence: "weekly" }));
+    expect(mockRedirect).not.toHaveBeenCalled();
+    const card = screen.getByTestId("recommendation-card-ai-readiness-workshop_monthly");
+    expect(card).toHaveTextContent("Ai readiness workshop");
+    expect(screen.queryByTestId("recommendation-card-ai-readiness-workshop_monthly-price")).toBeNull();
+    expect(screen.queryByTestId("recommendation-card-ai-readiness-workshop_monthly-terminal-getStarted")).toBeNull();
+    expect(navigations()).toEqual([]);
+  });
+});
+
+describe("#10827 — an offering row renders a card named from the offering", () => {
+  it("a shown offering: its product name, its price and its /pricing link", async () => {
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([offeringRow("growth-ops-growth")]) });
+    render(await page({ cadence: "monthly" }));
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(screen.getByTestId("recommendation-card-growth-ops-growth")).toHaveTextContent("Growth Ops - Growth");
+    expect(screen.getByTestId("recommendation-card-growth-ops-growth-price")).toBeInTheDocument();
+    expect(screen.getByTestId("recommendation-card-growth-ops-growth-terminal-getStarted")).toBeInTheDocument();
+    expect(navigations()).toEqual([]);
+  });
+
+  it("a draft offering (not shown): the card with no price and no link", async () => {
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([offeringRow("ai-readiness-workshop")]) });
+    render(await page({ cadence: "weekly" }));
+    expect(screen.getByTestId("recommendation-card-ai-readiness-workshop")).toHaveTextContent(
+      "Ai readiness workshop",
+    );
+    expect(screen.queryByTestId("recommendation-card-ai-readiness-workshop-price")).toBeNull();
+    expect(screen.queryByTestId("recommendation-card-ai-readiness-workshop-terminal-getStarted")).toBeNull();
+  });
+
+  it("no row matches: the results page with no card and no redirect", async () => {
+    mockGet.mockResolvedValue({ ok: true, status: 200, body: config([offeringRow("growth-ops-growth")]) });
+    render(await page({ cadence: "never" }));
+    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
+    expect(screen.queryByTestId("recommendation-card-growth-ops-growth")).toBeNull();
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+});