@evinvest/kitstart 0.8.0 → 0.10.0

package/dist/react/LeadCapture.d.ts

@@ -1,15 +1,19 @@
 import { type ReactNode } from "react";
 import { type CaptureChannel } from "../core/channels.js";
 import type { LeadWire } from "../core/lead.js";
-import type { LeadCaptureText } from "../core/lead-capture-text.js";
+import { type LeadCaptureText } from "../core/lead-capture-text.js";
 import { type Place } from "../core/place/types.js";
+import { type LeadFlows } from "../core/pricing/flow.js";
+import type { PricingModel } from "../core/pricing/model.js";
 import type { FormSelectOption } from "./FormSelect.js";
+import { type PricedPart } from "./LeadCapturePriced.js";
 import { type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
+import { type EstimatePart } from "./LeadCaptureEstimate.js";
 import { type FieldPart } from "./LeadCaptureFields.js";
 import { type LeadCaptureLayout } from "./LeadCaptureNeed.js";
 import type { PartClassNames } from "./parts.js";
 import { type LeadSent } from "./use-lead-submit.js";
-export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart;
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart | EstimatePart | PricedPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -25,6 +29,30 @@ export interface LeadCaptureProps {
     wire: LeadWire;
     /** The brand's subjects with their labels, in order. */
     needs: readonly FormSelectOption[];
+    /**
+     * How each need is sold — `site.lead.flows`, the map the server prices
+     * with. A need runs `estimate` or `fixed` only when `pricing` prices it so
+     * (`flowOf`); otherwise, and without the two, every need is a `quote`.
+     */
+    flows?: LeadFlows | undefined;
+    /**
+     * The price list the page priced from — `createPricingSource(site).model()`
+     * on the server page, handed down as data. An estimate's price is computed
+     * here as the visitor answers, and again by the route, whose number is kept.
+     */
+    pricing?: PricingModel | null | undefined;
+    /**
+     * `quote` needs a price is given from photos (a deep clean, after-works):
+     * a WhatsApp link to send them, prefilled with the need, when the place
+     * has WhatsApp. The callback is offered as always.
+     */
+    photos?: readonly string[] | undefined;
+    /**
+     * After a priced lead, in place of "we call you to set the slot": a
+     * booking provider's widget, when the brand has one. None ships with the
+     * kit yet.
+     */
+    booking?: ReactNode | ((sent: LeadSent) => ReactNode);
     /** The need the page already knows; `?need=` and `[data-need]` triggers set it too. */
     need?: string | undefined;
     /** `single` (one screen) or `qualify-first` (the need, then the contact) — an experiment's switch. */
@@ -46,7 +74,8 @@ export interface LeadCaptureProps {
     /**
      * The card's id, the anchor a call bar links to (`#quote`): the whole card,
      * head included, scrolls into view. The form is `<id>-form`, the callback
-     * `<id>-callback` and its form `<id>-callback-form`.
+     * `<id>-callback` and its form `<id>-callback-form`. Posted as `card`, so a
+     * refused lead comes back here (`?lead_error=<field>#<id>`) and shows why.
      */
     id?: string | undefined;
     text: LeadCaptureText;
@@ -58,10 +87,11 @@ export interface LeadCaptureProps {
     /** Whether the callback starts open; by default only when it is the channel that leads (the place is closed). */
     callbackOpen?: boolean | undefined;
     /**
-     * The card once a lead is taken, in place of everything in it. With it, a
-     * script posts the form itself and shows this on the thanks page's 303;
-     * without a script, or on any other answer, the form posts as it always
-     * did. Without it, a submit goes to the thanks page.
+     * The card once a lead is taken, in place of everything in it. A script
+     * posts the form itself either way, so a refusal keeps what was typed and
+     * shows why; a lead taken shows this, or — without it — goes to the thanks
+     * page. Without a script, or on an answer that is not the route's, the form
+     * posts as it always did.
      */
     done?: ReactNode | ((sent: LeadSent) => ReactNode);
     /** Replaces the title and lede — the brand's own heading. */

package/dist/react/LeadCapture.js

@@ -1,16 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn } from "@evinvest/uikit";
+import { cn } from "@evinvest/uikit";
 import { useEffect, useRef, useState } from "react";
 import { resolveChannels } from "../core/channels.js";
 import { fillText, openingText } from "../core/lead-capture-format.js";
+import { flowTextOf } from "../core/lead-capture-text.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
-import { CallbackForm, ChannelLink, ExperimentFields } from "./LeadCaptureChannels.js";
-import { LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
+import { flowOf } from "../core/pricing/flow.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 { NeedField } from "./LeadCaptureNeed.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
 import { useHydrated, useNeed, useNow, useOpenOnHash } from "./use-lead-context.js";
+import { errorText, formMessageId, OWN_FIELDS, useLeadError } from "./use-lead-error.js";
 import { useLeadEvents } from "./use-lead-events.js";
+import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { useLeadSubmit } from "./use-lead-submit.js";
 /**
  * What the locality field is offered. A storefront serving its own town knows
@@ -37,7 +43,20 @@ export function LeadCapture(props) {
     const [need, setNeed] = useNeed(props.need, needs.map(n => n.value), () => setEditing(false));
     const events = useLeadEvents(root, { formId, layout, experiment });
     useOpenOnHash(`${id}-callback`);
-    const [sent, onSubmit] = useLeadSubmit(props.done !== undefined, { mobile: wire.mobile, name: props.name?.field });
+    const [error, setError] = useLeadError(root, id);
+    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 model = props.pricing ?? null;
+    const flow = flowOf(props.flows, model, shownNeed);
+    const estimate = useEstimate(model, shownNeed, flow, events.estimateShown);
+    // 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) => setError({ 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 !== null && !OWN_FIELDS.form.includes(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]);
@@ -64,17 +83,23 @@ export function LeadCapture(props) {
         setEditing(false);
         events.step("contact");
     };
-    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, primary: primary, open: 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, classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
+    // An arrow key in `qualify-first`: 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: 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";
     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 && props.done !== undefined) {
-        return (_jsx("div", { ref: root, ...rootProps, children: _jsx("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("outline-none", c?.done), children: typeof props.done === "function" ? props.done(sent) : props.done }) }));
+    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: [done, sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: typeof props.booking === "function" ? props.booking(sent) : props.booking, locale: locale, text: flowText, classNames: c }))] }) }));
     }
-    return (_jsxs("div", { ref: root, ...rootProps, 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 })] })), lead !== "form" && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, 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, onPick: pick, onEdit: () => {
+    return (_jsxs("div", { ref: root, ...rootProps, 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 })] })), 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: [_jsx(LocalityField, { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: localitySuggestions(place), placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, label: text.phoneLabel, hint: text.phoneHint, placeholder: text.phonePlaceholder, 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, classNames: c })), props.extras, _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(Button, { type: "submit", size: "touch", className: cn("w-full", c?.submit), children: text.submit }), props.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)] }))] }));
+                        }, 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: estimate.price, locale: locale, text: flowText, classNames: c }), 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 })), props.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 }), props.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)] }))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,13 +1,14 @@
 import { type CaptureChannel } from "../core/channels.js";
-import type { LeadCaptureText } from "../core/lead-capture-text.js";
+import type { LeadCaptureFlowText, LeadCaptureText } from "../core/lead-capture-text.js";
 import type { FormEventHandler } from "react";
-import type { FieldPart } from "./LeadCaptureFields.js";
+import { type FieldPart } from "./LeadCaptureFields.js";
+import type { SendFailure } from "./use-lead-submit.js";
 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";
+export type ChannelPart = "channel" | "primary" | "callback" | "callbackSummary" | "callbackForm" | "callbackLede" | "callbackSubmit" | "consent" | "photos";
 export interface Experiment {
     name: string;
     variant: string;
@@ -44,6 +45,8 @@ export declare function ChannelLink(props: {
  */
 export declare function CallbackForm(props: {
     id: string;
+    /** The card's id, posted so a refusal opens this callback again. */
+    card: string;
     /** The channel that leads: the primary face. */
     primary: boolean;
     open: boolean;
@@ -60,5 +63,27 @@ export declare function CallbackForm(props: {
     text: LeadCaptureText;
     experiment: Experiment | undefined;
     onSubmit: FormEventHandler<HTMLFormElement> | undefined;
+    /** The server's refusal: the field and its words. */
+    error: {
+        field: string;
+        text: string;
+    } | null;
+    /** The script is posting this form. */
+    busy: boolean;
+    failure: SendFailure | null;
+    onRetry: () => void;
+    onSoftError: () => void;
     classNames?: PartClassNames<ChannelPart | FieldPart> | undefined;
 }): import("react").JSX.Element;
+/**
+ * A `quote` need priced from photos (a deep clean, after-works): the photos
+ * go by WhatsApp, with the need already said — only when the place has
+ * WhatsApp; the callback stays where it is.
+ */
+export declare function PhotosAsk(props: {
+    whatsapp: string | null;
+    needLabel: string;
+    text: Pick<LeadCaptureFlowText, "photosTitle" | "photosLede" | "photosCta" | "photosMessage">;
+    experiment: Experiment | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureChannels.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, buttonVariants, cn, FieldLabel, Input } from "@evinvest/uikit";
+import { Button, buttonVariants, cn } from "@evinvest/uikit";
 import { EXPERIMENT_FIELD, VARIANT_FIELD } from "../core/accept.js";
 import { channelHref } from "../core/channels.js";
-import { CHANNEL_FIELD, CONSENT_FIELD } from "../core/lead.js";
+import { CHANNEL_FIELD } from "../core/lead.js";
+import { fillText } from "../core/lead-capture-format.js";
+import { ConsentField, FormMessage, PhoneField } from "./LeadCaptureFields.js";
+import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { partWithLeading } from "./parts.js";
-import { PHONE_INPUT_PROPS, QuoteFormShell } from "./QuoteFormShell.js";
+import { QuoteFormShell } from "./QuoteFormShell.js";
 /**
  * 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
@@ -40,6 +43,19 @@ export function ChannelLink(props) {
  * choose `open` itself; it is still the leading channel's face.
  */
 export function CallbackForm(props) {
-    const { id, primary, open, formId, placeSlug, locale, renderedAt, mobileName, subject, opening, text, experiment, classNames: c } = props;
-    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, 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 }), _jsxs("div", { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { htmlFor: `${id}-phone`, className: c?.label, children: text.phoneLabel }), _jsx(Input, { id: `${id}-phone`, name: mobileName, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: text.phonePlaceholder, required: true, "data-lead-field": "phone", className: c?.control })] }), _jsxs("label", { className: cn("flex min-h-11 items-start gap-3 text-sm text-ink", c?.consent), children: [_jsx("input", { type: "checkbox", name: CONSENT_FIELD, value: text.callbackConsent, required: true, "data-lead-field": "consent", className: "mt-0.5 size-5 shrink-0 accent-primary" }), _jsx("span", { children: text.callbackConsent })] }), _jsx(Button, { type: "submit", size: "touch", className: cn("w-full", c?.callbackSubmit), children: text.callbackSubmit })] })] }));
+    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 })] })] }));
+}
+/**
+ * A `quote` need priced from photos (a deep clean, after-works): the photos
+ * go by WhatsApp, with the need already said — only when the place has
+ * WhatsApp; the callback stays where it is.
+ */
+export function PhotosAsk(props) {
+    const { whatsapp, text, experiment } = props;
+    const href = whatsapp ? channelHref("whatsapp", { phone: null, whatsapp }, fillText(text.photosMessage, { need: props.needLabel })) : null;
+    if (!href)
+        return null;
+    return (_jsxs("div", { className: cn("flex flex-col gap-2 rounded-[var(--control-radius)] border border-border p-4", props.className), children: [_jsx("p", { className: "font-medium text-ink", children: text.photosTitle }), _jsx("p", { className: "text-sm text-ink-soft", children: text.photosLede }), _jsx(Button, { href: href, variant: "outline", size: "touch", className: "w-full", "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: text.photosCta })] }));
 }

package/dist/react/LeadCaptureEstimate.d.ts

@@ -0,0 +1,46 @@
+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 { PartClassNames } from "./parts.js";
+export type EstimatePart = "estimate" | "estimateInput" | "estimateLegend" | "estimateOption" | "price" | "priceTotal" | "breakdown" | "priceNote";
+/**
+ * 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.
+ */
+export declare function useEstimate(model: PricingModel | null, need: string | undefined, flow: LeadFlow, onShown: (need: string, cents: number) => void): {
+    answers: Readonly<Record<string, string>>;
+    answer: (input: string, option: string) => void;
+    price: Price | null;
+};
+/**
+ * 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.
+ */
+export declare function EstimateInputs(props: {
+    model: PricingModel;
+    need: string;
+    locale: string;
+    answers: Readonly<Record<string, string>>;
+    onAnswer: (input: string, option: string) => void;
+    required: boolean;
+    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.
+ */
+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;

package/dist/react/LeadCaptureEstimate.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { useEffect, useMemo, useState } from "react";
+import { formatCents } from "../core/lead-capture-format.js";
+import { estimateField } from "../core/pricing/flow.js";
+import { priceOf } from "../core/pricing/price.js";
+import { labelOf } from "../core/pricing/validate.js";
+/**
+ * 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.
+ */
+export function useEstimate(model, need, flow, onShown) {
+    const [answers, setAnswers] = useState({});
+    const price = useMemo(() => (flow === "quote" || !model || need === undefined ? null : priceOf(model, need, flow === "estimate" ? answers : {})), [model, need, flow, answers]);
+    const cents = flow === "estimate" ? price?.cents : undefined;
+    useEffect(() => {
+        if (need !== undefined && cents !== undefined)
+            onShown(need, cents);
+    }, [need, cents, onShown]);
+    const answer = (input, option) => setAnswers(prev => ({ ...prev, [input]: option }));
+    return { answers, answer, price };
+}
+/**
+ * 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.
+ */
+export function EstimateInputs(props) {
+    const { model, need, locale, answers, classNames: c } = props;
+    const pricing = model.needs[need];
+    if (pricing?.kind !== "estimate")
+        return null;
+    const inputs = pricing.inputs.map(id => model.inputs.find(i => i.id === id)).filter((i) => i !== undefined);
+    return (_jsx("div", { className: cn("flex flex-col gap-5", c?.estimate), children: inputs.map(input => (_jsxs("fieldset", { className: cn("flex flex-col gap-2", c?.estimateInput), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.estimateLegend), children: labelOf(input.labels, locale) }), _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: input.options.map(option => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: estimateField(input.id), value: option.id, required: props.required, checked: answers[input.id] === option.id, onChange: () => props.onAnswer(input.id, option.id), className: "peer absolute inset-0 opacity-0", "data-lead-field": estimateField(input.id) }), _jsx("span", { className: cn("flex h-full min-h-11 items-center rounded-[var(--control-radius)] border border-input px-3 py-2 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.estimateOption), children: labelOf(option.labels, locale) })] }, option.id))) })] }, input.id))) }));
+}
+function lineLabel(line, model, locale, text) {
+    switch (line.kind) {
+        case "base":
+            return text.priceBase;
+        case "rounding":
+            return text.priceRounding;
+        case "minimum":
+            return text.priceMinimum;
+        case "add":
+        case "multiply":
+        case "discount": {
+            // The answer names itself ("2 chambres", "Toutes les 2 semaines"); the question would only repeat it.
+            const option = model.inputs.find(i => i.id === line.input)?.options.find(o => o.id === line.option);
+            return option ? labelOf(option.labels, locale) : line.option;
+        }
+    }
+}
+/**
+ * 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.
+ */
+export function PriceBox(props) {
+    const { model, flow, price, locale, text, classNames: c } = props;
+    // A line that changed nothing (an answer worth 0) is not worth reading out.
+    const lines = price?.breakdown.filter((line, i) => i === 0 || line.cents !== 0) ?? [];
+    return (_jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: cn("flex flex-col gap-2 rounded-[var(--control-radius)] border border-border bg-card p-4", c?.price), children: [_jsx("p", { className: "text-sm text-ink-soft", children: text.priceTitle }), price ? (_jsx("p", { className: cn("font-display text-3xl font-bold text-ink", c?.priceTotal), "data-price-cents": price.cents, children: formatCents(price.cents, locale) })) : (_jsx("p", { className: "text-ink", children: text.pricePending })), flow === "estimate" && lines.length > 1 && (_jsx("ul", { className: cn("flex flex-col gap-1 text-sm text-ink-soft", c?.breakdown), children: lines.map((line, i) => (_jsxs("li", { className: "flex justify-between gap-3", children: [_jsx("span", { children: lineLabel(line, model, locale, text) }), _jsx("span", { className: "tabular-nums", children: formatCents(line.cents, locale, i > 0) })] }, i))) })), _jsx("p", { className: cn("text-sm text-ink-soft", c?.priceNote), children: text.priceNote })] }));
+}

package/dist/react/LeadCaptureFields.d.ts

@@ -1,5 +1,6 @@
+import type { LeadCaptureText } from "../core/lead-capture-text.js";
 import type { PartClassNames } from "./parts.js";
-export type FieldPart = "field" | "label" | "control" | "hint" | "chips" | "chip";
+export type FieldPart = "field" | "label" | "control" | "hint" | "error" | "chips" | "chip";
 export declare function LocalityField(props: {
     name: string;
     label: string;
@@ -9,19 +10,26 @@ export declare function LocalityField(props: {
     placeholder: string | undefined;
     required: boolean;
     optional: string;
+    requiredText: string;
+    /** The server's refusal of this field, in the page's words. */
+    error: string | null;
     hydrated: boolean;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
+export type PhoneText = Pick<LeadCaptureText, "phoneLabel" | "phoneHint" | "phoneInvalid" | "required" | "phonePlaceholder">;
 /**
- * The number, required and never masked. A value that does not read as a
- * phone gets a hint under it when the visitor leaves the field — a hint, not
- * a refusal: the server keeps what it cannot parse, as typed.
+ * The number, required and never masked, on the rule the server holds it to
+ * (`phoneProblem`): one it would refuse blocks the submit, in the page's
+ * words. Leaving the field with such a number shows the hint already — a
+ * hint, read out, not yet an error.
  */
 export declare function PhoneField(props: {
     name: string;
-    label: string;
-    hint: string;
-    placeholder: string | undefined;
+    /** Named when the label is not the `Field`'s own (the callback's). */
+    id?: string | undefined;
+    text: PhoneText;
+    /** The server's refusal of this field, in the page's words. */
+    error: string | null;
     onSoftError: () => void;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
@@ -31,5 +39,29 @@ export declare function NameField(props: {
     placeholder: string | undefined;
     required: boolean;
     optional: string;
+    requiredText: string;
+    error: string | null;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
+/**
+ * The callback's consent: a native checkbox, so `required` holds without a
+ * script (the kit's checkbox is a button), whose value is the sentence beside
+ * it — the lead keeps what was agreed to, word for word.
+ */
+export declare function ConsentField(props: {
+    sentence: string;
+    requiredText: string;
+    error: string | null;
+    className: string | undefined;
+    classNames: PartClassNames<FieldPart> | undefined;
+}): import("react").JSX.Element;
+/**
+ * A refusal no field shows under itself — a brand's extra, the whole form —
+ * just above the submit. Only there when there is one: an alert is read out
+ * as it is inserted, and an empty box would add the form's gap.
+ */
+export declare function FormMessage(props: {
+    id: string;
+    error: string | null;
+    className: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureFields.js

@@ -1,48 +1,118 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn, Field, FieldDescription, FieldLabel, Input } from "@evinvest/uikit";
-import { useId, useRef, useState } from "react";
-import { isPlausiblePhone } from "../core/phone.js";
+import { Button, cn, Field, FieldDescription, FieldError, FieldLabel, Input } from "@evinvest/uikit";
+import { useEffect, useId, useRef, useState } from "react";
+import { CONSENT_FIELD } from "../core/lead.js";
+import { phoneProblem } from "../core/phone.js";
 import { PHONE_INPUT_PROPS } from "./QuoteFormShell.js";
+import { useValidity } from "./use-validity.js";
 /** More than this and the row is a list to read, not a tap to save typing. */
 const MAX_CHIPS = 6;
 const optionalLabel = (label, optional) => (optional ? `${label} (${optional})` : label);
 /** Digits only: a postcode, which the numeric keypad can type and edit. */
 const POSTCODE = /^\d+$/;
+/**
+ * What a field says under itself: the error that blocks (the server's, or the
+ * browser's refusal in the page's words) as an alert, else a hint. Always in
+ * the DOM: a live region announces only what changes inside it.
+ */
+function FieldMessage(props) {
+    const { id, error, hint, classNames: c } = props;
+    return (
+    // Empty, it gives back the field's gap rather than vanish: a live region
+    // hidden while empty is not one some screen readers listen to.
+    _jsx("div", { "aria-live": "polite", className: "empty:-mt-2", children: error ? (_jsx(FieldError, { id: id, className: cn("text-accent-error", c?.error), children: error })) : hint ? (_jsx(FieldDescription, { id: id, className: cn("text-accent-error", c?.hint), children: hint })) : null }));
+}
+const required = (text, on) => (el) => (on && el.value.trim() === "" ? text : "");
 export function LocalityField(props) {
-    const { name, label, servedLabel, served, required, optional, hydrated, classNames: c } = props;
-    const input = useRef(null);
+    const { name, label, servedLabel, served, optional, hydrated, classNames: c } = props;
+    const messageId = useId();
+    const validity = useValidity(required(props.requiredText, props.required));
+    const error = props.error ?? validity.shown;
     const chips = hydrated && served.length > 1 && served.length <= MAX_CHIPS;
     // A commune's name filled in or a tap away must stay editable: iOS's numeric
     // keypad has no letters, so the keypad follows what the field is offered.
     // A list too long for chips offers nothing — the visitor types a postcode.
     const numeric = served.length > MAX_CHIPS || served.every(s => POSTCODE.test(s));
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, required ? null : optional) }), _jsx(Input, { ref: input, name: name, size: "lg", inputMode: numeric ? "numeric" : "text", autoComplete: "postal-code", placeholder: props.placeholder, enterKeyHint: "next", required: required, defaultValue: served.length === 1 ? served[0] : undefined, "data-lead-field": "locality", className: c?.control }), chips && (_jsx("div", { role: "group", "aria-label": servedLabel, className: cn("flex flex-wrap gap-2", c?.chips), children: served.map(commune => (_jsx(Button, { type: "button", variant: "outline", size: "touch", className: cn("px-3", c?.chip), onClick: () => {
-                        if (input.current)
-                            input.current.value = commune;
-                    }, children: commune }, commune))) }))] }));
+    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, props.required ? null : optional) }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", inputMode: numeric ? "numeric" : "text", autoComplete: "postal-code", placeholder: props.placeholder, enterKeyHint: "next", required: props.required, defaultValue: served.length === 1 ? served[0] : undefined, "data-lead-field": "locality", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: c?.control }), chips && (_jsx("div", { role: "group", "aria-label": servedLabel, className: cn("flex flex-wrap gap-2", c?.chips), children: served.map(commune => (_jsx(Button, { type: "button", variant: "outline", size: "touch", className: cn("px-3", c?.chip), onClick: () => {
+                        const el = validity.ref.current;
+                        if (!el)
+                            return;
+                        el.value = commune;
+                        validity.recheck(el);
+                    }, children: commune }, commune))) })), _jsx(FieldMessage, { id: messageId, error: error, classNames: c })] }));
 }
 /**
- * The number, required and never masked. A value that does not read as a
- * phone gets a hint under it when the visitor leaves the field — a hint, not
- * a refusal: the server keeps what it cannot parse, as typed.
+ * The number, required and never masked, on the rule the server holds it to
+ * (`phoneProblem`): one it would refuse blocks the submit, in the page's
+ * words. Leaving the field with such a number shows the hint already — a
+ * hint, read out, not yet an error.
  */
 export function PhoneField(props) {
-    const { name, label, hint, onSoftError, classNames: c } = props;
-    const hintId = useId();
+    const { name, text, onSoftError, classNames: c } = props;
+    const messageId = useId();
     const [doubtful, setDoubtful] = useState(false);
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: label }), _jsx(Input, { name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: props.placeholder, required: true, "data-lead-field": "phone", "aria-invalid": doubtful || undefined, "aria-describedby": doubtful ? hintId : undefined, onBlur: e => {
+    const validity = useValidity(el => {
+        const problem = phoneProblem(el.value);
+        return problem === "required" ? text.required : problem === "invalid" ? text.phoneInvalid : "";
+    });
+    const error = props.error ?? validity.shown;
+    const marked = Boolean(error) || doubtful;
+    // A hint drawn on the blur a press of the submit causes pushes the button
+    // down between press and release, and the click lands on nothing: the
+    // submit's own check speaks instead.
+    const submitting = useRef(false);
+    useEffect(() => {
+        const form = validity.ref.current?.form;
+        if (!form)
+            return;
+        const press = (event) => {
+            submitting.current = event.target instanceof Element && event.target.closest("[type=submit]") !== null;
+        };
+        form.addEventListener("pointerdown", press, true);
+        return () => form.removeEventListener("pointerdown", press, true);
+    }, [validity.ref]);
+    return (_jsxs(Field, { ...(props.id ? { controlId: props.id } : {}), className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: text.phoneLabel }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: text.phonePlaceholder, required: true, "data-lead-field": "phone", "aria-invalid": marked || undefined, "aria-describedby": marked ? messageId : undefined, onInvalid: validity.onInvalid, onBlur: e => {
+                    if (submitting.current) {
+                        submitting.current = false;
+                        return;
+                    }
                     const value = e.currentTarget.value;
-                    const bad = value.trim() !== "" && !isPlausiblePhone(value);
+                    const bad = value.trim() !== "" && phoneProblem(value) !== null;
                     if (bad && !doubtful)
                         onSoftError();
                     setDoubtful(bad);
-                }, onInput: e => {
-                    if (doubtful && isPlausiblePhone(e.currentTarget.value))
+                }, onChange: e => {
+                    validity.onChange(e);
+                    if (doubtful && phoneProblem(e.currentTarget.value) === null)
                         setDoubtful(false);
-                }, className: c?.control }), doubtful && (_jsx(FieldDescription, { id: hintId, className: cn("text-accent-error", c?.hint), children: hint }))] }));
+                }, className: c?.control }), _jsx(FieldMessage, { id: messageId, error: error, hint: doubtful ? text.phoneHint : null, classNames: c })] }));
 }
 export function NameField(props) {
-    const { name, label, placeholder, required, optional, classNames: c } = props;
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, required ? null : optional) }), _jsx(Input, { name: name, size: "lg", autoComplete: "name", enterKeyHint: "next", placeholder: placeholder, required: required, "data-lead-field": "name", className: c?.control })] }));
+    const { name, label, placeholder, optional, classNames: c } = props;
+    const messageId = useId();
+    const validity = useValidity(required(props.requiredText, props.required));
+    const error = props.error ?? validity.shown;
+    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, props.required ? null : optional) }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", autoComplete: "name", enterKeyHint: "next", placeholder: placeholder, required: props.required, "data-lead-field": "name", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: c?.control }), _jsx(FieldMessage, { id: messageId, error: error, classNames: c })] }));
+}
+/**
+ * The callback's consent: a native checkbox, so `required` holds without a
+ * script (the kit's checkbox is a button), whose value is the sentence beside
+ * it — the lead keeps what was agreed to, word for word.
+ */
+export function ConsentField(props) {
+    const messageId = useId();
+    const validity = useValidity(el => (el.checked ? "" : props.requiredText));
+    const error = props.error ?? validity.shown;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: cn("flex min-h-11 items-start gap-3 text-sm text-ink", props.className), children: [_jsx("input", { ref: validity.ref, type: "checkbox", name: CONSENT_FIELD, value: props.sentence, required: true, "data-lead-field": "consent", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: "mt-0.5 size-5 shrink-0 accent-primary" }), _jsx("span", { children: props.sentence })] }), _jsx(FieldMessage, { id: messageId, error: error, classNames: props.classNames })] }));
+}
+/**
+ * A refusal no field shows under itself — a brand's extra, the whole form —
+ * just above the submit. Only there when there is one: an alert is read out
+ * as it is inserted, and an empty box would add the form's gap.
+ */
+export function FormMessage(props) {
+    if (!props.error)
+        return null;
+    return (_jsx(FieldError, { id: props.id, tabIndex: -1, className: cn("text-accent-error outline-none", props.className), children: props.error }));
 }

package/dist/react/LeadCaptureNeed.d.ts

@@ -12,7 +12,12 @@ export interface NeedFieldProps {
     hydrated: boolean;
     label: string;
     changeLabel: string;
+    /** Blocks the submit while no tile is chosen, in the page's words. */
+    requiredText: string;
+    /** The visitor's answer: a tap, Enter or Space — `qualify-first` moves on. */
     onPick: (need: string) => void;
+    /** An arrow key moved the choice: chosen, but the visitor is still choosing. */
+    onSelect: (need: string) => void;
     onEdit: () => void;
     classNames?: PartClassNames<NeedPart> | undefined;
 }