@evinvest/kitstart 0.17.0 → 0.18.0

package/dist/core/site.d.ts

@@ -1,6 +1,7 @@
 import type { LocaleRegistry } from "@evinvest/i18n";
 import type { BookingRules } from "./booking/model.js";
 import type { LeadSchema } from "./lead.js";
+import { type MessengerFacts } from "./messenger.js";
 import type { PublicationPolicy } from "./place/publication.js";
 import type { Place } from "./place/types.js";
 import type { PricingModel } from "./pricing/model.js";
@@ -126,8 +127,14 @@ export declare function assertLaunchable(site: {
 }, todos: readonly OwnerTodo[]): void;
 /** The baked place for a slug, if the site has it. */
 export declare function bakedPlace<L extends string, P extends string>(site: Site<L, P>, slug: string): Place<L> | undefined;
-/** The numbers a place answers on: its own, or the brand's until it has one. */
+/**
+ * The numbers a place answers on: its own, or the brand's until it has one.
+ * The panel's messenger switches (`place.messengers`) do not reach here — they
+ * are the lead form's (`messengerFacts`); the header, the call bar and the
+ * control's channels keep the number.
+ */
 export declare function contactOf(site: Pick<SiteConfig<string, string>, "brand">, place: Place<string>): {
     phone: string | null;
     whatsapp: string | null;
 };
+export declare function messengerFacts(_site: Pick<SiteConfig<string, string>, "brand">, place: Place<string>): MessengerFacts;

package/dist/core/site.js

@@ -1,4 +1,5 @@
 import { bookingConfigProblems, calComHostsProblems } from "./booking/validate.js";
+import { TELEGRAM_BOT } from "./messenger.js";
 import { pricingProblemsFor } from "./pricing/validate.js";
 export function defineSite(config) {
     const pageKeys = Object.keys(config.pages).filter((k) => Object.hasOwn(config.pages, k));
@@ -101,10 +102,30 @@ export function assertLaunchable(site, todos) {
 export function bakedPlace(site, slug) {
     return site.places.find(p => p.slug === slug);
 }
-/** The numbers a place answers on: its own, or the brand's until it has one. */
+/**
+ * The numbers a place answers on: its own, or the brand's until it has one.
+ * The panel's messenger switches (`place.messengers`) do not reach here — they
+ * are the lead form's (`messengerFacts`); the header, the call bar and the
+ * control's channels keep the number.
+ */
 export function contactOf(site, place) {
     return {
         phone: place.channels.phone ?? site.brand.phone,
         whatsapp: place.channels.whatsapp ?? site.brand.phone,
     };
 }
+/**
+ * What a `LeadCapture` `messenger` variant may offer (`messengers`): the
+ * place's own WhatsApp number — never the brand's phone, the chat is answered
+ * by hand at the place — and its bot, each unless the panel switched it off.
+ * A baked bot whose name is not one (`TELEGRAM_BOT`) is none, as a live one is.
+ * Not a fallback for `contactOf`: the control's WhatsApp link keeps the brand's.
+ */
+const validBot = (bot) => (bot && TELEGRAM_BOT.test(bot) ? bot : null);
+export function messengerFacts(_site, place) {
+    const on = place.messengers ?? {};
+    return {
+        whatsapp: on.whatsapp === false ? null : place.channels.whatsapp,
+        telegram: on.telegram === false ? null : validBot(place.channels.telegram),
+    };
+}

package/dist/index.d.ts

@@ -3,20 +3,23 @@
  * the proxy (edge), a client island and a server module can all import it.
  * Runtime-bound halves live on their own subpaths.
  */
-export { assertLaunchable, bakedPlace, cardFact, contactOf, defineSite, ogLocaleOf, openLaunchBlockers, perLocale, type BrandFacts, type LegacyRedirect, type OwnerTodo, type PageSuffix, type Site, type SiteConfig, type Topology, } from "./core/site.js";
-export { createPlaceView, DEFAULT_TIME_ZONE, freshRating, isOpenAt, nextOpening, parseInstant, isPublished, mergeLive, parsePlaceLive, placeHref, placeOrigin, placeUrl, publicationGaps, RATING_MAX_AGE_DAYS, servedLocalities, SERVICE_AREA_GATE, siteOrigin, STOREFRONT_GATE, storefrontOf, type DayOfWeek, type Geo, type LinkBase, type LinkMode, type Opening, type OpeningHours, type OriginFacts, type Place, type PlaceLive, type PlaceView, type PostalAddress, type Presence, type PublicationField, type PublicationPolicy, type Rating, type ServiceArea, } from "./core/place/index.js";
+export { assertLaunchable, bakedPlace, cardFact, contactOf, defineSite, messengerFacts, ogLocaleOf, openLaunchBlockers, perLocale, type BrandFacts, type LegacyRedirect, type OwnerTodo, type PageSuffix, type Site, type SiteConfig, type Topology, } from "./core/site.js";
+export { createPlaceView, DEFAULT_TIME_ZONE, freshRating, isOpenAt, nextOpening, parseInstant, isPublished, mergeLive, parsePlaceLive, placeHref, placeOrigin, placeUrl, publicationGaps, RATING_MAX_AGE_DAYS, servedLocalities, SERVICE_AREA_GATE, siteOrigin, STOREFRONT_GATE, storefrontOf, type DayOfWeek, type Geo, type LinkBase, type MessengerSwitches, type LinkMode, type Opening, type OpeningHours, type OriginFacts, type Place, type PlaceLive, type PlaceView, type PostalAddress, type Presence, type PublicationField, type PublicationPolicy, type Rating, type ServiceArea, } from "./core/place/index.js";
 export { createRouting, GONE, GONE_HEADER, gonePath, goneHeader, HOST_MARK, LANG_COOKIE, LANG_COOKIE_MAX_AGE, NON_PAGE_ROUTES, parseGoneHeader, parsePlaceParam, PASS_PATHS, placeParam, pointSuffixes, THANKS, type Decision, type RequestFacts, type Routing, } from "./core/routing.js";
-export { CARD_FIELD, CARD_ID, CHANNEL_FIELD, channelOf, CONSENT_FIELD, LEAD_CHANNELS, LEAD_ERROR_PARAM, LEAD_CARD_PARAM, leadErrorFor, leadErrorOf, LEAD_SCHEMA_VERSION, MAX_CONSENT, MAX_FIELD, readCandidate, rejectionOf, suspectOf, SUBMISSION_FIELD, SUBMISSION_ID, validateCallbackLead, validateCandidate, validateLead, type Lead, type LeadCandidate, type LeadChannel, type LeadError, type PageLeadError, type LeadConsent, type LeadExtra, type LeadPrice, type LeadRejection, type LeadSchema, type LeadStore, type LeadSuspect, type LeadVerdict, type LeadWire, type SpamVerdict, } from "./core/lead.js";
+export { CARD_FIELD, CARD_ID, CHANNEL_FIELD, channelOf, CONSENT_FIELD, isMessengerChannel, LEAD_CHANNELS, LEAD_ERROR_PARAM, LEAD_CARD_PARAM, leadErrorFor, leadErrorOf, LEAD_SCHEMA_VERSION, MAX_CONSENT, MAX_FIELD, readCandidate, rejectionOf, suspectOf, SUBMISSION_FIELD, SUBMISSION_ID, validateCallbackLead, validateCandidate, validateLead, type Lead, type LeadCandidate, type LeadChannel, type LeadError, type PageLeadError, type LeadConsent, type MessengerChannel, type LeadExtra, type LeadPrice, type LeadRejection, type LeadSchema, type LeadStore, type LeadSuspect, type LeadVerdict, type LeadWire, type SpamVerdict, } from "./core/lead.js";
 export { isMobilePhone, isPlausiblePhone, normalizePhone, phoneProblem } from "./core/phone.js";
 export { answeredUnknown, CENTS_BUCKETS, centsBucket, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, labelOf, LEAD_FLOWS, mulBp, parsePricingModel, priceOf, PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, PricingModelError, pricingProblems, pricingProblemsFor, readEstimateInputs, roundTo, type AddOption, type DiscountOption, type LeadFlow, type LeadFlows, type MultiplyOption, type NeedPricing, type Price, type PriceLine, type PricingInput, type PricingInputKind, type PricingInputs, type PricingLabels, type PricingModel, } from "./core/pricing/index.js";
 export { flowTextOf, LEAD_CAPTURE_TEXT, type LeadCaptureFlowText, type LeadCaptureText } from "./core/lead-capture-text.js";
+export { LEAD_CAPTURE_MESSENGER_TEXT, messengerTextOf, type LeadCaptureMessengerText } from "./core/messenger-text.js";
+export { channelsAvailable, MESSAGE_REF, MESSAGE_REF_FIELD, MESSAGE_REF_PREFIX, messageRefOf, newMessageRef, TELEGRAM_BOT, telegramHref, type ChannelsAvailable, type MessengerFacts, type MessengerKind, type MessengerMode, type MessengerVariant, type RandomBytes, } from "./core/messenger.js";
+export { MAX_MESSENGER_MESSAGE, messengerMessage, type MessengerMessageInput, type MessengerMessageText } from "./core/messenger-message.js";
 export { fillText, formatCents, openingText } from "./core/lead-capture-format.js";
 export { channelHref, resolveChannels, smsHref, type CaptureChannel, type ChannelFacts, type ChannelOptions, type ResolvedChannels, } from "./core/channels.js";
 export { checkTiming, HONEYPOT_FIELD, LEGACY_HONEYPOT_FIELDS, MIN_FILL_MS, RATE_LIMIT_MAX_KEYS, RateLimiter, RENDERED_AT_FIELD, screen, type Screening, } from "./core/antispam.js";
-export { createAcceptLead, ANALYTICS_ID_FIELD, EXPERIMENT_FIELD, FORM_ID_FIELD, leadRef, LOCALE_FIELD, LOCATION_FIELD, PRICE_CHANGED, SHOWN_CENTS_FIELD, VARIANT_FIELD, type AcceptDeps, type Outcome, type SubmitTags, } from "./core/accept.js";
+export { createAcceptLead, ANALYTICS_ID_FIELD, CHANNELS_FIELD, EXPERIMENT_FIELD, FORM_ID_FIELD, leadRef, LOCALE_FIELD, LOCATION_FIELD, PRICE_CHANGED, SHOWN_CENTS_FIELD, submitTagsOf, VARIANT_FIELD, type AcceptDeps, type Outcome, type SubmitTags, } from "./core/accept.js";
 export { areaServedNodes, breadcrumbNode, businessId, businessNode, faqPageNode, offerNodes, organizationId, organizationNode, placeGraph, websiteId, type OfferInput, type PageGraphCopy, type QuestionAnswer, } from "./core/seo/ld.js";
 export { AI_CRAWLERS, ogImageUrl, robotsFor, sitemapFor, type RobotsFile, type RobotsRule, type SitemapEntry, } from "./core/seo/sitemap.js";
-export { ALLOWED_PROPS, ANALYTICS_ID, analyticsSink, countsAsPageView, EVENTS, EXPERIMENT_SLUG, experimentProps, qaVisit, type AnalyticsTarget, type IntentChannel, type LeadField, type LeadStep, } from "./core/analytics.js";
+export { ALLOWED_PROPS, ANALYTICS_ID, analyticsSink, channelsProps, countsAsPageView, EVENTS, EXPERIMENT_SLUG, experimentProps, qaVisit, type AnalyticsTarget, type IntentChannel, type LeadField, type LeadStep, } from "./core/analytics.js";
 export { AB_COOKIE_PREFIX, AB_FORCE_PARAM, abAssignments, abRunning, abReset, abVariantUrl, cookieValue, type AbReset, } from "./core/ab-switcher.js";
 export { abSwitcherVisible } from "./core/ab-gate.js";
 export type { CallBarText, CopySlice, CoreText, PageMetaCopy, QuoteFormCopy, Said, StatusAction, StatusCopy, StatusScreenText, } from "./core/content.js";

package/dist/index.js

@@ -3,20 +3,23 @@
  * the proxy (edge), a client island and a server module can all import it.
  * Runtime-bound halves live on their own subpaths.
  */
-export { assertLaunchable, bakedPlace, cardFact, contactOf, defineSite, ogLocaleOf, openLaunchBlockers, perLocale, } from "./core/site.js";
+export { assertLaunchable, bakedPlace, cardFact, contactOf, defineSite, messengerFacts, ogLocaleOf, openLaunchBlockers, perLocale, } from "./core/site.js";
 export { createPlaceView, DEFAULT_TIME_ZONE, freshRating, isOpenAt, nextOpening, parseInstant, isPublished, mergeLive, parsePlaceLive, placeHref, placeOrigin, placeUrl, publicationGaps, RATING_MAX_AGE_DAYS, servedLocalities, SERVICE_AREA_GATE, siteOrigin, STOREFRONT_GATE, storefrontOf, } from "./core/place/index.js";
 export { createRouting, GONE, GONE_HEADER, gonePath, goneHeader, HOST_MARK, LANG_COOKIE, LANG_COOKIE_MAX_AGE, NON_PAGE_ROUTES, parseGoneHeader, parsePlaceParam, PASS_PATHS, placeParam, pointSuffixes, THANKS, } from "./core/routing.js";
-export { CARD_FIELD, CARD_ID, CHANNEL_FIELD, channelOf, CONSENT_FIELD, LEAD_CHANNELS, LEAD_ERROR_PARAM, LEAD_CARD_PARAM, leadErrorFor, leadErrorOf, LEAD_SCHEMA_VERSION, MAX_CONSENT, MAX_FIELD, readCandidate, rejectionOf, suspectOf, SUBMISSION_FIELD, SUBMISSION_ID, validateCallbackLead, validateCandidate, validateLead, } from "./core/lead.js";
+export { CARD_FIELD, CARD_ID, CHANNEL_FIELD, channelOf, CONSENT_FIELD, isMessengerChannel, LEAD_CHANNELS, LEAD_ERROR_PARAM, LEAD_CARD_PARAM, leadErrorFor, leadErrorOf, LEAD_SCHEMA_VERSION, MAX_CONSENT, MAX_FIELD, readCandidate, rejectionOf, suspectOf, SUBMISSION_FIELD, SUBMISSION_ID, validateCallbackLead, validateCandidate, validateLead, } from "./core/lead.js";
 export { isMobilePhone, isPlausiblePhone, normalizePhone, phoneProblem } from "./core/phone.js";
 export { answeredUnknown, CENTS_BUCKETS, centsBucket, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, labelOf, LEAD_FLOWS, mulBp, parsePricingModel, priceOf, PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, PricingModelError, pricingProblems, pricingProblemsFor, readEstimateInputs, roundTo, } from "./core/pricing/index.js";
 export { flowTextOf, LEAD_CAPTURE_TEXT } from "./core/lead-capture-text.js";
+export { LEAD_CAPTURE_MESSENGER_TEXT, messengerTextOf } from "./core/messenger-text.js";
+export { channelsAvailable, MESSAGE_REF, MESSAGE_REF_FIELD, MESSAGE_REF_PREFIX, messageRefOf, newMessageRef, TELEGRAM_BOT, telegramHref, } from "./core/messenger.js";
+export { MAX_MESSENGER_MESSAGE, messengerMessage } from "./core/messenger-message.js";
 export { fillText, formatCents, openingText } from "./core/lead-capture-format.js";
 export { channelHref, resolveChannels, smsHref, } from "./core/channels.js";
 export { checkTiming, HONEYPOT_FIELD, LEGACY_HONEYPOT_FIELDS, MIN_FILL_MS, RATE_LIMIT_MAX_KEYS, RateLimiter, RENDERED_AT_FIELD, screen, } from "./core/antispam.js";
-export { createAcceptLead, ANALYTICS_ID_FIELD, EXPERIMENT_FIELD, FORM_ID_FIELD, leadRef, LOCALE_FIELD, LOCATION_FIELD, PRICE_CHANGED, SHOWN_CENTS_FIELD, VARIANT_FIELD, } from "./core/accept.js";
+export { createAcceptLead, ANALYTICS_ID_FIELD, CHANNELS_FIELD, EXPERIMENT_FIELD, FORM_ID_FIELD, leadRef, LOCALE_FIELD, LOCATION_FIELD, PRICE_CHANGED, SHOWN_CENTS_FIELD, submitTagsOf, VARIANT_FIELD, } from "./core/accept.js";
 export { areaServedNodes, breadcrumbNode, businessId, businessNode, faqPageNode, offerNodes, organizationId, organizationNode, placeGraph, websiteId, } from "./core/seo/ld.js";
 export { AI_CRAWLERS, ogImageUrl, robotsFor, sitemapFor, } from "./core/seo/sitemap.js";
-export { ALLOWED_PROPS, ANALYTICS_ID, analyticsSink, countsAsPageView, EVENTS, EXPERIMENT_SLUG, experimentProps, qaVisit, } from "./core/analytics.js";
+export { ALLOWED_PROPS, ANALYTICS_ID, analyticsSink, channelsProps, countsAsPageView, EVENTS, EXPERIMENT_SLUG, experimentProps, qaVisit, } from "./core/analytics.js";
 export { AB_COOKIE_PREFIX, AB_FORCE_PARAM, abAssignments, abRunning, abReset, abVariantUrl, cookieValue, } from "./core/ab-switcher.js";
 export { abSwitcherVisible } from "./core/ab-gate.js";
 export { BOOKING_LIMITS, BOOKING_PROVIDERS, BOOKING_STATUSES, BookingConfigError, bookingConfigProblems, BOOKING_EXPERIMENT, bookingHref, bookingOf, bookingRequestedProperties, bookingRequestProblems, calComHostsProblems, DEFAULT_BOOKING, DEFAULT_CAL_COM_HOSTS, isBookingProvider, isLeadRef, isPageProvider, isPreferredPart, parseBookingConfig, parseBookingRequest, PREFERRED_PARTS, } from "./core/booking/index.js";

package/dist/next/quote-route.js

@@ -1,7 +1,7 @@
 import { after } from "next/server.js";
 import { CONFIRM_PATH, confirmQuery } from "./confirm-route.js";
-import { createAcceptLead, EXPERIMENT_FIELD, PRICE_CHANGED, VARIANT_FIELD } from "../core/accept.js";
-import { analyticsSink, EVENTS, experimentProps } from "../core/analytics.js";
+import { createAcceptLead, PRICE_CHANGED, submitTagsOf } from "../core/accept.js";
+import { analyticsSink, EVENTS } from "../core/analytics.js";
 import { RateLimiter } from "../core/antispam.js";
 import { CARD_FIELD, CARD_ID, channelOf, LEAD_CARD_PARAM, LEAD_ERROR_PARAM } from "../core/lead.js";
 import { createPlaceView } from "../core/place/view.js";
@@ -54,10 +54,6 @@ function seeOther(location) {
 function json(status, body) {
     return new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json", "Cache-Control": "no-store" } });
 }
-const text = (form, name) => {
-    const value = form.get(name);
-    return typeof value === "string" ? value : null;
-};
 /** `LeadCapture`'s own post asks for JSON; a plain form post never does. */
 const wantsJson = (request) => (request.headers.get("accept") ?? "").includes("application/json");
 export function quoteRoute(site, deps) {
@@ -171,6 +167,7 @@ export function quoteRoute(site, deps) {
             capture: (lead, formId, tags) => sinkFor(lead.placeSlug).capture(EVENTS.leadSubmit, {
                 form_id: formId,
                 channel: channelOf(lead),
+                ...(lead.messageRef ? { message_ref: lead.messageRef } : {}),
                 ...tags,
             }),
             limiter: (limiter ??= new RateLimiter(env.leadRateLimit?.limit ?? 5, env.leadRateLimit?.windowMs ?? 600_000)),
@@ -194,7 +191,7 @@ export function quoteRoute(site, deps) {
                 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));
+                const tags = submitTagsOf(form);
                 // The field's role and why — never what was typed.
                 const repriced = outcome.field === PRICE_CHANGED;
                 const props = { form_id: outcome.formId, channel: outcome.channel, field: outcome.field, reason: repriced ? PRICE_CHANGED : "invalid", ...tags };

package/dist/react/AnalyticsBoundary.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ContactLinkTracker } from "@evinvest/marketing/tracker";
 import { usePathname } from "next/navigation.js";
 import { useEffect, useMemo, useState } from "react";
-import { analyticsSink, countsAsPageView, EVENTS, experimentProps } from "../core/analytics.js";
+import { analyticsSink, channelsProps, countsAsPageView, EVENTS, experimentProps } from "../core/analytics.js";
 import { AnalyticsIdContext, AnalyticsSinkContext, experimentOf } from "./analytics-context.js";
 import { newSubmissionId } from "./use-lead-submit.js";
 /**
@@ -11,7 +11,7 @@ import { newSubmissionId } from "./use-lead-submit.js";
  * contact link — or one the tracker cannot classify (`sms:`).
  */
 const INTENT_ATTR = "data-intent";
-const INTENTS = ["form_open", "booking", "sms", "callback"];
+const INTENTS = ["form_open", "booking", "sms", "callback", "telegram", "whatsapp_qr"];
 function source() {
     const utm = new URLSearchParams(window.location.search).get("utm_source");
     if (utm)
@@ -54,5 +54,5 @@ export function AnalyticsBoundary({ target, placeSlug, qaCookie, children }) {
     }, [sink]);
     // A link inside an experiment's island (`LeadCapture`) carries the
     // assignment on itself, which is what the tracker reads.
-    return (_jsx(AnalyticsIdContext.Provider, { value: key ? distinctId : null, children: _jsx(AnalyticsSinkContext.Provider, { value: sink, children: _jsx(ContactLinkTracker, { channels: ["phone", "whatsapp"], onContact: ({ channel, data }) => sink.capture(EVENTS.intent, { channel, ...experimentProps(data["experiment"], data["variant"]) }, { transport: "beacon" }), children: children }) }) }));
+    return (_jsx(AnalyticsIdContext.Provider, { value: key ? distinctId : null, children: _jsx(AnalyticsSinkContext.Provider, { value: sink, children: _jsx(ContactLinkTracker, { channels: ["phone", "whatsapp"], onContact: ({ channel, data }) => sink.capture(EVENTS.intent, { channel, ...experimentProps(data["experiment"], data["variant"]), ...channelsProps(data["channelsAvailable"]) }, { transport: "beacon" }), children: children }) }) }));
 }

package/dist/react/LeadCapture.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { type CaptureChannel } from "../core/channels.js";
 import { type LeadError, type LeadWire, type PageLeadError } from "../core/lead.js";
+import { type MessengerFacts, type MessengerVariant } from "../core/messenger.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";
@@ -14,10 +15,11 @@ import { type FieldPart } from "./LeadCaptureFields.js";
 import { type LeadCaptureLayout, type LeadNeedDisplay, type LeadNeedOption } from "./LeadCaptureNeed.js";
 import { type PricePart } from "./LeadCapturePrice.js";
 import { type StepsPart } from "./LeadCaptureSteps.js";
+import type { MessengerPart } from "./messenger/types.js";
 import { type LeadIntro } from "./lead-steps.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" | "icon" | "intro" | "introOption" | "stepNext" | FieldPart | ChannelPart | EstimatePart | PricePart | StepsPart | PricedPart | BookingPart;
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | "icon" | "intro" | "introOption" | "stepNext" | FieldPart | ChannelPart | EstimatePart | PricePart | StepsPart | PricedPart | BookingPart | MessengerPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -117,6 +119,27 @@ export interface LeadCaptureProps {
     channelIcons?: Partial<Record<ChannelIconKey, ReactNode>> | undefined;
     /** Moved first when available — a `default_channel` experiment's arm. */
     prefer?: CaptureChannel | undefined;
+    /**
+     * The `lead_channel` experiment's arm: how the card offers WhatsApp and the
+     * brand's bot (`MessengerVariant`); absent → the control. A place without
+     * WhatsApp falls back to the control (`messengerShownOf`), and every event
+     * says which messengers were there (`channels_available`).
+     */
+    messenger?: MessengerVariant | undefined;
+    /** `messengerFacts(site, place)`: the place's own WhatsApp number and bot, each `null` when off. */
+    messengers?: MessengerFacts | undefined;
+    /** The brand's prefix of the lead's chat reference (`AQ` → `AQ-7K3F`, `message_ref`); without it no reference. */
+    refPrefix?: string | undefined;
+    /** The brand's name: the prefilled message's greeting («Bonjour Aquafix»). */
+    brand?: string | undefined;
+    /**
+     * The estimate's question whose answer is the message's timing line and
+     * in its preview (`{ input: "frequency" }` → «Délai souhaité : 2 sem.»);
+     * nothing until it is answered, nor for «I don't know».
+     */
+    messengerTiming?: {
+        input: string;
+    } | undefined;
     /** The site's assignment: on every event, and posted with the form. Slugs only. */
     experiment?: Experiment | undefined;
     timeZone?: string | undefined;

package/dist/react/LeadCapture.js

@@ -2,10 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, cn } from "@evinvest/uikit";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { PRICE_CHANGED, SHOWN_CENTS_FIELD } from "../core/accept.js";
+import { CHANNELS_FIELD, PRICE_CHANGED, SHOWN_CENTS_FIELD } from "../core/accept.js";
 import { resolveChannels } from "../core/channels.js";
 import { CHANNEL_FIELD, leadErrorFor } from "../core/lead.js";
-import { fillText, openingText } from "../core/lead-capture-format.js";
+import { fillText, formatCents, openingText } from "../core/lead-capture-format.js";
+import { channelsAvailable, MESSAGE_REF_FIELD } from "../core/messenger.js";
 import { flowTextOf } from "../core/lead-capture-text.js";
 import { bookingOf } from "../core/booking/model.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
@@ -20,6 +21,7 @@ import { ConsentField, FormMessage, LocalityField, NameField, PhoneField } from
 import { NeedField } from "./LeadCaptureNeed.js";
 import { PriceBox, PriceCompact } from "./LeadCapturePrice.js";
 import { IntroField, LeadSteps } from "./LeadCaptureSteps.js";
+import { drawsAt, initialMode, MessengerSlot, messengerShownOf, NO_MESSENGERS, useMessageRef } from "./LeadCaptureMessenger.js";
 import { stepOfField, stepsOf, useLeadSteps } from "./lead-steps.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
 import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash, usePostcode } from "./use-lead-context.js";
@@ -64,7 +66,12 @@ export function LeadCapture(props) {
     const postcode = usePostcode();
     const [locality, setLocality] = useState(undefined);
     const localityShown = locality ?? postcode ?? (served.length === 1 ? served[0] : undefined);
-    const events = useLeadEvents(root, { formId, layout, experiment });
+    const facts = props.messengers ?? NO_MESSENGERS;
+    const shown = messengerShownOf(props.messenger, facts);
+    const channels = channelsAvailable(props.messengers);
+    const [mode, setMode] = useState(() => initialMode(props.messenger));
+    const { ref: messageRef, renew: renewRef, minted } = useMessageRef(props.refPrefix, shown !== null);
+    const events = useLeadEvents(root, { formId, layout, experiment, channels, messenger: shown ?? undefined });
     useOpenOnHash(`${id}-callback`);
     // Only this card's: a page may draw several, and the query names one.
     const initial = leadErrorFor(props.initialError ?? null, id);
@@ -78,7 +85,8 @@ export function LeadCapture(props) {
     const flow = estimate.flow;
     const repriced = useRepriced(estimate.price, shownNeed, flowText, locale);
     // A priced lead stays in the card: its price is confirmed there, and the slot promised.
-    const staysInCard = (ch) => props.done !== undefined || (ch === "form" && flow !== "quote");
+    // `thanks` offers its messengers in the success: the card stays.
+    const staysInCard = (ch) => props.done !== undefined || (ch === "form" && (flow !== "quote" || shown === "thanks"));
     const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(staysInCard, { mobile: wire.mobile, name: props.name?.field }, {
         onRefused: (channel, field, cents) => {
             repriced.refused(field, cents);
@@ -102,7 +110,9 @@ export function LeadCapture(props) {
     const needLabel = needs.find(n => n.value === need)?.label;
     const message = needLabel ? fillText(text.message, { need: needLabel }) : text.messageGeneric;
     const [lead = "form", ...rest] = resolved.order;
-    const links = rest.filter((ch) => ch !== "form" && ch !== "callback");
+    // A variant owns WhatsApp — its link posts the lead first — and the owner's model has no text message.
+    const owned = (ch) => shown !== null && shown !== "fallback" && (ch === "whatsapp" || ch === "sms");
+    const links = rest.filter((ch) => ch !== "form" && ch !== "callback" && ch !== "telegram" && !owned(ch));
     // The intro asked for a call back: the folded callback would be a second one.
     const callbackElsewhere = !callbackPreset;
     const asked = model && shownNeed !== undefined && wanted === "estimate" ? askedInputs(model, shownNeed, estimate.answers) : [];
@@ -179,11 +189,66 @@ export function LeadCapture(props) {
             continueLocality();
         }
     };
-    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), row: !primary && props.channelsDisplay === "row", icon: props.channelIcons?.callback, classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, icon: props.channelIcons?.[ch], classNames: c }, ch));
-    const rootProps = { id, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant };
+    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, channels: channels, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), row: !primary && props.channelsDisplay === "row", icon: props.channelIcons?.callback, classNames: c }, ch)) : ch === "form" || ch === "telegram" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, icon: props.channelIcons?.[ch], classNames: c }, ch));
+    // The estimate's answers as the message says them: the whole label, and the
+    // brand's words for the preview and the need's line (`previewLabels`, else
+    // `shortLabels`). «I don't know» is no answer; the timing question has a line of its own.
+    const answerOf = (input) => {
+        const option = input.options.find(o => o.id === estimate.answers[input.id]);
+        if (!option)
+            return null;
+        const label = labelOf(option.labels, locale);
+        const question = props.questions?.[input.id];
+        return { label, short: question?.previewLabels?.[option.id] ?? question?.shortLabels?.[option.id] ?? label };
+    };
+    const timingInput = asked.find(i => i.id === props.messengerTiming?.input);
+    const answerShorts = asked
+        .filter(i => i !== timingInput)
+        .map(i => answerOf(i)?.short)
+        .filter((short) => short !== undefined);
+    // A variant arranges the card's own phone field and submit; it never draws its own.
+    const kitOf = (at, variant, drawn) => ({
+        at,
+        variant,
+        shown: drawn,
+        facts,
+        id,
+        locale,
+        brand: props.brand ?? "",
+        text,
+        wire,
+        needs,
+        needLabel: needs.find(n => n.value === shownNeed)?.label ?? null,
+        priceText: flow !== "quote" && repriced.price ? formatCents(repriced.price.cents, locale) : null,
+        answers: answerShorts,
+        timing: timingInput ? answerOf(timingInput) : null,
+        mode,
+        setMode,
+        messageRef,
+        renewRef,
+        ready: minted,
+        phone: options => phoneOf(options),
+        // Inside a variant the submit is its main button, dressed as its messenger's.
+        // …with the phone's icon before its words: it is the call.
+        submit: (label, options) => submitOf(label, { ...options, className: cn(c?.messengerCta, options?.className), icon: props.channelIcons?.phone ?? props.channelIcons?.callback }),
+        title: text.title,
+        lede: text.lede,
+        events,
+        icons: props.channelIcons,
+        experiment,
+        classNames: c,
+    });
+    const slot = (at) => shown !== null && props.messenger && drawsAt(shown, at) && _jsx(MessengerSlot, { kit: kitOf(at, props.messenger, shown) }, `messenger-${at}`);
+    const rootProps = {
+        id,
+        className: cn("flex w-full flex-col gap-6", props.className, c?.root),
+        "data-experiment": experiment?.name,
+        "data-variant": experiment?.variant,
+        "data-channels-available": channels,
+    };
     if (sent && staysInCard(sent.channel)) {
         const done = typeof props.done === "function" ? props.done(sent) : props.done;
-        return (_jsx("div", { ref: root, ...rootProps, children: _jsxs("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("flex flex-col gap-4 outline-none", c?.done), children: [_jsx(Fragment, { children: done }, "done"), sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: props.booking === undefined ? (_jsx(LeadBooking, { booking: bookingOf(place, props.bookingVariant), sent: sent, locale: locale, text: flowText, adapters: props.bookingAdapters, embed: props.bookingEmbed, formId: formId, classNames: c })) : typeof props.booking === "function" ? (props.booking(sent)) : (props.booking), locale: locale, text: flowText, classNames: c }))] }) }));
+        return (_jsx("div", { ref: root, ...rootProps, children: _jsxs("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("flex flex-col gap-4 outline-none", c?.done), children: [_jsx(Fragment, { children: done }, "done"), sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: props.booking === undefined ? (_jsx(LeadBooking, { booking: bookingOf(place, props.bookingVariant), sent: sent, locale: locale, text: flowText, adapters: props.bookingAdapters, embed: props.bookingEmbed, formId: formId, classNames: c })) : typeof props.booking === "function" ? (props.booking(sent)) : (props.booking), locale: locale, text: flowText, classNames: c })), sent.channel === "form" && slot("done")] }) }));
     }
     // An arrow key in `steps`: chosen, and the screen stays on until the answer is given.
     const stay = (choose) => (...args) => {
@@ -197,11 +262,28 @@ export function LeadCapture(props) {
     const localityField = (_jsx(LocalityField
     // Remounted with what the query knew: an untouched field takes it as typed.
     , { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: served, placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, preset: postcode, classNames: c }, postcode ?? ""));
-    const phone = (_jsxs(_Fragment, { children: [_jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), _jsx(Fragment, { children: props.afterPhone }, "afterPhone")] }));
+    function phoneOf(o = {}) {
+        return (_jsxs(_Fragment, { children: [_jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), optional: o.optional, disabled: o.disabled, placeholder: o.placeholder, frame: o.frame, form: o.form, classNames: c }), _jsx(Fragment, { children: "after" in o ? o.after : props.afterPhone }, "afterPhone")] }));
+    }
+    // A variant's `contact` takes the phone's place, and brings its own button.
+    const contactSlot = slot("contact");
+    const phone = contactSlot || phoneOf();
     const nameField = props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c }));
     const mainBusy = busy === "form" || (callbackPreset && busy === "callback");
     const mainFailure = failure && (failure.channel === "form" || callbackPreset) ? failure.failure : null;
-    const tail = (_jsxs(_Fragment, { children: [_jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: mainFailure, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: mainBusy, label: callbackPreset ? text.callbackSubmit : flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: callbackPreset ? cn(c?.submit, c?.callbackSubmit) : c?.submit }), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), text.privacy !== "" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] }));
+    function submitOf(label, o = {}) {
+        return (_jsx(SubmitButton, { busy: mainBusy, label: label ?? (callbackPreset ? text.callbackSubmit : flow === "quote" ? text.submit : flowText.bookSubmit), sending: text.sending, form: o.form, className: cn(callbackPreset ? cn(c?.submit, c?.callbackSubmit) : c?.submit, o.className), children: o.icon !== undefined && o.icon !== null && (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center [&_svg]:size-5", c?.channelIcon), children: o.icon })) }));
+    }
+    /**
+     * Without a script a variant leads nowhere — its messenger links are inert
+     * until the reference is minted — so a browser that runs none gets the
+     * control's phone and submit (`select` draws the phone already). Never
+     * parsed where scripts run.
+     */
+    function noScript() {
+        return (_jsxs("noscript", { children: [shown !== "select" && phoneOf({ after: null }), submitOf()] }));
+    }
+    const tail = (_jsxs(_Fragment, { children: [_jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: mainFailure, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [!contactSlot && submitOf(), contactSlot && noScript(), slot("afterSubmit"), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), text.privacy !== "" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] }));
     // `qualify-first` shows the contact step as soon as a need's radio is
     // checked (`:has`) — without a script, and inside the tap with one.
     const contactShown = layout === "single" || (need !== undefined && !editing);
@@ -258,7 +340,10 @@ export function LeadCapture(props) {
             }
         }
     };
-    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })) }, "head"), lead !== "form" && (lead !== "callback" || callbackElsewhere) && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, onKeyDown: onKeyDown, data: steps ? { "data-lead-steps": "" } : undefined, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), steps ? (_jsx(LeadSteps, { steps: stepIds.map(stepView), current: stepper.current, total: total, onBack: () => moveOn(stepper.back, null, false), onEdit: step => moveOn(() => stepper.edit(step), null, false), text: { stepProgress: flowText.stepProgress, stepProgressOpen: flowText.stepProgressOpen, stepBack: flowText.stepBack, change: text.needChange }, classNames: c })) : (_jsxs(_Fragment, { children: [_jsx(NeedField, { display: needDisplay, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, enterPicks: enterPicks, onPick: pick, onSelect: select, onEdit: () => {
+    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: slot("head") ||
+                    (props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), !drawsAt(shown, "afterHead") && _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] }))) }, "head"), slot("afterHead"), lead !== "form" && !owned(lead) && (lead !== "callback" || callbackElsewhere) && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, onKeyDown: onKeyDown, data: steps ? { "data-lead-steps": "" } : undefined, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), _jsx("input", { type: "hidden", name: CHANNELS_FIELD, value: channels }), messageRef && _jsx("input", { type: "hidden", name: MESSAGE_REF_FIELD, value: messageRef }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), steps ? (_jsx(LeadSteps, { steps: stepIds.map(stepView), current: stepper.current, total: total, onBack: () => moveOn(stepper.back, null, false), onEdit: step => moveOn(() => stepper.edit(step), null, false), text: { stepProgress: flowText.stepProgress, stepProgressOpen: flowText.stepProgressOpen, stepBack: flowText.stepBack, change: text.needChange }, classNames: c })) : drawsAt(shown, "body") && mode === null ? (
+                    // `saga`'s first screen: the channel, before anything else.
+                    _jsxs(_Fragment, { children: [slot("body"), noScript()] })) : (_jsxs(_Fragment, { children: [slot("beforeNeed"), _jsx(NeedField, { display: needDisplay, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, enterPicks: enterPicks, onPick: pick, onSelect: select, onEdit: () => {
                                     setEditing(true);
                                     events.step("need");
                                 }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [model && shownNeed !== undefined && wanted === "estimate" && _jsx(EstimateInputs, { model: model, need: shownNeed, questions: props.questions, ...estimateProps }), priceShown, photos, localityField, phone, nameField, _jsx(Fragment, { children: props.extras }, "extras"), tail] })] }))] }), (links.length > 0 || (rest.includes("callback") && callbackElsewhere)) &&

package/dist/react/LeadCaptureChannels.d.ts

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

package/dist/react/LeadCaptureChannels.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, buttonVariants, cn } from "@evinvest/uikit";
-import { EXPERIMENT_FIELD, VARIANT_FIELD } from "../core/accept.js";
+import { CHANNELS_FIELD, EXPERIMENT_FIELD, VARIANT_FIELD } from "../core/accept.js";
 import { channelHref } from "../core/channels.js";
 import { CHANNEL_FIELD } from "../core/lead.js";
 import { fillText } from "../core/lead-capture-format.js";
@@ -51,7 +51,7 @@ export function ChannelLink(props) {
 export function CallbackForm(props) {
     const { id, primary, open, formId, placeSlug, locale, renderedAt, mobileName, subject, opening, text, experiment, error, classNames: c } = props;
     const at = (field) => (error?.field === field ? error.text : null);
-    return (_jsxs("details", { id: id, open: open, className: cn(props.row ? "min-w-0 flex-1 open:basis-full" : "w-full", c?.callback), children: [_jsxs("summary", { "data-intent": "callback", className: partWithLeading(buttonVariants({ variant: primary ? "primary" : "outline", size: "touch", className: "flex w-full list-none [&::-webkit-details-marker]:hidden" }), CHANNEL_LEADING, cn(c?.channel, primary && c?.primary, c?.callbackSummary) || undefined), children: [_jsx(ChannelIcon, { icon: props.icon, className: c?.channelIcon }), text.callback] }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: props.card, onSubmit: props.onSubmit, className: cn("mt-4 gap-4", c?.callbackForm), children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), subject && _jsx("input", { type: "hidden", name: subject.name, value: subject.value }), _jsx(ExperimentFields, { experiment: experiment }), _jsx("p", { className: cn("text-ink-soft", c?.callbackLede), children: opening ?? text.callbackLede }), _jsx(PhoneField, { id: `${id}-phone`, name: mobileName, text: text, error: at("phone"), onSoftError: props.onSoftError, classNames: c }), _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), _jsx(FormMessage, { id: `${id}-error`, error: error && error.field !== "phone" && error.field !== "consent" ? error.text : null, className: c?.error }), _jsx(FailureMessage, { failure: props.failure, text: text, onRetry: props.onRetry, className: c?.error }), _jsx(SubmitButton, { busy: props.busy, label: text.callbackSubmit, sending: text.sending, className: c?.callbackSubmit })] })] }));
+    return (_jsxs("details", { id: id, open: open, className: cn(props.row ? "min-w-0 flex-1 open:basis-full" : "w-full", c?.callback), children: [_jsxs("summary", { "data-intent": "callback", className: partWithLeading(buttonVariants({ variant: primary ? "primary" : "outline", size: "touch", className: "flex w-full list-none [&::-webkit-details-marker]:hidden" }), CHANNEL_LEADING, cn(c?.channel, primary && c?.primary, c?.callbackSummary) || undefined), children: [_jsx(ChannelIcon, { icon: props.icon, className: c?.channelIcon }), text.callback] }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: props.card, onSubmit: props.onSubmit, className: cn("mt-4 gap-4", c?.callbackForm), children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), subject && _jsx("input", { type: "hidden", name: subject.name, value: subject.value }), _jsx(ExperimentFields, { experiment: experiment }), props.channels && _jsx("input", { type: "hidden", name: CHANNELS_FIELD, value: props.channels }), _jsx("p", { className: cn("text-ink-soft", c?.callbackLede), children: opening ?? text.callbackLede }), _jsx(PhoneField, { id: `${id}-phone`, name: mobileName, text: text, error: at("phone"), onSoftError: props.onSoftError, classNames: c }), _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), _jsx(FormMessage, { id: `${id}-error`, error: error && error.field !== "phone" && error.field !== "consent" ? error.text : null, className: c?.error }), _jsx(FailureMessage, { failure: props.failure, text: text, onRetry: props.onRetry, className: c?.error }), _jsx(SubmitButton, { busy: props.busy, label: text.callbackSubmit, sending: text.sending, className: c?.callbackSubmit })] })] }));
 }
 /**
  * A `quote` need priced from photos (a deep clean, after-works): the photos

package/dist/react/LeadCaptureEstimate.d.ts

@@ -17,6 +17,12 @@ export interface EstimateQuestion {
     badges?: Readonly<Record<string, string>> | undefined;
     /** A shorter label per option id, drawn on a phone (under `sm`); the radio keeps the whole one. */
     shortLabels?: Readonly<Record<string, string>> | undefined;
+    /**
+     * The answer as a `messenger` variant's message says it, per option id — in
+     * the need's line and the preview («2 ch.», «40–70 m²»), where a tile's own
+     * «2» says nothing. Over `shortLabels`, then the label.
+     */
+    previewLabels?: Readonly<Record<string, string>> | undefined;
     /**
      * `steps` only: questions with the same number share a screen, in the
      * need's order. It moves on by itself once every one is answered; until

package/dist/react/LeadCaptureFields.d.ts

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