@evinvest/kitstart 0.13.0 → 0.15.0

package/dist/react/use-lead-focus.js

@@ -0,0 +1,70 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { focusNext, focusStep, nextEmpty, OFF_SELECTOR } from "./focus-next.js";
+/** A screen on or off as `LeadSteps` draws it: the mark and the inline style. */
+function setOff(step, off) {
+    step.toggleAttribute("data-lead-off", off);
+    step.style.display = off ? "none" : "";
+}
+/**
+ * Where the focus goes once the visitor has answered: to the next screen in
+ * `steps`, else — with `focusNext` — to the next empty field.
+ *
+ * `moveOn(change, from, stable)` applies the answer. When it changes no
+ * screen (`stable`) and what comes next is a typed field, that field is
+ * revealed and focused inside the tap: iOS opens the keyboard only for a
+ * focus a gesture made. Otherwise the focus moves once React has drawn the
+ * change. `focusAfterSelect()`: the same after the kit's select, whose list
+ * hands the focus back to its trigger as it closes — so it waits for that.
+ */
+export function useLeadFocus(form, o) {
+    const { steps, current } = o;
+    const pending = useRef(null);
+    const revealed = useRef(null);
+    const afterSelect = useRef(false);
+    useLayoutEffect(() => {
+        const el = steps ? form() : null;
+        // A screen revealed ahead of React is React's again: only the current one shows.
+        for (const step of el?.querySelectorAll("[data-lead-step]") ?? [])
+            setOff(step, step.dataset["leadStep"] !== current);
+        // Revealed ahead, but not the screen React put on (a postcode typed and never confirmed): that screen's field instead.
+        const lost = revealed.current?.closest(OFF_SELECTOR) != null;
+        revealed.current = null;
+        const move = pending.current ?? (lost ? { from: null } : null);
+        if (!move)
+            return;
+        pending.current = null;
+        if (steps)
+            focusStep(el?.querySelector("[data-lead-step]:not([data-lead-off])"));
+        else
+            focusNext(form(), move.from);
+    });
+    // Passive, so after the select's own effect has given its trigger the focus back.
+    useEffect(() => {
+        if (!afterSelect.current)
+            return;
+        afterSelect.current = false;
+        focusNext(form(), null);
+    });
+    return {
+        moveOn(change, from, stable) {
+            if (!steps && !o.focusNext)
+                return change();
+            change();
+            const el = form();
+            const next = stable && el ? nextEmpty(el, from, steps) : null;
+            if (next && next.type !== "radio") {
+                const step = next.closest("[data-lead-step]");
+                if (step)
+                    setOff(step, false);
+                next.focus();
+                revealed.current = next;
+            }
+            else
+                pending.current = { from };
+        },
+        focusAfterSelect() {
+            afterSelect.current = o.focusNext;
+        },
+    };
+}

package/dist/server/experiments-declared.d.ts

@@ -3,16 +3,20 @@ import type { LeadWebhook } from "./lead-webhook.js";
 /**
  * One experiment as the code declares it — the shape of an
  * `@evinvest/experiments` spec, so the brand's `as const` config is passed
- * as is. `variants[0]` is the control.
+ * as is. `variants[0]` is the control. No weights: the code splits equally,
+ * and re-weighting is the panel's override.
  */
 export interface DeclaredExperiment {
     readonly variants: readonly string[];
-    readonly weights: readonly number[];
     readonly enabled?: boolean;
     readonly holdout?: number;
 }
 export type ExperimentsDeclaration = Readonly<Record<string, DeclaredExperiment>>;
-/** `ExperimentDeclaration` of the panel's `experiments.declared@1`. */
+/**
+ * `ExperimentDeclaration` of the panel's `experiments.declared@1`. `weights`
+ * stays in the contract; the code always sends one each (the equal split it
+ * runs without an override).
+ */
 export interface ExperimentDeclarationV1 {
     key: string;
     variants: string[];

package/dist/server/experiments-declared.js

@@ -17,12 +17,6 @@ export function declarationProblem(key, spec, summary) {
         return "a variant is declared twice";
     if (!spec.variants.every(v => EXPERIMENT_SLUG.test(v)))
         return "a variant is not a slug ([a-z0-9_-]{1,32})";
-    if (spec.weights.length !== spec.variants.length)
-        return "not one weight per variant";
-    if (!spec.weights.every(w => Number.isFinite(w) && w >= 0))
-        return "a weight is negative or not a number";
-    if (spec.weights.reduce((sum, w) => sum + w, 0) <= 0)
-        return "the weights sum to zero";
     if (spec.holdout !== undefined && !(Number.isFinite(spec.holdout) && spec.holdout >= 0 && spec.holdout < 1))
         return "the holdout is not in [0, 1)";
     if (summary !== undefined && summary.length > MAX_SUMMARY)
@@ -60,7 +54,7 @@ export function experimentsDeclaredBody(experiments, ctx) {
         declared.push({
             key,
             variants: [...spec.variants],
-            weights: [...spec.weights],
+            weights: spec.variants.map(() => 1),
             enabled: spec.enabled ?? true,
             ...(spec.holdout !== undefined ? { holdout: spec.holdout } : {}),
             ...(summary !== undefined && summary !== "" ? { summary } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Landing-site machinery for local-service brands: a site composition root, the Place/Presence/ServiceArea model with a publication gate, host/locale routing, schema.org and SEO builders, the lead funnel with its antispam, and analytics events. Pure core at '.', more subpaths per runtime.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/template/app/[locale]/[location]/layout.tsx

@@ -1,7 +1,8 @@
-import { AnalyticsBoundary } from "@evinvest/kitstart/react";
+import { AbSwitcher, AnalyticsBoundary } from "@evinvest/kitstart/react";
 import type { ReactNode } from "react";
 import { loadPlace } from "@/views/place/server";
 import { serverEnv } from "@/shared/config/env";
+import { EXPERIMENTS, QA_COOKIE } from "@/shared/config/experiments";
 import { site } from "@/shared/config/site";
 
 /**
@@ -24,6 +25,8 @@ export default async function PlaceLayout({ children, params }: { children: Reac
   return (
     <AnalyticsBoundary target={{ key: env.posthogKey, host: env.posthogHost, brandId: site.brand.id }} placeSlug={view.place.slug}>
       {children}
+      {/* Above the phone's call bar; nothing at all for a visit without the QA cookie. */}
+      <AbSwitcher experiments={EXPERIMENTS} qaCookie={QA_COOKIE} className="bottom-20 md:bottom-4" />
     </AnalyticsBoundary>
   );
 }

package/template/app/[locale]/[location]/prices/page.tsx

@@ -3,6 +3,8 @@ import { placeMetadata } from "@evinvest/kitstart/next";
 import { Faq, JsonLd, Section } from "@evinvest/kitstart/react";
 import type { Metadata } from "next";
 import { loadPlace } from "@/views/place/server";
+import { EstimateCard } from "@/views/prices";
+import { pricing } from "@/shared/config/env";
 import { site } from "@/shared/config/site";
 
 type Props = { params: Promise<{ locale: string; location: string }> };
@@ -14,10 +16,13 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function PricesPage({ params }: Props) {
-  const { copy } = await loadPlace(params);
+  const [{ view, copy, renderedAt }, model] = await Promise.all([loadPlace(params), pricing.model()]);
   return (
     <main>
       <JsonLd data={faqPageNode(copy.t.faqs)} />
+      <Section surface="card">
+        <EstimateCard view={view} copy={copy} renderedAt={renderedAt} model={model} />
+      </Section>
       <Section>
         <Faq items={copy.t.faqs} />
       </Section>

package/template/flake.nix

@@ -3,7 +3,7 @@
     v_flakes.url = "github:valeratrades/v_flakes?ref=v1.6";
     # The lib flake at the tag of the @evinvest/kitstart version in
     # package-lock.json — mkLanding refuses a mismatch.
-    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.13.0";
+    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.15.0";
     ev.inputs.v_flakes.follows = "v_flakes";
   };
 

package/template/package.json

@@ -18,9 +18,9 @@
     "lint": "eslint . && steiger ./src"
   },
   "dependencies": {
-    "@evinvest/analytics": "^0.3.0",
+    "@evinvest/analytics": "^0.4.0",
     "@evinvest/i18n": "^0.9.0",
-    "@evinvest/kitstart": "^0.13.0",
+    "@evinvest/kitstart": "^0.15.0",
     "@evinvest/marketing": "^0.3.0",
     "@evinvest/uikit": "^0.26.0",
     "next": "16.3.6",

package/template/src/entities/content/model/en.ts

@@ -43,5 +43,12 @@ export const EN = {
   contactLabel: "Contact us",
   subjects: { standard: "Regular cleaning", deep: "Deep cleaning", other: "Other", recurring: "Recurring cleaning" },
   leadCapture: { ...LEAD_CAPTURE_TEXT.en, needLabel: "Service" },
+  estimateForm: {
+    title: "Your price in four questions",
+    lede: "One question at a time, the price at the end.",
+    when: { label: "When do you need it?", today: "Urgent — today", week: "This week", compare: "Just comparing" },
+    afterPhone: "Your number stays with us — a call back within 15 min.",
+    badge: "Best value",
+  },
   faqs: [{ q: "Can the price change?", a: "No: the price quoted is the price you pay." }],
 } satisfies Text;

package/template/src/entities/content/model/fr.ts

@@ -43,5 +43,12 @@ export const FR = {
   contactLabel: "Nous contacter",
   subjects: { standard: "Ménage courant", deep: "Grand ménage", other: "Autre", recurring: "Ménage régulier" },
   leadCapture: { ...LEAD_CAPTURE_TEXT.fr, needLabel: "Prestation" },
+  estimateForm: {
+    title: "Votre prix en quatre questions",
+    lede: "Une question à la fois, le prix à la fin.",
+    when: { label: "C’est pour quand ?", today: "Urgent — aujourd’hui", week: "Cette semaine", compare: "Je compare" },
+    afterPhone: "Votre numéro reste entre nous — rappel sous 15 min.",
+    badge: "Le plus avantageux",
+  },
   faqs: [{ q: "Le prix peut-il changer ?", a: "Non : le prix annoncé est celui que vous payez." }],
 } satisfies Text;

package/template/src/entities/content/model/types.ts

@@ -32,6 +32,14 @@ export interface Text extends CoreText<PageKey, Facts> {
   subjects: Record<Subject, string>;
   /** The lead form's words: the kit's, with the brand's overrides spread over them. */
   leadCapture: LeadCaptureText;
+  /** The prices page's estimate, one question a screen: its heading, the intro question, the line under the phone. */
+  estimateForm: {
+    title: string;
+    lede: string;
+    when: { label: string; today: string; week: string; compare: string };
+    afterPhone: string;
+    badge: string;
+  };
   faqs: readonly { q: string; a: string }[];
 }
 

package/template/src/shared/config/experiments.ts

@@ -0,0 +1,21 @@
+import type { AbSwitcherExperiment } from "@evinvest/kitstart/react";
+
+/**
+ * The experiments the QA menu switches — a demo: the template's proxy runs
+ * none, so a forced `?ab_lead_form=b` changes nothing here. A brand lists the
+ * experiments its proxy assigns, with the QA cookie its force parameter sets.
+ */
+export const EXPERIMENTS: readonly AbSwitcherExperiment[] = [
+  {
+    key: "lead_form",
+    label: "Lead form",
+    variants: [
+      { value: "a", label: "Compact" },
+      { value: "b", label: "Steps" },
+      { value: "c", label: "Price first" },
+    ],
+  },
+];
+
+/** Set by `?ab_<key>=<value>`; a visit carrying it is a test, and sees the menu. */
+export const QA_COOKIE = "ab__qa";

package/template/src/shared/config/lead.ts

@@ -22,7 +22,11 @@ export const PHOTO_NEEDS: readonly Subject[] = ["deep"];
 export const LEAD: LeadSchema<Subject> = {
   subjects: SUBJECTS,
   wire: { subject: "subject", locality: "locality", mobile: "mobile" },
-  extras: [{ name: "surface_m2", max: 6 }],
+  // `urgency`: the prices page's intro question (`today` | `week` | `compare`), kept with the lead.
+  extras: [
+    { name: "surface_m2", max: 6 },
+    { name: "urgency", max: 16 },
+  ],
   // One shape for the mail, the webhook and a dialler: `+33612345678`.
   mobileFormat: "e164",
   validate: validateLead,

package/template/src/views/prices/index.ts

@@ -0,0 +1 @@
+export { EstimateCard } from "./ui/EstimateCard";

package/template/src/views/prices/ui/EstimateCard.tsx

@@ -0,0 +1,66 @@
+import { contactOf, type PlaceView, type PricingModel } from "@evinvest/kitstart";
+import { LeadCapture } from "@evinvest/kitstart/react";
+import type { ReactNode } from "react";
+import type { Copy } from "@/entities/content";
+import type { Locale } from "@/shared/config/i18n";
+import { LEAD, PHOTO_NEEDS, type Subject } from "@/shared/config/lead";
+import { site } from "@/shared/config/site";
+
+/** A placeholder mark per need: a brand draws its own. Hidden from assistive technology by the card. */
+const icon = (d: string): ReactNode => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    <path d={d} />
+  </svg>
+);
+const ICONS: Record<Subject, ReactNode> = {
+  standard: icon("M4 20h16M6 20V9l6-5 6 5v11"),
+  deep: icon("M12 3v18M3 12h18"),
+  other: icon("M12 8v4m0 4h.01M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18"),
+  recurring: icon("M4 12a8 8 0 0 1 14-5.3L20 9M20 12a8 8 0 0 1-14 5.3L4 15"),
+};
+
+/**
+ * The prices page's estimate: the kit's `LeadCapture` one question a screen
+ * (`steps`) — how urgent first (an urgent job is a call back, the phone
+ * alone), the need as cards, the regular clean's answers with "I don't know"
+ * for the surface and the frequency as cards that carry their price, and the
+ * price on one line with the tax credit. A card of its own (`#estimate`), so
+ * the home page's form and its call bar are untouched.
+ */
+export function EstimateCard({ view, copy, renderedAt, model }: { view: PlaceView<Locale>; copy: Copy; renderedAt: number; model: PricingModel | null }) {
+  const { t } = copy;
+  const e = t.estimateForm;
+  return (
+    <LeadCapture
+      id="estimate"
+      formId="estimate"
+      layout="steps"
+      place={view.place}
+      contact={contactOf(site, view.place)}
+      locale={view.locale}
+      renderedAt={renderedAt}
+      wire={LEAD.wire}
+      needs={LEAD.subjects.map(s => ({ value: s, label: t.subjects[s], icon: ICONS[s] }))}
+      needDisplay="cards"
+      intro={{
+        label: e.when.label,
+        field: "urgency",
+        options: [
+          { value: "today", label: e.when.today, channel: "callback" },
+          { value: "week", label: e.when.week },
+          { value: "compare", label: e.when.compare },
+        ],
+      }}
+      flows={LEAD.flows}
+      pricing={model}
+      photos={PHOTO_NEEDS}
+      questions={{ surface: { unknown: true }, frequency: { display: "cards", badges: { biweekly: e.badge } } }}
+      price="compact"
+      taxCredit={0.5}
+      afterPhone={<p className="text-sm text-ink-soft">{e.afterPhone}</p>}
+      channelsDisplay="row"
+      text={{ ...t.leadCapture, title: e.title, lede: e.lede, privacy: "" }}
+      className="max-w-md"
+    />
+  );
+}

package/template/tests/bundle_budget.txt

@@ -10,6 +10,7 @@
 # Over it now, on purpose: the form became `LeadCapture`, a client island
 # (162,985 B gz, +3.2 %) — a warning to pay back, not a new target. The form
 # variants (an estimate's tiles and live price, the priced success) add
-# about 3.9 KB gz more (170,375 B gz, +7.8 %).
+# about 3.9 KB gz more (170,375 B gz, +7.8 %); one question a screen and the
+# compact form's pieces about 9 KB more (179,430 B gz, +13.6 %).
 158000
 tolerance 20%

package/template/tests/e2e/ab-switcher.spec.ts

@@ -0,0 +1,99 @@
+import { expect, test, type BrowserContext, type Page, type Response } from "@playwright/test";
+import { QA_COOKIE } from "../../src/shared/config/experiments";
+
+// The QA menu (`AbSwitcher`): a visit with the QA cookie gets the chip and
+// its panel, loaded on demand; a visitor without it gets neither — the
+// panel's chunk is never even requested. A tap on a variant is the brand's
+// own force parameter; the reset drops it and keeps the visit a test.
+
+const hydrated = (page: Page) => expect(page.locator("#quote select")).toHaveCount(0);
+const chip = (page: Page) => page.getByRole("button", { name: "A/B test switcher" });
+const panel = (page: Page) => page.getByRole("dialog", { name: "A/B test switcher" });
+const scripts = (page: Page) => {
+  const seen: Response[] = [];
+  page.on("response", r => void (new URL(r.url()).pathname.endsWith(".js") && seen.push(r)));
+  return seen;
+};
+const asTester = (context: BrowserContext, baseURL: string | undefined) => context.addCookies([{ name: QA_COOKIE, value: "1", url: baseURL ?? "" }]);
+const cookieNames = async (context: BrowserContext) => (await context.cookies()).map(c => c.name);
+
+/** A test visit assigned `b`, as the brand's proxy would have left it, on a page that forces it. */
+async function assignedB(page: Page, context: BrowserContext, baseURL: string | undefined) {
+  await asTester(context, baseURL);
+  await context.addCookies([{ name: "ab_lead_form", value: "b", url: baseURL ?? "" }]);
+  await page.goto("/fr?ab_lead_form=b&utm_x=1");
+  await chip(page).click();
+  await expect(panel(page)).toBeVisible();
+}
+
+test("a new visitor gets no menu and never fetches its panel; a test visit gets both", async ({ page, context, baseURL }) => {
+  const visitor = scripts(page);
+  await page.goto("/fr");
+  await hydrated(page);
+  // Settled: the gate's effect ran on hydration, and anything it fetched is in.
+  await page.waitForLoadState("networkidle");
+  await expect(chip(page)).toHaveCount(0);
+  const fetched = visitor.map(r => r.url());
+
+  await asTester(context, baseURL);
+  const tester = scripts(page);
+  await page.goto("/fr");
+  await chip(page).click();
+  await expect(panel(page)).toBeVisible();
+  const marked = await Promise.all(tester.map(async r => ((await r.text()).includes("data-ab-switcher") ? r.url() : null)));
+  const chunks = marked.filter(u => u !== null);
+  expect(chunks.length).toBeGreaterThan(0);
+  for (const url of chunks) expect(fetched).not.toContain(url);
+});
+
+test("a variant's tap forces it by the URL; the reset drops the force and keeps the visit a test", async ({ page, context, baseURL }) => {
+  await asTester(context, baseURL);
+  await page.goto("/fr?utm_source=qa");
+  await chip(page).click();
+  await panel(page).getByRole("button", { name: "Steps" }).click();
+  await expect(page).toHaveURL(/\/fr\?utm_source=qa&ab_lead_form=b$/);
+
+  await chip(page).click();
+  await panel(page).getByRole("button", { name: "Reset", exact: true }).click();
+  await expect(page).toHaveURL(/\/fr\?utm_source=qa$/);
+  expect((await context.cookies()).map(c => c.name)).toContain(QA_COOKIE);
+  await expect(chip(page)).toBeVisible();
+});
+
+test("Reset drops the assignment and its force, keeps the other parameters and the QA cookie, and the chip", async ({ page, context, baseURL }) => {
+  await assignedB(page, context, baseURL);
+  await expect(panel(page).getByRole("button", { name: "Steps" })).toHaveAttribute("aria-pressed", "true");
+  await panel(page).getByRole("button", { name: "Reset", exact: true }).click();
+  await expect(page).toHaveURL(/\/fr\?utm_x=1$/);
+  const names = await cookieNames(context);
+  expect(names).not.toContain("ab_lead_form");
+  expect(names).toContain(QA_COOKIE);
+  await expect(chip(page)).toBeVisible();
+});
+
+test("Leave test drops the QA cookie too: after the load there is no chip", async ({ page, context, baseURL }) => {
+  await assignedB(page, context, baseURL);
+  await panel(page).getByRole("button", { name: "Leave test" }).click();
+  await expect(page).toHaveURL(/\/fr\?utm_x=1$/);
+  await hydrated(page);
+  // Settled: the gate decided on hydration, and a panel it fetched would be in.
+  await page.waitForLoadState("networkidle");
+  expect(await cookieNames(context)).not.toContain(QA_COOKIE);
+  expect(await cookieNames(context)).not.toContain("ab_lead_form");
+  await expect(chip(page)).toHaveCount(0);
+});
+
+test("Escape closes the panel and gives the focus back to the chip", async ({ page, context, baseURL }) => {
+  await assignedB(page, context, baseURL);
+  await page.keyboard.press("Escape");
+  await expect(panel(page)).toHaveCount(0);
+  await expect(chip(page)).toBeFocused();
+});
+
+test("Hide removes the chip until the next load", async ({ page, context, baseURL }) => {
+  await assignedB(page, context, baseURL);
+  await panel(page).getByRole("button", { name: "Hide" }).click();
+  await expect(chip(page)).toHaveCount(0);
+  await page.reload();
+  await expect(chip(page)).toBeVisible();
+});

package/template/tests/e2e/screenshot-section.css

@@ -3,3 +3,9 @@
 #callbar {
   display: none !important;
 }
+
+/* The QA menu (`AbSwitcher`) rides the viewport too, and only a test visit
+ * sees it: never part of a section. */
+[data-ab-switcher] {
+  display: none !important;
+}

package/template/tests/e2e/steps.spec.ts

@@ -0,0 +1,138 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+
+// The prices page's estimate (`EstimateCard`): `LeadCapture` one question a
+// screen. The intro first — urgent is a call back, the phone alone — then the
+// need as cards, the regular clean's answers (the surface may be "I don't
+// know", the frequency is cards that carry their price), the postcode, and
+// the phone last under the price on one line.
+
+const form = (page: Page) => page.locator("#estimate-form");
+const screenOn = (page: Page) => form(page).locator("[data-lead-step]:not([data-lead-off])");
+// The radio lies over its tile, as a finger meets it: a tap on the tile is a tap on the radio.
+const tile = (page: Page, name: string) =>
+  screenOn(page)
+    .locator("label")
+    .filter({ has: page.getByText(name, { exact: true }) })
+    .locator("input[type=radio]");
+const quote = (page: Page) => page.waitForResponse(r => r.request().method() === "POST" && new URL(r.url()).pathname === "/quote");
+
+async function open(page: Page) {
+  // Monday 10:00 in Paris: open, so the folded callback is below the form, not leading it.
+  await page.clock.setFixedTime(new Date("2026-10-05T08:00:00Z"));
+  await page.goto("/fr/prices");
+  // Hydrated: the bar and the way back are the script's; without it the noscript style hides them.
+  await expect(form(page).locator("[data-lead-chrome]").first()).toBeVisible();
+}
+
+const height = (l: Locator) => l.evaluate(el => el.getBoundingClientRect().height);
+
+test("one question a screen, the answers kept as chips, the price on one line with the tax credit, and booked", async ({ page }) => {
+  await open(page);
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "intro");
+  // The intro picks the branch, and so how many screens follow: no total said before it.
+  await expect(form(page).getByText("Étape 1", { exact: true })).toBeAttached();
+  // Touch-sized on a phone as on a desk.
+  expect(await height(tile(page, "Cette semaine").locator(".."))).toBeGreaterThanOrEqual(44);
+  expect(await height(form(page).getByRole("button", { name: "Retour" }).or(tile(page, "Je compare")).first())).toBeGreaterThanOrEqual(44);
+  await tile(page, "Cette semaine").click();
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "need");
+  // Cards, each with the brand's icon.
+  await expect(screenOn(page).locator("svg")).toHaveCount(4);
+  await tile(page, "Ménage régulier").click();
+  await tile(page, "2 chambres").click();
+  await tile(page, "40 à 70 m²").click();
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "estimate_frequency");
+  // 45 € + 30 € + 10 € = 85 €: less 15 % → 72 €, 10 % → 77 €, 5 % → 81 €.
+  const card = (name: string) => screenOn(page).locator("label").filter({ hasText: name });
+  await expect(card("Chaque semaine")).toContainText(/72\s€/);
+  await expect(card("Toutes les 2 semaines")).toContainText(/77\s€/);
+  await expect(card("Toutes les 2 semaines")).toContainText("Le plus avantageux");
+  await expect(card("Une fois")).toContainText(/85\s€/);
+  await tile(page, "Toutes les 2 semaines").click();
+  // The place serves one commune: the postcode is answered already, a chip — on to the phone.
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "phone");
+  await expect(form(page).getByLabel("Téléphone")).toBeFocused();
+  await expect(form(page).locator("[data-price-cents]")).toHaveText(/Votre prix : 77\s€/);
+  await expect(form(page).locator("[data-credit-cents]")).toContainText(/38,50\s€ après crédit d’impôt/);
+  await expect(screenOn(page).getByText("Votre numéro reste entre nous — rappel sous 15 min.")).toBeVisible();
+  // The answers, a tap back each; the way back one screen.
+  const chips = form(page).locator("[data-lead-chrome] li");
+  await expect(chips).toHaveCount(6);
+  await expect(chips.last()).toContainText("Paris");
+  await form(page).getByRole("button", { name: "Retour" }).click();
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "locality");
+  await expect(form(page).getByLabel("Code postal")).toHaveValue("Paris");
+  await form(page).getByLabel("Code postal").fill("75011");
+  await form(page).getByLabel("Code postal").press("Enter");
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "phone");
+  await expect(form(page).getByLabel("Téléphone")).toBeFocused();
+  await form(page).getByLabel("Téléphone").fill("0612345678");
+  const answered = quote(page);
+  await form(page).getByRole("button", { name: "Réserver" }).click();
+  const res = await answered;
+  const body = Object.fromEntries(new URLSearchParams(res.request().postData() ?? ""));
+  expect(body).toMatchObject({ urgency: "week", subject: "recurring", estimate_bedrooms: "t3", estimate_surface: "s70", estimate_frequency: "biweekly", locality: "75011", shown_cents: "7700" });
+  expect(await res.json()).toMatchObject({ ok: true, cents: 7700 });
+  await expect(page.getByRole("status")).toContainText(/Demande enregistrée au prix de 77\s€\./);
+});
+
+test("\"Je ne sais pas\" makes the regular clean a quote: the questions after it go, no price, the thanks page", async ({ page }) => {
+  await open(page);
+  await tile(page, "Je compare").click();
+  await tile(page, "Ménage régulier").click();
+  await tile(page, "Studio").click();
+  await tile(page, "Je ne sais pas").click();
+  // The questions after it go; the commune the place serves is answered already.
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "phone");
+  await expect(form(page).getByText("Étape 6/6")).toBeAttached();
+  await expect(form(page).locator("[data-price-cents]")).toHaveCount(0);
+  await form(page).getByLabel("Téléphone").fill("0612345678");
+  const answered = quote(page);
+  await form(page).getByRole("button", { name: "Recevoir le prix" }).click();
+  const res = await answered;
+  const body = new URLSearchParams(res.request().postData() ?? "");
+  expect(body.get("estimate_surface")).toBe("?");
+  expect(body.has("estimate_frequency")).toBe(false);
+  expect(body.has("shown_cents")).toBe(false);
+  // A quote leaves for the thanks page; a priced lead would have stayed in the card.
+  await expect(page).toHaveURL(/\/fr\/thanks$/);
+});
+
+test("urgent is a call back: the phone and its consent, posted as a callback with the urgency", async ({ page }) => {
+  await open(page);
+  await tile(page, "Urgent — aujourd’hui").click();
+  await expect(screenOn(page)).toHaveAttribute("data-lead-step", "phone");
+  await expect(form(page).getByText("Étape 2/2")).toBeAttached();
+  await expect(page.locator("#estimate-callback")).toHaveCount(0);
+  await form(page).getByLabel("Téléphone").fill("0712345678");
+  await form(page).getByLabel("J’accepte d’être rappelé·e à ce numéro au sujet de ma demande.").check();
+  const answered = quote(page);
+  await form(page).getByRole("button", { name: "Être rappelé" }).click();
+  const body = new URLSearchParams((await answered).request().postData() ?? "");
+  expect(body.get("channel")).toBe("callback");
+  expect(body.get("urgency")).toBe("today");
+  await expect(page).toHaveURL(/\/fr\/thanks\?channel=callback$/);
+});
+
+test.describe("without JavaScript", () => {
+  test.use({ javaScriptEnabled: false, reducedMotion: "reduce" });
+
+  test("every screen is there at once, and the form posts as one", async ({ page }) => {
+    await page.goto("/fr/prices");
+    await expect(form(page).locator("[data-lead-chrome]").first()).toBeHidden();
+    await expect(form(page).getByLabel("Téléphone")).toBeVisible();
+    await form(page).locator("label").filter({ has: page.getByText("Autre", { exact: true }) }).locator("input").check();
+    await form(page).getByLabel("Code postal").fill("75011");
+    await form(page).getByLabel("Téléphone").fill("0612345678");
+    const posted = page.waitForRequest(r => r.method() === "POST" && new URL(r.url()).pathname === "/quote");
+    await form(page).getByRole("button", { name: "Recevoir le prix" }).click();
+    expect(new URLSearchParams((await posted).postData() ?? "").get("subject")).toBe("other");
+    await expect(page).toHaveURL(/\/fr\/thanks$/);
+  });
+});
+
+test("the home page's form takes the postcode the link carries", async ({ page }) => {
+  await page.goto("/fr?postcode=75011");
+  await expect(page.locator("#quote select")).toHaveCount(0);
+  await expect(page.locator("#quote-form").getByLabel("Code postal")).toHaveValue("75011");
+});