@owlmeans/web-payment 0.1.18-rc.2 → 0.1.18-rc.21

package/src/consumer/cancellation.tsx

@@ -0,0 +1,214 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { CancellationKind } from '@owlmeans/payment'
+import type { CancellationBody, CancellationReceipt } from '@owlmeans/payment'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { dayUtc, momentUtc } from '../format.js'
+import { useLegalText, usePaymentText } from './copy.js'
+import { Choice, Field, Honeypot, isEmail } from './fields.js'
+import { ErrorLine, LanguageToggle, useShownLanguage } from './legal.js'
+import type { CancellationFormProps, DeclarationStep } from './types.js'
+
+const isCancellationReceipt = (receipt: object): receipt is CancellationReceipt => 'status' in receipt
+
+/** Today as a UTC calendar day, `YYYY-MM-DD` — the earliest date a termination may name. */
+const todayUtc = (): string => new Date().toISOString().slice(0, 10)
+
+/**
+ * The cancellation function (§ 312k BGB "Verträge hier kündigen" → "Jetzt kündigen"; L215-1-1 /
+ * D215-1 "Résilier votre contrat" → a summary → "Notification de la résiliation"), for a public
+ * page reachable without a login and for the same function in-app.
+ *
+ * Step 1 asks for the kind (ordinary, or extraordinary with its reason), the name, the contract or
+ * customer reference, the date (the earliest possible, or a specific one) and the e-mail address
+ * the acknowledgement goes to; a honeypot field no person reaches rides along. Step 2 is the
+ * summary with the statutory confirm button; step 3 the receipt — date and time of receipt in UTC,
+ * the effective date when known — with a print button, so it can be kept.
+ *
+ * Selectors: `[data-cancellation-form]` / `[data-cancellation-step="form|review|receipt"]` (also
+ * `data-step`, `data-language`, `data-mode`), `[data-cancellation-field="kind|reason|name|contract|
+ * effective|date|email"]`, `[data-cancellation-continue]`, `[data-cancellation-confirm]`,
+ * `[data-cancellation-receipt]` (`data-status`, `data-declaration-id`, `data-received-at`,
+ * `data-effective-at`), `[data-cancellation-print]`.
+ */
+export const CancellationForm = ({
+  mode, language: contractLanguage, uiLanguage, defaults, pending = false, error, receipt, onSubmit, onPrint, onClose,
+  className,
+}: CancellationFormProps) => {
+  const language = useShownLanguage(contractLanguage, uiLanguage)
+  const legal = useLegalText(language.shown)
+  const text = usePaymentText(language.shown)
+
+  const [step, setStep] = useState<'form' | 'review'>('form')
+  const [kind, setKind] = useState<CancellationKind>(CancellationKind.Ordinary)
+  const [reason, setReason] = useState('')
+  const [name, setName] = useState(defaults?.name ?? '')
+  const [contractRef, setContractRef] = useState(defaults?.contractRef ?? '')
+  const [effective, setEffective] = useState<'earliest' | 'date'>('earliest')
+  const [date, setDate] = useState('')
+  const [email, setEmail] = useState(defaults?.email ?? '')
+  const [honeypot, setHoneypot] = useState('')
+  const [checked, setChecked] = useState(false)
+  const [submitted, setSubmitted] = useState<CancellationBody | null>(null)
+  useEffect(() => {
+    if (receipt == null && submitted != null) setStep('form')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [receipt])
+
+  const current: DeclarationStep = receipt != null ? 'receipt' : step
+  const extraordinary = kind === CancellationKind.Extraordinary
+  const earliestDate = todayUtc()
+  const errors = {
+    reason: extraordinary && reason.trim() === '' ? text('consumer.required') : null,
+    name: name.trim() === '' ? text('consumer.required') : null,
+    date: effective === 'date' && (!/^\d{4}-\d{2}-\d{2}$/.test(date) || date < earliestDate) ? text('consumer.date-invalid') : null,
+    email: email.trim() === '' ? text('consumer.required') : !isEmail(email.trim()) ? text('consumer.email-invalid') : null,
+  }
+  const shown = (key: keyof typeof errors) => checked ? errors[key] : null
+  const valid = Object.values(errors).every(value => value == null)
+  const body = (): CancellationBody => ({
+    kind,
+    ...(extraordinary ? { reason: reason.trim() } : {}),
+    name: name.trim(),
+    ...(contractRef.trim() !== '' ? { contractRef: contractRef.trim() } : {}),
+    ...(defaults?.subscriptionId != null ? { subscriptionId: defaults.subscriptionId } : {}),
+    effective,
+    ...(effective === 'date' ? { date } : {}),
+    email: email.trim(),
+    language: language.shown,
+    ...(honeypot !== '' ? { honeypot } : {}),
+  })
+  const toReview = () => {
+    setChecked(true)
+    if (valid) setStep('review')
+  }
+  const confirm = async () => {
+    if (!valid || pending) return
+    const declared = body()
+    setSubmitted(declared)
+    await onSubmit(declared)
+  }
+  const print = () => {
+    if (onPrint != null) onPrint()
+    else if (typeof window !== 'undefined') window.print()
+  }
+
+  const kindLabel = (value: CancellationKind) => legal(value === CancellationKind.Extraordinary
+    ? 'cancellation.kind-extraordinary' : 'cancellation.kind-ordinary')
+  const effectiveLabel = (declared: CancellationBody) => declared.effective === 'date' && declared.date != null
+    ? dayUtc(`${declared.date}T00:00:00Z`, language.shown) : legal('cancellation.effective-earliest')
+  const summary = (declared: CancellationBody, hook?: string) =>
+    <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 rounded-lg border bg-muted/30 p-4 text-sm"
+      {...(hook != null ? { [hook]: '' } : {})}>
+      <dt className="text-muted-foreground">{legal('cancellation.kind')}</dt><dd data-summary="kind">{kindLabel(declared.kind)}</dd>
+      {declared.reason != null && <>
+        <dt className="text-muted-foreground">{legal('cancellation.reason')}</dt>
+        <dd data-summary="reason" className="whitespace-pre-wrap">{declared.reason}</dd>
+      </>}
+      <dt className="text-muted-foreground">{legal('cancellation.name')}</dt><dd data-summary="name">{declared.name}</dd>
+      <dt className="text-muted-foreground">{legal('cancellation.contract')}</dt><dd data-summary="contract">{declared.contractRef ?? '—'}</dd>
+      <dt className="text-muted-foreground">{legal('cancellation.effective')}</dt><dd data-summary="effective">{effectiveLabel(declared)}</dd>
+      <dt className="text-muted-foreground">{legal('cancellation.email')}</dt><dd data-summary="email">{declared.email}</dd>
+    </dl>
+
+  let content: ReactNode
+  if (current === 'receipt' && receipt != null) {
+    const receivedAt = new Date(receipt.receivedAt)
+    const declared = submitted ?? body()
+    const status = isCancellationReceipt(receipt) ? receipt.status : undefined
+    const effectiveAt = isCancellationReceipt(receipt) && receipt.effectiveAt != null ? new Date(receipt.effectiveAt) : null
+    const effectiveKnown = effectiveAt != null && !Number.isNaN(effectiveAt.getTime())
+    content = <div className="grid gap-4" data-cancellation-receipt="" data-status={status ?? 'received'}
+      data-declaration-id={receipt.declarationId}
+      data-received-at={Number.isNaN(receivedAt.getTime()) ? undefined : receivedAt.toISOString()}
+      data-effective-at={effectiveKnown ? effectiveAt.toISOString() : undefined}>
+      <h3 className="text-sm font-medium">{text('consumer.receipt')}</h3>
+      <p className="text-sm">{receipt.mailed
+        ? legal('cancellation.received', { date: momentUtc(receivedAt, language.shown), email: declared.email })
+        : `${text('consumer.received-at')}: ${momentUtc(receivedAt, language.shown)} (UTC). ${text('consumer.not-mailed')}`}</p>
+      {effectiveKnown && <p className="text-sm font-medium" data-cancellation-effective="">
+        {text('cancellation.effective-at', { date: dayUtc(effectiveAt, language.shown) })}
+      </p>}
+      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 rounded-lg border p-4 text-sm">
+        <dt className="text-muted-foreground">{text('consumer.reference')}</dt>
+        <dd data-cancellation-reference="">{receipt.declarationId}</dd>
+        <dt className="text-muted-foreground">{text('consumer.received-at')}</dt>
+        <dd data-cancellation-received-at="">{momentUtc(receivedAt, language.shown)} (UTC)</dd>
+        {status != null && <>
+          <dt className="text-muted-foreground">{text('consumer.status')}</dt>
+          <dd data-cancellation-status="">{text(`cancellation.status.${status}`)}</dd>
+        </>}
+      </dl>
+      {summary(declared)}
+      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end print:hidden">
+        {onClose != null && <Button type="button" variant="outline" onClick={onClose}>{text('consumer.close')}</Button>}
+        <Button type="button" variant="outline" onClick={print} data-cancellation-print="">{text('consumer.print')}</Button>
+      </div>
+    </div>
+  } else if (current === 'review') {
+    content = <div className="grid gap-4">
+      <h3 className="text-sm font-medium">{text('consumer.review')}</h3>
+      <p className="text-sm">{legal('cancellation.summary')}</p>
+      {summary(body(), 'data-cancellation-summary')}
+      <ErrorLine error={error} text={text} />
+      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+        <Button type="button" variant="outline" disabled={pending} onClick={() => setStep('form')}
+          data-cancellation-back="">{text('consumer.back')}</Button>
+        <Button type="button" disabled={pending || !valid} onClick={() => void confirm()} data-cancellation-confirm="">
+          {pending ? text('consumer.pending') : legal('cancellation.confirm')}
+        </Button>
+      </div>
+    </div>
+  } else {
+    content = <form className="relative grid gap-4" noValidate onSubmit={event => { event.preventDefault(); toReview() }}>
+      <fieldset className="grid gap-2">
+        <legend className="mb-1 text-sm font-medium">{legal('cancellation.kind')}</legend>
+        {[CancellationKind.Ordinary, CancellationKind.Extraordinary].map(value => <Choice
+          key={value} id={`cancellation-kind-${value}`} name="cancellation-kind" checked={kind === value}
+          onSelect={() => setKind(value)} disabled={pending} hook={{ 'data-cancellation-field': 'kind', 'data-kind': value }}
+        >{kindLabel(value)}</Choice>)}
+      </fieldset>
+      {extraordinary && <Field id="cancellation-reason" label={legal('cancellation.reason')} value={reason} onChange={setReason}
+        error={shown('reason')} disabled={pending} multiline hook={{ 'data-cancellation-field': 'reason' }} />}
+      <Field id="cancellation-name" label={legal('cancellation.name')} value={name} onChange={setName} error={shown('name')}
+        autoComplete="name" disabled={pending} hook={{ 'data-cancellation-field': 'name' }} />
+      <Field id="cancellation-contract" label={legal('cancellation.contract')} value={contractRef} onChange={setContractRef}
+        disabled={pending} hook={{ 'data-cancellation-field': 'contract' }} />
+      <fieldset className="grid gap-2">
+        <legend className="mb-1 text-sm font-medium">{legal('cancellation.effective')}</legend>
+        <Choice id="cancellation-effective-earliest" name="cancellation-effective" checked={effective === 'earliest'}
+          onSelect={() => setEffective('earliest')} disabled={pending}
+          hook={{ 'data-cancellation-field': 'effective', 'data-effective': 'earliest' }}>
+          {legal('cancellation.effective-earliest')}
+        </Choice>
+        <Choice id="cancellation-effective-date" name="cancellation-effective" checked={effective === 'date'}
+          onSelect={() => setEffective('date')} disabled={pending}
+          hook={{ 'data-cancellation-field': 'effective', 'data-effective': 'date' }}>
+          {legal('cancellation.effective-date')}
+        </Choice>
+        {effective === 'date' && <Field id="cancellation-date" type="date" label={legal('cancellation.effective-date')}
+          value={date} onChange={setDate} min={earliestDate} error={shown('date')} disabled={pending}
+          hook={{ 'data-cancellation-field': 'date' }} />}
+      </fieldset>
+      <Field id="cancellation-email" type="email" label={legal('cancellation.email')} value={email} onChange={setEmail}
+        error={shown('email')} autoComplete="email" disabled={pending} hook={{ 'data-cancellation-field': 'email' }} />
+      <Honeypot id="cancellation-website" label={text('consumer.website')} value={honeypot} onChange={setHoneypot} />
+      <ErrorLine error={error} text={text} />
+      <div className="flex justify-end">
+        <Button type="submit" disabled={pending} data-cancellation-continue="">{text('consumer.continue')}</Button>
+      </div>
+    </form>
+  }
+
+  return <section className={cn('grid gap-4', className)} data-cancellation-section="" data-language={language.shown}>
+    <header className="grid gap-1.5" lang={language.shown}>
+      <h2 className="text-lg font-semibold leading-none">{legal('cancellation.title')}</h2>
+      {current === 'form' && <p className="text-muted-foreground text-sm">{legal('cancellation.intro')}</p>}
+    </header>
+    <LanguageToggle language={language} hook="data-cancellation-language-toggle" />
+    <div data-cancellation-form="" data-cancellation-step={current} data-step={current} data-mode={mode}
+      data-language={language.shown} lang={language.shown} className="grid gap-4">
+      {content}
+    </div>
+  </section>
+}

package/src/consumer/copy.ts

@@ -0,0 +1,93 @@
+import { useMemo } from 'react'
+import { LIB_NAMESPACE, resolveI18nResource } from '@owlmeans/i18n'
+import { baseLanguageOf, consumerText } from '@owlmeans/payment'
+import type { CopyValues } from '@owlmeans/payment'
+import { WEB_PAYMENT_RESOURCE } from '../i18n.js'
+
+interface Tree {
+  [key: string]: string | Tree
+}
+
+const isTree = (value: unknown): value is Tree =>
+  value != null && typeof value === 'object' && !Array.isArray(value)
+
+const merge = (base: Tree, over: Record<string, unknown> | null): Tree => {
+  const result: Tree = { ...base }
+  for (const [key, value] of Object.entries(over ?? {})) {
+    if (isTree(value)) {
+      const current = result[key]
+      result[key] = merge(isTree(current) ? current : {}, value)
+    } else if (typeof value === 'string') {
+      result[key] = value
+    }
+  }
+
+  return result
+}
+
+const bundleOf = (lng: string): Tree => {
+  const base = baseLanguageOf(lng)
+  let tree = merge({}, resolveI18nResource('en', WEB_PAYMENT_RESOURCE, LIB_NAMESPACE))
+  if (base !== '' && base !== 'en') {
+    tree = merge(tree, resolveI18nResource(base, WEB_PAYMENT_RESOURCE, LIB_NAMESPACE))
+  }
+  if (lng !== base && lng.trim() !== '') {
+    tree = merge(tree, resolveI18nResource(lng, WEB_PAYMENT_RESOURCE, LIB_NAMESPACE))
+  }
+
+  return tree
+}
+
+const fill = (text: string, values: CopyValues = {}): string =>
+  text.replace(/\{\{\s*([\w-]+)\s*\}\}/g, (_, name: string) => values[name] != null ? String(values[name]) : '')
+
+/** A translator bound to ONE language, whatever the active i18n language is. */
+export type FixedText = (key: string, values?: CopyValues) => string
+
+/**
+ * The package's own interface strings (`web-payment`, library tier, any application override
+ * included) in a FIXED language, merged key by key over English — no i18next instance and no
+ * draining (`resolveI18nResource`). What lets a consumer-rights dialog render wholly in the
+ * contract language while the rest of the page stays in the interface language.
+ */
+export const paymentTextOf = (lng: string): FixedText => {
+  const tree = bundleOf(lng)
+
+  return (key, values) => {
+    const value = key.split('.').reduce<unknown>((node, part) => isTree(node) ? node[part] : undefined, tree)
+
+    return typeof value === 'string' ? fill(value, values) : key
+  }
+}
+
+/**
+ * The legal copy of `@owlmeans/payment` (`payment-consumer-rights`) in a fixed language. A text
+ * that cannot be rendered in the language (a broken application override) falls back to English
+ * rather than blanking the page; one that cannot be rendered at all is `''`.
+ */
+export const legalTextOf = (lng: string): FixedText => (path, values) => {
+  try {
+    return consumerText(lng, path, values)
+  } catch {
+    try {
+      return consumerText('en', path, values)
+    } catch {
+      return ''
+    }
+  }
+}
+
+/** `paymentTextOf(lng)`, memoised for the language. */
+export const usePaymentText = (lng: string): FixedText => useMemo(() => paymentTextOf(lng), [lng])
+
+/** `legalTextOf(lng)`, memoised for the language. */
+export const useLegalText = (lng: string): FixedText => useMemo(() => legalTextOf(lng), [lng])
+
+/** A language's own name in another language (`de` in `en` → "German"); the code when unknown. */
+export const languageNameOf = (lng: string, inLanguage: string): string => {
+  try {
+    return new Intl.DisplayNames([inLanguage], { type: 'language' }).of(lng) ?? lng
+  } catch {
+    return lng
+  }
+}

package/src/consumer/ensure.ts

@@ -0,0 +1,124 @@
+import { ConsentKind } from '@owlmeans/payment'
+import { ConsentDeclined, isPerformanceConsentRefusal } from './refusal.js'
+
+export interface AskerOptions<Args extends unknown[], View, Answer> {
+  /** Read the current view. */
+  load: (...args: Args) => Promise<View>
+  /** Whether the view asks the person anything. */
+  required: (view: View) => boolean
+  /** Show the view to the person (open the dialog). */
+  show: (view: View) => void
+  /**
+   * The answer when nothing needs asking — and when the read FAILS: the server's refusal stays
+   * the authority, and a flaky read must never block work that needs no consent.
+   */
+  skip: Answer
+}
+
+export interface Asker<Args extends unknown[], Answer> {
+  /** Read, and ask only when the view requires it. Concurrent calls share ONE pending answer. */
+  ask: (...args: Args) => Promise<Answer>
+  /** Answer the pending `ask` (the dialog confirmed or was declined); nothing when none waits. */
+  settle: (answer: Answer) => void
+  /** Whether an `ask` is waiting for the person. */
+  waiting: () => boolean
+}
+
+/**
+ * Read a view, show it when it asks for something, and answer once the person has — the state
+ * machine behind `usePerformanceConsent().ensure` and `useSubscriptionStart().ensure`, free of
+ * React so it is testable on its own. A burst of calls opens one dialog: they all get its answer.
+ */
+export const makeAsker = <Args extends unknown[], View, Answer>(
+  opts: AskerOptions<Args, View, Answer>,
+): Asker<Args, Answer> => {
+  let inflight: Promise<Answer> | null = null
+  let resolver: ((answer: Answer) => void) | null = null
+
+  const run = async (args: Args): Promise<Answer> => {
+    let view: View
+    try {
+      view = await opts.load(...args)
+    } catch {
+      return opts.skip
+    }
+    if (!opts.required(view)) {
+      return opts.skip
+    }
+
+    return await new Promise<Answer>(resolve => {
+      resolver = resolve
+      opts.show(view)
+    })
+  }
+
+  return {
+    ask: async (...args) => {
+      if (inflight == null) {
+        inflight = run(args).finally(() => {
+          inflight = null
+          resolver = null
+        })
+      }
+
+      return await inflight
+    },
+    settle: answer => {
+      const resolve = resolver
+      resolver = null
+      resolve?.(answer)
+    },
+    waiting: () => resolver != null,
+  }
+}
+
+export interface EnsureOptions {
+  /**
+   * Asked after the server refused with a 428 although the last answer said nothing was needed.
+   * The view is always read fresh; `force` records why the caller asks.
+   */
+  force?: boolean
+}
+
+export interface ConsentGate {
+  /**
+   * `true` when nothing needs consent or the person confirmed and it was recorded; `false` when
+   * they declined or closed the dialog. A failed read answers `true`. One pending answer is shared.
+   */
+  ensure: (opts?: EnsureOptions) => Promise<boolean>
+  /**
+   * Run `action`; when it is refused for the spend consent (`isPerformanceConsentRefusal` — the
+   * class, its marker, or a bare 428, also wrapped inside another error), ask with
+   * `ensure({ force: true })` and run it again exactly ONCE. A decline throws `ConsentDeclined`;
+   * a second refusal, or any other failure, propagates as it is.
+   */
+  withConsent: <T>(action: () => Promise<T>) => Promise<T>
+}
+
+/** A gate over an `ensure` — what `useConsentGate` answers inside a `PerformanceConsentProvider`. */
+export const makeConsentGate = (ensure: ConsentGate['ensure']): ConsentGate => ({
+  ensure,
+  withConsent: async <T>(action: () => Promise<T>): Promise<T> => {
+    try {
+      return await action()
+    } catch (e) {
+      if (!isPerformanceConsentRefusal(e)) {
+        throw e
+      }
+      if (!await ensure({ force: true })) {
+        throw new ConsentDeclined(ConsentKind.Performance)
+      }
+
+      return await action()
+    }
+  },
+})
+
+/**
+ * The gate outside any provider: nothing can be asked, so `ensure` answers `true` and a refusal
+ * propagates unchanged.
+ */
+export const passThroughGate: ConsentGate = {
+  ensure: async () => true,
+  withConsent: async action => await action(),
+}

package/src/consumer/fields.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+/** The shape the platform validates an e-mail address with (`@owlmeans/payment` `EmailSchema`). */
+export const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+$/
+
+export const isEmail = (value: string): boolean => value.length >= 3 && value.length <= 254 && EMAIL_PATTERN.test(value)
+
+export interface FieldProps {
+  id: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  error?: string | null
+  type?: 'text' | 'email' | 'date'
+  autoComplete?: string
+  disabled?: boolean
+  min?: string
+  /** A `data-*` hook for tests (`data-withdrawal-field="name"`). */
+  hook?: Record<string, string>
+  multiline?: boolean
+}
+
+export const Field = ({
+  id, label, value, onChange, error, type = 'text', autoComplete, disabled, min, hook, multiline = false,
+}: FieldProps) => <div className="grid gap-1.5">
+  <Label htmlFor={id}>{label}</Label>
+  {multiline
+    ? <textarea
+      id={id} value={value} disabled={disabled} rows={3} maxLength={2000} aria-invalid={error != null}
+      aria-describedby={error != null ? `${id}-error` : undefined} onChange={event => onChange(event.target.value)}
+      className={cn(
+        'border-input bg-background placeholder:text-muted-foreground w-full min-w-0 rounded-md border px-3 py-2 text-sm shadow-xs outline-none',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:opacity-50 aria-invalid:border-destructive',
+      )}
+      {...hook}
+    />
+    : <Input
+      id={id} type={type} value={value} disabled={disabled} autoComplete={autoComplete} min={min}
+      aria-invalid={error != null} aria-describedby={error != null ? `${id}-error` : undefined}
+      onChange={event => onChange(event.target.value)} {...hook}
+    />}
+  {error != null && <p id={`${id}-error`} className="text-destructive text-xs">{error}</p>}
+</div>
+
+export interface ChoiceProps {
+  id: string
+  name: string
+  checked: boolean
+  onSelect: () => void
+  disabled?: boolean
+  hook?: Record<string, string>
+  children: ReactNode
+}
+
+/** One option of a radio group — a native radio, so the group needs no extra primitive. */
+export const Choice = ({ id, name, checked, onSelect, disabled, hook, children }: ChoiceProps) => <label
+  htmlFor={id}
+  className={cn('flex cursor-pointer items-start gap-3 rounded-md border p-3 text-sm', checked && 'border-primary bg-muted/30')}
+>
+  <input
+    id={id} type="radio" name={name} checked={checked} disabled={disabled} onChange={onSelect}
+    className="accent-primary mt-0.5 size-4 shrink-0" {...hook}
+  />
+  <span className="grid gap-0.5">{children}</span>
+</label>
+
+export interface HoneypotProps {
+  id: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+}
+
+/**
+ * A field a person never sees or reaches: off screen, out of the tab order and hidden from
+ * assistive technology, with a plausible name a form-filling bot completes. A filled one marks the
+ * declaration as a bot's, which the server answers like any other (it never says so).
+ */
+export const Honeypot = ({ id, label, value, onChange }: HoneypotProps) => <div
+  aria-hidden="true" data-honeypot=""
+  style={{ position: 'absolute', left: '-10000px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }}
+>
+  <label htmlFor={id}>{label}</label>
+  <input id={id} name="website" type="text" tabIndex={-1} autoComplete="off" value={value}
+    onChange={event => onChange(event.target.value)} />
+</div>