@evinvest/kitstart 0.17.0 → 0.19.1

package/dist/react/LeadCapture.js

@@ -2,15 +2,16 @@
 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 { CHANNELS_FIELD, PRICE_CHANGED, SHOWN_CENTS_FIELD } from "../core/accept.js";
 import { resolveChannels } from "../core/channels.js";
 import { CHANNEL_FIELD, leadErrorFor } from "../core/lead.js";
-import { fillText, openingText } from "../core/lead-capture-format.js";
+import { fillText, formatCents, openingText } from "../core/lead-capture-format.js";
+import { channelsAvailable, MESSAGE_REF_FIELD } from "../core/messenger.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 { ESTIMATE_UNKNOWN, estimateField, flowOf } from "../core/pricing/flow.js";
-import { labelOf } from "../core/pricing/validate.js";
+import { labelOf } from "../core/pricing/label.js";
 import { focusNext } from "./focus-next.js";
 import { LeadBooking } from "./LeadBooking.js";
 import { LeadCapturePriced } from "./LeadCapturePriced.js";
@@ -20,6 +21,7 @@ import { ConsentField, FormMessage, LocalityField, NameField, PhoneField } from
 import { NeedField } from "./LeadCaptureNeed.js";
 import { PriceBox, PriceCompact } from "./LeadCapturePrice.js";
 import { IntroField, LeadSteps } from "./LeadCaptureSteps.js";
+import { drawsAt, initialMode, MessengerSlot, messengerShownOf, NO_MESSENGERS, useMessageRef } from "./LeadCaptureMessenger.js";
 import { stepOfField, stepsOf, useLeadSteps } from "./lead-steps.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
 import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash, usePostcode } from "./use-lead-context.js";
@@ -64,7 +66,12 @@ export function LeadCapture(props) {
     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 });
+    const facts = props.messengers ?? NO_MESSENGERS;
+    const shown = messengerShownOf(props.messenger, facts);
+    const channels = channelsAvailable(props.messengers);
+    const [mode, setMode] = useState(() => initialMode(props.messenger));
+    const { ref: messageRef, renew: renewRef, minted } = useMessageRef(props.refPrefix, shown !== null);
+    const events = useLeadEvents(root, { formId, layout, experiment, channels, messenger: shown ?? undefined });
     useOpenOnHash(`${id}-callback`);
     // Only this card's: a page may draw several, and the query names one.
     const initial = leadErrorFor(props.initialError ?? null, id);
@@ -78,7 +85,8 @@ export function LeadCapture(props) {
     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");
+    // `thanks` offers its messengers in the success: the card stays.
+    const staysInCard = (ch) => props.done !== undefined || (ch === "form" && (flow !== "quote" || shown === "thanks"));
     const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(staysInCard, { mobile: wire.mobile, name: props.name?.field }, {
         onRefused: (channel, field, cents) => {
             repriced.refused(field, cents);
@@ -102,7 +110,9 @@ export function LeadCapture(props) {
     const needLabel = needs.find(n => n.value === need)?.label;
     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");
+    // A variant owns WhatsApp — its link posts the lead first — and the owner's model has no text message.
+    const owned = (ch) => shown !== null && shown !== "fallback" && (ch === "whatsapp" || ch === "sms");
+    const links = rest.filter((ch) => ch !== "form" && ch !== "callback" && ch !== "telegram" && !owned(ch));
     // 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) : [];
@@ -179,11 +189,66 @@ export function LeadCapture(props) {
             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 };
+    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, channels: channels, 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" || ch === "telegram" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, icon: props.channelIcons?.[ch], classNames: c }, ch));
+    // The estimate's answers as the message says them: the whole label, and the
+    // brand's words for the preview and the need's line (`previewLabels`, else
+    // `shortLabels`). «I don't know» is no answer; the timing question has a line of its own.
+    const answerOf = (input) => {
+        const option = input.options.find(o => o.id === estimate.answers[input.id]);
+        if (!option)
+            return null;
+        const label = labelOf(option.labels, locale);
+        const question = props.questions?.[input.id];
+        return { label, short: question?.previewLabels?.[option.id] ?? question?.shortLabels?.[option.id] ?? label };
+    };
+    const timingInput = asked.find(i => i.id === props.messengerTiming?.input);
+    const answerShorts = asked
+        .filter(i => i !== timingInput)
+        .map(i => answerOf(i)?.short)
+        .filter((short) => short !== undefined);
+    // A variant arranges the card's own phone field and submit; it never draws its own.
+    const kitOf = (at, variant, drawn) => ({
+        at,
+        variant,
+        shown: drawn,
+        facts,
+        id,
+        locale,
+        brand: props.brand ?? "",
+        text,
+        wire,
+        needs,
+        needLabel: needs.find(n => n.value === shownNeed)?.label ?? null,
+        priceText: flow !== "quote" && repriced.price ? formatCents(repriced.price.cents, locale) : null,
+        answers: answerShorts,
+        timing: timingInput ? answerOf(timingInput) : null,
+        mode,
+        setMode,
+        messageRef,
+        renewRef,
+        ready: minted,
+        phone: options => phoneOf(options),
+        // Inside a variant the submit is its main button, dressed as its messenger's.
+        // …with the phone's icon before its words: it is the call.
+        submit: (label, options) => submitOf(label, { ...options, className: cn(c?.messengerCta, options?.className), icon: props.channelIcons?.phone ?? props.channelIcons?.callback }),
+        title: text.title,
+        lede: text.lede,
+        events,
+        icons: props.channelIcons,
+        experiment,
+        classNames: c,
+    });
+    const slot = (at) => shown !== null && props.messenger && drawsAt(shown, at) && _jsx(MessengerSlot, { kit: kitOf(at, props.messenger, shown) }, `messenger-${at}`);
+    const rootProps = {
+        id,
+        className: cn("flex w-full flex-col gap-6", props.className, c?.root),
+        "data-experiment": experiment?.name,
+        "data-variant": experiment?.variant,
+        "data-channels-available": channels,
+    };
     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 (_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 })), sent.channel === "form" && slot("done")] }) }));
     }
     // An arrow key in `steps`: chosen, and the screen stays on until the answer is given.
     const stay = (choose) => (...args) => {
@@ -197,11 +262,28 @@ export function LeadCapture(props) {
     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")] }));
+    function phoneOf(o = {}) {
+        return (_jsxs(_Fragment, { children: [_jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), optional: o.optional, disabled: o.disabled, placeholder: o.placeholder, frame: o.frame, form: o.form, classNames: c }), _jsx(Fragment, { children: "after" in o ? o.after : props.afterPhone }, "afterPhone")] }));
+    }
+    // A variant's `contact` takes the phone's place, and brings its own button.
+    const contactSlot = slot("contact");
+    const phone = contactSlot || phoneOf();
     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 })] }));
+    function submitOf(label, o = {}) {
+        return (_jsx(SubmitButton, { busy: mainBusy, label: label ?? (callbackPreset ? text.callbackSubmit : flow === "quote" ? text.submit : flowText.bookSubmit), sending: text.sending, form: o.form, className: cn(callbackPreset ? cn(c?.submit, c?.callbackSubmit) : c?.submit, o.className), children: o.icon !== undefined && o.icon !== null && (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center [&_svg]:size-5", c?.channelIcon), children: o.icon })) }));
+    }
+    /**
+     * Without a script a variant leads nowhere — its messenger links are inert
+     * until the reference is minted — so a browser that runs none gets the
+     * control's phone and submit (`select` draws the phone already). Never
+     * parsed where scripts run.
+     */
+    function noScript() {
+        return (_jsxs("noscript", { children: [shown !== "select" && phoneOf({ after: null }), submitOf()] }));
+    }
+    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: [!contactSlot && submitOf(), contactSlot && noScript(), slot("afterSubmit"), _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);
@@ -258,7 +340,10 @@ export function LeadCapture(props) {
             }
         }
     };
-    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: () => {
+    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: slot("head") ||
+                    (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 }), !drawsAt(shown, "afterHead") && _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] }))) }, "head"), slot("afterHead"), lead !== "form" && !owned(lead) && (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 }), _jsx("input", { type: "hidden", name: CHANNELS_FIELD, value: channels }), messageRef && _jsx("input", { type: "hidden", name: MESSAGE_REF_FIELD, value: messageRef }), 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 })) : drawsAt(shown, "body") && mode === null ? (
+                    // `saga`'s first screen: the channel, before anything else.
+                    _jsxs(_Fragment, { children: [slot("body"), noScript()] })) : (_jsxs(_Fragment, { children: [slot("beforeNeed"), _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)) &&

package/dist/react/LeadCaptureChannels.d.ts

@@ -10,7 +10,7 @@ import { type PartClassNames } from "./parts.js";
  */
 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 type ChannelIconKey = "phone" | "whatsapp" | "sms" | "callback" | "telegram";
 export interface Experiment {
     name: string;
     variant: string;
@@ -19,6 +19,8 @@ export interface Experiment {
 export declare function ExperimentFields({ experiment }: {
     experiment: Experiment | undefined;
 }): import("react").JSX.Element | null;
+/** The links of the channel list; a bot is a `messenger` variant's. */
+type LinkChannel = Exclude<CaptureChannel, "form" | "callback" | "telegram">;
 /**
  * A channel that leaves the page — `tel:`, `wa.me`, `sms:` — as a link the
  * boundary counts: the tracker reads `tel:` and WhatsApp itself, `data-intent`
@@ -26,7 +28,7 @@ export declare function ExperimentFields({ experiment }: {
  * because the tracker reads the link's own `data-*`.
  */
 export declare function ChannelLink(props: {
-    channel: Exclude<CaptureChannel, "form" | "callback">;
+    channel: LinkChannel;
     contact: {
         phone: string | null;
         whatsapp: string | null;
@@ -65,6 +67,8 @@ export declare function CallbackForm(props: {
     opening: string | null;
     text: LeadCaptureText;
     experiment: Experiment | undefined;
+    /** The messengers the card offered (`channels_available`), for the submit's event. */
+    channels?: string | undefined;
     onSubmit: FormEventHandler<HTMLFormElement> | undefined;
     /** The server's refusal: the field and its words. */
     error: {
@@ -93,3 +97,4 @@ export declare function PhotosAsk(props: {
     experiment: Experiment | undefined;
     className?: string | undefined;
 }): import("react").JSX.Element | null;
+export {};

package/dist/react/LeadCaptureChannels.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, buttonVariants, cn } from "@evinvest/uikit";
-import { EXPERIMENT_FIELD, VARIANT_FIELD } from "../core/accept.js";
+import { CHANNELS_FIELD, EXPERIMENT_FIELD, VARIANT_FIELD } from "../core/accept.js";
 import { channelHref } from "../core/channels.js";
 import { CHANNEL_FIELD } from "../core/lead.js";
 import { fillText } from "../core/lead-capture-format.js";
@@ -51,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(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 })] })] }));
+    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 }), props.channels && _jsx("input", { type: "hidden", name: CHANNELS_FIELD, value: props.channels }), _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

@@ -17,6 +17,12 @@ export interface EstimateQuestion {
     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;
+    /**
+     * The answer as a `messenger` variant's message says it, per option id — in
+     * the need's line and the preview («2 ch.», «40–70 m²»), where a tile's own
+     * «2» says nothing. Over `shortLabels`, then the label.
+     */
+    previewLabels?: 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

package/dist/react/LeadCaptureEstimate.js

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState } from "react";
 import { formatCents } from "../core/lead-capture-format.js";
 import { ESTIMATE_UNKNOWN, estimateField } from "../core/pricing/flow.js";
 import { priceOf } from "../core/pricing/price.js";
-import { labelOf } from "../core/pricing/validate.js";
+import { labelOf } from "../core/pricing/label.js";
 import { TileGroup } from "./LeadCaptureTiles.js";
 /**
  * The screens an estimate's questions take in `steps`, in order: one each,

package/dist/react/LeadCaptureFields.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import type { LeadCaptureText } from "../core/lead-capture-text.js";
 import type { PartClassNames } from "./parts.js";
 export type FieldPart = "field" | "label" | "control" | "hint" | "error" | "chips" | "chip";
@@ -24,6 +25,11 @@ export type PhoneText = Pick<LeadCaptureText, "phoneLabel" | "phoneHint" | "phon
  * (`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.
+ *
+ * A `messenger` variant asks it differently: `optional` (the chat answers;
+ * a number typed is still held to the rule), `disabled` (a bot needs none),
+ * in a box of the variant's with a channel picker beside it (`frame`), or in
+ * a drawer outside the form's element (`form`, the form's id).
  */
 export declare function PhoneField(props: {
     name: string;
@@ -33,6 +39,17 @@ export declare function PhoneField(props: {
     /** The server's refusal of this field, in the page's words. */
     error: string | null;
     onSoftError: () => void;
+    optional?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** Over `text.phonePlaceholder`. */
+    placeholder?: string | undefined;
+    /**
+     * The variant's box around the input (the kit's `InputGroup` with a picker):
+     * the input then draws no box of its own. The variant's, so the control's
+     * page never loads the group.
+     */
+    frame?: ((input: ReactNode) => ReactNode) | undefined;
+    form?: string | undefined;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
 export declare function NameField(props: {

package/dist/react/LeadCaptureFields.js

@@ -48,14 +48,20 @@ export function LocalityField(props) {
  * (`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.
+ *
+ * A `messenger` variant asks it differently: `optional` (the chat answers;
+ * a number typed is still held to the rule), `disabled` (a bot needs none),
+ * in a box of the variant's with a channel picker beside it (`frame`), or in
+ * a drawer outside the form's element (`form`, the form's id).
  */
 export function PhoneField(props) {
-    const { name, text, onSoftError, classNames: c } = props;
+    const { name, text, onSoftError, frame, classNames: c } = props;
+    const optional = props.optional === true || props.disabled === true;
     const messageId = useId();
     const [doubtful, setDoubtful] = useState(false);
     const validity = useValidity(el => {
         const problem = phoneProblem(el.value);
-        return problem === "required" ? text.required : problem === "invalid" ? text.phoneInvalid : "";
+        return problem === "required" ? (optional ? "" : text.required) : problem === "invalid" ? text.phoneInvalid : "";
     });
     const error = props.error ?? validity.shown;
     const marked = Boolean(error) || doubtful;
@@ -95,37 +101,40 @@ export function PhoneField(props) {
             onSoftError();
         setDoubtful(bad);
     };
-    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 => {
-                    const value = e.currentTarget.value;
-                    const press = pressed.current;
-                    pressed.current = null;
-                    if (press === "submit")
-                        return;
-                    if (press === null)
-                        return judge(value);
-                    // After the press's click, which lands where the press began; a
-                    // cancelled press (a scroll) ends the wait too, and so does a
-                    // release no click follows (dragged off), a moment later.
-                    let timer;
-                    const ends = ["click", "pointercancel"];
-                    const over = () => {
-                        for (const type of ends)
-                            window.removeEventListener(type, over, true);
-                        window.removeEventListener("pointerup", late, true);
-                        clearTimeout(timer);
-                        setTimeout(() => judge(value), 0);
-                    };
-                    const late = () => {
-                        timer = setTimeout(over, 500);
-                    };
-                    for (const type of ends)
-                        window.addEventListener(type, over, true);
-                    window.addEventListener("pointerup", late, true);
-                }, onChange: e => {
-                    validity.onChange(e);
-                    if (doubtful && phoneProblem(e.currentTarget.value) === null)
-                        setDoubtful(false);
-                }, className: c?.control }), _jsx(FieldMessage, { id: messageId, error: error, hint: doubtful ? text.phoneHint : null, classNames: c })] }));
+    const input = (_jsx(Input, { ref: validity.ref, name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: props.placeholder ?? text.phonePlaceholder, required: !optional, disabled: props.disabled, form: props.form, "data-lead-field": "phone", "aria-invalid": marked || undefined, "aria-describedby": marked ? messageId : undefined, onInvalid: validity.onInvalid, onBlur: e => {
+            const value = e.currentTarget.value;
+            const press = pressed.current;
+            pressed.current = null;
+            if (press === "submit")
+                return;
+            if (press === null)
+                return judge(value);
+            // After the press's click, which lands where the press began; a
+            // cancelled press (a scroll) ends the wait too, and so does a
+            // release no click follows (dragged off), a moment later.
+            let timer;
+            const ends = ["click", "pointercancel"];
+            const over = () => {
+                for (const type of ends)
+                    window.removeEventListener(type, over, true);
+                window.removeEventListener("pointerup", late, true);
+                clearTimeout(timer);
+                setTimeout(() => judge(value), 0);
+            };
+            const late = () => {
+                timer = setTimeout(over, 500);
+            };
+            for (const type of ends)
+                window.addEventListener(type, over, true);
+            window.addEventListener("pointerup", late, true);
+        }, onChange: e => {
+            validity.onChange(e);
+            if (doubtful && phoneProblem(e.currentTarget.value) === null)
+                setDoubtful(false);
+        }, 
+        // In a frame the box is the frame's: the input loses its own border and ring.
+        className: frame ? "h-full flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0" : c?.control }));
+    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 }), frame ? frame(input) : input, _jsx(FieldMessage, { id: messageId, error: error, hint: doubtful ? text.phoneHint : null, classNames: c })] }));
 }
 export function NameField(props) {
     const { name, label, placeholder, optional, classNames: c } = props;

package/dist/react/LeadCaptureMessenger.d.ts

@@ -0,0 +1,41 @@
+import { type MessengerFacts, type MessengerMode, type MessengerVariant } from "../core/messenger.js";
+import type { MessengerAt, MessengerKit, MessengerShown } from "./messenger/types.js";
+export declare const NO_MESSENGERS: MessengerFacts;
+/**
+ * What a variant becomes on this place: itself while the place has WhatsApp;
+ * without it the control (Figma's «Выключено в панели») — with a way to the
+ * bot when there is one — except `urgency`, whose question is the lead's
+ * (both answers then ask the phone), and `thanks`, whose success keeps the
+ * bot. `null`: the control as it is.
+ */
+export declare function messengerShownOf(variant: MessengerVariant | undefined, facts: MessengerFacts): MessengerShown | null;
+export declare function drawsAt(shown: MessengerShown | null, at: MessengerAt): boolean;
+/** The channel a variant starts on: none until asked (`saga`, `urgency`), else WhatsApp. */
+export declare function initialMode(variant: MessengerVariant | undefined): MessengerMode | null;
+/**
+ * The card's `message_ref`, minted once the script runs — a server render
+ * cannot know it without the hydration seeing another — and again by
+ * `renew`, after a messenger lead is posted.
+ */
+export declare function useMessageRef(prefix: string | undefined, on: boolean): {
+    ref: string | null;
+    renew: () => void;
+    minted: boolean;
+};
+/**
+ * One variant's piece at one place in the card; nothing where it draws
+ * nothing.
+ *
+ * Drawn by the server, or hydrated, it has no boundary of its own. The server
+ * finds the variant loaded (every one is, as this module loads) and writes it
+ * into the page whole — a boundary would not do: React writes a large
+ * boundary's content apart from the shell and reveals it late, the card drawn
+ * without its contact block first. Hydrating, a variant whose chunk is still
+ * on its way holds the card's hydration — the server's markup stays as it is,
+ * and nothing in the card runs until the chunk is here. A piece first drawn
+ * after that (a step, the success) is the browser's own: it waits behind a
+ * boundary, its chunk loaded then.
+ */
+export declare function MessengerSlot({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureMessenger.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useState, useSyncExternalStore } from "react";
+import { MESSAGE_REF_PREFIX, newMessageRef } from "../core/messenger.js";
+/**
+ * The `messenger` variants, each its own chunk: a page pays for the one its
+ * arm draws, and the control for none. `LeadCapture` only says where.
+ */
+const LOAD = {
+    select: () => import("./messenger/select.js"),
+    segment: () => import("./messenger/segment.js"),
+    tiles: () => import("./messenger/tiles.js"),
+    thanks: () => import("./messenger/thanks.js"),
+    swap: () => import("./messenger/swap.js"),
+    saga: () => import("./messenger/saga.js"),
+    urgency: () => import("./messenger/urgency.js"),
+    sheet: () => import("./messenger/sheet.js"),
+    chip: () => import("./messenger/chip.js"),
+    split: () => import("./messenger/split.js"),
+    fallback: () => import("./messenger/fallback.js"),
+};
+const LOADING = new Map();
+/** The variants whose chunk has arrived, by kind. */
+const MODULES = new Map();
+/** The variant's chunk, asked for once a page. */
+function load(kind) {
+    const known = LOADING.get(kind);
+    if (known)
+        return known;
+    const loading = LOAD[kind]().then(mod => {
+        MODULES.set(kind, mod);
+        return mod;
+    });
+    LOADING.set(kind, loading);
+    return loading;
+}
+const KINDS = ["select", "segment", "tiles", "thanks", "swap", "saga", "urgency", "sheet", "chip", "split", "fallback"];
+// On the server every variant is loaded as the module is: a render then finds
+// its variant here and writes it into the page whole. One still loading
+// renders through `lazy` and streams in behind its boundary, after the shell
+// — React reveals such a boundary late, and the card would draw without its
+// contact block first.
+if (typeof window === "undefined")
+    for (const kind of KINDS)
+        void load(kind).catch(() => undefined);
+/** Until its chunk is here, a variant is drawn through `lazy`, behind its boundary. */
+const LAZY = new Map(KINDS.map(kind => [kind, lazy(() => load(kind))]));
+/** The variant's component: its module's own once it is here, else its lazy stand-in. */
+function partOf(kind) {
+    return MODULES.get(kind)?.default ?? LAZY.get(kind) ?? null;
+}
+/** Where each variant draws; everywhere else the card is the control's. */
+const USES = {
+    select: ["contact"],
+    segment: ["contact"],
+    tiles: ["contact"],
+    thanks: ["done"],
+    swap: ["contact"],
+    saga: ["head", "body", "contact"],
+    urgency: ["beforeNeed", "contact"],
+    sheet: ["contact"],
+    chip: ["afterHead", "contact"],
+    split: ["contact"],
+    fallback: ["afterSubmit"],
+};
+export const NO_MESSENGERS = { whatsapp: null, telegram: null };
+/**
+ * What a variant becomes on this place: itself while the place has WhatsApp;
+ * without it the control (Figma's «Выключено в панели») — with a way to the
+ * bot when there is one — except `urgency`, whose question is the lead's
+ * (both answers then ask the phone), and `thanks`, whose success keeps the
+ * bot. `null`: the control as it is.
+ */
+export function messengerShownOf(variant, facts) {
+    if (!variant)
+        return null;
+    if (facts.whatsapp)
+        return variant.kind;
+    if (variant.kind === "urgency")
+        return "urgency";
+    if (!facts.telegram)
+        return null;
+    return variant.kind === "thanks" ? "thanks" : "fallback";
+}
+export function drawsAt(shown, at) {
+    return shown !== null && USES[shown].includes(at);
+}
+/** The channel a variant starts on: none until asked (`saga`, `urgency`), else WhatsApp. */
+export function initialMode(variant) {
+    return variant?.kind === "saga" || variant?.kind === "urgency" ? null : "whatsapp";
+}
+/**
+ * The card's `message_ref`, minted once the script runs — a server render
+ * cannot know it without the hydration seeing another — and again by
+ * `renew`, after a messenger lead is posted.
+ */
+export function useMessageRef(prefix, on) {
+    const [ref, setRef] = useState(null);
+    // Without a prefix there is no reference to wait for; with one, nothing is
+    // minted on the server — an ISR page is one render for every visitor.
+    const [settled, setSettled] = useState(false);
+    const valid = on && prefix !== undefined && MESSAGE_REF_PREFIX.test(prefix);
+    useEffect(() => {
+        if (valid && prefix !== undefined)
+            setRef(newMessageRef(prefix));
+        setSettled(true);
+    }, [valid, prefix]);
+    return { ref, renew: () => (valid && prefix !== undefined ? setRef(newMessageRef(prefix)) : undefined), minted: settled && (!valid || ref !== null) };
+}
+const noop = () => () => undefined;
+/**
+ * One variant's piece at one place in the card; nothing where it draws
+ * nothing.
+ *
+ * Drawn by the server, or hydrated, it has no boundary of its own. The server
+ * finds the variant loaded (every one is, as this module loads) and writes it
+ * into the page whole — a boundary would not do: React writes a large
+ * boundary's content apart from the shell and reveals it late, the card drawn
+ * without its contact block first. Hydrating, a variant whose chunk is still
+ * on its way holds the card's hydration — the server's markup stays as it is,
+ * and nothing in the card runs until the chunk is here. A piece first drawn
+ * after that (a step, the success) is the browser's own: it waits behind a
+ * boundary, its chunk loaded then.
+ */
+export function MessengerSlot({ kit }) {
+    const hydrating = useSyncExternalStore(noop, () => false, () => true);
+    // Chosen on the first render: a structure swapped under the slot would draw the variant anew.
+    const [wrapped] = useState(() => !hydrating);
+    const [Part] = useState(() => partOf(kit.shown));
+    if (!drawsAt(kit.shown, kit.at) || !Part)
+        return null;
+    return wrapped ? (_jsx(Suspense, { fallback: null, children: _jsx(Part, { kit: kit }) })) : (_jsx(Part, { kit: kit }));
+}

package/dist/react/LeadCapturePrice.d.ts

@@ -2,7 +2,12 @@ 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 PricePart = "price" | "priceTotal" | "breakdown" | "priceNote" | "priceLine" | "priceTaxCredit" | "priceDetail";
+/**
+ * `priceDetail`: the compact price's «Détail», the trigger — the popover's
+ * button, or the `<details>`' summary without a script; `priceDetailContent`:
+ * the breakdown it pops over the card.
+ */
+export type PricePart = "price" | "priceTotal" | "breakdown" | "priceNote" | "priceLine" | "priceTaxCredit" | "priceDetail" | "priceDetailContent";
 /**
  * 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
@@ -22,8 +27,9 @@ export declare const afterCredit: (cents: number, ratio: number) => number;
 /**
  * `price="compact"`: the price on one line (`priceLine`), what is left after
  * the brand's tax credit when it has one (`taxCredit`, a ratio), and how it
- * was reached behind a disclosure — a `<details>`, so it opens without a
- * script. Read out as it changes, the line only.
+ * was reached behind «Détail» — the kit's `Popover`, over the card, so
+ * opening it moves nothing; without a script a `<details>`, which opens in
+ * place. Read out as it changes, the line only.
  */
 export declare function PriceCompact(props: {
     model: PricingModel;