@wildo-ai/saas-website 1.1.4 → 1.1.6

package/src/core/__tests__/website-consent.test.tsx

@@ -0,0 +1,312 @@
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  ANONYMOUS_CONSENT_RECORD_METHOD,
+  ANONYMOUS_CONSENT_RECORD_PATH,
+  AvailableLanguage,
+  BUILTIN_PROVIDER_CAPABILITY,
+  ConsentPurpose,
+  defineProviderMetadata,
+  ProviderOriginKind,
+  ProviderTier,
+  WEBSITE_VISITOR_CONSENT_STORAGE_KEY,
+} from '@wildo-ai/saas-models/public-runtime';
+
+import { WebsitePageLayout } from '../layouts/WebsitePageLayout';
+import { WebsiteRuntimeContextProvider, type WebsiteRuntimeContextValue } from '../contexts/WebsiteRuntimeContext';
+import { WebsiteConsentGate } from '../consent/WebsiteConsentGate';
+import { readWebsiteVisitorConsent, writeWebsiteVisitorConsent } from '../consent/website-consent-storage';
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import {
+  WEBSITE_CONSENT_LABEL_KEYS,
+  WebsiteConsentLabelSlot,
+  websiteConsentLabelKey,
+  websiteConsentPurposeDescriptionLabelKey,
+  websiteConsentPurposeLabelKey,
+} from '../../schemas/label-keys/website-consent-label-keys.schemas';
+import type { FrontendWebsiteProviderRegistry } from '../external-providers/frontend-provider-registry.website';
+
+/**
+ * The visitor tier of the consent gate (#534), through the real layout.
+ *
+ * What this pins is the property the whole feature exists for: an analytics SDK the site declares does
+ * NOT start until the visitor grants ANALYTICS, starts when they do, and is STOPPED when they withdraw —
+ * while a provider resting on no consent (error monitoring) starts regardless and is never restarted.
+ */
+
+const SKIP_KEY = WebsiteLabelKeySchema.parse('website.chrome.layout.skip-to-main-content');
+// Every consent key resolves to itself, so buttons are found by the key they render.
+const LABEL_PACK = Object.fromEntries([SKIP_KEY, ...WEBSITE_CONSENT_LABEL_KEYS].map((key) => [key as unknown as string, key as unknown as string]));
+const label = (slot: WebsiteConsentLabelSlot): string => websiteConsentLabelKey(slot) as unknown as string;
+
+function registryOf(modules: Record<string, unknown>[]): FrontendWebsiteProviderRegistry {
+  const map = new Map(modules.map((module) => [(module.metadata as { ref: string }).ref, module]));
+  return {
+    modules: map,
+    getProviderByRef: (ref: string) => map.get(ref),
+    getProvidersByProviderCapability: () => [],
+    findProviderByProviderCapability: () => undefined,
+  } as unknown as FrontendWebsiteProviderRegistry;
+}
+
+function provider(ref: string, capability: string, activate: ReturnType<typeof vi.fn>): Record<string, unknown> {
+  return {
+    metadata: defineProviderMetadata({ ref, packageName: '@test/providers', tier: ProviderTier.EXTENSION, origin: { kind: ProviderOriginKind.APPLICATION } }),
+    providerCapabilities: [capability],
+    protocols: ['FRONTEND_SDK'],
+    // Declared stoppable: a consent-based SDK must be, or it never starts (#1704).
+    sdk: { descriptor: { packageName: `@vendor/${ref}` }, stoppable: true, activate },
+  };
+}
+
+function renderSite(registry: FrontendWebsiteProviderRegistry | undefined, children: React.ReactNode = <p>page</p>, consentRecorder?: { requestAnonymous: (method: string, path: string, body: unknown) => Promise<unknown> }): void {
+  const runtime: WebsiteRuntimeContextValue = {
+    locale: AvailableLanguage.EN,
+    defaultLocale: AvailableLanguage.EN,
+    labelPack: LABEL_PACK,
+    designTokens: {
+      colors: {
+        background: '#fff', foreground: '#000', primary: '#000', primaryForeground: '#fff', accent: '#000', accentForeground: '#fff',
+        surface: '#fff', surfaceForeground: '#000', border: '#ccc', muted: '#eee', mutedForeground: '#666',
+      },
+      radii: { none: '0', sm: '2px', md: '4px', lg: '8px', xl: '12px', full: '9999px' },
+    },
+    navigation: { headerComponent: () => null, footerComponent: () => null },
+    skipToMainContentLabelKey: SKIP_KEY,
+    ...(registry ? { frontendProviderRegistry: registry } : {}),
+  };
+  render(
+    <WebsiteRuntimeContextProvider value={runtime}>
+      <WebsitePageLayout pageRef="landing" {...(consentRecorder ? { consentRecorder } : {})}>{children}</WebsitePageLayout>
+    </WebsiteRuntimeContextProvider>,
+  );
+}
+
+beforeEach(() => window.localStorage.clear());
+afterEach(cleanup);
+
+describe('website consent storage', () => {
+  it('reads nothing when nothing, or nothing valid, is stored', () => {
+    expect(readWebsiteVisitorConsent()).toBeNull();
+    window.localStorage.setItem(WEBSITE_VISITOR_CONSENT_STORAGE_KEY, '{not json');
+    expect(readWebsiteVisitorConsent()).toBeNull();
+    window.localStorage.setItem(WEBSITE_VISITOR_CONSENT_STORAGE_KEY, JSON.stringify({ schemaVersion: 2, grantedPurposes: ['analytics'], decidedAt: new Date().toISOString() }));
+    expect(readWebsiteVisitorConsent()).toBeNull();
+  });
+
+  it('round-trips a decision as a normalized SET, dropping purposes the vocabulary no longer has', () => {
+    const decidedAt = new Date('2026-09-13T08:00:00.000Z');
+    writeWebsiteVisitorConsent([ConsentPurpose.MARKETING, ConsentPurpose.ANALYTICS], decidedAt);
+    expect(readWebsiteVisitorConsent()).toEqual({ grantedPurposes: [ConsentPurpose.ANALYTICS, ConsentPurpose.MARKETING], decidedAt: decidedAt.toISOString() });
+
+    window.localStorage.setItem(WEBSITE_VISITOR_CONSENT_STORAGE_KEY, JSON.stringify({ schemaVersion: 1, grantedPurposes: ['analytics', 'retired'], decidedAt: decidedAt.toISOString() }));
+    expect(readWebsiteVisitorConsent()?.grantedPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+  });
+
+  it('keeps an EMPTY decision distinct from no decision — declining is a recorded answer', () => {
+    writeWebsiteVisitorConsent([]);
+    expect(readWebsiteVisitorConsent()?.grantedPurposes).toEqual([]);
+  });
+
+  it('still returns the decision when storage refuses the write', () => {
+    const refusing = { getItem: () => null, setItem: () => { throw new Error('quota'); } } as unknown as Storage;
+    expect(writeWebsiteVisitorConsent([ConsentPurpose.ANALYTICS], new Date(), refusing).grantedPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+  });
+});
+
+describe('WebsitePageLayout enforces visitor consent on provider SDKs', () => {
+  it('starts error monitoring at once, withholds analytics until ACCEPT, and stops analytics on withdrawal', async () => {
+    const analyticsDeactivate = vi.fn();
+    const analyticsActivate = vi.fn().mockResolvedValue({ handle: 'posthog', deactivate: analyticsDeactivate });
+    const monitoringActivate = vi.fn().mockResolvedValue({ handle: 'sentry' });
+    renderSite(registryOf([
+      provider('posthog', BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS, analyticsActivate),
+      provider('sentry', BUILTIN_PROVIDER_CAPABILITY.FRONTEND_ERROR_MONITORING, monitoringActivate),
+    ]));
+
+    await waitFor(() => expect(monitoringActivate).toHaveBeenCalledTimes(1));
+    // The panel asks, and nothing optional has started.
+    expect(await screen.findByRole('region', { name: label(WebsiteConsentLabelSlot.TITLE) })).toBeInTheDocument();
+    // The OPTIONAL box, reached through the row's own `data-website-consent-purpose` hook — the
+    // always-active row carries a checkbox too (checked, disabled), so an unqualified role query
+    // would now match two, and the accessible name is the row's title AND its explanation.
+    expect(document.querySelector<HTMLInputElement>('[data-website-consent-purpose="analytics"] input')).not.toBeChecked();
+    expect(analyticsActivate).not.toHaveBeenCalled();
+
+    await act(async () => { fireEvent.click(screen.getByRole('button', { name: label(WebsiteConsentLabelSlot.ACCEPT_ALL) })); });
+    await waitFor(() => expect(analyticsActivate).toHaveBeenCalledTimes(1));
+    expect(readWebsiteVisitorConsent()?.grantedPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+    expect(screen.queryByRole('region', { name: label(WebsiteConsentLabelSlot.TITLE) })).toBeNull();
+
+    // Withdraw through the always-reachable reopen button.
+    fireEvent.click(screen.getByRole('button', { name: label(WebsiteConsentLabelSlot.MANAGE) }));
+    await act(async () => { fireEvent.click(screen.getByRole('button', { name: label(WebsiteConsentLabelSlot.DECLINE_ALL) })); });
+    await waitFor(() => expect(analyticsDeactivate).toHaveBeenCalledTimes(1));
+    expect(readWebsiteVisitorConsent()?.grantedPurposes).toEqual([]);
+    // Error monitoring was never restarted by any of it.
+    expect(monitoringActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it('honours a stored refusal: no panel, no analytics, and a way to change it', async () => {
+    writeWebsiteVisitorConsent([]);
+    const analyticsActivate = vi.fn().mockResolvedValue({ handle: 'posthog' });
+    renderSite(registryOf([provider('posthog', BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS, analyticsActivate)]));
+
+    expect(await screen.findByRole('button', { name: label(WebsiteConsentLabelSlot.MANAGE) })).toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: label(WebsiteConsentLabelSlot.TITLE) })).toBeNull();
+    expect(analyticsActivate).not.toHaveBeenCalled();
+  });
+
+  it('shows no consent surface at all on a site whose providers rest on no consent', async () => {
+    const monitoringActivate = vi.fn().mockResolvedValue({ handle: 'sentry' });
+    renderSite(registryOf([provider('sentry', BUILTIN_PROVIDER_CAPABILITY.FRONTEND_ERROR_MONITORING, monitoringActivate)]));
+    await waitFor(() => expect(monitoringActivate).toHaveBeenCalledTimes(1));
+    expect(screen.queryByRole('region')).toBeNull();
+    expect(screen.queryByRole('button', { name: label(WebsiteConsentLabelSlot.MANAGE) })).toBeNull();
+  });
+});
+
+/**
+ * #1258 — what a visitor can actually SEE in the panel.
+ *
+ * The banner showed a tick box labelled "Analytics" and nothing else. That is a category, not
+ * something a visitor can weigh, and consent is only valid if it is INFORMED — so the panel was
+ * asking for a decision it had not given anybody the means to make. A marketing-site consent panel
+ * is also the surface with the tightest constraints anywhere in the product: it must state what runs
+ * regardless, explain each choice, and never push its own refusal below the fold.
+ */
+describe('the visitor panel shows the WHOLE picture, not only the tick boxes', () => {
+  const analytics = () => provider('posthog', BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS, vi.fn().mockResolvedValue({ handle: 'posthog' }));
+
+  it('explains each purpose, states what is always active, and keeps the actions out of the scroll box', async () => {
+    renderSite(registryOf([analytics()]), <p>page</p>);
+
+    // Each offered purpose carries its explanation, not only its name.
+    expect(await screen.findByText(websiteConsentPurposeLabelKey(ConsentPurpose.ANALYTICS) as unknown as string)).toBeInTheDocument();
+    expect(screen.getByText(websiteConsentPurposeDescriptionLabelKey(ConsentPurpose.ANALYTICS) as unknown as string)).toBeInTheDocument();
+
+    /*
+     * The always-active row is STATED, and carries a real control — checked and disabled. A row with
+     * no control does not read as "cannot be changed": a visitor scans DOWN the column of boxes, and
+     * a gap there reads as a row that was forgotten. The disabled assertion is also what holds the
+     * line that this is not a purpose — the moment the box is operable, the panel is offering a
+     * choice about processing that has none.
+     */
+    expect(screen.getByText(label(WebsiteConsentLabelSlot.ESSENTIAL_TITLE))).toBeInTheDocument();
+    const boxes = screen.getAllByRole('checkbox');
+    // The COUNT first: a destructure of the first two cannot see a third row appearing, and the order
+    // it depends on would be unstated. One always-active row, one purpose in use.
+    expect(boxes).toHaveLength(2);
+    const [essentialBox, analyticsBox] = boxes;
+    expect(essentialBox).toBeChecked();
+    expect(essentialBox).toBeDisabled();
+    expect(analyticsBox).not.toBeChecked();
+    expect(analyticsBox).toBeEnabled();
+
+    /*
+     * And no SAVE: with one purpose in use, decline-all and accept-all already cover the whole space,
+     * so a third button could only repeat them — which is exactly the confusion it caused.
+     */
+    expect(screen.queryByRole('button', { name: label(WebsiteConsentLabelSlot.SAVE) })).toBeNull();
+
+    /*
+     * The rows scroll; the panel does not grow. A panel that grows with its content pushes accept and
+     * reject off the bottom of a short screen, and a refusal that cannot be reached is a refusal that
+     * was not offered. Asserting the ACCEPT button is outside the scroll box is what catches a
+     * "simplification" that puts the whole panel in one scroller.
+     */
+    const panel = screen.getByRole('region');
+    expect(panel.style.maxHeight).toBe('85dvh');
+    /*
+     * Anchored on the scroll box's OWN hook. `closest('div[style*="auto"]')` matched the essential
+     * ROW — its grid template is `auto 1fr` — so it resolved to a box that is not the scroller and
+     * both following assertions passed for free, including with the scroller deleted.
+     */
+    const scrollBox = document.querySelector('[data-website-consent-rows]');
+    expect(scrollBox, 'the purpose rows must sit in their own scroll box').not.toBeNull();
+    // …and it must actually SCROLL. Containment alone holds for a plain div, so deleting the
+    // overflow — the change that puts the rows' height back onto the panel — would pass without this.
+    expect((scrollBox as HTMLElement).style.overflowY).toBe('auto');
+    expect(scrollBox!.contains(screen.getByText(label(WebsiteConsentLabelSlot.ESSENTIAL_TITLE))), 'the rows must be INSIDE it').toBe(true);
+    expect(scrollBox!.contains(screen.getByRole('button', { name: label(WebsiteConsentLabelSlot.ACCEPT_ALL) })), 'the actions must not').toBe(false);
+  });
+});
+
+describe('WebsiteConsentGate', () => {
+  it('always renders essential content, and consent-based content only once its purpose is granted', async () => {
+    renderSite(undefined, (
+      <>
+        <WebsiteConsentGate><form aria-label="contact" /></WebsiteConsentGate>
+        <WebsiteConsentGate purpose={ConsentPurpose.MARKETING} fallback={<p>withheld</p>}><p>pixel</p></WebsiteConsentGate>
+      </>
+    ));
+    expect(screen.getByRole('form', { name: 'contact' })).toBeInTheDocument();
+    expect(await screen.findByText('withheld')).toBeInTheDocument();
+    expect(screen.queryByText('pixel')).toBeNull();
+
+    await act(async () => { writeWebsiteVisitorConsent([ConsentPurpose.MARKETING]); });
+    expect(await screen.findByText('pixel')).toBeInTheDocument();
+  });
+});
+
+/**
+ * #1258 Step 1c — the visitor's decision reaching the server, so it can follow them to an account.
+ *
+ * What these pin is the pair of properties the carry depends on: the decision is recorded with the
+ * set that was actually OFFERED (without which the application cannot tell a decline from a
+ * never-asked), and the local decision is never hostage to that request succeeding.
+ */
+describe('a visitor decision is recorded server-side when the site wires a recorder', () => {
+  const analytics = () => provider('posthog', BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS, vi.fn().mockResolvedValue({ handle: 'posthog' }));
+
+  it('posts the granted set AND the offered set to the anonymous consent route', async () => {
+    const requestAnonymous = vi.fn().mockResolvedValue({});
+    renderSite(registryOf([analytics()]), <p>page</p>, { requestAnonymous });
+
+    await act(async () => { fireEvent.click(await screen.findByRole('button', { name: label(WebsiteConsentLabelSlot.ACCEPT_ALL) })); });
+
+    await waitFor(() => expect(requestAnonymous).toHaveBeenCalledTimes(1));
+    const [method, path, body] = requestAnonymous.mock.calls[0] as [string, string, { grantedPurposes: string[]; offeredPurposes: string[] }];
+    // PUT, not POST. The door's operation borrows UPDATE_MANY; sending POST answered 404, and this
+    // provider's failure path is deliberately silent, so nothing surfaced it (#1258 Step 1d).
+    expect(method).toBe(ANONYMOUS_CONSENT_RECORD_METHOD);
+    expect(path).toBe(ANONYMOUS_CONSENT_RECORD_PATH);
+    expect(body.grantedPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+    // The OFFERED set is what this panel actually showed — derived from the site's live providers,
+    // which is why it can differ from what the application would ask.
+    expect(body.offeredPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+  });
+
+  it('records a DECLINE too — an empty grant is a decision and must carry as one', async () => {
+    const requestAnonymous = vi.fn().mockResolvedValue({});
+    renderSite(registryOf([analytics()]), <p>page</p>, { requestAnonymous });
+
+    await act(async () => { fireEvent.click(await screen.findByRole('button', { name: label(WebsiteConsentLabelSlot.DECLINE_ALL) })); });
+
+    await waitFor(() => expect(requestAnonymous).toHaveBeenCalledTimes(1));
+    const [, , body] = requestAnonymous.mock.calls[0] as [string, string, { grantedPurposes: string[]; offeredPurposes: string[] }];
+    expect(body.grantedPurposes).toEqual([]);
+    expect(body.offeredPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+  });
+
+  it('holds the decision locally even when the server write fails, and tells the visitor nothing', async () => {
+    const requestAnonymous = vi.fn().mockRejectedValue(new Error('offline'));
+    renderSite(registryOf([analytics()]), <p>page</p>, { requestAnonymous });
+
+    await act(async () => { fireEvent.click(await screen.findByRole('button', { name: label(WebsiteConsentLabelSlot.ACCEPT_ALL) })); });
+
+    // The decision HELD: stored, panel closed. Losing the carry must never look like losing the choice.
+    await waitFor(() => expect(readWebsiteVisitorConsent()?.grantedPurposes).toEqual([ConsentPurpose.ANALYTICS]));
+    expect(screen.queryByRole('region', { name: label(WebsiteConsentLabelSlot.TITLE) })).toBeNull();
+  });
+
+  it('posts nothing at all when the site wires no recorder — the pre-#1258 behaviour, unchanged', async () => {
+    renderSite(registryOf([analytics()]));
+
+    await act(async () => { fireEvent.click(await screen.findByRole('button', { name: label(WebsiteConsentLabelSlot.ACCEPT_ALL) })); });
+
+    expect(readWebsiteVisitorConsent()?.grantedPurposes).toEqual([ConsentPurpose.ANALYTICS]);
+  });
+});

package/src/core/anonymous-session/InboundContactForm.tsx

@@ -8,15 +8,41 @@
  * the anonymous session (init header) and the backend stamps the lead's `anonymousUserId`
  * so it can later transpose to the visitor's account on signup/login.
  *
- * Labels are injected (optional props with English fallbacks) rather than read from the
- * website runtime context, so the component stays framework-light and unit-testable; the
- * section wrapper passes i18n-resolved strings.
+ * Labels are injected rather than read from the website runtime context, so the component stays framework-light and
+ * unit-testable; the section wrapper passes the strings it resolved through `useWebsiteLabel`. EVERY label is required
+ * and the form carries no words of its own (#1986): a fallback would be English in every locale and would hide the
+ * missing label, while a required prop makes an omission a type error in the section, and a key the pack does not
+ * carry reaches the page as the key itself — which is what `useWebsiteLabel` returns, so somebody authors it.
+ *
+ * Submission challenge (#1735): when the application protects the form with a captcha, each submission carries an
+ * answer — the consented vendor's token when its browser part runs on the page, otherwise the engine's proof of work,
+ * which needs no consent (see `website-submission-challenge.ts`). Nothing for the visitor to click or read: both are
+ * invisible, so the form stays operable by keyboard and screen reader exactly as before. A vendor token the backend
+ * refuses is retried once with the proof of work; a refusal that survives that shows `challengeRefusedMessage`.
  */
 
-import React, { useCallback, useMemo, useState } from "react";
-import { InboundContactFormSchema, buildInboundContactCreateBody, type InboundContactFormValues } from "./inbound-contact-form.schema";
+import React, { useCallback, useState } from "react";
+import { SubmissionChallengeAction, WildoHeaderKeys } from "@wildo-ai/saas-models/public-runtime";
+import {
+  INBOUND_CONTACT_NAME_MAX_LENGTH,
+  INBOUND_CONTACT_PHONE_MAX_LENGTH,
+  InboundContactFormSchema,
+  buildInboundContactCreateBody,
+  type InboundContactFormValues,
+} from "./inbound-contact-form.schema";
 import type { WebsiteAnonymousSessionClient } from "./website-anonymous-session-client";
+import {
+  isSubmissionChallengeRefusal,
+  obtainSubmissionChallengeAnswer,
+  useWebsiteSubmissionChallengeSource,
+  type WebsiteSubmissionChallengeSource,
+} from "./website-submission-challenge";
 
+/**
+ * Every word the form shows. All required (#1986): the section resolves each through `useWebsiteLabel` and lists its
+ * key in `expectedLabelKeys`, so a missing label is a type error in the section or a visible key on the page, never a
+ * silent English substitute.
+ */
 export interface InboundContactFormLabels {
   emailLabel: string;
   firstNameLabel: string;
@@ -28,29 +54,23 @@ export interface InboundContactFormLabels {
   submittingLabel: string;
   successMessage: string;
   errorMessage: string;
+  /** The anti-spam check did not pass, even with the proof of work (#1735). */
+  challengeRefusedMessage: string;
+  /** Shown beside the email field when what was typed is not an email address (#1986). */
+  invalidEmailMessage: string;
 }
 
-const DEFAULT_LABELS: InboundContactFormLabels = {
-  emailLabel: "Email",
-  firstNameLabel: "First name",
-  lastNameLabel: "Last name",
-  phoneLabel: "Phone",
-  marketingConsentLabel: "Keep me updated about news and offers",
-  submitLabel: "Get in touch",
-  submittingLabel: "Sending…",
-  successMessage: "Thanks — we'll be in touch shortly.",
-  errorMessage: "Something went wrong. Please try again.",
-};
-
 type SubmitState = { status: "idle" } | { status: "submitting" } | { status: "success" } | { status: "error"; message: string };
 
 export interface InboundContactFormProps {
   /** The anonymous-session client (constructed by the section wiring from site config). */
   client: WebsiteAnonymousSessionClient;
-  /** Optional i18n-resolved labels; English fallbacks are used per-field when omitted. */
-  labels?: Partial<InboundContactFormLabels>;
+  /** The section's i18n-resolved labels — every one of them (#1986). */
+  labels: InboundContactFormLabels;
   /** Optional callback fired after a successful submission (e.g. analytics). */
   onSubmitted?: () => void;
+  /** The page's captcha, for a form rendered outside a page layout (tests). Defaults to the page's own. */
+  challengeSource?: WebsiteSubmissionChallengeSource;
 }
 
 const EMPTY_VALUES: InboundContactFormValues = {
@@ -61,10 +81,11 @@ const EMPTY_VALUES: InboundContactFormValues = {
   marketingConsent: false,
 };
 
-export function InboundContactForm({ client, labels, onSubmitted }: InboundContactFormProps): React.ReactElement {
-  const resolvedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+export function InboundContactForm({ client, labels, onSubmitted, challengeSource }: InboundContactFormProps): React.ReactElement {
+  const pageChallengeSource = useWebsiteSubmissionChallengeSource();
+  const source = challengeSource ?? pageChallengeSource;
   const [values, setValues] = useState<InboundContactFormValues>(EMPTY_VALUES);
-  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof InboundContactFormValues, string>>>({});
+  const [emailInvalid, setEmailInvalid] = useState(false);
   const [submit, setSubmit] = useState<SubmitState>({ status: "idle" });
 
   const setField = useCallback(<K extends keyof InboundContactFormValues>(key: K, value: InboundContactFormValues[K]) => {
@@ -74,38 +95,54 @@ export function InboundContactForm({ client, labels, onSubmitted }: InboundConta
   const handleSubmit = useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
-      setFieldErrors({});
+      setEmailInvalid(false);
 
       const parsed = InboundContactFormSchema.safeParse(values);
       if (!parsed.success) {
-        const nextErrors: Partial<Record<keyof InboundContactFormValues, string>> = {};
-        for (const issue of parsed.error.issues) {
-          const key = issue.path[0] as keyof InboundContactFormValues | undefined;
-          if (key && !nextErrors[key]) nextErrors[key] = issue.message;
-        }
-        setFieldErrors(nextErrors);
+        // The schema's own issue messages are never shown: they are English and nobody authors them (#1986). The email
+        // is the one field a visitor can get wrong, and it has its label. The other fields' only rule is a length the
+        // inputs already enforce with `maxLength`, so reaching a failure there means the values did not come from
+        // typing, and the form answers with its generic error rather than inventing a sentence.
+        const emailFailed = parsed.error.issues.some((issue) => issue.path[0] === "email");
+        setEmailInvalid(emailFailed);
+        if (!emailFailed) setSubmit({ status: "error", message: labels.errorMessage });
         return;
       }
 
       setSubmit({ status: "submitting" });
+      const body = buildInboundContactCreateBody(parsed.data);
+      const send = async (proofOfWorkOnly: boolean): Promise<void> => {
+        const answer = await obtainSubmissionChallengeAnswer({ source, action: SubmissionChallengeAction.INBOUND_CONTACT, client, proofOfWorkOnly });
+        await client.postAnonymous("/inbound-contacts", body, answer === undefined ? undefined : { [WildoHeaderKeys.SUBMISSION_CHALLENGE_RESPONSE]: answer });
+      };
       try {
-        await client.postAnonymous("/inbound-contacts", buildInboundContactCreateBody(parsed.data));
+        try {
+          await send(false);
+        } catch (error) {
+          // A refused challenge is answered ONCE more, with the proof of work: a vendor that scored a real person low,
+          // could not be reached, or a site that did not know the backend protects the form must not lock anyone out.
+          if (!isSubmissionChallengeRefusal(error)) throw error;
+          await send(true);
+        }
         setSubmit({ status: "success" });
         setValues(EMPTY_VALUES);
         onSubmitted?.();
-      } catch {
+      } catch (error) {
         // The backend-only `emailUserMatch` triage signal is never returned here, so a
         // failure exposes no account-existence information — just a generic retry.
-        setSubmit({ status: "error", message: resolvedLabels.errorMessage });
+        setSubmit({
+          status: "error",
+          message: isSubmissionChallengeRefusal(error) ? labels.challengeRefusedMessage : labels.errorMessage,
+        });
       }
     },
-    [client, values, onSubmitted, resolvedLabels.errorMessage],
+    [client, values, onSubmitted, source, labels.errorMessage, labels.challengeRefusedMessage],
   );
 
   if (submit.status === "success") {
     return (
       <div role="status" aria-live="polite">
-        {resolvedLabels.successMessage}
+        {labels.successMessage}
       </div>
     );
   }
@@ -115,42 +152,60 @@ export function InboundContactForm({ client, labels, onSubmitted }: InboundConta
   return (
     <form onSubmit={handleSubmit} noValidate>
       <label>
-        {resolvedLabels.emailLabel}
+        {labels.emailLabel}
         <input
           type="email"
           name="email"
           required
           value={values.email}
           onChange={(e) => setField("email", e.target.value)}
-          aria-invalid={fieldErrors.email ? true : undefined}
+          aria-invalid={emailInvalid ? true : undefined}
         />
-        {fieldErrors.email ? <span role="alert">{fieldErrors.email}</span> : null}
+        {emailInvalid ? <span role="alert">{labels.invalidEmailMessage}</span> : null}
       </label>
 
       <label>
-        {resolvedLabels.firstNameLabel}
-        <input type="text" name="firstName" value={values.firstName ?? ""} onChange={(e) => setField("firstName", e.target.value)} />
+        {labels.firstNameLabel}
+        <input
+          type="text"
+          name="firstName"
+          maxLength={INBOUND_CONTACT_NAME_MAX_LENGTH}
+          value={values.firstName ?? ""}
+          onChange={(e) => setField("firstName", e.target.value)}
+        />
       </label>
 
       <label>
-        {resolvedLabels.lastNameLabel}
-        <input type="text" name="lastName" value={values.lastName ?? ""} onChange={(e) => setField("lastName", e.target.value)} />
+        {labels.lastNameLabel}
+        <input
+          type="text"
+          name="lastName"
+          maxLength={INBOUND_CONTACT_NAME_MAX_LENGTH}
+          value={values.lastName ?? ""}
+          onChange={(e) => setField("lastName", e.target.value)}
+        />
       </label>
 
       <label>
-        {resolvedLabels.phoneLabel}
-        <input type="tel" name="phone" value={values.phone ?? ""} onChange={(e) => setField("phone", e.target.value)} />
+        {labels.phoneLabel}
+        <input
+          type="tel"
+          name="phone"
+          maxLength={INBOUND_CONTACT_PHONE_MAX_LENGTH}
+          value={values.phone ?? ""}
+          onChange={(e) => setField("phone", e.target.value)}
+        />
       </label>
 
       <label>
         <input type="checkbox" name="marketingConsent" checked={values.marketingConsent} onChange={(e) => setField("marketingConsent", e.target.checked)} />
-        {resolvedLabels.marketingConsentLabel}
+        {labels.marketingConsentLabel}
       </label>
 
       {submit.status === "error" ? <div role="alert">{submit.message}</div> : null}
 
       <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? resolvedLabels.submittingLabel : resolvedLabels.submitLabel}
+        {isSubmitting ? labels.submittingLabel : labels.submitLabel}
       </button>
     </form>
   );

package/src/core/anonymous-session/__tests__/InboundContactForm.labels.test.tsx

@@ -0,0 +1,108 @@
+/**
+ * #1986 — every word the contact form shows is one its section passed.
+ *
+ * The form used to merge an English `DEFAULT_LABELS` under optional props, and showed the schema's own English issue
+ * message beside the email field. Both reached every locale and neither could be found by whoever authors the label
+ * pack. These pins walk the rendered text, so a literal put back into the markup, the schema or a fallback reddens them.
+ */
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { InboundContactForm, type InboundContactFormLabels } from '../InboundContactForm';
+import { INBOUND_CONTACT_NAME_MAX_LENGTH, INBOUND_CONTACT_PHONE_MAX_LENGTH } from '../inbound-contact-form.schema';
+import type { WebsiteAnonymousSessionClient } from '../website-anonymous-session-client';
+
+afterEach(() => { cleanup(); });
+
+const LABELS: InboundContactFormLabels = {
+  emailLabel: 'email-label',
+  firstNameLabel: 'first-name-label',
+  lastNameLabel: 'last-name-label',
+  phoneLabel: 'phone-label',
+  marketingConsentLabel: 'marketing-consent-label',
+  submitLabel: 'submit-label',
+  submittingLabel: 'submitting-label',
+  successMessage: 'success-label',
+  errorMessage: 'error-label',
+  challengeRefusedMessage: 'refused-label',
+  invalidEmailMessage: 'invalid-email-label',
+};
+
+const AUTHORED = new Set<string>(Object.values(LABELS));
+
+/** Every non-blank text node under `root`, trimmed. */
+function renderedWords(root: HTMLElement): string[] {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const words: string[] = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const text = node.textContent?.trim();
+    if (text) words.push(text);
+  }
+  return words;
+}
+
+function clientDouble() {
+  const postAnonymous = vi.fn(async () => ({}));
+  return { client: { postAnonymous, getPublic: vi.fn() } as unknown as WebsiteAnonymousSessionClient, postAnonymous };
+}
+
+function renderForm() {
+  const double = clientDouble();
+  const view = render(<InboundContactForm client={double.client} challengeSource={{ captchaDeclared: false }} labels={LABELS} />);
+  return { ...double, container: view.container };
+}
+
+describe('InboundContactForm — its words are the section\'s (#1986)', () => {
+  it('shows no word of its own in the idle form', () => {
+    const { container } = renderForm();
+    const words = renderedWords(container);
+    expect(words.length).toBeGreaterThan(0);
+    expect(words.filter((word) => !AUTHORED.has(word))).toEqual([]);
+  });
+
+  it('words an invalid email with the section\'s label, never the schema\'s message', async () => {
+    const { container, postAnonymous } = renderForm();
+    fireEvent.change(screen.getByRole('textbox', { name: LABELS.emailLabel }), { target: { value: 'not-an-email' } });
+    fireEvent.click(screen.getByRole('button', { name: LABELS.submitLabel }));
+    expect(await screen.findByRole('alert')).toHaveTextContent(LABELS.invalidEmailMessage);
+    expect(screen.getByRole('textbox', { name: new RegExp(LABELS.emailLabel) })).toHaveAttribute('aria-invalid', 'true');
+    expect(renderedWords(container).filter((word) => !AUTHORED.has(word))).toEqual([]);
+    expect(postAnonymous).not.toHaveBeenCalled();
+  });
+
+  it('answers a length failure no typed input can produce with the generic error, not a schema sentence', async () => {
+    const { container, postAnonymous } = renderForm();
+    fireEvent.change(screen.getByRole('textbox', { name: new RegExp(LABELS.emailLabel) }), { target: { value: 'visitor@example.test' } });
+    // `fireEvent.change` sets the value directly, which is exactly the path `maxLength` cannot stop.
+    fireEvent.change(screen.getByRole('textbox', { name: LABELS.firstNameLabel }), { target: { value: 'x'.repeat(INBOUND_CONTACT_NAME_MAX_LENGTH + 1) } });
+    fireEvent.click(screen.getByRole('button', { name: LABELS.submitLabel }));
+    expect(await screen.findByRole('alert')).toHaveTextContent(LABELS.errorMessage);
+    expect(renderedWords(container).filter((word) => !AUTHORED.has(word) && !/^x+$/.test(word))).toEqual([]);
+    expect(postAnonymous).not.toHaveBeenCalled();
+  });
+
+  it('shows only the section\'s words once sent', async () => {
+    const { container } = renderForm();
+    fireEvent.change(screen.getByRole('textbox', { name: LABELS.emailLabel }), { target: { value: 'visitor@example.test' } });
+    fireEvent.click(screen.getByRole('button', { name: LABELS.submitLabel }));
+    await waitFor(() => expect(screen.getByRole('status')).toBeInTheDocument());
+    expect(renderedWords(container)).toEqual([LABELS.successMessage]);
+  });
+
+  it('stops typing at the schema\'s own length ceilings', () => {
+    renderForm();
+    expect(screen.getByRole('textbox', { name: LABELS.firstNameLabel })).toHaveAttribute('maxLength', String(INBOUND_CONTACT_NAME_MAX_LENGTH));
+    expect(screen.getByRole('textbox', { name: LABELS.lastNameLabel })).toHaveAttribute('maxLength', String(INBOUND_CONTACT_NAME_MAX_LENGTH));
+    expect(screen.getByRole('textbox', { name: LABELS.phoneLabel })).toHaveAttribute('maxLength', String(INBOUND_CONTACT_PHONE_MAX_LENGTH));
+  });
+
+  it('refuses, at compile time, a section that omits a label', () => {
+    const { client } = clientDouble();
+    const { invalidEmailMessage: _omitted, ...incomplete } = LABELS;
+    // @ts-expect-error — every label is required (#1986): an omission is the section's type error, not English.
+    const element = <InboundContactForm client={client} labels={incomplete} />;
+    expect(element).toBeTruthy();
+  });
+});