@evinvest/kitstart 0.13.0 → 0.14.0

package/dist/react/LeadCapture.js

@@ -1,25 +1,31 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@evinvest/uikit";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, cn } from "@evinvest/uikit";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { PRICE_CHANGED, SHOWN_CENTS_FIELD } from "../core/accept.js";
 import { resolveChannels } from "../core/channels.js";
-import { leadErrorFor } from "../core/lead.js";
+import { CHANNEL_FIELD, leadErrorFor } from "../core/lead.js";
 import { fillText, openingText } from "../core/lead-capture-format.js";
 import { flowTextOf } from "../core/lead-capture-text.js";
 import { bookingOf } from "../core/booking/model.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
-import { flowOf } from "../core/pricing/flow.js";
+import { ESTIMATE_UNKNOWN, estimateField, flowOf } from "../core/pricing/flow.js";
+import { labelOf } from "../core/pricing/validate.js";
+import { focusNext } from "./focus-next.js";
 import { LeadBooking } from "./LeadBooking.js";
 import { LeadCapturePriced } from "./LeadCapturePriced.js";
 import { CallbackForm, ChannelLink, ExperimentFields, PhotosAsk } from "./LeadCaptureChannels.js";
-import { EstimateInputs, PriceBox, useEstimate } from "./LeadCaptureEstimate.js";
-import { FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
+import { askedInputs, EstimateInputs, EstimateQuestionField, estimatePlan, screensOf, useEstimate } from "./LeadCaptureEstimate.js";
+import { ConsentField, FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
 import { NeedField } from "./LeadCaptureNeed.js";
+import { PriceBox, PriceCompact } from "./LeadCapturePrice.js";
+import { IntroField, LeadSteps } from "./LeadCaptureSteps.js";
+import { stepOfField, stepsOf, useLeadSteps } from "./lead-steps.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
-import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash } from "./use-lead-context.js";
+import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash, usePostcode } from "./use-lead-context.js";
 import { errorText, formMessageId, OWN_FIELDS, useLeadError } from "./use-lead-error.js";
 import { useLeadEvents } from "./use-lead-events.js";
+import { useLeadFocus } from "./use-lead-focus.js";
 import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { useLeadSubmit } from "./use-lead-submit.js";
 import { useRepriced } from "./use-repriced.js";
@@ -42,10 +48,22 @@ export function LeadCapture(props) {
     const { place, contact, locale, renderedAt, wire, needs, layout = "single", text } = props;
     const { formId = "quote", id = "quote", experiment } = props;
     const c = props.labels === "hidden" ? { ...props.classNames, label: cn("sr-only", props.classNames?.label) } : props.classNames;
+    const steps = layout === "steps";
+    const needDisplay = props.needDisplay ?? (layout === "single" ? "select" : "tiles");
+    // Enter on a tile answers it wherever an answer moves the visitor on.
+    const enterPicks = layout !== "single" || props.focusNext === true;
     const root = useRef(null);
+    const formRef = () => root.current?.querySelector(`#${CSS.escape(`${id}-form`)}`) ?? null;
     const hydrated = useHydrated();
     const [editing, setEditing] = useState(false);
     const [need, setNeed] = useNeed(props.need, needs.map(n => n.value), () => setEditing(false));
+    const [introValue, setIntro] = useState(undefined);
+    const intro = steps ? props.intro : undefined;
+    const callbackPreset = intro?.options.find(o => o.value === introValue)?.channel === "callback";
+    const served = localitySuggestions(place);
+    const postcode = usePostcode();
+    const [locality, setLocality] = useState(undefined);
+    const localityShown = locality ?? postcode ?? (served.length === 1 ? served[0] : undefined);
     const events = useLeadEvents(root, { formId, layout, experiment });
     useOpenOnHash(`${id}-callback`);
     // Only this card's: a page may draw several, and the query names one.
@@ -53,24 +71,27 @@ export function LeadCapture(props) {
     const [error, setError] = useLeadError(root, id, initial);
     const flowText = flowTextOf(text, locale);
     // `single` shows its select at the first need until one is picked: that is the need on screen.
-    const shownNeed = need ?? (layout === "single" ? needs[0]?.value : undefined);
+    const shownNeed = need ?? (layout === "single" && needDisplay === "select" ? needs[0]?.value : undefined);
     const model = props.pricing ?? null;
-    const flow = flowOf(props.flows, model, shownNeed);
-    const estimate = useEstimate(model, shownNeed, flow, events.estimateShown);
+    const wanted = flowOf(props.flows, model, shownNeed);
+    const estimate = useEstimate(model, shownNeed, wanted, events.estimateShown);
+    const flow = estimate.flow;
     const repriced = useRepriced(estimate.price, shownNeed, flowText, locale);
     // A priced lead stays in the card: its price is confirmed there, and the slot promised.
     const staysInCard = (ch) => props.done !== undefined || (ch === "form" && flow !== "quote");
     const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(staysInCard, { mobile: wire.mobile, name: props.name?.field }, {
         onRefused: (channel, field, cents) => {
             repriced.refused(field, cents);
-            setError({ channel, field });
+            // The intro's callback is this form's: its refusal shows here, not in the folded callback.
+            setError({ channel: callbackPreset ? "form" : channel, field });
         },
         onFailed: (channel, why) => events.submitError(why, channel),
     });
     // The form's refusal by where it shows: under the field the card draws, else above the submit.
     const formError = error?.channel === "form" ? error.field : null;
     const at = (field) => (formError === field ? errorText(field, text) : null);
-    const above = formError === PRICE_CHANGED ? repriced.message() : formError !== null && !OWN_FIELDS.form.includes(formError) ? errorText(formError, text) : null;
+    const drawn = (field) => OWN_FIELDS.form.includes(field) || (callbackPreset && field === "consent");
+    const above = formError === PRICE_CHANGED ? repriced.message() : formError !== null && !drawn(formError) ? errorText(formError, text) : null;
     const doneRef = useRef(null);
     // The form the focus was in is gone: the news takes it, and is read out.
     useEffect(() => doneRef.current?.focus(), [sent]);
@@ -82,11 +103,32 @@ export function LeadCapture(props) {
     const message = needLabel ? fillText(text.message, { need: needLabel }) : text.messageGeneric;
     const [lead = "form", ...rest] = resolved.order;
     const links = rest.filter((ch) => ch !== "form" && ch !== "callback");
-    const pick = (value) => {
+    // The intro asked for a call back: the folded callback would be a second one.
+    const callbackElsewhere = !callbackPreset;
+    const asked = model && shownNeed !== undefined && wanted === "estimate" ? askedInputs(model, shownNeed, estimate.answers) : [];
+    const screens = screensOf(asked.map(i => i.id), props.questions);
+    const stepIds = steps ? stepsOf({ intro: intro !== undefined, callback: callbackPreset, estimate: screens, localityOwn: props.localityStep !== "with-phone" }) : [];
+    const screenOf = (step) => screens.find(screen => screen[0] !== undefined && estimateField(screen[0]) === step) ?? [];
+    // The bar counts the most screens an answer to come could add — the need's
+    // longest estimate — so it never moves back; until the intro picks its branch, no total is said.
+    const longest = Math.max(0, ...needs.map(n => (model && flowOf(props.flows, model, n.value) === "estimate" ? screensOf(estimatePlan(model, n.value), props.questions).length : 0)));
+    const total = intro !== undefined && introValue === undefined ? null : stepIds.length + (need === undefined && !callbackPreset ? longest : 0);
+    const answered = (step) => step === "intro" ? introValue !== undefined : step === "need" ? need !== undefined : step === "locality" ? localityShown !== undefined : step === "phone" ? false : screenOf(step).every(id => estimate.answers[id] !== undefined);
+    const stepper = useLeadSteps(stepIds, answered, steps && formError !== null ? stepOfField(stepIds, formError, screens) : null, events.step);
+    const { moveOn, focusAfterSelect } = useLeadFocus(formRef, { steps, focusNext: props.focusNext === true, current: stepper.current });
+    const pick = (value, from) => {
+        // A need that brings an estimate's questions brings screens React has yet to draw.
+        const brings = flowOf(props.flows, model, value) === "estimate";
+        if (steps)
+            return moveOn(() => (setNeed(value), stepper.next()), from, !brings && asked.length === 0);
         if (layout === "single") {
-            setNeed(value);
-            setEditing(true);
-            return;
+            if (from === null) {
+                setNeed(value);
+                setEditing(true);
+                focusAfterSelect();
+                return;
+            }
+            return moveOn(() => (setNeed(value), setEditing(true)), from, !brings && asked.length === 0);
         }
         // The checked radio has already shown the contact step (`:has`, below), so
         // the first empty field — the postcode unless filled, else the phone —
@@ -99,23 +141,126 @@ export function LeadCapture(props) {
         setEditing(false);
         events.step("contact");
     };
-    // An arrow key in `qualify-first`: the tile is chosen, the group stays open.
+    // An arrow key among the tiles: the tile is chosen, the group stays open.
     const select = (value) => {
         setNeed(value);
         setEditing(true);
     };
-    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
-    // `qualify-first` shows the contact step as soon as a need's radio is
-    // checked (`:has`) — without a script, and inside the tap with one.
-    const contactShown = layout === "single" || (need !== undefined && !editing);
-    const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
+    // "I don't know", or an answer instead of it, changes which questions are asked.
+    // On a screen shared by a few questions, the last one answered moves on; until then the screen stays.
+    const answerPicked = (input, option, radio) => {
+        const screen = steps ? screenOf(stepper.current) : [];
+        const complete = screen.every(id => id === input || option === ESTIMATE_UNKNOWN || estimate.answers[id] !== undefined);
+        moveOn(() => (estimate.answer(input, option), steps && (complete ? stepper.next() : stepper.edit(stepper.current))), radio, option !== ESTIMATE_UNKNOWN && estimate.answers[input] !== ESTIMATE_UNKNOWN);
+    };
+    /** A shared screen's button: on when every question is answered, else the first one unanswered says so. */
+    const continueScreen = (screen) => {
+        const missing = screen.find(id => estimate.answers[id] === undefined);
+        const radio = missing === undefined ? null : formRef()?.querySelector(`input[name="${estimateField(missing)}"]`);
+        if (radio)
+            return void radio.reportValidity();
+        moveOn(stepper.next, null, false);
+    };
+    const continueLocality = () => {
+        const el = formRef()?.querySelector('[data-lead-step="locality"] [data-lead-field="locality"]');
+        if (!el?.reportValidity())
+            return;
+        moveOn(() => (setLocality(el.value.trim()), stepper.next()), el, true);
+    };
+    // Enter in a typed field: the next empty field, or the next screen, before the submit.
+    const onKeyDown = (e) => {
+        const field = e.target;
+        if (e.key !== "Enter" || !(steps || props.focusNext) || !(field instanceof HTMLInputElement) || ["radio", "checkbox", "submit", "button"].includes(field.type))
+            return;
+        if (focusNext(e.currentTarget, field))
+            e.preventDefault();
+        else if (steps && stepper.current === "locality") {
+            e.preventDefault();
+            continueLocality();
+        }
+    };
+    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), row: !primary && props.channelsDisplay === "row", icon: props.channelIcons?.callback, classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, icon: props.channelIcons?.[ch], classNames: c }, ch));
     const rootProps = { id, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant };
     if (sent && staysInCard(sent.channel)) {
         const done = typeof props.done === "function" ? props.done(sent) : props.done;
         return (_jsx("div", { ref: root, ...rootProps, children: _jsxs("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("flex flex-col gap-4 outline-none", c?.done), children: [_jsx(Fragment, { children: done }, "done"), sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: props.booking === undefined ? (_jsx(LeadBooking, { booking: bookingOf(place, props.bookingVariant), sent: sent, locale: locale, text: flowText, adapters: props.bookingAdapters, embed: props.bookingEmbed, formId: formId, classNames: c })) : typeof props.booking === "function" ? (props.booking(sent)) : (props.booking), locale: locale, text: flowText, classNames: c }))] }) }));
     }
-    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })) }, "head"), lead !== "form" && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), _jsx(NeedField, { layout: layout, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, onPick: pick, onSelect: select, onEdit: () => {
-                            setEditing(true);
-                            events.step("need");
-                        }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [model && shownNeed !== undefined && flow === "estimate" && (_jsx(EstimateInputs, { model: model, need: shownNeed, locale: locale, answers: estimate.answers, onAnswer: estimate.answer, required: hydrated, classNames: c })), model && flow !== "quote" && _jsx(PriceBox, { model: model, flow: flow, price: repriced.price, locale: locale, text: flowText, classNames: c }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos })), _jsx(LocalityField, { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: localitySuggestions(place), placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c })), _jsx(Fragment, { children: props.extras }, "extras"), _jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: failure?.channel === "form" ? failure.failure : null, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: busy === "form", label: flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: c?.submit }), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] })] }), (links.length > 0 || rest.includes("callback")) && (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && channel("callback", false)] }))] }));
+    // An arrow key in `steps`: chosen, and the screen stays on until the answer is given.
+    const stay = (choose) => (...args) => {
+        if (steps)
+            stepper.edit(stepper.current);
+        choose(...args);
+    };
+    const estimateProps = { locale, answers: estimate.answers, unknownLabel: flowText.estimateUnknown, required: hydrated, enterPicks, onPick: answerPicked, onSelect: stay(estimate.answer), classNames: c };
+    const priceShown = model && flow !== "quote" && (props.price === "compact" ? (_jsx(PriceCompact, { model: model, flow: flow, price: repriced.price, locale: locale, taxCredit: props.taxCredit, text: flowText, classNames: c })) : (_jsx(PriceBox, { model: model, flow: flow, price: repriced.price, locale: locale, text: flowText, classNames: c })));
+    const photos = flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && !callbackPreset && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos }));
+    const localityField = (_jsx(LocalityField
+    // Remounted with what the query knew: an untouched field takes it as typed.
+    , { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: served, placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, preset: postcode, classNames: c }, postcode ?? ""));
+    const phone = (_jsxs(_Fragment, { children: [_jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), _jsx(Fragment, { children: props.afterPhone }, "afterPhone")] }));
+    const nameField = props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c }));
+    const mainBusy = busy === "form" || (callbackPreset && busy === "callback");
+    const mainFailure = failure && (failure.channel === "form" || callbackPreset) ? failure.failure : null;
+    const tail = (_jsxs(_Fragment, { children: [_jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: mainFailure, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: mainBusy, label: callbackPreset ? text.callbackSubmit : flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: callbackPreset ? cn(c?.submit, c?.callbackSubmit) : c?.submit }), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), text.privacy !== "" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] }));
+    // `qualify-first` shows the contact step as soon as a need's radio is
+    // checked (`:has`) — without a script, and inside the tap with one.
+    const contactShown = layout === "single" || (need !== undefined && !editing);
+    const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
+    const stepView = (step) => {
+        switch (step) {
+            case "intro": {
+                const chosen = intro?.options.find(o => o.value === introValue);
+                return {
+                    id: step,
+                    label: intro?.label ?? "",
+                    value: chosen?.label ?? null,
+                    node: intro && (_jsx(IntroField, { intro: intro, value: introValue, onPick: (v, radio) => moveOn(() => (setIntro(v), stepper.next()), radio, false), onSelect: stay(setIntro), 
+                        // On a screen of its own, a question is its heading: never only for assistive technology.
+                        classNames: props.classNames })),
+                };
+            }
+            case "need":
+                return {
+                    id: step,
+                    label: text.needLabel,
+                    value: needLabel ?? null,
+                    node: (_jsx(NeedField, { display: needDisplay === "select" ? "tiles" : needDisplay, name: wire.subject, needs: needs, need: need, editing: true, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, enterPicks: true, onPick: pick, onSelect: stay(setNeed), onEdit: () => undefined, classNames: props.classNames })),
+                };
+            case "locality":
+                return {
+                    id: step,
+                    label: text.localityLabel,
+                    value: localityShown ?? null,
+                    node: (_jsxs(_Fragment, { children: [localityField, _jsx(Button, { type: "button", size: "touch", "data-lead-chrome": "", className: cn("w-full", c?.stepNext), onClick: continueLocality, children: flowText.stepNext })] })),
+                };
+            case "phone":
+                return {
+                    id: step,
+                    label: text.phoneLabel,
+                    value: null,
+                    node: callbackPreset ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), phone, _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), tail] })) : (_jsxs(_Fragment, { children: [priceShown, photos, props.localityStep === "with-phone" && localityField, phone, nameField, _jsx(Fragment, { children: props.extras }, "extras"), tail] })),
+                };
+            default: {
+                const inputs = screenOf(step).flatMap(id => asked.filter(i => i.id === id));
+                const answerOf = (input) => {
+                    const answer = estimate.answers[input.id];
+                    const option = input.options.find(o => o.id === answer);
+                    return answer === ESTIMATE_UNKNOWN ? flowText.estimateUnknown : option ? labelOf(option.labels, locale) : null;
+                };
+                const values = inputs.map(answerOf);
+                const first = inputs[0];
+                return {
+                    id: step,
+                    label: inputs.map(i => labelOf(i.labels, locale)).join(" · "),
+                    value: values.length > 0 && values.every(v => v !== null) ? values.join(" · ") : null,
+                    node: model && shownNeed !== undefined && first && (_jsxs(_Fragment, { children: [inputs.map(input => (_jsx(EstimateQuestionField, { model: model, need: shownNeed, input: input, question: props.questions?.[input.id], ...estimateProps }, input.id))), inputs.length > 1 && (_jsx(Button, { type: "button", size: "touch", "data-lead-chrome": "", className: cn("w-full", c?.stepNext), onClick: () => continueScreen(inputs.map(i => i.id)), children: props.questions?.[first.id]?.next ?? flowText.stepNext }))] })),
+                };
+            }
+        }
+    };
+    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })) }, "head"), lead !== "form" && (lead !== "callback" || callbackElsewhere) && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, onKeyDown: onKeyDown, data: steps ? { "data-lead-steps": "" } : undefined, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), steps ? (_jsx(LeadSteps, { steps: stepIds.map(stepView), current: stepper.current, total: total, onBack: () => moveOn(stepper.back, null, false), onEdit: step => moveOn(() => stepper.edit(step), null, false), text: { stepProgress: flowText.stepProgress, stepProgressOpen: flowText.stepProgressOpen, stepBack: flowText.stepBack, change: text.needChange }, classNames: c })) : (_jsxs(_Fragment, { children: [_jsx(NeedField, { display: needDisplay, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, enterPicks: enterPicks, onPick: pick, onSelect: select, onEdit: () => {
+                                    setEditing(true);
+                                    events.step("need");
+                                }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [model && shownNeed !== undefined && wanted === "estimate" && _jsx(EstimateInputs, { model: model, need: shownNeed, questions: props.questions, ...estimateProps }), priceShown, photos, localityField, phone, nameField, _jsx(Fragment, { children: props.extras }, "extras"), tail] })] }))] }), (links.length > 0 || (rest.includes("callback") && callbackElsewhere)) &&
+                (props.channelsDisplay === "row" ? (_jsxs("div", { role: "group", "aria-label": text.otherChannels, className: cn("flex flex-row flex-wrap gap-2", c?.others), children: [links.map(ch => channel(ch, false)), rest.includes("callback") && callbackElsewhere && channel("callback", false)] })) : (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && callbackElsewhere && channel("callback", false)] })))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,6 +1,6 @@
 import { type CaptureChannel } from "../core/channels.js";
 import type { LeadCaptureFlowText, LeadCaptureText } from "../core/lead-capture-text.js";
-import type { FormEventHandler } from "react";
+import type { FormEventHandler, ReactNode } from "react";
 import { type FieldPart } from "./LeadCaptureFields.js";
 import type { SendFailure } from "./use-lead-submit.js";
 import { type PartClassNames } from "./parts.js";
@@ -8,7 +8,9 @@ import { type PartClassNames } from "./parts.js";
  * `channel` and `primary` dress every way out, the callback's summary
  * included; the `callback*` parts are the callback's own, after them.
  */
-export type ChannelPart = "channel" | "primary" | "callback" | "callbackSummary" | "callbackForm" | "callbackLede" | "callbackSubmit" | "consent" | "photos";
+export type ChannelPart = "channel" | "primary" | "callback" | "callbackSummary" | "callbackForm" | "callbackLede" | "callbackSubmit" | "consent" | "photos" | "channelIcon";
+/** A way out the brand may draw an icon for (`channelIcons`). */
+export type ChannelIconKey = "phone" | "whatsapp" | "sms" | "callback";
 export interface Experiment {
     name: string;
     variant: string;
@@ -33,6 +35,7 @@ export declare function ChannelLink(props: {
     text: LeadCaptureText;
     primary: boolean;
     experiment: Experiment | undefined;
+    icon?: ReactNode;
     classNames?: PartClassNames<ChannelPart> | undefined;
 }): import("react").JSX.Element | null;
 /**
@@ -73,6 +76,9 @@ export declare function CallbackForm(props: {
     failure: SendFailure | null;
     onRetry: () => void;
     onSoftError: () => void;
+    /** In the row of channels (`channelsDisplay="row"`): a button among the others, its form on a line of its own once open. */
+    row?: boolean | undefined;
+    icon?: ReactNode;
     classNames?: PartClassNames<ChannelPart | FieldPart> | undefined;
 }): import("react").JSX.Element;
 /**

package/dist/react/LeadCaptureChannels.js

@@ -8,6 +8,12 @@ import { ConsentField, FormMessage, PhoneField } from "./LeadCaptureFields.js";
 import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { partWithLeading } from "./parts.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
+/** The brand's icon before a channel's label, hidden from assistive technology: the label names it. */
+function ChannelIcon({ icon, className }) {
+    if (icon === undefined || icon === null)
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center [&_svg]:size-5", className), children: icon }));
+}
 /**
  * A whole-pixel line under a brand's own type size: tailwind-merge drops a
  * size's line height for nothing, and a 15 px face at the page's 1.5 is a
@@ -32,7 +38,7 @@ export function ChannelLink(props) {
     const href = channelHref(channel, contact, message);
     if (!href)
         return null;
-    return (_jsx(Button, { href: href, variant: primary ? "primary" : "outline", size: "touch", className: partWithLeading(primary ? "w-full" : "flex-1", CHANNEL_LEADING, cn(c?.channel, primary && c?.primary) || undefined), "data-intent": channel === "sms" ? "sms" : undefined, "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: text[LABEL[channel]] }));
+    return (_jsxs(Button, { href: href, variant: primary ? "primary" : "outline", size: "touch", className: partWithLeading(primary ? "w-full" : "flex-1", CHANNEL_LEADING, cn(c?.channel, primary && c?.primary) || undefined), "data-intent": channel === "sms" ? "sms" : undefined, "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: [_jsx(ChannelIcon, { icon: props.icon, className: c?.channelIcon }), text[LABEL[channel]]] }));
 }
 /**
  * "Call me back": the form cut to a phone number and a consent, posted to the
@@ -45,7 +51,7 @@ export function ChannelLink(props) {
 export function CallbackForm(props) {
     const { id, primary, open, formId, placeSlug, locale, renderedAt, mobileName, subject, opening, text, experiment, error, classNames: c } = props;
     const at = (field) => (error?.field === field ? error.text : null);
-    return (_jsxs("details", { id: id, open: open, className: cn("w-full", c?.callback), children: [_jsx("summary", { "data-intent": "callback", className: partWithLeading(buttonVariants({ variant: primary ? "primary" : "outline", size: "touch", className: "flex w-full list-none [&::-webkit-details-marker]:hidden" }), CHANNEL_LEADING, cn(c?.channel, primary && c?.primary, c?.callbackSummary) || undefined), children: text.callback }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: props.card, onSubmit: props.onSubmit, className: cn("mt-4 gap-4", c?.callbackForm), children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), subject && _jsx("input", { type: "hidden", name: subject.name, value: subject.value }), _jsx(ExperimentFields, { experiment: experiment }), _jsx("p", { className: cn("text-ink-soft", c?.callbackLede), children: opening ?? text.callbackLede }), _jsx(PhoneField, { id: `${id}-phone`, name: mobileName, text: text, error: at("phone"), onSoftError: props.onSoftError, classNames: c }), _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), _jsx(FormMessage, { id: `${id}-error`, error: error && error.field !== "phone" && error.field !== "consent" ? error.text : null, className: c?.error }), _jsx(FailureMessage, { failure: props.failure, text: text, onRetry: props.onRetry, className: c?.error }), _jsx(SubmitButton, { busy: props.busy, label: text.callbackSubmit, sending: text.sending, className: c?.callbackSubmit })] })] }));
+    return (_jsxs("details", { id: id, open: open, className: cn(props.row ? "min-w-0 flex-1 open:basis-full" : "w-full", c?.callback), children: [_jsxs("summary", { "data-intent": "callback", className: partWithLeading(buttonVariants({ variant: primary ? "primary" : "outline", size: "touch", className: "flex w-full list-none [&::-webkit-details-marker]:hidden" }), CHANNEL_LEADING, cn(c?.channel, primary && c?.primary, c?.callbackSummary) || undefined), children: [_jsx(ChannelIcon, { icon: props.icon, className: c?.channelIcon }), text.callback] }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: props.card, onSubmit: props.onSubmit, className: cn("mt-4 gap-4", c?.callbackForm), children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), subject && _jsx("input", { type: "hidden", name: subject.name, value: subject.value }), _jsx(ExperimentFields, { experiment: experiment }), _jsx("p", { className: cn("text-ink-soft", c?.callbackLede), children: opening ?? text.callbackLede }), _jsx(PhoneField, { id: `${id}-phone`, name: mobileName, text: text, error: at("phone"), onSoftError: props.onSoftError, classNames: c }), _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), _jsx(FormMessage, { id: `${id}-error`, error: error && error.field !== "phone" && error.field !== "consent" ? error.text : null, className: c?.error }), _jsx(FailureMessage, { failure: props.failure, text: text, onRetry: props.onRetry, className: c?.error }), _jsx(SubmitButton, { busy: props.busy, label: text.callbackSubmit, sending: text.sending, className: c?.callbackSubmit })] })] }));
 }
 /**
  * A `quote` need priced from photos (a deep clean, after-works): the photos

package/dist/react/LeadCaptureEstimate.d.ts

@@ -1,46 +1,79 @@
-import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
 import { type LeadFlow } from "../core/pricing/flow.js";
-import type { Price, PricingModel } from "../core/pricing/model.js";
+import type { PricingInput, PricingModel } from "../core/pricing/model.js";
 import type { PartClassNames } from "./parts.js";
-export type EstimatePart = "estimate" | "estimateInput" | "estimateLegend" | "estimateGrid" | "estimateOption" | "price" | "priceTotal" | "breakdown" | "priceNote";
+export type EstimatePart = "estimate" | "estimateInput" | "estimateLegend" | "estimateGrid" | "estimateOption" | "estimateUnknown" | "badge" | "optionPrice";
+/**
+ * How one of an estimate's questions is asked, by its input id — the brand's
+ * presentation, never the price list's (which the panel owns).
+ */
+export interface EstimateQuestion {
+    /** `tiles` (default): a grid of answers. `cards`: one per line, each with the total it would make. */
+    display?: "tiles" | "cards" | undefined;
+    /** Offers "I don't know" (`text.estimateUnknown`): the lead is then a quote, on the form and on the server. */
+    unknown?: boolean | undefined;
+    /** `2`: the "I don't know" tile takes two columns of the grid. Its own part is `estimateUnknown`, after `estimateOption`. */
+    unknownSpan?: 1 | 2 | undefined;
+    /** A short tag on an answer, by option id — the brand's words ("Le plus avantageux"); the kit picks none. */
+    badges?: Readonly<Record<string, string>> | undefined;
+    /** A shorter label per option id, drawn on a phone (under `sm`); the radio keeps the whole one. */
+    shortLabels?: Readonly<Record<string, string>> | undefined;
+    /**
+     * `steps` only: questions with the same number share a screen, in the
+     * need's order. It moves on by itself once every one is answered; until
+     * then a button does (`next`, else `text.stepNext`), and says what is missing.
+     */
+    step?: number | undefined;
+    /** The words of that button, from the first question of the screen ("Voir les prix"). */
+    next?: string | undefined;
+}
+/**
+ * The screens an estimate's questions take in `steps`, in order: one each,
+ * or those sharing a `step` number together, where the first of them stands.
+ */
+export declare function screensOf(inputs: readonly string[], questions: EstimateQuestions | undefined): string[][];
+export type EstimateQuestions = Readonly<Record<string, EstimateQuestion>>;
 /**
  * The live price of the need on screen: its answers, as the visitor taps
  * them, and the price `priceOf` makes of them — the same function the server
  * stores the lead's price with. A full set of answers is reported once per
- * band (`onShown`), never the price itself.
+ * band (`onShown`), never the price itself. An answer "I don't know" makes
+ * the need a `quote` for this lead (`flow`), as the server will.
  */
-export declare function useEstimate(model: PricingModel | null, need: string | undefined, flow: LeadFlow, onShown: (need: string, cents: number) => void): {
+export declare function useEstimate(model: PricingModel | null, need: string | undefined, wanted: LeadFlow, onShown: (need: string, cents: number) => void): {
     answers: Readonly<Record<string, string>>;
     answer: (input: string, option: string) => void;
-    price: Price | null;
+    price: import("..").Price | null;
+    flow: LeadFlow;
 };
+/** Every question a need's estimate asks, by input id, in order: none for a need not priced so. */
+export declare function estimatePlan(model: PricingModel, need: string): readonly string[];
 /**
- * An estimate's questions, a tile per answer — touch-sized radios, so the
- * answers post without a script too (the server prices them; the live price
- * needs the script). Required once the script runs: a price needs every
- * answer, and without the script an unanswered estimate is still a lead, a
- * quote.
+ * The questions an estimate asks now, in order: all of them, or — once one
+ * is answered "I don't know" — up to that one. The rest would price nothing.
  */
-export declare function EstimateInputs(props: {
+export declare function askedInputs(model: PricingModel, need: string, answers: Readonly<Record<string, string>>): PricingInput[];
+export interface EstimateQuestionProps {
     model: PricingModel;
     need: string;
+    input: PricingInput;
+    question: EstimateQuestion | undefined;
     locale: string;
     answers: Readonly<Record<string, string>>;
-    onAnswer: (input: string, option: string) => void;
+    unknownLabel: string;
     required: boolean;
+    enterPicks: boolean;
+    onPick: (input: string, option: string, radio: HTMLInputElement) => void;
+    onSelect: (input: string, option: string) => void;
     classNames?: PartClassNames<EstimatePart> | undefined;
-}): import("react").JSX.Element | null;
+}
 /**
- * The price, read out as it changes (`aria-live`): an estimate's total and
- * how it was reached, or — until every question is answered — what is
- * missing; a fixed need's price, as is. Never "from": it is the price for
- * these answers.
+ * One question, a tile per answer — touch-sized radios, so the answers post
+ * without a script too (the server prices them; the live price needs the
+ * script). As `cards`, each answer shows the total it would make with the
+ * others given, once they are.
  */
-export declare function PriceBox(props: {
-    model: PricingModel;
-    flow: Exclude<LeadFlow, "quote">;
-    price: Price | null;
-    locale: string;
-    text: LeadCaptureFlowText;
-    classNames?: PartClassNames<EstimatePart> | undefined;
-}): import("react").JSX.Element;
+export declare function EstimateQuestionField(props: EstimateQuestionProps): import("react").JSX.Element;
+/** An estimate's questions on one screen: `EstimateQuestionField` each, in order. */
+export declare function EstimateInputs(props: Omit<EstimateQuestionProps, "input" | "question"> & {
+    questions: EstimateQuestions | undefined;
+}): import("react").JSX.Element | null;