@evinvest/kitstart 0.6.0 → 0.8.0

package/README.md

@@ -45,7 +45,7 @@ brand's `flake.nix` is its own config plus one call — `template/flake.nix` is
 the whole of one:
 
 ```nix
-inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.6.0"; # the version in package-lock.json
+inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.8.0"; # the version in package-lock.json
 inputs.ev.inputs.v_flakes.follows = "v_flakes";
 
 landing = ev.lib.mkLanding {
@@ -226,10 +226,13 @@ it is the plain POST to `/quote` it always was.
 | `prefer` | a channel moved first when available (a `default_channel` arm) |
 | `experiment` | `{ name, variant }`, slugs: on every event and posted with the form |
 | `timeZone` | `Europe/Paris` by default |
-| `formId`, `id` | `quote` · `quote`; the callback is `<id>-callback` (its form `<id>-callback-form`) |
-| `text` | `LeadCaptureText`: `LEAD_CAPTURE_TEXT.fr` / `.en`, plain strings (`{need}`, `{day}`, `{time}` filled in) |
+| `formId`, `id` | `quote` · `quote`: the id is the card's (root), so `#quote` scrolls to the whole card, head included; the form is `<id>-form`, the callback `<id>-callback` (its form `<id>-callback-form`) |
+| `text` | `LeadCaptureText`: `LEAD_CAPTURE_TEXT.fr` / `.en`, plain strings (`{need}`, `{day}`, `{time}` filled in); optional `localityPlaceholder`, `phonePlaceholder`, `namePlaceholder` (none by default) |
+| `labels` | `visible` (default) · `hidden`: every field's label `sr-only` — still the field's accessible name — for a design that draws placeholders |
+| `callbackOpen` | whether the callback starts open; by default only when it leads (the place is closed). `#<id>-callback` opens it either way |
+| `done` | the card after a lead is taken — a node, or `(sent: LeadSent) => node` (`{ channel, phone, name }`). With it a script posts the form itself and shows this in place on the thanks page's 303; any other answer, or no network, submits the form for real; without a script nothing changes (303 → `/thanks`). Without it, every submit goes to `/thanks` |
 | `head`, `trust` | the brand's heading instead of the title; a slot beside the submit |
-| `className` · `classNames` | the root · its parts (`form`, `field`, `label`, `control`, `submit`, `need`, `channel`, `primary`, `callback`…) |
+| `className` · `classNames` | the root · its parts: `root`, `head`, `title`, `lede`, `form`, `contact`, `field`, `label`, `control` (every input, the need's select in both states, the callback's phone), `hint`, `chips`, `chip`, `needs`, `need`, `summary`, `submit`, `trust`, `privacy`, `opening`, `others`, `channel`, `primary`, `callback`, `callbackSummary`, `callbackForm`, `callbackLede`, `callbackSubmit`, `consent`, `done` |
 
 - **Taps.** A need the page knows is not asked again, and a place serving one
   commune fills it: focus the phone, type, send — two taps. `qualify-first`
@@ -255,6 +258,15 @@ it is the plain POST to `/quote` it always was.
   (`Lead.consent`). Then the lead is held to `lead.validateCallback` (a
   readable number, by default), not to the form's rule. The consent goes into
   no event; a webhook body built by the brand should leave `lead.consent` out.
+- **Locality.** A postcode field (`autoComplete="postal-code"`). A storefront
+  with no named zone fills in its own postcode; a named zone fills in its one
+  commune or offers its few as chips, by name — and then the field takes
+  letters (`inputMode="text"`), since iOS's numeric keypad could not edit a
+  name. Otherwise it is the numeric keypad.
+- **Callback, closed.** Its summary is a block (`flex`, not the button's
+  `inline-flex`) with `leading-6` after the brand's `channel` /
+  `callbackSummary` classes unless they set a line height of their own, so a
+  brand's type size cannot leave it on a half pixel.
 - **Phone.** `type="tel"`, required, never masked. A number that does not read
   as one gets a hint when the field is left; the server keeps it. With
   `lead.mobileFormat: "e164"` a number it can read is stored as

package/dist/core/lead-capture-text.d.ts

@@ -21,6 +21,14 @@ export interface LeadCaptureText {
     /** The soft check under a number that does not read as one; it never blocks. */
     phoneHint: string;
     nameLabel: string;
+    /**
+     * Shown in the empty field. None by default: a placeholder is not a label —
+     * the label stays (visually hidden under `labels="hidden"`) for a brand
+     * whose design draws placeholders instead.
+     */
+    localityPlaceholder?: string | undefined;
+    phonePlaceholder?: string | undefined;
+    namePlaceholder?: string | undefined;
     /** After an optional field's label. */
     optional: string;
     submit: string;

package/dist/react/LeadCapture.d.ts

@@ -8,7 +8,8 @@ import { type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
 import { type FieldPart } from "./LeadCaptureFields.js";
 import { type LeadCaptureLayout } from "./LeadCaptureNeed.js";
 import type { PartClassNames } from "./parts.js";
-export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "needs" | "need" | "summary" | FieldPart | ChannelPart;
+import { type LeadSent } from "./use-lead-submit.js";
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -42,9 +43,27 @@ export interface LeadCaptureProps {
     experiment?: Experiment | undefined;
     timeZone?: string | undefined;
     formId?: string | undefined;
-    /** The form's id, the anchor a call bar links to (`#quote`); the callback's is `<id>-callback`. */
+    /**
+     * 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?: string | undefined;
     text: LeadCaptureText;
+    /**
+     * `hidden`: every field's label for assistive technology only (`sr-only`) —
+     * for a design that draws placeholders instead (`text.*Placeholder`).
+     */
+    labels?: "visible" | "hidden" | undefined;
+    /** 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.
+     */
+    done?: ReactNode | ((sent: LeadSent) => ReactNode);
     /** Replaces the title and lede — the brand's own heading. */
     head?: ReactNode;
     /** Beside the submit: a guarantee, a live rating. */

package/dist/react/LeadCapture.js

@@ -1,16 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, cn } from "@evinvest/uikit";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { resolveChannels } from "../core/channels.js";
 import { fillText, openingText } from "../core/lead-capture-format.js";
-import { servedLocalities } from "../core/place/types.js";
+import { servedLocalities, storefrontOf } from "../core/place/types.js";
 import { CallbackForm, ChannelLink, ExperimentFields } from "./LeadCaptureChannels.js";
 import { 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 { useLeadEvents } from "./use-lead-events.js";
+import { useLeadSubmit } from "./use-lead-submit.js";
+/**
+ * What the locality field is offered. A storefront serving its own town knows
+ * that town's postcode — what the field asks — so it offers that, not the
+ * town's name; a named zone offers its communes, by name.
+ */
+function localitySuggestions(place) {
+    const postcode = place.serviceArea === null ? storefrontOf(place)?.address.postalCode : undefined;
+    return postcode ? [postcode] : servedLocalities(place);
+}
 /**
  * The lead form every brand shares: the need (asked once, or not at all when
  * the page knows it), the postcode, the phone, and the other ways to reach the
@@ -18,14 +28,19 @@ import { useLeadEvents } from "./use-lead-events.js";
  * script it is the plain POST to `/quote` it always was.
  */
 export function LeadCapture(props) {
-    const { place, contact, locale, renderedAt, wire, needs, layout = "single", text, classNames: c } = props;
+    const { place, contact, locale, renderedAt, wire, needs, layout = "single", text } = props;
     const { formId = "quote", id = "quote", experiment } = props;
+    const c = props.labels === "hidden" ? { ...props.classNames, label: cn("sr-only", props.classNames?.label) } : props.classNames;
     const root = useRef(null);
     const hydrated = useHydrated();
     const [editing, setEditing] = useState(false);
     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 doneRef = useRef(null);
+    // The form the focus was in is gone: the news takes it, and is read out.
+    useEffect(() => doneRef.current?.focus(), [sent]);
     const resolved = resolveChannels({ ...contact, hours: place.hours }, { now: new Date(useNow(renderedAt)), timeZone: props.timeZone, prefer: props.prefer });
     const opening = openingText(resolved.nextOpening, text, locale);
     const needLabel = needs.find(n => n.value === need)?.label;
@@ -42,19 +57,24 @@ export function LeadCapture(props) {
         // the first empty field — the postcode unless filled, else the phone —
         // takes focus inside the tap: iOS opens the keyboard only for a focus a
         // gesture made, and a re-render is too late for it.
-        const fields = root.current?.querySelectorAll(`#${CSS.escape(id)} [data-lead-field="locality"], #${CSS.escape(id)} [data-lead-field="phone"]`);
+        const form = `#${CSS.escape(`${id}-form`)}`;
+        const fields = root.current?.querySelectorAll(`${form} [data-lead-field="locality"], ${form} [data-lead-field="phone"]`);
         [...(fields ?? [])].find(f => f.value === "")?.focus();
         setNeed(value);
         setEditing(false);
         events.step("contact");
     };
-    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, open: 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, classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
+    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, 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));
     // `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);
     const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
-    return (_jsxs("div", { ref: root, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant, 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, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, 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: () => {
+    const rootProps = { id, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant };
+    if (sent && props.done !== undefined) {
+        return (_jsx("div", { ref: root, ...rootProps, children: _jsx("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("outline-none", c?.done), children: typeof props.done === "function" ? props.done(sent) : props.done }) }));
+    }
+    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: () => {
                             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: servedLocalities(place), required: props.locality !== "optional", optional: text.optional, hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, label: text.phoneLabel, hint: text.phoneHint, onSoftError: () => events.fieldError("phone"), classNames: c }), props.name && _jsx(NameField, { name: props.name.field, label: text.nameLabel, 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, 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)] }))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,7 +1,13 @@
 import { type CaptureChannel } from "../core/channels.js";
 import type { LeadCaptureText } from "../core/lead-capture-text.js";
-import type { PartClassNames } from "./parts.js";
-export type ChannelPart = "channel" | "primary" | "callback" | "consent";
+import type { FormEventHandler } from "react";
+import type { FieldPart } from "./LeadCaptureFields.js";
+import { type PartClassNames } from "./parts.js";
+/**
+ * `channel` and `primary` dress every way out, the callback's summary
+ * included; the `callback*` parts are the callback's own, after them.
+ */
+export type ChannelPart = "channel" | "primary" | "callback" | "callbackSummary" | "callbackForm" | "callbackLede" | "callbackSubmit" | "consent";
 export interface Experiment {
     name: string;
     variant: string;
@@ -33,10 +39,13 @@ export declare function ChannelLink(props: {
  * same `/quote` with `channel=callback` — a lead like any other, without a
  * script. A `<details>` so it opens without one too; open from the start when
  * it is the channel that leads (the place is closed), or when the page is
- * opened at its id (`#quote-callback`, the call bar's link).
+ * opened at its id (`#quote-callback`, the call bar's link). A brand may
+ * choose `open` itself; it is still the leading channel's face.
  */
 export declare function CallbackForm(props: {
     id: string;
+    /** The channel that leads: the primary face. */
+    primary: boolean;
     open: boolean;
     formId: string;
     placeSlug: string | null;
@@ -50,5 +59,6 @@ export declare function CallbackForm(props: {
     opening: string | null;
     text: LeadCaptureText;
     experiment: Experiment | undefined;
-    classNames?: PartClassNames<ChannelPart> | undefined;
+    onSubmit: FormEventHandler<HTMLFormElement> | undefined;
+    classNames?: PartClassNames<ChannelPart | FieldPart> | undefined;
 }): import("react").JSX.Element;

package/dist/react/LeadCaptureChannels.js

@@ -3,7 +3,14 @@ import { Button, buttonVariants, cn, FieldLabel, Input } 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 { partWithLeading } from "./parts.js";
 import { PHONE_INPUT_PROPS, 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
+ * 52.5 px button that puts every band below it off the pixel grid.
+ */
+const CHANNEL_LEADING = "leading-6";
 /** The site's assignment, posted with the form so the submit counts in its arm. */
 export function ExperimentFields({ experiment }) {
     if (!experiment)
@@ -22,16 +29,17 @@ export function ChannelLink(props) {
     const href = channelHref(channel, contact, message);
     if (!href)
         return null;
-    return (_jsx(Button, { href: href, variant: primary ? "primary" : "outline", size: "touch", className: cn(primary ? "w-full" : "flex-1", c?.channel, primary && c?.primary), "data-intent": channel === "sms" ? "sms" : undefined, "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: text[LABEL[channel]] }));
+    return (_jsx(Button, { href: href, variant: primary ? "primary" : "outline", size: "touch", className: partWithLeading(primary ? "w-full" : "flex-1", CHANNEL_LEADING, cn(c?.channel, primary && c?.primary) || undefined), "data-intent": channel === "sms" ? "sms" : undefined, "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: text[LABEL[channel]] }));
 }
 /**
  * "Call me back": the form cut to a phone number and a consent, posted to the
  * same `/quote` with `channel=callback` — a lead like any other, without a
  * script. A `<details>` so it opens without one too; open from the start when
  * it is the channel that leads (the place is closed), or when the page is
- * opened at its id (`#quote-callback`, the call bar's link).
+ * opened at its id (`#quote-callback`, the call bar's link). A brand may
+ * choose `open` itself; it is still the leading channel's face.
  */
 export function CallbackForm(props) {
-    const { id, 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: buttonVariants({ variant: open ? "primary" : "outline", size: "touch", className: cn("w-full list-none [&::-webkit-details-marker]:hidden", c?.channel, open && c?.primary) }), children: text.callback }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, className: "mt-4 gap-4", 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: "text-ink-soft", children: opening ?? text.callbackLede }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(FieldLabel, { htmlFor: `${id}-phone`, children: text.phoneLabel }), _jsx(Input, { id: `${id}-phone`, name: mobileName, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", required: true, "data-lead-field": "phone" })] }), _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: "w-full", children: text.callbackSubmit })] })] }));
+    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 })] })] }));
 }

package/dist/react/LeadCaptureFields.d.ts

@@ -4,8 +4,9 @@ export declare function LocalityField(props: {
     name: string;
     label: string;
     servedLabel: string;
-    /** The communes the place names: one is filled in, a few are a tap each. */
+    /** What the place knows of where it goes — a postcode or communes: one is filled in, a few are a tap each. */
     served: readonly string[];
+    placeholder: string | undefined;
     required: boolean;
     optional: string;
     hydrated: boolean;
@@ -20,12 +21,14 @@ export declare function PhoneField(props: {
     name: string;
     label: string;
     hint: string;
+    placeholder: string | undefined;
     onSoftError: () => void;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
 export declare function NameField(props: {
     name: string;
     label: string;
+    placeholder: string | undefined;
     required: boolean;
     optional: string;
     classNames?: PartClassNames<FieldPart> | undefined;

package/dist/react/LeadCaptureFields.js

@@ -7,11 +7,17 @@ import { PHONE_INPUT_PROPS } from "./QuoteFormShell.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+$/;
 export function LocalityField(props) {
     const { name, label, servedLabel, served, required, optional, hydrated, classNames: c } = props;
     const input = useRef(null);
     const chips = hydrated && served.length > 1 && served.length <= MAX_CHIPS;
-    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", autoComplete: "postal-code", 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: () => {
+    // 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))) }))] }));
@@ -25,7 +31,7 @@ export function PhoneField(props) {
     const { name, label, hint, onSoftError, classNames: c } = props;
     const hintId = 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", required: true, "data-lead-field": "phone", "aria-invalid": doubtful || undefined, "aria-describedby": doubtful ? hintId : undefined, onBlur: e => {
+    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 value = e.currentTarget.value;
                     const bad = value.trim() !== "" && !isPlausiblePhone(value);
                     if (bad && !doubtful)
@@ -37,6 +43,6 @@ export function PhoneField(props) {
                 }, className: c?.control }), doubtful && (_jsx(FieldDescription, { id: hintId, className: cn("text-accent-error", c?.hint), children: hint }))] }));
 }
 export function NameField(props) {
-    const { name, label, 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", required: required, "data-lead-field": "name", className: c?.control })] }));
+    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 })] }));
 }

package/dist/react/LeadCaptureNeed.d.ts

@@ -1,7 +1,7 @@
 import { type FormSelectOption } from "./FormSelect.js";
 import type { PartClassNames } from "./parts.js";
 export type LeadCaptureLayout = "single" | "qualify-first";
-type NeedPart = "field" | "label" | "need" | "needs" | "summary";
+type NeedPart = "field" | "label" | "control" | "need" | "needs" | "summary";
 export interface NeedFieldProps {
     layout: LeadCaptureLayout;
     name: string;

package/dist/react/LeadCaptureNeed.js

@@ -16,7 +16,7 @@ export function NeedField(props) {
         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 }))] }));
     }
     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 })] }));
+        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))) })] }));
 }

package/dist/react/QuoteFormShell.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { FormEventHandler, ReactNode } from "react";
 /**
  * The quote form's frame: a plain `<form method="post" action="/quote">`
  * answered with a 303, so it works before any JavaScript arrives — which is
@@ -23,6 +23,8 @@ export interface QuoteFormShellProps {
     action?: string;
     id?: string;
     className?: string;
+    /** A script's own submit (an in-place success); the 303 stays the path without one. */
+    onSubmit?: FormEventHandler<HTMLFormElement> | undefined;
     children: ReactNode;
 }
 /** The mobile field's attributes: the numeric keypad and the phone's autofill. */

package/dist/react/QuoteFormShell.js

@@ -5,6 +5,6 @@ import { HONEYPOT_FIELD, RENDERED_AT_FIELD } from "../core/antispam.js";
 /** The mobile field's attributes: the numeric keypad and the phone's autofill. */
 export const PHONE_INPUT_PROPS = { type: "tel", inputMode: "tel", autoComplete: "tel" };
 export function QuoteFormShell(props) {
-    const { placeSlug, locale, renderedAt, honeypotLabel, formId = "quote", action = "/quote", id = "quote", className, children } = props;
-    return (_jsxs("form", { id: id, method: "post", action: action, className: cn("relative flex w-full flex-col gap-5", className), children: [placeSlug && _jsx("input", { type: "hidden", name: LOCATION_FIELD, value: placeSlug }), _jsx("input", { type: "hidden", name: LOCALE_FIELD, value: locale }), _jsx("input", { type: "hidden", name: FORM_ID_FIELD, value: formId }), _jsx("input", { type: "hidden", name: RENDERED_AT_FIELD, value: String(renderedAt) }), children, _jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }, children: _jsxs("label", { children: [honeypotLabel, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }) })] }));
+    const { placeSlug, locale, renderedAt, honeypotLabel, formId = "quote", action = "/quote", id = "quote", className, onSubmit, children } = props;
+    return (_jsxs("form", { id: id, method: "post", action: action, onSubmit: onSubmit, className: cn("relative flex w-full flex-col gap-5", className), children: [placeSlug && _jsx("input", { type: "hidden", name: LOCATION_FIELD, value: placeSlug }), _jsx("input", { type: "hidden", name: LOCALE_FIELD, value: locale }), _jsx("input", { type: "hidden", name: FORM_ID_FIELD, value: formId }), _jsx("input", { type: "hidden", name: RENDERED_AT_FIELD, value: String(renderedAt) }), children, _jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }, children: _jsxs("label", { children: [honeypotLabel, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }) })] }));
 }

package/dist/react/index.d.ts

@@ -18,6 +18,7 @@ export { Faq, type FaqPart, type FaqProps } from "./Faq.js";
 export { FormSelect, type FormSelectOption, type FormSelectPart, type FormSelectProps } from "./FormSelect.js";
 export { LangSwitch, withLang, type LangSwitchProps } from "./LangSwitch.js";
 export { LeadCapture, type LeadCapturePart, type LeadCaptureProps } from "./LeadCapture.js";
+export type { LeadSent } from "./use-lead-submit.js";
 export type { LeadCaptureLayout } from "./LeadCaptureNeed.js";
 export { MapFacade, type MapFacadePart, type MapFacadeProps } from "./MapFacade.js";
 export { PlaceDirectory, type PlaceDirectoryPart, type PlaceDirectoryProps } from "./PlaceDirectory.js";

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

@@ -0,0 +1,21 @@
+import { type FormEventHandler } from "react";
+/** What the visitor just sent, for a brand's in-card success ("we call 06 … back"). */
+export interface LeadSent {
+    channel: "form" | "callback";
+    /** As typed. */
+    phone: string;
+    /** The name field's value, when the form has one and it was filled. */
+    name: string | null;
+}
+/**
+ * The lead posted by a script, so the card can say "done" in place. The body
+ * and the endpoint are the form's own, and the server answers it as it answers
+ * the plain post: a 303 to the thanks page means the lead was taken. Anything
+ * else — a refusal, the store's 500, no network — submits the form for real,
+ * so the server's own page says what went wrong. Off (`undefined` handler)
+ * when the brand gave no in-card success: the 303 to `/thanks` stays the path.
+ */
+export declare function useLeadSubmit(enabled: boolean, fields: {
+    mobile: string;
+    name: string | undefined;
+}): [LeadSent | null, FormEventHandler<HTMLFormElement> | undefined];

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

@@ -0,0 +1,42 @@
+"use client";
+import { useRef, useState } from "react";
+import { CHANNEL_FIELD } from "../core/lead.js";
+import { THANKS } from "../core/routing.js";
+/**
+ * The lead posted by a script, so the card can say "done" in place. The body
+ * and the endpoint are the form's own, and the server answers it as it answers
+ * the plain post: a 303 to the thanks page means the lead was taken. Anything
+ * else — a refusal, the store's 500, no network — submits the form for real,
+ * so the server's own page says what went wrong. Off (`undefined` handler)
+ * when the brand gave no in-card success: the 303 to `/thanks` stays the path.
+ */
+export function useLeadSubmit(enabled, fields) {
+    const [sent, setSent] = useState(null);
+    const pending = useRef(false);
+    if (!enabled)
+        return [sent, undefined];
+    const submit = (event) => {
+        event.preventDefault();
+        if (pending.current)
+            return;
+        pending.current = true;
+        const form = event.currentTarget;
+        const data = new FormData(form);
+        const body = new URLSearchParams();
+        for (const [key, value] of data)
+            if (typeof value === "string")
+                body.append(key, value);
+        const read = (field) => {
+            const value = field === undefined ? null : data.get(field);
+            return typeof value === "string" ? value.trim() : "";
+        };
+        const lead = { channel: read(CHANNEL_FIELD) === "callback" ? "callback" : "form", phone: read(fields.mobile), name: read(fields.name) || null };
+        // `form.submit()` neither validates again nor comes back here.
+        const fallBack = () => {
+            pending.current = false;
+            form.submit();
+        };
+        fetch(form.action, { method: "POST", body }).then(res => (res.ok && res.redirected && new URL(res.url).pathname.endsWith(THANKS) ? setSent(lead) : fallBack()), fallBack);
+    };
+    return [sent, submit];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Landing-site machinery for local-service brands: a site composition root, the Place/Presence/ServiceArea model with a publication gate, host/locale routing, schema.org and SEO builders, the lead funnel with its antispam, and analytics events. Pure core at '.', more subpaths per runtime.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/template/flake.nix

@@ -3,7 +3,7 @@
     v_flakes.url = "github:valeratrades/v_flakes?ref=v1.6";
     # The lib flake at the tag of the @evinvest/kitstart version in
     # package-lock.json — mkLanding refuses a mismatch.
-    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.6.0";
+    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.8.0";
     ev.inputs.v_flakes.follows = "v_flakes";
   };
 

package/template/package.json

@@ -20,9 +20,9 @@
   "dependencies": {
     "@evinvest/analytics": "^0.3.0",
     "@evinvest/i18n": "^0.9.0",
-    "@evinvest/kitstart": "^0.6.0",
+    "@evinvest/kitstart": "^0.8.0",
     "@evinvest/marketing": "^0.3.0",
-    "@evinvest/uikit": "^0.24.0",
+    "@evinvest/uikit": "^0.25.0",
     "next": "16.3.6",
     "react": "19.3.0",
     "react-dom": "19.3.0",

package/template/tests/e2e/quote-form.spec.ts

@@ -7,7 +7,8 @@ import { expect, test, type Locator, type Page } from "@playwright/test";
 const SUBJECT = "Prestation";
 
 async function fillAndSend(page: Page) {
-  const form = page.locator("#quote");
+  // `#quote` is the card, the callback's phone in it too: the form is its own.
+  const form = page.locator("#quote-form");
   await form.getByLabel("Code postal").fill("75011");
   await form.getByLabel("Téléphone").fill("0612345678");
   await form.getByRole("button", { name: "Recevoir le prix" }).click();
@@ -64,7 +65,7 @@ test.describe("with JavaScript", () => {
     await expect(trigger).toBeFocused();
     await expect(trigger).toHaveText("Grand ménage");
     await page.keyboard.press("Tab");
-    await expect(page.locator("#quote").getByLabel("Code postal")).toBeFocused();
+    await expect(page.locator("#quote-form").getByLabel("Code postal")).toBeFocused();
   });
 });
 
@@ -151,7 +152,7 @@ test.describe("the channel order", () => {
   const callbackFirst = (page: Page) =>
     page.evaluate(() => {
       const callback = document.getElementById("quote-callback");
-      const form = document.getElementById("quote");
+      const form = document.getElementById("quote-form");
       if (!callback || !form) throw new Error("missing the form or the callback");
       return { first: Boolean(callback.compareDocumentPosition(form) & Node.DOCUMENT_POSITION_FOLLOWING), open: callback.hasAttribute("open") };
     });
@@ -181,3 +182,29 @@ test("a place with no number offers no call, text or WhatsApp anywhere", async (
   await expect(page.locator('a[href^="tel:"], a[href^="sms:"], a[href*="wa.me"]')).toHaveCount(0);
   await expect(page.locator("#callbar").getByText("☎")).toHaveCount(0);
 });
+
+test("#quote is the whole card: the call bar's link lands on its head", async ({ page }) => {
+  await page.goto("/fr#quote");
+  const card = page.locator("#quote");
+  await expect(card.getByText("Recevoir un prix", { exact: true })).toBeInViewport();
+  await expect(card.locator("form#quote-form")).toHaveCount(1);
+  await expect(card.locator("details#quote-callback")).toHaveCount(1);
+});
+
+// `LeadCapture`'s `done` posts the form itself and trusts one answer: the
+// thanks page, reached through the 303. Held here against the real route.
+test("a scripted post of the form lands on the thanks page", async ({ page }) => {
+  await page.goto("/fr");
+  await expect(page.locator("#quote select")).toHaveCount(0);
+  const form = page.locator("#quote-form");
+  await form.getByLabel("Code postal").fill("75011");
+  await form.getByLabel("Téléphone").fill("0612345678");
+  const answer = await form.evaluate(async el => {
+    if (!(el instanceof HTMLFormElement)) throw new Error("not a form");
+    const body = new URLSearchParams();
+    for (const [key, value] of new FormData(el)) if (typeof value === "string") body.append(key, value);
+    const res = await fetch(el.action, { method: "POST", body });
+    return { ok: res.ok, redirected: res.redirected, path: new URL(res.url).pathname };
+  });
+  expect(answer).toEqual({ ok: true, redirected: true, path: "/fr/thanks" });
+});