@growth-operations/ui-shared 1.21.0 → 1.21.2

package/package.json

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

package/src/home/FeatureUsage.jsx

@@ -27,7 +27,10 @@ function MostUsedTile({ mostUsed }) {
       <Flex direction="column" gap="small">
         <Text format={{ fontWeight: "bold" }}>Most used features</Text>
         {mostUsed.map((f) => (
-          <Flex key={f.key} direction="row" gap="small">
+          // justify=between pins the count column flush-right so counts align
+          // across rows regardless of feature-name length (Jasper 2026-10-13:
+          // ragged gap-after-name read as broken alignment).
+          <Flex key={f.key} direction="row" justify="between" align="baseline">
             <Text>{f.name}</Text>
             <Text variant="microcopy">
               {f.count} {unitLabel(f.unit, f.count)}

package/src/home/HealthHero.jsx

@@ -26,8 +26,11 @@ export function HealthHero({ appName, state }) {
     // Plan-fit reinforcement: a healthy verdict on the right plan gets the
     // extra reassurance line; upgrade_recommended is carried by health
     // v2's "attention" reasons + the PlanFitBanner, not here.
+    // Dual-read: base nests plan_fit under payload.state; self-hosted
+    // backends MAY emit it top-level (same pattern as planFitOf).
+    const planFit = state.state?.plan_fit ?? state.plan_fit;
     const onRightPlan =
-      health.level === "healthy" && state.plan_fit?.verdict === "right_plan";
+      health.level === "healthy" && planFit?.verdict === "right_plan";
     return (
       <Flex direction="column" gap="small">
         {name && <Heading>{name}</Heading>}

package/src/home/PeriodComparison.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Flex, Tile, Text, ProgressBar } from "@hubspot/ui-extensions";
-import { resolvePeriodComparison } from "../lib/homeBlocks";
+import { periodComparisonOf } from "../lib/homeBlocks";
 
 // The post-checklist Home usage block: the last full billing period vs the
 // current period-to-date, side by side — one bar per period (shared
@@ -41,7 +41,9 @@ function PeriodColumn({ period, maxTotal }) {
 }
 
 export function PeriodComparison({ state }) {
-  const view = resolvePeriodComparison(state?.period_comparison);
+  // periodComparisonOf dual-reads payload.state.period_comparison (base) ??
+  // payload.period_comparison (self-hosted).
+  const view = periodComparisonOf(state);
   if (!view) return null;
 
   return (

package/src/home/PlanFitBanner.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Text, Alert } from "@hubspot/ui-extensions";
-import { resolvePlanFit } from "../lib/homeBlocks";
+import { planFitOf } from "../lib/homeBlocks";
 
 // The plan-fit savings banner: when state.plan_fit.verdict is
 // "upgrade_recommended", tell the customer what staying on their current tier
@@ -14,7 +14,10 @@ import { resolvePlanFit } from "../lib/homeBlocks";
 // Renders nothing when the block is absent or the verdict isn't
 // upgrade_recommended.
 export function PlanFitBanner({ state }) {
-  const fit = resolvePlanFit(state?.plan_fit);
+  // planFitOf dual-reads payload.state.plan_fit (base) ?? payload.plan_fit
+  // (self-hosted) — a top-level-only read left this banner dead on every
+  // base-hosted app (found 2026-10-13).
+  const fit = planFitOf(state);
   if (!fit || fit.kind !== "upgrade_recommended") return null;
 
   return (

package/src/index.js

@@ -53,6 +53,7 @@ export { useStrictModeEffect } from "./lib/useStrictModeEffect";
 export { resolveFeatureUsage, featureUsageOf } from "./lib/featureUsage";
 export {
   hasTopUpBank,
+  creditsBlockOf,
   resolveCreditMeter,
   resolveBillingBanner,
   parseLimitInput,
@@ -61,7 +62,9 @@ export {
   TRIAL_BANNER_FOOTER,
   resolveTrialBanner,
   resolvePlanFit,
+  planFitOf,
   resolvePeriodComparison,
+  periodComparisonOf,
 } from "./lib/homeBlocks";
 export {
   AUTO_PROVISION_TITLE,

package/src/lib/creditDisplay.js

@@ -98,6 +98,15 @@ function bankBarVariantFor(bankRemaining, bankGranted) {
   if (bankRemaining * 100 <= 50 * bankGranted) return "warning";
   return "success";
 }
+// The credits block lives at payload.state.credits on base-hosted backends; a
+// self-hosted backend MAY emit it top-level. Dual-read (nested wins), same as
+// featureUsageOf/planFitOf — without this the meter falls back to the legacy
+// single-bar path (no monthly/additional split, no "renews on" line).
+export function creditsBlockOf(state) {
+  if (!state || typeof state !== "object") return null;
+  return state.state?.credits ?? state.credits ?? null;
+}
+
 export function resolveCreditMeter(entitlement, creditMeter, credits = null) {
   const ent = entitlement?.mode === "credits" ? entitlement : null;
   const meter = creditMeter ?? null;

package/src/lib/homeBlocks.js

@@ -114,6 +114,15 @@ export function resolvePlanFit(planFit) {
   return null;
 }
 
+// The plan_fit block lives at payload.state.plan_fit on base-hosted backends;
+// a self-hosted backend MAY emit it top-level instead. Dual-read (nested
+// wins), same as featureUsageOf — without this the banner/hero line silently
+// never render (shipped dead 2026-10-12, found 2026-10-13).
+export function planFitOf(state) {
+  if (!state || typeof state !== "object") return null;
+  return resolvePlanFit(state.state?.plan_fit ?? state.plan_fit);
+}
+
 // --- Period comparison ------------------------------------------------------
 
 // Resolve the period_comparison block (null until the install has one full
@@ -144,3 +153,12 @@ export function resolvePeriodComparison(periodComparison) {
     maxTotal: Math.max(last.total, current.total, 1),
   };
 }
+
+// Same nested-vs-top-level duality as planFitOf: base serves
+// payload.state.period_comparison; self-hosted backends MAY go top-level.
+export function periodComparisonOf(state) {
+  if (!state || typeof state !== "object") return null;
+  return resolvePeriodComparison(
+    state.state?.period_comparison ?? state.period_comparison
+  );
+}

package/src/usage/UsageTab.jsx

@@ -27,6 +27,7 @@ import {
 } from "@hubspot/ui-extensions";
 
 import { useStrictModeEffect } from "../lib/useStrictModeEffect";
+import { creditsBlockOf } from "../lib/creditDisplay";
 import { CreditMeter } from "../home/CreditMeter";
 
 const DEFAULT_BASE_PATH = "/api/v1/usage";
@@ -56,10 +57,13 @@ export function UsageTab({
   return (
     <Flex direction="column" gap="medium">
       {state && (
+        // creditsBlockOf dual-reads payload.state.credits (base) ??
+        // payload.credits (self-hosted) — a top-level-only read silently
+        // dropped the two-pool split + "renews on" line on base-hosted apps.
         <CreditMeter
           entitlement={state.entitlement}
           creditMeter={state.credit_meter}
-          credits={state.credits}
+          credits={creditsBlockOf(state)}
         />
       )}