@meterbox/customer-portal 0.1.10 → 0.1.12

package/README.md

@@ -26,7 +26,6 @@ function handlePlanSelect(plan, billingInterval) {
 }
 
 <CustomerPortal
-  baseUrl="https://meterbox.ai"
   customerId="cus_42"
   customerToken={customerJwt}
   initialPage="account"
@@ -36,6 +35,9 @@ function handlePlanSelect(plan, billingInterval) {
 />
 ```
 
+It calls `https://meterbox.ai`. To point it elsewhere, wrap it in
+`<MeterboxProvider baseUrl="…">` from `@meterbox/react`, or pass it `baseUrl`.
+
 ## Deep links
 
 `initialAction` opens the portal on an action rather than a page, for links

package/package.json

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

package/src/CancelSubscription.js

@@ -9,7 +9,7 @@
  */
 
 const React = require("react");
-const { theme, useI18n } = require("@meterbox/react");
+const { theme, useI18n, useBaseUrl } = require("@meterbox/react");
 
 const REASONS = {
   too_expensive: "It's too expensive",
@@ -58,7 +58,7 @@ function button(label, onClick, extra = {}, disabled = false) {
 }
 
 function CancelSubscription({
-  baseUrl,
+  baseUrl: baseUrlProp,
   customerId,
   customerToken,
   fetch: fetchImpl,
@@ -67,6 +67,7 @@ function CancelSubscription({
   initialStep = "idle",
   onChange,
 }) {
+  const baseUrl = useBaseUrl(baseUrlProp);
   const { t, date } = useI18n();
   // idle → reason → offers → done
   const [step, setStep] = React.useState(initialStep === "reason" ? "reason" : "idle");

package/src/CustomerPortal.js

@@ -2,7 +2,6 @@
  * <CustomerPortal /> — drop-in multi-page portal.
  *
  *   <CustomerPortal
- *     baseUrl="https://meterbox.ai"
  *     customerId="cus_42"
  *     customerToken={jwt}
  *     initialPage="account"          // "account" (default) | "plans" | "credits"
@@ -39,7 +38,14 @@
  */
 
 const React = require("react");
-const { BrandingProvider, LocaleProvider, useI18n, logoUrl, theme } = require("@meterbox/react");
+const {
+  BrandingProvider,
+  LocaleProvider,
+  useI18n,
+  useBaseUrl,
+  logoUrl,
+  theme,
+} = require("@meterbox/react");
 const AccountPage = require("./pages/AccountPage");
 const PlansPage = require("./pages/PlansPage");
 const CreditsPage = require("./pages/CreditsPage");
@@ -116,7 +122,7 @@ function Tabs({ page, go }) {
 }
 
 function CustomerPortal({
-  baseUrl,
+  baseUrl: baseUrlProp,
   customerId,
   customerToken,
   initialPage = "account",
@@ -132,6 +138,7 @@ function CustomerPortal({
   branding,
   fetch: fetchImpl,
 }) {
+  const baseUrl = useBaseUrl(baseUrlProp);
   const actionType = ACTION_PAGES[initialAction?.type] ? initialAction.type : null;
   const actionPlanId = initialAction?.planId || null;
   const [action, setAction] = React.useState(actionType);

package/src/pages/AccountPage.js

@@ -8,7 +8,13 @@
  */
 
 const React = require("react");
-const { InvoiceHistory, BillingDetailsButton, theme, useI18n } = require("@meterbox/react");
+const {
+  InvoiceHistory,
+  BillingDetailsButton,
+  theme,
+  useI18n,
+  useBaseUrl,
+} = require("@meterbox/react");
 const CancelSubscription = require("../CancelSubscription");
 
 const styles = {
@@ -55,7 +61,8 @@ async function fetchMe({ baseUrl, customerId, customerToken, fetchImpl }) {
   return json;
 }
 
-function AccountPage({ baseUrl, customerId, customerToken, startCancel, fetch: fetchImpl }) {
+function AccountPage({ baseUrl: baseUrlProp, customerId, customerToken, startCancel, fetch: fetchImpl }) {
+  const baseUrl = useBaseUrl(baseUrlProp);
   const { t, date } = useI18n();
   const [me, setMe] = React.useState(null);
   const [error, setError] = React.useState(null);

package/src/pages/PlansPage.js

@@ -22,7 +22,7 @@
  */
 
 const React = require("react");
-const { PricingTable, PlanChangeCard, useI18n } = require("@meterbox/react");
+const { PricingTable, PlanChangeCard, useI18n, useBaseUrl } = require("@meterbox/react");
 
 const styles = {
   wrap: { display: "grid", gap: 16 },
@@ -40,7 +40,7 @@ async function fetchJson(url, headers, fetchImpl) {
 }
 
 function PlansPage({
-  baseUrl,
+  baseUrl: baseUrlProp,
   customerId,
   customerToken,
   currency = "USD",
@@ -50,7 +50,7 @@ function PlansPage({
 }) {
   const { t } = useI18n();
   const fetcher = fetchImpl || globalThis.fetch;
-  const root = String(baseUrl).replace(/\/+$/, "");
+  const root = useBaseUrl(baseUrlProp);
   const [plans, setPlans] = React.useState(null);
   const [currentPlanId, setCurrentPlanId] = React.useState(null);
   const [scheduledChange, setScheduledChange] = React.useState(null);
@@ -146,7 +146,7 @@ function PlansPage({
       (pickedInterval === "annual"
         ? React.createElement("p", { style: { fontSize: 13, opacity: 0.7 } }, t("plans.annualNote"))
         : React.createElement(PlanChangeCard, {
-            baseUrl,
+            baseUrl: root,
             customerId,
             customerToken,
             planId: picked,