@meterbox/customer-portal 0.1.0 → 0.1.1

package/README.md

@@ -5,7 +5,10 @@ pages (Account, Plans, Credits), composed from the widgets shipped in
 [`@meterbox/react`](https://www.npmjs.com/package/@meterbox/react). All data is
 fetched via the `/v1/customer-portal/*` endpoints using a short-lived
 customer-scoped JWT that your backend mints with `POST /v1/tokens/:id`, so no
-API key ever reaches the browser.
+API key ever reaches the browser. The portal works from any origin (the
+endpoints answer CORS for any site), and a token only works in the
+environment it was minted in: mint with a sandbox API key to show sandbox
+data.
 
 ```bash
 npm install @meterbox/customer-portal react react-dom
@@ -35,7 +38,8 @@ function handlePlanSelect(plan, billingInterval) {
 ## Pages
 
 - **Account**: name, email, current plan, status (`GET /v1/customer-portal/:id/me`)
-- **Plans**: `<PricingTable>` (monthly/annual toggle included) + inline
+- **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"
   / "Schedule for end of period" actions, so picking a plan actually applies
   it, not just previews it. `onPlanSelect` fires with `(plan,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meterbox/customer-portal",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Drop-in multi-page React customer portal for Meterbox: Account, Plans, Credits. Built on @meterbox/react.",
   "license": "MIT",
   "homepage": "https://meterbox.ai",

package/src/pages/PlansPage.js

@@ -1,6 +1,7 @@
 /**
- * <PlansPage /> — fetches the public plan catalog + the customer's current
- * plan, renders `<PricingTable>`; on plan pick, renders an inline
+ * <PlansPage /> — fetches the plans this customer can pick
+ * (`GET /v1/customer-portal/:id/plans`: published plans, display fields only)
+ * + the customer's current plan, renders `<PricingTable>`; on plan pick, renders an inline
  * `<PlanChangeCard>` for that plan — the proration preview plus "Change
  * now" / "Schedule for end of period" actions, so picking a plan is no
  * longer a dead end the host app has to build its own apply flow for.
@@ -67,7 +68,14 @@ function PlansPage({
     let cancelled = false;
     setLoading(true);
     setError(null);
-    Promise.all([fetchJson(`${root}/v1/plans`, {}, fetcher), fetchMe()])
+    Promise.all([
+      fetchJson(
+        `${root}/v1/customer-portal/${encodeURIComponent(customerId)}/plans`,
+        { Authorization: `Bearer ${customerToken}` },
+        fetcher,
+      ),
+      fetchMe(),
+    ])
       .then(([catalog, me]) => {
         if (cancelled) return;
         setPlans(catalog.plans || []);