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

package/src/consumer/refusal.ts

@@ -0,0 +1,110 @@
+import { ResilientError } from '@owlmeans/error'
+import { httpStatusOf } from '@owlmeans/api/status'
+import { ConsentKind, PaymentError, consentRefusalOf } from '@owlmeans/payment'
+
+/** Where a wrapping error keeps the one it wraps — `cause`, and the fields frameworks use for it. */
+const NESTED_FIELDS = ['cause', 'error', 'original', 'originalError', 'inner', 'reason'] as const
+
+/** How deep a wrapped chain is followed — a planning `CommitFailed` inside a transport error is two. */
+const MAX_DEPTH = 5
+
+const PRECONDITION_REQUIRED = 428
+
+/**
+ * Which express request a failure asks for: `performance` (spend consent), `subscription-start`,
+ * `unknown` for a bare HTTP 428 that names neither (a production body carries only an incident
+ * id), or `null` for anything else.
+ *
+ * Read on the error itself and on whatever it wraps (`cause`, `error`, `original`, `inner`, an
+ * aggregate's `errors`), and on text as well as objects, because a refusal travels in three shapes:
+ * the class (a development body, rebuilt by the registry); its marker inside another error's
+ * message or a stored string (a planning commit that failed on the refusal answers
+ * `planning:commit-failed:<transition>:<the refusal's text>`); and the bare status of a production
+ * body (`@owlmeans/api`'s `ApiStatusError`, `api:client:status:428[:<incident>]`).
+ */
+export const consentRefusalKindOf = (error: unknown): ConsentKind | 'unknown' | null => {
+  let status = false
+  const seen = new Set<unknown>()
+  const visit = (value: unknown, depth: number): ConsentKind | null => {
+    if (value == null || depth > MAX_DEPTH) {
+      return null
+    }
+    if (typeof value === 'string') {
+      const holder = { message: value }
+      if (httpStatusOf(holder) === PRECONDITION_REQUIRED) status = true
+      return consentRefusalOf(holder)
+    }
+    if (typeof value !== 'object' || seen.has(value)) {
+      return null
+    }
+    seen.add(value)
+    const kind = consentRefusalOf(value)
+    if (kind != null) {
+      return kind
+    }
+    if (httpStatusOf(value) === PRECONDITION_REQUIRED) {
+      status = true
+    }
+    for (const field of NESTED_FIELDS) {
+      const nested = visit((value as Record<string, unknown>)[field], depth + 1)
+      if (nested != null) return nested
+    }
+    const errors = (value as { errors?: unknown }).errors
+    if (Array.isArray(errors)) {
+      for (const item of errors) {
+        const nested = visit(item, depth + 1)
+        if (nested != null) return nested
+      }
+    }
+
+    return null
+  }
+  const kind = visit(error, 0)
+
+  return kind ?? (status ? 'unknown' : null)
+}
+
+/**
+ * Whether a failure is a consent refusal — the class or its marker (`consentRefusalOf`), or an
+ * HTTP 428 (`httpStatusOf`), on the error or anything it wraps. What decides that the consent
+ * dialog opens and the action is retried once.
+ */
+export const isConsentRefusal = (error: unknown): boolean => consentRefusalKindOf(error) != null
+
+/** A refusal the performance-consent dialog answers: the spend consent, or a bare 428. */
+export const isPerformanceConsentRefusal = (error: unknown): boolean => {
+  const kind = consentRefusalKindOf(error)
+
+  return kind === ConsentKind.Performance || kind === 'unknown'
+}
+
+const DECLINED_MARKER = 'consent-declined:'
+
+/**
+ * The person declined the express request, so the action that needed it did not run. Raised by
+ * `useConsentGate().withConsent` — never by a server, and never a refusal a gate retries.
+ */
+export class ConsentDeclined extends PaymentError {
+  public static override typeName: string = `${PaymentError.typeName}ConsentDeclined`
+
+  public kind: string = ConsentKind.Performance
+
+  constructor(kind: string = ConsentKind.Performance) {
+    super(`${DECLINED_MARKER}${kind}`)
+    this.type = ConsentDeclined.typeName
+    this.applyFields()
+  }
+
+  private applyFields(): void {
+    const at = this.message.lastIndexOf(DECLINED_MARKER)
+    if (at >= 0) this.kind = this.message.slice(at + DECLINED_MARKER.length) || ConsentKind.Performance
+  }
+
+  override finalizeUnmarshal(): void {
+    this.applyFields()
+  }
+}
+
+ResilientError.registerErrorClass(ConsentDeclined)
+
+export const isConsentDeclined = (error: unknown): error is ConsentDeclined => error instanceof ConsentDeclined

package/src/consumer/subscription-start-dialog.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from '@/components/ui/dialog'
+import { Label } from '@/components/ui/label'
+import { useLegalText, usePaymentText } from './copy.js'
+import { ErrorLine, LanguageToggle, LegalLinks, linksFor, useShownLanguage } from './legal.js'
+import type { SubscriptionStartDialogProps } from './types.js'
+
+/**
+ * The express request to start a subscription's services before its withdrawal period ends,
+ * asked BEFORE the subscription checkout (§ 357a Abs. 2 BGB, art. 35 UoPK, L221-25; CJEU C-641/19).
+ * Without it a withdrawal owes nothing for the time used.
+ *
+ * Same shape as the performance consent: the contract language first with a toggle, one
+ * unchecked checkbox carrying the whole statement, and the confirm button — "Continue to payment",
+ * the step before the paygate's own order button — disabled until it is ticked.
+ *
+ * Selectors: `[data-start-dialog]` (`data-language`, `data-contract-language`, `data-plan-sku`),
+ * `[data-start-checkbox]`, `[data-start-confirm]`, `[data-start-decline]`,
+ * `[data-start-language-toggle]`, `[data-legal-link]`.
+ */
+export const SubscriptionStartDialog = ({
+  open, onOpenChange, view, planTitle, price, uiLanguage, pending = false, error, onConfirm, onDecline, links,
+  onWithdraw, className,
+}: SubscriptionStartDialogProps) => {
+  const language = useShownLanguage(view?.language ?? '', uiLanguage, open)
+  const legal = useLegalText(language.shown)
+  const text = usePaymentText(language.shown)
+  const [ticked, setTicked] = useState(false)
+  useEffect(() => { setTicked(false) }, [open, language.shown, view?.textVersion, view?.planSku])
+  if (view == null) {
+    return null
+  }
+
+  // The same text `consentStatementOf(lng, 'subscription-start', { trader, plan })` renders on the server.
+  const checkbox = legal('subscription-start.checkbox', { trader: view.trader, plan: planTitle })
+  const shownLinks = linksFor(language.shown, view.links, links)
+  const confirm = async () => {
+    if (!ticked || pending) {
+      return
+    }
+    await onConfirm({ planSku: view.planSku, textVersion: view.textVersion, language: language.shown, acknowledged: true })
+  }
+
+  return <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent
+      closeLabel={text('consumer.close')}
+      data-start-dialog="" data-subscription-start="" data-language={language.shown}
+      data-contract-language={language.contract} data-plan-sku={view.planSku} data-text-version={view.textVersion}
+      className={cn('max-h-[90vh] overflow-y-auto', className)}
+    >
+      <DialogHeader>
+        <DialogTitle lang={language.shown}>{legal('subscription-start.title', { plan: planTitle })}</DialogTitle>
+        <DialogDescription lang={language.shown}>{legal('subscription-start.intro')}</DialogDescription>
+      </DialogHeader>
+      <LanguageToggle language={language} hook="data-start-language-toggle" />
+      <div className="grid gap-4" lang={language.shown}>
+        {price != null && <div className="text-sm" data-start-price="">{price}</div>}
+        <div className="flex items-start gap-3 rounded-md border p-3">
+          <Checkbox
+            id="subscription-start-checkbox" data-start-checkbox="" checked={ticked} disabled={pending}
+            onCheckedChange={value => setTicked(value === true)} className="mt-0.5"
+          />
+          <Label htmlFor="subscription-start-checkbox" className="block text-sm leading-snug font-normal"
+            data-start-statement="">
+            {checkbox}
+          </Label>
+        </div>
+        <LegalLinks links={shownLinks} legal={legal} onWithdraw={onWithdraw} />
+        <ErrorLine error={error} text={text} />
+      </div>
+      <DialogFooter>
+        <Button type="button" variant="outline" data-start-decline="" disabled={pending}
+          onClick={() => onDecline != null ? onDecline() : onOpenChange(false)}>
+          {legal('subscription-start.decline')}
+        </Button>
+        <Button type="button" data-start-confirm="" disabled={!ticked || pending} onClick={() => void confirm()}>
+          {pending ? text('consumer.pending') : legal('subscription-start.confirm')}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+}

package/src/consumer/types.ts

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react'
+import type {
+  CancellationBody, CancellationReceipt, ConsumerRightsLinks, DeclarationReceipt, PerformanceConsentBody,
+  PerformanceConsentView, SubscriptionStartBody, SubscriptionStartView, WithdrawalBody, WithdrawalCandidateList,
+  WithdrawalReceipt,
+} from '@owlmeans/payment'
+
+/**
+ * The legal documents of a language: a record by language (`de`, `de-AT` → `de`) or a function (a
+ * policy read through `linksOf(policy, lng)`). Absent for a language, the view's own links are used.
+ */
+export type LegalLinksSource =
+  | Record<string, ConsumerRightsLinks | undefined>
+  | ((language: string) => ConsumerRightsLinks | null | undefined)
+
+/** Formats an amount of minor units for a language; the default is `Intl.NumberFormat`. */
+export type AmountFormatter = (minor: number, currency: string, language: string) => string
+
+/** `true` shows the package's generic failure sentence; a node is shown as given. */
+export type PieceError = ReactNode | boolean
+
+/** What every consumer-rights dialog shares. */
+export interface LegalDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * The interface language — what the toggle switches to, and what the toggle itself is phrased
+   * in. Default: the active i18n language.
+   */
+  uiLanguage?: string
+  pending?: boolean
+  error?: PieceError
+  /** Links per language; default: the view's own links. */
+  links?: LegalLinksSource
+  /**
+   * Opens the withdrawal function in-app. Absent, the "withdraw from contract here" link points at
+   * the links' `withdrawalFunction` page, and is left out when there is none.
+   */
+  onWithdraw?: () => void
+  /** Called on the decline button; closing the dialog any other way is `onOpenChange(false)`. */
+  onDecline?: () => void
+  className?: string
+}
+
+export interface PerformanceConsentDialogProps extends LegalDialogProps {
+  /** `null` renders nothing. */
+  view: PerformanceConsentView | null
+  /**
+   * The express request, recorded in the language it was SHOWN in (`language`), with the
+   * interface language beside it (`uiLanguage`) — pass it to the record protocol as the body.
+   */
+  onConfirm: (body: PerformanceConsentBody) => Promise<unknown> | unknown
+  formatAmount?: AmountFormatter
+}
+
+export interface SubscriptionStartDialogProps extends LegalDialogProps {
+  view: SubscriptionStartView | null
+  /** The plan's title, as the application names it — it is part of the statement. */
+  planTitle: string
+  /** What the application shows about the price (amount, split, tax) above the statement. */
+  price?: ReactNode
+  onConfirm: (body: SubscriptionStartBody) => Promise<unknown> | unknown
+}
+
+/** Where a declaration is made: signed in (a candidate list) or on the public page (a contract reference). */
+export type DeclarationMode = 'in-app' | 'public'
+
+/** The three steps every statutory function takes: the form, the review with the statutory button, the receipt. */
+export type DeclarationStep = 'form' | 'review' | 'receipt'
+
+export interface WithdrawalFormProps {
+  mode: DeclarationMode
+  /** The language of the contract (the billing country's); the form shows its legal copy in it. */
+  language: string
+  uiLanguage?: string
+  /** In-app: the contracts that can still be withdrawn from. */
+  list?: WithdrawalCandidateList | null
+  /** Prefill. In-app, `purchaseId` (or `contractRef`) preselects a candidate. */
+  defaults?: { name?: string, email?: string, contractRef?: string, purchaseId?: string }
+  pending?: boolean
+  error?: PieceError
+  /** The answer to the submitted declaration — its presence is the receipt step. */
+  receipt?: WithdrawalReceipt | DeclarationReceipt | null
+  onSubmit: (body: WithdrawalBody) => Promise<unknown> | unknown
+  /** Offered on the receipt step. */
+  onClose?: () => void
+  formatAmount?: AmountFormatter
+  className?: string
+}
+
+export interface WithdrawalDialogProps extends Omit<WithdrawalFormProps, 'onClose' | 'className'> {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  className?: string
+}
+
+export interface WithdrawalFunctionButtonProps {
+  /** The contract language: the statutory label is shown in it. */
+  language: string
+  /** Its label in this language becomes the `title` when the two differ. Default: the active language. */
+  uiLanguage?: string
+  onClick: () => void
+  disabled?: boolean
+  variant?: 'default' | 'outline'
+  className?: string
+}
+
+export interface CancellationFormProps {
+  mode: DeclarationMode
+  language: string
+  uiLanguage?: string
+  defaults?: { name?: string, email?: string, contractRef?: string, subscriptionId?: string }
+  pending?: boolean
+  error?: PieceError
+  receipt?: CancellationReceipt | DeclarationReceipt | null
+  onSubmit: (body: CancellationBody) => Promise<unknown> | unknown
+  /** The receipt's print button; default `window.print()`. */
+  onPrint?: () => void
+  onClose?: () => void
+  className?: string
+}

package/src/consumer/withdrawal.tsx

@@ -0,0 +1,279 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { baseLanguageOf } from '@owlmeans/payment'
+import type { WithdrawalBody, WithdrawalCandidate, WithdrawalReceipt } from '@owlmeans/payment'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
+import { dayUtc, lastDayUtc, momentUtc, money } from '../format.js'
+import { legalTextOf, paymentTextOf, useLegalText, usePaymentText } from './copy.js'
+import { Choice, Field, Honeypot, isEmail } from './fields.js'
+import { ErrorLine, LanguageToggle, useShownLanguage, useUiLanguage } from './legal.js'
+import type {
+  DeclarationStep, WithdrawalDialogProps, WithdrawalFormProps, WithdrawalFunctionButtonProps,
+} from './types.js'
+
+/**
+ * The withdrawal function's entry (CRD Art. 11a; § 356a BGB "Vertrag widerrufen"; L221-21
+ * "Renoncer au contrat ici"): the statutory label in the CONTRACT language, and the interface
+ * language's label as its `title` when the two differ.
+ *
+ * `[data-withdrawal-function]` with `data-language`.
+ */
+export const WithdrawalFunctionButton = ({
+  language, uiLanguage, onClick, disabled, variant = 'outline', className,
+}: WithdrawalFunctionButtonProps) => {
+  const ui = useUiLanguage(uiLanguage)
+  const contract = baseLanguageOf(language) || ui
+  const label = legalTextOf(contract)('withdrawal.function')
+  const title = contract !== ui ? legalTextOf(ui)('withdrawal.function') : undefined
+
+  return <Button type="button" variant={variant} onClick={onClick} disabled={disabled} title={title} lang={contract}
+    data-withdrawal-function="" data-language={contract} className={className}>
+    {label}
+  </Button>
+}
+
+const isWithdrawalReceipt = (receipt: object): receipt is WithdrawalReceipt => 'status' in receipt
+
+interface Frame {
+  title: string
+  intro: string
+  language: string
+  step: DeclarationStep
+}
+
+interface StepsProps extends WithdrawalFormProps {
+  /** How the title and intro are rendered — a section heading, or a dialog's title. */
+  frame: (frame: Frame, body: ReactNode) => ReactNode
+}
+
+/** The three steps, framed by the caller. */
+const WithdrawalSteps = ({
+  mode, language: contractLanguage, uiLanguage, list, defaults, pending = false, error, receipt, onSubmit, onClose,
+  formatAmount, frame,
+}: StepsProps) => {
+  const language = useShownLanguage(contractLanguage, uiLanguage)
+  const legal = useLegalText(language.shown)
+  const text = usePaymentText(language.shown)
+  const candidates = useMemo(() => list?.candidates ?? [], [list])
+
+  const initialPurchase = (): string => {
+    const byId = candidates.find(candidate => candidate.purchaseId === defaults?.purchaseId)
+    const byRef = candidates.find(candidate => candidate.contractRef === defaults?.contractRef)
+
+    return (byId ?? byRef ?? (candidates.length === 1 ? candidates[0] : undefined))?.purchaseId ?? ''
+  }
+  const [step, setStep] = useState<'form' | 'review'>('form')
+  const [purchaseId, setPurchaseId] = useState(initialPurchase)
+  const [contractRef, setContractRef] = useState(defaults?.contractRef ?? '')
+  const [name, setName] = useState(defaults?.name ?? list?.name ?? '')
+  const [email, setEmail] = useState(defaults?.email ?? list?.email ?? '')
+  const [honeypot, setHoneypot] = useState('')
+  const [checked, setChecked] = useState(false)
+  const [submitted, setSubmitted] = useState<WithdrawalBody | null>(null)
+  useEffect(() => {
+    // The list may arrive after the form: preselect and prefill then, never over what was typed.
+    if (purchaseId === '' && candidates.length > 0) setPurchaseId(initialPurchase())
+    if (list?.name != null) setName(held => held === '' ? list.name ?? '' : held)
+    if (list?.email != null) setEmail(held => held === '' ? list.email ?? '' : held)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list])
+  useEffect(() => {
+    if (receipt == null) setStep(current => submitted == null ? current : 'form')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [receipt])
+
+  const current: DeclarationStep = receipt != null ? 'receipt' : step
+
+  const format = (minor: number, currency: string) => formatAmount != null
+    ? formatAmount(minor, currency, language.shown) : money(minor, currency, language.shown)
+  const candidate: WithdrawalCandidate | undefined = candidates.find(item => item.purchaseId === purchaseId)
+  const contract = mode === 'in-app' ? candidate?.contractRef ?? '' : contractRef.trim()
+  const errors = {
+    contract: mode === 'in-app'
+      ? (candidate == null ? text('consumer.required') : null)
+      : (contract === '' ? text('consumer.required') : null),
+    name: name.trim() === '' ? text('consumer.required') : 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 = (): WithdrawalBody => ({
+    ...(mode === 'in-app' && candidate != null
+      ? { purchaseId: candidate.purchaseId, contractRef: candidate.contractRef }
+      : { contractRef: contract }),
+    name: name.trim(),
+    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 estimateLine = (item: WithdrawalCandidate) => item.estimate != null
+    ? <span data-withdrawal-estimate="" data-refund-minor={item.estimate.refundMinor}>
+      {text('withdrawal.estimate', { amount: format(item.estimate.refundMinor, item.estimate.currency) })}
+    </span>
+    : <span data-withdrawal-estimate="" className="text-muted-foreground">{text('withdrawal.estimate-unknown')}</span>
+
+  const summary = (declared: Pick<WithdrawalBody, 'name' | 'email'> & { contract: 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">
+      <dt className="text-muted-foreground">{legal('withdrawal.name')}</dt><dd data-summary="name">{declared.name}</dd>
+      <dt className="text-muted-foreground">{legal('withdrawal.contract')}</dt><dd data-summary="contract">{declared.contract}</dd>
+      <dt className="text-muted-foreground">{legal('withdrawal.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 = isWithdrawalReceipt(receipt) ? receipt.status : undefined
+    content = <div className="grid gap-4" data-withdrawal-receipt="" data-status={status ?? 'received'}
+      data-declaration-id={receipt.declarationId} data-received-at={Number.isNaN(receivedAt.getTime()) ? undefined : receivedAt.toISOString()}>
+      <h3 className="text-sm font-medium">{text('consumer.receipt')}</h3>
+      <p className="text-sm">{receipt.mailed
+        ? legal('withdrawal.received', { date: momentUtc(receivedAt, language.shown), email: declared.email })
+        : `${text('consumer.received-at')}: ${momentUtc(receivedAt, language.shown)} (UTC). ${text('consumer.not-mailed')}`}</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-withdrawal-reference="">{receipt.declarationId}</dd>
+        <dt className="text-muted-foreground">{text('consumer.received-at')}</dt>
+        <dd data-withdrawal-received-at="">{momentUtc(receivedAt, language.shown)} (UTC)</dd>
+        <dt className="text-muted-foreground">{legal('withdrawal.name')}</dt><dd>{declared.name}</dd>
+        <dt className="text-muted-foreground">{legal('withdrawal.contract')}</dt><dd>{declared.contractRef ?? ''}</dd>
+        <dt className="text-muted-foreground">{legal('withdrawal.email')}</dt><dd>{declared.email}</dd>
+        {status != null && <>
+          <dt className="text-muted-foreground">{text('consumer.status')}</dt>
+          <dd data-withdrawal-status="">{text(`withdrawal.status.${status}`)}</dd>
+        </>}
+        {isWithdrawalReceipt(receipt) && receipt.refundMinor != null && receipt.currency != null && <>
+          <dt className="text-muted-foreground">{text('withdrawal.refund')}</dt>
+          <dd data-withdrawal-refund="" data-refund-minor={receipt.refundMinor}>{format(receipt.refundMinor, receipt.currency)}</dd>
+        </>}
+      </dl>
+      {isWithdrawalReceipt(receipt) && receipt.subscriptionCanceled === true
+        && <p className="text-sm">{text('withdrawal.subscription-canceled')}</p>}
+      {onClose != null && <div className="flex justify-end">
+        <Button type="button" variant="outline" onClick={onClose}>{text('consumer.close')}</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('withdrawal.review')}</p>
+      {summary({ name: name.trim(), email: email.trim(), contract })}
+      {mode === 'in-app' && candidate != null && <p className="text-sm">{estimateLine(candidate)}</p>}
+      <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-withdrawal-back="">{text('consumer.back')}</Button>
+        <Button type="button" disabled={pending || !valid} onClick={() => void confirm()} data-withdrawal-confirm="">
+          {pending ? text('consumer.pending') : legal('withdrawal.confirm')}
+        </Button>
+      </div>
+    </div>
+  } else {
+    content = <form className="relative grid gap-4" noValidate onSubmit={event => { event.preventDefault(); toReview() }}>
+      {mode === 'in-app'
+        ? candidates.length === 0
+          ? <p className="text-muted-foreground text-sm" data-withdrawal-none="">{text('withdrawal.none')}</p>
+          : <fieldset className="grid gap-2">
+            <legend className="mb-1 text-sm font-medium">{legal('withdrawal.contract')}</legend>
+            {candidates.map(item => <Choice
+              key={item.purchaseId} id={`withdrawal-candidate-${item.purchaseId}`} name="withdrawal-candidate"
+              checked={item.purchaseId === purchaseId} onSelect={() => setPurchaseId(item.purchaseId)} disabled={pending}
+              hook={{ 'data-withdrawal-candidate-input': item.purchaseId }}
+            >
+              <span data-withdrawal-candidate="" data-purchase-id={item.purchaseId} data-contract-ref={item.contractRef}
+                className="grid gap-0.5">
+                <span className="font-medium">{item.contractRef} · {text(`withdrawal.kind.${item.kind}`)}</span>
+                <span className="text-muted-foreground text-xs">
+                  {text('withdrawal.purchased', { date: dayUtc(item.purchasedAt, language.shown) })}
+                  {' · '}{text('withdrawal.paid', { amount: format(item.amountTotalMinor, item.currency) })}
+                  {' · '}{text('withdrawal.until', { date: lastDayUtc(item.deadline, language.shown) })}
+                </span>
+                <span className="text-xs">{estimateLine(item)}</span>
+              </span>
+            </Choice>)}
+            {shown('contract') != null && <p className="text-destructive text-xs">{shown('contract')}</p>}
+          </fieldset>
+        : <Field id="withdrawal-contract" label={legal('withdrawal.contract')} value={contractRef} onChange={setContractRef}
+          error={shown('contract')} disabled={pending} hook={{ 'data-withdrawal-field': 'contract' }} />}
+      <Field id="withdrawal-name" label={legal('withdrawal.name')} value={name} onChange={setName} error={shown('name')}
+        autoComplete="name" disabled={pending} hook={{ 'data-withdrawal-field': 'name' }} />
+      <Field id="withdrawal-email" type="email" label={legal('withdrawal.email')} value={email} onChange={setEmail}
+        error={shown('email')} autoComplete="email" disabled={pending} hook={{ 'data-withdrawal-field': 'email' }} />
+      {mode === 'public' && <Honeypot id="withdrawal-website" label={text('consumer.website')} value={honeypot} onChange={setHoneypot} />}
+      <ErrorLine error={error} text={text} />
+      <div className="flex justify-end">
+        <Button type="submit" disabled={pending || (mode === 'in-app' && candidates.length === 0)} data-withdrawal-continue="">
+          {text('consumer.continue')}
+        </Button>
+      </div>
+    </form>
+  }
+
+  return frame({ title: legal('withdrawal.title'), intro: legal('withdrawal.intro'), language: language.shown, step: current }, <>
+    <LanguageToggle language={language} hook="data-withdrawal-language-toggle" />
+    <div data-withdrawal-form="" data-withdrawal-step={current} data-step={current} data-mode={mode}
+      data-language={language.shown} lang={language.shown} className="grid gap-4">
+      {content}
+    </div>
+  </>)
+}
+
+/**
+ * The withdrawal function as a page section: the form (in-app a contract picker with the estimated
+ * refund, publicly a contract reference — and nothing but name, contract and e-mail is asked),
+ * the review with the statutory confirm button ("Confirm withdrawal", "Widerruf bestätigen",
+ * "Confirmer la rétractation"), and the receipt with the date and time of receipt in UTC. Legal
+ * copy in the contract language, with a toggle to the interface language.
+ *
+ * Selectors: `[data-withdrawal-form]` / `[data-withdrawal-step="form|review|receipt"]` (also
+ * `data-step`, `data-language`, `data-mode`), `[data-withdrawal-candidate]` (`data-purchase-id`),
+ * `[data-withdrawal-estimate]`, `[data-withdrawal-field="contract|name|email"]`,
+ * `[data-withdrawal-continue]`, `[data-withdrawal-confirm]`, `[data-withdrawal-receipt]`
+ * (`data-status`, `data-declaration-id`, `data-received-at`), `[data-withdrawal-reference]`.
+ */
+export const WithdrawalForm = ({ className, ...props }: WithdrawalFormProps) => <WithdrawalSteps
+  {...props}
+  frame={(frame, body) => <section className={cn('grid gap-4', className)} data-withdrawal-section=""
+    data-language={frame.language}>
+    <header className="grid gap-1.5" lang={frame.language}>
+      <h2 className="text-lg font-semibold leading-none">{frame.title}</h2>
+      {frame.step === 'form' && <p className="text-muted-foreground text-sm">{frame.intro}</p>}
+    </header>
+    {body}
+  </section>}
+/>
+
+/**
+ * `WithdrawalForm` in a dialog: `[data-withdrawal-dialog]` carries `data-language` and `data-step`.
+ * Closing it does not clear a receipt the application holds — reset it when the dialog closes.
+ */
+export const WithdrawalDialog = ({ open, onOpenChange, className, ...props }: WithdrawalDialogProps) =>
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    {open && <WithdrawalSteps
+      {...props}
+      onClose={() => onOpenChange(false)}
+      frame={(frame, body) => <DialogContent
+        closeLabel={paymentTextOf(frame.language)('consumer.close')}
+        data-withdrawal-dialog="" data-language={frame.language} data-step={frame.step}
+        className={cn('max-h-[90vh] overflow-y-auto', className)}
+      >
+        <div className="grid gap-2" lang={frame.language}>
+          <DialogTitle>{frame.title}</DialogTitle>
+          <DialogDescription className={frame.step === 'form' ? undefined : 'sr-only'}>{frame.intro}</DialogDescription>
+        </div>
+        {body}
+      </DialogContent>}
+    />}
+  </Dialog>

package/src/copy.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react'
+import { useI18nLib, useLanguage } from '@owlmeans/client-i18n'
+import type { PromoView } from '@owlmeans/payment'
+import { promoInscriptionOf } from './selectors.js'
+
+/**
+ * A calendar date in UTC — the calendar limit windows are counted in, so "resets on" names the day
+ * the counter actually rolls. An unparseable date renders as nothing.
+ */
+const formatDay = (date: Date | string | null | undefined, locale: string): string => {
+  if (date == null) {
+    return ''
+  }
+  const value = date instanceof Date ? date : new Date(date)
+  if (Number.isNaN(value.getTime())) {
+    return ''
+  }
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' }).format(value)
+  } catch {
+    return value.toISOString().slice(0, 10)
+  }
+}
+
+const formatCount = (value: number, locale: string): string => {
+  try {
+    return new Intl.NumberFormat(locale).format(value)
+  } catch {
+    return String(value)
+  }
+}
+
+export interface EntitlementCopy {
+  text: (key: string, values?: Record<string, string>) => string
+  day: (date: Date | string | null | undefined) => string
+  count: (value: number) => string
+}
+
+/** The `entitlement` branch of the `web-payment` library resource, with locale-aware formatting. */
+export const useEntitlementCopy = (): EntitlementCopy => {
+  const t = useI18nLib('web-payment', 'entitlement')
+  const [locale] = useLanguage()
+
+  return useMemo(() => ({
+    // React escapes what it renders; i18next escaping on top would print `&#x2F;` for a slash.
+    text: (key, values) => t(key, { ...values, interpolation: { escapeValue: false } }),
+    day: date => formatDay(date, locale),
+    count: value => formatCount(value, locale),
+  }), [t, locale])
+}
+
+/** The inscription of a promo: free until its end, kept for a grandfathered plan, or ended. */
+export const PromoNote = ({ promo, copy }: { promo?: PromoView, copy: EntitlementCopy }) => {
+  const kind = promoInscriptionOf(promo)
+  if (kind == null || promo == null) {
+    return null
+  }
+
+  return <span data-promo={kind} className={kind === 'ended' ? 'text-muted-foreground' : 'text-primary'}>
+    {copy.text(`promo.${kind}`, { date: copy.day(promo.until) })}
+  </span>
+}