@evinvest/kitstart 0.9.0 → 0.11.0

package/dist/react/LeadCapture.js

@@ -1,11 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@evinvest/uikit";
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { PRICE_CHANGED, SHOWN_CENTS_FIELD } from "../core/accept.js";
 import { resolveChannels } from "../core/channels.js";
+import { leadErrorFor } from "../core/lead.js";
 import { fillText, openingText } from "../core/lead-capture-format.js";
+import { flowTextOf } from "../core/lead-capture-text.js";
+import { bookingOf } from "../core/booking/model.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
-import { CallbackForm, ChannelLink, ExperimentFields } from "./LeadCaptureChannels.js";
+import { flowOf } from "../core/pricing/flow.js";
+import { LeadBooking } from "./LeadBooking.js";
+import { LeadCapturePriced } from "./LeadCapturePriced.js";
+import { CallbackForm, ChannelLink, ExperimentFields, PhotosAsk } from "./LeadCaptureChannels.js";
+import { EstimateInputs, PriceBox, useEstimate } from "./LeadCaptureEstimate.js";
 import { FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
 import { NeedField } from "./LeadCaptureNeed.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
@@ -14,6 +22,7 @@ import { errorText, formMessageId, OWN_FIELDS, useLeadError } from "./use-lead-e
 import { useLeadEvents } from "./use-lead-events.js";
 import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { useLeadSubmit } from "./use-lead-submit.js";
+import { useRepriced } from "./use-repriced.js";
 /**
  * What the locality field is offered. A storefront serving its own town knows
  * that town's postcode — what the field asks — so it offers that, not the
@@ -39,12 +48,29 @@ 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 [error, setError] = useLeadError(root, id);
-    const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(props.done !== undefined, { mobile: wire.mobile, name: props.name?.field }, { onRefused: (channel, field) => setError({ channel, field }), onFailed: (channel, why) => events.submitError(why, channel) });
+    // Only this card's: a page may draw several, and the query names one.
+    const initial = leadErrorFor(props.initialError ?? null, id);
+    const [error, setError] = useLeadError(root, id, initial);
+    const flowText = flowTextOf(text, locale);
+    // `single` shows its select at the first need until one is picked: that is the need on screen.
+    const shownNeed = need ?? (layout === "single" ? needs[0]?.value : undefined);
+    const model = props.pricing ?? null;
+    const flow = flowOf(props.flows, model, shownNeed);
+    const estimate = useEstimate(model, shownNeed, flow, events.estimateShown);
+    const repriced = useRepriced(estimate.price, shownNeed, flowText, locale);
+    // A priced lead stays in the card: its price is confirmed there, and the slot promised.
+    const staysInCard = (ch) => props.done !== undefined || (ch === "form" && flow !== "quote");
+    const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(staysInCard, { mobile: wire.mobile, name: props.name?.field }, {
+        onRefused: (channel, field, cents) => {
+            repriced.refused(field, cents);
+            setError({ channel, field });
+        },
+        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 above = formError === PRICE_CHANGED ? repriced.message() : 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]);
@@ -76,17 +102,18 @@ export function LeadCapture(props) {
         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));
+    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
     // `qualify-first` shows the contact step as soon as a need's radio is
     // checked (`:has`) — without a script, and inside the tap with one.
     const contactShown = layout === "single" || (need !== undefined && !editing);
     const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
     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: [_jsx(Fragment, { children: done }, "done"), sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: props.booking === undefined ? (_jsx(LeadBooking, { booking: bookingOf(place, props.bookingVariant), sent: sent, locale: locale, text: flowText, adapters: props.bookingAdapters, embed: props.bookingEmbed, formId: formId, classNames: c })) : typeof props.booking === "function" ? (props.booking(sent)) : (props.booking), locale: locale, text: flowText, classNames: c }))] }) }));
     }
-    return (_jsxs("div", { ref: root, ...rootProps, children: [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: () => {
+    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })) }, "head"), lead !== "form" && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), _jsx(NeedField, { layout: layout, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, onPick: pick, onSelect: select, onEdit: () => {
                             setEditing(true);
                             events.step("need");
-                        }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [_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: text.submit, 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)] }))] }));
+                        }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [model && shownNeed !== undefined && flow === "estimate" && (_jsx(EstimateInputs, { model: model, need: shownNeed, locale: locale, answers: estimate.answers, onAnswer: estimate.answer, required: hydrated, classNames: c })), model && flow !== "quote" && _jsx(PriceBox, { model: model, flow: flow, price: repriced.price, locale: locale, text: flowText, classNames: c }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos })), _jsx(LocalityField, { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: localitySuggestions(place), placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c })), _jsx(Fragment, { children: props.extras }, "extras"), _jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: failure?.channel === "form" ? failure.failure : null, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: busy === "form", label: flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: c?.submit }), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] })] }), (links.length > 0 || rest.includes("callback")) && (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && channel("callback", false)] }))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,5 +1,5 @@
 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 { SendFailure } from "./use-lead-submit.js";
@@ -8,7 +8,7 @@ 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;
@@ -75,3 +75,15 @@ export declare function CallbackForm(props: {
     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

@@ -3,6 +3,7 @@ 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 } 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";
@@ -46,3 +47,15 @@ export function CallbackForm(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.js

@@ -19,9 +19,10 @@ const POSTCODE = /^\d+$/;
 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 }));
+    // Empty, it leaves the flex flow (an absolute child takes no gap, whatever
+    // gap the brand gives the field) rather than vanish: a live region hidden
+    // while empty is not one some screen readers listen to.
+    _jsx("div", { "aria-live": "polite", className: "empty:absolute", 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) {
@@ -58,30 +59,68 @@ export function PhoneField(props) {
     });
     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);
+    // A hint drawn on the blur a press causes pushes whatever is below the
+    // field down between press and release, and the tap lands on nothing (the
+    // consent box, the submit). So a press on this form's submit draws no hint
+    // — the submit's own check speaks instead — and a press anywhere else
+    // draws it only once the press is over.
+    const pressed = useRef(null);
     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;
+            const own = validity.ref.current;
+            const target = event.target instanceof Element ? event.target : null;
+            const submit = target?.closest("[type=submit]");
+            pressed.current = target === own ? null : submit && own?.form?.contains(submit) ? "submit" : "other";
+        };
+        // The press lasts until its click, not its release: on touch the
+        // release comes before the blur it causes (down, up, mousedown, blur,
+        // click). A press that blurred nothing must not hold a later keyboard
+        // blur, so a key ends it too.
+        const release = () => {
+            pressed.current = null;
+        };
+        const ends = ["click", "pointercancel", "keydown"];
+        document.addEventListener("pointerdown", press, true);
+        for (const type of ends)
+            document.addEventListener(type, release, true);
+        return () => {
+            document.removeEventListener("pointerdown", press, true);
+            for (const type of ends)
+                document.removeEventListener(type, release, true);
         };
-        form.addEventListener("pointerdown", press, true);
-        return () => form.removeEventListener("pointerdown", press, true);
     }, [validity.ref]);
+    const judge = (value) => {
+        const bad = value.trim() !== "" && phoneProblem(value) !== null;
+        if (bad && !doubtful)
+            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 => {
-                    if (submitting.current) {
-                        submitting.current = false;
-                        return;
-                    }
                     const value = e.currentTarget.value;
-                    const bad = value.trim() !== "" && phoneProblem(value) !== null;
-                    if (bad && !doubtful)
-                        onSoftError();
-                    setDoubtful(bad);
+                    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)

package/dist/react/LeadCapturePriced.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
+import type { LeadSent } from "./use-lead-submit.js";
+import type { PartClassNames } from "./parts.js";
+export type PricedPart = "priced" | "pricedPrice" | "pricedNote";
+/**
+ * After a priced lead (`estimate`, `fixed`): the price the server took it at,
+ * then how the slot is set — the place's booking (`LeadBooking`), or the
+ * brand's own `booking`; with neither, the promise of a call. The lead is stored before any of this, so an abandoned booking is
+ * still a lead to call.
+ */
+export declare function LeadCapturePriced(props: {
+    sent: LeadSent;
+    booking: ReactNode;
+    locale: string;
+    text: LeadCaptureFlowText;
+    classNames?: PartClassNames<PricedPart> | undefined;
+}): import("react").JSX.Element;

package/dist/react/LeadCapturePriced.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { Fragment } from "react";
+import { fillText, formatCents } from "../core/lead-capture-format.js";
+/**
+ * After a priced lead (`estimate`, `fixed`): the price the server took it at,
+ * then how the slot is set — the place's booking (`LeadBooking`), or the
+ * brand's own `booking`; with neither, the promise of a call. The lead is stored before any of this, so an abandoned booking is
+ * still a lead to call.
+ */
+export function LeadCapturePriced(props) {
+    const { sent, locale, text, classNames: c } = props;
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", c?.priced), children: [sent.cents !== undefined && _jsx("p", { className: cn("font-medium text-ink", c?.pricedPrice), children: fillText(text.sentPrice, { price: formatCents(sent.cents, locale) }) }), _jsx(Fragment, { children: props.booking ?? _jsx("p", { className: cn("text-ink", c?.pricedNote), children: text.slotCallback }) }, "booking")] }));
+}

package/dist/react/booking-adapters.d.ts

@@ -0,0 +1,58 @@
+import { type OpenBookingConfig } from "../core/booking/model.js";
+/** What a provider may say about the slot it booked; all optional, never shown as is. */
+export interface BookedSlot {
+    startAt?: string;
+    endAt?: string;
+}
+/** What the page hands an adapter when the visitor asks for a slot. */
+export interface BookingContext {
+    /** The booking the card offers (`bookingOf(place, variant)`). */
+    config: OpenBookingConfig;
+    /** The lead's public reference — the panel's lead id, and the join key a provider carries back. */
+    leadRef: string;
+    name?: string | null | undefined;
+    phone?: string | null | undefined;
+    locale: string;
+    /** Called when the provider says on the page that the slot is booked. */
+    onBooked?: (slot?: BookedSlot) => void;
+}
+/**
+ * How a provider opens its booking — one adapter per provider, picked by the
+ * config's `provider`; a brand registers its own (`bookingAdapters`) and
+ * `LeadCapture` is not touched. `href` renders a plain link — opened by the
+ * browser in a new tab, so no popup blocker and nothing fetched before the
+ * click; `open` runs on the click instead (an embed that loads its script
+ * then). Neither may touch the network before the click. `prefillsPhone`:
+ * the provider's form gets the visitor's number, so the card need not ask
+ * them to type it again.
+ */
+export interface BookingAdapter<P extends string = string> {
+    provider: P;
+    href?: (ctx: BookingContext) => string | null;
+    open?: (ctx: BookingContext) => void | Promise<void>;
+    prefillsPhone?: (ctx: BookingContext) => boolean;
+}
+/** `manual`: no page to open — the card promises the call and offers a preference. */
+export declare const manualAdapter: BookingAdapter<"manual">;
+/** `link`: the page with `ref=<leadRef>`. */
+export declare const linkAdapter: BookingAdapter<"link">;
+/** `google_calendar`: the schedule as is — it takes no parameter, so the visitor types the same number there. */
+export declare const googleCalendarAdapter: BookingAdapter<"google_calendar">;
+/** `cal_com`: the event with the name, the phone and `metadata[ref]`. */
+export declare const calComAdapter: BookingAdapter<"cal_com">;
+/** The hosted cloud serves its embed from `app.cal.com`; a self-hosted Cal.com from its own host. */
+export declare function calComEmbedOrigin(url: string): string;
+/**
+ * `cal_com` as Cal.com's modal on the page: its script loads only on the
+ * click, and its `bookingSuccessful` is `onBooked` — once per lead, however
+ * often the modal is opened and closed. Opt-in (`bookingEmbed`), and only
+ * once the visitor accepted the provider's cookies.
+ */
+export declare const calComEmbedAdapter: BookingAdapter<"cal_com">;
+/** Adapters by provider: the built-ins, and whatever a brand registers. */
+export type BookingAdapters = Readonly<Record<string, BookingAdapter>>;
+export declare const BOOKING_ADAPTERS: BookingAdapters;
+/** The embeds `bookingEmbed` turns on. */
+export declare const BOOKING_EMBEDS: BookingAdapters;
+/** The built-ins with a brand's own over them, by provider. */
+export declare function bookingAdapters(over?: BookingAdapters): BookingAdapters;

package/dist/react/booking-adapters.js

@@ -0,0 +1,104 @@
+import { isPageProvider } from "../core/booking/model.js";
+import { bookingHref } from "../core/booking/url.js";
+/** The built-in choice a context carries, or `null` when it is not one. */
+function choiceOf(config) {
+    if (config.provider === "manual")
+        return { provider: "manual" };
+    return isPageProvider(config.provider) && config.url ? { provider: config.provider, url: config.url } : null;
+}
+const hrefOf = (ctx) => {
+    const choice = choiceOf(ctx.config);
+    return choice && bookingHref(choice, { leadRef: ctx.leadRef, name: ctx.name, phone: ctx.phone });
+};
+/** `manual`: no page to open — the card promises the call and offers a preference. */
+export const manualAdapter = { provider: "manual" };
+/** `link`: the page with `ref=<leadRef>`. */
+export const linkAdapter = { provider: "link", href: hrefOf };
+/** `google_calendar`: the schedule as is — it takes no parameter, so the visitor types the same number there. */
+export const googleCalendarAdapter = { provider: "google_calendar", href: hrefOf };
+/** `cal_com`: the event with the name, the phone and `metadata[ref]`. */
+export const calComAdapter = { provider: "cal_com", href: hrefOf, prefillsPhone: () => true };
+const isObject = (v) => typeof v === "object" && v !== null;
+function addScript(src) {
+    const el = document.createElement("script");
+    el.src = src;
+    el.async = true;
+    document.head.appendChild(el);
+}
+/** Cal.com's own queue stub, as its embed snippet installs it; the script is added on the first call. */
+function calQueue(w, script) {
+    if (w.Cal)
+        return w.Cal;
+    const cal = (...args) => {
+        if (!cal.loaded) {
+            cal.ns = {};
+            addScript(script);
+            cal.loaded = true;
+        }
+        (cal.q ??= []).push(args);
+    };
+    w.Cal = cal;
+    return cal;
+}
+/** The hosted cloud serves its embed from `app.cal.com`; a self-hosted Cal.com from its own host. */
+export function calComEmbedOrigin(url) {
+    const u = new URL(url);
+    return u.hostname === "cal.com" ? "https://app.cal.com" : u.origin;
+}
+/** Per `Cal` instance — one per page — so the listeners are registered once however often the modal opens. */
+const calPages = new WeakMap();
+function calPage(cal, origin) {
+    const known = calPages.get(cal);
+    if (known)
+        return known;
+    const page = { current: null, booked: new Set() };
+    calPages.set(cal, page);
+    const booked = (e) => {
+        const ctx = page.current;
+        // Cal.com may fire both versions of the event for one booking.
+        if (!ctx || page.booked.has(ctx.leadRef))
+            return;
+        page.booked.add(ctx.leadRef);
+        const detail = isObject(e) ? e.detail : undefined;
+        const data = isObject(detail) && isObject(detail.data) ? detail.data : undefined;
+        const startAt = data?.startTime ?? data?.date;
+        const endAt = data?.endTime;
+        ctx.onBooked?.({ ...(typeof startAt === "string" ? { startAt } : {}), ...(typeof endAt === "string" ? { endAt } : {}) });
+    };
+    cal("init", { origin });
+    cal("on", { action: "bookingSuccessful", callback: booked });
+    cal("on", { action: "bookingSuccessfulV2", callback: booked });
+    return page;
+}
+/**
+ * `cal_com` as Cal.com's modal on the page: its script loads only on the
+ * click, and its `bookingSuccessful` is `onBooked` — once per lead, however
+ * often the modal is opened and closed. Opt-in (`bookingEmbed`), and only
+ * once the visitor accepted the provider's cookies.
+ */
+export const calComEmbedAdapter = {
+    provider: "cal_com",
+    prefillsPhone: () => true,
+    open: ctx => {
+        const href = hrefOf(ctx);
+        if (href === null)
+            return;
+        const u = new URL(href);
+        const origin = calComEmbedOrigin(href);
+        const cal = calQueue(window, `${origin}/embed/embed.js`);
+        calPage(cal, origin).current = ctx;
+        cal("modal", { calLink: u.pathname.slice(1), config: Object.fromEntries(u.searchParams) });
+    },
+};
+export const BOOKING_ADAPTERS = {
+    manual: manualAdapter,
+    link: linkAdapter,
+    google_calendar: googleCalendarAdapter,
+    cal_com: calComAdapter,
+};
+/** The embeds `bookingEmbed` turns on. */
+export const BOOKING_EMBEDS = { cal_com: calComEmbedAdapter };
+/** The built-ins with a brand's own over them, by provider. */
+export function bookingAdapters(over = {}) {
+    return { ...BOOKING_ADAPTERS, ...over };
+}

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * `@evinvest/kitstart/react` — the structural widgets every landing shares,
  * where behaviour matters more than look. Server components by default; only
- * `MapFacade`, `AnalyticsBoundary`, `FormSelect` and `LeadCapture` are client modules, each its own file
+ * `MapFacade`, `AnalyticsBoundary`, `FormSelect`, `LeadCapture` and `LeadBooking` are client modules, each its own file
  * with its own `"use client"`, so a page pays for what it renders.
  *
  * Styled with the kit's token roles only (`text-ink`, `border-border`,
@@ -18,6 +18,10 @@ export { Faq, type FaqPart, type FaqProps } from "./Faq.js";
 export { FormSelect, type FormSelectOption, type FormSelectPart, type FormSelectProps } from "./FormSelect.js";
 export { LangSwitch, withLang, type LangSwitchProps } from "./LangSwitch.js";
 export { LeadCapture, type LeadCapturePart, type LeadCaptureProps } from "./LeadCapture.js";
+export { LeadBooking, type LeadBookingProps } from "./LeadBooking.js";
+export type { BookingPart } from "./LeadBookingManual.js";
+export { BOOKING_ADAPTERS, BOOKING_EMBEDS, bookingAdapters, calComAdapter, calComEmbedAdapter, calComEmbedOrigin, googleCalendarAdapter, linkAdapter, manualAdapter, type BookedSlot, type BookingAdapter, type BookingAdapters, type BookingContext, } from "./booking-adapters.js";
+export { BOOKING_ACTION } from "./use-booking.js";
 export type { LeadSent } from "./use-lead-submit.js";
 export type { LeadCaptureLayout } from "./LeadCaptureNeed.js";
 export { MapFacade, type MapFacadePart, type MapFacadeProps } from "./MapFacade.js";

package/dist/react/index.js

@@ -1,7 +1,7 @@
 /**
  * `@evinvest/kitstart/react` — the structural widgets every landing shares,
  * where behaviour matters more than look. Server components by default; only
- * `MapFacade`, `AnalyticsBoundary`, `FormSelect` and `LeadCapture` are client modules, each its own file
+ * `MapFacade`, `AnalyticsBoundary`, `FormSelect`, `LeadCapture` and `LeadBooking` are client modules, each its own file
  * with its own `"use client"`, so a page pays for what it renders.
  *
  * Styled with the kit's token roles only (`text-ink`, `border-border`,
@@ -18,6 +18,9 @@ export { Faq } from "./Faq.js";
 export { FormSelect } from "./FormSelect.js";
 export { LangSwitch, withLang } from "./LangSwitch.js";
 export { LeadCapture } from "./LeadCapture.js";
+export { LeadBooking } from "./LeadBooking.js";
+export { BOOKING_ADAPTERS, BOOKING_EMBEDS, bookingAdapters, calComAdapter, calComEmbedAdapter, calComEmbedOrigin, googleCalendarAdapter, linkAdapter, manualAdapter, } from "./booking-adapters.js";
+export { BOOKING_ACTION } from "./use-booking.js";
 export { MapFacade } from "./MapFacade.js";
 export { PlaceDirectory } from "./PlaceDirectory.js";
 export { PHONE_INPUT_PROPS, QuoteFormShell } from "./QuoteFormShell.js";