create-ailk 0.32.0 → 0.33.0

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

@@ -0,0 +1,179 @@
+// oss: false
+/**
+ * The respondent's own score on the results page (#10828).
+ *
+ * A scored submission renders the overall score — points out of the max and
+ * its Level name — then one labelled bar with its Level per dimension, in
+ * register order, then the cards. An unscored magnet renders the cards only.
+ * The score is the browser's own `evaluateWaitlistScoring` run over the
+ * decoded answers (#10825), as `recommend()` already is.
+ *
+ * Mocks mirror `ResultsClient.no-commerce.test.tsx`; the translator echoes
+ * its `n` value so the "Level {n}" fallback is observable.
+ */
+import { render, screen, within } from "@testing-library/react";
+import type { FlowConfig } from "@working-theory/validation";
+
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  flows: { get: jest.fn() },
+}));
+
+// The boundary under test is ResultsClient's render, not the save action
+// (save.actions.test.ts) — the narrow-scope mock ResultsClient's suites carry.
+// eslint-disable-next-line no-restricted-syntax -- see comment above
+jest.mock("../../../save.actions", () => ({
+  saveRecommendationAction: jest.fn(),
+}));
+
+jest.mock("next-intl", () => ({
+  __esModule: true,
+  useTranslations:
+    () =>
+    (key: string, values?: { n?: number }): string =>
+      values?.n !== undefined ? `${key} ${values.n}` : key,
+  useMessages: () => ({}),
+}));
+
+import { ResultsClient } from "../ResultsClient";
+
+const SLUG = "ai-readiness";
+const en = (s: string) => ({ en: s });
+
+/** A three-option question, scored 0 / 2 / 4. */
+function question(name: string) {
+  return {
+    key: `s_${name}`,
+    type: "segmentation" as const,
+    copy: { title: en(name) },
+    questions: [
+      {
+        name,
+        options: [
+          { value: "low", label: en("Low") },
+          { value: "mid", label: en("Mid") },
+          { value: "high", label: en("High") },
+        ],
+      },
+    ],
+  };
+}
+
+const QUESTIONS = ["vision", "data", "skills"] as const;
+
+type Scoring = NonNullable<FlowConfig["scoring"]>;
+
+const SCORING = {
+  version: 1,
+  points: QUESTIONS.map((q) => ({
+    name: `p_${q}`,
+    question: q,
+    kind: "optionWeights" as const,
+    weights: { low: 0, mid: 2, high: 4 },
+  })),
+  scores: { total: { sum: QUESTIONS.map((q) => `p_${q}`) } },
+  tiers: [{ key: "all", when: { score: "total", gte: 0 } }],
+  default: "all",
+  // Register order is not alphabetical: the page keeps it.
+  dimensions: [
+    { key: "strategy", name: "Strategy", questions: ["vision"] },
+    { key: "data", name: "Data", questions: ["data"] },
+    { key: "people", name: "People", questions: ["skills"] },
+  ],
+  levels: { names: ["Exploring", "Practising", "Scaling", "Leading"] },
+} satisfies Scoring;
+
+function config(scoring: Scoring | undefined): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: QUESTIONS.map(question),
+    ...(scoring !== undefined ? { scoring } : {}),
+    offers: [
+      {
+        key: "workshop",
+        copy: { name: en("Workshop") },
+        price: { kind: "label", label: en("On request") },
+        rules: [{ when: { answer: "vision", in: ["low", "mid", "high"] }, reason: en("Start here.") }],
+      },
+    ],
+    recommendation: { key: "result", copy: { title: en("Your AI readiness") } },
+  } as FlowConfig;
+}
+
+// vision low (0/4) · data mid (2/4) · skills high (4/4) → 6 of 12 = 50%.
+const ANSWERS = { vision: "low", data: "mid", skills: "high" };
+
+function renderResults(cfg: FlowConfig): void {
+  render(<ResultsClient config={cfg} locale="en" answers={ANSWERS} slug={SLUG} payload="v1-abc" />);
+}
+
+describe("#10828 — a scored submission's results page", () => {
+  it("renders the overall score as points and its Level name", () => {
+    renderResults(config(SCORING));
+    const total = screen.getByTestId("flow-results-score-total");
+    expect(within(total).getByTestId("flow-results-score-total-points")).toHaveTextContent("6 / 12");
+    // 50% of all points is Level 3.
+    expect(within(total).getByTestId("flow-results-score-total-level")).toHaveTextContent("Scaling");
+  });
+
+  it("renders one labelled bar with its Level per dimension, in register order", () => {
+    renderResults(config(SCORING));
+    const region = screen.getByTestId("flow-results-score");
+    const meters = within(region).getAllByRole("meter");
+    // The overall meter, then Strategy · Data · People as the register lists them.
+    expect(meters.map((m) => m.getAttribute("aria-label"))).toEqual(["score", "Strategy", "Data", "People"]);
+    expect(meters.map((m) => m.getAttribute("aria-valuetext"))).toEqual([
+      "6 / 12, Scaling",
+      "0 / 4, Exploring",
+      "2 / 4, Scaling",
+      "4 / 4, Leading",
+    ]);
+    expect(screen.getByTestId("flow-results-score-dimension-data-level")).toHaveTextContent("Scaling");
+  });
+
+  it("renders the score after the heading and before the cards", () => {
+    renderResults(config(SCORING));
+    const heading = screen.getByRole("heading", { name: "Your AI readiness" });
+    const score = screen.getByTestId("flow-results-score");
+    const card = screen.getByTestId("recommendation-card-workshop");
+    expect(heading.compareDocumentPosition(score) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(score.compareDocumentPosition(card) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("names a Level 'Level {n}' when the register names none", () => {
+    const { levels: _levels, ...unnamed } = SCORING;
+    renderResults(config(unnamed));
+    expect(screen.getByTestId("flow-results-score-total-level")).toHaveTextContent("label 3");
+  });
+
+  it("renders the overall score alone for a register with no dimensions", () => {
+    const { dimensions: _dimensions, ...flat } = SCORING;
+    renderResults(config(flat));
+    expect(within(screen.getByTestId("flow-results-score")).getAllByRole("meter")).toHaveLength(1);
+  });
+});
+
+describe("#10828 — an unscored magnet's results page", () => {
+  it("renders the cards only — no score, no bar", () => {
+    renderResults(config(undefined));
+    expect(screen.queryByTestId("flow-results-score")).toBeNull();
+    expect(screen.queryAllByRole("meter")).toHaveLength(0);
+    expect(screen.getByTestId("recommendation-card-workshop")).toBeInTheDocument();
+  });
+
+  it("renders the cards only for a register that scores no points", () => {
+    renderResults(
+      config({
+        ...SCORING,
+        points: [],
+        scores: {},
+        tiers: [{ key: "all", when: { answer: "vision", in: ["low", "mid", "high"] } }],
+        dimensions: [],
+      }),
+    );
+    expect(screen.queryByTestId("flow-results-score")).toBeNull();
+    expect(screen.getByTestId("recommendation-card-workshop")).toBeInTheDocument();
+  });
+});

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

@@ -11,7 +11,8 @@
  * — step 1, never an error page — on ANY of: an invalid payload (FR6), a
  * stale-version payload (FR6), a payload whose own `flowSlug` does not match
  * this route's `[slug]` (D2/FR6), or a served flow that is not a
- * recommending register (D8 — `mode !== "recommending" || !offers`, checked
+ * recommending register (D8 — `mode !== "recommending"`, or neither `offers`
+ * nor `recommendation.byResult` (#10827), checked
  * against the field `recommend()` is about to be handed rather than
  * inferring the compiler's five-keys-travel-together guarantee).
  *
@@ -34,11 +35,22 @@
  * key no longer shown, any failed read). The URL is built only from an
  * allowlisted locale and a `parseLookupKey` plan. A flow with no such offer,
  * or whose first fit carries none, renders as before with no read.
+ *
+ * #10827 — the by-result rows. `recommend()` returns the first matching
+ * row's `routeTo` (a legacy offer rule read as a row when the flow carries
+ * no `recommendation.byResult`; the landing above is that row's checkout
+ * kind for a `{plan}` key). A checkout row with a full lookup key goes
+ * straight to the Offerings buy route while the key is shown; an offering
+ * row — or a checkout row whose offering is not shown, a draft — renders
+ * the results page with one card named from the offering, priced only
+ * while the offering is shown.
  */
 import { flows, offerings } from "@working-theory/api-client";
 import {
   decodePermalink,
   type FlowConfig,
+  type FlowResultRouteTo,
+  flowRecommendRegister,
   parseLookupKey,
   recommend,
   resolveLocalizedString,
@@ -51,8 +63,9 @@ import { redirect } from "next/navigation";
 import type { ReactElement } from "react";
 
 import { browserApiOrigin } from "../../../../../../lib/api-origin.generated";
+import { offeringsCheckoutHref } from "../../../../../../lib/offerings-pricing";
 
-import type { ResultsReturnState } from "./ResultsClient";
+import type { ResultsOfferingCard, ResultsReturnState } from "./ResultsClient";
 import { ResultsClient } from "./ResultsClient";
 
 export const dynamic = "force-dynamic";
@@ -142,58 +155,109 @@ function isOfferingsOffer(offer: unknown): boolean {
   );
 }
 
+/** #10827 — a shown set's prices of `offeringKey`: its own key, else its plan's. */
+function shownPricesOf(shown: WorkspaceShownSetWire | null, offeringKey: string) {
+  const exact = parseLookupKey(offeringKey);
+  const plan = exact?.plan ?? offeringKey;
+  const product = shown?.offerings.find((o) => o.prices.some((p) => p.plan === plan));
+  const prices = product?.prices ?? [];
+  return {
+    plan,
+    product,
+    price:
+      exact !== null
+        ? prices.find((p) => p.lookupKey === offeringKey)
+        : (prices.find((p) => p.period === "monthly") ?? prices[0]),
+  };
+}
+
+type ResultLanding =
+  | { kind: "redirect"; url: string }
+  | { kind: "render"; card?: ResultsOfferingCard };
+
 /**
- * #9071 D3 — where a completed Offerings recommender lands, or `null` to
- * render the results page as before. The served config is not re-parsed
- * here, so every read of it is shape-checked and any throw is `null`.
+ * #9071 D3 / #10827 — where a completed walk lands: a redirect (the
+ * `/pricing?plan=` landing, or checkout), or the results page with the
+ * matched row's offering card. The served config is not re-parsed here, so
+ * every read of it is shape-checked and any throw renders as before.
  */
-async function recommenderLanding(
+async function resultLanding(
   config: FlowConfig,
   answers: WaitlistAnswers,
   locale: string,
-): Promise<string | null> {
+): Promise<ResultLanding> {
   try {
+    const byResult: unknown = config.recommendation?.byResult;
+    const authored = Array.isArray(byResult);
     const offers: unknown = config.offers;
-    if (!Array.isArray(offers) || !offers.some(isOfferingsOffer)) return null;
+    if (!authored && !(Array.isArray(offers) && offers.some(isOfferingsOffer))) {
+      return { kind: "render" };
+    }
 
-    let fitKey: string | undefined;
+    let routeTo: FlowResultRouteTo | undefined;
     try {
-      fitKey = recommend(
-        {
-          key: config.experiment?.key ?? config.slug,
-          offers: config.offers,
-          pairings: config.pairings,
-          rateTable: config.rateTable,
-          scoring: config.scoring,
-        },
-        answers,
-      ).fits[0]?.offerKey;
+      routeTo = recommend(flowRecommendRegister(config), answers).routeTo;
     } catch {
-      fitKey = undefined;
+      routeTo = undefined;
     }
-    const fit: unknown =
-      fitKey === undefined
-        ? undefined
-        : offers.find(
-            (o: unknown) =>
-              typeof o === "object" && o !== null && (o as { key?: unknown }).key === fitKey,
-          );
-    if (fit !== undefined && !isOfferingsOffer(fit)) return null;
 
     const safeLocale = ENABLED_LOCALES.includes(locale) ? locale : DEFAULT_LOCALE;
     const base = `/${safeLocale}/pricing`;
-    if (fit === undefined) return base;
-    const lookupKey = (fit as { lookupKey: string }).lookupKey;
-    const parsed = parseLookupKey(lookupKey);
-    if (parsed === null) return base;
+    if (routeTo === undefined || routeTo.kind === "none") {
+      // An Offerings recommender with no fit lands on /pricing with no badge.
+      return authored ? { kind: "render" } : { kind: "redirect", url: base };
+    }
+    if (!authored && routeTo.kind === "offering") return { kind: "render" };
 
+    const { offeringKey } = routeTo;
     const shown = await readCurrentShownSet();
-    const isShown =
-      shown?.offerings.some((o) => o.prices.some((p) => p.lookupKey === lookupKey)) ??
-      false;
-    return isShown ? `${base}?plan=${parsed.plan}` : base;
+    const { plan, product, price } = shownPricesOf(shown, offeringKey);
+    // Built from the shown set's own grammar-checked Price, never the config key.
+    let checkoutHref: string | null = null;
+    if (routeTo.kind === "checkout") {
+      // A `{plan}` key lands on /pricing?plan=. A full key goes straight to
+      // the buy route — from the browser (`ResultsClient`), because the walk
+      // arrives by a client-side navigation and the buy route refuses
+      // anything but a top-level document load.
+      if (price !== undefined && parseLookupKey(offeringKey) === null) {
+        return { kind: "redirect", url: `${base}?plan=${price.plan}` };
+      }
+      if (price !== undefined) checkoutHref = offeringsCheckoutHref(price.lookupKey);
+      if (checkoutHref === null && !authored) return { kind: "redirect", url: base };
+    }
+
+    // An offering's card — or a checkout row's offering not shown (a draft).
+    const legacy = Array.isArray(offers)
+      ? (offers as unknown[]).find(
+          (o): o is { copy: { name: Parameters<typeof resolveLocalizedString>[0] } } =>
+            typeof o === "object" &&
+            o !== null &&
+            (o as { key?: unknown }).key === offeringKey &&
+            (o as { copy?: { name?: unknown } }).copy?.name !== undefined,
+        )
+      : undefined;
+    // `/pricing`'s last guard before markup: no format or control characters.
+    const title =
+      product?.name.replace(/[\p{Cc}\p{Cf}\p{Zl}\p{Zp}\p{Cs}]/gu, "") ??
+      (legacy
+        ? resolveLocalizedString(legacy.copy.name, locale, config.defaultLocale)
+        : plan.charAt(0).toUpperCase() + plan.slice(1).replace(/-/g, " "));
+    return {
+      kind: "render",
+      card: {
+        offeringKey,
+        title,
+        ...(price !== undefined
+          ? {
+              price: { amount: price.amount, currency: price.currency, period: price.period },
+              href: checkoutHref ?? `${base}?plan=${price.plan}`,
+            }
+          : {}),
+        ...(checkoutHref !== null ? { checkoutOnLoad: true } : {}),
+      },
+    };
   } catch {
-    return null;
+    return { kind: "render" };
   }
 }
 
@@ -236,16 +300,19 @@ export default async function Page({
   if (!res.ok) {
     redirect(`/${locale}/flows/${slug}`);
   }
-  if (res.body.mode !== "recommending" || res.body.offers === undefined) {
+  if (
+    res.body.mode !== "recommending" ||
+    (res.body.offers === undefined && res.body.recommendation?.byResult === undefined)
+  ) {
     redirect(`/${locale}/flows/${slug}`);
   }
 
-  const landing = await recommenderLanding(
+  const landing = await resultLanding(
     res.body,
     decoded.value.answers,
     locale,
   );
-  if (landing !== null) redirect(landing);
+  if (landing.kind === "redirect") redirect(landing.url);
 
   // FR7 — read AFTER every redirect guard above, so a return param never
   // changes which guard fires or where it sends the visitor.
@@ -258,6 +325,7 @@ export default async function Page({
       answers={decoded.value.answers}
       slug={slug}
       payload={payload}
+      {...(landing.card !== undefined ? { offeringCard: landing.card } : {})}
       {...(returnState !== undefined ? { returnState } : {})}
     />
   );

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

@@ -0,0 +1,153 @@
+// oss: false
+/**
+ * `/[locale]/flows/[slug]/verify` — a magnet Lead's confirm page (#10826,
+ * spec docs/specs/10826-the-four-conversions-as-completion-spec.md D5).
+ * `noindex`.
+ *
+ * Three states, in this precedence:
+ *   - `?lead=<id>&verify=<nonce>` → a confirm card holding ONE button. The GET
+ *                    writes nothing and calls no API: the button posts to
+ *                    `confirmLeadEmailAction`, bound to the slug, the Lead id,
+ *                    the nonce and the locale (no hidden input carries them),
+ *                    so a mail scanner or a link preview that fetches the
+ *                    link verifies nothing — only a person's click does.
+ *   - `?confirmed=1` → the verified card, with a link back to the magnet.
+ *   - `?error=…`, or any other query → the expired-or-invalid card.
+ *
+ * The link is the API's single-use nonce (`services/email-verification.ts`):
+ * one confirm spends it, and it expires after 24 hours. `lead` and `verify`
+ * are in both telemetry scrub lists.
+ */
+
+import { localeHref } from "@working-theory/ui";
+import { AuthCard, type AuthCardLabels } from "@working-theory/ui/blocks";
+import { Button, Text } from "@working-theory/ui/primitives";
+import { flowSlugSchema } from "@working-theory/validation";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { siteLogo } from "../../../../../lib/site-logo";
+import { confirmLeadEmailAction } from "../verify.actions";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  searchParams?: Promise<{
+    lead?: string | string[];
+    verify?: string | string[];
+    confirmed?: string | string[];
+    error?: string | string[];
+  }>;
+}
+
+const LEAD_ID_RE = /^lead_[0-9a-f-]{36}$/;
+
+function firstValue(raw: string | string[] | undefined): string {
+  if (Array.isArray(raw)) return raw[0] ?? "";
+  return raw ?? "";
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "flowVerify" });
+  return { title: t("title"), robots: { index: false, follow: false } };
+}
+
+export default async function FlowVerifyPage({
+  params,
+  searchParams,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  if (!flowSlugSchema.safeParse(slug).success) notFound();
+  const t = await getTranslations({ locale, namespace: "flowVerify" });
+  const magnetHref = localeHref(locale, `/flows/${slug}`);
+
+  const query = searchParams ? await searchParams : {};
+  const leadId = firstValue(query.lead);
+  const nonce = firstValue(query.verify);
+
+  if (LEAD_ID_RE.test(leadId) && nonce.length >= 1 && nonce.length <= 256) {
+    const labels: AuthCardLabels = {
+      sentHeading: t("confirmHeading"),
+      sentSubhead: t("confirmSubhead"),
+      backToSignIn: t("back"),
+    };
+    return (
+      <div className="flex flex-col gap-4" data-testid="flow-verify-page">
+        <div data-testid="flow-verify-confirm">
+          <AuthCard
+            logo={siteLogo()}
+            intent="sent"
+            signInHref={magnetHref}
+            labels={labels}
+            body={
+              <form
+                action={confirmLeadEmailAction.bind(
+                  null,
+                  slug,
+                  leadId,
+                  nonce,
+                  locale,
+                )}
+                className="flex flex-col gap-5 text-center"
+              >
+                <Text variant="body-sm" tone="muted">
+                  {t("confirmBody")}
+                </Text>
+                <Button
+                  type="submit"
+                  size="big"
+                  className="min-h-11 w-full"
+                  data-testid="flow-verify-confirm-button"
+                >
+                  {t("confirmButton")}
+                </Button>
+              </form>
+            }
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (firstValue(query.confirmed) === "1") {
+    const labels: AuthCardLabels = {
+      sentHeading: t("confirmedHeading"),
+      sentSubhead: t("confirmedSubhead"),
+      sentBody: t("confirmedBody"),
+      backToSignIn: t("back"),
+    };
+    return (
+      <div className="flex flex-col gap-4" data-testid="flow-verify-page">
+        <div data-testid="flow-verify-confirmed">
+          <AuthCard
+            logo={siteLogo()}
+            intent="sent"
+            signInHref={magnetHref}
+            labels={labels}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const labels: AuthCardLabels = {
+    invitationHeading: t("errorHeading"),
+    invitationSubhead: t("errorSubhead"),
+    invitationBody: t("errorBody"),
+    backToSignIn: t("back"),
+  };
+  return (
+    <div className="flex flex-col gap-4" data-testid="flow-verify-page">
+      <div data-testid="flow-verify-error">
+        <AuthCard
+          logo={siteLogo()}
+          intent="invitation"
+          signInHref={magnetHref}
+          labels={labels}
+        />
+      </div>
+    </div>
+  );
+}