@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Select } from "@withpotter/ui-kit/select";
+import { CurrencyInput } from "@withpotter/ui-kit/currency-input";
+import { EditorSection, Field } from "@withpotter/ui-kit";
+import { useTenantCurrency } from "@withpotter/hooks/use-tenant-currency";
+import { springs } from "@withpotter/lib/motion";
+const INTERVAL_OPTIONS = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "quarterly", label: "Quarterly" },
+  { value: "biannually", label: "Every 6 months" },
+  { value: "annually", label: "Annually" }
+];
+const CURRENCY_OPTIONS = [
+  { value: "NGN", label: "NGN" },
+  { value: "USD", label: "USD" },
+  { value: "GBP", label: "GBP" },
+  { value: "EUR", label: "EUR" }
+];
+function PricingSection({ form, setForm, isEditing }) {
+  const reduce = useReducedMotion();
+  const tenantCurrency = useTenantCurrency();
+  if (isEditing) return null;
+  const isSumOfItems = form.pricingKind === "sum-of-items";
+  const transition = reduce ? { duration: 0 } : springs.gentle;
+  const foreign = form.currency !== tenantCurrency;
+  return /* @__PURE__ */ jsx(EditorSection, { title: "Pricing", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      transition,
+      className: "flex flex-col gap-3 sm:flex-row",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: !isSumOfItems && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            initial: { opacity: 0, scale: 0.96 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.96 },
+            transition,
+            className: "flex-1",
+            children: /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Amount",
+                required: true,
+                hint: foreign ? void 0 : `Charged in ${tenantCurrency}.`,
+                children: /* @__PURE__ */ jsx(
+                  CurrencyInput,
+                  {
+                    value: typeof form.amount === "string" ? parseFloat(form.amount) || void 0 : form.amount,
+                    onChange: (value) => setForm((f) => ({ ...f, amount: value?.toString() || "" })),
+                    placeholder: "5000",
+                    currencyCode: form.currency
+                  }
+                )
+              }
+            )
+          },
+          "amount"
+        ) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: foreign && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            initial: { opacity: 0, scale: 0.96 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.96 },
+            transition,
+            className: "flex-1",
+            children: /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: "Currency",
+                hint: `Your business bills in ${tenantCurrency}.`,
+                children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: form.currency,
+                    onChange: (v) => setForm((f) => ({ ...f, currency: v })),
+                    options: CURRENCY_OPTIONS,
+                    placeholder: "Currency"
+                  }
+                )
+              }
+            )
+          },
+          "currency"
+        ) }),
+        /* @__PURE__ */ jsx(motion.div, { layout: true, transition, className: "flex-1", children: /* @__PURE__ */ jsx(Field, { label: "Billing cycle", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: form.interval,
+            onChange: (v) => setForm((f) => ({ ...f, interval: v })),
+            options: INTERVAL_OPTIONS,
+            placeholder: "Cycle"
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+export {
+  PricingSection
+};
+//# sourceMappingURL=pricing-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/pricing-section.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { CurrencyInput } from '@withpotter/ui-kit/currency-input';\nimport { EditorSection, Field } from '@withpotter/ui-kit';\nimport { useTenantCurrency } from '@withpotter/hooks/use-tenant-currency';\nimport { springs } from '@withpotter/lib/motion';\nimport type { PlanSectionProps } from '../types';\n\n/** The six Paystack recognises, which is the whole of what a plan can be. */\nconst INTERVAL_OPTIONS = [\n  { value: 'daily', label: 'Daily' },\n  { value: 'weekly', label: 'Weekly' },\n  { value: 'monthly', label: 'Monthly' },\n  { value: 'quarterly', label: 'Quarterly' },\n  { value: 'biannually', label: 'Every 6 months' },\n  { value: 'annually', label: 'Annually' },\n];\n\nconst CURRENCY_OPTIONS = [\n  { value: 'NGN', label: 'NGN' },\n  { value: 'USD', label: 'USD' },\n  { value: 'GBP', label: 'GBP' },\n  { value: 'EUR', label: 'EUR' },\n];\n\nexport function PricingSection({ form, setForm, isEditing }: PlanSectionProps) {\n  const reduce = useReducedMotion();\n  const tenantCurrency = useTenantCurrency();\n  // Pricing is locked once a plan exists (Paystack plan code is bound to it).\n  if (isEditing) return null;\n  const isSumOfItems = form.pricingKind === 'sum-of-items';\n  const transition = reduce ? { duration: 0 } : springs.gentle;\n\n  /**\n   * ONE CYCLE, NO MULTIPLIER, AND THAT IS DELIBERATE.\n   *\n   * `merchant_plans.interval_count` exists, the create DTO accepts it, and\n   * `formatInterval` will happily render \"Every 2 months\" — so a \"Bill every\n   * N\" field looks like the obvious missing control. It is not, and it was\n   * briefly built here before this comment replaced it.\n   *\n   * Paystack's plan API has no interval count. `PaystackProvider.createPlan`\n   * sends `{ name, amount, interval, currency }` and nothing else, and a\n   * member's `nextPaymentDate` is read back from Paystack's own\n   * `next_payment_date` rather than computed locally — see\n   * `paystack-webhook.service.ts`. So a plan stored as \"every 2 weeks\" is a\n   * WEEKLY plan at the gateway and the member's card is charged every week,\n   * while this dashboard says fortnightly. The one place `intervalCount` is\n   * honoured is `merchant-subscription-payment.handler`, which is Box\n   * billing the merchant — a different table and a different lifecycle.\n   *\n   * A cadence multiplier needs a gateway that can express one. Until then the\n   * field would be a promise the charge does not keep, so the cycle is the\n   * six Paystack recognises and nothing else.\n   */\n  /**\n   * The currency is the workspace's, and the picker only exists for a plan\n   * that already disagrees with it.\n   *\n   * Settings → Regional calls its currency \"used for all pricing across your\n   * site and checkout\", and Paystack settles a subaccount in the currency it\n   * was opened in — so a per-plan choice of four could build a plan the\n   * account cannot settle, and nothing on this screen said so.\n   */\n  const foreign = form.currency !== tenantCurrency;\n\n  return (\n    <EditorSection title=\"Pricing\">\n      {/* The amount LEAVES and the fields that stay slide across to fill the\n          row. It used to be two different grids swapped by a ternary, so\n          switching model re-laid the whole row in one frame: three columns\n          became two and the currency you were looking at was suddenly\n          somewhere else. `popLayout` takes the departing field out of flow\n          first, so the others travel to their new width on the same spring\n          that moves the selection above them. */}\n      <motion.div\n        layout\n        transition={transition}\n        className=\"flex flex-col gap-3 sm:flex-row\"\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {!isSumOfItems && (\n            <motion.div\n              key=\"amount\"\n              layout\n              initial={{ opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.96 }}\n              transition={transition}\n              className=\"flex-1\"\n            >\n              <Field\n                label=\"Amount\"\n                required\n                hint={foreign ? undefined : `Charged in ${tenantCurrency}.`}\n              >\n                <CurrencyInput\n                  value={\n                    typeof form.amount === 'string'\n                      ? parseFloat(form.amount) || undefined\n                      : form.amount\n                  }\n                  onChange={(value) =>\n                    setForm((f) => ({ ...f, amount: value?.toString() || '' }))\n                  }\n                  placeholder=\"5000\"\n                  currencyCode={form.currency}\n                />\n              </Field>\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {foreign && (\n            <motion.div\n              key=\"currency\"\n              layout\n              initial={{ opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.96 }}\n              transition={transition}\n              className=\"flex-1\"\n            >\n              <Field\n                label=\"Currency\"\n                hint={`Your business bills in ${tenantCurrency}.`}\n              >\n                <Select\n                  value={form.currency}\n                  onChange={(v) => setForm((f) => ({ ...f, currency: v }))}\n                  options={CURRENCY_OPTIONS}\n                  placeholder=\"Currency\"\n                />\n              </Field>\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <motion.div layout transition={transition} className=\"flex-1\">\n          <Field label=\"Billing cycle\">\n            <Select\n              value={form.interval}\n              onChange={(v) => setForm((f) => ({ ...f, interval: v }))}\n              options={INTERVAL_OPTIONS}\n              placeholder=\"Cycle\"\n            />\n          </Field>\n        </motion.div>\n      </motion.div>\n    </EditorSection>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/plan-editor/sections/sibling-group-section.d.ts

@@ -0,0 +1,14 @@
+import type { PlanSectionProps } from '../types';
+/**
+ * Two plans that are the same offer at a different price or a different
+ * cadence, shown together on the storefront so a customer can switch.
+ *
+ * This asked for a Group ID and a Group label as free text — a merchant
+ * inventing a primary key, then re-typing it exactly on the second plan for
+ * the pair to exist at all. The groups are already in the data, so the second
+ * plan picks the first one's from a list, and a new one is minted from the
+ * name rather than typed twice.
+ */
+export declare function SiblingGroupSection({ form, setForm, tenantSlug, }: PlanSectionProps & {
+    tenantSlug: string | undefined;
+}): import("react").JSX.Element;

package/dist/plan-editor/sections/sibling-group-section.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Select } from "@withpotter/ui-kit/select";
+import { EditorSection, Field, Input, Reveal } from "@withpotter/ui-kit";
+import { usePlanGroups, slugifyGroup } from "../use-plan-groups";
+const NEW_GROUP = "__new";
+function SiblingGroupSection({
+  form,
+  setForm,
+  tenantSlug
+}) {
+  const groups = usePlanGroups(tenantSlug);
+  const [creating, setCreating] = useState(false);
+  const inGroup = creating || Boolean(form.groupId);
+  const value = creating ? NEW_GROUP : form.groupId || "";
+  const pick = (next) => {
+    if (next === NEW_GROUP) {
+      setCreating(true);
+      setForm((f) => ({ ...f, groupId: "", groupLabel: "" }));
+      return;
+    }
+    setCreating(false);
+    if (!next) {
+      setForm((f) => ({ ...f, groupId: "", groupLabel: "", groupRole: "" }));
+      return;
+    }
+    const group = groups.find((g) => g.id === next);
+    setForm((f) => ({
+      ...f,
+      groupId: next,
+      groupLabel: group?.label ?? next
+    }));
+  };
+  const name = (label) => setForm((f) => ({
+    ...f,
+    groupLabel: label,
+    groupId: slugifyGroup(label)
+  }));
+  return /* @__PURE__ */ jsxs(EditorSection, { title: "Show with other plans", children: [
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: "Group",
+        hint: "Plans in one group sit side by side on your storefront, so a customer can compare them and pick one, e.g. monthly or yearly.",
+        children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value,
+            onChange: pick,
+            placeholder: "On its own",
+            options: [
+              { value: "", label: "On its own" },
+              ...groups.map((g) => ({
+                value: g.id,
+                label: `${g.label} (${g.count})`
+              })),
+              { value: NEW_GROUP, label: "New group\u2026" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Reveal, { show: creating, children: /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: "Group name",
+        hint: "What the pair is called on the storefront, e.g. Build My Supply.",
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: form.groupLabel,
+            onChange: (e) => name(e.target.value),
+            placeholder: "e.g. Build My Supply",
+            className: "w-full"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Reveal, { show: inGroup, children: /* @__PURE__ */ jsx(Field, { label: "What differs", children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: form.groupRole || "",
+        onChange: (v) => setForm((f) => ({
+          ...f,
+          groupRole: v
+        })),
+        placeholder: "Pick one",
+        options: [
+          {
+            value: "cadence-sibling",
+            label: "How often \u2014 monthly, twice a month"
+          },
+          {
+            value: "tier-sibling",
+            label: "How much they get \u2014 basic, premium"
+          }
+        ]
+      }
+    ) }) })
+  ] });
+}
+export {
+  SiblingGroupSection
+};
+//# sourceMappingURL=sibling-group-section.js.map

package/dist/plan-editor/sections/sibling-group-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/sibling-group-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { EditorSection, Field, Input, Reveal } from '@withpotter/ui-kit';\nimport type { PlanFormData } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';\nimport { usePlanGroups, slugifyGroup } from '../use-plan-groups';\nimport type { PlanSectionProps } from '../types';\n\nconst NEW_GROUP = '__new';\n\n/**\n * Two plans that are the same offer at a different price or a different\n * cadence, shown together on the storefront so a customer can switch.\n *\n * This asked for a Group ID and a Group label as free text — a merchant\n * inventing a primary key, then re-typing it exactly on the second plan for\n * the pair to exist at all. The groups are already in the data, so the second\n * plan picks the first one's from a list, and a new one is minted from the\n * name rather than typed twice.\n */\nexport function SiblingGroupSection({\n  form,\n  setForm,\n  tenantSlug,\n}: PlanSectionProps & { tenantSlug: string | undefined }) {\n  const groups = usePlanGroups(tenantSlug);\n  const [creating, setCreating] = useState(false);\n\n  const inGroup = creating || Boolean(form.groupId);\n  const value = creating ? NEW_GROUP : form.groupId || '';\n\n  const pick = (next: string) => {\n    if (next === NEW_GROUP) {\n      setCreating(true);\n      setForm((f) => ({ ...f, groupId: '', groupLabel: '' }));\n      return;\n    }\n    setCreating(false);\n    if (!next) {\n      setForm((f) => ({ ...f, groupId: '', groupLabel: '', groupRole: '' }));\n      return;\n    }\n    const group = groups.find((g) => g.id === next);\n    setForm((f) => ({\n      ...f,\n      groupId: next,\n      groupLabel: group?.label ?? next,\n    }));\n  };\n\n  const name = (label: string) =>\n    setForm((f) => ({\n      ...f,\n      groupLabel: label,\n      groupId: slugifyGroup(label),\n    }));\n\n  return (\n    <EditorSection title=\"Show with other plans\">\n      <Field\n        label=\"Group\"\n        hint=\"Plans in one group sit side by side on your storefront, so a customer can compare them and pick one, e.g. monthly or yearly.\"\n      >\n        <Select\n          value={value}\n          onChange={pick}\n          placeholder=\"On its own\"\n          options={[\n            { value: '', label: 'On its own' },\n            ...groups.map((g) => ({\n              value: g.id,\n              label: `${g.label} (${g.count})`,\n            })),\n            { value: NEW_GROUP, label: 'New group…' },\n          ]}\n        />\n      </Field>\n\n      <Reveal show={creating}>\n        <Field\n          label=\"Group name\"\n          hint=\"What the pair is called on the storefront, e.g. Build My Supply.\"\n        >\n          <Input\n            type=\"text\"\n            value={form.groupLabel}\n            onChange={(e) => name(e.target.value)}\n            placeholder=\"e.g. Build My Supply\"\n            className=\"w-full\"\n          />\n        </Field>\n      </Reveal>\n\n      <Reveal show={inGroup}>\n        <Field label=\"What differs\">\n          <Select\n            value={form.groupRole || ''}\n            onChange={(v) =>\n              setForm((f) => ({\n                ...f,\n                groupRole: v as PlanFormData['groupRole'],\n              }))\n            }\n            placeholder=\"Pick one\"\n            options={[\n              {\n                value: 'cadence-sibling',\n                label: 'How often — monthly, twice a month',\n              },\n              {\n                value: 'tier-sibling',\n                label: 'How much they get — basic, premium',\n              },\n            ]}\n          />\n        </Field>\n      </Reveal>\n    </EditorSection>\n  );\n}\n"],"mappings":";AA2DI,SAKI,KALJ;AAzDJ,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,eAAe,OAAO,OAAO,cAAc;AAEpD,SAAS,eAAe,oBAAoB;AAG5C,MAAM,YAAY;AAYX,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAA0D;AACxD,QAAM,SAAS,cAAc,UAAU;AACvC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,UAAU,YAAY,QAAQ,KAAK,OAAO;AAChD,QAAM,QAAQ,WAAW,YAAY,KAAK,WAAW;AAErD,QAAM,OAAO,CAAC,SAAiB;AAC7B,QAAI,SAAS,WAAW;AACtB,kBAAY,IAAI;AAChB,cAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,SAAS,IAAI,YAAY,GAAG,EAAE;AACtD;AAAA,IACF;AACA,gBAAY,KAAK;AACjB,QAAI,CAAC,MAAM;AACT,cAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,SAAS,IAAI,YAAY,IAAI,WAAW,GAAG,EAAE;AACrE;AAAA,IACF;AACA,UAAM,QAAQ,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,IAAI;AAC9C,YAAQ,CAAC,OAAO;AAAA,MACd,GAAG;AAAA,MACH,SAAS;AAAA,MACT,YAAY,OAAO,SAAS;AAAA,IAC9B,EAAE;AAAA,EACJ;AAEA,QAAM,OAAO,CAAC,UACZ,QAAQ,CAAC,OAAO;AAAA,IACd,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,SAAS,aAAa,KAAK;AAAA,EAC7B,EAAE;AAEJ,SACE,qBAAC,iBAAc,OAAM,yBACnB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QAEL;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,UAAU;AAAA,YACV,aAAY;AAAA,YACZ,SAAS;AAAA,cACP,EAAE,OAAO,IAAI,OAAO,aAAa;AAAA,cACjC,GAAG,OAAO,IAAI,CAAC,OAAO;AAAA,gBACpB,OAAO,EAAE;AAAA,gBACT,OAAO,GAAG,EAAE,KAAK,KAAK,EAAE,KAAK;AAAA,cAC/B,EAAE;AAAA,cACF,EAAE,OAAO,WAAW,OAAO,kBAAa;AAAA,YAC1C;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,UAAO,MAAM,UACZ;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QAEL;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,KAAK;AAAA,YACZ,UAAU,CAAC,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,YACpC,aAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IACF,GACF;AAAA,IAEA,oBAAC,UAAO,MAAM,SACZ,8BAAC,SAAM,OAAM,gBACX;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,KAAK,aAAa;AAAA,QACzB,UAAU,CAAC,MACT,QAAQ,CAAC,OAAO;AAAA,UACd,GAAG;AAAA,UACH,WAAW;AAAA,QACb,EAAE;AAAA,QAEJ,aAAY;AAAA,QACZ,SAAS;AAAA,UACP;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,UACT;AAAA,UACA;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,UACT;AAAA,QACF;AAAA;AAAA,IACF,GACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/plan-editor/sections/trial-features-section.d.ts

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

package/dist/plan-editor/sections/trial-features-section.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { X } from "lucide-react";
+import {
+  AddChip,
+  Checkbox,
+  EditorSection,
+  Field,
+  Input
+} from "@withpotter/ui-kit";
+import { springs } from "@withpotter/lib/motion";
+function TrialFeaturesSection({ form, setForm }) {
+  const addFeature = () => setForm((f) => ({
+    ...f,
+    features: [...f.features, { name: "", included: true }]
+  }));
+  const updateFeature = (idx, key, value) => setForm((f) => {
+    const updated = [...f.features];
+    updated[idx] = { ...updated[idx], [key]: value };
+    return { ...f, features: updated };
+  });
+  const removeFeature = (idx) => setForm((f) => ({
+    ...f,
+    features: f.features.filter((_, i) => i !== idx)
+  }));
+  return /* @__PURE__ */ jsxs(EditorSection, { title: "Trial & features", children: [
+    /* @__PURE__ */ jsx(Field, { label: "Trial days", hint: "Free days before the first charge.", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "number",
+        min: 0,
+        value: form.trialDays,
+        onChange: (e) => setForm((f) => ({ ...f, trialDays: e.target.value })),
+        onBlur: () => setForm((f) => ({
+          ...f,
+          // A negative trial is a charge in the past. The spinner offered
+          // one and the API took it.
+          trialDays: f.trialDays ? String(Math.max(0, Number(f.trialDays) || 0)) : ""
+        })),
+        placeholder: "0",
+        className: "w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: "Features", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: form.features.map((f, i) => /* @__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(
+              Checkbox,
+              {
+                checked: f.included,
+                onChange: (e) => updateFeature(i, "included", e.target.checked),
+                "aria-label": f.name ? `${f.name} included` : "Feature included"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "text",
+                value: f.name,
+                onChange: (e) => updateFeature(i, "name", e.target.value),
+                placeholder: "Feature name",
+                className: "flex-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeFeature(i),
+                "aria-label": f.name ? `Remove ${f.name}` : "Remove feature",
+                className: "text-[var(--text-muted)] hover:text-[var(--error)]",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            )
+          ]
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsx(AddChip, { onClick: addFeature, children: "Add feature" })
+    ] }) })
+  ] });
+}
+export {
+  TrialFeaturesSection
+};
+//# sourceMappingURL=trial-features-section.js.map

package/dist/plan-editor/sections/trial-features-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/trial-features-section.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion } from 'motion/react';\nimport { X } from 'lucide-react';\nimport type { PlanSectionProps } from '../types';\nimport {\n  AddChip,\n  Checkbox,\n  EditorSection,\n  Field,\n  Input,\n} from '@withpotter/ui-kit';\n\nimport { springs } from '@withpotter/lib/motion';\n\nexport function TrialFeaturesSection({ form, setForm }: PlanSectionProps) {\n  const addFeature = () =>\n    setForm((f) => ({\n      ...f,\n      features: [...f.features, { name: '', included: true }],\n    }));\n  const updateFeature = (idx: number, key: string, value: unknown) =>\n    setForm((f) => {\n      const updated = [...f.features];\n      updated[idx] = { ...updated[idx], [key]: value };\n      return { ...f, features: updated };\n    });\n  const removeFeature = (idx: number) =>\n    setForm((f) => ({\n      ...f,\n      features: f.features.filter((_, i) => i !== idx),\n    }));\n\n  return (\n    <EditorSection title=\"Trial & features\">\n      <Field label=\"Trial days\" hint=\"Free days before the first charge.\">\n        <Input\n          type=\"number\"\n          min={0}\n          value={form.trialDays}\n          onChange={(e) =>\n            setForm((f) => ({ ...f, trialDays: e.target.value }))\n          }\n          onBlur={() =>\n            setForm((f) => ({\n              ...f,\n              // A negative trial is a charge in the past. The spinner offered\n              // one and the API took it.\n              trialDays: f.trialDays\n                ? String(Math.max(0, Number(f.trialDays) || 0))\n                : '',\n            }))\n          }\n          placeholder=\"0\"\n          className=\"w-full\"\n        />\n      </Field>\n      <Field label=\"Features\">\n        <div className=\"space-y-2\">\n          <AnimatePresence initial={false}>\n            {form.features.map((f, i) => (\n              <motion.div\n                key={i}\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                <Checkbox\n                  checked={f.included}\n                  onChange={(e) =>\n                    updateFeature(i, 'included', e.target.checked)\n                  }\n                  aria-label={\n                    f.name ? `${f.name} included` : 'Feature included'\n                  }\n                />\n                <Input\n                  type=\"text\"\n                  value={f.name}\n                  onChange={(e) => updateFeature(i, 'name', e.target.value)}\n                  placeholder=\"Feature name\"\n                  className=\"flex-1\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => removeFeature(i)}\n                  aria-label={f.name ? `Remove ${f.name}` : 'Remove feature'}\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          {/* The chip is the offer, and it is the same one the product editor\n              makes. This was a bare brand-coloured text link — the only\n              \"+ Add\" in the editor drawn that way. */}\n          <AddChip onClick={addFeature}>Add feature</AddChip>\n        </div>\n      </Field>\n    </EditorSection>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1 @@
+export * from './sections/index';

package/dist/plan-editor/sections.js

@@ -0,0 +1 @@
+export * from './sections/index.js';

package/dist/plan-editor/types.d.ts

@@ -0,0 +1,7 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { PlanFormData } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';
+export interface PlanSectionProps {
+    form: PlanFormData;
+    setForm: Dispatch<SetStateAction<PlanFormData>>;
+    isEditing: boolean;
+}

package/dist/plan-editor/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/plan-editor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/plan-editor/use-plan-form.d.ts

@@ -0,0 +1,20 @@
+import { type PlanFormData } from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';
+interface UsePlanFormOptions {
+    mode: 'create' | 'edit';
+    tenantSlug: string | undefined;
+    planId: string | undefined;
+}
+export declare function usePlanForm({ mode, tenantSlug, planId }: UsePlanFormOptions): {
+    form: PlanFormData;
+    setForm: import("react").Dispatch<import("react").SetStateAction<PlanFormData>>;
+    isEditing: boolean;
+    loadingPlan: boolean;
+    loadError: string | null;
+    saving: boolean;
+    saveDisabled: boolean;
+    blocker: string | null;
+    handleSave: () => Promise<void>;
+    isDirty: boolean;
+    isSumOfItems: boolean;
+};
+export {};

package/dist/plan-editor/use-plan-form.js

@@ -0,0 +1,184 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { useEditorDirtyTracking } from "@withpotter/components/editor-shared";
+import { merchantSubscriptionsApi } from "@withpotter/lib/api/merchant-subscriptions";
+import { useTenantCurrency } from "@withpotter/hooks/use-tenant-currency";
+import {
+  EMPTY_PLAN_FORM
+} from "@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers";
+function planToForm(plan) {
+  return {
+    name: plan.name,
+    description: plan.description || "",
+    amount: String(plan.amount / 100),
+    currency: plan.currency,
+    interval: plan.interval,
+    intervalCount: String(plan.intervalCount),
+    features: plan.features || [],
+    trialDays: plan.trialDays ? String(plan.trialDays) : "",
+    pricingKind: plan.pricingKind ?? "fixed",
+    productIds: plan.includes?.productIds ?? [],
+    minItems: plan.includes?.minItems != null ? String(plan.includes.minItems) : "",
+    maxItems: plan.includes?.maxItems != null ? String(plan.includes.maxItems) : "",
+    subscriptionDiscountPercent: plan.subscriptionDiscountPercent != null ? String(plan.subscriptionDiscountPercent) : "",
+    badges: plan.badges ?? [],
+    groupId: plan.groupId ?? "",
+    groupLabel: plan.groupLabel ?? "",
+    groupRole: plan.groupRole ?? "",
+    // The id the plan already has, kept. Re-minting it from the name is how a
+    // corrected typo used to become a different benefit.
+    benefits: (plan.benefits ?? []).map((b) => ({ id: b.id, name: b.name })),
+    memberDiscountPercent: plan.memberDiscountPercent != null ? String(plan.memberDiscountPercent) : "",
+    freeServicesPerMonth: plan.freeServicesPerMonth != null ? String(plan.freeServicesPerMonth) : "",
+    priorityBooking: Boolean(plan.priorityBooking)
+  };
+}
+function usePlanForm({ mode, tenantSlug, planId }) {
+  const router = useRouter();
+  const { toast } = useToast();
+  const isEditing = mode === "edit";
+  const tenantCurrency = useTenantCurrency();
+  const [form, setForm] = useState(() => ({
+    ...EMPTY_PLAN_FORM,
+    currency: tenantCurrency
+  }));
+  const [loadingPlan, setLoadingPlan] = useState(isEditing);
+  const [loadError, setLoadError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    if (!isEditing || !tenantSlug || !planId) return;
+    let cancelled = false;
+    setLoadingPlan(true);
+    setLoadError(null);
+    merchantSubscriptionsApi.getPlan(tenantSlug, planId).then((plan) => {
+      if (!cancelled) setForm(planToForm(plan));
+    }).catch((e) => {
+      if (!cancelled)
+        setLoadError(e instanceof Error ? e.message : "Failed to load plan");
+    }).finally(() => {
+      if (!cancelled) setLoadingPlan(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isEditing, tenantSlug, planId]);
+  const { isDirty, resetDirty } = useEditorDirtyTracking([form]);
+  const isSumOfItems = form.pricingKind === "sum-of-items";
+  const minItems = Number(form.minItems) || 0;
+  const maxItems = Number(form.maxItems) || 0;
+  const blocker = !form.name ? "Give the plan a name." : !isEditing && !isSumOfItems && !form.amount ? "Set an amount to charge each cycle." : isSumOfItems && form.productIds.length === 0 ? "Pick at least one item this plan covers." : (
+    /**
+     * The API's own rule, said before the API says it.
+     *
+     * `PlanIncludesDto` requires 1 ≤ minItems ≤ maxItems ≤ the number of
+     * eligible items, and the editor was sending `undefined` for both
+     * whenever the boxes were blank — which is every sum-of-items plan a
+     * merchant did not think to fill in. That came back a 400 rendered
+     * as "Failed to save plan", naming no field.
+     */
+    isSumOfItems && (minItems < 1 || maxItems < 1) ? "Say how many items a member picks each cycle." : isSumOfItems && maxItems < minItems ? "The most items cannot be fewer than the fewest." : isSumOfItems && maxItems > form.productIds.length ? "The most items cannot exceed the items you picked." : null
+  );
+  const saveDisabled = saving || blocker !== null;
+  const handleSave = useCallback(async () => {
+    if (!tenantSlug || saveDisabled) return;
+    setSaving(true);
+    const includes = isSumOfItems ? {
+      productIds: form.productIds,
+      minItems,
+      maxItems
+    } : null;
+    const discount = form.subscriptionDiscountPercent ? Number(form.subscriptionDiscountPercent) : null;
+    const badges = form.badges.length > 0 ? form.badges : null;
+    const groupId = form.groupId || null;
+    const groupLabel = form.groupLabel || null;
+    const groupRole = form.groupRole || null;
+    const membership = {
+      benefits: form.benefits,
+      memberDiscountPercent: form.memberDiscountPercent ? Number(form.memberDiscountPercent) : void 0,
+      freeServicesPerMonth: form.freeServicesPerMonth ? Number(form.freeServicesPerMonth) : void 0,
+      priorityBooking: form.priorityBooking
+    };
+    try {
+      if (isEditing && planId) {
+        await merchantSubscriptionsApi.updatePlan(tenantSlug, planId, {
+          name: form.name,
+          description: form.description || void 0,
+          features: form.features,
+          trialDays: form.trialDays ? Number(form.trialDays) : void 0,
+          includes,
+          subscriptionDiscountPercent: discount,
+          badges,
+          groupId,
+          groupLabel,
+          groupRole,
+          ...membership
+        });
+        toast({ title: "Plan updated" });
+        resetDirty();
+      } else {
+        await merchantSubscriptionsApi.createPlan(tenantSlug, {
+          name: form.name,
+          description: form.description || void 0,
+          // Sum-of-items cycle amount is computed at subscribe time from
+          // snapshot prices; store 0 as a placeholder.
+          amount: isSumOfItems ? 0 : Math.round(Number(form.amount) * 100),
+          currency: form.currency,
+          interval: form.interval,
+          intervalCount: Number(form.intervalCount) || 1,
+          features: form.features,
+          trialDays: form.trialDays ? Number(form.trialDays) : void 0,
+          pricingKind: form.pricingKind,
+          includes,
+          subscriptionDiscountPercent: discount,
+          badges,
+          groupId,
+          groupLabel,
+          groupRole,
+          ...membership
+        });
+        toast({ title: "Plan created" });
+        resetDirty();
+        router.push("/dashboard/subscriptions/plans");
+      }
+    } catch (e) {
+      toast({
+        title: "Error",
+        description: e instanceof Error ? e.message : "Failed to save plan",
+        variant: "destructive"
+      });
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    tenantSlug,
+    saveDisabled,
+    isSumOfItems,
+    minItems,
+    maxItems,
+    form,
+    isEditing,
+    planId,
+    toast,
+    resetDirty,
+    router
+  ]);
+  return {
+    form,
+    setForm,
+    isEditing,
+    loadingPlan,
+    loadError,
+    saving,
+    saveDisabled,
+    blocker,
+    handleSave,
+    isDirty,
+    isSumOfItems
+  };
+}
+export {
+  usePlanForm
+};
+//# sourceMappingURL=use-plan-form.js.map

package/dist/plan-editor/use-plan-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plan-editor/use-plan-form.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { useEditorDirtyTracking } from '@withpotter/components/editor-shared';\nimport { merchantSubscriptionsApi } from '@withpotter/lib/api/merchant-subscriptions';\nimport type { MerchantPlan } from '@withpotter/lib/api/types';\nimport { useTenantCurrency } from '@withpotter/hooks/use-tenant-currency';\nimport {\n  EMPTY_PLAN_FORM,\n  type PlanFormData,\n} from '@withpotter/pages-finance/dashboard/(finance)/subscriptions/_components/helpers';\n\nfunction planToForm(plan: MerchantPlan): PlanFormData {\n  return {\n    name: plan.name,\n    description: plan.description || '',\n    amount: String(plan.amount / 100),\n    currency: plan.currency,\n    interval: plan.interval,\n    intervalCount: String(plan.intervalCount),\n    features: plan.features || [],\n    trialDays: plan.trialDays ? String(plan.trialDays) : '',\n    pricingKind: plan.pricingKind ?? 'fixed',\n    productIds: plan.includes?.productIds ?? [],\n    minItems:\n      plan.includes?.minItems != null ? String(plan.includes.minItems) : '',\n    maxItems:\n      plan.includes?.maxItems != null ? String(plan.includes.maxItems) : '',\n    subscriptionDiscountPercent:\n      plan.subscriptionDiscountPercent != null\n        ? String(plan.subscriptionDiscountPercent)\n        : '',\n    badges: plan.badges ?? [],\n    groupId: plan.groupId ?? '',\n    groupLabel: plan.groupLabel ?? '',\n    groupRole: plan.groupRole ?? '',\n    // The id the plan already has, kept. Re-minting it from the name is how a\n    // corrected typo used to become a different benefit.\n    benefits: (plan.benefits ?? []).map((b) => ({ id: b.id, name: b.name })),\n    memberDiscountPercent:\n      plan.memberDiscountPercent != null\n        ? String(plan.memberDiscountPercent)\n        : '',\n    freeServicesPerMonth:\n      plan.freeServicesPerMonth != null\n        ? String(plan.freeServicesPerMonth)\n        : '',\n    priorityBooking: Boolean(plan.priorityBooking),\n  };\n}\n\ninterface UsePlanFormOptions {\n  mode: 'create' | 'edit';\n  tenantSlug: string | undefined;\n  planId: string | undefined;\n}\n\nexport function usePlanForm({ mode, tenantSlug, planId }: UsePlanFormOptions) {\n  const router = useRouter();\n  const { toast } = useToast();\n  const isEditing = mode === 'edit';\n\n  /**\n   * The workspace's currency, not a per-plan choice.\n   *\n   * Settings → Regional says the currency is \"used for all pricing across your\n   * site and checkout\", and Paystack settles a subaccount in the currency it\n   * was opened in. A per-plan picker offering four of them let a merchant\n   * build a plan their account cannot settle — so the plan opens in the\n   * workspace's, and the picker only appears for a plan that already carries\n   * something else.\n   */\n  const tenantCurrency = useTenantCurrency();\n  const [form, setForm] = useState<PlanFormData>(() => ({\n    ...EMPTY_PLAN_FORM,\n    currency: tenantCurrency,\n  }));\n  const [loadingPlan, setLoadingPlan] = useState(isEditing);\n  const [loadError, setLoadError] = useState<string | null>(null);\n  const [saving, setSaving] = useState(false);\n\n  // ---- Load plan on edit -------------------------------------------------\n  useEffect(() => {\n    if (!isEditing || !tenantSlug || !planId) return;\n    let cancelled = false;\n    setLoadingPlan(true);\n    setLoadError(null);\n    merchantSubscriptionsApi\n      .getPlan(tenantSlug, planId)\n      .then((plan) => {\n        if (!cancelled) setForm(planToForm(plan));\n      })\n      .catch((e: unknown) => {\n        if (!cancelled)\n          setLoadError(e instanceof Error ? e.message : 'Failed to load plan');\n      })\n      .finally(() => {\n        if (!cancelled) setLoadingPlan(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [isEditing, tenantSlug, planId]);\n\n  const { isDirty, resetDirty } = useEditorDirtyTracking([form]);\n\n  const isSumOfItems = form.pricingKind === 'sum-of-items';\n\n  /**\n   * Why the button is dead, in the merchant's words.\n   *\n   * `saveDisabled` was a boolean and nothing else, so all three reasons — no\n   * name, no amount, a sum-of-items plan with nothing in it — presented as a\n   * greyed button with no field marked and no line of text. The blocker is\n   * derived rather than stored so it cannot disagree with the disabled state\n   * it explains.\n   */\n  const minItems = Number(form.minItems) || 0;\n  const maxItems = Number(form.maxItems) || 0;\n\n  const blocker = !form.name\n    ? 'Give the plan a name.'\n    : !isEditing && !isSumOfItems && !form.amount\n      ? 'Set an amount to charge each cycle.'\n      : isSumOfItems && form.productIds.length === 0\n        ? 'Pick at least one item this plan covers.'\n        : /**\n           * The API's own rule, said before the API says it.\n           *\n           * `PlanIncludesDto` requires 1 ≤ minItems ≤ maxItems ≤ the number of\n           * eligible items, and the editor was sending `undefined` for both\n           * whenever the boxes were blank — which is every sum-of-items plan a\n           * merchant did not think to fill in. That came back a 400 rendered\n           * as \"Failed to save plan\", naming no field.\n           */\n          isSumOfItems && (minItems < 1 || maxItems < 1)\n          ? 'Say how many items a member picks each cycle.'\n          : isSumOfItems && maxItems < minItems\n            ? 'The most items cannot be fewer than the fewest.'\n            : isSumOfItems && maxItems > form.productIds.length\n              ? 'The most items cannot exceed the items you picked.'\n              : null;\n\n  const saveDisabled = saving || blocker !== null;\n\n  const handleSave = useCallback(async () => {\n    if (!tenantSlug || saveDisabled) return;\n    setSaving(true);\n\n    const includes = isSumOfItems\n      ? {\n          productIds: form.productIds,\n          minItems,\n          maxItems,\n        }\n      : null;\n    const discount = form.subscriptionDiscountPercent\n      ? Number(form.subscriptionDiscountPercent)\n      : null;\n    const badges = form.badges.length > 0 ? form.badges : null;\n    const groupId = form.groupId || null;\n    const groupLabel = form.groupLabel || null;\n    const groupRole = form.groupRole || null;\n\n    /**\n     * What the member gets. The id is minted once, when the benefit is added,\n     * and travels with it — renaming a benefit is a rename, not a delete and\n     * an insert.\n     */\n    const membership = {\n      benefits: form.benefits,\n      memberDiscountPercent: form.memberDiscountPercent\n        ? Number(form.memberDiscountPercent)\n        : undefined,\n      freeServicesPerMonth: form.freeServicesPerMonth\n        ? Number(form.freeServicesPerMonth)\n        : undefined,\n      priorityBooking: form.priorityBooking,\n    };\n\n    try {\n      if (isEditing && planId) {\n        await merchantSubscriptionsApi.updatePlan(tenantSlug, planId, {\n          name: form.name,\n          description: form.description || undefined,\n          features: form.features,\n          trialDays: form.trialDays ? Number(form.trialDays) : undefined,\n          includes,\n          subscriptionDiscountPercent: discount,\n          badges,\n          groupId,\n          groupLabel,\n          groupRole,\n          ...membership,\n        });\n        toast({ title: 'Plan updated' });\n        resetDirty();\n      } else {\n        await merchantSubscriptionsApi.createPlan(tenantSlug, {\n          name: form.name,\n          description: form.description || undefined,\n          // Sum-of-items cycle amount is computed at subscribe time from\n          // snapshot prices; store 0 as a placeholder.\n          amount: isSumOfItems ? 0 : Math.round(Number(form.amount) * 100),\n          currency: form.currency,\n          interval: form.interval,\n          intervalCount: Number(form.intervalCount) || 1,\n          features: form.features,\n          trialDays: form.trialDays ? Number(form.trialDays) : undefined,\n          pricingKind: form.pricingKind,\n          includes,\n          subscriptionDiscountPercent: discount,\n          badges,\n          groupId,\n          groupLabel,\n          groupRole,\n          ...membership,\n        });\n        toast({ title: 'Plan created' });\n        resetDirty();\n        router.push('/dashboard/subscriptions/plans');\n      }\n    } catch (e) {\n      // The API says which rule was broken. Swallowing it for a fixed string\n      // is how a cross-field failure reads as a network problem.\n      toast({\n        title: 'Error',\n        description: e instanceof Error ? e.message : 'Failed to save plan',\n        variant: 'destructive',\n      });\n    } finally {\n      setSaving(false);\n    }\n  }, [\n    tenantSlug,\n    saveDisabled,\n    isSumOfItems,\n    minItems,\n    maxItems,\n    form,\n    isEditing,\n    planId,\n    toast,\n    resetDirty,\n    router,\n  ]);\n\n  return {\n    form,\n    setForm,\n    isEditing,\n    loadingPlan,\n    loadError,\n    saving,\n    saveDisabled,\n    blocker,\n    handleSave,\n    isDirty,\n    isSumOfItems,\n  };\n}\n"],"mappings":"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","names":[]}