@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/billing/plan-limit-notice.tsx

@@ -1,148 +0,0 @@
-import type { ComponentPropsWithRef } from "react";
-
-import { useKitLocale } from "../i18n/kit-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-import { formatNumber } from "../lib/format";
-import { AlertBanner } from "../components/alert-banner";
-import type { AlertTone } from "../components/alert-banner";
-import { ProgressBar } from "../components/progress-bar";
-import { Button } from "../components/button";
-import { useBillingLabels } from "./billing-labels";
-import type { BillingLabels } from "./billing-labels";
-
-/** RFC 3986 percent-encoding, `!'()*` too — a mail client that splits on `'` is the one
- *  that breaks "Plan limit: Ada's plots" (landing/access.ts keeps the same rule). */
-function encodeStrict(value: string): string {
-  return encodeURIComponent(value).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
-}
-
-/** The `contact` mode's mail: to support, its subject naming the dimension. */
-export function planLimitMailto(email: string, subject: string): string {
-  const to = encodeStrict(email).replace(/%40/g, "@");
-  return `mailto:${to}?subject=${encodeStrict(subject)}`;
-}
-
-/** A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
- *  go on to the {@link AlertBanner}, so the ref is the notice's `<div>` — its `href` is the
- *  action button's, never the banner's, so the frame is never a link. */
-interface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
-  /** The dimension as the refusal names it (`"budgets"`, `"seats"`) — `isPlanLimit(err)`'s
-   *  `dimension`. Carried as `data-dimension`. */
-  dimension: string;
-  /** The app's name for it, in the reader's language: "Budgets". Default: the key. */
-  dimensionLabel?: string;
-  /** How many there are. Left out (keksdose's legacy `plan_budget_limit` body has no
-   *  `used`), it is read as `limit`: the create was refused for being at it. */
-  used?: number;
-  /** The plan's limit for the dimension. Left out — a body without one — the notice says
-   *  its words and draws no meter. */
-  limit?: number;
-  /** The payer's plan code, as `isPlanLimit` reads it — carried as `data-plan`, so the
-   *  refusal can be spread in whole: `<PlanLimitNotice {...isPlanLimit(err)} …/>`. */
-  plan?: string;
-  /** How a figure is written — kastlan's storage limit is bytes (`formatFileSize`).
-   *  Default: a number in the kit's locale. */
-  formatValue?: (value: number) => string;
-  /** Over the provider's locale, for the default figures. */
-  locale?: string;
-  /** Default `warning`. */
-  tone?: AlertTone;
-  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
-  labels?: LabelOverride<BillingLabels>;
-}
-
-export type PlanLimitNoticeProps = PlanLimitNoticeBaseProps &
-  (
-    | {
-        /** Plans are bought: "Choose a plan" → the app's subscription page. */
-        mode: "upgrade";
-        /** The subscription page. */
-        href: string;
-        email?: never;
-      }
-    | {
-        /** The operator grants plans by hand (keksdose's today): "Ask for more" → a mail. */
-        mode: "contact";
-        /** The support address: `support@` the app's domain. */
-        email: string;
-        href?: never;
-      }
-  );
-
-/**
- * A create refused at the plan's limit (docs/billing-harmonization.md §3.4): "Plan limit
- * reached", what to do, the dimension's meter ("Budgets — 3 of 3") and the app's way to
- * more — `upgrade`, a link to the subscription page, or `contact`, a mail to support.
- *
- * A limit gates CREATION only: a downgrade never deletes or hides what is over the new
- * limit (§3.4), so `used` may be past `limit`; the meter then fills and turns red. Feed it
- * the refusal: `const hit = isPlanLimit(err); hit && <PlanLimitNotice {...hit} …/>`. The
- * kit sends nothing — the mail opens the reader's own client.
- */
-export function PlanLimitNotice(props: PlanLimitNoticeProps) {
-  const {
-    dimension,
-    dimensionLabel,
-    used: usedProp,
-    limit,
-    plan,
-    formatValue,
-    locale: localeProp,
-    tone = "warning",
-    labels: labelsProp,
-    mode,
-    href,
-    email,
-    className,
-    ...rest
-  } = props;
-  const labels = useBillingLabels(labelsProp);
-  const locale = useKitLocale(localeProp);
-  const used = usedProp ?? limit ?? 0;
-  const name = dimensionLabel ?? dimension;
-  const figure = (value: number) => (formatValue ? formatValue(value) : formatNumber(value, { locale }));
-
-  const action =
-    mode === "upgrade" ? (
-      <Button href={href} variant="secondary" size="sm">
-        {labels.choosePlan}
-      </Button>
-    ) : (
-      <Button href={planLimitMailto(email, labels.contactSubject(name))} variant="secondary" size="sm">
-        {labels.askForMore}
-      </Button>
-    );
-
-  return (
-    <AlertBanner
-      {...rest}
-      tone={tone}
-      action={action}
-      data-plan-limit-mode={mode}
-      data-dimension={dimension}
-      data-plan={plan}
-      className={className}
-    >
-      <span className="block font-medium">{labels.limitReached}</span>
-      <span className="block">{mode === "upgrade" ? labels.limitUpgrade : labels.limitContact}</span>
-      {limit !== undefined && (
-        <ProgressBar
-          as="span"
-          variant="meter"
-          size="slim"
-          value={used}
-          max={limit}
-          label={name}
-          showValue
-          // The bar is clamped at `max` and hands its formatter the clamped value; the
-          // figures are the real ones, so "5 of 3" after a downgrade says what the bar
-          // cannot draw.
-          formatValue={() => labels.usage(figure(used), figure(limit))}
-          tone={used > limit ? "danger" : "warning"}
-          className="mt-2"
-          locale={locale}
-        />
-      )}
-    </AlertBanner>
-  );
-}

package/src/billing/plan-limit-toast.tsx

@@ -1,90 +0,0 @@
-import { useCallback } from "react";
-
-import { useKitLocale } from "../i18n/kit-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-import { documentNavigation } from "../lib/document-navigation";
-import { formatNumber } from "../lib/format";
-import { toast } from "../components/toast";
-import type { ToastAction, ToastId } from "../components/toast";
-import { useBillingLabels } from "./billing-labels";
-import type { BillingLabels } from "./billing-labels";
-import type { PlanLimitRefusal } from "./plan-limit";
-import { planLimitMailto } from "./plan-limit-notice";
-
-export interface PlanLimitToastOptions {
-  /** `upgrade`: plans are bought — "Choose a plan". `contact`: the operator grants them
-   *  by hand — "Ask for more", a mail to support. */
-  mode: "upgrade" | "contact";
-  /** `upgrade`: the app's navigation to its subscription page (the kit has no router).
-   *  Left out, the toast has no action. */
-  onChoosePlan?: () => void;
-  /** `contact`: support@ the app's domain, opened as `planLimitMailto(email,
-   *  contactSubject(name))`. Left out, the toast has no action. */
-  email?: string;
-  /** The app's word per dimension: `{ budgets: "Budgets", scans: "Scans this month" }`.
-   *  A dimension without one is named by its key. */
-  dimensionLabels?: Readonly<Record<string, string>>;
-  /** How a figure is written — kastlan's storage limit is bytes. Default: a number in
-   *  the kit's locale. */
-  formatValue?: (dimension: string, value: number) => string;
-  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
-  labels?: LabelOverride<BillingLabels>;
-}
-
-/**
- * `PlanLimitNotice`'s words as a toast (docs/billing-harmonization.md §14.11), for a
- * refused create with no room for the notice — a row's button, a share target: "Plan
- * limit reached", what to do, the figure when the refusal has one ("Budgets: 3 of 3"),
- * and the mode's action.
- *
- *     const showLimit = usePlanLimitToast({
- *       mode: "upgrade",
- *       onChoosePlan: () => navigate("/settings/subscription"),
- *       dimensionLabels: { budgets: t("billing.dim_budgets") },
- *     });
- *     catch (err) { const hit = isPlanLimit(err); if (hit) showLimit(hit); }
- *
- * One toast per dimension: its id is `plan-limit:<dimension>`, so a repeat replaces it
- * in place instead of stacking a second (keksdose's own hook stacked). Called with no
- * hit, it says the words without a figure, under `plan-limit`. No `limit` in the
- * refusal, no figure line; keksdose's legacy `plan_budget_limit` reads as `budgets`
- * (`isPlanLimit`, §12.16). Returns the toast's id.
- */
-export function usePlanLimitToast(options: PlanLimitToastOptions): (hit?: PlanLimitRefusal) => ToastId {
-  const { mode, onChoosePlan, email, dimensionLabels, formatValue, labels: labelsProp } = options;
-  const labels = useBillingLabels(labelsProp);
-  const locale = useKitLocale();
-  return useCallback(
-    (hit?: PlanLimitRefusal) => {
-      const dimension = hit?.dimension ?? "";
-      const name = dimensionLabels?.[dimension] ?? dimension;
-      const figure = (value: number) => (formatValue ? formatValue(dimension, value) : formatNumber(value, { locale }));
-      // A body without `used` was refused for being AT the limit (PlanLimitNotice's rule).
-      const usage =
-        hit?.limit !== undefined
-          ? labels.limitUsageLine(name, figure(hit.used ?? hit.limit), figure(hit.limit))
-          : undefined;
-      const action: ToastAction | undefined =
-        mode === "upgrade"
-          ? onChoosePlan && { label: labels.choosePlan, onClick: () => onChoosePlan() }
-          : email
-            ? {
-                label: labels.askForMore,
-                // A mailto: hands the address to the reader's mail client; the page stays.
-                onClick: () => documentNavigation.replace(planLimitMailto(email, labels.contactSubject(name))),
-              }
-            : undefined;
-      return toast.warning(labels.limitReached, {
-        id: dimension ? `plan-limit:${dimension}` : "plan-limit",
-        description: (
-          <span data-plan-limit-mode={mode} data-dimension={dimension || undefined}>
-            <span className="block">{mode === "upgrade" ? labels.limitUpgrade : labels.limitContact}</span>
-            {usage !== undefined && <span className="block tabular-nums">{usage}</span>}
-          </span>
-        ),
-        action,
-      });
-    },
-    [mode, onChoosePlan, email, dimensionLabels, formatValue, labels, locale],
-  );
-}

package/src/billing/plan-limit.ts

@@ -1,52 +0,0 @@
-import { errorBodyWithCode } from "../auth/auth-errors";
-
-/** What {@link isPlanLimit} reads off a `plan_limit` refusal (docs/billing-harmonization.md
- *  §3.4): `402 {detail, code: "plan_limit", dimension, plan, limit, used}`. */
-export interface PlanLimitRefusal {
-  /** The limited dimension, as the app's catalogue names it: `"budgets"`, `"seats"`. */
-  dimension: string;
-  /** The payer's plan code, lowercased (§12.16: reads compare without case, and
-   *  keksdose's legacy body still says `"FREE"`). `undefined` when the body has none. */
-  plan: string | undefined;
-  /** The plan's limit for the dimension. `undefined` when the body has none. */
-  limit: number | undefined;
-  /** How many there are. `undefined` when the body has none — keksdose's legacy
-   *  `plan_budget_limit` body never had it. */
-  used: number | undefined;
-}
-
-/** keksdose's code before §3.4: `402 {detail, code: "plan_budget_limit", plan, limit}`. */
-const LEGACY_BUDGET_LIMIT = "plan_budget_limit";
-
-const text = (value: unknown): string | undefined => (typeof value === "string" && value !== "" ? value : undefined);
-const count = (value: unknown): number | undefined =>
-  typeof value === "number" && Number.isFinite(value) ? value : undefined;
-
-/**
- * The plan-limit refusal `err` carries — `{dimension, plan, limit, used}` — or
- * `undefined` when it is not one (docs/billing-harmonization.md §3.4):
- *
- *     catch (err) {
- *       const hit = isPlanLimit(err);
- *       if (hit) return setLimit(hit); // → <PlanLimitNotice {...hit} mode="upgrade" href="/settings/subscription" />
- *     }
- *
- * The body is found where `authErrorCode` finds a code — axios' `err.response.data`,
- * ofetch's `err.data`, a generated client's `err.body`, or `err` itself — and FastAPI's
- * nested `{detail: {code, …}}` too; the extra fields are read beside the code.
- *
- * keksdose's old code, `plan_budget_limit`, is read as `dimension: "budgets"` (§12.16):
- * its frontend accepts both codes for a release, because installed PWAs run the previous
- * bundle while the server switches.
- */
-export function isPlanLimit(err: unknown): PlanLimitRefusal | undefined {
-  const body = errorBodyWithCode(err, (code) => code === "plan_limit" || code === LEGACY_BUDGET_LIMIT);
-  if (!body) return undefined;
-  const legacy = body.code === LEGACY_BUDGET_LIMIT;
-  return {
-    dimension: text(body.dimension) ?? (legacy ? "budgets" : ""),
-    plan: text(body.plan)?.toLowerCase(),
-    limit: count(body.limit),
-    used: count(body.used),
-  };
-}

package/src/billing/plan-price.ts

@@ -1,98 +0,0 @@
-import { currencyMinorDigits, formatMoney } from "../lib/format";
-
-/**
- * Money and periods of the plan catalogue (docs/billing-harmonization.md §3.1, §4, §12.17).
- *
- * Money crosses the wire as INTEGER MINOR UNITS plus an ISO currency, never as a float
- * (§4): 4900 CHF is CHF 49.00. The kit turns it into the reader's notation with
- * `formatMoney`, so no app divides by 100 by hand.
- */
-
-/** A billing period: the provider charges per month or per year. */
-export type BillingInterval = "month" | "year";
-
-/** The two currencies every app sells in (§2.6). */
-export type BillingCurrency = "CHF" | "EUR";
-
-/**
- * The periods in the order the picker offers them — YEARLY FIRST (§12.17): a Merchant of
- * Record takes about 5 % + 0.50 per transaction, so a small monthly price loses a fifth
- * of itself (CHF 3 a month loses about 22 %). The page leads with the yearly price.
- */
-export const BILLING_INTERVALS: readonly BillingInterval[] = Object.freeze(["year", "month"]);
-
-/** One currency's prices, in minor units, per period. A period left out is not offered. */
-export type PlanIntervalPrices = Partial<Record<BillingInterval, number>>;
-
-/** A plan's prices as server-kit's `PlanSpec.prices` sends them: currency → period →
- *  minor units, GROSS (§12.17). */
-export type PlanPrices = Partial<Record<BillingCurrency, PlanIntervalPrices>>;
-
-/**
- * What one plan costs in one currency and period:
- * - `price` — a gross amount in minor units;
- * - `free` — a plan with no prices at all (keksdose's free plan), or a price of 0;
- * - `not-offered` — a plan with prices, but none for this currency and period.
- */
-export type PlanPriceAnswer = { kind: "price"; minor: number } | { kind: "free" } | { kind: "not-offered" };
-
-/** Whether a price table holds any figure at all. */
-function hasAnyPrice(prices: PlanPrices | null | undefined): boolean {
-  if (!prices) return false;
-  return Object.values(prices).some(
-    (byInterval) => byInterval && Object.values(byInterval).some((v) => typeof v === "number"),
-  );
-}
-
-/** What `prices` says for `currency` and `interval` — see {@link PlanPriceAnswer}. */
-export function planPrice(
-  prices: PlanPrices | null | undefined,
-  currency: BillingCurrency,
-  interval: BillingInterval,
-): PlanPriceAnswer {
-  const minor = prices?.[currency]?.[interval];
-  if (typeof minor === "number" && Number.isFinite(minor)) {
-    return minor === 0 ? { kind: "free" } : { kind: "price", minor };
-  }
-  return hasAnyPrice(prices) ? { kind: "not-offered" } : { kind: "free" };
-}
-
-/** Minor units as the amount: 4900 CHF → 49, 1250 EUR → 12.5. The currency's minor unit
- *  comes from `Intl` (CHF and EUR have 2); a code `Intl` cannot read counts as 2. */
-export function minorToMajor(minor: number, currency: string): number {
-  const digits = currencyMinorDigits(currency) ?? 2;
-  return minor / 10 ** digits;
-}
-
-/**
- * A price in minor units, in the reader's notation: "CHF 49", "CHF 4.90", "49 €",
- * "4,90 €". A whole amount drops its decimals — a price list reads "CHF 49" — and any
- * other keeps all of them ("CHF 4.90", never "CHF 4.9").
- */
-export function formatPlanPrice(minor: number, currency: string, options: { locale?: string } = {}): string {
-  const digits = currencyMinorDigits(currency) ?? 2;
-  const whole = Number.isInteger(minor) && minor % 10 ** digits === 0;
-  return formatMoney(minorToMajor(minor, currency), currency, {
-    locale: options.locale,
-    digits: whole ? 0 : digits,
-  });
-}
-
-/**
- * The currency a payer starts with when the app stores none (§12.18): francs where the
- * locale's region is Switzerland or Liechtenstein, euros everywhere else — "de-CH" and
- * "fr-CH" CHF, "de" (Germany, once `Intl` fills the region in) and "it" EUR.
- *
- * Only the fallback: an account's stored currency comes first (keksdose's
- * `reporting_currency` — a de-CH speaker living in Germany pays in euros), and the payer
- * may switch in the picker either way; checkout takes the one they leave it on (§4).
- */
-export function billingCurrencyFor(locale?: string): BillingCurrency {
-  if (!locale) return "EUR";
-  try {
-    const region = new Intl.Locale(locale).maximize().region;
-    return region === "CH" || region === "LI" ? "CHF" : "EUR";
-  } catch {
-    return "EUR";
-  }
-}

package/src/billing/plan-switch.tsx

@@ -1,216 +0,0 @@
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
-import { pluralForm } from "../i18n/plurals";
-import type { PluralForms } from "../i18n/plurals";
-import { useDayFormatter } from "../lib/day-format";
-import { formatMoney, formatNumber } from "../lib/format";
-import { AlertBanner } from "../components/alert-banner";
-import { Button } from "../components/button";
-import { DialogFrame } from "../components/dialog-frame";
-import { Spinner } from "../components/spinner";
-import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
-import { DEFAULT_PLAN_CHANGE_LABELS } from "./plan-change-labels";
-import { useBillingLabels } from "./billing-labels";
-import type { BillingLabels } from "./billing-labels";
-import type { PlanSwitchPreview } from "./billing-overview";
-import { minorToMajor } from "./plan-price";
-import type { BillingInterval } from "./plan-price";
-
-/**
- * The payer's plan switch (docs/billing-harmonization.md §15.2.10, ui-kit 0.39): built
- * once in the kits and used by all three apps, instead of Paddle's portal. While a
- * provider subscription runs, the app sends a `PlanPicker` pick to
- * `POST /billing/plan/preview` and opens this dialog with the answer; Confirm is the
- * app's `POST /billing/plan`. Otherwise the pick goes to the checkout, as before.
- *
- * The switch is immediate and prorated: an upgrade charges the difference now, a
- * downgrade credits the unused part to the customer's balance, which Paddle takes off
- * the next charges. So the payer agrees to a figure — Paddle's preview — and sees the
- * dimensions over the new plan's limit before agreeing (§3.4: a limit gates creation
- * only, so the switch is allowed).
- */
-
-/** One side of a switch: a plan code and its billing period. */
-export interface PlanSwitchSide {
-  plan: string;
-  interval: BillingInterval;
-}
-
-export interface PlanSwitchConfirmProps {
-  open: boolean;
-  /** The payer dismissed it — Cancel, Escape, the backdrop. Confirm leaves it open: close
-   *  it once the switch answers. 0.52: every other kit dialog's `onClose` (CONTRIBUTING
-   *  §4; refactor audit 2026-10-30, API-5); required since 0.53 removed `onOpenChange`
-   *  (deprecated in 0.52). */
-  onClose: () => void;
-  /** What the payer pays now: the overview's `paid`. */
-  from: PlanSwitchSide;
-  /** The pick. */
-  to: PlanSwitchSide;
-  /** `POST /billing/plan/preview`'s answer. Undefined while it loads: a spinner, and
-   *  Confirm is held. */
-  preview?: PlanSwitchPreview;
-  /** `POST /billing/plan` is under way: Confirm's spinner, no second press, and neither
-   *  Escape, the backdrop nor Back closes it. */
-  pending?: boolean;
-  /** The plan's display name, the app's (§3.1). Default: the code. */
-  planName?: (code: string) => string;
-  /**
-   * The app's word per dimension, for the over-limit lines. A heading's word ("Budgets")
-   * reads "Budgets: 7 of 5" (`billing.limitUsageLine`); its plural forms
-   * (`{ one: "budget", other: "budgets" }`) read "7 of 5 budgets" (`planChange.usageOf`,
-   * the form the limit takes). A dimension without one is named by its key.
-   */
-  dimensionLabels?: Readonly<Record<string, string | PluralForms>>;
-  /** How a usage or limit figure is written. Default: a number in the locale. */
-  formatLimit?: (dimension: string, value: number) => string;
-  /** Confirm: the app's `POST /billing/plan` with `{plan, interval}` of `to`. */
-  onConfirm: () => void;
-  /** The figures' and the date's locale. Default: the provider's. The next charge's date
-   *  is written by the `<UiKitProvider formatDate>` when the app set one (0.52). */
-  locale?: string;
-  /**
-   * 0.42 (§16.2 decision 5, §16.8 B): the payer's free grant runs without an end —
-   * `isPermanentGrant(overview)`. The switch changes the PAID plan, not the applied one
-   * (§12.11), so the dialog says so above its figures (`grantWarningTitle`,
-   * `grantWarningBody`) before the payer agrees. Confirm stays Confirm: the warning is
-   * this dialog's own, and `PlanPicker` — told `switching` — shows none of its own on
-   * the way here, so the payer reads it once.
-   */
-  permanentGrant?: boolean;
-  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
-  labels?: LabelOverride<BillingLabels>;
-}
-
-/**
- * The confirm for a plan switch (§15.2.10): from → to, each with its billing period;
- * Paddle's preview — "Charged now" (an upgrade) or "Credited towards your next charges"
- * (a downgrade), and the next charge with its date — in the subscription's currency;
- * the dimensions over the new plan's limit; and Confirm.
- *
- *     const preview = useMutation({ mutationFn: api.previewPlanSwitch });
- *     <PlanSwitchConfirm
- *       open={pick !== null}
- *       onClose={() => setPick(null)}
- *       from={overview.paid}
- *       to={pick}
- *       preview={preview.data}
- *       pending={switching.isPending}
- *       planName={planName}
- *       onConfirm={() => switching.mutate(pick)}
- *     />
- *
- * It takes no billing lock (`COMMIT_EXCEPT_BILLING` built in): a read-only payer may
- * change plan, as they may pay. A demo lock still holds it, as the server's demo guard
- * does. The kit sends no request.
- */
-export function PlanSwitchConfirm({
-  open,
-  onClose,
-  from,
-  to,
-  preview,
-  pending = false,
-  planName = (code) => code,
-  dimensionLabels,
-  formatLimit,
-  onConfirm,
-  locale: localeProp,
-  permanentGrant = false,
-  labels: labelsProp,
-}: PlanSwitchConfirmProps) {
-  const labels = useBillingLabels(labelsProp);
-  const planChange = useKitLabels("planChange", DEFAULT_PLAN_CHANGE_LABELS);
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const locale = useKitLocale(localeProp);
-  const day = useDayFormatter(undefined, localeProp);
-
-  const period = (interval: BillingInterval) => (interval === "year" ? labels.yearly : labels.monthly);
-  const side = (s: PlanSwitchSide) => `${planName(s.plan.toLowerCase())} (${period(s.interval)})`;
-  const money = (minor: number, currency: string) => formatMoney(minorToMajor(minor, currency), currency, { locale });
-  const figure = (dimension: string, value: number) =>
-    formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });
-
-  /** One line per dimension over the new limit, in the word's own sentence. */
-  const overLimit = (p: PlanSwitchPreview): string[] =>
-    (p.over_limit ?? []).flatMap((dimension) => {
-      const limit = p.limits?.[dimension];
-      const used = p.usage?.[dimension];
-      if (limit === null || limit === undefined || used === undefined) return [];
-      const word = dimensionLabels?.[dimension] ?? dimension;
-      return [
-        typeof word === "string"
-          ? labels.limitUsageLine(word, figure(dimension, used), figure(dimension, limit))
-          : planChange.usageOf(figure(dimension, used), figure(dimension, limit), pluralForm(limit, word, locale)),
-      ];
-    });
-
-  const credit = preview !== undefined && preview.now_minor < 0;
-  const lines = preview ? overLimit(preview) : [];
-
-  return (
-    <DialogFrame
-      open={open}
-      title={labels.switchTitle}
-      description={labels.switchFromTo(side(from), side(to))}
-      onClose={onClose}
-      busy={pending}
-      // A preview that loads is busy too, but holds nothing: Cancel stays a way out.
-      aria-busy={preview === undefined || undefined}
-      actions={(close) => (
-        <>
-          <Button variant="secondary" onClick={close} disabled={pending}>
-            {common.cancel}
-          </Button>
-          <Button
-            commit={COMMIT_EXCEPT_BILLING}
-            pending={pending}
-            disabled={preview === undefined}
-            onClick={() => {
-              if (preview !== undefined && !pending) onConfirm();
-            }}
-          >
-            {labels.switchConfirm}
-          </Button>
-        </>
-      )}
-    >
-      {permanentGrant && (
-        <AlertBanner tone="warning" size="sm" data-grant-warning="">
-          <strong className="block font-medium">{labels.grantWarningTitle}</strong> {labels.grantWarningBody}
-        </AlertBanner>
-      )}
-      {preview === undefined ? (
-        <div className="flex justify-center py-4">
-          <Spinner showLabel />
-        </div>
-      ) : (
-        <>
-          <dl className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 text-sm" data-plan-switch-preview>
-            <dt className="text-secondary">{credit ? labels.switchCredited : labels.switchChargedNow}</dt>
-            <dd className="text-right font-medium tabular-nums" data-now={credit ? "credit" : "charge"}>
-              {money(Math.abs(preview.now_minor), preview.currency)}
-            </dd>
-            {preview.next_billed_at && preview.next_minor != null && (
-              <>
-                <dt className="text-secondary">{labels.switchNextCharge(day(preview.next_billed_at))}</dt>
-                <dd className="text-right tabular-nums">{money(preview.next_minor, preview.currency)}</dd>
-              </>
-            )}
-          </dl>
-          {lines.length > 0 && (
-            <div className="space-y-1 text-sm" data-plan-switch-over-limit>
-              <p>{planChange.overLimit}</p>
-              <ul className="list-disc space-y-0.5 ps-5 text-secondary">
-                {lines.map((line) => (
-                  <li key={line}>{line}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </>
-      )}
-    </DialogFrame>
-  );
-}