@meterbox/customer-portal 0.1.12 → 0.1.13

package/package.json

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

package/src/pages/PlansPage.js

@@ -117,6 +117,7 @@ function PlansPage({
       });
   }
 
+  const pickedPlan = (plans || []).find((p) => p.id === picked);
   if (loading) {
     return React.createElement("div", { style: { opacity: 0.6 } }, t("plans.loading"));
   }
@@ -142,18 +143,29 @@ function PlansPage({
     // currentPlanId here would unmount the panel — and its just-rendered
     // success message — the instant a successful change updates
     // currentPlanId to match what was just picked.
-    picked &&
-      (pickedInterval === "annual"
-        ? React.createElement("p", { style: { fontSize: 13, opacity: 0.7 } }, t("plans.annualNote"))
-        : React.createElement(PlanChangeCard, {
-            baseUrl: root,
-            customerId,
-            customerToken,
-            planId: picked,
-            scheduledChange,
-            fetch: fetchImpl,
-            onChanged,
-          })),
+    pickedPlan && pickedPlan.stripe_price_monthly_usd == null
+      ? // No fixed price: not self-serve, so no change to preview.
+        React.createElement(
+          "p",
+          { style: { fontSize: 13, opacity: 0.7 } },
+          t("plans.noFixedPrice", { plan: pickedPlan.name || pickedPlan.id }),
+        )
+      : picked &&
+          (pickedInterval === "annual"
+            ? React.createElement(
+                "p",
+                { style: { fontSize: 13, opacity: 0.7 } },
+                t("plans.annualNote"),
+              )
+            : React.createElement(PlanChangeCard, {
+                baseUrl: root,
+                customerId,
+                customerToken,
+                planId: picked,
+                scheduledChange,
+                fetch: fetchImpl,
+                onChanged,
+              })),
   );
 }