@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/pricing/display-preview.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Panel } from "../_ui";
+import { priceList } from "./plan-row";
+import { useFeatureCatalogue, usePlanList } from "./use-plans";
+import styles from "./pricing.module.css";
+const FIRST_LINE = 1;
+function DisplayPreview({ settings }) {
+  const { data } = usePlanList();
+  const catalogue = useFeatureCatalogue();
+  const currencies = data?.currencies ?? [];
+  const features = catalogue.data?.features ?? [];
+  const plans = (data?.plans ?? []).map((p) => p.live).filter((v) => Boolean(v?.public));
+  const price = (v) => priceList(v.prices, currencies).slice(0, FIRST_LINE)[0] ?? "No price";
+  const locked = features.find((f) => plans.some((p) => !p.features[f.key]?.included));
+  const unlock = locked && plans.find((p) => p.features[locked.key]?.included);
+  return /* @__PURE__ */ jsx(Panel, { title: "Preview", height: "auto", children: /* @__PURE__ */ jsxs("div", { className: styles.stack, children: [
+    /* @__PURE__ */ jsxs("div", { className: settings.plansPage ? void 0 : styles.off, children: [
+      /* @__PURE__ */ jsxs("p", { className: styles.previewLabel, children: [
+        "Plans page",
+        settings.plansPage ? "" : " \xB7 Off"
+      ] }),
+      plans.length ? /* @__PURE__ */ jsx("div", { className: styles.previewPlans, children: plans.map((v) => /* @__PURE__ */ jsxs("div", { className: styles.previewPlan, children: [
+        /* @__PURE__ */ jsx("strong", { children: v.name }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          price(v),
+          " a month"
+        ] }),
+        /* @__PURE__ */ jsx("ul", { children: features.filter((f) => v.features[f.key]?.included).map((f) => /* @__PURE__ */ jsx("li", { children: f.name }, f.key)) })
+      ] }, v.id)) }) : /* @__PURE__ */ jsx("p", { className: styles.muted, children: "No public plans are live." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: settings.lockedFeature ? void 0 : styles.off, children: [
+      /* @__PURE__ */ jsxs("p", { className: styles.previewLabel, children: [
+        "Locked-feature card",
+        settings.lockedFeature ? "" : " \xB7 Off"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.previewLocked, children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          locked?.name ?? "Bookings",
+          " isn't in your plan"
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: unlock ? `${unlock.name} has it, from ${price(unlock)} a month.` : "No public plan has it." }),
+        /* @__PURE__ */ jsx("span", { className: styles.previewButton, children: "Upgrade" })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  DisplayPreview
+};
+//# sourceMappingURL=display-preview.js.map

package/dist/admin/pricing/display-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/display-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DisplaySettings, PlanVersion } from \"@withpotter/lib/pricing-plans-types\";\nimport { Panel } from \"../_ui\";\nimport { priceList } from \"./plan-row\";\nimport { useFeatureCatalogue, usePlanList } from \"./use-plans\";\nimport styles from \"./pricing.module.css\";\n\nconst FIRST_LINE = 1;\n\n/**\n * Roughly what merchants see: the plans page with every public live plan\n * side by side, and the card on a page their plan leaves out. A place that\n * is switched off is shown faded, with \"Off\".\n */\nexport function DisplayPreview({ settings }: { settings: DisplaySettings }) {\n  const { data } = usePlanList();\n  const catalogue = useFeatureCatalogue();\n  const currencies = data?.currencies ?? [];\n  const features = catalogue.data?.features ?? [];\n  const plans = (data?.plans ?? [])\n    .map((p) => p.live)\n    .filter((v): v is PlanVersion => Boolean(v?.public));\n  const price = (v: PlanVersion) => priceList(v.prices, currencies).slice(0, FIRST_LINE)[0] ?? \"No price\";\n  // A feature some public plan leaves out, and a public plan that has it.\n  const locked = features.find((f) => plans.some((p) => !p.features[f.key]?.included));\n  const unlock = locked && plans.find((p) => p.features[locked.key]?.included);\n\n  return (\n    <Panel title=\"Preview\" height=\"auto\">\n      <div className={styles.stack}>\n        <div className={settings.plansPage ? undefined : styles.off}>\n          <p className={styles.previewLabel}>Plans page{settings.plansPage ? \"\" : \" · Off\"}</p>\n          {plans.length ? (\n            <div className={styles.previewPlans}>\n              {plans.map((v) => (\n                <div key={v.id} className={styles.previewPlan}>\n                  <strong>{v.name}</strong>\n                  <span>{price(v)} a month</span>\n                  <ul>\n                    {features\n                      .filter((f) => v.features[f.key]?.included)\n                      .map((f) => (\n                        <li key={f.key}>{f.name}</li>\n                      ))}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          ) : (\n            <p className={styles.muted}>No public plans are live.</p>\n          )}\n        </div>\n        <div className={settings.lockedFeature ? undefined : styles.off}>\n          <p className={styles.previewLabel}>Locked-feature card{settings.lockedFeature ? \"\" : \" · Off\"}</p>\n          <div className={styles.previewLocked}>\n            <strong>{locked?.name ?? \"Bookings\"} isn&apos;t in your plan</strong>\n            <span>\n              {unlock ? `${unlock.name} has it, from ${price(unlock)} a month.` : \"No public plan has it.\"}\n            </span>\n            <span className={styles.previewButton}>Upgrade</span>\n          </div>\n        </div>\n      </div>\n    </Panel>\n  );\n}\n"],"mappings":";AAgCU,SAKQ,KALR;AA7BV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB,mBAAmB;AACjD,OAAO,YAAY;AAEnB,MAAM,aAAa;AAOZ,SAAS,eAAe,EAAE,SAAS,GAAkC;AAC1E,QAAM,EAAE,KAAK,IAAI,YAAY;AAC7B,QAAM,YAAY,oBAAoB;AACtC,QAAM,aAAa,MAAM,cAAc,CAAC;AACxC,QAAM,WAAW,UAAU,MAAM,YAAY,CAAC;AAC9C,QAAM,SAAS,MAAM,SAAS,CAAC,GAC5B,IAAI,CAAC,MAAM,EAAE,IAAI,EACjB,OAAO,CAAC,MAAwB,QAAQ,GAAG,MAAM,CAAC;AACrD,QAAM,QAAQ,CAAC,MAAmB,UAAU,EAAE,QAAQ,UAAU,EAAE,MAAM,GAAG,UAAU,EAAE,CAAC,KAAK;AAE7F,QAAM,SAAS,SAAS,KAAK,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,GAAG,QAAQ,CAAC;AACnF,QAAM,SAAS,UAAU,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,GAAG,GAAG,QAAQ;AAE3E,SACE,oBAAC,SAAM,OAAM,WAAU,QAAO,QAC5B,+BAAC,SAAI,WAAW,OAAO,OACrB;AAAA,yBAAC,SAAI,WAAW,SAAS,YAAY,SAAY,OAAO,KACtD;AAAA,2BAAC,OAAE,WAAW,OAAO,cAAc;AAAA;AAAA,QAAW,SAAS,YAAY,KAAK;AAAA,SAAS;AAAA,MAChF,MAAM,SACL,oBAAC,SAAI,WAAW,OAAO,cACpB,gBAAM,IAAI,CAAC,MACV,qBAAC,SAAe,WAAW,OAAO,aAChC;AAAA,4BAAC,YAAQ,YAAE,MAAK;AAAA,QAChB,qBAAC,UAAM;AAAA,gBAAM,CAAC;AAAA,UAAE;AAAA,WAAQ;AAAA,QACxB,oBAAC,QACE,mBACE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,GAAG,QAAQ,EACzC,IAAI,CAAC,MACJ,oBAAC,QAAgB,YAAE,QAAV,EAAE,GAAa,CACzB,GACL;AAAA,WATQ,EAAE,EAUZ,CACD,GACH,IAEA,oBAAC,OAAE,WAAW,OAAO,OAAO,uCAAyB;AAAA,OAEzD;AAAA,IACA,qBAAC,SAAI,WAAW,SAAS,gBAAgB,SAAY,OAAO,KAC1D;AAAA,2BAAC,OAAE,WAAW,OAAO,cAAc;AAAA;AAAA,QAAoB,SAAS,gBAAgB,KAAK;AAAA,SAAS;AAAA,MAC9F,qBAAC,SAAI,WAAW,OAAO,eACrB;AAAA,6BAAC,YAAQ;AAAA,kBAAQ,QAAQ;AAAA,UAAW;AAAA,WAAwB;AAAA,QAC5D,oBAAC,UACE,mBAAS,GAAG,OAAO,IAAI,iBAAiB,MAAM,MAAM,CAAC,cAAc,0BACtE;AAAA,QACA,oBAAC,UAAK,WAAW,OAAO,eAAe,qBAAO;AAAA,SAChD;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/admin/pricing/display-tab.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "@withpotter/ui-kit/button";
+import { ToggleRow } from "@withpotter/ui-kit/toggle";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { adminPlansApi } from "@withpotter/lib/admin-pricing-api";
+import { AdmLoading, Panel } from "../_ui";
+import { LoadFailed } from "../audit/load-failed";
+import { DisplayPreview } from "./display-preview";
+import { usePricingPermissions } from "./use-pricing";
+import { useDisplaySettings, usePlansMutation } from "./use-plans";
+import styles from "./pricing.module.css";
+const SWITCHES = [
+  {
+    key: "plansPage",
+    label: "Plans page",
+    hint: "Settings \u203A Billing \u203A Plan: every public plan side by side, with Change plan."
+  },
+  {
+    key: "lockedFeature",
+    label: "Locked-feature card",
+    hint: "On a page the plan leaves out: the cheapest plan that unlocks it. Off: that page leaves the menu."
+  },
+  { key: "onboardingStep", label: "Plan step in onboarding", hint: "After a new business is set up." },
+  { key: "homeCard", label: "Plan card on Home", hint: "The plan, its price and the next charge." },
+  { key: "menuUpgrade", label: "Upgrade link in the menu", hint: "At the foot of the sidebar." }
+];
+function DisplayTab() {
+  const { data, isError, refetch } = useDisplaySettings();
+  const { proposeHint } = usePricingPermissions();
+  const { toast } = useToast();
+  const [edits, setEdits] = useState({});
+  const save = usePlansMutation(adminPlansApi.saveDisplay, "Not saved");
+  if (isError) {
+    return /* @__PURE__ */ jsx(LoadFailed, { message: "The display settings could not be loaded.", onRetry: () => void refetch() });
+  }
+  if (!data) return /* @__PURE__ */ jsx(AdmLoading, { label: "Loading display settings\u2026" });
+  const current = { ...data, ...edits };
+  const changed = SWITCHES.some(({ key }) => current[key] !== data[key]);
+  const submit = async () => {
+    try {
+      await save.mutateAsync([current]);
+    } catch {
+      return;
+    }
+    setEdits({});
+    toast({ title: "Saved", description: "Merchants see the change on their next page load." });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.displayLayout, children: [
+    /* @__PURE__ */ jsx(
+      Panel,
+      {
+        title: "Where merchants see plans",
+        height: "auto",
+        flush: true,
+        action: /* @__PURE__ */ jsx(Button, { title: proposeHint, disabled: !changed, loading: save.isPending, onClick: () => void submit(), children: "Save" }),
+        children: SWITCHES.map(({ key, label, hint }) => /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            label,
+            hint,
+            checked: current[key],
+            onChange: (next) => setEdits((e) => ({ ...e, [key]: next }))
+          },
+          key
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(DisplayPreview, { settings: current })
+  ] });
+}
+export {
+  DisplayTab
+};
+//# sourceMappingURL=display-tab.js.map

package/dist/admin/pricing/display-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/display-tab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@withpotter/ui-kit/button\";\nimport { ToggleRow } from \"@withpotter/ui-kit/toggle\";\nimport { useToast } from \"@withpotter/ui-kit/use-toast\";\nimport { adminPlansApi } from \"@withpotter/lib/admin-pricing-api\";\nimport type { DisplaySettings } from \"@withpotter/lib/pricing-plans-types\";\nimport { AdmLoading, Panel } from \"../_ui\";\nimport { LoadFailed } from \"../audit/load-failed\";\nimport { DisplayPreview } from \"./display-preview\";\nimport { usePricingPermissions } from \"./use-pricing\";\nimport { useDisplaySettings, usePlansMutation } from \"./use-plans\";\nimport styles from \"./pricing.module.css\";\n\n/** The five places merchants can see plans, in the order they meet them. */\nconst SWITCHES: { key: keyof DisplaySettings; label: string; hint: string }[] = [\n  {\n    key: \"plansPage\",\n    label: \"Plans page\",\n    hint: \"Settings › Billing › Plan: every public plan side by side, with Change plan.\",\n  },\n  {\n    key: \"lockedFeature\",\n    label: \"Locked-feature card\",\n    hint: \"On a page the plan leaves out: the cheapest plan that unlocks it. Off: that page leaves the menu.\",\n  },\n  { key: \"onboardingStep\", label: \"Plan step in onboarding\", hint: \"After a new business is set up.\" },\n  { key: \"homeCard\", label: \"Plan card on Home\", hint: \"The plan, its price and the next charge.\" },\n  { key: \"menuUpgrade\", label: \"Upgrade link in the menu\", hint: \"At the foot of the sidebar.\" },\n];\n\n/** Where merchants see plans and prices. Takes effect when saved; no approval needed. */\nexport function DisplayTab() {\n  const { data, isError, refetch } = useDisplaySettings();\n  const { proposeHint } = usePricingPermissions();\n  const { toast } = useToast();\n  const [edits, setEdits] = useState<Partial<DisplaySettings>>({});\n  const save = usePlansMutation(adminPlansApi.saveDisplay, \"Not saved\");\n\n  if (isError) {\n    return <LoadFailed message=\"The display settings could not be loaded.\" onRetry={() => void refetch()} />;\n  }\n\n  if (!data) return <AdmLoading label=\"Loading display settings…\" />;\n\n  const current: DisplaySettings = { ...data, ...edits };\n  const changed = SWITCHES.some(({ key }) => current[key] !== data[key]);\n\n  const submit = async () => {\n    try {\n      await save.mutateAsync([current]);\n    } catch {\n      return;\n    }\n    setEdits({});\n    toast({ title: \"Saved\", description: \"Merchants see the change on their next page load.\" });\n  };\n\n  return (\n    <div className={styles.displayLayout}>\n      <Panel\n        title=\"Where merchants see plans\"\n        height=\"auto\"\n        flush\n        action={\n          <Button title={proposeHint} disabled={!changed} loading={save.isPending} onClick={() => void submit()}>\n            Save\n          </Button>\n        }\n      >\n        {SWITCHES.map(({ key, label, hint }) => (\n          <ToggleRow\n            key={key}\n            label={label}\n            hint={hint}\n            checked={current[key]}\n            onChange={(next) => setEdits((e) => ({ ...e, [key]: next }))}\n          />\n        ))}\n      </Panel>\n      <DisplayPreview settings={current} />\n    </div>\n  );\n}\n"],"mappings":";AAyCW,cAmBP,YAnBO;AAvCX,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAE9B,SAAS,YAAY,aAAa;AAClC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,oBAAoB,wBAAwB;AACrD,OAAO,YAAY;AAGnB,MAAM,WAA0E;AAAA,EAC9E;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,EAAE,KAAK,kBAAkB,OAAO,2BAA2B,MAAM,kCAAkC;AAAA,EACnG,EAAE,KAAK,YAAY,OAAO,qBAAqB,MAAM,2CAA2C;AAAA,EAChG,EAAE,KAAK,eAAe,OAAO,4BAA4B,MAAM,8BAA8B;AAC/F;AAGO,SAAS,aAAa;AAC3B,QAAM,EAAE,MAAM,SAAS,QAAQ,IAAI,mBAAmB;AACtD,QAAM,EAAE,YAAY,IAAI,sBAAsB;AAC9C,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAmC,CAAC,CAAC;AAC/D,QAAM,OAAO,iBAAiB,cAAc,aAAa,WAAW;AAEpE,MAAI,SAAS;AACX,WAAO,oBAAC,cAAW,SAAQ,6CAA4C,SAAS,MAAM,KAAK,QAAQ,GAAG;AAAA,EACxG;AAEA,MAAI,CAAC,KAAM,QAAO,oBAAC,cAAW,OAAM,kCAA4B;AAEhE,QAAM,UAA2B,EAAE,GAAG,MAAM,GAAG,MAAM;AACrD,QAAM,UAAU,SAAS,KAAK,CAAC,EAAE,IAAI,MAAM,QAAQ,GAAG,MAAM,KAAK,GAAG,CAAC;AAErE,QAAM,SAAS,YAAY;AACzB,QAAI;AACF,YAAM,KAAK,YAAY,CAAC,OAAO,CAAC;AAAA,IAClC,QAAQ;AACN;AAAA,IACF;AACA,aAAS,CAAC,CAAC;AACX,UAAM,EAAE,OAAO,SAAS,aAAa,oDAAoD,CAAC;AAAA,EAC5F;AAEA,SACE,qBAAC,SAAI,WAAW,OAAO,eACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,OAAK;AAAA,QACL,QACE,oBAAC,UAAO,OAAO,aAAa,UAAU,CAAC,SAAS,SAAS,KAAK,WAAW,SAAS,MAAM,KAAK,OAAO,GAAG,kBAEvG;AAAA,QAGD,mBAAS,IAAI,CAAC,EAAE,KAAK,OAAO,KAAK,MAChC;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA,SAAS,QAAQ,GAAG;AAAA,YACpB,UAAU,CAAC,SAAS,SAAS,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,EAAE;AAAA;AAAA,UAJtD;AAAA,QAKP,CACD;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,kBAAe,UAAU,SAAS;AAAA,KACrC;AAEJ;","names":[]}

package/dist/admin/pricing/features-tab.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Th } from "@withpotter/ui-kit";
+import { AdmLoading, Panel } from "../_ui";
+import { LoadFailed } from "../audit/load-failed";
+import list from "../_ui/list-card.module.css";
+import { featureCell } from "./plan-changes";
+import { useFeatureCatalogue, usePlanList } from "./use-plans";
+import styles from "./pricing.module.css";
+function FeaturesTab() {
+  const catalogue = useFeatureCatalogue();
+  const plans = usePlanList();
+  if (catalogue.isError || plans.isError) {
+    return /* @__PURE__ */ jsx(
+      LoadFailed,
+      {
+        message: "The features could not be loaded.",
+        onRetry: () => void Promise.all([catalogue.refetch(), plans.refetch()])
+      }
+    );
+  }
+  if (!catalogue.data || !plans.data) return /* @__PURE__ */ jsx(AdmLoading, { label: "Loading features\u2026" });
+  const { features, coreFeatures } = catalogue.data;
+  const currencies = plans.data.currencies;
+  const columns = plans.data.plans.map((p) => ({ id: p.id, version: p.live ?? p.open })).filter((c) => c.version);
+  return /* @__PURE__ */ jsxs(Panel, { title: "Features", count: features.length, height: "auto", flush: true, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.gridScroll, children: /* @__PURE__ */ jsxs("table", { className: styles.grid, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Feature" }),
+        /* @__PURE__ */ jsx(Th, { children: "Area" }),
+        columns.map((c) => /* @__PURE__ */ jsx(Th, { children: c.version?.name }, c.id))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: features.map((f) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsxs("td", { children: [
+          f.name,
+          coreFeatures.includes(f.key) && /* @__PURE__ */ jsx("span", { className: list.muted, children: " \xB7 Kept after cancelling" })
+        ] }),
+        /* @__PURE__ */ jsx("td", { className: list.muted, children: f.area }),
+        columns.map((c) => /* @__PURE__ */ jsx("td", { className: list.nowrap, children: featureCell(f, c.version?.features[f.key], currencies) }, c.id))
+      ] }, f.key)) })
+    ] }) }),
+    !columns.length && /* @__PURE__ */ jsx("p", { className: styles.muted, children: "No plans yet." })
+  ] });
+}
+export {
+  FeaturesTab
+};
+//# sourceMappingURL=features-tab.js.map

package/dist/admin/pricing/features-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/features-tab.tsx"],"sourcesContent":["\"use client\";\n\nimport { Th } from \"@withpotter/ui-kit\";\nimport { AdmLoading, Panel } from \"../_ui\";\nimport { LoadFailed } from \"../audit/load-failed\";\nimport list from \"../_ui/list-card.module.css\";\nimport { featureCell } from \"./plan-changes\";\nimport { useFeatureCatalogue, usePlanList } from \"./use-plans\";\nimport styles from \"./pricing.module.css\";\n\n/**\n * The dashboard features plans are made of, and which plan has which: one\n * row per feature, one column per plan (its live version, or its draft when\n * it has never gone live). Features are fixed in code, so this is read only.\n */\nexport function FeaturesTab() {\n  const catalogue = useFeatureCatalogue();\n  const plans = usePlanList();\n\n  if (catalogue.isError || plans.isError) {\n    return (\n      <LoadFailed\n        message=\"The features could not be loaded.\"\n        onRetry={() => void Promise.all([catalogue.refetch(), plans.refetch()])}\n      />\n    );\n  }\n\n  if (!catalogue.data || !plans.data) return <AdmLoading label=\"Loading features…\" />;\n\n  const { features, coreFeatures } = catalogue.data;\n  const currencies = plans.data.currencies;\n  const columns = plans.data.plans\n    .map((p) => ({ id: p.id, version: p.live ?? p.open }))\n    .filter((c) => c.version);\n\n  return (\n    <Panel title=\"Features\" count={features.length} height=\"auto\" flush>\n      <div className={styles.gridScroll}>\n        <table className={styles.grid}>\n          <thead>\n            <tr>\n              <Th>Feature</Th>\n              <Th>Area</Th>\n              {columns.map((c) => (\n                <Th key={c.id}>{c.version?.name}</Th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {features.map((f) => (\n              <tr key={f.key}>\n                <td>\n                  {f.name}\n                  {coreFeatures.includes(f.key) && (\n                    <span className={list.muted}> · Kept after cancelling</span>\n                  )}\n                </td>\n                <td className={list.muted}>{f.area}</td>\n                {columns.map((c) => (\n                  <td key={c.id} className={list.nowrap}>\n                    {featureCell(f, c.version?.features[f.key], currencies)}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      {!columns.length && <p className={styles.muted}>No plans yet.</p>}\n    </Panel>\n  );\n}\n"],"mappings":";AAqBM,cAoBM,YApBN;AAnBN,SAAS,UAAU;AACnB,SAAS,YAAY,aAAa;AAClC,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,mBAAmB;AACjD,OAAO,YAAY;AAOZ,SAAS,cAAc;AAC5B,QAAM,YAAY,oBAAoB;AACtC,QAAM,QAAQ,YAAY;AAE1B,MAAI,UAAU,WAAW,MAAM,SAAS;AACtC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,KAAK,QAAQ,IAAI,CAAC,UAAU,QAAQ,GAAG,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA,IACxE;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU,QAAQ,CAAC,MAAM,KAAM,QAAO,oBAAC,cAAW,OAAM,0BAAoB;AAEjF,QAAM,EAAE,UAAU,aAAa,IAAI,UAAU;AAC7C,QAAM,aAAa,MAAM,KAAK;AAC9B,QAAM,UAAU,MAAM,KAAK,MACxB,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EACpD,OAAO,CAAC,MAAM,EAAE,OAAO;AAE1B,SACE,qBAAC,SAAM,OAAM,YAAW,OAAO,SAAS,QAAQ,QAAO,QAAO,OAAK,MACjE;AAAA,wBAAC,SAAI,WAAW,OAAO,YACrB,+BAAC,WAAM,WAAW,OAAO,MACvB;AAAA,0BAAC,WACC,+BAAC,QACC;AAAA,4BAAC,MAAG,qBAAO;AAAA,QACX,oBAAC,MAAG,kBAAI;AAAA,QACP,QAAQ,IAAI,CAAC,MACZ,oBAAC,MAAe,YAAE,SAAS,QAAlB,EAAE,EAAqB,CACjC;AAAA,SACH,GACF;AAAA,MACA,oBAAC,WACE,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,6BAAC,QACE;AAAA,YAAE;AAAA,UACF,aAAa,SAAS,EAAE,GAAG,KAC1B,oBAAC,UAAK,WAAW,KAAK,OAAO,yCAAwB;AAAA,WAEzD;AAAA,QACA,oBAAC,QAAG,WAAW,KAAK,OAAQ,YAAE,MAAK;AAAA,QAClC,QAAQ,IAAI,CAAC,MACZ,oBAAC,QAAc,WAAW,KAAK,QAC5B,sBAAY,GAAG,EAAE,SAAS,SAAS,EAAE,GAAG,GAAG,UAAU,KAD/C,EAAE,EAEX,CACD;AAAA,WAZM,EAAE,GAaX,CACD,GACH;AAAA,OACF,GACF;AAAA,IACC,CAAC,QAAQ,UAAU,oBAAC,OAAE,WAAW,OAAO,OAAO,2BAAa;AAAA,KAC/D;AAEJ;","names":[]}

package/dist/admin/pricing/page.js

@@ -0,0 +1,30 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PageHeader, PageTabs, useTabParam } from "../_ui";
+import { ApprovalsTab } from "./approvals-tab";
+import { DisplayTab } from "./display-tab";
+import { FeaturesTab } from "./features-tab";
+import { PlansTab } from "./plans-tab";
+import { PriceTab } from "./price-tab";
+import { PRICING_TAB_KEYS, tabsWithCounts } from "./pricing-tabs";
+import { SubscriptionsTab } from "./subscriptions-tab";
+import { useApprovals } from "./use-plans";
+function PricingPage() {
+  const [tab, setTab] = useTabParam(PRICING_TAB_KEYS);
+  const { data: approvals } = useApprovals();
+  const waiting = (approvals?.plans.length ?? 0) + (approvals?.basePrice.length ?? 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageHeader, { title: "Pricing" }),
+    /* @__PURE__ */ jsx(PageTabs, { tabs: tabsWithCounts(waiting), active: tab, onChange: setTab }),
+    tab === "plans" && /* @__PURE__ */ jsx(PlansTab, {}),
+    tab === "features" && /* @__PURE__ */ jsx(FeaturesTab, {}),
+    tab === "display" && /* @__PURE__ */ jsx(DisplayTab, {}),
+    tab === "subscriptions" && /* @__PURE__ */ jsx(SubscriptionsTab, {}),
+    tab === "approvals" && /* @__PURE__ */ jsx(ApprovalsTab, {}),
+    tab === "price" && /* @__PURE__ */ jsx(PriceTab, {})
+  ] });
+}
+export {
+  PricingPage as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/pricing/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/page.tsx"],"sourcesContent":["\"use client\";\n\nimport { PageHeader, PageTabs, useTabParam } from \"../_ui\";\nimport { ApprovalsTab } from \"./approvals-tab\";\nimport { DisplayTab } from \"./display-tab\";\nimport { FeaturesTab } from \"./features-tab\";\nimport { PlansTab } from \"./plans-tab\";\nimport { PriceTab } from \"./price-tab\";\nimport { PRICING_TAB_KEYS, tabsWithCounts } from \"./pricing-tabs\";\nimport { SubscriptionsTab } from \"./subscriptions-tab\";\nimport { useApprovals } from \"./use-plans\";\n\n/**\n * Pricing: the plans merchants can be on and the features in each, where\n * merchants see prices, every merchant's plan, the changes waiting for a\n * second admin, and the base price. The tab lives in `?tab=`.\n */\nexport default function PricingPage() {\n  const [tab, setTab] = useTabParam(PRICING_TAB_KEYS);\n  const { data: approvals } = useApprovals();\n  const waiting =\n    (approvals?.plans.length ?? 0) + (approvals?.basePrice.length ?? 0);\n\n  return (\n    <>\n      <PageHeader title=\"Pricing\" />\n      <PageTabs tabs={tabsWithCounts(waiting)} active={tab} onChange={setTab} />\n      {tab === \"plans\" && <PlansTab />}\n      {tab === \"features\" && <FeaturesTab />}\n      {tab === \"display\" && <DisplayTab />}\n      {tab === \"subscriptions\" && <SubscriptionsTab />}\n      {tab === \"approvals\" && <ApprovalsTab />}\n      {tab === \"price\" && <PriceTab />}\n    </>\n  );\n}\n"],"mappings":";AAwBI,mBACE,KADF;AAtBJ,SAAS,YAAY,UAAU,mBAAmB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAOd,SAAR,cAA+B;AACpC,QAAM,CAAC,KAAK,MAAM,IAAI,YAAY,gBAAgB;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI,aAAa;AACzC,QAAM,WACH,WAAW,MAAM,UAAU,MAAM,WAAW,UAAU,UAAU;AAEnE,SACE,iCACE;AAAA,wBAAC,cAAW,OAAM,WAAU;AAAA,IAC5B,oBAAC,YAAS,MAAM,eAAe,OAAO,GAAG,QAAQ,KAAK,UAAU,QAAQ;AAAA,IACvE,QAAQ,WAAW,oBAAC,YAAS;AAAA,IAC7B,QAAQ,cAAc,oBAAC,eAAY;AAAA,IACnC,QAAQ,aAAa,oBAAC,cAAW;AAAA,IACjC,QAAQ,mBAAmB,oBAAC,oBAAiB;AAAA,IAC7C,QAAQ,eAAe,oBAAC,gBAAa;AAAA,IACrC,QAAQ,WAAW,oBAAC,YAAS;AAAA,KAChC;AAEJ;","names":[]}

package/dist/admin/pricing/plan-approval.js

@@ -0,0 +1,97 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Banner } from "@withpotter/ui-kit/banner";
+import { Button } from "@withpotter/ui-kit/button";
+import { useConfirm } from "@withpotter/ui-kit/confirm-dialog";
+import { Textarea } from "@withpotter/ui-kit/textarea";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { adminPlansApi } from "@withpotter/lib/admin-pricing-api";
+import { ChangeList } from "./change-list";
+import { planChangeLines } from "./plan-changes";
+import { formatWhen } from "./price-model";
+import { usePricingPermissions } from "./use-pricing";
+import { usePlansMutation } from "./use-plans";
+const OWN = "You proposed this change. A different admin must review it.";
+function PlanApproval({
+  change,
+  live,
+  catalogue,
+  currencies,
+  proposer
+}) {
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const { adminId, approveHint } = usePricingPermissions();
+  const [reason, setReason] = useState("");
+  const approve = usePlansMutation(adminPlansApi.approve, "Not approved");
+  const reject = usePlansMutation(adminPlansApi.reject, "Not rejected");
+  const withdraw = usePlansMutation(adminPlansApi.withdraw, "Not withdrawn");
+  const own = change.proposedBy === adminId;
+  const decide = async (yes) => {
+    const ok = await confirm({
+      title: yes ? `Approve the change to ${change.name}?` : `Reject the change to ${change.name}?`,
+      description: yes ? `It goes live ${formatWhen(change.effectiveFrom)}.` : "It goes back to its author with your reason.",
+      confirmLabel: yes ? "Approve" : "Reject",
+      tone: yes ? void 0 : "danger"
+    });
+    if (!ok) return;
+    try {
+      if (yes) await approve.mutateAsync([change.id]);
+      else await reject.mutateAsync([change.id, reason.trim()]);
+    } catch {
+      return;
+    }
+    toast({ title: yes ? "Plan change approved" : "Plan change rejected" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(ChangeList, { lines: planChangeLines(live, change, catalogue, currencies) }),
+    /* @__PURE__ */ jsxs("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: [
+      proposer,
+      " proposed it. Starts ",
+      formatWhen(change.effectiveFrom),
+      ". Why: ",
+      change.reason ?? "\u2013"
+    ] }),
+    own ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Banner, { tone: "info", children: OWN }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          loading: withdraw.isPending,
+          onClick: () => void withdraw.mutateAsync([change.id]).catch(() => void 0),
+          children: "Withdraw"
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: "Reason to reject (at least 10 characters)",
+          value: reason,
+          onChange: (e) => setReason(e.target.value),
+          rows: 2,
+          maxLength: 500
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            disabled: reason.trim().length < 10,
+            loading: reject.isPending,
+            onClick: () => void decide(false),
+            children: "Reject"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { title: approveHint, loading: approve.isPending, onClick: () => void decide(true), children: "Approve" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  PlanApproval
+};
+//# sourceMappingURL=plan-approval.js.map

package/dist/admin/pricing/plan-approval.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-approval.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Banner } from \"@withpotter/ui-kit/banner\";\nimport { Button } from \"@withpotter/ui-kit/button\";\nimport { useConfirm } from \"@withpotter/ui-kit/confirm-dialog\";\nimport { Textarea } from \"@withpotter/ui-kit/textarea\";\nimport { useToast } from \"@withpotter/ui-kit/use-toast\";\nimport { adminPlansApi, type PriceCurrency } from \"@withpotter/lib/admin-pricing-api\";\nimport type { CatalogueFeature, PlanVersion } from \"@withpotter/lib/pricing-plans-types\";\nimport { ChangeList } from \"./change-list\";\nimport { planChangeLines } from \"./plan-changes\";\nimport { formatWhen } from \"./price-model\";\nimport { usePricingPermissions } from \"./use-pricing\";\nimport { usePlansMutation } from \"./use-plans\";\n\nconst OWN = \"You proposed this change. A different admin must review it.\";\n\n/** A submitted plan change: a reviewer approves or rejects it with a reason; never its author. */\nexport function PlanApproval({\n  change,\n  live,\n  catalogue,\n  currencies,\n  proposer,\n}: {\n  change: PlanVersion;\n  live: PlanVersion | null;\n  catalogue: CatalogueFeature[];\n  currencies: PriceCurrency[];\n  proposer: string;\n}) {\n  const confirm = useConfirm();\n  const { toast } = useToast();\n  const { adminId, approveHint } = usePricingPermissions();\n  const [reason, setReason] = useState(\"\");\n  const approve = usePlansMutation(adminPlansApi.approve, \"Not approved\");\n  const reject = usePlansMutation(adminPlansApi.reject, \"Not rejected\");\n  const withdraw = usePlansMutation(adminPlansApi.withdraw, \"Not withdrawn\");\n  const own = change.proposedBy === adminId;\n\n  const decide = async (yes: boolean) => {\n    const ok = await confirm({\n      title: yes ? `Approve the change to ${change.name}?` : `Reject the change to ${change.name}?`,\n      description: yes\n        ? `It goes live ${formatWhen(change.effectiveFrom)}.`\n        : \"It goes back to its author with your reason.\",\n      confirmLabel: yes ? \"Approve\" : \"Reject\",\n      tone: yes ? undefined : \"danger\",\n    });\n    if (!ok) return;\n    try {\n      if (yes) await approve.mutateAsync([change.id]);\n      else await reject.mutateAsync([change.id, reason.trim()]);\n    } catch {\n      return;\n    }\n    toast({ title: yes ? \"Plan change approved\" : \"Plan change rejected\" });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <ChangeList lines={planChangeLines(live, change, catalogue, currencies)} />\n      <p className=\"m-0 text-sm text-[var(--text-secondary)]\">\n        {proposer} proposed it. Starts {formatWhen(change.effectiveFrom)}. Why: {change.reason ?? \"–\"}\n      </p>\n      {own ? (\n        <>\n          <Banner tone=\"info\">{OWN}</Banner>\n          <div>\n            <Button\n              variant=\"secondary\"\n              loading={withdraw.isPending}\n              onClick={() => void withdraw.mutateAsync([change.id]).catch(() => undefined)}\n            >\n              Withdraw\n            </Button>\n          </div>\n        </>\n      ) : (\n        <>\n          <Textarea\n            label=\"Reason to reject (at least 10 characters)\"\n            value={reason}\n            onChange={(e) => setReason(e.target.value)}\n            rows={2}\n            maxLength={500}\n          />\n          <div className=\"flex gap-2\">\n            <Button\n              variant=\"secondary\"\n              disabled={reason.trim().length < 10}\n              loading={reject.isPending}\n              onClick={() => void decide(false)}\n            >\n              Reject\n            </Button>\n            <Button title={approveHint} loading={approve.isPending} onClick={() => void decide(true)}>\n              Approve\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8DM,SAKE,UALF,KACA,YADA;AA5DN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,qBAAyC;AAElD,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAEjC,MAAM,MAAM;AAGL,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,SAAS,YAAY,IAAI,sBAAsB;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,UAAU,iBAAiB,cAAc,SAAS,cAAc;AACtE,QAAM,SAAS,iBAAiB,cAAc,QAAQ,cAAc;AACpE,QAAM,WAAW,iBAAiB,cAAc,UAAU,eAAe;AACzE,QAAM,MAAM,OAAO,eAAe;AAElC,QAAM,SAAS,OAAO,QAAiB;AACrC,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,MAAM,yBAAyB,OAAO,IAAI,MAAM,wBAAwB,OAAO,IAAI;AAAA,MAC1F,aAAa,MACT,gBAAgB,WAAW,OAAO,aAAa,CAAC,MAChD;AAAA,MACJ,cAAc,MAAM,YAAY;AAAA,MAChC,MAAM,MAAM,SAAY;AAAA,IAC1B,CAAC;AACD,QAAI,CAAC,GAAI;AACT,QAAI;AACF,UAAI,IAAK,OAAM,QAAQ,YAAY,CAAC,OAAO,EAAE,CAAC;AAAA,UACzC,OAAM,OAAO,YAAY,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,CAAC;AAAA,IAC1D,QAAQ;AACN;AAAA,IACF;AACA,UAAM,EAAE,OAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAAA,EACxE;AAEA,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,cAAW,OAAO,gBAAgB,MAAM,QAAQ,WAAW,UAAU,GAAG;AAAA,IACzE,qBAAC,OAAE,WAAU,4CACV;AAAA;AAAA,MAAS;AAAA,MAAsB,WAAW,OAAO,aAAa;AAAA,MAAE;AAAA,MAAQ,OAAO,UAAU;AAAA,OAC5F;AAAA,IACC,MACC,iCACE;AAAA,0BAAC,UAAO,MAAK,QAAQ,eAAI;AAAA,MACzB,oBAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,SAAS;AAAA,UAClB,SAAS,MAAM,KAAK,SAAS,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,MAAM,MAAS;AAAA,UAC5E;AAAA;AAAA,MAED,GACF;AAAA,OACF,IAEA,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,UACzC,MAAM;AAAA,UACN,WAAW;AAAA;AAAA,MACb;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,UAAU,OAAO,KAAK,EAAE,SAAS;AAAA,YACjC,SAAS,OAAO;AAAA,YAChB,SAAS,MAAM,KAAK,OAAO,KAAK;AAAA,YACjC;AAAA;AAAA,QAED;AAAA,QACA,oBAAC,UAAO,OAAO,aAAa,SAAS,QAAQ,WAAW,SAAS,MAAM,KAAK,OAAO,IAAI,GAAG,qBAE1F;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/admin/pricing/plan-card-product.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@withpotter/ui-kit/button";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { adminPlanProductsApi, parseProductId } from "@withpotter/lib/admin-pricing-api";
+import { PRICING_ROOT } from "./use-plans";
+import { usePricingPermissions } from "./use-pricing";
+import styles from "./pricing.module.css";
+function PlanCardProduct({ planId }) {
+  const client = useQueryClient();
+  const { toast } = useToast();
+  const { proposeHint } = usePricingPermissions();
+  const list = useQuery({
+    queryKey: [...PRICING_ROOT, "plan-products"],
+    queryFn: adminPlanProductsApi.list
+  });
+  const linked = list.data?.find((row) => row.planId === planId)?.productId ?? "";
+  const [value, setValue] = useState("");
+  const parsed = parseProductId(value);
+  useEffect(() => setValue(linked), [linked]);
+  const save = useMutation({
+    mutationFn: (productId) => adminPlanProductsApi.set(planId, productId),
+    onSuccess: ({ productId }) => {
+      toast({ title: productId ? "Card payment linked" : "Card payment unlinked" });
+      void client.invalidateQueries({ queryKey: [...PRICING_ROOT, "plan-products"] });
+    },
+    onError: (error) => toast({ title: "Not saved", description: error.message, variant: "destructive" })
+  });
+  const changed = parsed.ok && (parsed.productId ?? "") !== linked;
+  return /* @__PURE__ */ jsxs("section", { className: "grid gap-2 text-sm", "aria-label": "Pay by card", children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0 font-medium text-[var(--text-primary)]", children: "Pay by card" }),
+    /* @__PURE__ */ jsx("p", { className: styles.muted, children: "The id of this plan's recurring product in the payment gateway's dashboard. Leave it empty and merchants on this plan pay from their wallet." }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "min-w-[14rem] flex-1 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm",
+          "aria-label": "Gateway recurring product id",
+          placeholder: "Product id",
+          value,
+          onChange: (event) => setValue(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          title: proposeHint,
+          disabled: !changed || list.isLoading,
+          loading: save.isPending,
+          onClick: () => parsed.ok && save.mutate(parsed.productId),
+          children: "Save"
+        }
+      )
+    ] }),
+    !parsed.ok && /* @__PURE__ */ jsx("p", { className: "m-0 text-[var(--error)]", children: parsed.reason })
+  ] });
+}
+export {
+  PlanCardProduct
+};
+//# sourceMappingURL=plan-card-product.js.map

package/dist/admin/pricing/plan-card-product.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-card-product.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useMutation, useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { Button } from \"@withpotter/ui-kit/button\";\nimport { useToast } from \"@withpotter/ui-kit/use-toast\";\nimport { adminPlanProductsApi, parseProductId } from \"@withpotter/lib/admin-pricing-api\";\nimport { PRICING_ROOT } from \"./use-plans\";\nimport { usePricingPermissions } from \"./use-pricing\";\nimport styles from \"./pricing.module.css\";\n\n/**\n * Which payment-gateway recurring product this plan is paid through by card. The product is made\n * in the gateway's dashboard, with this plan's price and period, and its id goes here. With none,\n * merchants on this plan pay from their wallet and are offered no card.\n */\nexport function PlanCardProduct({ planId }: { planId: string }) {\n  const client = useQueryClient();\n  const { toast } = useToast();\n  const { proposeHint } = usePricingPermissions();\n  const list = useQuery({\n    queryKey: [...PRICING_ROOT, \"plan-products\"],\n    queryFn: adminPlanProductsApi.list,\n  });\n  const linked = list.data?.find((row) => row.planId === planId)?.productId ?? \"\";\n  const [value, setValue] = useState(\"\");\n  const parsed = parseProductId(value);\n\n  useEffect(() => setValue(linked), [linked]);\n\n  const save = useMutation({\n    mutationFn: (productId: string | null) => adminPlanProductsApi.set(planId, productId),\n    onSuccess: ({ productId }) => {\n      toast({ title: productId ? \"Card payment linked\" : \"Card payment unlinked\" });\n      void client.invalidateQueries({ queryKey: [...PRICING_ROOT, \"plan-products\"] });\n    },\n    onError: (error: Error) =>\n      toast({ title: \"Not saved\", description: error.message, variant: \"destructive\" }),\n  });\n\n  const changed = parsed.ok && (parsed.productId ?? \"\") !== linked;\n\n  return (\n    <section className=\"grid gap-2 text-sm\" aria-label=\"Pay by card\">\n      <p className=\"m-0 font-medium text-[var(--text-primary)]\">Pay by card</p>\n      <p className={styles.muted}>\n        The id of this plan&apos;s recurring product in the payment gateway&apos;s dashboard. Leave it empty\n        and merchants on this plan pay from their wallet.\n      </p>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <input\n          className=\"min-w-[14rem] flex-1 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm\"\n          aria-label=\"Gateway recurring product id\"\n          placeholder=\"Product id\"\n          value={value}\n          onChange={(event) => setValue(event.target.value)}\n        />\n        <Button\n          title={proposeHint}\n          disabled={!changed || list.isLoading}\n          loading={save.isPending}\n          onClick={() => parsed.ok && save.mutate(parsed.productId)}\n        >\n          Save\n        </Button>\n      </div>\n      {!parsed.ok && <p className=\"m-0 text-[var(--error)]\">{parsed.reason}</p>}\n    </section>\n  );\n}\n"],"mappings":";AA4CM,cAKA,YALA;AA1CN,SAAS,WAAW,gBAAgB;AACpC,SAAS,aAAa,UAAU,sBAAsB;AACtD,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,OAAO,YAAY;AAOZ,SAAS,gBAAgB,EAAE,OAAO,GAAuB;AAC9D,QAAM,SAAS,eAAe;AAC9B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,sBAAsB;AAC9C,QAAM,OAAO,SAAS;AAAA,IACpB,UAAU,CAAC,GAAG,cAAc,eAAe;AAAA,IAC3C,SAAS,qBAAqB;AAAA,EAChC,CAAC;AACD,QAAM,SAAS,KAAK,MAAM,KAAK,CAAC,QAAQ,IAAI,WAAW,MAAM,GAAG,aAAa;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,SAAS,eAAe,KAAK;AAEnC,YAAU,MAAM,SAAS,MAAM,GAAG,CAAC,MAAM,CAAC;AAE1C,QAAM,OAAO,YAAY;AAAA,IACvB,YAAY,CAAC,cAA6B,qBAAqB,IAAI,QAAQ,SAAS;AAAA,IACpF,WAAW,CAAC,EAAE,UAAU,MAAM;AAC5B,YAAM,EAAE,OAAO,YAAY,wBAAwB,wBAAwB,CAAC;AAC5E,WAAK,OAAO,kBAAkB,EAAE,UAAU,CAAC,GAAG,cAAc,eAAe,EAAE,CAAC;AAAA,IAChF;AAAA,IACA,SAAS,CAAC,UACR,MAAM,EAAE,OAAO,aAAa,aAAa,MAAM,SAAS,SAAS,cAAc,CAAC;AAAA,EACpF,CAAC;AAED,QAAM,UAAU,OAAO,OAAO,OAAO,aAAa,QAAQ;AAE1D,SACE,qBAAC,aAAQ,WAAU,sBAAqB,cAAW,eACjD;AAAA,wBAAC,OAAE,WAAU,8CAA6C,yBAAW;AAAA,IACrE,oBAAC,OAAE,WAAW,OAAO,OAAO,0JAG5B;AAAA,IACA,qBAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UACX,aAAY;AAAA,UACZ;AAAA,UACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA;AAAA,MAClD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,WAAW,KAAK;AAAA,UAC3B,SAAS,KAAK;AAAA,UACd,SAAS,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO,SAAS;AAAA,UACzD;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IACC,CAAC,OAAO,MAAM,oBAAC,OAAE,WAAU,2BAA2B,iBAAO,QAAO;AAAA,KACvE;AAEJ;","names":[]}

package/dist/admin/pricing/plan-changes.js

@@ -0,0 +1,54 @@
+import { byCurrency, formatPlanPrice } from "@withpotter/lib/plan-price";
+const exponentOf = (code, currencies) => currencies.find((c) => c.code === code)?.exponent;
+const money = (prices, code, currencies) => prices[code] === void 0 ? "no price" : formatPlanPrice(prices[code], code, exponentOf(code, currencies));
+const limitText = (limit, unit) => limit === null ? "no limit" : `up to ${limit}${unit ? ` ${unit}` : ""}`;
+function priceLines(before, after, currencies, label = "") {
+  const codes = [.../* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])].sort(byCurrency);
+  return codes.filter((code) => before[code] !== after[code]).map(
+    (code) => before[code] === void 0 ? `${label}${code}: ${money(after, code, currencies)} a month` : after[code] === void 0 ? `${label}${code}: ${money(before, code, currencies)} a month \u2192 none` : `${label}${code}: ${money(before, code, currencies)} \u2192 ${money(after, code, currencies)} a month`
+  );
+}
+function featureLines(f, before, after, currencies) {
+  const was = before?.included ?? false;
+  const now = after?.included ?? false;
+  const lines = [];
+  if (was !== now) lines.push(`${now ? "Adds" : "Removes"} ${f.name}`);
+  else if (now && f.kind === "count" && (before?.limit ?? null) !== (after?.limit ?? null)) {
+    lines.push(`${f.name}: ${limitText(before?.limit ?? null)} \u2192 ${limitText(after?.limit ?? null)}`);
+  }
+  return lines.concat(
+    priceLines(before?.addOnPrices ?? {}, after?.addOnPrices ?? {}, currencies, `${f.name} add-on, `)
+  );
+}
+function planChangeLines(live, next, catalogue, currencies) {
+  if (!live) {
+    const included = catalogue.filter((f) => next.features[f.key]?.included).map((f) => f.name);
+    return [
+      `New plan: ${next.name}`,
+      ...priceLines({}, next.prices, currencies),
+      included.length ? `Includes ${included.join(", ")}` : "Includes no features",
+      next.public ? "Shown to merchants" : "Hidden from merchants"
+    ];
+  }
+  const lines = [];
+  if (live.name !== next.name) lines.push(`Name: ${live.name} \u2192 ${next.name}`);
+  lines.push(...priceLines(live.prices, next.prices, currencies));
+  if (live.public !== next.public) lines.push(next.public ? "Shown to merchants" : "Hidden from merchants");
+  for (const f of catalogue) {
+    lines.push(...featureLines(f, live.features[f.key], next.features[f.key], currencies));
+  }
+  return lines;
+}
+function featureCell(f, value, currencies) {
+  if (value?.included) {
+    return f.kind === "count" && value.limit !== null ? `Up to ${value.limit}` : "Included";
+  }
+  const codes = Object.keys(value?.addOnPrices ?? {}).sort(byCurrency);
+  if (!codes.length) return "\u2013";
+  return `Add-on ${codes.map((c) => money(value.addOnPrices, c, currencies)).join(" \xB7 ")}`;
+}
+export {
+  featureCell,
+  planChangeLines
+};
+//# sourceMappingURL=plan-changes.js.map

package/dist/admin/pricing/plan-changes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-changes.ts"],"sourcesContent":["import type { PriceCurrency, Prices } from \"@withpotter/lib/admin-pricing-api\";\nimport { byCurrency, formatPlanPrice } from \"@withpotter/lib/plan-price\";\nimport type {\n  CatalogueFeature,\n  PlanFeature,\n  PlanVersion,\n} from \"@withpotter/lib/pricing-plans-types\";\n\n/**\n * What a plan change does, line by line, for its author and its approver;\n * and how one plan reads in one cell of the plan × feature grid.\n */\ntype Shape = Pick<PlanVersion, \"name\" | \"prices\" | \"public\" | \"features\">;\n\nconst exponentOf = (code: string, currencies: PriceCurrency[]) =>\n  currencies.find((c) => c.code === code)?.exponent;\n\nconst money = (prices: Prices, code: string, currencies: PriceCurrency[]) =>\n  prices[code] === undefined\n    ? \"no price\"\n    : formatPlanPrice(prices[code], code, exponentOf(code, currencies));\n\nconst limitText = (limit: number | null, unit?: string) =>\n  limit === null ? \"no limit\" : `up to ${limit}${unit ? ` ${unit}` : \"\"}`;\n\nfunction priceLines(before: Prices, after: Prices, currencies: PriceCurrency[], label = \"\") {\n  const codes = [...new Set([...Object.keys(before), ...Object.keys(after)])].sort(byCurrency);\n\n  return codes\n    .filter((code) => before[code] !== after[code])\n    .map((code) =>\n      before[code] === undefined\n        ? `${label}${code}: ${money(after, code, currencies)} a month`\n        : after[code] === undefined\n          ? `${label}${code}: ${money(before, code, currencies)} a month → none`\n          : `${label}${code}: ${money(before, code, currencies)} → ${money(after, code, currencies)} a month`\n    );\n}\n\nfunction featureLines(\n  f: CatalogueFeature,\n  before: PlanFeature | undefined,\n  after: PlanFeature | undefined,\n  currencies: PriceCurrency[]\n): string[] {\n  const was = before?.included ?? false;\n  const now = after?.included ?? false;\n  const lines: string[] = [];\n\n  if (was !== now) lines.push(`${now ? \"Adds\" : \"Removes\"} ${f.name}`);\n  else if (now && f.kind === \"count\" && (before?.limit ?? null) !== (after?.limit ?? null)) {\n    lines.push(`${f.name}: ${limitText(before?.limit ?? null)} → ${limitText(after?.limit ?? null)}`);\n  }\n\n  return lines.concat(\n    priceLines(before?.addOnPrices ?? {}, after?.addOnPrices ?? {}, currencies, `${f.name} add-on, `)\n  );\n}\n\nexport function planChangeLines(\n  live: Shape | null,\n  next: Shape,\n  catalogue: CatalogueFeature[],\n  currencies: PriceCurrency[]\n): string[] {\n  if (!live) {\n    const included = catalogue.filter((f) => next.features[f.key]?.included).map((f) => f.name);\n\n    return [\n      `New plan: ${next.name}`,\n      ...priceLines({}, next.prices, currencies),\n      included.length ? `Includes ${included.join(\", \")}` : \"Includes no features\",\n      next.public ? \"Shown to merchants\" : \"Hidden from merchants\",\n    ];\n  }\n\n  const lines: string[] = [];\n\n  if (live.name !== next.name) lines.push(`Name: ${live.name} → ${next.name}`);\n  lines.push(...priceLines(live.prices, next.prices, currencies));\n  if (live.public !== next.public) lines.push(next.public ? \"Shown to merchants\" : \"Hidden from merchants\");\n  for (const f of catalogue) {\n    lines.push(...featureLines(f, live.features[f.key], next.features[f.key], currencies));\n  }\n\n  return lines;\n}\n\n/** One grid cell: \"Included\", \"Up to 3\", \"Add-on ₦5,000\", or a dash. */\nexport function featureCell(\n  f: CatalogueFeature,\n  value: PlanFeature | undefined,\n  currencies: PriceCurrency[]\n): string {\n  if (value?.included) {\n    return f.kind === \"count\" && value.limit !== null ? `Up to ${value.limit}` : \"Included\";\n  }\n\n  const codes = Object.keys(value?.addOnPrices ?? {}).sort(byCurrency);\n\n  if (!codes.length) return \"–\";\n\n  return `Add-on ${codes.map((c) => money(value!.addOnPrices, c, currencies)).join(\" · \")}`;\n}\n"],"mappings":"AACA,SAAS,YAAY,uBAAuB;AAa5C,MAAM,aAAa,CAAC,MAAc,eAChC,WAAW,KAAK,CAAC,MAAM,EAAE,SAAS,IAAI,GAAG;AAE3C,MAAM,QAAQ,CAAC,QAAgB,MAAc,eAC3C,OAAO,IAAI,MAAM,SACb,aACA,gBAAgB,OAAO,IAAI,GAAG,MAAM,WAAW,MAAM,UAAU,CAAC;AAEtE,MAAM,YAAY,CAAC,OAAsB,SACvC,UAAU,OAAO,aAAa,SAAS,KAAK,GAAG,OAAO,IAAI,IAAI,KAAK,EAAE;AAEvE,SAAS,WAAW,QAAgB,OAAe,YAA6B,QAAQ,IAAI;AAC1F,QAAM,QAAQ,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAK,MAAM,GAAG,GAAG,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,UAAU;AAE3F,SAAO,MACJ,OAAO,CAAC,SAAS,OAAO,IAAI,MAAM,MAAM,IAAI,CAAC,EAC7C;AAAA,IAAI,CAAC,SACJ,OAAO,IAAI,MAAM,SACb,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,OAAO,MAAM,UAAU,CAAC,aAClD,MAAM,IAAI,MAAM,SACd,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,QAAQ,MAAM,UAAU,CAAC,yBACnD,GAAG,KAAK,GAAG,IAAI,KAAK,MAAM,QAAQ,MAAM,UAAU,CAAC,WAAM,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA,EAC/F;AACJ;AAEA,SAAS,aACP,GACA,QACA,OACA,YACU;AACV,QAAM,MAAM,QAAQ,YAAY;AAChC,QAAM,MAAM,OAAO,YAAY;AAC/B,QAAM,QAAkB,CAAC;AAEzB,MAAI,QAAQ,IAAK,OAAM,KAAK,GAAG,MAAM,SAAS,SAAS,IAAI,EAAE,IAAI,EAAE;AAAA,WAC1D,OAAO,EAAE,SAAS,YAAY,QAAQ,SAAS,WAAW,OAAO,SAAS,OAAO;AACxF,UAAM,KAAK,GAAG,EAAE,IAAI,KAAK,UAAU,QAAQ,SAAS,IAAI,CAAC,WAAM,UAAU,OAAO,SAAS,IAAI,CAAC,EAAE;AAAA,EAClG;AAEA,SAAO,MAAM;AAAA,IACX,WAAW,QAAQ,eAAe,CAAC,GAAG,OAAO,eAAe,CAAC,GAAG,YAAY,GAAG,EAAE,IAAI,WAAW;AAAA,EAClG;AACF;AAEO,SAAS,gBACd,MACA,MACA,WACA,YACU;AACV,MAAI,CAAC,MAAM;AACT,UAAM,WAAW,UAAU,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE,GAAG,GAAG,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI;AAE1F,WAAO;AAAA,MACL,aAAa,KAAK,IAAI;AAAA,MACtB,GAAG,WAAW,CAAC,GAAG,KAAK,QAAQ,UAAU;AAAA,MACzC,SAAS,SAAS,YAAY,SAAS,KAAK,IAAI,CAAC,KAAK;AAAA,MACtD,KAAK,SAAS,uBAAuB;AAAA,IACvC;AAAA,EACF;AAEA,QAAM,QAAkB,CAAC;AAEzB,MAAI,KAAK,SAAS,KAAK,KAAM,OAAM,KAAK,SAAS,KAAK,IAAI,WAAM,KAAK,IAAI,EAAE;AAC3E,QAAM,KAAK,GAAG,WAAW,KAAK,QAAQ,KAAK,QAAQ,UAAU,CAAC;AAC9D,MAAI,KAAK,WAAW,KAAK,OAAQ,OAAM,KAAK,KAAK,SAAS,uBAAuB,uBAAuB;AACxG,aAAW,KAAK,WAAW;AACzB,UAAM,KAAK,GAAG,aAAa,GAAG,KAAK,SAAS,EAAE,GAAG,GAAG,KAAK,SAAS,EAAE,GAAG,GAAG,UAAU,CAAC;AAAA,EACvF;AAEA,SAAO;AACT;AAGO,SAAS,YACd,GACA,OACA,YACQ;AACR,MAAI,OAAO,UAAU;AACnB,WAAO,EAAE,SAAS,WAAW,MAAM,UAAU,OAAO,SAAS,MAAM,KAAK,KAAK;AAAA,EAC/E;AAEA,QAAM,QAAQ,OAAO,KAAK,OAAO,eAAe,CAAC,CAAC,EAAE,KAAK,UAAU;AAEnE,MAAI,CAAC,MAAM,OAAQ,QAAO;AAE1B,SAAO,UAAU,MAAM,IAAI,CAAC,MAAM,MAAM,MAAO,aAAa,GAAG,UAAU,CAAC,EAAE,KAAK,QAAK,CAAC;AACzF;","names":[]}

package/dist/admin/pricing/plan-drawer.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { Button } from "@withpotter/ui-kit/button";
+import { useConfirm } from "@withpotter/ui-kit/confirm-dialog";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { adminPlansApi } from "@withpotter/lib/admin-pricing-api";
+import { AdmLoading, Drawer } from "../_ui";
+import { LoadFailed } from "../audit/load-failed";
+import { PlanCardProduct } from "./plan-card-product";
+import { PlanFormDialog } from "./plan-form-dialog";
+import { priceList } from "./plan-row";
+import { VERSION_STATUS, formatWhen } from "./price-model";
+import { pricingTabHref } from "./pricing-tabs";
+import { usePricingPermissions } from "./use-pricing";
+import { useAdminName, useFeatureCatalogue, usePlanDetail, usePlansMutation } from "./use-plans";
+import styles from "./pricing.module.css";
+function PlanDrawer({
+  open,
+  summary,
+  currencies,
+  onClose
+}) {
+  const detail = usePlanDetail(summary?.id ?? null);
+  const catalogue = useFeatureCatalogue();
+  const { adminId, proposeHint } = usePricingPermissions();
+  const nameOf = useAdminName(adminId);
+  const confirm = useConfirm();
+  const [editing, setEditing] = useState(false);
+  const withdraw = usePlansMutation(adminPlansApi.withdraw, "Not withdrawn");
+  const live = summary?.live ?? null;
+  const change = summary?.open ?? null;
+  const own = change?.proposedBy === adminId;
+  const included = (catalogue.data?.features ?? []).filter((f) => live?.features[f.key]?.included);
+  const discard = async () => {
+    const ok = await confirm({
+      title: change?.status === "draft" ? "Discard this draft?" : "Withdraw this change?",
+      confirmLabel: change?.status === "draft" ? "Discard" : "Withdraw",
+      tone: "danger"
+    });
+    if (ok && change) await withdraw.mutateAsync([change.id]).catch(() => void 0);
+  };
+  const actions = !change ? /* @__PURE__ */ jsx(Button, { title: proposeHint, disabled: !live || !catalogue.data, onClick: () => setEditing(true), children: "Change plan" }) : own && change.status !== "approved" ? /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", loading: withdraw.isPending, onClick: () => void discard(), children: change.status === "draft" ? "Discard draft" : "Withdraw" }),
+    change.status === "draft" && /* @__PURE__ */ jsx(Button, { disabled: !catalogue.data, onClick: () => setEditing(true), children: "Continue draft" })
+  ] }) : change.status === "submitted" ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", children: /* @__PURE__ */ jsx(Link, { href: pricingTabHref("approvals"), children: "Review in Approvals" }) }) : null;
+  return /* @__PURE__ */ jsxs(
+    Drawer,
+    {
+      open,
+      onClose,
+      title: (live ?? change)?.name ?? "Plan",
+      meta: summary ? `${summary.subscribers.toLocaleString("en")} merchants` : void 0,
+      actions,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.stack, children: [
+          live && /* @__PURE__ */ jsxs("section", { className: "grid gap-1 text-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "m-0 font-medium text-[var(--text-primary)]", children: priceList(live.prices, currencies).map((l) => `${l} a month`).join(" \xB7 ") }),
+            /* @__PURE__ */ jsx("p", { className: styles.muted, children: included.length ? included.map((f) => f.name).join(", ") : "No features" })
+          ] }),
+          summary && /* @__PURE__ */ jsx(PlanCardProduct, { planId: summary.id }),
+          change && /* @__PURE__ */ jsxs("p", { className: styles.muted, children: [
+            VERSION_STATUS[change.status].label,
+            " by ",
+            nameOf(change.proposedBy),
+            change.effectiveFrom ? `, from ${formatWhen(change.effectiveFrom)}` : "",
+            "."
+          ] }),
+          detail.isError ? /* @__PURE__ */ jsx(LoadFailed, { message: "The versions could not be loaded.", onRetry: () => void detail.refetch() }) : !detail.data ? /* @__PURE__ */ jsx(AdmLoading, { label: "Loading versions\u2026" }) : /* @__PURE__ */ jsx("ul", { className: styles.history, "aria-label": "Versions", children: detail.data.versions.map((v) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-primary)]", children: [
+              "Version ",
+              v.version
+            ] }),
+            /* @__PURE__ */ jsx(StatusBadge, { status: VERSION_STATUS[v.status].badge, label: VERSION_STATUS[v.status].label }),
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)]", children: v.rejectionReason ? `Rejected: ${v.rejectionReason}` : v.reason ?? formatWhen(v.createdAt) })
+          ] }, v.id)) })
+        ] }),
+        editing && summary && catalogue.data && /* @__PURE__ */ jsx(
+          PlanFormDialog,
+          {
+            planId: summary.id,
+            draft: own && change?.status === "draft" ? change : null,
+            live,
+            catalogue: catalogue.data.features,
+            currencies,
+            onClose: () => setEditing(false)
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlanDrawer
+};
+//# sourceMappingURL=plan-drawer.js.map