@meterbox/customer-portal 0.1.6 → 0.1.8

package/README.md

@@ -35,9 +35,18 @@ function handlePlanSelect(plan, billingInterval) {
 />
 ```
 
+## Branding
+
+The portal takes your branding from Settings → Branding
+(`GET /v1/customer-portal/:id/branding`): your logo and company name in its
+header, and your colors, font and buttons on every page. Pass `branding` to
+override it.
+
 ## Pages
 
 - **Account**: name, email, current plan, status (`GET /v1/customer-portal/:id/me`),
+  a button to update the payment method and billing details on Stripe's own
+  portal (`<BillingDetailsButton>`, when available),
   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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meterbox/customer-portal",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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.4"
+    "@meterbox/react": "0.1.6"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/CancelSubscription.js

@@ -6,6 +6,7 @@
  */
 
 const React = require("react");
+const { theme } = require("@meterbox/react");
 
 const REASONS = {
   too_expensive: "It's too expensive",
@@ -17,12 +18,12 @@ const REASONS = {
 
 const styles = {
   box: {
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    color: "#111",
+    fontFamily: theme.font,
+    color: theme.text,
     border: "1px solid #e5e7eb",
     borderRadius: 12,
     padding: 16,
-    background: "#fff",
+    background: theme.card,
     display: "grid",
     gap: 10,
     maxWidth: 480,
@@ -31,13 +32,14 @@ const styles = {
   row: { display: "flex", gap: 8, flexWrap: "wrap" },
   button: {
     padding: "6px 12px",
-    borderRadius: 8,
+    borderRadius: theme.radius(8),
     border: "1px solid #d1d5db",
-    background: "#fff",
+    background: theme.card,
+    color: theme.text,
     cursor: "pointer",
     fontSize: 13,
   },
-  primary: { background: "#111", color: "#fff", borderColor: "#111" },
+  primary: theme.button,
   danger: { color: "#b91c1c", borderColor: "#fecaca" },
   offer: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, display: "grid", gap: 6 },
   error: { color: "#dc2626" },

package/src/CustomerPortal.js

@@ -12,14 +12,20 @@
  *     threshold={10}                 // (optional) low-balance trigger
  *     currency="USD"                 // (optional)
  *     granularity="day"              // (optional)
+ *     branding={{ accent_color }}    // (optional) instead of the tenant's
  *   />
  *
+ * Branded with the tenant's branding (Settings → Branding, fetched from
+ * GET /v1/customer-portal/:id/branding): logo and company name in the
+ * header, and every page and component themed through <BrandingProvider>.
+ *
  * No router dependency — page state is internal. Hosts that want
  * browser-history nav can drive `initialPage` from their own router and
  * observe `onPageChange`.
  */
 
 const React = require("react");
+const { BrandingProvider, logoUrl, theme } = require("@meterbox/react");
 const AccountPage = require("./pages/AccountPage");
 const PlansPage = require("./pages/PlansPage");
 const CreditsPage = require("./pages/CreditsPage");
@@ -29,8 +35,8 @@ const LABELS = { account: "Account", plans: "Plans", credits: "Credits" };
 
 const styles = {
   shell: {
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    color: "#111",
+    fontFamily: theme.font,
+    color: theme.text,
     display: "grid",
     gap: 16,
     maxWidth: 760,
@@ -52,11 +58,26 @@ const styles = {
     color: "#374151",
   },
   tabActive: {
-    color: "#5045e8",
-    borderBottom: "2px solid #5045e8",
+    color: theme.accent,
+    borderBottom: `2px solid ${theme.accent}`,
   },
+  header: { display: "flex", alignItems: "center", gap: 10 },
+  logo: { maxHeight: 32, maxWidth: 160 },
+  company: { fontSize: 16, fontWeight: 700 },
 };
 
+// The tenant's branding and company name; none (unbranded) if it can't load.
+async function fetchBranding({ baseUrl, customerId, customerToken, fetchImpl }) {
+  const url = `${String(baseUrl).replace(/\/+$/, "")}/v1/customer-portal/${encodeURIComponent(
+    customerId,
+  )}/branding`;
+  const res = await fetchImpl(url, {
+    method: "GET",
+    headers: { Authorization: `Bearer ${customerToken}` },
+  });
+  return res.ok ? res.json() : null;
+}
+
 function CustomerPortal({
   baseUrl,
   customerId,
@@ -68,10 +89,27 @@ function CustomerPortal({
   threshold,
   currency,
   granularity,
+  branding,
   fetch: fetchImpl,
 }) {
   const initial = PAGES.includes(initialPage) ? initialPage : "account";
   const [page, setPage] = React.useState(initial);
+  const [tenant, setTenant] = React.useState(null);
+
+  React.useEffect(() => {
+    let alive = true;
+    fetchBranding({ baseUrl, customerId, customerToken, fetchImpl: fetchImpl || globalThis.fetch })
+      .then((body) => {
+        if (alive) setTenant(body);
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [baseUrl, customerId, customerToken, fetchImpl]);
+  const brand = branding || tenant?.branding || null;
+  const logo = logoUrl(brand);
+  const companyName = tenant?.company_name || null;
 
   // Honor external nav changes via initialPage prop.
   React.useEffect(() => {
@@ -100,27 +138,39 @@ function CustomerPortal({
   }
 
   return React.createElement(
-    "div",
-    { className: "meterbox-customer-portal", style: styles.shell },
+    BrandingProvider,
+    { branding: brand },
     React.createElement(
-      "nav",
-      { style: styles.nav, role: "tablist" },
-      PAGES.map((p) =>
+      "div",
+      { className: "meterbox-customer-portal", style: styles.shell },
+      (logo || companyName) &&
         React.createElement(
-          "button",
-          {
-            key: p,
-            type: "button",
-            role: "tab",
-            "aria-selected": page === p,
-            style: page === p ? { ...styles.tab, ...styles.tabActive } : styles.tab,
-            onClick: () => go(p),
-          },
-          LABELS[p],
+          "header",
+          { style: styles.header },
+          logo &&
+            React.createElement("img", { src: logo, alt: companyName || "", style: styles.logo }),
+          companyName && React.createElement("span", { style: styles.company }, companyName),
+        ),
+      React.createElement(
+        "nav",
+        { style: styles.nav, role: "tablist" },
+        PAGES.map((p) =>
+          React.createElement(
+            "button",
+            {
+              key: p,
+              type: "button",
+              role: "tab",
+              "aria-selected": page === p,
+              style: page === p ? { ...styles.tab, ...styles.tabActive } : styles.tab,
+              onClick: () => go(p),
+            },
+            LABELS[p],
+          ),
         ),
       ),
+      body,
     ),
-    body,
   );
 }
 

package/src/pages/AccountPage.js

@@ -1,21 +1,23 @@
 /**
  * <AccountPage /> — fetches GET /v1/customer-portal/:id/me and renders the
- * customer's own profile + current plan, the way to cancel, and their
- * invoices with PDFs (`<InvoiceHistory>` from @meterbox/react).
+ * customer's own profile + current plan, a button to update their payment
+ * method and billing details on Stripe's portal (when available), the way to
+ * cancel, and their invoices with PDFs (`<InvoiceHistory>` from
+ * @meterbox/react).
  */
 
 const React = require("react");
-const { InvoiceHistory } = require("@meterbox/react");
+const { InvoiceHistory, BillingDetailsButton, theme } = require("@meterbox/react");
 const CancelSubscription = require("../CancelSubscription");
 
 const styles = {
   card: {
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    color: "#111",
+    fontFamily: theme.font,
+    color: theme.text,
     border: "1px solid #e5e7eb",
     borderRadius: 12,
     padding: 20,
-    background: "#fff",
+    background: theme.card,
     display: "grid",
     gap: 12,
     maxWidth: 480,
@@ -56,6 +58,7 @@ 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);
+  const [billingError, setBillingError] = React.useState(null);
   // Bumped after a cancellation step, to show the new status.
   const [version, setVersion] = React.useState(0);
   const reload = React.useCallback(() => setVersion((v) => v + 1), []);
@@ -151,6 +154,16 @@ function AccountPage({ baseUrl, customerId, customerToken, fetch: fetchImpl }) {
         React.createElement("span", { style: styles.label }, "Ends on"),
         React.createElement("span", { style: styles.value }, String(me.cancel_at).slice(0, 10)),
       ),
+    me.billing_details_available &&
+      React.createElement(BillingDetailsButton, {
+        baseUrl,
+        customerId,
+        customerToken,
+        fetch: fetchImpl,
+        onError: (err) => setBillingError(err.message),
+      }),
+    billingError &&
+      React.createElement("span", { role: "alert", style: { color: "#dc2626" } }, billingError),
   );
   return React.createElement(
     "div",