@growth-operations/ui-shared 1.37.2 → 1.37.4

package/package.json

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

package/src/home/AppHome.jsx

@@ -91,6 +91,13 @@ export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks, usa
 
   const onboardingComplete = state.onboarding?.complete === true;
 
+  // Legacy (Anvil-billed) installs: hide the period chart entirely. The
+  // periods-mode usage endpoint returns an EMPTY series for legacy by design
+  // (no Anvil stripe_usage reconstruction in usage_periods.py), so the
+  // explorer would render a misleading "No usage in this window" while the
+  // Usage tab's days mode shows real activity (USLS, 2026-11-12).
+  const isLegacy = state.entitlement?.mode === "legacy";
+
   // FeatureUsage gate: render once every NON-BILLING onboarding step is done.
   // Every registry app marks its Choose-a-plan step paid-gated (key "plan",
   // routing to /billing, done only once the subscription is ACTIVE), so gating
@@ -137,20 +144,22 @@ export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks, usa
           state ("No usage in this window") is the right thing to show there,
           not nothing. The paid-step trap this gate grew out of (Andrew
           2026-11-11) is moot once there's no gate. FeatureUsage below keeps
-          the setupStepsComplete gate. */}
-      {usageExplorer ? (
-        <BillingPeriodUsage
-          context={usageExplorer.context}
-          basePath={usageExplorer.basePath}
-          portalId={usageExplorer.portalId}
-          appName={appName}
-          title="Usage over time"
-          titleAs="text"
-          showStats={false}
-        />
-      ) : (
-        <PeriodComparison state={state} />
-      )}
+          the setupStepsComplete gate. ONE exception: legacy installs skip
+          the chart (see isLegacy above). */}
+      {!isLegacy &&
+        (usageExplorer ? (
+          <BillingPeriodUsage
+            context={usageExplorer.context}
+            basePath={usageExplorer.basePath}
+            portalId={usageExplorer.portalId}
+            appName={appName}
+            title="Usage over time"
+            titleAs="text"
+            showStats={false}
+          />
+        ) : (
+          <PeriodComparison state={state} />
+        ))}
 
       {/* Most used / recommended-to-explore (state.feature_usage) — renders
           nothing on backends without the block or for legacy installs. Gated

package/src/home/HealthHero.jsx

@@ -112,6 +112,27 @@ export function HealthHero({ appName, state }) {
     );
   }
 
+  // Legacy (Anvil-billed) install — the calm hero matching BillingTab's
+  // LegacyBilling panel. MUST come before the status fallback below:
+  // "legacy" is not in STATUS_LABELS/STATUS_VARIANT, so it would render the
+  // literal word "legacy" as the banner title (USLS portal 4064313,
+  // 2026-11-12 — reads like a debug string to a paying customer).
+  if (ent.mode === "legacy") {
+    return (
+      <Flex direction="column" gap="small">
+        {name && <Heading>{name}</Heading>}
+        <Alert title="Managed through your existing subscription" variant="info">
+          <Box flex="auto">
+            <Text>
+              Your plan and payment method are billed through your existing
+              subscription. There's nothing to set up here.
+            </Text>
+          </Box>
+        </Alert>
+      </Flex>
+    );
+  }
+
   // trial_subscription (and any other status-bearing arm).
   return (
     <Flex direction="column" gap="small">

package/src/lib/creditDisplay.js

@@ -383,7 +383,7 @@ function trialStateOf(ent, { appName } = {}) {
       // clockless free accounts keep the generic pre-top-up line.
       liveClock: daysLeft != null,
       title: "You're out of credits",
-      body: `You have used ${used}/${granted} free credits. Select one of the plans below to continue use of ${name}.`,
+      body: `You have used ${used}/${granted} free credits. Select a paid plan to continue use of ${name}.`,
     };
   }
   if (daysLeft != null) {
@@ -397,9 +397,10 @@ function trialStateOf(ent, { appName } = {}) {
 }
 
 // Trial states map onto the banner shape with the shared support footer and a
-// Billing-tab CTA (the copy asks for a plan; on non-Home pages nothing is
-// "below", so the button routes to the picker). out-of-credits/trial-ended
-// are RED (they stop the app), trial-active is YELLOW — Andrew 2026-10-13.
+// Billing-tab CTA (the copy asks for "a paid plan" — never "below": on Home
+// there are no plans below the banner — so the button routes to the picker).
+// out-of-credits/trial-ended are RED (they stop the app), trial-active is
+// YELLOW — Andrew 2026-10-13.
 const TRIAL_STATE_VARIANT = {
   out_of_credits: "error",
   trial_ended: "error",