@evinvest/kitstart 0.8.0 → 0.9.0

package/dist/next/quote-route.js

@@ -1,11 +1,12 @@
 import { after } from "next/server.js";
-import { createAcceptLead } from "../core/accept.js";
-import { analyticsSink, EVENTS } from "../core/analytics.js";
+import { createAcceptLead, EXPERIMENT_FIELD, VARIANT_FIELD } from "../core/accept.js";
+import { analyticsSink, EVENTS, experimentProps } from "../core/analytics.js";
 import { RateLimiter } from "../core/antispam.js";
-import { channelOf } from "../core/lead.js";
+import { CARD_FIELD, CARD_ID, channelOf, LEAD_ERROR_PARAM } from "../core/lead.js";
 import { createPlaceView } from "../core/place/view.js";
-import { createRouting, THANKS } from "../core/routing.js";
+import { createRouting } from "../core/routing.js";
 import { bakedPlace, contactOf } from "../core/site.js";
+import { thanksSuffix } from "../core/status.js";
 import { clientKey } from "../server/client-key.js";
 import { openLeadStore } from "../server/lead-store.js";
 /** The Rust server's body limit; a quote is a few short fields. */
@@ -49,10 +50,22 @@ const escape = (s) => s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", "
 function seeOther(location) {
     return new Response(null, { status: 303, headers: { Location: 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) {
+    const anchor = deps.anchor ?? "quote";
+    if (!CARD_ID.test(anchor))
+        throw new Error(`quoteRoute: the anchor must be a slug ([a-z0-9-]), got ${JSON.stringify(anchor)}`);
     const accept = createAcceptLead(site);
     const routing = createRouting(site);
-    const limiter = deps.limiter ?? new RateLimiter(5, 10 * 60_000);
+    let limiter = deps.limiter;
     const defer = deps.defer ?? after;
     const log = deps.log ?? console;
     let store;
@@ -66,6 +79,16 @@ export function quoteRoute(site, deps) {
         }
         return webhook;
     };
+    // Read before the lead is stored, so a webhook that cannot be built must
+    // not throw here: it would cost the lead. `enqueue` says why, after the insert.
+    const suspectQueued = () => {
+        try {
+            return leadWebhook()?.panelSuspect ?? false;
+        }
+        catch {
+            return false;
+        }
+    };
     const leadStore = () => {
         store ??= deps.store ? deps.store() : openLeadStore(deps.env().leadsDb);
         return store;
@@ -80,6 +103,20 @@ export function quoteRoute(site, deps) {
         const mode = routing.hostSlug(request.headers.get("host") ?? "") === place.slug ? "host" : "path";
         return createPlaceView(site, place, locale, mode).href(suffix);
     }
+    /**
+     * Back to the card, with the field to fix and the need already chosen —
+     * slugs only: a phone or a name in a URL ends up in logs and analytics. The
+     * card is the one the form posted, if its id is a slug.
+     */
+    function refused(form, field, channel) {
+        const query = new URLSearchParams({ [LEAD_ERROR_PARAM]: field });
+        const subject = form.get(site.lead.wire.subject);
+        if (channel === "form" && typeof subject === "string" && site.lead.subjects.includes(subject))
+            query.set("need", subject);
+        const posted = form.get(CARD_FIELD);
+        const card = typeof posted === "string" && CARD_ID.test(posted) ? posted : anchor;
+        return `?${query}#${card}${channel === "callback" ? "-callback" : ""}`;
+    }
     /** Self-contained: the thing that failed may be the thing that renders pages. */
     function unavailable(slug, locale) {
         const place = (slug ? bakedPlace(site, slug) : undefined) ?? null;
@@ -109,6 +146,8 @@ export function quoteRoute(site, deps) {
         }
         const outcome = await accept(form, clientKey(request.headers, env.trustedProxy ?? DEV_TRUST), {
             insert: lead => leadStore().insert(lead),
+            findSubmission: async (submissionId) => (await leadStore().findSubmission?.(submissionId)) ?? null,
+            sendSuspect: suspectQueued(),
             defer,
             notify: (lead, id) => {
                 notifier ??= deps.notifier();
@@ -126,16 +165,37 @@ export function quoteRoute(site, deps) {
                 channel: channelOf(lead),
                 ...tags,
             }),
-            limiter,
+            limiter: (limiter ??= new RateLimiter(env.leadRateLimit?.limit ?? 5, env.leadRateLimit?.windowMs ?? 600_000)),
             now: deps.now?.() ?? Date.now(),
             log,
         });
+        const held = outcome.kind === "stored" && !outcome.duplicate && (outcome.lead.spamVerdict === "honeypot" || (outcome.lead.spamVerdict === "rate-limited" && !suspectQueued()));
+        if (held && outcome.kind === "stored" && env.production === false) {
+            // A local stack posts every test lead from one address: say it, loudly.
+            log.warn(`\n!!! quote (development): lead ${outcome.id} stored as ${outcome.lead.spamVerdict} and NOT sent on — no mail, no webhook.\n` +
+                (outcome.lead.spamVerdict === "rate-limited"
+                    ? `!!! The visitor saw the thanks page. Raise LEAD_RATE_LIMIT (<count>/<seconds>, now ${env.leadRateLimit?.limit ?? 5}/${(env.leadRateLimit?.windowMs ?? 600_000) / 1000}) for a local stack.\n`
+                    : "!!! The visitor saw the thanks page. The hidden trap field was filled — a browser's autofill, or a test filling every field.\n"));
+        }
+        const scripted = wantsJson(request);
         switch (outcome.kind) {
             // A suspected bot is answered exactly as a person is.
-            case "stored":
-                return seeOther(href(request, outcome.lead.placeSlug, outcome.locale, THANKS));
-            case "invalid":
-                return seeOther(href(request, outcome.slug, outcome.locale, outcome.slug ? "#quote" : ""));
+            case "stored": {
+                const location = href(request, outcome.lead.placeSlug, outcome.locale, thanksSuffix(channelOf(outcome.lead)));
+                return scripted ? json(200, { ok: true, location }) : seeOther(location);
+            }
+            case "invalid": {
+                const tags = experimentProps(text(form, EXPERIMENT_FIELD), text(form, VARIANT_FIELD));
+                // The field's role and why — never what was typed.
+                const props = { form_id: outcome.formId, channel: outcome.channel, field: outcome.field, reason: "invalid", ...tags };
+                if (env.posthogKey) {
+                    const sink = analyticsSink({ key: env.posthogKey, host: env.posthogHost, brandId: site.brand.id }, outcome.slug);
+                    defer(() => sink.capture(EVENTS.formReject, props));
+                }
+                if (scripted)
+                    return json(422, { ok: false, field: outcome.field });
+                return seeOther(href(request, outcome.slug, outcome.locale, refused(form, outcome.field, outcome.channel)));
+            }
             case "failed":
                 return unavailable(outcome.slug, outcome.locale);
         }

package/dist/react/LeadCapture.d.ts

@@ -46,7 +46,8 @@ export interface LeadCaptureProps {
     /**
      * The card's id, the anchor a call bar links to (`#quote`): the whole card,
      * head included, scrolls into view. The form is `<id>-form`, the callback
-     * `<id>-callback` and its form `<id>-callback-form`.
+     * `<id>-callback` and its form `<id>-callback-form`. Posted as `card`, so a
+     * refused lead comes back here (`?lead_error=<field>#<id>`) and shows why.
      */
     id?: string | undefined;
     text: LeadCaptureText;
@@ -58,10 +59,11 @@ export interface LeadCaptureProps {
     /** Whether the callback starts open; by default only when it is the channel that leads (the place is closed). */
     callbackOpen?: boolean | undefined;
     /**
-     * The card once a lead is taken, in place of everything in it. With it, a
-     * script posts the form itself and shows this on the thanks page's 303;
-     * without a script, or on any other answer, the form posts as it always
-     * did. Without it, a submit goes to the thanks page.
+     * The card once a lead is taken, in place of everything in it. A script
+     * posts the form itself either way, so a refusal keeps what was typed and
+     * shows why; a lead taken shows this, or — without it — goes to the thanks
+     * page. Without a script, or on an answer that is not the route's, the form
+     * posts as it always did.
      */
     done?: ReactNode | ((sent: LeadSent) => ReactNode);
     /** Replaces the title and lede — the brand's own heading. */

package/dist/react/LeadCapture.js

@@ -1,16 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn } from "@evinvest/uikit";
+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 { servedLocalities, storefrontOf } from "../core/place/types.js";
 import { CallbackForm, ChannelLink, ExperimentFields } from "./LeadCaptureChannels.js";
-import { LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
+import { FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
 import { NeedField } from "./LeadCaptureNeed.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
 import { useHydrated, useNeed, useNow, useOpenOnHash } from "./use-lead-context.js";
+import { errorText, formMessageId, OWN_FIELDS, useLeadError } from "./use-lead-error.js";
 import { useLeadEvents } from "./use-lead-events.js";
+import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { useLeadSubmit } from "./use-lead-submit.js";
 /**
  * What the locality field is offered. A storefront serving its own town knows
@@ -37,7 +39,12 @@ export function LeadCapture(props) {
     const [need, setNeed] = useNeed(props.need, needs.map(n => n.value), () => setEditing(false));
     const events = useLeadEvents(root, { formId, layout, experiment });
     useOpenOnHash(`${id}-callback`);
-    const [sent, onSubmit] = useLeadSubmit(props.done !== undefined, { mobile: wire.mobile, name: props.name?.field });
+    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) });
+    // The form's refusal by where it shows: under the field the card draws, else above the submit.
+    const formError = error?.channel === "form" ? error.field : null;
+    const at = (field) => (formError === field ? errorText(field, text) : null);
+    const above = formError !== null && !OWN_FIELDS.form.includes(formError) ? errorText(formError, text) : null;
     const doneRef = useRef(null);
     // The form the focus was in is gone: the news takes it, and is read out.
     useEffect(() => doneRef.current?.focus(), [sent]);
@@ -64,7 +71,12 @@ export function LeadCapture(props) {
         setEditing(false);
         events.step("contact");
     };
-    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, primary: primary, open: props.callbackOpen ?? primary, formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
+    // An arrow key in `qualify-first`: the tile is chosen, the group stays open.
+    const select = (value) => {
+        setNeed(value);
+        setEditing(true);
+    };
+    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: props.callbackOpen ?? primary, formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
     // `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);
@@ -73,8 +85,8 @@ export function LeadCapture(props) {
     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 }) }));
     }
-    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, 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, onPick: pick, onEdit: () => {
+    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, hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, label: text.phoneLabel, hint: text.phoneHint, placeholder: text.phonePlaceholder, 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, classNames: c })), props.extras, _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(Button, { type: "submit", size: "touch", className: cn("w-full", c?.submit), children: text.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: [_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)] }))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,7 +1,8 @@
 import { type CaptureChannel } from "../core/channels.js";
 import type { LeadCaptureText } from "../core/lead-capture-text.js";
 import type { FormEventHandler } from "react";
-import type { FieldPart } from "./LeadCaptureFields.js";
+import { type FieldPart } from "./LeadCaptureFields.js";
+import type { SendFailure } from "./use-lead-submit.js";
 import { type PartClassNames } from "./parts.js";
 /**
  * `channel` and `primary` dress every way out, the callback's summary
@@ -44,6 +45,8 @@ export declare function ChannelLink(props: {
  */
 export declare function CallbackForm(props: {
     id: string;
+    /** The card's id, posted so a refusal opens this callback again. */
+    card: string;
     /** The channel that leads: the primary face. */
     primary: boolean;
     open: boolean;
@@ -60,5 +63,15 @@ export declare function CallbackForm(props: {
     text: LeadCaptureText;
     experiment: Experiment | undefined;
     onSubmit: FormEventHandler<HTMLFormElement> | undefined;
+    /** The server's refusal: the field and its words. */
+    error: {
+        field: string;
+        text: string;
+    } | null;
+    /** The script is posting this form. */
+    busy: boolean;
+    failure: SendFailure | null;
+    onRetry: () => void;
+    onSoftError: () => void;
     classNames?: PartClassNames<ChannelPart | FieldPart> | undefined;
 }): import("react").JSX.Element;

package/dist/react/LeadCaptureChannels.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, buttonVariants, cn, FieldLabel, Input } from "@evinvest/uikit";
+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, CONSENT_FIELD } from "../core/lead.js";
+import { CHANNEL_FIELD } from "../core/lead.js";
+import { ConsentField, FormMessage, PhoneField } from "./LeadCaptureFields.js";
+import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { partWithLeading } from "./parts.js";
-import { PHONE_INPUT_PROPS, QuoteFormShell } from "./QuoteFormShell.js";
+import { QuoteFormShell } from "./QuoteFormShell.js";
 /**
  * A whole-pixel line under a brand's own type size: tailwind-merge drops a
  * size's line height for nothing, and a 15 px face at the page's 1.5 is a
@@ -40,6 +42,7 @@ export function ChannelLink(props) {
  * choose `open` itself; it is still the leading channel's face.
  */
 export function CallbackForm(props) {
-    const { id, primary, open, formId, placeSlug, locale, renderedAt, mobileName, subject, opening, text, experiment, classNames: c } = props;
-    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, 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 }), _jsxs("div", { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { htmlFor: `${id}-phone`, className: c?.label, children: text.phoneLabel }), _jsx(Input, { id: `${id}-phone`, name: mobileName, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: text.phonePlaceholder, required: true, "data-lead-field": "phone", className: c?.control })] }), _jsxs("label", { className: cn("flex min-h-11 items-start gap-3 text-sm text-ink", c?.consent), children: [_jsx("input", { type: "checkbox", name: CONSENT_FIELD, value: text.callbackConsent, required: true, "data-lead-field": "consent", className: "mt-0.5 size-5 shrink-0 accent-primary" }), _jsx("span", { children: text.callbackConsent })] }), _jsx(Button, { type: "submit", size: "touch", className: cn("w-full", c?.callbackSubmit), children: text.callbackSubmit })] })] }));
+    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("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 })] })] }));
 }

package/dist/react/LeadCaptureFields.d.ts

@@ -1,5 +1,6 @@
+import type { LeadCaptureText } from "../core/lead-capture-text.js";
 import type { PartClassNames } from "./parts.js";
-export type FieldPart = "field" | "label" | "control" | "hint" | "chips" | "chip";
+export type FieldPart = "field" | "label" | "control" | "hint" | "error" | "chips" | "chip";
 export declare function LocalityField(props: {
     name: string;
     label: string;
@@ -9,19 +10,26 @@ export declare function LocalityField(props: {
     placeholder: string | undefined;
     required: boolean;
     optional: string;
+    requiredText: string;
+    /** The server's refusal of this field, in the page's words. */
+    error: string | null;
     hydrated: boolean;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
+export type PhoneText = Pick<LeadCaptureText, "phoneLabel" | "phoneHint" | "phoneInvalid" | "required" | "phonePlaceholder">;
 /**
- * The number, required and never masked. A value that does not read as a
- * phone gets a hint under it when the visitor leaves the field — a hint, not
- * a refusal: the server keeps what it cannot parse, as typed.
+ * The number, required and never masked, on the rule the server holds it to
+ * (`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.
  */
 export declare function PhoneField(props: {
     name: string;
-    label: string;
-    hint: string;
-    placeholder: string | undefined;
+    /** Named when the label is not the `Field`'s own (the callback's). */
+    id?: string | undefined;
+    text: PhoneText;
+    /** The server's refusal of this field, in the page's words. */
+    error: string | null;
     onSoftError: () => void;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
@@ -31,5 +39,29 @@ export declare function NameField(props: {
     placeholder: string | undefined;
     required: boolean;
     optional: string;
+    requiredText: string;
+    error: string | null;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
+/**
+ * The callback's consent: a native checkbox, so `required` holds without a
+ * script (the kit's checkbox is a button), whose value is the sentence beside
+ * it — the lead keeps what was agreed to, word for word.
+ */
+export declare function ConsentField(props: {
+    sentence: string;
+    requiredText: string;
+    error: string | null;
+    className: string | undefined;
+    classNames: PartClassNames<FieldPart> | undefined;
+}): import("react").JSX.Element;
+/**
+ * A refusal no field shows under itself — a brand's extra, the whole form —
+ * just above the submit. Only there when there is one: an alert is read out
+ * as it is inserted, and an empty box would add the form's gap.
+ */
+export declare function FormMessage(props: {
+    id: string;
+    error: string | null;
+    className: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureFields.js

@@ -1,48 +1,118 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn, Field, FieldDescription, FieldLabel, Input } from "@evinvest/uikit";
-import { useId, useRef, useState } from "react";
-import { isPlausiblePhone } from "../core/phone.js";
+import { Button, cn, Field, FieldDescription, FieldError, FieldLabel, Input } from "@evinvest/uikit";
+import { useEffect, useId, useRef, useState } from "react";
+import { CONSENT_FIELD } from "../core/lead.js";
+import { phoneProblem } from "../core/phone.js";
 import { PHONE_INPUT_PROPS } from "./QuoteFormShell.js";
+import { useValidity } from "./use-validity.js";
 /** More than this and the row is a list to read, not a tap to save typing. */
 const MAX_CHIPS = 6;
 const optionalLabel = (label, optional) => (optional ? `${label} (${optional})` : label);
 /** Digits only: a postcode, which the numeric keypad can type and edit. */
 const POSTCODE = /^\d+$/;
+/**
+ * What a field says under itself: the error that blocks (the server's, or the
+ * browser's refusal in the page's words) as an alert, else a hint. Always in
+ * the DOM: a live region announces only what changes inside it.
+ */
+function FieldMessage(props) {
+    const { id, error, hint, classNames: c } = props;
+    return (
+    // Empty, it gives back the field's gap rather than vanish: a live region
+    // hidden while empty is not one some screen readers listen to.
+    _jsx("div", { "aria-live": "polite", className: "empty:-mt-2", children: error ? (_jsx(FieldError, { id: id, className: cn("text-accent-error", c?.error), children: error })) : hint ? (_jsx(FieldDescription, { id: id, className: cn("text-accent-error", c?.hint), children: hint })) : null }));
+}
+const required = (text, on) => (el) => (on && el.value.trim() === "" ? text : "");
 export function LocalityField(props) {
-    const { name, label, servedLabel, served, required, optional, hydrated, classNames: c } = props;
-    const input = useRef(null);
+    const { name, label, servedLabel, served, optional, hydrated, classNames: c } = props;
+    const messageId = useId();
+    const validity = useValidity(required(props.requiredText, props.required));
+    const error = props.error ?? validity.shown;
     const chips = hydrated && served.length > 1 && served.length <= MAX_CHIPS;
     // A commune's name filled in or a tap away must stay editable: iOS's numeric
     // keypad has no letters, so the keypad follows what the field is offered.
     // A list too long for chips offers nothing — the visitor types a postcode.
     const numeric = served.length > MAX_CHIPS || served.every(s => POSTCODE.test(s));
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, required ? null : optional) }), _jsx(Input, { ref: input, name: name, size: "lg", inputMode: numeric ? "numeric" : "text", autoComplete: "postal-code", placeholder: props.placeholder, enterKeyHint: "next", required: required, defaultValue: served.length === 1 ? served[0] : undefined, "data-lead-field": "locality", className: c?.control }), chips && (_jsx("div", { role: "group", "aria-label": servedLabel, className: cn("flex flex-wrap gap-2", c?.chips), children: served.map(commune => (_jsx(Button, { type: "button", variant: "outline", size: "touch", className: cn("px-3", c?.chip), onClick: () => {
-                        if (input.current)
-                            input.current.value = commune;
-                    }, children: commune }, commune))) }))] }));
+    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, props.required ? null : optional) }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", inputMode: numeric ? "numeric" : "text", autoComplete: "postal-code", placeholder: props.placeholder, enterKeyHint: "next", required: props.required, defaultValue: served.length === 1 ? served[0] : undefined, "data-lead-field": "locality", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: c?.control }), chips && (_jsx("div", { role: "group", "aria-label": servedLabel, className: cn("flex flex-wrap gap-2", c?.chips), children: served.map(commune => (_jsx(Button, { type: "button", variant: "outline", size: "touch", className: cn("px-3", c?.chip), onClick: () => {
+                        const el = validity.ref.current;
+                        if (!el)
+                            return;
+                        el.value = commune;
+                        validity.recheck(el);
+                    }, children: commune }, commune))) })), _jsx(FieldMessage, { id: messageId, error: error, classNames: c })] }));
 }
 /**
- * The number, required and never masked. A value that does not read as a
- * phone gets a hint under it when the visitor leaves the field — a hint, not
- * a refusal: the server keeps what it cannot parse, as typed.
+ * The number, required and never masked, on the rule the server holds it to
+ * (`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.
  */
 export function PhoneField(props) {
-    const { name, label, hint, onSoftError, classNames: c } = props;
-    const hintId = useId();
+    const { name, text, onSoftError, classNames: c } = props;
+    const messageId = useId();
     const [doubtful, setDoubtful] = useState(false);
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: label }), _jsx(Input, { name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: props.placeholder, required: true, "data-lead-field": "phone", "aria-invalid": doubtful || undefined, "aria-describedby": doubtful ? hintId : undefined, onBlur: e => {
+    const validity = useValidity(el => {
+        const problem = phoneProblem(el.value);
+        return problem === "required" ? text.required : problem === "invalid" ? text.phoneInvalid : "";
+    });
+    const error = props.error ?? validity.shown;
+    const marked = Boolean(error) || doubtful;
+    // A hint drawn on the blur a press of the submit causes pushes the button
+    // down between press and release, and the click lands on nothing: the
+    // submit's own check speaks instead.
+    const submitting = useRef(false);
+    useEffect(() => {
+        const form = validity.ref.current?.form;
+        if (!form)
+            return;
+        const press = (event) => {
+            submitting.current = event.target instanceof Element && event.target.closest("[type=submit]") !== null;
+        };
+        form.addEventListener("pointerdown", press, true);
+        return () => form.removeEventListener("pointerdown", press, true);
+    }, [validity.ref]);
+    return (_jsxs(Field, { ...(props.id ? { controlId: props.id } : {}), className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: text.phoneLabel }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: text.phonePlaceholder, required: true, "data-lead-field": "phone", "aria-invalid": marked || undefined, "aria-describedby": marked ? messageId : undefined, onInvalid: validity.onInvalid, onBlur: e => {
+                    if (submitting.current) {
+                        submitting.current = false;
+                        return;
+                    }
                     const value = e.currentTarget.value;
-                    const bad = value.trim() !== "" && !isPlausiblePhone(value);
+                    const bad = value.trim() !== "" && phoneProblem(value) !== null;
                     if (bad && !doubtful)
                         onSoftError();
                     setDoubtful(bad);
-                }, onInput: e => {
-                    if (doubtful && isPlausiblePhone(e.currentTarget.value))
+                }, onChange: e => {
+                    validity.onChange(e);
+                    if (doubtful && phoneProblem(e.currentTarget.value) === null)
                         setDoubtful(false);
-                }, className: c?.control }), doubtful && (_jsx(FieldDescription, { id: hintId, className: cn("text-accent-error", c?.hint), children: hint }))] }));
+                }, className: c?.control }), _jsx(FieldMessage, { id: messageId, error: error, hint: doubtful ? text.phoneHint : null, classNames: c })] }));
 }
 export function NameField(props) {
-    const { name, label, placeholder, required, optional, classNames: c } = props;
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, required ? null : optional) }), _jsx(Input, { name: name, size: "lg", autoComplete: "name", enterKeyHint: "next", placeholder: placeholder, required: required, "data-lead-field": "name", className: c?.control })] }));
+    const { name, label, placeholder, optional, classNames: c } = props;
+    const messageId = useId();
+    const validity = useValidity(required(props.requiredText, props.required));
+    const error = props.error ?? validity.shown;
+    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, props.required ? null : optional) }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", autoComplete: "name", enterKeyHint: "next", placeholder: placeholder, required: props.required, "data-lead-field": "name", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: c?.control }), _jsx(FieldMessage, { id: messageId, error: error, classNames: c })] }));
+}
+/**
+ * The callback's consent: a native checkbox, so `required` holds without a
+ * script (the kit's checkbox is a button), whose value is the sentence beside
+ * it — the lead keeps what was agreed to, word for word.
+ */
+export function ConsentField(props) {
+    const messageId = useId();
+    const validity = useValidity(el => (el.checked ? "" : props.requiredText));
+    const error = props.error ?? validity.shown;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: cn("flex min-h-11 items-start gap-3 text-sm text-ink", props.className), children: [_jsx("input", { ref: validity.ref, type: "checkbox", name: CONSENT_FIELD, value: props.sentence, required: true, "data-lead-field": "consent", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: "mt-0.5 size-5 shrink-0 accent-primary" }), _jsx("span", { children: props.sentence })] }), _jsx(FieldMessage, { id: messageId, error: error, classNames: props.classNames })] }));
+}
+/**
+ * A refusal no field shows under itself — a brand's extra, the whole form —
+ * just above the submit. Only there when there is one: an alert is read out
+ * as it is inserted, and an empty box would add the form's gap.
+ */
+export function FormMessage(props) {
+    if (!props.error)
+        return null;
+    return (_jsx(FieldError, { id: props.id, tabIndex: -1, className: cn("text-accent-error outline-none", props.className), children: props.error }));
 }

package/dist/react/LeadCaptureNeed.d.ts

@@ -12,7 +12,12 @@ export interface NeedFieldProps {
     hydrated: boolean;
     label: string;
     changeLabel: string;
+    /** Blocks the submit while no tile is chosen, in the page's words. */
+    requiredText: string;
+    /** The visitor's answer: a tap, Enter or Space — `qualify-first` moves on. */
     onPick: (need: string) => void;
+    /** An arrow key moved the choice: chosen, but the visitor is still choosing. */
+    onSelect: (need: string) => void;
     onEdit: () => void;
     classNames?: PartClassNames<NeedPart> | undefined;
 }

package/dist/react/LeadCaptureNeed.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, cn, Field, FieldLabel } from "@evinvest/uikit";
+import { useEffect, useRef } from "react";
 import { FormSelect } from "./FormSelect.js";
 /**
  * What the job is. A need already known — from the page, `?need=` or the card
@@ -10,7 +11,16 @@ import { FormSelect } from "./FormSelect.js";
  * per need: one tap answers it.
  */
 export function NeedField(props) {
-    const { layout, name, needs, need, editing, hydrated, label, changeLabel, onPick, onEdit, classNames: c } = props;
+    const { layout, name, needs, need, editing, hydrated, label, changeLabel, onPick, onSelect, onEdit, classNames: c } = props;
+    const group = useRef(null);
+    // A radio group answers arrows with a click (`detail` 0) and a change, the
+    // same events a tap makes: what moves on is told apart by its key or pointer.
+    const pointer = useRef(false);
+    const answered = useRef(false);
+    useEffect(() => {
+        for (const radio of group.current?.querySelectorAll("input[type=radio]") ?? [])
+            radio.setCustomValidity(need === undefined ? props.requiredText : "");
+    });
     const chosen = needs.find(n => n.value === need);
     if (chosen && !editing) {
         return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-ink", c?.summary), children: [_jsx("input", { type: "hidden", name: name, value: chosen.value }), _jsx("span", { className: "text-sm text-ink-soft", children: label }), _jsx("span", { className: "font-medium", children: chosen.label }), hydrated && (_jsx(Button, { type: "button", variant: "link", size: "touch", className: "px-1", onClick: onEdit, children: changeLabel }))] }));
@@ -18,5 +28,31 @@ export function NeedField(props) {
     if (layout === "single") {
         return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: label }), _jsx(FormSelect, { name: name, size: "lg", defaultValue: need ?? needs[0]?.value, options: needs, onValueChange: onPick, classNames: c?.control ? { trigger: c.control } : undefined })] }));
     }
-    return (_jsxs("fieldset", { className: cn("flex flex-col gap-2", c?.field), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.label), children: label }), _jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2", c?.needs), children: needs.map(n => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: name, value: n.value, required: true, checked: need === n.value, onChange: () => onPick(n.value), className: "peer absolute inset-0 opacity-0", "data-need-option": "", "data-lead-field": "need" }), _jsx("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input px-4 py-3 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.need), children: n.label })] }, n.value))) })] }));
+    return (_jsxs("fieldset", { ref: group, className: cn("flex flex-col gap-2", c?.field), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.label), children: label }), _jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2", c?.needs), children: needs.map(n => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: name, value: n.value, required: true, checked: need === n.value, onPointerDown: () => {
+                                pointer.current = true;
+                            }, onKeyDown: (e) => {
+                                pointer.current = false;
+                                answered.current = false;
+                                if (e.key !== "Enter")
+                                    return;
+                                // From a radio, Enter would submit the form half filled.
+                                e.preventDefault();
+                                answered.current = true;
+                                onPick(n.value);
+                            }, onKeyUp: (e) => {
+                                if (e.key !== " ")
+                                    return;
+                                answered.current = true;
+                                onPick(n.value);
+                            }, onClick: (e) => {
+                                if (e.detail === 0 && !pointer.current)
+                                    return;
+                                pointer.current = false;
+                                answered.current = true;
+                                onPick(n.value);
+                            }, onChange: () => {
+                                if (!answered.current)
+                                    onSelect(n.value);
+                                answered.current = false;
+                            }, className: "peer absolute inset-0 opacity-0", "data-need-option": "", "data-lead-field": "need" }), _jsx("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input px-4 py-3 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.need), children: n.label })] }, n.value))) })] }));
 }

package/dist/react/LeadCaptureSubmit.d.ts

@@ -0,0 +1,16 @@
+import type { LeadCaptureText } from "../core/lead-capture-text.js";
+import type { SendFailure } from "./use-lead-submit.js";
+/** The submit, busy while the script posts: disabled, `aria-busy`, and saying so. */
+export declare function SubmitButton(props: {
+    busy: boolean;
+    label: string;
+    sending: string;
+    className: string | undefined;
+}): import("react").JSX.Element;
+/** Why the post got no answer, and the way to send the same lead again. */
+export declare function FailureMessage(props: {
+    failure: SendFailure | null;
+    text: Pick<LeadCaptureText, "networkError" | "timeoutError" | "retry">;
+    onRetry: () => void;
+    className: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureSubmit.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, FieldError } from "@evinvest/uikit";
+/** The submit, busy while the script posts: disabled, `aria-busy`, and saying so. */
+export function SubmitButton(props) {
+    return (_jsx(Button, { type: "submit", size: "touch", disabled: props.busy, "aria-busy": props.busy || undefined, className: cn("w-full", props.className), children: props.busy ? props.sending : props.label }));
+}
+/** Why the post got no answer, and the way to send the same lead again. */
+export function FailureMessage(props) {
+    const { failure, text } = props;
+    if (!failure)
+        return null;
+    return (_jsxs(FieldError, { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-accent-error", props.className), children: [_jsx("span", { children: failure === "timeout" ? text.timeoutError : text.networkError }), _jsx(Button, { type: "button", variant: "link", size: "touch", className: "px-1", onClick: props.onRetry, children: text.retry })] }));
+}