@meterbox/customer-portal 0.1.7 → 0.1.8

package/README.md

@@ -45,6 +45,8 @@ 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.7",
+  "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.5"
+    "@meterbox/react": "0.1.6"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/pages/AccountPage.js

@@ -1,11 +1,13 @@
 /**
  * <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, theme } = require("@meterbox/react");
+const { InvoiceHistory, BillingDetailsButton, theme } = require("@meterbox/react");
 const CancelSubscription = require("../CancelSubscription");
 
 const styles = {
@@ -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",