@cosmicdrift/kumiko-samples 0.397.0 → 0.398.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-samples",
-  "version": "0.397.0",
+  "version": "0.398.0",
   "description": "Source trees of the Kumiko sample recipes, sample apps and bundled features in repo layout, for tooling such as few-shot corpus builds.",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",

package/packages/bundled-features/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.397.0",
+  "version": "0.398.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -179,10 +179,10 @@
     "@types/qrcode": "^1.5.5",
     "clsx": "^2.1.1",
     "happy-dom": "^21.0.4",
-    "hono": "^4.13.1",
+    "hono": "^4.13.14",
     "imapflow": "^1.7.8",
     "ioredis": "^5.10.1",
-    "jose": "^6.2.3",
+    "jose": "^6.2.13",
     "lucide-react": "^1.14.0",
     "mailparser": "^3.12.4",
     "marked": "^18.0.3",
@@ -752,7 +752,7 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "^14.6.8",
     "@cosmicdrift/kumiko-locale-de": "workspace:*",
     "@cosmicdrift/kumiko-locale-es": "workspace:*",
     "@cosmicdrift/kumiko-locale-fr": "workspace:*",

package/packages/bundled-features/src/billing-foundation/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.398.0",
+    "type": "improvement",
+    "title": "Consent box takes a refund policy link and an optional documents checkbox",
+    "detail": "`legalLinks.refund` is rendered next to the other links in the checkout and plan-switch dialogs. `consumerProtection.documentsAcknowledgement: true` adds a required first checkbox whose text depends on whether a refund link is set for the locale. The text joins `consentTextVersion` only when the option is on, `start-plan-checkout`, `create-checkout-session` and `switch-plan` then reject a consent without `documentsAcknowledged: true` with 422 `consent_required`, and the recorded consent stores the flag. Without the option nothing changes, including the version. New i18n key `billing-foundation.consent.link.refund`."
+  },
   {
     "version": "0.394.0",
     "type": "improvement",

package/packages/bundled-features/src/billing-foundation/consumer-protection/consent-gate.ts

@@ -20,7 +20,12 @@ import {
   SUBSCRIPTION_AGGREGATE_TYPE,
 } from "../events.ts";
 import type { ConsumerProtectionOptions, ProviderPrice } from "../types.ts";
-import { consentTextVersion, resolveConsentLocale, submitMessageFor } from "./consent-text.ts";
+import {
+  consentTextVersion,
+  documentsAcknowledgementTextFor,
+  resolveConsentLocale,
+  submitMessageFor,
+} from "./consent-text.ts";
 
 export type CheckoutMode = "subscription" | "payment";
 
@@ -30,6 +35,7 @@ export const consentPayloadSchema = z
   .object({
     earlyPerformanceRequested: z.boolean(),
     withdrawalLossAcknowledged: z.boolean(),
+    documentsAcknowledged: z.boolean().optional(),
     consentTextVersion: z.string().min(1).max(64),
     locale: z.string().min(2).max(35),
   })
@@ -42,6 +48,7 @@ export type PreparedConsent = {
   readonly locale: string;
   readonly submitMessage: string;
   readonly consentTextVersion: string;
+  readonly documentsAcknowledged: boolean;
   readonly termsHash: string;
   readonly termsTemplateVersion: number;
 };
@@ -88,14 +95,20 @@ export async function prepareConsent(
   consent: ConsentPayload | undefined,
   mode: CheckoutMode,
 ): Promise<PreparedConsent> {
-  if (!consent?.earlyPerformanceRequested || !consent.withdrawalLossAcknowledged) {
+  const documentsRequired = options.documentsAcknowledgement === true;
+  if (
+    !consent?.earlyPerformanceRequested ||
+    !consent.withdrawalLossAcknowledged ||
+    (documentsRequired && consent.documentsAcknowledged !== true)
+  ) {
     throw new UnprocessableError("consent_required", {
       i18nKey: "billing-foundation.errors.consentRequired",
-      message: "billing-foundation: both consent flags must be true to start a checkout",
+      message: "billing-foundation: all consent flags must be true to start a checkout",
     });
   }
   const locale = resolveConsentLocale(consent.locale);
-  if (consent.consentTextVersion !== consentTextVersion(locale)) {
+  const documentsText = documentsAcknowledgementTextFor(options, locale);
+  if (consent.consentTextVersion !== consentTextVersion(locale, documentsText)) {
     throw new UnprocessableError("consent_text_outdated", {
       i18nKey: "billing-foundation.errors.consentTextOutdated",
       message: `billing-foundation: consent text version "${consent.consentTextVersion}" is not current for locale "${locale}"`,
@@ -128,6 +141,7 @@ export async function prepareConsent(
     locale,
     submitMessage: submitMessageFor(locale, mode),
     consentTextVersion: consent.consentTextVersion,
+    documentsAcknowledged: documentsRequired,
     termsHash: createHash("sha256").update(terms.content).digest("hex"),
     termsTemplateVersion: terms.version,
   };
@@ -160,6 +174,7 @@ export async function recordConsent(
     interval: details.price?.interval ?? null,
     intervalCount: details.price?.intervalCount ?? null,
     consentTextVersion: prepared.consentTextVersion,
+    ...(prepared.documentsAcknowledged && { documentsAcknowledged: true }),
     termsHash: prepared.termsHash,
     termsTemplateVersion: prepared.termsTemplateVersion,
     locale: prepared.locale,

package/packages/bundled-features/src/billing-foundation/consumer-protection/consent-text.ts

@@ -1,4 +1,5 @@
 import { createHash } from "node:crypto";
+import { type ConsumerProtectionOptions, isLegalLinkSet, type LegalLinkSet } from "../types.ts";
 import type { ConsentLocale } from "../web/consumer-protection/consent-locale.ts";
 
 export {
@@ -39,14 +40,52 @@ export const CONSENT_TEXTS: Readonly<Record<ConsentLocale, ConsentTexts>> = {
   },
 };
 
+const DOCUMENTS_ACKNOWLEDGEMENT_TEXTS: Readonly<
+  Record<ConsentLocale, { readonly withRefund: string; readonly withoutRefund: string }>
+> = {
+  de: {
+    withRefund:
+      "Ich habe die AGB, die Erstattungsrichtlinie und die Datenschutzerklärung gelesen. Mit den AGB und der Erstattungsrichtlinie bin ich einverstanden.",
+    withoutRefund:
+      "Ich habe die AGB und die Datenschutzerklärung gelesen. Mit den AGB bin ich einverstanden.",
+  },
+  en: {
+    withRefund:
+      "I have read the Terms, the Refund Policy and the Privacy Policy, and I agree to the Terms and the Refund Policy.",
+    withoutRefund: "I have read the Terms and the Privacy Policy, and I agree to the Terms.",
+  },
+};
+
+export function legalLinksPerLocale(
+  legalLinks: ConsumerProtectionOptions["legalLinks"],
+): Readonly<Record<ConsentLocale, LegalLinkSet>> {
+  return isLegalLinkSet(legalLinks) ? { de: legalLinks, en: legalLinks } : legalLinks;
+}
+
+/** The documents checkbox text for a locale, or undefined when the app did not
+ *  opt in. The variant follows whether that locale has a refund link. */
+export function documentsAcknowledgementTextFor(
+  options: ConsumerProtectionOptions,
+  locale: ConsentLocale,
+): string | undefined {
+  if (!options.documentsAcknowledgement) return undefined;
+  const texts = DOCUMENTS_ACKNOWLEDGEMENT_TEXTS[locale];
+  return legalLinksPerLocale(options.legalLinks)[locale].refund !== undefined
+    ? texts.withRefund
+    : texts.withoutRefund;
+}
+
 const CONSENT_TEXT_VERSION_LENGTH = 16;
 
-export function consentTextVersion(locale: ConsentLocale): string {
+// The documents text joins the hash only when shown, so apps without the opt-in keep their version.
+export function consentTextVersion(
+  locale: ConsentLocale,
+  documentsAcknowledgementText?: string,
+): string {
   const { earlyPerformance, withdrawalLoss } = CONSENT_TEXTS[locale];
-  return createHash("sha256")
-    .update(`${earlyPerformance}\n${withdrawalLoss}`)
-    .digest("hex")
-    .slice(0, CONSENT_TEXT_VERSION_LENGTH);
+  const hash = createHash("sha256").update(`${earlyPerformance}\n${withdrawalLoss}`);
+  if (documentsAcknowledgementText !== undefined) hash.update(`\n${documentsAcknowledgementText}`);
+  return hash.digest("hex").slice(0, CONSENT_TEXT_VERSION_LENGTH);
 }
 
 export function submitMessageFor(locale: ConsentLocale, mode: "subscription" | "payment"): string {

package/packages/bundled-features/src/billing-foundation/events.ts

@@ -139,6 +139,7 @@ export const checkoutConsentRecordedPayloadSchema = z.object({
   interval: z.string().nullable(),
   intervalCount: z.number().nullable(),
   consentTextVersion: z.string().min(1).max(64),
+  documentsAcknowledged: z.boolean().optional(),
   termsHash: z.string().length(64),
   termsTemplateVersion: z.number(),
   locale: z.string().min(2).max(35),

package/packages/bundled-features/src/billing-foundation/handlers/billing-plans.query.ts

@@ -13,6 +13,8 @@ import {
   type CONSENT_LOCALES,
   CONSENT_TEXTS,
   consentTextVersion,
+  documentsAcknowledgementTextFor,
+  legalLinksPerLocale,
 } from "../consumer-protection/consent-text.ts";
 import {
   type BillingPlansBase,
@@ -21,14 +23,12 @@ import {
   type ProviderPlanViews,
   toBillingPlansResult,
 } from "../plan-catalog.ts";
-import {
-  type BillingPlanCatalog,
-  type BillingPlansResult,
-  type BillingProviderView,
-  type ConsumerProtectionOptions,
-  isLegalLinkSet,
-  type LegalLinkSet,
-  type ResolvedBillingFoundationOptions,
+import type {
+  BillingPlanCatalog,
+  BillingPlansResult,
+  BillingProviderView,
+  ConsumerProtectionOptions,
+  ResolvedBillingFoundationOptions,
 } from "../types.ts";
 
 const billingPlansSchema = z.object({}).strict();
@@ -52,8 +52,8 @@ export function createBillingPlansQuery(
         ...result,
         consumerProtection: {
           consentTexts: {
-            de: consentTextView("de"),
-            en: consentTextView("en"),
+            de: consentTextView(consumerProtection, "de"),
+            en: consentTextView(consumerProtection, "en"),
           },
           legalLinks: legalLinksPerLocale(consumerProtection.legalLinks),
         },
@@ -116,13 +116,16 @@ async function providerView(
   };
 }
 
-function legalLinksPerLocale(
-  legalLinks: ConsumerProtectionOptions["legalLinks"],
-): Readonly<Record<(typeof CONSENT_LOCALES)[number], LegalLinkSet>> {
-  return isLegalLinkSet(legalLinks) ? { de: legalLinks, en: legalLinks } : legalLinks;
-}
-
-function consentTextView(locale: (typeof CONSENT_LOCALES)[number]) {
+function consentTextView(
+  consumerProtection: ConsumerProtectionOptions,
+  locale: (typeof CONSENT_LOCALES)[number],
+) {
   const { earlyPerformance, withdrawalLoss } = CONSENT_TEXTS[locale];
-  return { earlyPerformance, withdrawalLoss, consentTextVersion: consentTextVersion(locale) };
+  const documentsAcknowledgement = documentsAcknowledgementTextFor(consumerProtection, locale);
+  return {
+    earlyPerformance,
+    withdrawalLoss,
+    ...(documentsAcknowledgement !== undefined && { documentsAcknowledgement }),
+    consentTextVersion: consentTextVersion(locale, documentsAcknowledgement),
+  };
 }

package/packages/bundled-features/src/billing-foundation/i18n.ts

@@ -83,6 +83,7 @@ export const BILLING_FOUNDATION_I18N: Readonly<Record<string, LocalizedString>>
   "billing-foundation.consent.link.terms": { en: "Terms" },
   "billing-foundation.consent.link.withdrawal": { en: "Withdrawal policy" },
   "billing-foundation.consent.link.privacy": { en: "Privacy policy" },
+  "billing-foundation.consent.link.refund": { en: "Refund policy" },
   "billing-foundation.consent.order": { en: "Order with obligation to pay" },
   "billing-foundation.plans.priceFrom": { en: "from" },
   "billing-foundation.consent.chooseProvider": { en: "Payment provider" },

package/packages/bundled-features/src/billing-foundation/types.ts

@@ -459,6 +459,8 @@ export type LegalLinkSet = {
   readonly terms: string;
   readonly withdrawal: string;
   readonly privacy: string;
+  /** Link to the refund policy; shown next to the other links when set. */
+  readonly refund?: string;
 };
 
 export function isLegalLinkSet(
@@ -510,6 +512,9 @@ export type ConsumerProtectionOptions = {
   /** Root-relative paths or absolute https URLs. One set for every locale, or
    *  one set per consent locale (`de` and `en` required). */
   readonly legalLinks: LegalLinkSet | Readonly<Record<ConsentLocale, LegalLinkSet>>;
+  /** Adds a required first checkbox "documents read and accepted" (terms, privacy,
+   *  and the refund policy when `legalLinks.refund` is set). Off by default. */
+  readonly documentsAcknowledgement?: boolean;
 };
 
 export type OneOffCheckoutRequest = {
@@ -621,6 +626,8 @@ export type BillingPlansResult = {
         {
           readonly earlyPerformance: string;
           readonly withdrawalLoss: string;
+          /** Present only when `documentsAcknowledgement` is on. */
+          readonly documentsAcknowledgement?: string;
           readonly consentTextVersion: string;
         }
       >

package/packages/bundled-features/src/billing-foundation/validate-options.ts

@@ -96,7 +96,9 @@ function validatePerLocaleLegalLinks(
 
 function validateLegalLinkSet(set: LegalLinkSet, path: string): void {
   for (const [key, link] of Object.entries(set)) {
-    if (!isRootRelativeOrHttpsUrl(link)) {
+    // skip: refund is optional
+    if (key === "refund" && link === undefined) continue;
+    if (typeof link !== "string" || !isRootRelativeOrHttpsUrl(link)) {
       throw new Error(
         `createBillingFoundationFeature: consumerProtection.${path}.${key} "${link}" must be a root-relative path ("/..." not "//") or an absolute https URL.`,
       );

package/packages/bundled-features/src/billing-foundation/web/checkout-consent-dialog.tsx

@@ -3,6 +3,7 @@ import type { WriteResult } from "@cosmicdrift/kumiko-renderer/headless";
 import { ChoiceCards } from "@cosmicdrift/kumiko-renderer/web";
 import { type ReactNode, useState } from "react";
 import type { BillingPlansResult } from "../types.ts";
+import { ConsentCheckboxes, ConsentLinks, useConsentFieldState } from "./consent-fields.tsx";
 import { resolveConsentLocale } from "./consumer-protection/consent-locale.ts";
 
 export const CONSENT_TEXT_OUTDATED_CODE = "consent_text_outdated";
@@ -12,6 +13,7 @@ type ConsumerProtectionView = NonNullable<BillingPlansResult["consumerProtection
 export type CheckoutConsentPayload = {
   readonly earlyPerformanceRequested: true;
   readonly withdrawalLossAcknowledged: true;
+  readonly documentsAcknowledged?: true;
   readonly consentTextVersion: string;
   readonly locale: string;
 };
@@ -60,36 +62,25 @@ export function CheckoutConsentDialog({
 }: CheckoutConsentDialogProps): ReactNode {
   const t = useTranslation();
   const uiLocale = useLocale().locale();
-  const { Modal, Text, Field, Input, Button, Link, Banner } = usePrimitives();
-  const [earlyPerformance, setEarlyPerformance] = useState(false);
-  const [withdrawalLoss, setWithdrawalLoss] = useState(false);
+  const { Modal, Text, Button, Banner } = usePrimitives();
   const [submitting, setSubmitting] = useState(false);
   const [errorText, setErrorText] = useState<string | null>(null);
 
   const consentLocale = resolveConsentLocale(uiLocale);
   const texts = consumerProtection?.consentTexts[consentLocale];
   const legalLinks = consumerProtection?.legalLinks[consentLocale];
-  const consentGiven = consumerProtection === undefined || (earlyPerformance && withdrawalLoss);
+  const consentFields = useConsentFieldState(texts);
+  const consentGiven = consumerProtection === undefined || consentFields.allGiven;
 
   async function order(): Promise<void> {
     setSubmitting(true);
     setErrorText(null);
-    const result = await onOrder(
-      texts === undefined
-        ? undefined
-        : {
-            earlyPerformanceRequested: true,
-            withdrawalLossAcknowledged: true,
-            consentTextVersion: texts.consentTextVersion,
-            locale: consentLocale,
-          },
-    );
+    const result = await onOrder(consentFields.buildPayload(consentLocale));
     if (result.isSuccess) return;
     setSubmitting(false);
     setErrorText(t(result.error.i18nKey, result.error.i18nParams));
     if (result.error.code === CONSENT_TEXT_OUTDATED_CODE) {
-      setEarlyPerformance(false);
-      setWithdrawalLoss(false);
+      consentFields.reset();
       onConsentTextOutdated();
     }
   }
@@ -135,42 +126,14 @@ export function CheckoutConsentDialog({
             </Text>
           )}
         </div>
-        {legalLinks !== undefined && (
-          <div className="flex flex-wrap gap-4">
-            <Link href={legalLinks.terms} target="_blank">
-              {t("billing-foundation.consent.link.terms")}
-            </Link>
-            <Link href={legalLinks.withdrawal} target="_blank">
-              {t("billing-foundation.consent.link.withdrawal")}
-            </Link>
-            <Link href={legalLinks.privacy} target="_blank">
-              {t("billing-foundation.consent.link.privacy")}
-            </Link>
-          </div>
-        )}
+        {legalLinks !== undefined && <ConsentLinks legalLinks={legalLinks} />}
         {texts !== undefined && (
-          <>
-            <Field id="consent-early-performance" label={texts.earlyPerformance} layout="inline">
-              <Input
-                kind="boolean"
-                id="consent-early-performance"
-                name="consent-early-performance"
-                value={earlyPerformance}
-                onChange={setEarlyPerformance}
-                disabled={submitting}
-              />
-            </Field>
-            <Field id="consent-withdrawal-loss" label={texts.withdrawalLoss} layout="inline">
-              <Input
-                kind="boolean"
-                id="consent-withdrawal-loss"
-                name="consent-withdrawal-loss"
-                value={withdrawalLoss}
-                onChange={setWithdrawalLoss}
-                disabled={submitting}
-              />
-            </Field>
-          </>
+          <ConsentCheckboxes
+            idPrefix="consent"
+            texts={texts}
+            state={consentFields}
+            disabled={submitting}
+          />
         )}
         {errorText !== null && (
           <Banner variant="error" testId="checkout-consent-error">

package/packages/bundled-features/src/billing-foundation/web/consent-fields.tsx

@@ -0,0 +1,111 @@
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import type { BillingPlansResult, LegalLinkSet } from "../types.ts";
+import type { CheckoutConsentPayload } from "./checkout-consent-dialog.tsx";
+
+type ConsumerProtectionView = NonNullable<BillingPlansResult["consumerProtection"]>;
+export type ConsentTextView = ConsumerProtectionView["consentTexts"]["de"];
+
+export type ConsentChecks = {
+  readonly documentsAcknowledged: boolean;
+  readonly earlyPerformance: boolean;
+  readonly withdrawalLoss: boolean;
+};
+
+const NOTHING_CHECKED: ConsentChecks = {
+  documentsAcknowledged: false,
+  earlyPerformance: false,
+  withdrawalLoss: false,
+};
+
+export type ConsentFieldState = {
+  readonly checks: ConsentChecks;
+  readonly setCheck: (key: keyof ConsentChecks, value: boolean) => void;
+  readonly reset: () => void;
+  readonly allGiven: boolean;
+  readonly buildPayload: (locale: string) => CheckoutConsentPayload | undefined;
+};
+
+export function useConsentFieldState(texts: ConsentTextView | undefined): ConsentFieldState {
+  const [checks, setChecks] = useState<ConsentChecks>(NOTHING_CHECKED);
+  const documentsRequired = texts?.documentsAcknowledgement !== undefined;
+  return {
+    checks,
+    setCheck: (key, value) => setChecks((current) => ({ ...current, [key]: value })),
+    reset: () => setChecks(NOTHING_CHECKED),
+    allGiven:
+      checks.earlyPerformance &&
+      checks.withdrawalLoss &&
+      (!documentsRequired || checks.documentsAcknowledged),
+    buildPayload: (locale) =>
+      texts === undefined
+        ? undefined
+        : {
+            earlyPerformanceRequested: true,
+            withdrawalLossAcknowledged: true,
+            ...(documentsRequired && { documentsAcknowledged: true }),
+            consentTextVersion: texts.consentTextVersion,
+            locale,
+          },
+  };
+}
+
+export function ConsentLinks({ legalLinks }: { readonly legalLinks: LegalLinkSet }): ReactNode {
+  const t = useTranslation();
+  const { Link } = usePrimitives();
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Link href={legalLinks.terms} target="_blank">
+        {t("billing-foundation.consent.link.terms")}
+      </Link>
+      <Link href={legalLinks.withdrawal} target="_blank">
+        {t("billing-foundation.consent.link.withdrawal")}
+      </Link>
+      <Link href={legalLinks.privacy} target="_blank">
+        {t("billing-foundation.consent.link.privacy")}
+      </Link>
+      {legalLinks.refund !== undefined && (
+        <Link href={legalLinks.refund} target="_blank">
+          {t("billing-foundation.consent.link.refund")}
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export function ConsentCheckboxes({
+  idPrefix,
+  texts,
+  state,
+  disabled,
+}: {
+  readonly idPrefix: string;
+  readonly texts: ConsentTextView;
+  readonly state: ConsentFieldState;
+  readonly disabled: boolean;
+}): ReactNode {
+  const { Field, Input } = usePrimitives();
+  const boxes: readonly { key: keyof ConsentChecks; slug: string; label: string | undefined }[] = [
+    { key: "documentsAcknowledged", slug: "documents", label: texts.documentsAcknowledgement },
+    { key: "earlyPerformance", slug: "early-performance", label: texts.earlyPerformance },
+    { key: "withdrawalLoss", slug: "withdrawal-loss", label: texts.withdrawalLoss },
+  ];
+  return (
+    <>
+      {boxes.map(({ key, slug, label }) =>
+        label === undefined ? null : (
+          <Field key={key} id={`${idPrefix}-${slug}`} label={label} layout="inline">
+            <Input
+              kind="boolean"
+              id={`${idPrefix}-${slug}`}
+              name={`${idPrefix}-${slug}`}
+              value={state.checks[key]}
+              onChange={(value) => state.setCheck(key, value)}
+              disabled={disabled}
+            />
+          </Field>
+        ),
+      )}
+    </>
+  );
+}

package/packages/bundled-features/src/billing-foundation/web/plan-switch-confirm-dialog.tsx

@@ -8,10 +8,8 @@ import {
 import { formatMoney } from "@cosmicdrift/kumiko-renderer/web";
 import { type ReactNode, useState } from "react";
 import type { BillingPlansResult, PlanSwitchPreview } from "../types.ts";
-import {
-  type CheckoutConsentPayload,
-  CONSENT_TEXT_OUTDATED_CODE,
-} from "./checkout-consent-dialog.tsx";
+import { CONSENT_TEXT_OUTDATED_CODE } from "./checkout-consent-dialog.tsx";
+import { ConsentCheckboxes, ConsentLinks, useConsentFieldState } from "./consent-fields.tsx";
 import { SubscriptionFoundationHandlers, SubscriptionFoundationQueries } from "./constants.ts";
 import { resolveConsentLocale } from "./consumer-protection/consent-locale.ts";
 import { intervalKey } from "./plan-price.ts";
@@ -53,7 +51,7 @@ export function PlanSwitchConfirmDialog({
 }: PlanSwitchConfirmDialogProps): ReactNode {
   const t = useTranslation();
   const locale = useLocale().locale();
-  const { Modal, Text, Field, Input, Button, Link, Banner } = usePrimitives();
+  const { Modal, Text, Button, Banner } = usePrimitives();
   const previewQuery = useQuery<PlanSwitchPreviewReply>(
     SubscriptionFoundationQueries.planSwitchPreview,
     { tier },
@@ -61,28 +59,19 @@ export function PlanSwitchConfirmDialog({
   const switchMutation = useMutation<{ readonly applied: true }>(
     SubscriptionFoundationHandlers.switchPlan,
   );
-  const [earlyPerformance, setEarlyPerformance] = useState(false);
-  const [withdrawalLoss, setWithdrawalLoss] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [errorText, setErrorText] = useState<string | null>(null);
 
   const consentLocale = resolveConsentLocale(locale);
   const texts = consumerProtection?.consentTexts[consentLocale];
   const legalLinks = consumerProtection?.legalLinks[consentLocale];
-  const consentGiven = consumerProtection === undefined || (earlyPerformance && withdrawalLoss);
+  const consentFields = useConsentFieldState(texts);
+  const consentGiven = consumerProtection === undefined || consentFields.allGiven;
 
   async function confirm(): Promise<void> {
     setSubmitting(true);
     setErrorText(null);
-    const consent: CheckoutConsentPayload | undefined =
-      texts === undefined
-        ? undefined
-        : {
-            earlyPerformanceRequested: true,
-            withdrawalLossAcknowledged: true,
-            consentTextVersion: texts.consentTextVersion,
-            locale: consentLocale,
-          };
+    const consent = consentFields.buildPayload(consentLocale);
     const result = await switchMutation.mutate({ tier, ...(consent && { consent }) });
     if (result.isSuccess) {
       onApplied();
@@ -91,8 +80,7 @@ export function PlanSwitchConfirmDialog({
     setSubmitting(false);
     setErrorText(t(result.error.i18nKey, result.error.i18nParams));
     if (result.error.code === CONSENT_TEXT_OUTDATED_CODE) {
-      setEarlyPerformance(false);
-      setWithdrawalLoss(false);
+      consentFields.reset();
       onConsentTextOutdated();
     }
   }
@@ -160,46 +148,14 @@ export function PlanSwitchConfirmDialog({
             <Text variant="muted">{t("billing-foundation.planSwitch.pendingNote")}</Text>
           </div>
         )}
-        {legalLinks !== undefined && (
-          <div className="flex flex-wrap gap-4">
-            <Link href={legalLinks.terms} target="_blank">
-              {t("billing-foundation.consent.link.terms")}
-            </Link>
-            <Link href={legalLinks.withdrawal} target="_blank">
-              {t("billing-foundation.consent.link.withdrawal")}
-            </Link>
-            <Link href={legalLinks.privacy} target="_blank">
-              {t("billing-foundation.consent.link.privacy")}
-            </Link>
-          </div>
-        )}
+        {legalLinks !== undefined && <ConsentLinks legalLinks={legalLinks} />}
         {texts !== undefined && (
-          <>
-            <Field
-              id="plan-switch-early-performance"
-              label={texts.earlyPerformance}
-              layout="inline"
-            >
-              <Input
-                kind="boolean"
-                id="plan-switch-early-performance"
-                name="plan-switch-early-performance"
-                value={earlyPerformance}
-                onChange={setEarlyPerformance}
-                disabled={submitting}
-              />
-            </Field>
-            <Field id="plan-switch-withdrawal-loss" label={texts.withdrawalLoss} layout="inline">
-              <Input
-                kind="boolean"
-                id="plan-switch-withdrawal-loss"
-                name="plan-switch-withdrawal-loss"
-                value={withdrawalLoss}
-                onChange={setWithdrawalLoss}
-                disabled={submitting}
-              />
-            </Field>
-          </>
+          <ConsentCheckboxes
+            idPrefix="plan-switch"
+            texts={texts}
+            state={consentFields}
+            disabled={submitting}
+          />
         )}
         {errorText !== null && (
           <Banner variant="error" testId="plan-switch-confirm-error">