@meterbox/customer-portal 0.1.1 → 0.1.3

package/README.md

@@ -37,7 +37,14 @@ function handlePlanSelect(plan, billingInterval) {
 
 ## Pages
 
-- **Account**: name, email, current plan, status (`GET /v1/customer-portal/:id/me`)
+- **Account**: name, email, current plan, status (`GET /v1/customer-portal/:id/me`),
+  and **Cancel subscription**: the customer gives a reason, sees your plan's
+  retention offers (a discount, a longer trial, or a downgrade) and either takes
+  one or cancels at the end of the period, keeping access until then
+  (`/v1/customer-portal/:id/cancellation`). Also exported on its own as
+  `<CancelSubscription>`. Each step reaches you as a webhook
+  (`customer.cancel.initiated`, `customer.win-back.accepted`,
+  `customer.cancel.confirmed`).
 - **Plans**: the published plans (`GET /v1/customer-portal/:id/plans`) in a
   `<PricingTable>` (monthly/annual toggle included) + inline
   `<PlanChangeCard>` for a monthly pick: proration preview plus "Change now"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meterbox/customer-portal",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Drop-in multi-page React customer portal for Meterbox: Account, Plans, Credits. Built on @meterbox/react.",
   "license": "MIT",
   "homepage": "https://meterbox.ai",
@@ -17,7 +17,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@meterbox/react": "0.1.0"
+    "@meterbox/react": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/CancelSubscription.js

@@ -0,0 +1,207 @@
+/**
+ * <CancelSubscription /> — the customer cancels from the portal: they give a
+ * reason, see the plan's retention offers, and either take one and stay or
+ * cancel at the end of the period (keeping access until then). Uses the
+ * /v1/customer-portal/:id/cancellation endpoints with the customer token.
+ */
+
+const React = require("react");
+
+const REASONS = {
+  too_expensive: "It's too expensive",
+  missing_features: "It's missing features I need",
+  switched_to_competitor: "I'm switching to another product",
+  not_using: "I'm not using it enough",
+  other: "Something else",
+};
+
+const styles = {
+  box: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    color: "#111",
+    border: "1px solid #e5e7eb",
+    borderRadius: 12,
+    padding: 16,
+    background: "#fff",
+    display: "grid",
+    gap: 10,
+    maxWidth: 480,
+    fontSize: 14,
+  },
+  row: { display: "flex", gap: 8, flexWrap: "wrap" },
+  button: {
+    padding: "6px 12px",
+    borderRadius: 8,
+    border: "1px solid #d1d5db",
+    background: "#fff",
+    cursor: "pointer",
+    fontSize: 13,
+  },
+  primary: { background: "#111", color: "#fff", borderColor: "#111" },
+  danger: { color: "#b91c1c", borderColor: "#fecaca" },
+  offer: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, display: "grid", gap: 6 },
+  error: { color: "#dc2626" },
+  muted: { opacity: 0.7 },
+};
+
+function formatDate(iso) {
+  return iso ? String(iso).slice(0, 10) : "the end of the period";
+}
+
+function button(label, onClick, extra = {}, disabled = false) {
+  return React.createElement(
+    "button",
+    { type: "button", onClick, disabled, style: { ...styles.button, ...extra } },
+    label,
+  );
+}
+
+function CancelSubscription({
+  baseUrl,
+  customerId,
+  customerToken,
+  fetch: fetchImpl,
+  status,
+  cancelAt,
+  onChange,
+}) {
+  const [step, setStep] = React.useState("idle"); // idle → reason → offers → done
+  const [reason, setReason] = React.useState("too_expensive");
+  const [detail, setDetail] = React.useState("");
+  const [offers, setOffers] = React.useState([]);
+  const [done, setDone] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+
+  async function call(method, sub, body) {
+    const url = `${String(baseUrl).replace(/\/+$/, "")}/v1/customer-portal/${encodeURIComponent(
+      customerId,
+    )}/cancellation${sub}`;
+    const res = await (fetchImpl || globalThis.fetch)(url, {
+      method,
+      headers: { Authorization: `Bearer ${customerToken}`, "Content-Type": "application/json" },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const json = res.status === 204 ? null : await res.json();
+    if (!res.ok) throw new Error(json?.error || `HTTP ${res.status}`);
+    return json;
+  }
+
+  async function run(fn) {
+    setError(null);
+    setBusy(true);
+    try {
+      await fn();
+    } catch (err) {
+      setError(err.message || "Something went wrong.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const start = () =>
+    run(async () => {
+      const r = await call("POST", "", {
+        reason_code: reason,
+        ...(detail.trim() ? { reason_text: detail.trim() } : {}),
+      });
+      setOffers(r.offers || []);
+      setStep("offers");
+    });
+  const accept = (offer) =>
+    run(async () => {
+      await call("POST", "/accept-offer", { offer_id: offer.id });
+      setDone(`Done: ${offer.label}. Your subscription continues.`);
+      setStep("done");
+      if (onChange) onChange();
+    });
+  const confirm = () =>
+    run(async () => {
+      const r = await call("POST", "/confirm");
+      setDone(`Your subscription ends on ${formatDate(r.cancel_at)}. You keep access until then.`);
+      setStep("done");
+      if (onChange) onChange();
+    });
+  const keep = () =>
+    run(async () => {
+      if (step === "offers") await call("DELETE", "");
+      setStep("idle");
+    });
+
+  if (status === "cancelling") {
+    return React.createElement(
+      "div",
+      { style: styles.box },
+      `Your subscription ends on ${formatDate(cancelAt)}. You keep access until then.`,
+    );
+  }
+  if (status === "cancelled") return null;
+
+  let content;
+  if (step === "idle") {
+    content = button("Cancel subscription", () => setStep("reason"), styles.danger);
+  } else if (step === "reason") {
+    content = React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("strong", null, "Why are you cancelling?"),
+      React.createElement(
+        "select",
+        {
+          value: reason,
+          onChange: (e) => setReason(e.target.value),
+          "aria-label": "Reason for cancelling",
+        },
+        Object.entries(REASONS).map(([value, label]) =>
+          React.createElement("option", { key: value, value }, label),
+        ),
+      ),
+      React.createElement("textarea", {
+        value: detail,
+        onChange: (e) => setDetail(e.target.value),
+        placeholder: "Anything else we should know? (optional)",
+        "aria-label": "More about why",
+        rows: 3,
+      }),
+      React.createElement(
+        "div",
+        { style: styles.row },
+        button("Continue", start, styles.primary, busy),
+        button("Keep my subscription", () => setStep("idle"), {}, busy),
+      ),
+    );
+  } else if (step === "offers") {
+    content = React.createElement(
+      React.Fragment,
+      null,
+      offers.length > 0 &&
+        React.createElement("strong", null, "Before you go, would one of these help?"),
+      ...offers.map((offer) =>
+        React.createElement(
+          "div",
+          { key: offer.id, style: styles.offer },
+          React.createElement("span", null, offer.label),
+          button("Accept", () => accept(offer), styles.primary, busy),
+        ),
+      ),
+      React.createElement(
+        "div",
+        { style: styles.row },
+        button("Cancel at the end of the period", confirm, styles.danger, busy),
+        button("Keep my subscription", keep, {}, busy),
+      ),
+    );
+  } else {
+    content = React.createElement("span", { role: "status" }, done);
+  }
+
+  return React.createElement(
+    "div",
+    { className: "meterbox-cancel-subscription", style: styles.box },
+    content,
+    error && React.createElement("span", { role: "alert", style: styles.error }, error),
+  );
+}
+
+CancelSubscription.REASONS = REASONS;
+module.exports = CancelSubscription;

package/src/index.js

@@ -10,6 +10,7 @@ const CustomerPortal = require("./CustomerPortal");
 const AccountPage = require("./pages/AccountPage");
 const PlansPage = require("./pages/PlansPage");
 const CreditsPage = require("./pages/CreditsPage");
+const CancelSubscription = require("./CancelSubscription");
 
 module.exports = CustomerPortal;
 module.exports.default = CustomerPortal;
@@ -17,3 +18,4 @@ module.exports.CustomerPortal = CustomerPortal;
 module.exports.AccountPage = AccountPage;
 module.exports.PlansPage = PlansPage;
 module.exports.CreditsPage = CreditsPage;
+module.exports.CancelSubscription = CancelSubscription;

package/src/pages/AccountPage.js

@@ -4,6 +4,7 @@
  */
 
 const React = require("react");
+const CancelSubscription = require("../CancelSubscription");
 
 const styles = {
   card: {
@@ -53,6 +54,9 @@ function AccountPage({ baseUrl, customerId, customerToken, fetch: fetchImpl }) {
   const [me, setMe] = React.useState(null);
   const [error, setError] = React.useState(null);
   const [loading, setLoading] = React.useState(true);
+  // Bumped after a cancellation step, to show the new status.
+  const [version, setVersion] = React.useState(0);
+  const reload = React.useCallback(() => setVersion((v) => v + 1), []);
 
   React.useEffect(() => {
     let cancelled = false;
@@ -79,7 +83,7 @@ function AccountPage({ baseUrl, customerId, customerToken, fetch: fetchImpl }) {
     return () => {
       cancelled = true;
     };
-  }, [baseUrl, customerId, customerToken, fetchImpl]);
+  }, [baseUrl, customerId, customerToken, fetchImpl, version]);
 
   if (loading) {
     return React.createElement(
@@ -97,10 +101,8 @@ function AccountPage({ baseUrl, customerId, customerToken, fetch: fetchImpl }) {
   }
   if (!me) return null;
   const statusPill =
-    me.status === "active"
-      ? styles.pill
-      : { ...styles.pill, ...styles.pillInactive };
-  return React.createElement(
+    me.status === "active" ? styles.pill : { ...styles.pill, ...styles.pillInactive };
+  const account = React.createElement(
     "div",
     { className: "meterbox-account-page", style: styles.card },
     me.name &&
@@ -140,6 +142,27 @@ function AccountPage({ baseUrl, customerId, customerToken, fetch: fetchImpl }) {
           String(me.current_period_end).slice(0, 10),
         ),
       ),
+    me.cancel_at &&
+      React.createElement(
+        "div",
+        { style: styles.row },
+        React.createElement("span", { style: styles.label }, "Ends on"),
+        React.createElement("span", { style: styles.value }, String(me.cancel_at).slice(0, 10)),
+      ),
+  );
+  return React.createElement(
+    "div",
+    { style: { display: "grid", gap: 12 } },
+    account,
+    React.createElement(CancelSubscription, {
+      baseUrl,
+      customerId,
+      customerToken,
+      fetch: fetchImpl,
+      status: me.status,
+      cancelAt: me.cancel_at,
+      onChange: reload,
+    }),
   );
 }