@growth-operations/ui-shared 1.30.0 → 1.31.0

package/package.json

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

package/src/home/AppHome.jsx

@@ -7,6 +7,7 @@ import { SyncPulse } from "./SyncPulse";
 import { FeatureUsage } from "./FeatureUsage";
 import { PlanFitBanner } from "./PlanFitBanner";
 import { PeriodComparison } from "./PeriodComparison";
+import { BillingPeriodUsage } from "../usage/BillingPeriodUsage";
 import { FeatureNudges } from "./FeatureNudges";
 import { HelpfulLinks } from "./HelpfulLinks";
 
@@ -53,7 +54,14 @@ function ArchetypeTile({ state }) {
 //                  (it owns context.portal.id + the app's docs/support); it can
 //                  also come from a state.helpful_links block if the backend
 //                  builds one.
-export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks }) {
+//   usageExplorer — optional { context, basePath, portalId }: swap the fixed
+//                  last-vs-current PeriodComparison for the billing-period
+//                  explorer chart (BillingPeriodUsage, Current/Last 2/3/6/12
+//                  dropdown). Requires the host's usage endpoint to serve
+//                  ?periods= (common v1.35.0+ backends). Jasper 2026-10-14:
+//                  ATS Home uses this; the Usage tab keeps the rolling-days
+//                  LineChart.
+export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks, usageExplorer }) {
   if (!state) {
     return <LoadingSpinner showLabel label="Loading…" />;
   }
@@ -116,9 +124,25 @@ export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks }) {
 
       <ArchetypeTile state={state} />
 
-      {/* Post-checklist: the period-over-period comparison (null until the
-          install has one full closed period). */}
-      {onboardingComplete && <PeriodComparison state={state} />}
+      {/* Post-checklist: the period chart. Default is the fixed
+          period-over-period comparison (null until the install has one full
+          closed period); usageExplorer hosts get the billing-period explorer
+          instead (it self-fetches, so it renders its own empty state rather
+          than gating on a closed period). */}
+      {onboardingComplete &&
+        (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/usage/BillingPeriodUsage.jsx

@@ -76,7 +76,16 @@ export function makeUsageFetcher({ context, basePath = DEFAULT_BASE_PATH, portal
 
 // Hook-free presentational core (exported for tests): stats + stacked chart
 // from an already-loaded payload.
-export function BillingPeriodUsageView({ data, periods, appName, showStats }) {
+export function BillingPeriodUsageView({
+  data,
+  periods,
+  appName,
+  showStats,
+  emptyTitle = "No usage in this window",
+  // Customer-facing default; internal hosts (the GOAA card) override — their
+  // viewer isn't the user, so "you run a metered action" reads wrong there.
+  emptyBody = null,
+}) {
   const series = data?.series ?? [];
   const usedInWindow = data?.used_in_window ?? 0;
   const remaining = data?.remaining;
@@ -96,10 +105,10 @@ export function BillingPeriodUsageView({ data, periods, appName, showStats }) {
       )}
 
       {series.length === 0 ? (
-        <EmptyState title="No usage in this window" layout="vertical">
+        <EmptyState title={emptyTitle} layout="vertical">
           <Text>
-            Once you run a metered {appName} action, your credit usage shows
-            here by billing period. Try a longer lookback.
+            {emptyBody ??
+              `Once you run a metered ${appName} action, your credit usage shows here by billing period. Try a longer lookback.`}
           </Text>
         </EmptyState>
       ) : (
@@ -133,6 +142,8 @@ export function BillingPeriodUsage({
   title = "Usage",
   titleAs = "heading", // "text" for CRM-card contexts (bold Text, not Heading)
   showStats = true,
+  emptyTitle,
+  emptyBody,
 }) {
   const [periods, setPeriods] = useState("1");
   const fetcher = fetchUsage ?? makeUsageFetcher({ context, basePath, portalId });
@@ -167,12 +178,14 @@ export function BillingPeriodUsage({
         fetchUsage={fetcher}
         appName={appName}
         showStats={showStats}
+        emptyTitle={emptyTitle}
+        emptyBody={emptyBody}
       />
     </Flex>
   );
 }
 
-function BillingPeriodContent({ periods, fetchUsage, appName, showStats }) {
+function BillingPeriodContent({ periods, fetchUsage, appName, showStats, emptyTitle, emptyBody }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -213,6 +226,8 @@ function BillingPeriodContent({ periods, fetchUsage, appName, showStats }) {
       periods={periods}
       appName={appName}
       showStats={showStats}
+      emptyTitle={emptyTitle}
+      emptyBody={emptyBody}
     />
   );
 }