@withpotter/components 0.13.0-next.101

package/dist/plan-editor/sections/eligible-items-section.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { usePlanProducts } from "../use-plan-products";
+import { Checkbox, EditorSection, Field, Input } from "@withpotter/ui-kit";
+function clampRange(f) {
+  const count = f.productIds.length;
+  if (count === 0) return f;
+  const min = Math.min(Math.max(Number(f.minItems) || 1, 1), count);
+  const max = Math.min(Math.max(Number(f.maxItems) || min, min), count);
+  return { ...f, minItems: String(min), maxItems: String(max) };
+}
+function EligibleItemsSection({
+  form,
+  setForm,
+  tenantSlug
+}) {
+  const formatCurrency = useFormatCurrency();
+  const enabled = form.pricingKind === "sum-of-items";
+  const {
+    loading,
+    search,
+    setSearch,
+    filtered,
+    selected,
+    subtotal,
+    discountPct,
+    estCycle
+  } = usePlanProducts({
+    enabled,
+    tenantSlug,
+    selectedIds: form.productIds,
+    discountPercent: form.subscriptionDiscountPercent
+  });
+  const toggle = (id) => setForm((f) => {
+    const productIds = f.productIds.includes(id) ? f.productIds.filter((p) => p !== id) : [...f.productIds, id];
+    const count2 = productIds.length;
+    const min2 = Number(f.minItems) || 0;
+    const max2 = Number(f.maxItems) || 0;
+    return {
+      ...f,
+      productIds,
+      minItems: count2 === 0 ? "" : String(Math.min(Math.max(min2, 1), count2)),
+      maxItems: count2 === 0 ? "" : String(Math.min(max2 || count2, count2) || count2)
+    };
+  });
+  const min = Number(form.minItems) || 0;
+  const max = Number(form.maxItems) || 0;
+  const count = form.productIds.length;
+  const rangeProblem = count === 0 ? null : max && min && max < min ? "The most is below the fewest, so nobody can subscribe." : max > count ? "The most is above the number of items you picked." : null;
+  return /* @__PURE__ */ jsxs(
+    EditorSection,
+    {
+      title: "Eligible items",
+      action: /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-tertiary)]", children: [
+        form.productIds.length,
+        " selected"
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search products",
+            className: "w-full"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "surface-inset max-h-64 overflow-y-auto", children: loading ? /* @__PURE__ */ jsx("div", { className: "p-3 text-xs text-[var(--text-muted)]", children: "Loading products\u2026" }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-3 text-xs text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx("p", { children: search ? "Nothing matches that." : "No products yet." }),
+          !search && /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: "/dashboard/catalog/new",
+              className: "text-brand-500 hover:underline",
+              children: "Add a product"
+            }
+          )
+        ] }) : filtered.map((p) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex cursor-pointer items-center gap-2 border-b border-[var(--border-default)] px-3 py-2 text-sm last:border-b-0 hover:bg-[var(--interactive-hover)]",
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  bare: true,
+                  checked: form.productIds.includes(p.id),
+                  onChange: () => toggle(p.id)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: p.title }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: p.price != null ? formatCurrency(p.price, p.currency) : "\u2014" })
+            ]
+          },
+          p.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Fewest items", required: true, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min: 1,
+              max: form.productIds.length || 1,
+              value: form.minItems,
+              onChange: (e) => setForm((f) => ({ ...f, minItems: e.target.value })),
+              onBlur: () => setForm(clampRange),
+              placeholder: "1",
+              className: "w-full"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "Most items", required: true, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min: 1,
+              max: form.productIds.length || 1,
+              value: form.maxItems,
+              onChange: (e) => setForm((f) => ({ ...f, maxItems: e.target.value })),
+              onBlur: () => setForm(clampRange),
+              placeholder: String(form.productIds.length || 1),
+              className: "w-full"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "Discount on this plan (%)", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min: 0,
+              max: 100,
+              step: "0.1",
+              value: form.subscriptionDiscountPercent,
+              onChange: (e) => setForm((f) => ({
+                ...f,
+                subscriptionDiscountPercent: e.target.value
+              })),
+              placeholder: "0",
+              className: "w-full"
+            }
+          ) })
+        ] }),
+        rangeProblem && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--warning)]", children: rangeProblem }),
+        selected.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-secondary)]", children: [
+          "Estimated cycle:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: formatCurrency(estCycle, form.currency) }),
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-muted)]", children: [
+            "(subtotal ",
+            formatCurrency(subtotal, form.currency),
+            discountPct > 0 ? ` \u2212 ${discountPct}%` : "",
+            ")"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  EligibleItemsSection
+};
+//# sourceMappingURL=eligible-items-section.js.map

package/dist/plan-editor/sections/eligible-items-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/eligible-items-section.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { usePlanProducts } from '../use-plan-products';\nimport type { PlanSectionProps } from '../types';\nimport { Checkbox, EditorSection, Field, Input } from '@withpotter/ui-kit';\nimport type { PlanFormData } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';\n\ninterface EligibleItemsSectionProps extends PlanSectionProps {\n  tenantSlug: string | undefined;\n}\n\n/** Hold the pair inside 1 ≤ fewest ≤ most ≤ items picked, the API's own rule. */\nfunction clampRange(f: PlanFormData): PlanFormData {\n  const count = f.productIds.length;\n  if (count === 0) return f;\n  const min = Math.min(Math.max(Number(f.minItems) || 1, 1), count);\n  const max = Math.min(Math.max(Number(f.maxItems) || min, min), count);\n  return { ...f, minItems: String(min), maxItems: String(max) };\n}\n\nexport function EligibleItemsSection({\n  form,\n  setForm,\n  tenantSlug,\n}: EligibleItemsSectionProps) {\n  const formatCurrency = useFormatCurrency();\n  const enabled = form.pricingKind === 'sum-of-items';\n  const {\n    loading,\n    search,\n    setSearch,\n    filtered,\n    selected,\n    subtotal,\n    discountPct,\n    estCycle,\n  } = usePlanProducts({\n    enabled,\n    tenantSlug,\n    selectedIds: form.productIds,\n    discountPercent: form.subscriptionDiscountPercent,\n  });\n\n  /**\n   * Picking items sets the range, because the API demands one.\n   *\n   * `PlanIncludesDto` requires 1 ≤ minItems ≤ maxItems ≤ the items picked, and\n   * a blank box sent `undefined` — so the commonest sum-of-items plan, the one\n   * where a merchant never thought about a range, could not be saved at all\n   * and said \"Failed to save plan\" without naming a field. One item picked is\n   * a plan of exactly that item until the merchant says otherwise.\n   */\n  const toggle = (id: string) =>\n    setForm((f) => {\n      const productIds = f.productIds.includes(id)\n        ? f.productIds.filter((p) => p !== id)\n        : [...f.productIds, id];\n      const count = productIds.length;\n      const min = Number(f.minItems) || 0;\n      const max = Number(f.maxItems) || 0;\n      return {\n        ...f,\n        productIds,\n        minItems: count === 0 ? '' : String(Math.min(Math.max(min, 1), count)),\n        maxItems:\n          count === 0 ? '' : String(Math.min(max || count, count) || count),\n      };\n    });\n\n  const min = Number(form.minItems) || 0;\n  const max = Number(form.maxItems) || 0;\n  const count = form.productIds.length;\n  const rangeProblem =\n    count === 0\n      ? null\n      : max && min && max < min\n        ? 'The most is below the fewest, so nobody can subscribe.'\n        : max > count\n          ? 'The most is above the number of items you picked.'\n          : null;\n\n  return (\n    <EditorSection\n      title=\"Eligible items\"\n      action={\n        <span className=\"text-xs text-[var(--text-tertiary)]\">\n          {form.productIds.length} selected\n        </span>\n      }\n    >\n      <Input\n        type=\"text\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder=\"Search products\"\n        className=\"w-full\"\n      />\n      {/* A well inside the card, not a second card drawn by hand on top of\n          one. `surface-inset` is what a nested list is for. */}\n      <div className=\"surface-inset max-h-64 overflow-y-auto\">\n        {loading ? (\n          <div className=\"p-3 text-xs text-[var(--text-muted)]\">\n            Loading products…\n          </div>\n        ) : filtered.length === 0 ? (\n          <div className=\"space-y-1 p-3 text-xs text-[var(--text-muted)]\">\n            <p>{search ? 'Nothing matches that.' : 'No products yet.'}</p>\n            {/* A plan priced off items, on a workspace with no items, was a\n                dead end that said \"No products found.\" and stopped. */}\n            {!search && (\n              <Link\n                href=\"/dashboard/catalog/new\"\n                className=\"text-brand-500 hover:underline\"\n              >\n                Add a product\n              </Link>\n            )}\n          </div>\n        ) : (\n          filtered.map((p) => (\n            <label\n              key={p.id}\n              className=\"flex cursor-pointer items-center gap-2 border-b border-[var(--border-default)] px-3 py-2 text-sm last:border-b-0 hover:bg-[var(--interactive-hover)]\"\n            >\n              <Checkbox\n                bare\n                checked={form.productIds.includes(p.id)}\n                onChange={() => toggle(p.id)}\n              />\n              <span className=\"flex-1 truncate\">{p.title}</span>\n              <span className=\"text-xs text-[var(--text-muted)]\">\n                {p.price != null ? formatCurrency(p.price, p.currency) : '—'}\n              </span>\n            </label>\n          ))\n        )}\n      </div>\n\n      <div className=\"grid grid-cols-3 gap-3\">\n        <Field label=\"Fewest items\" required>\n          <Input\n            type=\"number\"\n            min={1}\n            max={form.productIds.length || 1}\n            value={form.minItems}\n            onChange={(e) =>\n              setForm((f) => ({ ...f, minItems: e.target.value }))\n            }\n            onBlur={() => setForm(clampRange)}\n            placeholder=\"1\"\n            className=\"w-full\"\n          />\n        </Field>\n        <Field label=\"Most items\" required>\n          <Input\n            type=\"number\"\n            min={1}\n            max={form.productIds.length || 1}\n            value={form.maxItems}\n            onChange={(e) =>\n              setForm((f) => ({ ...f, maxItems: e.target.value }))\n            }\n            onBlur={() => setForm(clampRange)}\n            placeholder={String(form.productIds.length || 1)}\n            className=\"w-full\"\n          />\n        </Field>\n        <Field label=\"Discount on this plan (%)\">\n          <Input\n            type=\"number\"\n            min={0}\n            max={100}\n            step=\"0.1\"\n            value={form.subscriptionDiscountPercent}\n            onChange={(e) =>\n              setForm((f) => ({\n                ...f,\n                subscriptionDiscountPercent: e.target.value,\n              }))\n            }\n            placeholder=\"0\"\n            className=\"w-full\"\n          />\n        </Field>\n      </div>\n\n      {rangeProblem && (\n        <p className=\"text-xs text-[var(--warning)]\">{rangeProblem}</p>\n      )}\n\n      {selected.length > 0 && (\n        <p className=\"text-xs text-[var(--text-secondary)]\">\n          Estimated cycle:{' '}\n          <span className=\"font-medium text-[var(--text-primary)]\">\n            {formatCurrency(estCycle, form.currency)}\n          </span>{' '}\n          <span className=\"text-[var(--text-muted)]\">\n            (subtotal {formatCurrency(subtotal, form.currency)}\n            {discountPct > 0 ? ` − ${discountPct}%` : ''})\n          </span>\n        </p>\n      )}\n    </EditorSection>\n  );\n}\n"],"mappings":";AAuFQ,SAKF,KALE;AArFR,OAAO,UAAU;AACjB,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAEhC,SAAS,UAAU,eAAe,OAAO,aAAa;AAQtD,SAAS,WAAW,GAA+B;AACjD,QAAM,QAAQ,EAAE,WAAW;AAC3B,MAAI,UAAU,EAAG,QAAO;AACxB,QAAM,MAAM,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,KAAK;AAChE,QAAM,MAAM,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,QAAQ,KAAK,KAAK,GAAG,GAAG,KAAK;AACpE,SAAO,EAAE,GAAG,GAAG,UAAU,OAAO,GAAG,GAAG,UAAU,OAAO,GAAG,EAAE;AAC9D;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,UAAU,KAAK,gBAAgB;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,iBAAiB,KAAK;AAAA,EACxB,CAAC;AAWD,QAAM,SAAS,CAAC,OACd,QAAQ,CAAC,MAAM;AACb,UAAM,aAAa,EAAE,WAAW,SAAS,EAAE,IACvC,EAAE,WAAW,OAAO,CAAC,MAAM,MAAM,EAAE,IACnC,CAAC,GAAG,EAAE,YAAY,EAAE;AACxB,UAAMA,SAAQ,WAAW;AACzB,UAAMC,OAAM,OAAO,EAAE,QAAQ,KAAK;AAClC,UAAMC,OAAM,OAAO,EAAE,QAAQ,KAAK;AAClC,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,UAAUF,WAAU,IAAI,KAAK,OAAO,KAAK,IAAI,KAAK,IAAIC,MAAK,CAAC,GAAGD,MAAK,CAAC;AAAA,MACrE,UACEA,WAAU,IAAI,KAAK,OAAO,KAAK,IAAIE,QAAOF,QAAOA,MAAK,KAAKA,MAAK;AAAA,IACpE;AAAA,EACF,CAAC;AAEH,QAAM,MAAM,OAAO,KAAK,QAAQ,KAAK;AACrC,QAAM,MAAM,OAAO,KAAK,QAAQ,KAAK;AACrC,QAAM,QAAQ,KAAK,WAAW;AAC9B,QAAM,eACJ,UAAU,IACN,OACA,OAAO,OAAO,MAAM,MAClB,2DACA,MAAM,QACJ,sDACA;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QACE,qBAAC,UAAK,WAAU,uCACb;AAAA,aAAK,WAAW;AAAA,QAAO;AAAA,SAC1B;AAAA,MAGF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,YACzC,aAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QACZ;AAAA,QAGA,oBAAC,SAAI,WAAU,0CACZ,oBACC,oBAAC,SAAI,WAAU,wCAAuC,oCAEtD,IACE,SAAS,WAAW,IACtB,qBAAC,SAAI,WAAU,kDACb;AAAA,8BAAC,OAAG,mBAAS,0BAA0B,oBAAmB;AAAA,UAGzD,CAAC,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WAEJ,IAEA,SAAS,IAAI,CAAC,MACZ;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAI;AAAA,kBACJ,SAAS,KAAK,WAAW,SAAS,EAAE,EAAE;AAAA,kBACtC,UAAU,MAAM,OAAO,EAAE,EAAE;AAAA;AAAA,cAC7B;AAAA,cACA,oBAAC,UAAK,WAAU,mBAAmB,YAAE,OAAM;AAAA,cAC3C,oBAAC,UAAK,WAAU,oCACb,YAAE,SAAS,OAAO,eAAe,EAAE,OAAO,EAAE,QAAQ,IAAI,UAC3D;AAAA;AAAA;AAAA,UAXK,EAAE;AAAA,QAYT,CACD,GAEL;AAAA,QAEA,qBAAC,SAAI,WAAU,0BACb;AAAA,8BAAC,SAAM,OAAM,gBAAe,UAAQ,MAClC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK,KAAK,WAAW,UAAU;AAAA,cAC/B,OAAO,KAAK;AAAA,cACZ,UAAU,CAAC,MACT,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,UAAU,EAAE,OAAO,MAAM,EAAE;AAAA,cAErD,QAAQ,MAAM,QAAQ,UAAU;AAAA,cAChC,aAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACA,oBAAC,SAAM,OAAM,cAAa,UAAQ,MAChC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK,KAAK,WAAW,UAAU;AAAA,cAC/B,OAAO,KAAK;AAAA,cACZ,UAAU,CAAC,MACT,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,UAAU,EAAE,OAAO,MAAM,EAAE;AAAA,cAErD,QAAQ,MAAM,QAAQ,UAAU;AAAA,cAChC,aAAa,OAAO,KAAK,WAAW,UAAU,CAAC;AAAA,cAC/C,WAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACA,oBAAC,SAAM,OAAM,6BACX;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAO,KAAK;AAAA,cACZ,UAAU,CAAC,MACT,QAAQ,CAAC,OAAO;AAAA,gBACd,GAAG;AAAA,gBACH,6BAA6B,EAAE,OAAO;AAAA,cACxC,EAAE;AAAA,cAEJ,aAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ,GACF;AAAA,WACF;AAAA,QAEC,gBACC,oBAAC,OAAE,WAAU,iCAAiC,wBAAa;AAAA,QAG5D,SAAS,SAAS,KACjB,qBAAC,OAAE,WAAU,wCAAuC;AAAA;AAAA,UACjC;AAAA,UACjB,oBAAC,UAAK,WAAU,0CACb,yBAAe,UAAU,KAAK,QAAQ,GACzC;AAAA,UAAQ;AAAA,UACR,qBAAC,UAAK,WAAU,4BAA2B;AAAA;AAAA,YAC9B,eAAe,UAAU,KAAK,QAAQ;AAAA,YAChD,cAAc,IAAI,WAAM,WAAW,MAAM;AAAA,YAAG;AAAA,aAC/C;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["count","min","max"]}

package/dist/plan-editor/sections/index.d.ts

@@ -0,0 +1,9 @@
+export { PricingModelSection } from './pricing-model-section';
+export { BasicsSection } from './basics-section';
+export { PricingSection } from './pricing-section';
+export { EligibleItemsSection } from './eligible-items-section';
+export { SiblingGroupSection } from './sibling-group-section';
+export { BadgesSection } from './badges-section';
+export { MemberBenefitsSection } from './member-benefits-section';
+export { TrialFeaturesSection } from './trial-features-section';
+export { PlanPreview } from './plan-preview';

package/dist/plan-editor/sections/index.js

@@ -0,0 +1,21 @@
+import { PricingModelSection } from "./pricing-model-section";
+import { BasicsSection } from "./basics-section";
+import { PricingSection } from "./pricing-section";
+import { EligibleItemsSection } from "./eligible-items-section";
+import { SiblingGroupSection } from "./sibling-group-section";
+import { BadgesSection } from "./badges-section";
+import { MemberBenefitsSection } from "./member-benefits-section";
+import { TrialFeaturesSection } from "./trial-features-section";
+import { PlanPreview } from "./plan-preview";
+export {
+  BadgesSection,
+  BasicsSection,
+  EligibleItemsSection,
+  MemberBenefitsSection,
+  PlanPreview,
+  PricingModelSection,
+  PricingSection,
+  SiblingGroupSection,
+  TrialFeaturesSection
+};
+//# sourceMappingURL=index.js.map

package/dist/plan-editor/sections/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/index.ts"],"sourcesContent":["export { PricingModelSection } from './pricing-model-section';\nexport { BasicsSection } from './basics-section';\nexport { PricingSection } from './pricing-section';\nexport { EligibleItemsSection } from './eligible-items-section';\nexport { SiblingGroupSection } from './sibling-group-section';\nexport { BadgesSection } from './badges-section';\nexport { MemberBenefitsSection } from './member-benefits-section';\nexport { TrialFeaturesSection } from './trial-features-section';\nexport { PlanPreview } from './plan-preview';\n"],"mappings":"AAAA,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;","names":[]}

package/dist/plan-editor/sections/member-benefits-section.d.ts

@@ -0,0 +1,2 @@
+import type { PlanSectionProps } from '../types';
+export declare function MemberBenefitsSection({ form, setForm }: PlanSectionProps): import("react").JSX.Element;

package/dist/plan-editor/sections/member-benefits-section.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { X } from "lucide-react";
+import { springs } from "@withpotter/lib/motion";
+import { Button } from "@withpotter/ui-kit/button";
+import { Checkbox, EditorSection, Field, Input } from "@withpotter/ui-kit";
+function mintId(name, taken) {
+  const base = name.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "benefit";
+  if (!taken.includes(base)) return base;
+  let n = 2;
+  while (taken.includes(`${base}-${n}`)) n += 1;
+  return `${base}-${n}`;
+}
+function MemberBenefitsSection({ form, setForm }) {
+  const [draft, setDraft] = useState("");
+  const add = () => {
+    const name = draft.trim();
+    if (!name || form.benefits.some((b) => b.name === name)) return;
+    setForm((f) => ({
+      ...f,
+      benefits: [
+        ...f.benefits,
+        {
+          id: mintId(
+            name,
+            f.benefits.map((b) => b.id)
+          ),
+          name
+        }
+      ]
+    }));
+    setDraft("");
+  };
+  const rename = (id, name) => setForm((f) => ({
+    ...f,
+    // The id is untouched. This is the rename the ids exist for: a benefit
+    // fixed in place stays the same benefit.
+    benefits: f.benefits.map((b) => b.id === id ? { ...b, name } : b)
+  }));
+  const remove = (id) => setForm((f) => ({
+    ...f,
+    benefits: f.benefits.filter((b) => b.id !== id)
+  }));
+  return /* @__PURE__ */ jsxs(EditorSection, { title: "Member benefits", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        Field,
+        {
+          label: "Discount on everything else (%)",
+          hint: "Applies to the rest of the shop, not to this plan.",
+          children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min: 0,
+              max: 100,
+              value: form.memberDiscountPercent,
+              onChange: (e) => setForm((f) => ({
+                ...f,
+                memberDiscountPercent: e.target.value
+              })),
+              placeholder: "e.g. 15"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Field, { label: "Sessions included each period", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          min: 0,
+          value: form.freeServicesPerMonth,
+          onChange: (e) => setForm((f) => ({
+            ...f,
+            freeServicesPerMonth: e.target.value
+          })),
+          placeholder: "e.g. 4"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: form.priorityBooking,
+        onChange: (e) => setForm((f) => ({ ...f, priorityBooking: e.target.checked })),
+        label: "Members book before everyone else"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: "Listed on the storefront",
+        hint: "The lines a customer reads before joining.",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  add();
+                }
+              },
+              placeholder: "e.g. Guest passes every month",
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: add, children: "Add" })
+        ] })
+      }
+    ),
+    form.benefits.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: form.benefits.map((benefit) => /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: true,
+        initial: { opacity: 0, height: 0 },
+        animate: { opacity: 1, height: "auto" },
+        exit: { opacity: 0, height: 0 },
+        transition: springs.snappy,
+        className: "flex items-center gap-2 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: benefit.name,
+              onChange: (e) => rename(benefit.id, e.target.value),
+              className: "flex-1",
+              "aria-label": "Benefit"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => remove(benefit.id),
+              "aria-label": `Remove ${benefit.name}`,
+              className: "text-[var(--text-muted)] hover:text-[var(--error)]",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      },
+      benefit.id
+    )) }) })
+  ] });
+}
+export {
+  MemberBenefitsSection
+};
+//# sourceMappingURL=member-benefits-section.js.map

package/dist/plan-editor/sections/member-benefits-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/member-benefits-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { X } from 'lucide-react';\nimport { springs } from '@withpotter/lib/motion';\nimport type { PlanSectionProps } from '../types';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Checkbox, EditorSection, Field, Input } from '@withpotter/ui-kit';\n\n/**\n * What the member gets, on the plan they pay for.\n *\n * This was a second object: a membership tier, created beside the plan on\n * another tab, carrying the benefits — and granting nothing at all unless\n * somebody remembered to link the two. A priced, published tier with no link\n * looked exactly like a working one.\n *\n * The percentage here is not the one in Pricing. That discounts a\n * sum-of-items plan's own cycle — subscribe to this box, get 10% off the box.\n * This is what the member pays for everything else the business sells, which\n * is why both labels now say which is which.\n */\n/** Minted once, from the name it was added under, and never again. */\nfunction mintId(name: string, taken: string[]) {\n  const base =\n    name\n      .toLowerCase()\n      .trim()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/^-|-$/g, '') || 'benefit';\n  if (!taken.includes(base)) return base;\n  let n = 2;\n  while (taken.includes(`${base}-${n}`)) n += 1;\n  return `${base}-${n}`;\n}\n\nexport function MemberBenefitsSection({ form, setForm }: PlanSectionProps) {\n  const [draft, setDraft] = useState('');\n\n  const add = () => {\n    const name = draft.trim();\n    if (!name || form.benefits.some((b) => b.name === name)) return;\n    setForm((f) => ({\n      ...f,\n      benefits: [\n        ...f.benefits,\n        {\n          id: mintId(\n            name,\n            f.benefits.map((b) => b.id),\n          ),\n          name,\n        },\n      ],\n    }));\n    setDraft('');\n  };\n  const rename = (id: string, name: string) =>\n    setForm((f) => ({\n      ...f,\n      // The id is untouched. This is the rename the ids exist for: a benefit\n      // fixed in place stays the same benefit.\n      benefits: f.benefits.map((b) => (b.id === id ? { ...b, name } : b)),\n    }));\n  const remove = (id: string) =>\n    setForm((f) => ({\n      ...f,\n      benefits: f.benefits.filter((b) => b.id !== id),\n    }));\n\n  return (\n    <EditorSection title=\"Member benefits\">\n      <div className=\"grid gap-3 sm:grid-cols-2\">\n        <Field\n          label=\"Discount on everything else (%)\"\n          hint=\"Applies to the rest of the shop, not to this plan.\"\n        >\n          <Input\n            type=\"number\"\n            min={0}\n            max={100}\n            value={form.memberDiscountPercent}\n            onChange={(e) =>\n              setForm((f) => ({\n                ...f,\n                memberDiscountPercent: e.target.value,\n              }))\n            }\n            placeholder=\"e.g. 15\"\n          />\n        </Field>\n\n        <Field label=\"Sessions included each period\">\n          <Input\n            type=\"number\"\n            min={0}\n            value={form.freeServicesPerMonth}\n            onChange={(e) =>\n              setForm((f) => ({\n                ...f,\n                freeServicesPerMonth: e.target.value,\n              }))\n            }\n            placeholder=\"e.g. 4\"\n          />\n        </Field>\n      </div>\n\n      <Checkbox\n        checked={form.priorityBooking}\n        onChange={(e) =>\n          setForm((f) => ({ ...f, priorityBooking: e.target.checked }))\n        }\n        label=\"Members book before everyone else\"\n      />\n\n      <Field\n        label=\"Listed on the storefront\"\n        hint=\"The lines a customer reads before joining.\"\n      >\n        <div className=\"flex gap-2\">\n          <Input\n            type=\"text\"\n            value={draft}\n            onChange={(e) => setDraft(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                add();\n              }\n            }}\n            placeholder=\"e.g. Guest passes every month\"\n            className=\"flex-1\"\n          />\n          <Button variant=\"secondary\" onClick={add}>\n            Add\n          </Button>\n        </div>\n      </Field>\n      {form.benefits.length > 0 && (\n        <div className=\"space-y-2\">\n          <AnimatePresence initial={false}>\n            {form.benefits.map((benefit) => (\n              <motion.div\n                key={benefit.id}\n                layout\n                initial={{ opacity: 0, height: 0 }}\n                animate={{ opacity: 1, height: 'auto' }}\n                exit={{ opacity: 0, height: 0 }}\n                transition={springs.snappy}\n                className=\"flex items-center gap-2 overflow-hidden\"\n              >\n                {/* A line a customer reads, edited where it is written. As a\n                    chip the only way to fix a typo was to delete it and type\n                    it again, which issued a new id for the same benefit. */}\n                <Input\n                  type=\"text\"\n                  value={benefit.name}\n                  onChange={(e) => rename(benefit.id, e.target.value)}\n                  className=\"flex-1\"\n                  aria-label=\"Benefit\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => remove(benefit.id)}\n                  aria-label={`Remove ${benefit.name}`}\n                  className=\"text-[var(--text-muted)] hover:text-[var(--error)]\"\n                >\n                  <X className=\"size-4\" />\n                </button>\n              </motion.div>\n            ))}\n          </AnimatePresence>\n        </div>\n      )}\n    </EditorSection>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/plan-editor/sections/plan-preview.d.ts

@@ -0,0 +1,26 @@
+import type { PlanFormData } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';
+/**
+ * THE CARD A CUSTOMER CHOOSES FROM, WHILE IT IS BEING WRITTEN.
+ *
+ * A plan is a storefront object — `/membership` draws one card per plan and
+ * that card is the whole of the offer — and the editor showed none of it. So a
+ * merchant typed into a column of grey boxes and found out what they had made
+ * by saving, publishing and going to look.
+ *
+ * Same promise as `ItemPreview` in the product editor, and the same limit: not
+ * a pixel-accurate render. The storefront card takes its colours and type from
+ * the template, and chasing that here would be a lie with extra steps. What
+ * this promises is narrower and true — the same fields, in the same order,
+ * saying the same thing, read from `PlatformMembershipPage`'s CardsView.
+ *
+ * The second half is the part that only a preview can tell you: what this
+ * screen captures that the card does not show. Badges and benefits are stored,
+ * travel to the API, and are drawn by nothing on the membership page — the
+ * benefits still APPLY (the discount, the included sessions and priority
+ * booking are enforced when a member checks out or books), they are simply
+ * invisible to the person deciding whether to join. That is worth knowing at
+ * the moment you are typing them, not after.
+ */
+export declare function PlanPreview({ form }: {
+    form: PlanFormData;
+}): import("react").JSX.Element;

package/dist/plan-editor/sections/plan-preview.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { formatInterval } from "@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers";
+function PlanPreview({ form }) {
+  const formatCurrency = useFormatCurrency();
+  const isSumOfItems = form.pricingKind === "sum-of-items";
+  const amount = Number(form.amount) || 0;
+  const trial = Number(form.trialDays) || 0;
+  const named = form.features.filter((f) => f.name.trim());
+  const unshown = [
+    form.badges.length > 0 && "badges",
+    form.benefits.length > 0 && "benefits",
+    Number(form.memberDiscountPercent) > 0 && "the member discount",
+    Number(form.freeServicesPerMonth) > 0 && "included sessions",
+    form.priorityBooking && "priority booking"
+  ].filter((v) => typeof v === "string");
+  return /* @__PURE__ */ jsxs("aside", { className: "surface overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Preview" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-[var(--text-primary)]", children: form.name.trim() || "Untitled plan" }),
+      /* @__PURE__ */ jsxs("p", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-brand-500", children: isSumOfItems ? "Varies" : formatCurrency(amount, form.currency) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: formatInterval(form.interval, Number(form.intervalCount) || 1) })
+      ] }),
+      form.description.trim() && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: form.description }),
+      trial > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex rounded-md bg-[var(--accent-secondary)] px-2 py-1 text-xs font-medium text-[var(--accent-secondary-ink)]", children: [
+        trial,
+        "-day free trial"
+      ] }),
+      named.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: named.map((f, i) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `flex items-center gap-2 text-sm ${f.included ? "text-[var(--text-secondary)]" : "text-[var(--text-muted)]"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: `flex size-4 shrink-0 items-center justify-center rounded-full text-2xs ${f.included ? "bg-brand-500 text-white" : "bg-[var(--bg-muted)] text-[var(--text-muted)]"}`,
+                children: f.included ? "\u2713" : "\xD7"
+              }
+            ),
+            f.name
+          ]
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-brand-500 px-3 py-2 text-center text-sm font-semibold text-brand-500", children: "Choose plan" })
+    ] }),
+    unshown.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] px-4 py-3", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
+      "Not on this card: ",
+      unshown.join(", "),
+      ". The membership page draws a name, a price, a description, the trial and the features. Benefits still apply at checkout and on bookings."
+    ] }) })
+  ] });
+}
+export {
+  PlanPreview
+};
+//# sourceMappingURL=plan-preview.js.map

package/dist/plan-editor/sections/plan-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/plan-preview.tsx"],"sourcesContent":["'use client';\n\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { formatInterval } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';\nimport type { PlanFormData } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';\n\n/**\n * THE CARD A CUSTOMER CHOOSES FROM, WHILE IT IS BEING WRITTEN.\n *\n * A plan is a storefront object — `/membership` draws one card per plan and\n * that card is the whole of the offer — and the editor showed none of it. So a\n * merchant typed into a column of grey boxes and found out what they had made\n * by saving, publishing and going to look.\n *\n * Same promise as `ItemPreview` in the product editor, and the same limit: not\n * a pixel-accurate render. The storefront card takes its colours and type from\n * the template, and chasing that here would be a lie with extra steps. What\n * this promises is narrower and true — the same fields, in the same order,\n * saying the same thing, read from `PlatformMembershipPage`'s CardsView.\n *\n * The second half is the part that only a preview can tell you: what this\n * screen captures that the card does not show. Badges and benefits are stored,\n * travel to the API, and are drawn by nothing on the membership page — the\n * benefits still APPLY (the discount, the included sessions and priority\n * booking are enforced when a member checks out or books), they are simply\n * invisible to the person deciding whether to join. That is worth knowing at\n * the moment you are typing them, not after.\n */\nexport function PlanPreview({ form }: { form: PlanFormData }) {\n  const formatCurrency = useFormatCurrency();\n  const isSumOfItems = form.pricingKind === 'sum-of-items';\n  const amount = Number(form.amount) || 0;\n  const trial = Number(form.trialDays) || 0;\n  const named = form.features.filter((f) => f.name.trim());\n\n  const unshown = [\n    form.badges.length > 0 && 'badges',\n    form.benefits.length > 0 && 'benefits',\n    Number(form.memberDiscountPercent) > 0 && 'the member discount',\n    Number(form.freeServicesPerMonth) > 0 && 'included sessions',\n    form.priorityBooking && 'priority booking',\n  ].filter((v): v is string => typeof v === 'string');\n\n  return (\n    <aside className=\"surface overflow-hidden\">\n      <div className=\"border-b border-[var(--border-subtle)] px-4 py-3\">\n        <h2 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n          Preview\n        </h2>\n      </div>\n\n      <div className=\"space-y-3 p-4\">\n        <p className=\"text-base font-semibold text-[var(--text-primary)]\">\n          {form.name.trim() || 'Untitled plan'}\n        </p>\n\n        <p className=\"flex items-baseline gap-1\">\n          <span className=\"text-2xl font-bold text-brand-500\">\n            {isSumOfItems ? 'Varies' : formatCurrency(amount, form.currency)}\n          </span>\n          <span className=\"text-xs text-[var(--text-tertiary)]\">\n            {formatInterval(form.interval, Number(form.intervalCount) || 1)}\n          </span>\n        </p>\n\n        {form.description.trim() && (\n          <p className=\"text-sm text-[var(--text-secondary)]\">\n            {form.description}\n          </p>\n        )}\n\n        {trial > 0 && (\n          <span className=\"inline-flex rounded-md bg-[var(--accent-secondary)] px-2 py-1 text-xs font-medium text-[var(--accent-secondary-ink)]\">\n            {trial}-day free trial\n          </span>\n        )}\n\n        {named.length > 0 && (\n          <ul className=\"space-y-2\">\n            {named.map((f, i) => (\n              <li\n                key={i}\n                className={`flex items-center gap-2 text-sm ${\n                  f.included\n                    ? 'text-[var(--text-secondary)]'\n                    : 'text-[var(--text-muted)]'\n                }`}\n              >\n                {/* The glyph the storefront draws, which is a character in a\n                    circle rather than an icon — the icon scale starts at 13px\n                    and this dot is 16px wide. */}\n                <span\n                  aria-hidden\n                  className={`flex size-4 shrink-0 items-center justify-center rounded-full text-2xs ${\n                    f.included\n                      ? 'bg-brand-500 text-white'\n                      : 'bg-[var(--bg-muted)] text-[var(--text-muted)]'\n                  }`}\n                >\n                  {f.included ? '✓' : '×'}\n                </span>\n                {f.name}\n              </li>\n            ))}\n          </ul>\n        )}\n\n        {/* Not a control — the storefront's is, and a working button here\n            would be a second one for a question this screen is not asking. */}\n        <p className=\"rounded-lg border border-brand-500 px-3 py-2 text-center text-sm font-semibold text-brand-500\">\n          Choose plan\n        </p>\n      </div>\n\n      {unshown.length > 0 && (\n        <div className=\"border-t border-[var(--border-subtle)] px-4 py-3\">\n          <p className=\"text-xs text-[var(--text-tertiary)]\">\n            Not on this card: {unshown.join(', ')}. The membership page draws a\n            name, a price, a description, the trial and the features. Benefits\n            still apply at checkout and on bookings.\n          </p>\n        </div>\n      )}\n    </aside>\n  );\n}\n"],"mappings":";AA8CQ,cAUA,YAVA;AA5CR,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAyBxB,SAAS,YAAY,EAAE,KAAK,GAA2B;AAC5D,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,eAAe,KAAK,gBAAgB;AAC1C,QAAM,SAAS,OAAO,KAAK,MAAM,KAAK;AACtC,QAAM,QAAQ,OAAO,KAAK,SAAS,KAAK;AACxC,QAAM,QAAQ,KAAK,SAAS,OAAO,CAAC,MAAM,EAAE,KAAK,KAAK,CAAC;AAEvD,QAAM,UAAU;AAAA,IACd,KAAK,OAAO,SAAS,KAAK;AAAA,IAC1B,KAAK,SAAS,SAAS,KAAK;AAAA,IAC5B,OAAO,KAAK,qBAAqB,IAAI,KAAK;AAAA,IAC1C,OAAO,KAAK,oBAAoB,IAAI,KAAK;AAAA,IACzC,KAAK,mBAAmB;AAAA,EAC1B,EAAE,OAAO,CAAC,MAAmB,OAAO,MAAM,QAAQ;AAElD,SACE,qBAAC,WAAM,WAAU,2BACf;AAAA,wBAAC,SAAI,WAAU,oDACb,8BAAC,QAAG,WAAU,oDAAmD,qBAEjE,GACF;AAAA,IAEA,qBAAC,SAAI,WAAU,iBACb;AAAA,0BAAC,OAAE,WAAU,sDACV,eAAK,KAAK,KAAK,KAAK,iBACvB;AAAA,MAEA,qBAAC,OAAE,WAAU,6BACX;AAAA,4BAAC,UAAK,WAAU,qCACb,yBAAe,WAAW,eAAe,QAAQ,KAAK,QAAQ,GACjE;AAAA,QACA,oBAAC,UAAK,WAAU,uCACb,yBAAe,KAAK,UAAU,OAAO,KAAK,aAAa,KAAK,CAAC,GAChE;AAAA,SACF;AAAA,MAEC,KAAK,YAAY,KAAK,KACrB,oBAAC,OAAE,WAAU,wCACV,eAAK,aACR;AAAA,MAGD,QAAQ,KACP,qBAAC,UAAK,WAAU,wHACb;AAAA;AAAA,QAAM;AAAA,SACT;AAAA,MAGD,MAAM,SAAS,KACd,oBAAC,QAAG,WAAU,aACX,gBAAM,IAAI,CAAC,GAAG,MACb;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,mCACT,EAAE,WACE,iCACA,0BACN;AAAA,UAKA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAW,0EACT,EAAE,WACE,4BACA,+CACN;AAAA,gBAEC,YAAE,WAAW,WAAM;AAAA;AAAA,YACtB;AAAA,YACC,EAAE;AAAA;AAAA;AAAA,QApBE;AAAA,MAqBP,CACD,GACH;AAAA,MAKF,oBAAC,OAAE,WAAU,iGAAgG,yBAE7G;AAAA,OACF;AAAA,IAEC,QAAQ,SAAS,KAChB,oBAAC,SAAI,WAAU,oDACb,+BAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,MAC9B,QAAQ,KAAK,IAAI;AAAA,MAAE;AAAA,OAGxC,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/plan-editor/sections/pricing-model-section.d.ts

@@ -0,0 +1,16 @@
+import type { PlanSectionProps } from '../types';
+/**
+ * How the cycle amount is arrived at: one price, or the items they picked.
+ *
+ * Two hand-drawn `<button>`s carrying `border-brand-500 bg-brand-50
+ * text-brand-700` — a Tailwind-palette blue rather than this product's, no
+ * press, no focus ring, and nothing telling a screen reader which of the two
+ * was chosen. `OptionButton shape="card"` is exactly this control and has been
+ * since it was written.
+ *
+ * The selection TRAVELS. One element with a `layoutId` slides from one card to
+ * the other on a spring instead of switching off here and on there, so the two
+ * cards read as one control with a position in it — and a merchant flicking
+ * between them to compare is followed rather than cut to.
+ */
+export declare function PricingModelSection({ form, setForm, isEditing, }: PlanSectionProps): import("react").JSX.Element | null;

package/dist/plan-editor/sections/pricing-model-section.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { EditorSection, OptionButton } from "@withpotter/ui-kit";
+function PricingModelSection({
+  form,
+  setForm,
+  isEditing
+}) {
+  const indicatorId = `plan-pricing-model-${useId()}`;
+  if (isEditing) return null;
+  const isSumOfItems = form.pricingKind === "sum-of-items";
+  const options = [
+    {
+      kind: "fixed",
+      title: "Fixed price",
+      detail: "One amount per cycle"
+    },
+    {
+      kind: "sum-of-items",
+      title: "Sum of items",
+      detail: "They pick the items; the cycle adds up"
+    }
+  ];
+  return /* @__PURE__ */ jsx(EditorSection, { title: "Pricing model", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: options.map((option) => /* @__PURE__ */ jsxs(
+    OptionButton,
+    {
+      shape: "card",
+      selected: option.kind === "sum-of-items" ? isSumOfItems : !isSumOfItems,
+      indicatorId,
+      onClick: () => setForm((f) => ({ ...f, pricingKind: option.kind })),
+      className: "w-full flex-col items-start gap-0.5 py-3 pl-3 text-left",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: option.title }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: option.detail })
+      ]
+    },
+    option.kind
+  )) }) });
+}
+export {
+  PricingModelSection
+};
+//# sourceMappingURL=pricing-model-section.js.map

package/dist/plan-editor/sections/pricing-model-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/pricing-model-section.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { EditorSection, OptionButton } from '@withpotter/ui-kit';\nimport type { PlanSectionProps } from '../types';\n\n/**\n * How the cycle amount is arrived at: one price, or the items they picked.\n *\n * Two hand-drawn `<button>`s carrying `border-brand-500 bg-brand-50\n * text-brand-700` — a Tailwind-palette blue rather than this product's, no\n * press, no focus ring, and nothing telling a screen reader which of the two\n * was chosen. `OptionButton shape=\"card\"` is exactly this control and has been\n * since it was written.\n *\n * The selection TRAVELS. One element with a `layoutId` slides from one card to\n * the other on a spring instead of switching off here and on there, so the two\n * cards read as one control with a position in it — and a merchant flicking\n * between them to compare is followed rather than cut to.\n */\nexport function PricingModelSection({\n  form,\n  setForm,\n  isEditing,\n}: PlanSectionProps) {\n  const indicatorId = `plan-pricing-model-${useId()}`;\n  if (isEditing) return null;\n  const isSumOfItems = form.pricingKind === 'sum-of-items';\n\n  const options = [\n    {\n      kind: 'fixed' as const,\n      title: 'Fixed price',\n      detail: 'One amount per cycle',\n    },\n    {\n      kind: 'sum-of-items' as const,\n      title: 'Sum of items',\n      detail: 'They pick the items; the cycle adds up',\n    },\n  ];\n\n  return (\n    <EditorSection title=\"Pricing model\">\n      <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n        {options.map((option) => (\n          <OptionButton\n            key={option.kind}\n            shape=\"card\"\n            selected={\n              option.kind === 'sum-of-items' ? isSumOfItems : !isSumOfItems\n            }\n            indicatorId={indicatorId}\n            onClick={() => setForm((f) => ({ ...f, pricingKind: option.kind }))}\n            className=\"w-full flex-col items-start gap-0.5 py-3 pl-3 text-left\"\n          >\n            <span className=\"font-medium text-[var(--text-primary)]\">\n              {option.title}\n            </span>\n            <span className=\"text-xs text-[var(--text-muted)]\">\n              {option.detail}\n            </span>\n          </OptionButton>\n        ))}\n      </div>\n    </EditorSection>\n  );\n}\n"],"mappings":";AA8CU,SAUE,KAVF;AA5CV,SAAS,aAAa;AACtB,SAAS,eAAe,oBAAoB;AAiBrC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,sBAAsB,MAAM,CAAC;AACjD,MAAI,UAAW,QAAO;AACtB,QAAM,eAAe,KAAK,gBAAgB;AAE1C,QAAM,UAAU;AAAA,IACd;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,oBAAC,iBAAc,OAAM,iBACnB,8BAAC,SAAI,WAAU,yCACZ,kBAAQ,IAAI,CAAC,WACZ;AAAA,IAAC;AAAA;AAAA,MAEC,OAAM;AAAA,MACN,UACE,OAAO,SAAS,iBAAiB,eAAe,CAAC;AAAA,MAEnD;AAAA,MACA,SAAS,MAAM,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,aAAa,OAAO,KAAK,EAAE;AAAA,MAClE,WAAU;AAAA,MAEV;AAAA,4BAAC,UAAK,WAAU,0CACb,iBAAO,OACV;AAAA,QACA,oBAAC,UAAK,WAAU,oCACb,iBAAO,QACV;AAAA;AAAA;AAAA,IAdK,OAAO;AAAA,EAed,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/plan-editor/sections/pricing-section.d.ts

@@ -0,0 +1,2 @@
+import type { PlanSectionProps } from '../types';
+export declare function PricingSection({ form, setForm, isEditing }: PlanSectionProps): import("react").JSX.Element | null;