@withpotter/pages-admin 0.13.0-next.101

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

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

package/dist/admin/pricing/plan-form-basics.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@withpotter/ui-kit/input";
+import { Textarea } from "@withpotter/ui-kit/textarea";
+import { ToggleRow } from "@withpotter/ui-kit/toggle";
+function PlanFormBasics({
+  form,
+  errors,
+  currencies,
+  onChange
+}) {
+  const typedName = form.name.trim().length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: "Name",
+        value: form.name,
+        maxLength: 100,
+        onChange: (e) => onChange({ ...form, name: e.target.value }),
+        error: typedName ? errors.name : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "What it is for (optional)",
+        value: form.description,
+        rows: 2,
+        maxLength: 500,
+        onChange: (e) => onChange({ ...form, description: e.target.value })
+      }
+    ),
+    currencies.map(({ code }) => /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: `Monthly price in ${code}`,
+        inputMode: "decimal",
+        value: form.prices[code] ?? "",
+        onChange: (e) => onChange({ ...form, prices: { ...form.prices, [code]: e.target.value } }),
+        error: errors[`price.${code}`]
+      },
+      code
+    )),
+    /* @__PURE__ */ jsx("div", { className: "rounded-[var(--adm-card-radius)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx(
+      ToggleRow,
+      {
+        label: "Shown to merchants",
+        hint: "Off: only an admin can put a merchant on it.",
+        checked: form.public,
+        onChange: (next) => onChange({ ...form, public: next })
+      }
+    ) })
+  ] });
+}
+export {
+  PlanFormBasics
+};
+//# sourceMappingURL=plan-form-basics.js.map

package/dist/admin/pricing/plan-form-basics.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-form-basics.tsx"],"sourcesContent":["\"use client\";\n\nimport { Input } from \"@withpotter/ui-kit/input\";\nimport { Textarea } from \"@withpotter/ui-kit/textarea\";\nimport { ToggleRow } from \"@withpotter/ui-kit/toggle\";\nimport type { PriceCurrency } from \"@withpotter/lib/admin-pricing-api\";\nimport type { FormErrors, PlanForm } from \"./plan-model\";\n\n/** Step 1: the plan's name, a line about it, whether merchants see it, and its monthly price per currency. */\nexport function PlanFormBasics({\n  form,\n  errors,\n  currencies,\n  onChange,\n}: {\n  form: PlanForm;\n  errors: FormErrors;\n  currencies: PriceCurrency[];\n  onChange: (next: PlanForm) => void;\n}) {\n  const typedName = form.name.trim().length > 0;\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Input\n        label=\"Name\"\n        value={form.name}\n        maxLength={100}\n        onChange={(e) => onChange({ ...form, name: e.target.value })}\n        error={typedName ? errors.name : undefined}\n      />\n      <Textarea\n        label=\"What it is for (optional)\"\n        value={form.description}\n        rows={2}\n        maxLength={500}\n        onChange={(e) => onChange({ ...form, description: e.target.value })}\n      />\n      {currencies.map(({ code }) => (\n        <Input\n          key={code}\n          label={`Monthly price in ${code}`}\n          inputMode=\"decimal\"\n          value={form.prices[code] ?? \"\"}\n          onChange={(e) => onChange({ ...form, prices: { ...form.prices, [code]: e.target.value } })}\n          error={errors[`price.${code}`]}\n        />\n      ))}\n      <div className=\"rounded-[var(--adm-card-radius)] border border-[var(--border-subtle)]\">\n        <ToggleRow\n          label=\"Shown to merchants\"\n          hint=\"Off: only an admin can put a merchant on it.\"\n          checked={form.public}\n          onChange={(next) => onChange({ ...form, public: next })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAuBI,SACE,KADF;AArBJ,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAKnB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAY,KAAK,KAAK,KAAK,EAAE,SAAS;AAE5C,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,WAAW;AAAA,QACX,UAAU,CAAC,MAAM,SAAS,EAAE,GAAG,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC;AAAA,QAC3D,OAAO,YAAY,OAAO,OAAO;AAAA;AAAA,IACnC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU,CAAC,MAAM,SAAS,EAAE,GAAG,MAAM,aAAa,EAAE,OAAO,MAAM,CAAC;AAAA;AAAA,IACpE;AAAA,IACC,WAAW,IAAI,CAAC,EAAE,KAAK,MACtB;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,oBAAoB,IAAI;AAAA,QAC/B,WAAU;AAAA,QACV,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,QAC5B,UAAU,CAAC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,KAAK,QAAQ,CAAC,IAAI,GAAG,EAAE,OAAO,MAAM,EAAE,CAAC;AAAA,QACzF,OAAO,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,MALxB;AAAA,IAMP,CACD;AAAA,IACD,oBAAC,SAAI,WAAU,yEACb;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS,KAAK;AAAA,QACd,UAAU,CAAC,SAAS,SAAS,EAAE,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA,IACxD,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/pricing/plan-form-dialog.js

@@ -0,0 +1,103 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "@withpotter/ui-kit/button";
+import { FormDialog } from "@withpotter/ui-kit/form-dialog";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { adminPlansApi } from "@withpotter/lib/admin-pricing-api";
+import { PlanFormBasics } from "./plan-form-basics";
+import { PlanFormFeatures } from "./plan-form-features";
+import { PlanFormReview, useStart } from "./plan-form-review";
+import { planChangeLines } from "./plan-changes";
+import { draftFrom, formFrom, stepError } from "./plan-model";
+import { usePlansMutation } from "./use-plans";
+const STEPS = ["Basics and price", "Features", "Review"];
+function PlanFormDialog({
+  planId,
+  draft,
+  live,
+  catalogue,
+  currencies,
+  onClose
+}) {
+  const { toast } = useToast();
+  const [step, setStep] = useState(0);
+  const [form, setForm] = useState(() => formFrom(draft ?? live, catalogue, currencies));
+  const start = useStart();
+  const create = usePlansMutation(adminPlansApi.create, "Plan not created");
+  const begin = usePlansMutation(adminPlansApi.startDraft, "Could not start");
+  const save = usePlansMutation(adminPlansApi.save, "Not saved");
+  const submit = usePlansMutation(adminPlansApi.submit, "Not sent");
+  const { draft: body, errors } = draftFrom(form, catalogue, currencies);
+  const problem = stepError(step, errors);
+  const last = step === STEPS.length - 1;
+  const next = { ...body, features: body.features };
+  const unchanged = Boolean(live) && (live?.description ?? null) === (body.description ?? null) && !planChangeLines(live, next, catalogue, currencies).length;
+  const ready = !problem && (!last || start.ready && !unchanged);
+  const busy = create.isPending || begin.isPending || save.isPending || submit.isPending;
+  const send = async () => {
+    try {
+      let id = draft?.id;
+      if (!id && !planId) id = (await create.mutateAsync([body])).id;
+      else {
+        if (!id) id = (await begin.mutateAsync([planId])).id;
+        await save.mutateAsync([id, body]);
+      }
+      await submit.mutateAsync([id, start.iso, start.reason.trim()]);
+    } catch {
+      return;
+    }
+    toast({ title: "Sent for approval", description: "A different admin must approve it." });
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    FormDialog,
+    {
+      open: true,
+      title: planId ? `Change ${live?.name ?? "plan"}` : "New plan",
+      description: `Step ${step + 1} of 3: ${STEPS[step]}`,
+      onClose,
+      scrollable: true,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: step ? () => setStep(step - 1) : onClose, children: step ? "Back" : "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: !ready,
+            loading: busy,
+            title: problem ?? void 0,
+            onClick: () => last ? void send() : setStep(step + 1),
+            children: last ? "Send for approval" : "Next"
+          }
+        )
+      ] }),
+      children: [
+        step === 0 && /* @__PURE__ */ jsx(PlanFormBasics, { form, errors, currencies, onChange: setForm }),
+        step === 1 && /* @__PURE__ */ jsx(
+          PlanFormFeatures,
+          {
+            form,
+            errors,
+            catalogue,
+            currencies,
+            onChange: setForm
+          }
+        ),
+        last && /* @__PURE__ */ jsx(
+          PlanFormReview,
+          {
+            live,
+            draft: body,
+            catalogue,
+            currencies,
+            start
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlanFormDialog
+};
+//# sourceMappingURL=plan-form-dialog.js.map

package/dist/admin/pricing/plan-form-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-form-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@withpotter/ui-kit/button\";\nimport { FormDialog } from \"@withpotter/ui-kit/form-dialog\";\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 { PlanFormBasics } from \"./plan-form-basics\";\nimport { PlanFormFeatures } from \"./plan-form-features\";\nimport { PlanFormReview, useStart } from \"./plan-form-review\";\nimport { planChangeLines } from \"./plan-changes\";\nimport { draftFrom, formFrom, stepError, type PlanForm } from \"./plan-model\";\nimport { usePlansMutation } from \"./use-plans\";\n\nconst STEPS = [\"Basics and price\", \"Features\", \"Review\"];\n\n/**\n * A new plan, or a change to one, in three steps: basics and price, then\n * features (include, limit, add-on price), then review with a start date and\n * a reason. Sending it asks a second admin to approve; until then it is a\n * draft that only its author can edit.\n */\nexport function PlanFormDialog({\n  planId,\n  draft,\n  live,\n  catalogue,\n  currencies,\n  onClose,\n}: {\n  /** The plan being changed; null for a new plan. */\n  planId: string | null;\n  /** The admin's own draft, if one is open. */\n  draft: PlanVersion | null;\n  live: PlanVersion | null;\n  catalogue: CatalogueFeature[];\n  currencies: PriceCurrency[];\n  onClose: () => void;\n}) {\n  const { toast } = useToast();\n  const [step, setStep] = useState(0);\n  const [form, setForm] = useState<PlanForm>(() => formFrom(draft ?? live, catalogue, currencies));\n  const start = useStart();\n  const create = usePlansMutation(adminPlansApi.create, \"Plan not created\");\n  const begin = usePlansMutation(adminPlansApi.startDraft, \"Could not start\");\n  const save = usePlansMutation(adminPlansApi.save, \"Not saved\");\n  const submit = usePlansMutation(adminPlansApi.submit, \"Not sent\");\n  const { draft: body, errors } = draftFrom(form, catalogue, currencies);\n  const problem = stepError(step, errors);\n  const last = step === STEPS.length - 1;\n  const next = { ...body, features: body.features as PlanVersion[\"features\"] };\n  const unchanged =\n    Boolean(live) &&\n    (live?.description ?? null) === (body.description ?? null) &&\n    !planChangeLines(live, next, catalogue, currencies).length;\n  const ready = !problem && (!last || (start.ready && !unchanged));\n  const busy = create.isPending || begin.isPending || save.isPending || submit.isPending;\n\n  const send = async () => {\n    try {\n      let id = draft?.id;\n\n      if (!id && !planId) id = (await create.mutateAsync([body])).id;\n      else {\n        if (!id) id = (await begin.mutateAsync([planId as string])).id;\n        await save.mutateAsync([id, body]);\n      }\n      await submit.mutateAsync([id, start.iso, start.reason.trim()]);\n    } catch {\n      return; // the mutation's toast has said why\n    }\n    toast({ title: \"Sent for approval\", description: \"A different admin must approve it.\" });\n    onClose();\n  };\n\n  return (\n    <FormDialog\n      open\n      title={planId ? `Change ${live?.name ?? \"plan\"}` : \"New plan\"}\n      description={`Step ${step + 1} of 3: ${STEPS[step]}`}\n      onClose={onClose}\n      scrollable\n      footer={\n        <>\n          <Button variant=\"secondary\" onClick={step ? () => setStep(step - 1) : onClose}>\n            {step ? \"Back\" : \"Cancel\"}\n          </Button>\n          <Button\n            disabled={!ready}\n            loading={busy}\n            title={problem ?? undefined}\n            onClick={() => (last ? void send() : setStep(step + 1))}\n          >\n            {last ? \"Send for approval\" : \"Next\"}\n          </Button>\n        </>\n      }\n    >\n      {step === 0 && (\n        <PlanFormBasics form={form} errors={errors} currencies={currencies} onChange={setForm} />\n      )}\n      {step === 1 && (\n        <PlanFormFeatures\n          form={form}\n          errors={errors}\n          catalogue={catalogue}\n          currencies={currencies}\n          onChange={setForm}\n        />\n      )}\n      {last && (\n        <PlanFormReview\n          live={live}\n          draft={body}\n          catalogue={catalogue}\n          currencies={currencies}\n          start={start}\n        />\n      )}\n    </FormDialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/pricing/plan-form-features.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@withpotter/ui-kit/checkbox";
+import { Input } from "@withpotter/ui-kit/input";
+import styles from "./pricing.module.css";
+function PlanFormFeatures({
+  form,
+  errors,
+  catalogue,
+  currencies,
+  onChange
+}) {
+  const areas = [...new Set(catalogue.map((f) => f.area))];
+  const set = (key, patch) => onChange({
+    ...form,
+    features: { ...form.features, [key]: { ...form.features[key], ...patch } }
+  });
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: areas.map((area) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "m-0 text-sm font-medium text-[var(--text-secondary)]", children: area }),
+    catalogue.filter((f) => f.area === area).map((f) => {
+      const value = form.features[f.key];
+      return /* @__PURE__ */ jsxs("div", { className: styles.featureRow, children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: f.name,
+            checked: value?.included ?? false,
+            onChange: (e) => set(f.key, { included: e.target.checked })
+          }
+        ),
+        value?.included && f.kind === "count" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: `Limit (blank is no limit)`,
+            inputMode: "numeric",
+            value: value.limit,
+            onChange: (e) => set(f.key, { limit: e.target.value }),
+            error: errors[`limit.${f.key}`]
+          }
+        ),
+        !value?.included && currencies.map(({ code }) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: `Add-on price in ${code} (optional)`,
+            inputMode: "decimal",
+            value: value?.addOn[code] ?? "",
+            onChange: (e) => set(f.key, { addOn: { ...value?.addOn, [code]: e.target.value } }),
+            error: errors[`addOn.${f.key}.${code}`]
+          },
+          code
+        ))
+      ] }, f.key);
+    })
+  ] }, area)) });
+}
+export {
+  PlanFormFeatures
+};
+//# sourceMappingURL=plan-form-features.js.map

package/dist/admin/pricing/plan-form-features.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-form-features.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox } from \"@withpotter/ui-kit/checkbox\";\nimport { Input } from \"@withpotter/ui-kit/input\";\nimport type { PriceCurrency } from \"@withpotter/lib/admin-pricing-api\";\nimport type { CatalogueFeature } from \"@withpotter/lib/pricing-plans-types\";\nimport type { FeatureForm, FormErrors, PlanForm } from \"./plan-model\";\nimport styles from \"./pricing.module.css\";\n\n/**\n * Step 2: each dashboard feature, by area. Included or not; a count feature\n * takes a limit (blank is none); a feature left out can carry an add-on\n * price per currency, which a merchant pays to add it to this plan.\n */\nexport function PlanFormFeatures({\n  form,\n  errors,\n  catalogue,\n  currencies,\n  onChange,\n}: {\n  form: PlanForm;\n  errors: FormErrors;\n  catalogue: CatalogueFeature[];\n  currencies: PriceCurrency[];\n  onChange: (next: PlanForm) => void;\n}) {\n  const areas = [...new Set(catalogue.map((f) => f.area))];\n  const set = (key: string, patch: Partial<FeatureForm>) =>\n    onChange({\n      ...form,\n      features: { ...form.features, [key]: { ...form.features[key], ...patch } },\n    });\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      {areas.map((area) => (\n        <section key={area} className=\"flex flex-col gap-2\">\n          <h3 className=\"m-0 text-sm font-medium text-[var(--text-secondary)]\">{area}</h3>\n          {catalogue\n            .filter((f) => f.area === area)\n            .map((f) => {\n              const value = form.features[f.key];\n\n              return (\n                <div key={f.key} className={styles.featureRow}>\n                  <Checkbox\n                    label={f.name}\n                    checked={value?.included ?? false}\n                    onChange={(e) => set(f.key, { included: e.target.checked })}\n                  />\n                  {value?.included && f.kind === \"count\" && (\n                    <Input\n                      label={`Limit (blank is no limit)`}\n                      inputMode=\"numeric\"\n                      value={value.limit}\n                      onChange={(e) => set(f.key, { limit: e.target.value })}\n                      error={errors[`limit.${f.key}`]}\n                    />\n                  )}\n                  {!value?.included &&\n                    currencies.map(({ code }) => (\n                      <Input\n                        key={code}\n                        label={`Add-on price in ${code} (optional)`}\n                        inputMode=\"decimal\"\n                        value={value?.addOn[code] ?? \"\"}\n                        onChange={(e) =>\n                          set(f.key, { addOn: { ...value?.addOn, [code]: e.target.value } })\n                        }\n                        error={errors[`addOn.${f.key}.${code}`]}\n                      />\n                    ))}\n                </div>\n              );\n            })}\n        </section>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAsCU,cAOM,YAPN;AApCV,SAAS,gBAAgB;AACzB,SAAS,aAAa;AAItB,OAAO,YAAY;AAOZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,QAAQ,CAAC,GAAG,IAAI,IAAI,UAAU,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACvD,QAAM,MAAM,CAAC,KAAa,UACxB,SAAS;AAAA,IACP,GAAG;AAAA,IACH,UAAU,EAAE,GAAG,KAAK,UAAU,CAAC,GAAG,GAAG,EAAE,GAAG,KAAK,SAAS,GAAG,GAAG,GAAG,MAAM,EAAE;AAAA,EAC3E,CAAC;AAEH,SACE,oBAAC,SAAI,WAAU,uBACZ,gBAAM,IAAI,CAAC,SACV,qBAAC,aAAmB,WAAU,uBAC5B;AAAA,wBAAC,QAAG,WAAU,wDAAwD,gBAAK;AAAA,IAC1E,UACE,OAAO,CAAC,MAAM,EAAE,SAAS,IAAI,EAC7B,IAAI,CAAC,MAAM;AACV,YAAM,QAAQ,KAAK,SAAS,EAAE,GAAG;AAEjC,aACE,qBAAC,SAAgB,WAAW,OAAO,YACjC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,EAAE;AAAA,YACT,SAAS,OAAO,YAAY;AAAA,YAC5B,UAAU,CAAC,MAAM,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,QAAQ,CAAC;AAAA;AAAA,QAC5D;AAAA,QACC,OAAO,YAAY,EAAE,SAAS,WAC7B;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,WAAU;AAAA,YACV,OAAO,MAAM;AAAA,YACb,UAAU,CAAC,MAAM,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,MAAM,CAAC;AAAA,YACrD,OAAO,OAAO,SAAS,EAAE,GAAG,EAAE;AAAA;AAAA,QAChC;AAAA,QAED,CAAC,OAAO,YACP,WAAW,IAAI,CAAC,EAAE,KAAK,MACrB;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,mBAAmB,IAAI;AAAA,YAC9B,WAAU;AAAA,YACV,OAAO,OAAO,MAAM,IAAI,KAAK;AAAA,YAC7B,UAAU,CAAC,MACT,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,OAAO,OAAO,CAAC,IAAI,GAAG,EAAE,OAAO,MAAM,EAAE,CAAC;AAAA,YAEnE,OAAO,OAAO,SAAS,EAAE,GAAG,IAAI,IAAI,EAAE;AAAA;AAAA,UAPjC;AAAA,QAQP,CACD;AAAA,WA3BK,EAAE,GA4BZ;AAAA,IAEJ,CAAC;AAAA,OAtCS,IAuCd,CACD,GACH;AAEJ;","names":[]}

package/dist/admin/pricing/plan-form-review.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DateField } from "@withpotter/ui-kit/date-field";
+import { Field } from "@withpotter/ui-kit/field";
+import { Textarea } from "@withpotter/ui-kit/textarea";
+import { TimeField } from "@withpotter/ui-kit/time-field";
+import { ChangeList } from "./change-list";
+import { planChangeLines } from "./plan-changes";
+const today = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+function useStart() {
+  const [date, setDate] = useState(today);
+  const [time, setTime] = useState("09:00");
+  const [reason, setReason] = useState("");
+  const [openedAt] = useState(() => Date.now());
+  const startsAt = /* @__PURE__ */ new Date(`${date}T${time}:00`);
+  const tooSoon = !(startsAt.getTime() > openedAt + 5 * 6e4);
+  return {
+    date,
+    setDate,
+    time,
+    setTime,
+    reason,
+    setReason,
+    tooSoon,
+    iso: tooSoon ? "" : startsAt.toISOString(),
+    ready: !tooSoon && reason.trim().length >= 10
+  };
+}
+function PlanFormReview({
+  live,
+  draft,
+  catalogue,
+  currencies,
+  start
+}) {
+  const next = {
+    name: draft.name,
+    prices: draft.prices,
+    public: draft.public,
+    features: draft.features
+  };
+  const lines = planChangeLines(live, next, catalogue, currencies);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    lines.length ? /* @__PURE__ */ jsx(ChangeList, { lines }) : /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: "Nothing changes yet." }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(Field, { label: "Starts on", children: /* @__PURE__ */ jsx(DateField, { value: start.date, onChange: start.setDate, min: today(), error: start.tooSoon }) }),
+      /* @__PURE__ */ jsx(Field, { label: "At", children: /* @__PURE__ */ jsx(TimeField, { value: start.time, onChange: start.setTime, "aria-label": "Start time" }) })
+    ] }),
+    start.tooSoon && /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-[var(--error)]", children: "Pick a time at least 5 minutes from now." }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Why (at least 10 characters)",
+        value: start.reason,
+        onChange: (e) => start.setReason(e.target.value),
+        rows: 2,
+        maxLength: 500
+      }
+    )
+  ] });
+}
+export {
+  PlanFormReview,
+  useStart
+};
+//# sourceMappingURL=plan-form-review.js.map

package/dist/admin/pricing/plan-form-review.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-form-review.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { DateField } from \"@withpotter/ui-kit/date-field\";\nimport { Field } from \"@withpotter/ui-kit/field\";\nimport { Textarea } from \"@withpotter/ui-kit/textarea\";\nimport { TimeField } from \"@withpotter/ui-kit/time-field\";\nimport type { PriceCurrency } from \"@withpotter/lib/admin-pricing-api\";\nimport type {\n  CatalogueFeature,\n  PlanDraftInput,\n  PlanVersion,\n} from \"@withpotter/lib/pricing-plans-types\";\nimport { ChangeList } from \"./change-list\";\nimport { planChangeLines } from \"./plan-changes\";\n\nconst today = () => new Date().toISOString().slice(0, 10);\n\n/** When the change starts and why: at least 5 minutes out, 10 characters of reason. */\nexport function useStart() {\n  const [date, setDate] = useState(today);\n  const [time, setTime] = useState(\"09:00\");\n  const [reason, setReason] = useState(\"\");\n  const [openedAt] = useState(() => Date.now());\n  const startsAt = new Date(`${date}T${time}:00`);\n  const tooSoon = !(startsAt.getTime() > openedAt + 5 * 60_000);\n\n  return {\n    date,\n    setDate,\n    time,\n    setTime,\n    reason,\n    setReason,\n    tooSoon,\n    iso: tooSoon ? \"\" : startsAt.toISOString(),\n    ready: !tooSoon && reason.trim().length >= 10,\n  };\n}\n\n/** Step 3: what changes, when it starts, and why. */\nexport function PlanFormReview({\n  live,\n  draft,\n  catalogue,\n  currencies,\n  start,\n}: {\n  live: PlanVersion | null;\n  draft: PlanDraftInput;\n  catalogue: CatalogueFeature[];\n  currencies: PriceCurrency[];\n  start: ReturnType<typeof useStart>;\n}) {\n  const next = {\n    name: draft.name,\n    prices: draft.prices,\n    public: draft.public,\n    features: draft.features as PlanVersion[\"features\"],\n  };\n  const lines = planChangeLines(live, next, catalogue, currencies);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {lines.length ? (\n        <ChangeList lines={lines} />\n      ) : (\n        <p className=\"m-0 text-sm text-[var(--text-secondary)]\">Nothing changes yet.</p>\n      )}\n      <div className=\"grid grid-cols-2 gap-4\">\n        <Field label=\"Starts on\">\n          <DateField value={start.date} onChange={start.setDate} min={today()} error={start.tooSoon} />\n        </Field>\n        <Field label=\"At\">\n          <TimeField value={start.time} onChange={start.setTime} aria-label=\"Start time\" />\n        </Field>\n      </div>\n      {start.tooSoon && (\n        <p className=\"m-0 text-sm text-[var(--error)]\">Pick a time at least 5 minutes from now.</p>\n      )}\n      <Textarea\n        label=\"Why (at least 10 characters)\"\n        value={start.reason}\n        onChange={(e) => start.setReason(e.target.value)}\n        rows={2}\n        maxLength={500}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAiEQ,cAIF,YAJE;AA/DR,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAO1B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAEhC,MAAM,QAAQ,OAAM,oBAAI,KAAK,GAAE,YAAY,EAAE,MAAM,GAAG,EAAE;AAGjD,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,OAAO;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM,KAAK,IAAI,CAAC;AAC5C,QAAM,WAAW,oBAAI,KAAK,GAAG,IAAI,IAAI,IAAI,KAAK;AAC9C,QAAM,UAAU,EAAE,SAAS,QAAQ,IAAI,WAAW,IAAI;AAEtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,UAAU,KAAK,SAAS,YAAY;AAAA,IACzC,OAAO,CAAC,WAAW,OAAO,KAAK,EAAE,UAAU;AAAA,EAC7C;AACF;AAGO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,OAAO;AAAA,IACX,MAAM,MAAM;AAAA,IACZ,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,UAAU,MAAM;AAAA,EAClB;AACA,QAAM,QAAQ,gBAAgB,MAAM,MAAM,WAAW,UAAU;AAE/D,SACE,qBAAC,SAAI,WAAU,uBACZ;AAAA,UAAM,SACL,oBAAC,cAAW,OAAc,IAE1B,oBAAC,OAAE,WAAU,4CAA2C,kCAAoB;AAAA,IAE9E,qBAAC,SAAI,WAAU,0BACb;AAAA,0BAAC,SAAM,OAAM,aACX,8BAAC,aAAU,OAAO,MAAM,MAAM,UAAU,MAAM,SAAS,KAAK,MAAM,GAAG,OAAO,MAAM,SAAS,GAC7F;AAAA,MACA,oBAAC,SAAM,OAAM,MACX,8BAAC,aAAU,OAAO,MAAM,MAAM,UAAU,MAAM,SAAS,cAAW,cAAa,GACjF;AAAA,OACF;AAAA,IACC,MAAM,WACL,oBAAC,OAAE,WAAU,mCAAkC,sDAAwC;AAAA,IAEzF;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,UAAU,CAAC,MAAM,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,QAC/C,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,91 @@
+function majorToMinor(input, exponent) {
+  const text = input.replace(/,/g, "").trim();
+  if (!/^\d+(\.\d+)?$/.test(text)) return null;
+  const [whole, fraction = ""] = text.split(".");
+  if (fraction.length > exponent) return null;
+  return (whole + fraction.padEnd(exponent, "0")).replace(/^0+(?=\d)/, "");
+}
+function minorToMajor(minor, exponent) {
+  if (minor === void 0) return "";
+  const digits = minor.padStart(exponent + 1, "0");
+  const whole = digits.slice(0, digits.length - exponent);
+  const fraction = digits.slice(digits.length - exponent).replace(/0+$/, "");
+  return fraction ? `${whole}.${fraction}` : whole;
+}
+const typed = (prices, currencies) => Object.fromEntries(
+  currencies.map((c) => [c.code, minorToMajor(prices?.[c.code], c.exponent)])
+);
+function formFrom(version, catalogue, currencies) {
+  return {
+    name: version?.name ?? "",
+    description: version?.description ?? "",
+    public: version?.public ?? true,
+    prices: typed(version?.prices, currencies),
+    features: Object.fromEntries(
+      catalogue.map((f) => {
+        const given = version?.features[f.key];
+        return [
+          f.key,
+          {
+            included: given?.included ?? false,
+            limit: given?.limit == null ? "" : String(given.limit),
+            addOn: typed(given?.addOnPrices, currencies)
+          }
+        ];
+      })
+    )
+  };
+}
+const amounts = (values, currencies, errors, prefix) => {
+  const out = {};
+  for (const { code, exponent } of currencies) {
+    const text = values[code]?.trim();
+    if (!text) continue;
+    const minor = majorToMinor(text, exponent);
+    if (minor === null || minor === "0") errors[`${prefix}.${code}`] = "Enter an amount above zero";
+    else out[code] = minor;
+  }
+  return out;
+};
+function draftFrom(form, catalogue, currencies) {
+  const errors = {};
+  const name = form.name.trim();
+  if (name.length < 2 || name.length > 100) errors.name = "Name the plan in 2 to 100 characters";
+  const prices = amounts(form.prices, currencies, errors, "price");
+  if (!Object.keys(prices).length && !Object.keys(errors).some((k) => k.startsWith("price."))) {
+    errors.prices = "Set a price in at least one currency";
+  }
+  const features = {};
+  for (const f of catalogue) {
+    const value = form.features[f.key];
+    const limitText = f.kind === "count" ? value?.limit.trim() ?? "" : "";
+    let limit = null;
+    if (limitText) {
+      limit = /^\d{1,7}$/.test(limitText) ? Number(limitText) : null;
+      if (limit === null) errors[`limit.${f.key}`] = "Enter a whole number, or leave it blank";
+    }
+    features[f.key] = {
+      included: value?.included ?? false,
+      limit,
+      addOnPrices: amounts(value?.addOn ?? {}, currencies, errors, `addOn.${f.key}`)
+    };
+  }
+  return {
+    draft: { name, description: form.description.trim() || null, prices, public: form.public, features },
+    errors
+  };
+}
+function stepError(step, errors) {
+  const keys = Object.keys(errors).filter(
+    (k) => step === 0 ? k === "name" || k === "prices" || k.startsWith("price.") : step === 1 ? k.startsWith("limit.") || k.startsWith("addOn.") : true
+  );
+  return keys.length ? errors[keys[0]] : null;
+}
+export {
+  draftFrom,
+  formFrom,
+  majorToMinor,
+  minorToMajor,
+  stepError
+};
+//# sourceMappingURL=plan-model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-model.ts"],"sourcesContent":["import type { PriceCurrency, Prices } from \"@withpotter/lib/admin-pricing-api\";\nimport type {\n  CatalogueFeature,\n  PlanDraftInput,\n  PlanFeature,\n  PlanVersion,\n} from \"@withpotter/lib/pricing-plans-types\";\n\n/**\n * The New plan form as typed text, and the API draft it becomes. Amounts are\n * typed in major units and turned into minor units by digit arithmetic at\n * each currency's exponent, never by multiplying a float.\n */\nexport interface FeatureForm {\n  included: boolean;\n  /** Count features only; blank is no limit. */\n  limit: string;\n  /** Add-on price typed per currency; blank offers no add-on there. */\n  addOn: Record<string, string>;\n}\n\nexport interface PlanForm {\n  name: string;\n  description: string;\n  public: boolean;\n  prices: Record<string, string>;\n  features: Record<string, FeatureForm>;\n}\n\n/** \"15,000.5\" at exponent 2 is \"1500050\"; null when it is not an amount. */\nexport function majorToMinor(input: string, exponent: number): string | null {\n  const text = input.replace(/,/g, \"\").trim();\n\n  if (!/^\\d+(\\.\\d+)?$/.test(text)) return null;\n\n  const [whole, fraction = \"\"] = text.split(\".\");\n\n  if (fraction.length > exponent) return null;\n\n  return (whole + fraction.padEnd(exponent, \"0\")).replace(/^0+(?=\\d)/, \"\");\n}\n\n/** \"1500050\" at exponent 2 is \"15000.5\": what a person types back. */\nexport function minorToMajor(minor: string | undefined, exponent: number): string {\n  if (minor === undefined) return \"\";\n\n  const digits = minor.padStart(exponent + 1, \"0\");\n  const whole = digits.slice(0, digits.length - exponent);\n  const fraction = digits.slice(digits.length - exponent).replace(/0+$/, \"\");\n\n  return fraction ? `${whole}.${fraction}` : whole;\n}\n\nconst typed = (prices: Prices | undefined, currencies: PriceCurrency[]) =>\n  Object.fromEntries(\n    currencies.map((c) => [c.code, minorToMajor(prices?.[c.code], c.exponent)])\n  );\n\n/** The form for a new plan, or filled from a version to edit. */\nexport function formFrom(\n  version: Pick<PlanVersion, \"name\" | \"description\" | \"public\" | \"prices\" | \"features\"> | null,\n  catalogue: CatalogueFeature[],\n  currencies: PriceCurrency[]\n): PlanForm {\n  return {\n    name: version?.name ?? \"\",\n    description: version?.description ?? \"\",\n    public: version?.public ?? true,\n    prices: typed(version?.prices, currencies),\n    features: Object.fromEntries(\n      catalogue.map((f) => {\n        const given: PlanFeature | undefined = version?.features[f.key];\n\n        return [\n          f.key,\n          {\n            included: given?.included ?? false,\n            limit: given?.limit == null ? \"\" : String(given.limit),\n            addOn: typed(given?.addOnPrices, currencies),\n          },\n        ];\n      })\n    ),\n  };\n}\n\n/** Problems by field: \"name\", \"price.NGN\", \"limit.team_members\", \"addOn.blog.NGN\". */\nexport type FormErrors = Record<string, string>;\n\nconst amounts = (\n  values: Record<string, string>,\n  currencies: PriceCurrency[],\n  errors: FormErrors,\n  prefix: string\n): Prices => {\n  const out: Prices = {};\n\n  for (const { code, exponent } of currencies) {\n    const text = values[code]?.trim();\n\n    if (!text) continue;\n\n    const minor = majorToMinor(text, exponent);\n\n    if (minor === null || minor === \"0\") errors[`${prefix}.${code}`] = \"Enter an amount above zero\";\n    else out[code] = minor;\n  }\n\n  return out;\n};\n\n/** The API draft, and what is wrong with the form if anything. */\nexport function draftFrom(\n  form: PlanForm,\n  catalogue: CatalogueFeature[],\n  currencies: PriceCurrency[]\n): { draft: PlanDraftInput; errors: FormErrors } {\n  const errors: FormErrors = {};\n  const name = form.name.trim();\n\n  if (name.length < 2 || name.length > 100) errors.name = \"Name the plan in 2 to 100 characters\";\n\n  const prices = amounts(form.prices, currencies, errors, \"price\");\n\n  if (!Object.keys(prices).length && !Object.keys(errors).some((k) => k.startsWith(\"price.\"))) {\n    errors.prices = \"Set a price in at least one currency\";\n  }\n\n  const features: PlanDraftInput[\"features\"] = {};\n\n  for (const f of catalogue) {\n    const value = form.features[f.key];\n    const limitText = f.kind === \"count\" ? value?.limit.trim() ?? \"\" : \"\";\n    let limit: number | null = null;\n\n    if (limitText) {\n      limit = /^\\d{1,7}$/.test(limitText) ? Number(limitText) : null;\n      if (limit === null) errors[`limit.${f.key}`] = \"Enter a whole number, or leave it blank\";\n    }\n\n    features[f.key] = {\n      included: value?.included ?? false,\n      limit,\n      addOnPrices: amounts(value?.addOn ?? {}, currencies, errors, `addOn.${f.key}`),\n    };\n  }\n\n  return {\n    draft: { name, description: form.description.trim() || null, prices, public: form.public, features },\n    errors,\n  };\n}\n\n/** The first problem on a step: 0 basics and price, 1 features, 2 review. */\nexport function stepError(step: number, errors: FormErrors): string | null {\n  const keys = Object.keys(errors).filter((k) =>\n    step === 0\n      ? k === \"name\" || k === \"prices\" || k.startsWith(\"price.\")\n      : step === 1\n        ? k.startsWith(\"limit.\") || k.startsWith(\"addOn.\")\n        : true\n  );\n\n  return keys.length ? errors[keys[0]] : null;\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TableRow, Th } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { byCurrency, formatPlanPrice } from "@withpotter/lib/plan-price";
+import list from "../_ui/list-card.module.css";
+import { VERSION_STATUS } from "./price-model";
+const PLAN_COLUMNS = 5;
+function PlanHead() {
+  return /* @__PURE__ */ jsxs("tr", { children: [
+    /* @__PURE__ */ jsx(Th, { children: "Plan" }),
+    /* @__PURE__ */ jsx(Th, { children: "Price a month" }),
+    /* @__PURE__ */ jsx(Th, { children: "Merchants" }),
+    /* @__PURE__ */ jsx(Th, { children: "Status" }),
+    /* @__PURE__ */ jsx(Th, { children: "Shown to merchants" })
+  ] });
+}
+function priceList(prices, currencies) {
+  return Object.keys(prices).sort(byCurrency).map(
+    (code) => formatPlanPrice(
+      prices[code],
+      code,
+      currencies.find((c) => c.code === code)?.exponent
+    )
+  );
+}
+function PlanRow({
+  plan,
+  currencies,
+  onOpen
+}) {
+  const shown = plan.live ?? plan.open;
+  const name = shown?.name ?? "Untitled plan";
+  const status = plan.live ? { badge: "active", label: "Live" } : VERSION_STATUS[plan.open?.status ?? "draft"];
+  const change = plan.live && plan.open ? VERSION_STATUS[plan.open.status] : null;
+  return /* @__PURE__ */ jsxs(TableRow, { onClick: onOpen, children: [
+    /* @__PURE__ */ jsxs("td", { children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "text-left font-medium", "aria-label": `Open ${name}`, children: name }),
+      plan.isDefault && /* @__PURE__ */ jsx("span", { className: list.muted, children: " \xB7 Default" })
+    ] }),
+    /* @__PURE__ */ jsx("td", { className: list.nowrap, children: shown ? priceList(shown.prices, currencies).map((line) => /* @__PURE__ */ jsx("div", { children: line }, line)) : "\u2013" }),
+    /* @__PURE__ */ jsx("td", { className: list.muted, children: plan.subscribers.toLocaleString("en") }),
+    /* @__PURE__ */ jsxs("td", { className: list.nowrap, children: [
+      /* @__PURE__ */ jsx(StatusBadge, { status: status.badge, label: status.label, variant: "dot" }),
+      change && /* @__PURE__ */ jsxs("span", { className: list.muted, children: [
+        " \xB7 Change: ",
+        change.label.toLowerCase()
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("td", { className: list.muted, children: shown?.public ? "Yes" : "No" })
+  ] });
+}
+export {
+  PLAN_COLUMNS,
+  PlanHead,
+  PlanRow,
+  priceList
+};
+//# sourceMappingURL=plan-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plan-row.tsx"],"sourcesContent":["\"use client\";\n\nimport { TableRow, Th } from \"@withpotter/ui-kit\";\nimport { StatusBadge } from \"@withpotter/components/shared/status-badge\";\nimport type { PriceCurrency, Prices } from \"@withpotter/lib/admin-pricing-api\";\nimport { byCurrency, formatPlanPrice } from \"@withpotter/lib/plan-price\";\nimport type { PlanSummary } from \"@withpotter/lib/pricing-plans-types\";\nimport list from \"../_ui/list-card.module.css\";\nimport { VERSION_STATUS } from \"./price-model\";\n\nexport const PLAN_COLUMNS = 5;\n\nexport function PlanHead() {\n  return (\n    <tr>\n      <Th>Plan</Th>\n      <Th>Price a month</Th>\n      <Th>Merchants</Th>\n      <Th>Status</Th>\n      <Th>Shown to merchants</Th>\n    </tr>\n  );\n}\n\n/** One line per currency, at that currency's exponent. */\nexport function priceList(prices: Prices, currencies: PriceCurrency[]): string[] {\n  return Object.keys(prices)\n    .sort(byCurrency)\n    .map((code) =>\n      formatPlanPrice(\n        prices[code],\n        code,\n        currencies.find((c) => c.code === code)?.exponent\n      )\n    );\n}\n\n/** One plan; the whole row opens its versions. */\nexport function PlanRow({\n  plan,\n  currencies,\n  onOpen,\n}: {\n  plan: PlanSummary;\n  currencies: PriceCurrency[];\n  onOpen: () => void;\n}) {\n  const shown = plan.live ?? plan.open;\n  const name = shown?.name ?? \"Untitled plan\";\n  const status = plan.live\n    ? { badge: \"active\", label: \"Live\" }\n    : VERSION_STATUS[plan.open?.status ?? \"draft\"];\n  const change = plan.live && plan.open ? VERSION_STATUS[plan.open.status] : null;\n\n  return (\n    <TableRow onClick={onOpen}>\n      <td>\n        <button type=\"button\" className=\"text-left font-medium\" aria-label={`Open ${name}`}>\n          {name}\n        </button>\n        {plan.isDefault && <span className={list.muted}> · Default</span>}\n      </td>\n      <td className={list.nowrap}>\n        {shown ? priceList(shown.prices, currencies).map((line) => <div key={line}>{line}</div>) : \"–\"}\n      </td>\n      <td className={list.muted}>{plan.subscribers.toLocaleString(\"en\")}</td>\n      <td className={list.nowrap}>\n        <StatusBadge status={status.badge} label={status.label} variant=\"dot\" />\n        {change && <span className={list.muted}> · Change: {change.label.toLowerCase()}</span>}\n      </td>\n      <td className={list.muted}>{shown?.public ? \"Yes\" : \"No\"}</td>\n    </TableRow>\n  );\n}\n"],"mappings":";AAcI,SACE,KADF;AAZJ,SAAS,UAAU,UAAU;AAC7B,SAAS,mBAAmB;AAE5B,SAAS,YAAY,uBAAuB;AAE5C,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAExB,MAAM,eAAe;AAErB,SAAS,WAAW;AACzB,SACE,qBAAC,QACC;AAAA,wBAAC,MAAG,kBAAI;AAAA,IACR,oBAAC,MAAG,2BAAa;AAAA,IACjB,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,oBAAM;AAAA,IACV,oBAAC,MAAG,gCAAkB;AAAA,KACxB;AAEJ;AAGO,SAAS,UAAU,QAAgB,YAAuC;AAC/E,SAAO,OAAO,KAAK,MAAM,EACtB,KAAK,UAAU,EACf;AAAA,IAAI,CAAC,SACJ;AAAA,MACE,OAAO,IAAI;AAAA,MACX;AAAA,MACA,WAAW,KAAK,CAAC,MAAM,EAAE,SAAS,IAAI,GAAG;AAAA,IAC3C;AAAA,EACF;AACJ;AAGO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,QAAQ,KAAK,QAAQ,KAAK;AAChC,QAAM,OAAO,OAAO,QAAQ;AAC5B,QAAM,SAAS,KAAK,OAChB,EAAE,OAAO,UAAU,OAAO,OAAO,IACjC,eAAe,KAAK,MAAM,UAAU,OAAO;AAC/C,QAAM,SAAS,KAAK,QAAQ,KAAK,OAAO,eAAe,KAAK,KAAK,MAAM,IAAI;AAE3E,SACE,qBAAC,YAAS,SAAS,QACjB;AAAA,yBAAC,QACC;AAAA,0BAAC,YAAO,MAAK,UAAS,WAAU,yBAAwB,cAAY,QAAQ,IAAI,IAC7E,gBACH;AAAA,MACC,KAAK,aAAa,oBAAC,UAAK,WAAW,KAAK,OAAO,2BAAU;AAAA,OAC5D;AAAA,IACA,oBAAC,QAAG,WAAW,KAAK,QACjB,kBAAQ,UAAU,MAAM,QAAQ,UAAU,EAAE,IAAI,CAAC,SAAS,oBAAC,SAAgB,kBAAP,IAAY,CAAM,IAAI,UAC7F;AAAA,IACA,oBAAC,QAAG,WAAW,KAAK,OAAQ,eAAK,YAAY,eAAe,IAAI,GAAE;AAAA,IAClE,qBAAC,QAAG,WAAW,KAAK,QAClB;AAAA,0BAAC,eAAY,QAAQ,OAAO,OAAO,OAAO,OAAO,OAAO,SAAQ,OAAM;AAAA,MACrE,UAAU,qBAAC,UAAK,WAAW,KAAK,OAAO;AAAA;AAAA,QAAY,OAAO,MAAM,YAAY;AAAA,SAAE;AAAA,OACjF;AAAA,IACA,oBAAC,QAAG,WAAW,KAAK,OAAQ,iBAAO,SAAS,QAAQ,MAAK;AAAA,KAC3D;AAEJ;","names":[]}

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

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "@withpotter/ui-kit/button";
+import { ListCard } from "../_ui/list-card";
+import { PlanDrawer } from "./plan-drawer";
+import { PlanFormDialog } from "./plan-form-dialog";
+import { PLAN_COLUMNS, PlanHead, PlanRow } from "./plan-row";
+import { usePricingPermissions } from "./use-pricing";
+import { useFeatureCatalogue, usePlanList } from "./use-plans";
+import styles from "./pricing.module.css";
+function PlansTab() {
+  const { data, isLoading, isError, refetch } = usePlanList();
+  const catalogue = useFeatureCatalogue();
+  const { proposeHint } = usePricingPermissions();
+  const [creating, setCreating] = useState(false);
+  const [openId, setOpenId] = useState(null);
+  const [panel, setPanel] = useState(false);
+  const plans = data?.plans ?? [];
+  const currencies = data?.currencies ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: styles.stack, children: [
+    /* @__PURE__ */ jsx(
+      ListCard,
+      {
+        title: "Plans",
+        count: data ? plans.length : void 0,
+        columns: PLAN_COLUMNS,
+        minWidth: 720,
+        isLoading,
+        isError,
+        onRetry: () => void refetch(),
+        errorTitle: "The plans could not be loaded.",
+        isEmpty: plans.length === 0,
+        emptyTitle: "No plans yet.",
+        head: /* @__PURE__ */ jsx(PlanHead, {}),
+        controls: /* @__PURE__ */ jsx(
+          Button,
+          {
+            title: proposeHint,
+            disabled: !catalogue.data || !data,
+            onClick: () => setCreating(true),
+            children: "New plan"
+          }
+        ),
+        children: plans.map((plan) => /* @__PURE__ */ jsx(
+          PlanRow,
+          {
+            plan,
+            currencies,
+            onOpen: () => {
+              setOpenId(plan.id);
+              setPanel(true);
+            }
+          },
+          plan.id
+        ))
+      }
+    ),
+    creating && catalogue.data && /* @__PURE__ */ jsx(
+      PlanFormDialog,
+      {
+        planId: null,
+        draft: null,
+        live: null,
+        catalogue: catalogue.data.features,
+        currencies,
+        onClose: () => setCreating(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlanDrawer,
+      {
+        open: panel,
+        summary: plans.find((p) => p.id === openId) ?? null,
+        currencies,
+        onClose: () => setPanel(false)
+      }
+    )
+  ] });
+}
+export {
+  PlansTab
+};
+//# sourceMappingURL=plans-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/plans-tab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@withpotter/ui-kit/button\";\nimport { ListCard } from \"../_ui/list-card\";\nimport { PlanDrawer } from \"./plan-drawer\";\nimport { PlanFormDialog } from \"./plan-form-dialog\";\nimport { PLAN_COLUMNS, PlanHead, PlanRow } from \"./plan-row\";\nimport { usePricingPermissions } from \"./use-pricing\";\nimport { useFeatureCatalogue, usePlanList } from \"./use-plans\";\nimport styles from \"./pricing.module.css\";\n\n/**\n * Every plan: its price per currency, how many merchants are on it, whether\n * it is live, and whether merchants see it. New plan is the one action; a\n * row opens the plan's versions, where it is edited.\n */\nexport function PlansTab() {\n  const { data, isLoading, isError, refetch } = usePlanList();\n  const catalogue = useFeatureCatalogue();\n  const { proposeHint } = usePricingPermissions();\n  const [creating, setCreating] = useState(false);\n  const [openId, setOpenId] = useState<string | null>(null);\n  const [panel, setPanel] = useState(false);\n  const plans = data?.plans ?? [];\n  const currencies = data?.currencies ?? [];\n\n  return (\n    <div className={styles.stack}>\n      <ListCard\n        title=\"Plans\"\n        count={data ? plans.length : undefined}\n        columns={PLAN_COLUMNS}\n        minWidth={720}\n        isLoading={isLoading}\n        isError={isError}\n        onRetry={() => void refetch()}\n        errorTitle=\"The plans could not be loaded.\"\n        isEmpty={plans.length === 0}\n        emptyTitle=\"No plans yet.\"\n        head={<PlanHead />}\n        controls={\n          <Button\n            title={proposeHint}\n            disabled={!catalogue.data || !data}\n            onClick={() => setCreating(true)}\n          >\n            New plan\n          </Button>\n        }\n      >\n        {plans.map((plan) => (\n          <PlanRow\n            key={plan.id}\n            plan={plan}\n            currencies={currencies}\n            onOpen={() => {\n              setOpenId(plan.id);\n              setPanel(true);\n            }}\n          />\n        ))}\n      </ListCard>\n\n      {creating && catalogue.data && (\n        <PlanFormDialog\n          planId={null}\n          draft={null}\n          live={null}\n          catalogue={catalogue.data.features}\n          currencies={currencies}\n          onClose={() => setCreating(false)}\n        />\n      )}\n      <PlanDrawer\n        open={panel}\n        summary={plans.find((p) => p.id === openId) ?? null}\n        currencies={currencies}\n        onClose={() => setPanel(false)}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA4BI,SAYU,KAZV;AA1BJ,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,cAAc,UAAU,eAAe;AAChD,SAAS,6BAA6B;AACtC,SAAS,qBAAqB,mBAAmB;AACjD,OAAO,YAAY;AAOZ,SAAS,WAAW;AACzB,QAAM,EAAE,MAAM,WAAW,SAAS,QAAQ,IAAI,YAAY;AAC1D,QAAM,YAAY,oBAAoB;AACtC,QAAM,EAAE,YAAY,IAAI,sBAAsB;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,QAAQ,MAAM,SAAS,CAAC;AAC9B,QAAM,aAAa,MAAM,cAAc,CAAC;AAExC,SACE,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,OAAO,MAAM,SAAS;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,SAAS,MAAM,KAAK,QAAQ;AAAA,QAC5B,YAAW;AAAA,QACX,SAAS,MAAM,WAAW;AAAA,QAC1B,YAAW;AAAA,QACX,MAAM,oBAAC,YAAS;AAAA,QAChB,UACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,QAAQ,CAAC;AAAA,YAC9B,SAAS,MAAM,YAAY,IAAI;AAAA,YAChC;AAAA;AAAA,QAED;AAAA,QAGD,gBAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA,QAAQ,MAAM;AACZ,wBAAU,KAAK,EAAE;AACjB,uBAAS,IAAI;AAAA,YACf;AAAA;AAAA,UANK,KAAK;AAAA,QAOZ,CACD;AAAA;AAAA,IACH;AAAA,IAEC,YAAY,UAAU,QACrB;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,WAAW,UAAU,KAAK;AAAA,QAC1B;AAAA,QACA,SAAS,MAAM,YAAY,KAAK;AAAA;AAAA,IAClC;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,MAAM,KAAK;AAAA,QAC/C;AAAA,QACA,SAAS,MAAM,SAAS,KAAK;AAAA;AAAA,IAC/B;AAAA,KACF;AAEJ;","names":[]}