@evinvest/kitstart 0.10.0 → 0.12.0

package/dist/react/LeadBooking.d.ts

@@ -0,0 +1,35 @@
+import type { OpenBookingConfig } from "../core/booking/model.js";
+import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
+import { type BookingAdapters } from "./booking-adapters.js";
+import { type BookingPart } from "./LeadBookingManual.js";
+import type { PartClassNames } from "./parts.js";
+import type { LeadSent } from "./use-lead-submit.js";
+export interface LeadBookingProps {
+    /** The booking chosen for this visitor (`bookingOf(place, variant)`). */
+    booking: OpenBookingConfig;
+    sent: LeadSent;
+    locale: string;
+    text: LeadCaptureFlowText;
+    /** The built-in adapters with the brand's own over them, by provider. */
+    adapters?: BookingAdapters | undefined;
+    /**
+     * The providers' embeds (`BOOKING_EMBEDS`) rather than a new tab — only
+     * once the visitor accepted the provider's cookies. A flag, because a
+     * server component cannot hand a client island an adapter.
+     */
+    embed?: boolean | undefined;
+    formId?: string | undefined;
+    /** Where the request posts; `BOOKING_ACTION` by default. */
+    action?: string | undefined;
+    /** For the `manual` day tiles; the click's clock by default. */
+    now?: number | undefined;
+    classNames?: PartClassNames<BookingPart> | undefined;
+}
+/**
+ * After a priced lead: how the slot is set, through the adapter of the
+ * config's provider. Nothing a provider serves is requested before the visitor's click
+ * — a link the browser opens, or an embed whose script loads on the click.
+ * Without the lead's reference (an old route's answer) there is nothing to
+ * join a booking to, and the card only promises the call.
+ */
+export declare function LeadBooking(props: LeadBookingProps): import("react").JSX.Element | null;

package/dist/react/LeadBooking.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonVariants, cn } from "@evinvest/uikit";
+import { useState } from "react";
+import { BOOKING_EMBEDS, bookingAdapters } from "./booking-adapters.js";
+import { LeadBookingManual } from "./LeadBookingManual.js";
+import { useBooking } from "./use-booking.js";
+function OpenBooking(props) {
+    const { adapter, ctx, report, text, classNames: c } = props;
+    const [booked, setBooked] = useState(false);
+    const onBooked = () => {
+        setBooked(true);
+        report.booked();
+    };
+    const click = () => {
+        void report.requested({ lead_ref: ctx.leadRef, provider: adapter.provider });
+        void adapter.open?.({ ...ctx, onBooked });
+    };
+    const href = adapter.href?.(ctx) ?? null;
+    const look = buttonVariants({ variant: "primary", size: "touch", className: cn("w-full", c?.bookingCta) });
+    if (booked)
+        return _jsx("p", { className: cn("font-medium text-ink", c?.bookingNote), children: text.booked });
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", c?.booking), children: [href !== null ? (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", onClick: click, className: look, "data-booking-provider": adapter.provider, children: text.bookCta })) : (_jsx("button", { type: "button", onClick: click, className: look, "data-booking-provider": adapter.provider, children: text.bookCta })), !adapter.prefillsPhone?.(ctx) && _jsx("p", { className: cn("text-sm text-ink-soft", c?.bookingNote), children: text.bookPhoneHint }), _jsx("p", { className: cn("text-sm text-ink-soft", c?.bookingNote), children: text.bookNote })] }));
+}
+/**
+ * After a priced lead: how the slot is set, through the adapter of the
+ * config's provider. Nothing a provider serves is requested before the visitor's click
+ * — a link the browser opens, or an embed whose script loads on the click.
+ * Without the lead's reference (an old route's answer) there is nothing to
+ * join a booking to, and the card only promises the call.
+ */
+export function LeadBooking(props) {
+    const { booking, sent, text, classNames: c } = props;
+    const provider = booking.provider;
+    const report = useBooking(provider, sent.submission ?? "", props.formId ?? "quote", props.action);
+    const proven = sent.lead !== undefined && sent.submission !== undefined;
+    const adapter = bookingAdapters({ ...(props.embed ? BOOKING_EMBEDS : {}), ...props.adapters })[provider];
+    // No reference to join a booking to, or a provider no adapter knows: the call is promised.
+    if (sent.lead === undefined || (provider !== "manual" && (!proven || !adapter)))
+        return _jsx("p", { className: cn("text-ink", c?.bookingNote), children: text.slotCallback });
+    if (provider === "manual")
+        return _jsx(LeadBookingManual, { leadRef: sent.lead, locale: props.locale, now: props.now ?? Date.now(), text: text, report: proven ? report : null, classNames: c });
+    const ctx = { config: booking, leadRef: sent.lead, name: sent.name, phone: sent.phone, locale: props.locale };
+    if (!adapter)
+        return null;
+    return _jsx(OpenBooking, { adapter: adapter, ctx: ctx, report: report, text: text, classNames: c });
+}

package/dist/react/LeadBookingManual.d.ts

@@ -0,0 +1,17 @@
+import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
+import type { PartClassNames } from "./parts.js";
+import type { BookingReport } from "./use-booking.js";
+export type BookingPart = "booking" | "bookingCta" | "bookingNote" | "prefer" | "preferOption" | "preferSubmit";
+/**
+ * `manual`: the call is promised, and the visitor may say when suits them —
+ * a day of the coming week and a part of the day, both optional, no free
+ * text. Sent as `booking.requested@1`; the operator sets the slot on the call.
+ */
+export declare function LeadBookingManual(props: {
+    leadRef: string;
+    locale: string;
+    now: number;
+    text: LeadCaptureFlowText;
+    report: BookingReport | null;
+    classNames?: PartClassNames<BookingPart> | undefined;
+}): import("react").JSX.Element;

package/dist/react/LeadBookingManual.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@evinvest/uikit";
+import { useMemo, useState } from "react";
+import { PREFERRED_PARTS } from "../core/booking/model.js";
+/** How many days ahead a visitor may prefer: tiles, not a calendar — a tap each. */
+const DAYS_AHEAD = 7;
+/** `YYYY-MM-DD` in the visitor's own calendar, `n` days from `now`. */
+function dayFrom(now, n) {
+    const d = new Date(now);
+    d.setDate(d.getDate() + n);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function Tiles(props) {
+    return (_jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "mb-2 text-sm font-medium text-ink", children: props.legend }), _jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4", children: props.options.map(o => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: props.name, value: o.value, checked: props.value === o.value, onChange: () => props.onChange(o.value), className: "peer absolute inset-0 opacity-0" }), _jsx("span", { className: cn("flex h-full min-h-11 items-center justify-center rounded-[var(--control-radius)] border border-input px-2 py-2 text-center text-sm text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", props.className), children: o.label })] }, o.value))) })] }));
+}
+/**
+ * `manual`: the call is promised, and the visitor may say when suits them —
+ * a day of the coming week and a part of the day, both optional, no free
+ * text. Sent as `booking.requested@1`; the operator sets the slot on the call.
+ */
+export function LeadBookingManual(props) {
+    const { text, locale, classNames: c } = props;
+    const [day, setDay] = useState(null);
+    const [part, setPart] = useState(null);
+    const [state, setState] = useState("idle");
+    const days = useMemo(() => {
+        const fmt = new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric" });
+        return Array.from({ length: DAYS_AHEAD }, (_, i) => {
+            const value = dayFrom(props.now, i + 1);
+            return { value, label: fmt.format(new Date(`${value}T12:00:00`)) };
+        });
+    }, [locale, props.now]);
+    const parts = PREFERRED_PARTS.map(value => ({ value, label: { morning: text.partMorning, afternoon: text.partAfternoon, evening: text.partEvening }[value] }));
+    const report = props.report;
+    const send = async (event) => {
+        event.preventDefault();
+        if (!report || (day === null && part === null))
+            return;
+        setState("busy");
+        const ok = await report.requested({ lead_ref: props.leadRef, provider: "manual", ...(day ? { preferred_date: day } : {}), ...(part ? { preferred_part: part } : {}) });
+        setState(ok ? "sent" : "failed");
+    };
+    let body = null;
+    if (state === "sent")
+        body = _jsx("p", { className: "text-ink", children: text.preferSent });
+    else if (report)
+        body = (_jsxs("form", { onSubmit: send, className: cn("flex flex-col gap-4", c?.prefer), "data-booking-prefer": "", children: [_jsx("p", { className: "text-sm text-ink-soft", children: text.preferTitle }), _jsx(Tiles, { legend: text.preferDay, name: "preferred_date", options: days, value: day, onChange: setDay, className: c?.preferOption }), _jsx(Tiles, { legend: text.preferPart, name: "preferred_part", options: parts, value: part, onChange: setPart, className: c?.preferOption }), state === "failed" && (_jsx("p", { role: "alert", className: "text-sm text-ink", children: text.preferFailed })), _jsx(Button, { type: "submit", variant: "outline", size: "touch", disabled: state === "busy" || (day === null && part === null), className: cn("w-full", c?.preferSubmit), children: text.preferSubmit })] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-4", c?.booking), children: [_jsx("p", { className: cn("text-ink", c?.bookingNote), children: text.slotCallback }), body] }));
+}

package/dist/react/LeadCapture.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from "react";
 import { type CaptureChannel } from "../core/channels.js";
-import type { LeadWire } from "../core/lead.js";
+import { type LeadError, type LeadWire, type PageLeadError } from "../core/lead.js";
 import { type LeadCaptureText } from "../core/lead-capture-text.js";
 import { type Place } from "../core/place/types.js";
 import { type LeadFlows } from "../core/pricing/flow.js";
 import type { PricingModel } from "../core/pricing/model.js";
 import type { FormSelectOption } from "./FormSelect.js";
+import type { BookingAdapters } from "./booking-adapters.js";
+import type { BookingPart } from "./LeadBookingManual.js";
 import { type PricedPart } from "./LeadCapturePriced.js";
 import { type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
 import { type EstimatePart } from "./LeadCaptureEstimate.js";
@@ -13,7 +15,7 @@ import { type FieldPart } from "./LeadCaptureFields.js";
 import { type LeadCaptureLayout } from "./LeadCaptureNeed.js";
 import type { PartClassNames } from "./parts.js";
 import { type LeadSent } from "./use-lead-submit.js";
-export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart | EstimatePart | PricedPart;
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart | EstimatePart | PricedPart | BookingPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -48,11 +50,25 @@ export interface LeadCaptureProps {
      */
     photos?: readonly string[] | undefined;
     /**
-     * After a priced lead, in place of "we call you to set the slot": a
-     * booking provider's widget, when the brand has one. None ships with the
-     * kit yet.
+     * After a priced lead: how the slot is set. By default the place's booking
+     * (`place.booking`, `manual` when it has none) for `bookingVariant`,
+     * through its provider's adapter — `LeadBooking`. A node here replaces it
+     * whole.
      */
     booking?: ReactNode | ((sent: LeadSent) => ReactNode);
+    /**
+     * The built-in booking adapters with the brand's own over them, by
+     * provider — from a client component only: a server one cannot pass functions.
+     */
+    bookingAdapters?: BookingAdapters | undefined;
+    /**
+     * The variant of the `booking_provider` experiment (`BOOKING_EXPERIMENT`):
+     * the provider this visitor is offered, when the place has it; else the
+     * place's default (`bookingOf`).
+     */
+    bookingVariant?: string | null | undefined;
+    /** The providers' embeds instead of a new tab — only once the visitor accepted their cookies. */
+    bookingEmbed?: boolean | undefined;
     /** The need the page already knows; `?need=` and `[data-need]` triggers set it too. */
     need?: string | undefined;
     /** `single` (one screen) or `qualify-first` (the need, then the contact) — an experiment's switch. */
@@ -94,6 +110,13 @@ export interface LeadCaptureProps {
      * posts as it always did.
      */
     done?: ReactNode | ((sent: LeadSent) => ReactNode);
+    /**
+     * The refusal the page read from its query — `leadErrorOf(searchParams)` —
+     * drawn on the server, so the card says why without a script — by this card
+     * only when the query names it (`lead_card`, `leadErrorFor`). A page built
+     * for ISR has no query to read; there the script says it once it runs.
+     */
+    initialError?: PageLeadError | LeadError | null | undefined;
     /** Replaces the title and lede — the brand's own heading. */
     head?: ReactNode;
     /** Beside the submit: a guarantee, a live rating. */

package/dist/react/LeadCapture.js

@@ -1,12 +1,16 @@
 "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 { 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";
@@ -18,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
@@ -43,20 +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);
+    // 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) => setError({ channel, field }), onFailed: (channel, why) => events.submitError(why, channel) });
+    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]);
@@ -88,7 +102,7 @@ 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);
@@ -96,10 +110,10 @@ export function LeadCapture(props) {
     const rootProps = { id, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant };
     if (sent && staysInCard(sent.channel)) {
         const done = typeof props.done === "function" ? props.done(sent) : props.done;
-        return (_jsx("div", { ref: root, ...rootProps, children: _jsxs("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("flex flex-col gap-4 outline-none", c?.done), children: [done, sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: typeof props.booking === "function" ? props.booking(sent) : props.booking, locale: locale, text: flowText, classNames: c }))] }) }));
+        return (_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: [model && shownNeed !== undefined && flow === "estimate" && (_jsx(EstimateInputs, { model: model, need: shownNeed, locale: locale, answers: estimate.answers, onAnswer: estimate.answer, required: hydrated, classNames: c })), model && flow !== "quote" && _jsx(PriceBox, { model: model, flow: flow, price: estimate.price, locale: locale, text: flowText, classNames: c }), flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos })), _jsx(LocalityField, { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: localitySuggestions(place), placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c })), props.extras, _jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: failure?.channel === "form" ? failure.failure : null, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: busy === "form", label: flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: c?.submit }), props.trust] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] })] }), (links.length > 0 || rest.includes("callback")) && (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && channel("callback", false)] }))] }));
+                        }, 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/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

@@ -1,13 +1,12 @@
-import type { ReactNode } from "react";
+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 — by a call, until a booking provider is chosen;
- * a brand's `booking` (its own scheduling widget, say) stands in for that
- * promise. The lead is stored before any of this, so an abandoned booking is
+ * 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: {

package/dist/react/LeadCapturePriced.js

@@ -1,14 +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 — by a call, until a booking provider is chosen;
- * a brand's `booking` (its own scheduling widget, say) stands in for that
- * promise. The lead is stored before any of this, so an abandoned booking is
+ * 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) }) }), props.booking ?? _jsx("p", { className: cn("text-ink", c?.pricedNote), children: text.slotCallback })] }));
+    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/analytics-context.d.ts

@@ -7,5 +7,12 @@ import { experimentProps } from "../core/analytics.js";
  */
 export declare const AnalyticsSinkContext: import("react").Context<AnalyticsSink | null>;
 export declare const useAnalyticsSink: () => AnalyticsSink | null;
+/**
+ * The `distinct_id` the boundary's sink sends, for a lead to carry to the
+ * panel. `null` outside a boundary or with no key: no event names it, so a
+ * lead has nothing to join.
+ */
+export declare const AnalyticsIdContext: import("react").Context<string | null>;
+export declare const useAnalyticsId: () => string | null;
 /** `data-experiment` / `data-variant` on an element or its ancestors, for an intent's event. */
 export declare function experimentOf(el: Element | null): ReturnType<typeof experimentProps>;

package/dist/react/analytics-context.js

@@ -8,6 +8,13 @@ import { experimentProps } from "../core/analytics.js";
  */
 export const AnalyticsSinkContext = createContext(null);
 export const useAnalyticsSink = () => useContext(AnalyticsSinkContext);
+/**
+ * The `distinct_id` the boundary's sink sends, for a lead to carry to the
+ * panel. `null` outside a boundary or with no key: no event names it, so a
+ * lead has nothing to join.
+ */
+export const AnalyticsIdContext = createContext(null);
+export const useAnalyticsId = () => useContext(AnalyticsIdContext);
 /** `data-experiment` / `data-variant` on an element or its ancestors, for an intent's event. */
 export function experimentOf(el) {
     const host = el?.closest("[data-experiment]");

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;