@growth-operations/ui-shared 1.12.3 → 1.13.0

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -350,13 +350,20 @@ function CreditsBilling({ context, state, appKey, openIframe = null }) {
         `&return_url=${encodeURIComponent(returnUrl)}`
       : null;
 
-  // PAID: do NOT show the plan picker. The picker's "Choose" starts a NEW Stripe
-  // Checkout subscription — clicking another tier would create a SECOND
-  // subscription (double-bill), not switch in place. Plan changes (upgrade/
-  // downgrade/cancel) go through the Stripe Customer Portal, which swaps the
-  // subscription item with proration. So on a paid plan we show the meter + a
-  // "Manage subscription" portal link only. (Matches toast/sparkfly.)
+  // PAID: an UPGRADE-ONLY picker, same trial-archetype pattern as
+  // TrialSubscriptionBilling above — higher tiers are one-click in-app via
+  // /v1/billing/upgrade/start, which swaps the EXISTING subscription's item
+  // in place (never a new Checkout session), so a click here can never
+  // double-bill. currentOrder (this tier's rank) makes PlanCard mark the
+  // 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.
   if (onPaidPlan) {
+    const plans = state?.plans ?? [];
+    const currentOrder = plans.find((p) => p.current)?.tier_order;
+    const showPicker = currentOrder != null && plans.length > 0;
     return (
       <Flex direction="column" gap="medium">
         <CreditMeter
@@ -372,10 +379,24 @@ function CreditsBilling({ context, state, appKey, openIframe = null }) {
         >
           {portalStartUrl ? "Manage subscription" : "Preparing billing…"}
         </LoadingButton>
-        <Text format={{ fontStyle: "italic" }}>
-          Change or cancel your plan in Stripe — billing is managed across all
-          Growth Operations apps.
-        </Text>
+        {showPicker ? (
+          <PlanGrid
+            context={context}
+            state={state}
+            appKey={appKey}
+            currentOrder={currentOrder}
+            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."
+            openIframe={openIframe}
+          />
+        ) : (
+          <Text format={{ fontStyle: "italic" }}>
+            Change or cancel your plan in Stripe — billing is managed across all
+            Growth Operations apps.
+          </Text>
+        )}
       </Flex>
     );
   }

package/src/usage/UsageTab.jsx

@@ -148,17 +148,6 @@ function UsageContent({ context, basePath, portalId, appName, days }) {
         <Tile>
           <Flex direction="column" gap="small">
             <Text format={{ fontWeight: "bold" }}>Credits used per day</Text>
-            {/* TEMP diagnostic — remove once the window-change bug is
-                root-caused. Renders straight from the fetched series with no
-                chart involved, so it proves whether new data is actually
-                arriving on a window change (this line updates) vs. only the
-                LineChart failing to reflect it (this line updates, chart
-                doesn't). If THIS line also doesn't change, the bug is
-                upstream of the chart (fetch/state), not the remote component. */}
-            <Text format={{ fontStyle: "italic" }}>
-              DEBUG window={days} points={series.length} first=
-              {series[0]?.date} last={series[series.length - 1]?.date}
-            </Text>
             <LineChart
               data={series}
               axes={{