@eifi1/ui-kit 0.41.0 → 0.42.0

package/dist/billing/cancel-subscription.js

@@ -0,0 +1,57 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels.js";
+import { formatDate } from "../lib/format.js";
+import { Button } from "../components/button.js";
+import { DialogFrame } from "../components/dialog-frame.js";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock.js";
+import { useBillingLabels } from "./billing-labels.js";
+function CancelSubscriptionConfirm({
+  open,
+  onOpenChange,
+  periodEnd,
+  onConfirm,
+  pending = false,
+  locale: localeProp,
+  labels: labelsProp
+}) {
+  const labels = useBillingLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale(localeProp);
+  return /* @__PURE__ */ jsx(
+    DialogFrame,
+    {
+      open,
+      title: labels.cancelConfirmTitle,
+      description: labels.cancelConfirmBody(formatDate(periodEnd, "medium", { locale })),
+      onClose: () => {
+        if (!pending) onOpenChange(false);
+      },
+      onKeyDown: (e) => {
+        if (pending && e.key === "Escape") e.preventDefault();
+      },
+      "aria-busy": pending || void 0,
+      "data-cancel-subscription-confirm": "",
+      actions: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, disabled: pending, children: common.back }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger",
+            commit: COMMIT_EXCEPT_BILLING,
+            pending,
+            onClick: () => {
+              if (!pending) onConfirm();
+            },
+            children: labels.cancelConfirmAction
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  CancelSubscriptionConfirm
+};
+//# sourceMappingURL=cancel-subscription.js.map

package/dist/billing/cancel-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/cancel-subscription.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\n\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_COMMON_LABELS } from \"../i18n/shared-labels\";\nimport { formatDate } from \"../lib/format\";\nimport type { DateInput } from \"../lib/format\";\nimport { Button } from \"../components/button\";\nimport { DialogFrame } from \"../components/dialog-frame\";\nimport { COMMIT_EXCEPT_BILLING } from \"../components/write-lock\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\n\nexport interface CancelSubscriptionConfirmProps {\n  open: boolean;\n  /** `false` when the admin dismisses it — Back, Escape, the backdrop. Confirm leaves it\n   *  open: close it once `POST /billing/cancel` answers. */\n  onOpenChange: (open: boolean) => void;\n  /** The overview's `current_period_end`: the day the subscription ends. Formatted with\n   *  the kit's date formatter (`formatDate`, `\"medium\"`). */\n  periodEnd: DateInput;\n  /** Confirm: the app's `POST /billing/cancel` (server-kit 0.14, §16.3). */\n  onConfirm: () => void;\n  /** The cancel is under way: Confirm's spinner, no second press, and Escape and Back\n   *  don't close. */\n  pending?: boolean;\n  /** The date's locale. Default: the provider's. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\n/**\n * The in-app cancel's confirm (docs/billing-harmonization.md §16.2 decision 2, §16.4,\n * ui-kit 0.42): \"Cancel subscription\" for an admin the provider's portal doesn't open for\n * (`SubscriptionActions`' `portal=\"buyer_only\"` → `onCancelInApp`). It names the day the\n * subscription ends — \"Your subscription ends on 9 Nov 2026. Until then everything works\n * as before.\" — and its button reads \"Cancel subscription now\" (German \"Jetzt kündigen\",\n * the confirmation button of §312k BGB).\n *\n *     <CancelSubscriptionConfirm\n *       open={asking}\n *       onOpenChange={setAsking}\n *       periodEnd={overview.current_period_end}\n *       pending={cancel.isPending}\n *       onConfirm={() => cancel.mutate()}\n *     />\n *\n * The cancel is at the period's end (Paddle's `cancel`, not immediately); the row follows\n * by webhook (`cancel_at_period_end`), as after a cancel in the portal, and\n * `SubscriptionActions` then offers \"Keep subscription\" (`onResume`).\n *\n * It takes no billing lock (`COMMIT_EXCEPT_BILLING` built in, §3.3): a read-only payer\n * may always cancel. A demo lock still holds it, as the server's demo guard does. The kit\n * sends no request.\n */\nexport function CancelSubscriptionConfirm({\n  open,\n  onOpenChange,\n  periodEnd,\n  onConfirm,\n  pending = false,\n  locale: localeProp,\n  labels: labelsProp,\n}: CancelSubscriptionConfirmProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n\n  return (\n    <DialogFrame\n      open={open}\n      title={labels.cancelConfirmTitle}\n      description={labels.cancelConfirmBody(formatDate(periodEnd, \"medium\", { locale }))}\n      onClose={() => {\n        if (!pending) onOpenChange(false);\n      }}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        if (pending && e.key === \"Escape\") e.preventDefault();\n      }}\n      aria-busy={pending || undefined}\n      data-cancel-subscription-confirm=\"\"\n      actions={(close) => (\n        <>\n          <Button variant=\"secondary\" onClick={close} disabled={pending}>\n            {common.back}\n          </Button>\n          <Button\n            variant=\"danger\"\n            commit={COMMIT_EXCEPT_BILLING}\n            pending={pending}\n            onClick={() => {\n              if (!pending) onConfirm();\n            }}\n          >\n            {labels.cancelConfirmAction}\n          </Button>\n        </>\n      )}\n    />\n  );\n}\n"],"mappings":";AAmFQ,mBACE,KADF;AAjFR,SAAS,cAAc,oBAAoB;AAE3C,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAE3B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AA8C1B,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AACV,GAAmC;AACjC,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,SAAS,aAAa,UAAU;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,OAAO;AAAA,MACd,aAAa,OAAO,kBAAkB,WAAW,WAAW,UAAU,EAAE,OAAO,CAAC,CAAC;AAAA,MACjF,SAAS,MAAM;AACb,YAAI,CAAC,QAAS,cAAa,KAAK;AAAA,MAClC;AAAA,MACA,WAAW,CAAC,MAAqC;AAC/C,YAAI,WAAW,EAAE,QAAQ,SAAU,GAAE,eAAe;AAAA,MACtD;AAAA,MACA,aAAW,WAAW;AAAA,MACtB,oCAAiC;AAAA,MACjC,SAAS,CAAC,UACR,iCACE;AAAA,4BAAC,UAAO,SAAQ,aAAY,SAAS,OAAO,UAAU,SACnD,iBAAO,MACV;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,QAAQ;AAAA,YACR;AAAA,YACA,SAAS,MAAM;AACb,kBAAI,CAAC,QAAS,WAAU;AAAA,YAC1B;AAAA,YAEC,iBAAO;AAAA;AAAA,QACV;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/billing/plan-card.d.ts

@@ -115,6 +115,24 @@ export interface PlanPickerProps extends Omit<PlanDisplayProps, "currency" | "in
     onChoose: (choice: PlanChoice) => void;
     /** The checkout is being opened: the button's spinner, no second press. */
     pending?: boolean;
+    /**
+     * 0.42 (§16.2 decision 5, §16.8 B): the payer's free grant runs without an end —
+     * `isPermanentGrant(overview)`. A purchase under it changes nothing the payer gets
+     * while the grant runs (§12.11), so the button first opens a confirm —
+     * `grantWarningTitle`, `grantWarningBody`, "Buy anyway" (`grantWarningAction`) and
+     * "Back" — and {@link onChoose} runs only on "Buy anyway". Warned, not refused.
+     *
+     * Not while {@link switching}: then the pick opens `PlanSwitchConfirm`, which takes
+     * the same `permanentGrant` and shows the warning above its figures — one warning,
+     * in the dialog where the payer agrees, rather than a confirm before a confirm.
+     */
+    permanentGrant?: boolean;
+    /**
+     * 0.42: the overview's `switching` — the app sends this pick to `PlanSwitchConfirm`
+     * (§15.2.10), not the checkout. Only decides where {@link permanentGrant}'s warning
+     * shows; the button and {@link onChoose} are the same either way.
+     */
+    switching?: boolean;
     /** The provider's localised price for a plan, or `undefined` for the catalogue's —
      *  see {@link PlanCardProps.pricePreview}. */
     pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, "plan">) => ReactNode | undefined;
@@ -143,6 +161,32 @@ export interface PlanPickerProps extends Omit<PlanDisplayProps, "currency" | "in
  * The button never takes the write lock: billing itself always works, a read-only payer
  * must be able to pay (§3.3). It is off, with the reason on hover and focus, while
  * nothing is picked or the current plan is.
+ *
+ * 0.42 (§16.8 B): under a grant without an end (`permanentGrant`) the payer is warned
+ * before paying for a plan that won't apply — here, in a confirm before `onChoose`, on
+ * the way to the checkout; on the way to a switch (`switching`) in `PlanSwitchConfirm`
+ * instead, so the warning shows once on either path.
+ */
+export declare function PlanPicker({ plans, current, value: valueProp, defaultValue, onValueChange, interval: intervalProp, defaultInterval, onIntervalChange, currency: currencyProp, defaultCurrency, onCurrencyChange, currencies: currenciesProp, onChoose, pending, permanentGrant, switching, pricePreview, legend, name, className, gridClassName, cardClassName, dimensionLabels, formatLimit, locale: localeProp, labels: labelsProp, }: PlanPickerProps): import("react").JSX.Element;
+export interface GrantWarningConfirmProps {
+    /** Shown, controlled. */
+    open: boolean;
+    /** `false` on "Back", Escape, the backdrop — and after "Buy anyway". */
+    onOpenChange: (open: boolean) => void;
+    /** "Buy anyway": the app opens its checkout. The dialog closes itself after it. */
+    onConfirm: () => void;
+    /** Prop > `<UiKitProvider labels={{ billing }}>` > English: `grantWarningTitle`,
+     *  `grantWarningBody`, `grantWarningAction`. "Back" is `common.back`. */
+    labels?: LabelOverride<BillingLabels>;
+}
+/**
+ * 0.42 (§16.8 B): the permanent-grant warning before a checkout — `grantWarningTitle`,
+ * `grantWarningBody`, "Back" and "Buy anyway" (`grantWarningAction`). {@link PlanPicker}
+ * shows it itself under `permanentGrant` when not `switching`. Exported for the path the
+ * picker cannot see: an app that meant to switch, learned there is no subscription to
+ * switch (keksdose: `/billing/plan/preview` → 409 `billing_not_subscribed`) and falls back
+ * to a checkout — show this before that checkout, so a permanent-grant holder is still
+ * warned. Carries `data-grant-warning`.
  */
-export declare function PlanPicker({ plans, current, value: valueProp, defaultValue, onValueChange, interval: intervalProp, defaultInterval, onIntervalChange, currency: currencyProp, defaultCurrency, onCurrencyChange, currencies: currenciesProp, onChoose, pending, pricePreview, legend, name, className, gridClassName, cardClassName, dimensionLabels, formatLimit, locale: localeProp, labels: labelsProp, }: PlanPickerProps): import("react").JSX.Element;
+export declare function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp }: GrantWarningConfirmProps): import("react").JSX.Element;
 export {};

package/dist/billing/plan-card.js

@@ -9,6 +9,7 @@ import { ChoiceCard } from "../components/choice-card.js";
 import { Chip } from "../components/chip.js";
 import { ToggleGroup } from "../components/toggle-group.js";
 import { Button } from "../components/button.js";
+import { DialogFrame } from "../components/dialog-frame.js";
 import { useBillingLabels } from "./billing-labels.js";
 import { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from "./plan-price.js";
 function planRelation(plans, code, current) {
@@ -132,6 +133,8 @@ function PlanPicker({
   currencies: currenciesProp,
   onChoose,
   pending,
+  permanentGrant = false,
+  switching = false,
   pricePreview,
   legend,
   name,
@@ -146,6 +149,7 @@ function PlanPicker({
   const labels = useBillingLabels(labelsProp);
   const locale = useKitLocale(localeProp);
   const generated = useId();
+  const [warned, setWarned] = useState(null);
   const groupName = name ?? generated;
   const legendId = `${generated}-legend`;
   const [ownValue, setOwnValue] = useState(() => defaultValue ?? current ?? null);
@@ -236,13 +240,60 @@ function PlanPicker({
         className: "max-sm:w-full",
         disabledReason: blocked,
         pending,
-        onClick: () => picked && onChoose({ plan: picked.code, interval, currency }),
+        onClick: () => {
+          if (!picked) return;
+          const choice = { plan: picked.code, interval, currency };
+          if (permanentGrant && !switching) setWarned(choice);
+          else onChoose(choice);
+        },
         children: buttonText
       }
-    ) })
+    ) }),
+    permanentGrant && !switching && /* @__PURE__ */ jsx(
+      GrantWarningConfirm,
+      {
+        open: warned !== null,
+        onOpenChange: (open) => {
+          if (!open) setWarned(null);
+        },
+        onConfirm: () => {
+          if (warned) onChoose(warned);
+        },
+        labels: labelsProp
+      }
+    )
   ] });
 }
+function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp }) {
+  const labels = useBillingLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  return /* @__PURE__ */ jsx(
+    DialogFrame,
+    {
+      open,
+      title: labels.grantWarningTitle,
+      description: labels.grantWarningBody,
+      onClose: () => onOpenChange(false),
+      "data-grant-warning": "",
+      actions: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, children: common.back }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            onClick: () => {
+              onConfirm();
+              onOpenChange(false);
+            },
+            children: labels.grantWarningAction
+          }
+        )
+      ] })
+    }
+  );
+}
 export {
+  GrantWarningConfirm,
   PlanCard,
   PlanPicker,
   planRelation

package/dist/billing/plan-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/button\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-secondary\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport function PlanCard({\n  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor\n  // audit 2026-10), where this was `forwardRef`.\n  ref,\n  plan,\n  relation,\n  pricePreview,\n  currency,\n  interval,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n  disabled,\n  ...rest\n}: PlanCardProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-muted\"\n              : \"text-lg font-semibold leading-tight text-primary\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-secondary\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-muted\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-secondary\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n}\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"primary\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => picked && onChoose({ plan: picked.code, interval, currency })}\n        >\n          {buttonText}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/button\";\nimport { DialogFrame } from \"../components/dialog-frame\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-secondary\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport function PlanCard({\n  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor\n  // audit 2026-10), where this was `forwardRef`.\n  ref,\n  plan,\n  relation,\n  pricePreview,\n  currency,\n  interval,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n  disabled,\n  ...rest\n}: PlanCardProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-muted\"\n              : \"text-lg font-semibold leading-tight text-primary\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-secondary\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-muted\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-secondary\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n}\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /**\n   * 0.42 (§16.2 decision 5, §16.8 B): the payer's free grant runs without an end —\n   * `isPermanentGrant(overview)`. A purchase under it changes nothing the payer gets\n   * while the grant runs (§12.11), so the button first opens a confirm —\n   * `grantWarningTitle`, `grantWarningBody`, \"Buy anyway\" (`grantWarningAction`) and\n   * \"Back\" — and {@link onChoose} runs only on \"Buy anyway\". Warned, not refused.\n   *\n   * Not while {@link switching}: then the pick opens `PlanSwitchConfirm`, which takes\n   * the same `permanentGrant` and shows the warning above its figures — one warning,\n   * in the dialog where the payer agrees, rather than a confirm before a confirm.\n   */\n  permanentGrant?: boolean;\n  /**\n   * 0.42: the overview's `switching` — the app sends this pick to `PlanSwitchConfirm`\n   * (§15.2.10), not the checkout. Only decides where {@link permanentGrant}'s warning\n   * shows; the button and {@link onChoose} are the same either way.\n   */\n  switching?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n *\n * 0.42 (§16.8 B): under a grant without an end (`permanentGrant`) the payer is warned\n * before paying for a plan that won't apply — here, in a confirm before `onChoose`, on\n * the way to the checkout; on the way to a switch (`switching`) in `PlanSwitchConfirm`\n * instead, so the warning shows once on either path.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  permanentGrant = false,\n  switching = false,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  /** The choice the grant warning holds back until \"Buy anyway\". */\n  const [warned, setWarned] = useState<PlanChoice | null>(null);\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"primary\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => {\n            if (!picked) return;\n            const choice = { plan: picked.code, interval, currency };\n            if (permanentGrant && !switching) setWarned(choice);\n            else onChoose(choice);\n          }}\n        >\n          {buttonText}\n        </Button>\n      </div>\n      {permanentGrant && !switching && (\n        <GrantWarningConfirm\n          open={warned !== null}\n          onOpenChange={(open) => {\n            if (!open) setWarned(null);\n          }}\n          onConfirm={() => {\n            if (warned) onChoose(warned);\n          }}\n          labels={labelsProp}\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface GrantWarningConfirmProps {\n  /** Shown, controlled. */\n  open: boolean;\n  /** `false` on \"Back\", Escape, the backdrop — and after \"Buy anyway\". */\n  onOpenChange: (open: boolean) => void;\n  /** \"Buy anyway\": the app opens its checkout. The dialog closes itself after it. */\n  onConfirm: () => void;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English: `grantWarningTitle`,\n   *  `grantWarningBody`, `grantWarningAction`. \"Back\" is `common.back`. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\n/**\n * 0.42 (§16.8 B): the permanent-grant warning before a checkout — `grantWarningTitle`,\n * `grantWarningBody`, \"Back\" and \"Buy anyway\" (`grantWarningAction`). {@link PlanPicker}\n * shows it itself under `permanentGrant` when not `switching`. Exported for the path the\n * picker cannot see: an app that meant to switch, learned there is no subscription to\n * switch (keksdose: `/billing/plan/preview` → 409 `billing_not_subscribed`) and falls back\n * to a checkout — show this before that checkout, so a permanent-grant holder is still\n * warned. Carries `data-grant-warning`.\n */\nexport function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp }: GrantWarningConfirmProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  return (\n    <DialogFrame\n      open={open}\n      title={labels.grantWarningTitle}\n      description={labels.grantWarningBody}\n      onClose={() => onOpenChange(false)}\n      data-grant-warning=\"\"\n      actions={(close) => (\n        <>\n          <Button variant=\"secondary\" onClick={close}>\n            {common.back}\n          </Button>\n          <Button\n            variant=\"primary\"\n            onClick={() => {\n              onConfirm();\n              onOpenChange(false);\n            }}\n          >\n            {labels.grantWarningAction}\n          </Button>\n        </>\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/billing/plan-switch.d.ts

@@ -51,6 +51,15 @@ export interface PlanSwitchConfirmProps {
     onConfirm: () => void;
     /** The figures' and the date's locale. Default: the provider's. */
     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>;
 }
@@ -76,4 +85,4 @@ export interface PlanSwitchConfirmProps {
  * 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 declare function PlanSwitchConfirm({ open, onOpenChange, from, to, preview, pending, planName, dimensionLabels, formatLimit, onConfirm, locale: localeProp, labels: labelsProp, }: PlanSwitchConfirmProps): import("react").JSX.Element;
+export declare function PlanSwitchConfirm({ open, onOpenChange, from, to, preview, pending, planName, dimensionLabels, formatLimit, onConfirm, locale: localeProp, permanentGrant, labels: labelsProp, }: PlanSwitchConfirmProps): import("react").JSX.Element;

package/dist/billing/plan-switch.js

@@ -4,6 +4,7 @@ import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels.js";
 import { pluralForm } from "../i18n/plurals.js";
 import { formatDate, formatMoney, formatNumber } from "../lib/format.js";
+import { AlertBanner } from "../components/alert-banner.js";
 import { Button } from "../components/button.js";
 import { DialogFrame } from "../components/dialog-frame.js";
 import { Spinner } from "../components/spinner.js";
@@ -23,6 +24,7 @@ function PlanSwitchConfirm({
   formatLimit,
   onConfirm,
   locale: localeProp,
+  permanentGrant = false,
   labels: labelsProp
 }) {
   const labels = useBillingLabels(labelsProp);
@@ -44,7 +46,7 @@ function PlanSwitchConfirm({
   });
   const credit = preview !== void 0 && preview.now_minor < 0;
   const lines = preview ? overLimit(preview) : [];
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     DialogFrame,
     {
       open,
@@ -70,20 +72,27 @@ function PlanSwitchConfirm({
           }
         )
       ] }),
-      children: preview === void 0 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx(Spinner, { showLabel: true }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 text-sm", "data-plan-switch-preview": true, children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-secondary", children: credit ? labels.switchCredited : labels.switchChargedNow }),
-          /* @__PURE__ */ jsx("dd", { className: "text-right font-medium tabular-nums", "data-now": credit ? "credit" : "charge", children: money(Math.abs(preview.now_minor), preview.currency) }),
-          preview.next_billed_at && preview.next_minor != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-secondary", children: labels.switchNextCharge(formatDate(preview.next_billed_at, "medium", { locale })) }),
-            /* @__PURE__ */ jsx("dd", { className: "text-right tabular-nums", children: money(preview.next_minor, preview.currency) })
-          ] })
+      children: [
+        permanentGrant && /* @__PURE__ */ jsxs(AlertBanner, { tone: "warning", size: "sm", "data-grant-warning": "", children: [
+          /* @__PURE__ */ jsx("strong", { className: "block font-medium", children: labels.grantWarningTitle }),
+          " ",
+          labels.grantWarningBody
         ] }),
-        lines.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm", "data-plan-switch-over-limit": true, children: [
-          /* @__PURE__ */ jsx("p", { children: planChange.overLimit }),
-          /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-0.5 ps-5 text-secondary", children: lines.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line)) })
+        preview === void 0 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx(Spinner, { showLabel: true }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 text-sm", "data-plan-switch-preview": true, children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-secondary", children: credit ? labels.switchCredited : labels.switchChargedNow }),
+            /* @__PURE__ */ jsx("dd", { className: "text-right font-medium tabular-nums", "data-now": credit ? "credit" : "charge", children: money(Math.abs(preview.now_minor), preview.currency) }),
+            preview.next_billed_at && preview.next_minor != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-secondary", children: labels.switchNextCharge(formatDate(preview.next_billed_at, "medium", { locale })) }),
+              /* @__PURE__ */ jsx("dd", { className: "text-right tabular-nums", children: money(preview.next_minor, preview.currency) })
+            ] })
+          ] }),
+          lines.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm", "data-plan-switch-over-limit": true, children: [
+            /* @__PURE__ */ jsx("p", { children: planChange.overLimit }),
+            /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-0.5 ps-5 text-secondary", children: lines.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line)) })
+          ] })
         ] })
-      ] })
+      ]
     }
   );
 }

package/dist/billing/plan-switch.js.map

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

package/dist/billing/subscription-actions.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithRef } from "react";
 import type { LabelOverride } from "../i18n/kit-labels.js";
 import type { BillingLabels } from "./billing-labels.js";
-import type { PortalTarget } from "./billing-overview.js";
+import type { BillingPortalAccess, PortalTarget } from "./billing-overview.js";
 export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
     /** "Payment and invoices", as a link — or {@link onManage}. Without either, none. */
     manageHref?: string;
@@ -30,8 +30,35 @@ export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"di
      * (§12.26). Default true (0.32's behaviour).
      */
     atProvider?: boolean;
-    /** Which of the two is under way: its spinner, no second press. */
-    pending?: "manage" | "cancel" | null;
+    /**
+     * 0.42 (§16.2, server-kit 0.14): the overview's `portal`. `"buyer_only"` — the row has
+     * a buyer and the viewer isn't them, so the portal would answer `403
+     * billing_portal_buyer_only`: "Payment and invoices" becomes a caption naming the buyer
+     * (`buyerHolds`, no button), and "Cancel subscription" calls {@link onCancelInApp}
+     * (no portal at all — `cancelHref`, `onCancel` and `onPortal` are not used). `"open"`
+     * (default): as before.
+     */
+    portal?: BillingPortalAccess;
+    /** 0.42: the overview's `buyer_name`, for the caption under `"buyer_only"`. Empty: "…with
+     *  the admin who bought the subscription". */
+    buyerName?: string | null;
+    /**
+     * 0.42 (§16.2 decision 2): "Cancel subscription" in the app — open
+     * `CancelSubscriptionConfirm`, whose Confirm is `POST /billing/cancel`. The cancel under
+     * `"buyer_only"`. Under `"open"` it is the last resort, used only when no portal cancel
+     * (`cancelHref`, `onCancel`, `onPortal`) is given — a person-payer app that mounts the
+     * route and not the portal's cancel.
+     */
+    onCancelInApp?: () => void;
+    /** 0.42 (§16.7 C): the overview's `cancel_at_period_end` — a cancel is scheduled. With
+     *  {@link onResume}, "Keep subscription" takes the cancel's place. */
+    cancelAtPeriodEnd?: boolean;
+    /** 0.42 (§16.7 C): "Keep subscription", the app's `POST /billing/resume` — shown in
+     *  the cancel's place while {@link cancelAtPeriodEnd} is true. Without it, the cancel
+     *  stays as before. */
+    onResume?: () => void;
+    /** Which one is under way: its spinner, no second press. `"resume"` since 0.42. */
+    pending?: "manage" | "cancel" | "resume" | null;
     /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
     labels?: LabelOverride<BillingLabels>;
 }
@@ -50,5 +77,11 @@ export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"di
  * Before the payer has reached the provider (`atProvider={false}`, a trial without a
  * card, a beta) there is no portal to open: the part says so in a caption instead of
  * offering two buttons that could only end in `409 billing_not_at_provider`.
+ *
+ * 0.42 (§16): where the company's buyer is another admin (`portal="buyer_only"`), the
+ * portal stays the buyer's — "Payment and invoices" is a caption that names them, and
+ * "Cancel subscription" is the in-app cancel (`onCancelInApp`). While a cancel is
+ * scheduled (`cancelAtPeriodEnd`) and `onResume` is given, "Keep subscription" stands in
+ * the cancel's place, whoever the viewer is.
  */
-export declare function SubscriptionActions({ manageHref, onManage, cancelHref, onCancel, onPortal, atProvider, pending, labels: labelsProp, className, ...rest }: SubscriptionActionsProps): import("react").JSX.Element | null;
+export declare function SubscriptionActions({ manageHref, onManage, cancelHref, onCancel, onPortal, atProvider, portal, buyerName, onCancelInApp, cancelAtPeriodEnd, onResume, pending, labels: labelsProp, className, ...rest }: SubscriptionActionsProps): import("react").JSX.Element | null;

package/dist/billing/subscription-actions.js

@@ -10,6 +10,11 @@ function SubscriptionActions({
   onCancel,
   onPortal,
   atProvider = true,
+  portal = "open",
+  buyerName,
+  onCancelInApp,
+  cancelAtPeriodEnd = false,
+  onResume,
   pending,
   labels: labelsProp,
   className,
@@ -19,10 +24,12 @@ function SubscriptionActions({
   if (!atProvider) {
     return /* @__PURE__ */ jsx("div", { ...rest, "data-at-provider": "false", className: cn("text-sm text-muted", className), children: /* @__PURE__ */ jsx("p", { children: labels.notAtProvider }) });
   }
+  const buyerOnly = portal === "buyer_only";
   const manageCall = onManage ?? (onPortal ? () => onPortal("overview") : void 0);
-  const cancelCall = onCancel ?? (onPortal ? () => onPortal("cancel") : void 0);
-  const manage = manageHref !== void 0 ? /* @__PURE__ */ jsx(Button, { href: manageHref, variant: "secondary", children: labels.manage }) : manageCall !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: manageCall, pending: pending === "manage", children: labels.manage }) : null;
-  const cancel = cancelHref !== void 0 ? /* @__PURE__ */ jsx(Button, { href: cancelHref, variant: "link", tone: "danger", children: labels.cancel }) : cancelCall !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", tone: "danger", onClick: cancelCall, pending: pending === "cancel", children: labels.cancel }) : null;
+  const portalCancel = onCancel ?? (onPortal ? () => onPortal("cancel") : void 0);
+  const cancelCall = buyerOnly ? onCancelInApp : portalCancel ?? (cancelHref === void 0 ? onCancelInApp : void 0);
+  const manage = buyerOnly ? /* @__PURE__ */ jsx("p", { className: "basis-full text-sm text-muted", "data-buyer-holds": "", children: labels.buyerHolds(buyerName || void 0) }) : manageHref !== void 0 ? /* @__PURE__ */ jsx(Button, { href: manageHref, variant: "secondary", children: labels.manage }) : manageCall !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: manageCall, pending: pending === "manage", children: labels.manage }) : null;
+  const cancel = cancelAtPeriodEnd && onResume !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", onClick: onResume, pending: pending === "resume", "data-keep-subscription": "", children: labels.keepSubscription }) : cancelHref !== void 0 && !buyerOnly ? /* @__PURE__ */ jsx(Button, { href: cancelHref, variant: "link", tone: "danger", children: labels.cancel }) : cancelCall !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", tone: "danger", onClick: cancelCall, pending: pending === "cancel", children: labels.cancel }) : null;
   if (!manage && !cancel) return null;
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("flex flex-wrap items-center gap-x-4 gap-y-2", className), children: [
     manage,