@growth-operations/ui-shared 1.13.0 → 1.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.13.0",
+  "version": "1.13.2",
   "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
   "license": "MIT",
   "private": false,

package/src/billing/BillingTab.jsx

@@ -358,8 +358,13 @@ function CreditsBilling({ context, state, appKey, openIframe = null }) {
   // current tier and disable everything ranked below it ("Talk to sales to
   // switch") — the backend independently re-validates the same upgrade
   // direction (start_upgrade_redirect's tier_order check), so this is safe
-  // even if currentOrder were ever wrong. Downgrade/cancel/payment method/
-  // invoices still go through the Stripe Customer Portal link below.
+  // even if currentOrder were ever wrong. Downgrade is intentionally NOT
+  // self-serve (policy, not a Stripe portal gap): PlanCard's own
+  // "Talk to sales to switch" is the one and only downgrade path. Cancel /
+  // payment method / invoices still go through the Stripe Customer Portal
+  // link below — the footnote must not imply Manage subscription can also
+  // downgrade (some apps' Stripe portal config has subscription_update
+  // disabled anyway, so it silently couldn't even if we wanted it to).
   if (onPaidPlan) {
     const plans = state?.plans ?? [];
     const currentOrder = plans.find((p) => p.current)?.tier_order;
@@ -388,7 +393,7 @@ function CreditsBilling({ context, state, appKey, openIframe = null }) {
             endpoint="upgrade/start"
             ctaLabel="Upgrade to"
             heading="Your plan"
-            footnote="Upgrade any time — the new tier applies immediately with prorated billing. To move to a lower tier, cancel, or update your payment method, use Manage subscription above."
+            footnote="Upgrade any time — the new tier applies immediately with prorated billing. To move to a lower tier, contact us. Use Manage subscription above to cancel or update your payment method."
             openIframe={openIframe}
           />
         ) : (

package/src/home/CreditMeter.jsx

@@ -24,14 +24,31 @@ export function CreditMeter({ entitlement, creditMeter }) {
   const used = meter?.used ?? ent?.used ?? 0;
   const remaining = meter?.remaining ?? ent?.remaining ?? Math.max(granted - used, 0);
 
+  // A paid plan is NEVER blocked — exceeding the included bucket is overage,
+  // not depletion (action_allowed_by_portal/consume_credits never gate a
+  // paid plan; see common.entitlements.credits.to_entitlement). So `depleted`
+  // must not fall back to raw `remaining <= 0` on a paid plan the way it does
+  // on the free tier — that raw check is exactly what showed a paying,
+  // already-subscribed customer a blocking "Depleted"/"out of credits" panel
+  // (confirmed live 2026-09-02). `over_included` is the distinct paid-plan
+  // signal for "you've used your included credits, extra usage is overage".
+  const onPaidPlan = !!ent?.plan;
   const lowThreshold = ent?.low_threshold ?? 0;
-  const depleted = ent?.depleted === true || remaining <= 0;
-  const low = !depleted && remaining <= lowThreshold;
+  const depleted = !onPaidPlan && (ent?.depleted === true || remaining <= 0);
+  const overIncluded =
+    onPaidPlan && (ent?.over_included === true || used > granted);
+  const low = !depleted && !overIncluded && remaining <= lowThreshold;
 
-  // healthy green / low yellow / depleted red.
-  const variant = depleted ? "error" : low ? "warning" : "success";
-  const tagVariant = depleted ? "danger" : low ? "warning" : "success";
-  const tagLabel = depleted ? "Depleted" : low ? "Running low" : "Healthy";
+  // healthy green / low or overage yellow / depleted red.
+  const variant = depleted ? "error" : overIncluded || low ? "warning" : "success";
+  const tagVariant = depleted ? "danger" : overIncluded || low ? "warning" : "success";
+  const tagLabel = depleted
+    ? "Depleted"
+    : overIncluded
+      ? "Over included"
+      : low
+        ? "Running low"
+        : "Healthy";
 
   const grantDaysLeft = ent?.grant_expires_at ? daysUntil(ent.grant_expires_at) : null;
 
@@ -65,15 +82,23 @@ export function CreditMeter({ entitlement, creditMeter }) {
           </Text>
         )}
 
-        {(depleted || low) && (
+        {(depleted || overIncluded || low) && (
           <Alert
-            title={depleted ? "You're out of credits" : "Running low on credits"}
+            title={
+              depleted
+                ? "You're out of credits"
+                : overIncluded
+                  ? "You've used your included credits"
+                  : "Running low on credits"
+            }
             variant={variant}
           >
             <Text>
               {depleted
                 ? "Pick a plan or buy more credits to keep going."
-                : "You're getting close to your limit — pick a plan to top up."}
+                : overIncluded
+                  ? "Extra usage this period is billed as overage at your plan's per-credit rate."
+                  : "You're getting close to your limit — pick a plan to top up."}
             </Text>
           </Alert>
         )}