@evinvest/kitstart 0.9.0 → 0.10.0

package/dist/next/quote-route.d.ts

@@ -5,13 +5,15 @@ import { type Site } from "../core/site.js";
 import type { ServerEnv } from "../server/env.js";
 import type { LeadWebhook } from "../server/lead-webhook.js";
 import type { LeadNotifier } from "../server/notify.js";
+import type { PricingSource } from "../server/pricing-source.js";
 /**
  * `app/quote/route.ts` — the no-JS path, and the one that has to keep working:
  * a plain form POST answered with a 303, so a refresh does not resubmit.
  * A refused lead goes back to its card with the field to fix
  * (`/fr?lead_error=phone#devis`); a script asking for JSON (`Accept:
  * application/json`) is answered `422 { ok: false, field }` instead, and
- * `200 { ok: true, location }` for a lead taken.
+ * `200 { ok: true, location, lead, cents? }` for a lead taken — `lead` its
+ * public reference (`leadRef`), `cents` the price the server took it at.
  *
  * ```ts
  * export const dynamic = "force-dynamic";
@@ -38,6 +40,11 @@ export interface QuoteRouteDeps<L extends string> {
     webhook?: () => LeadWebhook | null;
     /** The self-contained 500's words, when the store refused the lead. */
     unavailable: (locale: L, place: Place<L> | null) => UnavailableCopy;
+    /**
+     * The price list an `estimate` or `fixed` lead is priced from — the same
+     * source the page showed (`createPricingSource`); absent → `site.pricing`.
+     */
+    pricing?: PricingSource;
     /** Opened on first use (`next build` imports the route); defaults to `LEADS_DB_URL`'s. */
     store?: () => LeadStore;
     /** Defaults to `env().leadRateLimit`, built on the first lead. */

package/dist/next/quote-route.js

@@ -148,6 +148,7 @@ export function quoteRoute(site, deps) {
             insert: lead => leadStore().insert(lead),
             findSubmission: async (submissionId) => (await leadStore().findSubmission?.(submissionId)) ?? null,
             sendSuspect: suspectQueued(),
+            ...(deps.pricing ? { pricing: () => deps.pricing?.model() ?? Promise.resolve(null) } : {}),
             defer,
             notify: (lead, id) => {
                 notifier ??= deps.notifier();
@@ -182,7 +183,8 @@ export function quoteRoute(site, deps) {
             // A suspected bot is answered exactly as a person is.
             case "stored": {
                 const location = href(request, outcome.lead.placeSlug, outcome.locale, thanksSuffix(channelOf(outcome.lead)));
-                return scripted ? json(200, { ok: true, location }) : seeOther(location);
+                const price = outcome.lead.price ? { cents: outcome.lead.price.cents } : {};
+                return scripted ? json(200, { ok: true, location, lead: outcome.ref, ...price }) : seeOther(location);
             }
             case "invalid": {
                 const tags = experimentProps(text(form, EXPERIMENT_FIELD), text(form, VARIANT_FIELD));

package/dist/react/LeadCapture.d.ts

@@ -1,15 +1,19 @@
 import { type ReactNode } from "react";
 import { type CaptureChannel } from "../core/channels.js";
 import type { LeadWire } from "../core/lead.js";
-import type { LeadCaptureText } from "../core/lead-capture-text.js";
+import { type LeadCaptureText } from "../core/lead-capture-text.js";
 import { type Place } from "../core/place/types.js";
+import { type LeadFlows } from "../core/pricing/flow.js";
+import type { PricingModel } from "../core/pricing/model.js";
 import type { FormSelectOption } from "./FormSelect.js";
+import { type PricedPart } from "./LeadCapturePriced.js";
 import { type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
+import { type EstimatePart } from "./LeadCaptureEstimate.js";
 import { type FieldPart } from "./LeadCaptureFields.js";
 import { type LeadCaptureLayout } from "./LeadCaptureNeed.js";
 import type { PartClassNames } from "./parts.js";
 import { type LeadSent } from "./use-lead-submit.js";
-export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart;
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart | EstimatePart | PricedPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -25,6 +29,30 @@ export interface LeadCaptureProps {
     wire: LeadWire;
     /** The brand's subjects with their labels, in order. */
     needs: readonly FormSelectOption[];
+    /**
+     * How each need is sold — `site.lead.flows`, the map the server prices
+     * with. A need runs `estimate` or `fixed` only when `pricing` prices it so
+     * (`flowOf`); otherwise, and without the two, every need is a `quote`.
+     */
+    flows?: LeadFlows | undefined;
+    /**
+     * The price list the page priced from — `createPricingSource(site).model()`
+     * on the server page, handed down as data. An estimate's price is computed
+     * here as the visitor answers, and again by the route, whose number is kept.
+     */
+    pricing?: PricingModel | null | undefined;
+    /**
+     * `quote` needs a price is given from photos (a deep clean, after-works):
+     * a WhatsApp link to send them, prefilled with the need, when the place
+     * has WhatsApp. The callback is offered as always.
+     */
+    photos?: readonly string[] | undefined;
+    /**
+     * After a priced lead, in place of "we call you to set the slot": a
+     * booking provider's widget, when the brand has one. None ships with the
+     * kit yet.
+     */
+    booking?: ReactNode | ((sent: LeadSent) => ReactNode);
     /** The need the page already knows; `?need=` and `[data-need]` triggers set it too. */
     need?: string | undefined;
     /** `single` (one screen) or `qualify-first` (the need, then the contact) — an experiment's switch. */

package/dist/react/LeadCapture.js

@@ -4,8 +4,12 @@ import { cn } from "@evinvest/uikit";
 import { useEffect, useRef, useState } from "react";
 import { resolveChannels } from "../core/channels.js";
 import { fillText, openingText } from "../core/lead-capture-format.js";
+import { flowTextOf } from "../core/lead-capture-text.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
-import { CallbackForm, ChannelLink, ExperimentFields } from "./LeadCaptureChannels.js";
+import { flowOf } from "../core/pricing/flow.js";
+import { LeadCapturePriced } from "./LeadCapturePriced.js";
+import { CallbackForm, ChannelLink, ExperimentFields, PhotosAsk } from "./LeadCaptureChannels.js";
+import { EstimateInputs, PriceBox, useEstimate } from "./LeadCaptureEstimate.js";
 import { FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
 import { NeedField } from "./LeadCaptureNeed.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
@@ -40,7 +44,15 @@ export function LeadCapture(props) {
     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) });
+    const flowText = flowTextOf(text, locale);
+    // `single` shows its select at the first need until one is picked: that is the need on screen.
+    const shownNeed = need ?? (layout === "single" ? needs[0]?.value : undefined);
+    const model = props.pricing ?? null;
+    const flow = flowOf(props.flows, model, shownNeed);
+    const estimate = useEstimate(model, shownNeed, flow, events.estimateShown);
+    // A priced lead stays in the card: its price is confirmed there, and the slot promised.
+    const staysInCard = (ch) => props.done !== undefined || (ch === "form" && flow !== "quote");
+    const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(staysInCard, { mobile: wire.mobile, name: props.name?.field }, { onRefused: (channel, field) => setError({ channel, field }), onFailed: (channel, why) => events.submitError(why, channel) });
     // The form's refusal by where it shows: under the field the card draws, else above the submit.
     const formError = error?.channel === "form" ? error.field : null;
     const at = (field) => (formError === field ? errorText(field, text) : null);
@@ -82,11 +94,12 @@ export function LeadCapture(props) {
     const contactShown = layout === "single" || (need !== undefined && !editing);
     const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
     const rootProps = { id, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant };
-    if (sent && props.done !== undefined) {
-        return (_jsx("div", { ref: root, ...rootProps, children: _jsx("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("outline-none", c?.done), children: typeof props.done === "function" ? props.done(sent) : props.done }) }));
+    if (sent && staysInCard(sent.channel)) {
+        const done = typeof props.done === "function" ? props.done(sent) : props.done;
+        return (_jsx("div", { ref: root, ...rootProps, children: _jsxs("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("flex flex-col gap-4 outline-none", c?.done), children: [done, sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: typeof props.booking === "function" ? props.booking(sent) : props.booking, locale: locale, text: flowText, classNames: c }))] }) }));
     }
     return (_jsxs("div", { ref: root, ...rootProps, children: [props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })), lead !== "form" && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, 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: estimate.price, locale: locale, text: flowText, classNames: c }), flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos })), _jsx(LocalityField, { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: localitySuggestions(place), placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c })), props.extras, _jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: failure?.channel === "form" ? failure.failure : null, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: busy === "form", label: flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: c?.submit }), props.trust] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] })] }), (links.length > 0 || rest.includes("callback")) && (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && channel("callback", false)] }))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,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/LeadCapturePriced.d.ts

@@ -0,0 +1,19 @@
+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
+ * 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 { 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
+ * 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 })] }));
+}

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

@@ -8,6 +8,8 @@ export interface LeadEvents {
     fieldError(field: LeadField): void;
     /** The script's post got no answer: `network` or `timeout`, and which form. */
     submitError(reason: "network" | "timeout", channel: "form" | "callback"): void;
+    /** An estimate's price for a full set of answers: its band only, once per need and band. */
+    estimateShown(need: string, cents: number): void;
 }
 /**
  * The lead form's own funnel, reported through the boundary's sink: seen

package/dist/react/use-lead-events.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useMemo, useRef } from "react";
 import { EVENTS, experimentProps } from "../core/analytics.js";
+import { centsBucket } from "../core/pricing/price.js";
 import { useAnalyticsSink } from "./analytics-context.js";
 /** The attribute a lead form's control names its role in, for `lead_form_field_error`. */
 export const FIELD_ATTR = "data-lead-field";
@@ -18,6 +19,7 @@ export function useLeadEvents(root, tags) {
     const variant = tags.experiment?.variant;
     const props = useMemo(() => ({ form_id: formId, layout, ...experimentProps(name, variant) }), [formId, layout, name, variant]);
     const started = useRef(false);
+    const shown = useRef(new Set());
     useEffect(() => {
         const el = root.current;
         if (!sink || !el)
@@ -59,5 +61,13 @@ export function useLeadEvents(root, tags) {
         step: step => sink?.capture(EVENTS.formStep, { ...props, step }),
         fieldError: field => sink?.capture(EVENTS.fieldError, { ...props, field, blocking: false }),
         submitError: (reason, channel) => sink?.capture(EVENTS.submitError, { ...props, reason, channel }),
+        estimateShown: (need, cents) => {
+            const cents_bucket = centsBucket(cents);
+            const key = `${need}\n${cents_bucket}`;
+            if (shown.current.has(key))
+                return;
+            shown.current.add(key);
+            sink?.capture(EVENTS.estimateShown, { ...props, need, cents_bucket });
+        },
     }), [sink, props]);
 }

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

@@ -7,6 +7,10 @@ export interface LeadSent {
     phone: string;
     /** The name field's value, when the form has one and it was filled. */
     name: string | null;
+    /** The lead's public reference, as the route answered it (`leadRef`), for a `booking` to name the lead. */
+    lead?: string;
+    /** The price the server took the lead at, for an `estimate` or `fixed` need. */
+    cents?: number;
 }
 /** Leaving the page, behind a seam a test can stand in for (jsdom cannot navigate). */
 export declare const navigation: {
@@ -42,15 +46,15 @@ export interface LeadSubmit {
 }
 /**
  * The lead posted by a script, so a refusal keeps what was typed: the body
- * and the endpoint are the form's own, asked for JSON. Taken → the brand's
- * in-card success when it has one (`done`), else the thanks page the route
+ * and the endpoint are the form's own, asked for JSON. Taken → the in-card
+ * success when the card has one for that channel (`done`), else the thanks page the route
  * names. Refused → `onRefused` with the field, the form as it was. No answer
  * — no network, or nothing in `SUBMIT_TIMEOUT_MS` — is said in place with a
  * retry, never by leaving the page: the browser's error page would lose the
  * form. Any other answer (the store's 500) submits the form for real, so the
  * server's own page says what went wrong; the submission id makes that safe.
  */
-export declare function useLeadSubmit(done: boolean, fields: {
+export declare function useLeadSubmit(done: boolean | ((channel: LeadChannel) => boolean), fields: {
     mobile: string;
     name: string | undefined;
 }, on: LeadSubmitHandlers): LeadSubmit;

package/dist/react/use-lead-submit.js

@@ -41,6 +41,7 @@ function stamp(form) {
     minted.set(form, { id, lead });
     field.value = id;
 }
+const LEAD_REF = /^lead-\d+-[0-9a-f]{8}$/;
 /** A root-relative path on this origin — never `//elsewhere`. */
 const OWN_PATH = /^\/(?!\/)/;
 /**
@@ -58,9 +59,15 @@ async function readAnswer(res) {
         });
         if (typeof body !== "object" || body === null)
             return null;
-        const { ok, location, field } = body;
-        if (ok === true && typeof location === "string" && OWN_PATH.test(location))
-            return { ok, location };
+        const { ok, location, field, lead, cents } = body;
+        if (ok === true && typeof location === "string" && OWN_PATH.test(location)) {
+            return {
+                ok,
+                location,
+                ...(typeof lead === "string" && LEAD_REF.test(lead) ? { lead } : {}),
+                ...(typeof cents === "number" && Number.isSafeInteger(cents) && cents >= 0 ? { cents } : {}),
+            };
+        }
         if (ok === false && typeof field === "string")
             return { ok, field };
         return null;
@@ -76,8 +83,8 @@ async function readAnswer(res) {
 export const SUBMIT_TIMEOUT_MS = 15_000;
 /**
  * The lead posted by a script, so a refusal keeps what was typed: the body
- * and the endpoint are the form's own, asked for JSON. Taken → the brand's
- * in-card success when it has one (`done`), else the thanks page the route
+ * and the endpoint are the form's own, asked for JSON. Taken → the in-card
+ * success when the card has one for that channel (`done`), else the thanks page the route
  * names. Refused → `onRefused` with the field, the form as it was. No answer
  * — no network, or nothing in `SUBMIT_TIMEOUT_MS` — is said in place with a
  * retry, never by leaving the page: the browser's error page would lose the
@@ -134,8 +141,8 @@ export function useLeadSubmit(done, fields, on) {
             // Still pending: the page is leaving, or the form is gone. The next
             // lead from this form (Back, another need) gets an id of its own.
             minted.delete(form);
-            if (done)
-                setSent(lead);
+            if (typeof done === "function" ? done(lead.channel) : done)
+                setSent({ ...lead, ...(answer.lead ? { lead: answer.lead } : {}), ...(answer.cents !== undefined ? { cents: answer.cents } : {}) });
             else
                 navigation.assign(answer.location);
         }, () => {

package/dist/server/index.d.ts

@@ -6,6 +6,7 @@
 import "server-only";
 export { createServerEnv, parseServerEnv, type EnvSource, type ServerEnv } from "./env.js";
 export { createPlaceSource, PLACE_REVALIDATE_SECONDS, PlaceSourceError, type PlaceSource, type PlaceSourceOptions } from "./place-source.js";
+export { createPricingSource, type PricingSource, type PricingSourceOptions } from "./pricing-source.js";
 export { describeLeadDb, openLeadStore, parseLeadDb, type LeadDb } from "./lead-store.js";
 export { openSqliteLeadStore, type SqliteLeadStore } from "./lead-store-sqlite.js";
 export { LeadStoreNotImplemented, openPostgresLeadStore } from "./lead-store-postgres.js";
@@ -13,6 +14,6 @@ export { parseSmtpUrl, sendMail, type Mail, type SendOptions } from "./smtp.js";
 export { defaultLeadMail, leadNotifier, MAIL_PER_MINUTE, type LeadMail, type LeadNotifier, type NotifyEnv } from "./notify.js";
 export { clientKey, NO_CLIENT_ADDRESS, parseProxyTrust, type ProxyTrust } from "./client-key.js";
 export { checkLeadStore } from "./boot.js";
-export { leadWebhook, panelChannel, type BuildWebhookBody, type LeadWebhook, type LeadWebhookContext, type LeadWebhookOptions } from "./lead-webhook.js";
+export { leadWebhook, panelChannel, panelFlowOf, panelFlowProperties, type BuildWebhookBody, type LeadWebhook, type LeadWebhookContext, type LeadWebhookOptions, type PanelFlow, type PanelFlowProperties, } from "./lead-webhook.js";
 export { checkWebhookUrl, openWebhookOutbox, WEBHOOK_HORIZON_MS, WEBHOOK_MAX_ATTEMPTS, WEBHOOK_MAX_DELAY_MS, WEBHOOK_TICK_MS, type DeadRow, type OutboxRow, type OutboxState, type TickReport, type WebhookOutbox, type WebhookOutboxOptions, type WebhookTarget, } from "./webhook-outbox.js";
 export { signatureHeaders, signWebhook, type WebhookSignatureHeaders, type WebhookSigning } from "./webhook-signature.js";

package/dist/server/index.js

@@ -6,6 +6,7 @@
 import "server-only";
 export { createServerEnv, parseServerEnv } from "./env.js";
 export { createPlaceSource, PLACE_REVALIDATE_SECONDS, PlaceSourceError } from "./place-source.js";
+export { createPricingSource } from "./pricing-source.js";
 export { describeLeadDb, openLeadStore, parseLeadDb } from "./lead-store.js";
 export { openSqliteLeadStore } from "./lead-store-sqlite.js";
 export { LeadStoreNotImplemented, openPostgresLeadStore } from "./lead-store-postgres.js";
@@ -13,6 +14,6 @@ export { parseSmtpUrl, sendMail } from "./smtp.js";
 export { defaultLeadMail, leadNotifier, MAIL_PER_MINUTE } from "./notify.js";
 export { clientKey, NO_CLIENT_ADDRESS, parseProxyTrust } from "./client-key.js";
 export { checkLeadStore } from "./boot.js";
-export { leadWebhook, panelChannel } from "./lead-webhook.js";
+export { leadWebhook, panelChannel, panelFlowOf, panelFlowProperties, } from "./lead-webhook.js";
 export { checkWebhookUrl, openWebhookOutbox, WEBHOOK_HORIZON_MS, WEBHOOK_MAX_ATTEMPTS, WEBHOOK_MAX_DELAY_MS, WEBHOOK_TICK_MS, } from "./webhook-outbox.js";
 export { signatureHeaders, signWebhook } from "./webhook-signature.js";

package/dist/server/lead-store-sqlite.js

@@ -2,6 +2,7 @@ import "server-only";
 import { mkdirSync } from "node:fs";
 import { dirname } from "node:path";
 import { channelOf, LEAD_SCHEMA_VERSION } from "../core/lead.js";
+import { LEAD_FLOWS } from "../core/pricing/flow.js";
 // `node:sqlite` is reached through `getBuiltinModule` rather than an import so
 // the bundler never has to resolve a builtin it may not know yet; the type is
 // the module's own.
@@ -57,6 +58,15 @@ const STEPS = [
         db.exec("ALTER TABLE leads ADD COLUMN submission_id TEXT");
         db.exec("CREATE UNIQUE INDEX leads_submission_id ON leads (submission_id) WHERE submission_id IS NOT NULL");
     },
+    // 7 — how the need was sold (`quote`, `estimate`, `fixed`), and for the two
+    // priced flows the server's price, the model's date and an estimate's
+    // answers (JSON). Nullable: a row from before, a callback, a quote.
+    db => {
+        db.exec("ALTER TABLE leads ADD COLUMN flow TEXT");
+        db.exec("ALTER TABLE leads ADD COLUMN quoted_cents INTEGER");
+        db.exec("ALTER TABLE leads ADD COLUMN pricing_valid_from TEXT");
+        db.exec("ALTER TABLE leads ADD COLUMN estimate_inputs TEXT");
+    },
 ];
 if (STEPS.length !== LEAD_SCHEMA_VERSION) {
     // The version belongs to the port, shared by every adapter; this table of
@@ -69,22 +79,38 @@ function str(row, key) {
     return typeof value === "string" ? value : null;
 }
 const VERDICTS = ["honeypot", "too-fast", "rate-limited"];
+/** A JSON object of strings, or `{}`: what `extras` and `estimate_inputs` hold. */
+function strings(text) {
+    const value = JSON.parse(text ?? "{}");
+    return Object.fromEntries(Object.entries(typeof value === "object" && value !== null ? value : {}).filter((e) => typeof e[1] === "string"));
+}
+function priceOf(row) {
+    const cents = column(row, "quoted_cents");
+    const validFrom = str(row, "pricing_valid_from");
+    if ((typeof cents !== "number" && typeof cents !== "bigint") || validFrom === null)
+        return null;
+    const inputs = str(row, "estimate_inputs");
+    return { cents: Number(cents), validFrom, ...(inputs !== null ? { inputs: strings(inputs) } : {}) };
+}
 /** A stored row read back as the lead it was written from. */
 function leadOf(row) {
     const verdict = str(row, "spam_verdict");
-    const extras = JSON.parse(str(row, "extras") ?? "{}");
     const consentAt = str(row, "consent_at");
     const submissionId = str(row, "submission_id");
+    const flow = LEAD_FLOWS.find(f => f === str(row, "flow"));
+    const price = priceOf(row);
     return {
         subject: str(row, "job") ?? "",
         locality: str(row, "zip") ?? "",
         mobile: str(row, "mobile") ?? "",
-        extras: Object.fromEntries(Object.entries(typeof extras === "object" && extras !== null ? extras : {}).filter((e) => typeof e[1] === "string")),
+        extras: strings(str(row, "extras")),
         placeSlug: str(row, "location_id"),
         spamVerdict: verdict !== null && VERDICTS.includes(verdict) ? verdict : null,
         channel: str(row, "channel") === "callback" ? "callback" : "form",
         ...(consentAt !== null ? { consent: { at: consentAt, text: str(row, "consent_text") ?? "" } } : {}),
         ...(submissionId !== null ? { submissionId } : {}),
+        ...(flow !== undefined ? { flow } : {}),
+        ...(price !== null ? { price } : {}),
     };
 }
 function userVersion(db) {
@@ -168,13 +194,13 @@ export function openSqliteLeadStore(path) {
         db.close();
         throw error;
     }
-    const insert = db.prepare("INSERT INTO leads (job, zip, mobile, location_id, spam_verdict, extras, channel, consent_at, consent_text, submission_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?) RETURNING id");
-    const bySubmission = db.prepare("SELECT id, job, zip, mobile, location_id, spam_verdict, extras, channel, consent_at, consent_text, submission_id FROM leads WHERE submission_id = ?");
+    const insert = db.prepare("INSERT INTO leads (job, zip, mobile, location_id, spam_verdict, extras, channel, consent_at, consent_text, submission_id, flow, quoted_cents, pricing_valid_from, estimate_inputs) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) RETURNING id");
+    const bySubmission = db.prepare("SELECT id, job, zip, mobile, location_id, spam_verdict, extras, channel, consent_at, consent_text, submission_id, flow, quoted_cents, pricing_valid_from, estimate_inputs FROM leads WHERE submission_id = ?");
     const count = db.prepare("SELECT COUNT(*) AS n FROM leads");
     return {
         async insert(lead) {
             const extras = Object.keys(lead.extras).length > 0 ? JSON.stringify(lead.extras) : null;
-            return integer(insert.get(lead.subject, lead.locality, lead.mobile, lead.placeSlug, lead.spamVerdict, extras, channelOf(lead), lead.consent?.at ?? null, lead.consent?.text ?? null, lead.submissionId ?? null), "id");
+            return integer(insert.get(lead.subject, lead.locality, lead.mobile, lead.placeSlug, lead.spamVerdict, extras, channelOf(lead), lead.consent?.at ?? null, lead.consent?.text ?? null, lead.submissionId ?? null, lead.flow ?? null, lead.price?.cents ?? null, lead.price?.validFrom ?? null, lead.price?.inputs ? JSON.stringify(lead.price.inputs) : null), "id");
         },
         async findSubmission(submissionId) {
             const row = bySubmission.get(submissionId);