@evinvest/kitstart 0.10.0 → 0.11.0

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/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";

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

@@ -0,0 +1,20 @@
+import type { BookingRequestedProperties } from "../core/booking/model.js";
+/** A request as the page posts it; a provider outside the closed set is the server's to refuse. */
+export type PostedBooking = Omit<BookingRequestedProperties, "provider"> & {
+    provider: string;
+};
+/** Where `LeadCapture` posts a booking request: `bookingRoute`, beside the quote route. */
+export declare const BOOKING_ACTION = "/quote/booking";
+export interface BookingReport {
+    /** The visitor opened the booking (or sent a `manual` preference): the event, and `booking.requested@1` to the site. */
+    requested(properties: PostedBooking): Promise<boolean>;
+    /** The provider said the slot is booked. */
+    booked(): void;
+}
+/**
+ * The page's side of a booking: `lead_booking_open` / `lead_booking_done`
+ * (the provider only, never the URL), and the request to the site's
+ * `bookingRoute`, which the panel hears as `booking.requested@1`. The post is
+ * first-party, and the page stays: a provider's page opens in a new tab.
+ */
+export declare function useBooking(provider: string, submission: string, formId: string, action?: string): BookingReport;

package/dist/react/use-booking.js

@@ -0,0 +1,32 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { EVENTS } from "../core/analytics.js";
+import { useAnalyticsSink } from "./analytics-context.js";
+/** Where `LeadCapture` posts a booking request: `bookingRoute`, beside the quote route. */
+export const BOOKING_ACTION = "/quote/booking";
+/**
+ * The page's side of a booking: `lead_booking_open` / `lead_booking_done`
+ * (the provider only, never the URL), and the request to the site's
+ * `bookingRoute`, which the panel hears as `booking.requested@1`. The post is
+ * first-party, and the page stays: a provider's page opens in a new tab.
+ */
+export function useBooking(provider, submission, formId, action = BOOKING_ACTION) {
+    const sink = useAnalyticsSink();
+    const props = useMemo(() => ({ provider, form_id: formId }), [provider, formId]);
+    const requested = useCallback(async (properties) => {
+        sink?.capture(EVENTS.bookingOpen, props);
+        try {
+            const res = await fetch(action, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ submission, ...properties }),
+            });
+            return res.ok;
+        }
+        catch {
+            return false;
+        }
+    }, [sink, props, action, submission]);
+    const booked = useCallback(() => sink?.capture(EVENTS.bookingDone, props), [sink, props]);
+    return { requested, booked };
+}

package/dist/react/use-lead-error.d.ts

@@ -1,11 +1,7 @@
 import { type RefObject } from "react";
-import { type LeadChannel } from "../core/lead.js";
+import { type LeadChannel, type LeadError } from "../core/lead.js";
 import type { LeadCaptureText } from "../core/lead-capture-text.js";
-/** A refusal the server sent back: which of the card's forms, and the field it is about. */
-export interface LeadError {
-    channel: LeadChannel;
-    field: string;
-}
+export type { LeadError };
 /** The fields `LeadCapture` draws itself, which show a refusal under themselves. */
 export declare const OWN_FIELDS: Readonly<Record<LeadChannel, readonly string[]>>;
 /** The id of the message a refusal of a field the card does not draw is shown in, above the submit. */
@@ -21,4 +17,4 @@ export declare function errorText(field: string, text: LeadCaptureText): string;
  * `aria-invalid` and pointed at the message above the submit. Fixing that
  * control clears it.
  */
-export declare function useLeadError(root: RefObject<HTMLElement | null>, id: string): [LeadError | null, (error: LeadError | null) => void];
+export declare function useLeadError(root: RefObject<HTMLElement | null>, id: string, initial?: LeadError | null): [LeadError | null, (error: LeadError | null) => void];