@evinvest/kitstart 0.13.0 → 0.14.0

package/dist/react/QuoteFormShell.js

@@ -6,6 +6,6 @@ import { CARD_FIELD, SUBMISSION_FIELD } from "../core/lead.js";
 /** The mobile field's attributes: the numeric keypad and the phone's autofill. */
 export const PHONE_INPUT_PROPS = { type: "tel", inputMode: "tel", autoComplete: "tel" };
 export function QuoteFormShell(props) {
-    const { placeSlug, locale, renderedAt, honeypotLabel, formId = "quote", card, action = "/quote", id = "quote", className, onSubmit, children } = props;
-    return (_jsxs("form", { id: id, method: "post", action: action, onSubmit: onSubmit, className: cn("relative flex w-full flex-col gap-5", className), children: [placeSlug && _jsx("input", { type: "hidden", name: LOCATION_FIELD, value: placeSlug }), _jsx("input", { type: "hidden", name: LOCALE_FIELD, value: locale }), _jsx("input", { type: "hidden", name: FORM_ID_FIELD, value: formId }), _jsx("input", { type: "hidden", name: RENDERED_AT_FIELD, value: String(renderedAt) }), card && _jsx("input", { type: "hidden", name: CARD_FIELD, value: card }), _jsx("input", { type: "hidden", name: SUBMISSION_FIELD }), children, _jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }, children: _jsxs("label", { children: [honeypotLabel, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }) })] }));
+    const { placeSlug, locale, renderedAt, honeypotLabel, formId = "quote", card, action = "/quote", id = "quote", className, onSubmit, onKeyDown, children } = props;
+    return (_jsxs("form", { id: id, method: "post", action: action, onSubmit: onSubmit, onKeyDown: onKeyDown, ...props.data, className: cn("relative flex w-full flex-col gap-5", className), children: [placeSlug && _jsx("input", { type: "hidden", name: LOCATION_FIELD, value: placeSlug }), _jsx("input", { type: "hidden", name: LOCALE_FIELD, value: locale }), _jsx("input", { type: "hidden", name: FORM_ID_FIELD, value: formId }), _jsx("input", { type: "hidden", name: RENDERED_AT_FIELD, value: String(renderedAt) }), card && _jsx("input", { type: "hidden", name: CARD_FIELD, value: card }), _jsx("input", { type: "hidden", name: SUBMISSION_FIELD }), children, _jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }, children: _jsxs("label", { children: [honeypotLabel, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }) })] }));
 }

package/dist/react/focus-next.d.ts

@@ -0,0 +1,11 @@
+/** `LeadSteps`' mark of a screen that is off (`STEP_OFF`), and the attribute. */
+export declare const OFF_SELECTOR = "[data-lead-off], [hidden]";
+/**
+ * The next empty field of `form` after `from` (from the top without one), or
+ * `null`. `hiddenToo`: on a screen not shown yet, too — the next screen's.
+ */
+export declare function nextEmpty(form: HTMLFormElement, from: Element | null, hiddenToo?: boolean): HTMLInputElement | null;
+/** Focuses the next empty field after `from`; `true` when there was one. */
+export declare function focusNext(form: HTMLFormElement | null | undefined, from: Element | null): boolean;
+/** Focuses a step's first empty field, else its first field: what the screen asks. */
+export declare function focusStep(step: Element | null | undefined): void;

package/dist/react/focus-next.js

@@ -0,0 +1,58 @@
+/**
+ * Where the focus goes after an answer: the next field the visitor has not
+ * filled — a radio group with nothing checked takes it at its first radio, a
+ * typed field when empty. Read from the DOM, in document order, so a brand's
+ * extras take their turn too; a field on a screen that is off (another step) is
+ * not there to be filled.
+ */
+const FIELDS = "[data-lead-field]";
+function empty(el, form) {
+    if (el.type === "radio")
+        return !form.querySelector(`input[type=radio][name="${CSS.escape(el.name)}"]:checked`);
+    if (el.type === "checkbox")
+        return !el.checked;
+    return el.value.trim() === "";
+}
+/** `LeadSteps`' mark of a screen that is off (`STEP_OFF`), and the attribute. */
+export const OFF_SELECTOR = "[data-lead-off], [hidden]";
+const shown = (el) => el.closest(OFF_SELECTOR) === null;
+/** The fields of `scope` in document order, a radio group once — at its checked radio, else its first. */
+function fields(scope, hiddenToo = false) {
+    const seen = new Set();
+    const out = [];
+    for (const el of scope.querySelectorAll(FIELDS)) {
+        if (!(el instanceof HTMLInputElement) || el.disabled || el.type === "hidden" || (!hiddenToo && !shown(el)))
+            continue;
+        if (el.type === "radio") {
+            if (seen.has(el.name))
+                continue;
+            seen.add(el.name);
+            out.push(el.form?.querySelector(`input[type=radio][name="${CSS.escape(el.name)}"]:checked`) ?? el);
+            continue;
+        }
+        out.push(el);
+    }
+    return out;
+}
+/**
+ * The next empty field of `form` after `from` (from the top without one), or
+ * `null`. `hiddenToo`: on a screen not shown yet, too — the next screen's.
+ */
+export function nextEmpty(form, from, hiddenToo = false) {
+    const after = (el) => from === null || (from.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+    return fields(form, hiddenToo).find(el => after(el) && !from?.contains(el) && empty(el, form)) ?? null;
+}
+/** Focuses the next empty field after `from`; `true` when there was one. */
+export function focusNext(form, from) {
+    const next = form ? nextEmpty(form, from) : null;
+    next?.focus();
+    return next !== null;
+}
+/** Focuses a step's first empty field, else its first field: what the screen asks. */
+export function focusStep(step) {
+    const form = step?.closest("form");
+    if (!step || !form)
+        return;
+    const all = fields(step);
+    (all.find(el => empty(el, form)) ?? all[0])?.focus();
+}

package/dist/react/index.d.ts

@@ -23,7 +23,10 @@ export type { BookingPart } from "./LeadBookingManual.js";
 export { BOOKING_ADAPTERS, BOOKING_EMBEDS, bookingAdapters, calComAdapter, calComEmbedAdapter, calComEmbedOrigin, googleCalendarAdapter, linkAdapter, manualAdapter, type BookedSlot, type BookingAdapter, type BookingAdapters, type BookingContext, } from "./booking-adapters.js";
 export { BOOKING_ACTION } from "./use-booking.js";
 export type { LeadSent } from "./use-lead-submit.js";
-export type { LeadCaptureLayout } from "./LeadCaptureNeed.js";
+export type { LeadCaptureLayout, LeadNeedDisplay, LeadNeedOption } from "./LeadCaptureNeed.js";
+export type { EstimateQuestion, EstimateQuestions } from "./LeadCaptureEstimate.js";
+export type { LeadIntro, LeadIntroOption } from "./lead-steps.js";
+export type { ChannelIconKey } from "./LeadCaptureChannels.js";
 export { MapFacade, type MapFacadePart, type MapFacadeProps } from "./MapFacade.js";
 export { PlaceDirectory, type PlaceDirectoryPart, type PlaceDirectoryProps } from "./PlaceDirectory.js";
 export { PHONE_INPUT_PROPS, QuoteFormShell, type QuoteFormShellProps } from "./QuoteFormShell.js";

package/dist/react/lead-steps.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import type { LeadStep } from "../core/analytics.js";
+/** One answer to the intro question. */
+export interface LeadIntroOption {
+    /** Posted under the intro's `field`: a slug. */
+    value: string;
+    label: string;
+    /** Drawn on its tile, the brand's own. */
+    icon?: ReactNode;
+    /** `callback`: the rest of the form is the phone and its consent, posted as a callback. `form` (default): the form. */
+    channel?: "form" | "callback" | undefined;
+}
+/**
+ * A question asked before the need (`steps`) — how urgent, who is asking —
+ * whose answer goes with the lead as one of the brand's extras: declare
+ * `field` in `site.lead.extras`, or the server drops it.
+ */
+export interface LeadIntro {
+    label: string;
+    field: string;
+    options: readonly LeadIntroOption[];
+}
+/** A screen of `layout="steps"`, named as `lead_form_step` reports it. */
+export type StepId = Exclude<LeadStep, "contact">;
+/**
+ * The screens, in order: the intro question when there is one; then — unless
+ * its answer asked for a call back, which needs the phone alone — the need,
+ * the estimate's screens asked now (a question each, or a few sharing one,
+ * named by the first), the postcode on its own screen (`localityStep="own"`),
+ * and the phone, always last.
+ */
+export declare function stepsOf(o: {
+    intro: boolean;
+    callback: boolean;
+    estimate: readonly (readonly string[])[];
+    localityOwn: boolean;
+}): StepId[];
+/** The screen a refused field is shown on: its own (an estimate's, the screen it shares), else the last. */
+export declare function stepOfField(steps: readonly StepId[], field: string, estimate?: readonly (readonly string[])[]): StepId | null;
+/**
+ * Which screen is on: the one a refusal points at, else the one the visitor
+ * went back to (`back`, `edit`), else the first not yet answered. An answer
+ * calls `next`, and the first open screen comes back on. Each move is
+ * reported once (`onStep`) — never the first screen, which `lead_form_view`
+ * already counts.
+ */
+export declare function useLeadSteps(steps: readonly StepId[], answered: (id: StepId) => boolean, refused: StepId | null, onStep: (id: StepId) => void): {
+    current: StepId;
+    index: number;
+    back: () => void;
+    edit: (id: StepId) => void;
+    next: () => void;
+};

package/dist/react/lead-steps.js

@@ -0,0 +1,58 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { estimateField } from "../core/pricing/flow.js";
+/**
+ * The screens, in order: the intro question when there is one; then — unless
+ * its answer asked for a call back, which needs the phone alone — the need,
+ * the estimate's screens asked now (a question each, or a few sharing one,
+ * named by the first), the postcode on its own screen (`localityStep="own"`),
+ * and the phone, always last.
+ */
+export function stepsOf(o) {
+    const out = o.intro ? ["intro"] : [];
+    if (o.callback)
+        return [...out, "phone"];
+    out.push("need", ...o.estimate.flatMap(screen => (screen[0] === undefined ? [] : [estimateField(screen[0])])));
+    if (o.localityOwn)
+        out.push("locality");
+    out.push("phone");
+    return out;
+}
+/** The screen a refused field is shown on: its own (an estimate's, the screen it shares), else the last. */
+export function stepOfField(steps, field, estimate = []) {
+    if (steps.length === 0)
+        return null;
+    const shared = estimate.find(screen => screen.some(id => estimateField(id) === field))?.[0];
+    const own = field === "need" || field === "locality" ? field : shared !== undefined ? estimateField(shared) : null;
+    const step = own !== null ? steps.find(s => s === own) : undefined;
+    return step ?? steps[steps.length - 1] ?? null;
+}
+/**
+ * Which screen is on: the one a refusal points at, else the one the visitor
+ * went back to (`back`, `edit`), else the first not yet answered. An answer
+ * calls `next`, and the first open screen comes back on. Each move is
+ * reported once (`onStep`) — never the first screen, which `lead_form_view`
+ * already counts.
+ */
+export function useLeadSteps(steps, answered, refused, onStep) {
+    const [at, setAt] = useState(null);
+    const open = steps.find(s => !answered(s)) ?? steps[steps.length - 1] ?? "phone";
+    const current = refused !== null && steps.includes(refused) ? refused : at !== null && steps.includes(at) ? at : open;
+    const index = steps.indexOf(current);
+    const shown = useRef(current);
+    const report = useRef(onStep);
+    report.current = onStep;
+    useEffect(() => {
+        if (shown.current === current)
+            return;
+        shown.current = current;
+        report.current(current);
+    }, [current]);
+    return {
+        current,
+        index,
+        back: () => setAt(steps[index - 1] ?? null),
+        edit: (id) => setAt(id),
+        next: () => setAt(null),
+    };
+}

package/dist/react/use-lead-context.d.ts

@@ -29,3 +29,9 @@ onPreset: () => void): [string | undefined, (need: string) => void];
  * callback by id, and not every browser opens a closed one it scrolls to.
  */
 export declare function useOpenOnHash(id: string): void;
+/**
+ * The postcode the page already knows: `?postcode=` once the script runs (a
+ * cached page cannot read the query) — the link from an ad or a card that
+ * asked it already. Anything that does not read as a postcode is ignored.
+ */
+export declare function usePostcode(): string | undefined;

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

@@ -84,3 +84,19 @@ export function useOpenOnHash(id) {
         return () => window.removeEventListener("hashchange", open);
     }, [id]);
 }
+/** What `?postcode=` may carry into the form: a short postcode, letters for the few countries that use them, never more. */
+const POSTCODE_PARAM = /^[0-9A-Za-z][0-9A-Za-z -]{1,9}$/;
+/**
+ * The postcode the page already knows: `?postcode=` once the script runs (a
+ * cached page cannot read the query) — the link from an ad or a card that
+ * asked it already. Anything that does not read as a postcode is ignored.
+ */
+export function usePostcode() {
+    const [postcode, setPostcode] = useState(undefined);
+    useEffect(() => {
+        const value = new URLSearchParams(window.location.search).get("postcode")?.trim();
+        if (value && POSTCODE_PARAM.test(value))
+            setPostcode(value);
+    }, []);
+    return postcode;
+}

package/dist/react/use-lead-focus.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 declare function useLeadFocus(form: () => HTMLFormElement | null, o: {
+    steps: boolean;
+    focusNext: boolean;
+    current: string;
+}): {
+    moveOn(change: () => void, from: Element | null, stable: boolean): void;
+    focusAfterSelect(): void;
+};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.13.0",
+  "version": "0.14.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]/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.14.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.14.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/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%