@growth-operations/ui-shared 1.23.0 → 1.25.0

package/package.json

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

package/src/home/AppHome.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Tile, Text, LoadingSpinner } from "@hubspot/ui-extensions";
+import { Flex, LoadingSpinner } from "@hubspot/ui-extensions";
 import { InstallProgress } from "./InstallProgress";
 import { HealthHero } from "./HealthHero";
 import { OnboardingChecklist } from "./OnboardingChecklist";
@@ -10,50 +10,16 @@ import { PeriodComparison } from "./PeriodComparison";
 import { FeatureNudges } from "./FeatureNudges";
 import { HelpfulLinks } from "./HelpfulLinks";
 
-// Minimal inline ATS tile (the `pipeline` block). Kept tiny here rather than a
-// separate file — it's the simplest of the three archetype tiles. Renders
-// nothing when there's no pipeline block.
-function PipelineTile({ pipeline }) {
-  if (!pipeline) return null;
-  const byStage = pipeline.applications_by_stage ?? {};
-  return (
-    <Tile>
-      <Flex direction="column" gap="small">
-        <Text format={{ fontWeight: "bold" }}>Pipeline</Text>
-        <Flex direction="row" gap="large">
-          <Flex direction="column" gap="extra-small">
-            <Text format={{ fontWeight: "demibold" }}>Open jobs</Text>
-            <Text>{pipeline.open_jobs ?? 0}</Text>
-          </Flex>
-          <Flex direction="column" gap="extra-small">
-            <Text format={{ fontWeight: "demibold" }}>Outstanding scorecards</Text>
-            <Text>{pipeline.outstanding_scorecards ?? 0}</Text>
-          </Flex>
-        </Flex>
-        {Object.keys(byStage).length > 0 && (
-          <Flex direction="row" gap="medium">
-            {Object.entries(byStage).map(([stage, count]) => (
-              <Flex key={stage} direction="column" gap="extra-small">
-                <Text format={{ fontWeight: "demibold" }}>{stage}</Text>
-                <Text>{count}</Text>
-              </Flex>
-            ))}
-          </Flex>
-        )}
-      </Flex>
-    </Tile>
-  );
-}
-
 // Picks the single archetype activity tile (CONTRACT: at most ONE present).
-// sync_pulse -> SyncPulse; pipeline -> PipelineTile. The credit meter is
+// sync_pulse -> SyncPulse. The credit meter is
 // deliberately NOT on Home anymore (Andrew's 2026-10 feedback) — it lives at
 // the top of the Usage tab; Home's credit story is the top BillingBanner's
 // trial states plus the post-checklist period comparison. Renders nothing
-// when no tile applies.
+// when no tile applies. (The ATS `pipeline` tile was retired 2026-10-14 —
+// product decision: it duplicated the dedicated Applications/Jobs/Scorecards
+// tabs and its cold-started counters read wrong until churn.)
 function ArchetypeTile({ state }) {
   if (state.sync_pulse) return <SyncPulse syncPulse={state.sync_pulse} />;
-  if (state.pipeline) return <PipelineTile pipeline={state.pipeline} />;
   return null;
 }
 
@@ -67,7 +33,7 @@ function ArchetypeTile({ state }) {
 //                            plan_fit says so)
 //                          + <PlanFitBanner> (upgrade_recommended only)
 //                          + <OnboardingChecklist> (only if not complete)
-//                          + the archetype activity tile (sync/pipeline)
+//                          + the archetype activity tile (sync_pulse)
 //                          + <PeriodComparison> (post-checklist, when the
 //                            backend has a full closed period)
 //                          + <FeatureUsage> (once the non-billing setup steps
@@ -159,7 +125,7 @@ export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks }) {
           on the non-billing setup steps (NOT the paid-gated plan step) so a
           fresh install sees setup first but free/trial installs aren't
           locked out. */}
-      {setupStepsComplete && <FeatureUsage state={state} />}
+      {setupStepsComplete && <FeatureUsage state={state} onNavigate={onNavigate} />}
 
       <FeatureNudges nudges={state.nudges} onNavigate={onNavigate} />
 

package/src/home/FeatureUsage.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Tile, Text, Link } from "@hubspot/ui-extensions";
+import { Flex, Tile, Text, Link, Button } from "@hubspot/ui-extensions";
 import {
   featureUsageOf,
   pickDailyRecommendations,
@@ -46,7 +46,7 @@ function MostUsedTile({ mostUsed }) {
   );
 }
 
-function RecommendedTile({ notInUse }) {
+function RecommendedTile({ notInUse, isSuperAdmin, onNavigate }) {
   if (notInUse.length === 0) return null;
   // Long lists (ATS: 13 features) render as a rotating daily slice instead of
   // a wall — the whole list still arrives in the payload; the window is a
@@ -59,17 +59,34 @@ function RecommendedTile({ notInUse }) {
     <Tile>
       <Flex direction="column" gap="small">
         <Text format={{ fontWeight: "bold" }}>Recommended to explore</Text>
-        {picks.map((f) => (
-          <Flex key={f.key} direction="column" gap="extra-small">
-            <Text format={{ fontWeight: "demibold" }}>{f.name}</Text>
-            {f.rationale ? <Text>{f.rationale}</Text> : null}
-            {f.docsUrl ? (
-              <Link href={{ url: f.docsUrl, external: true }}>
-                Learn more →
-              </Link>
-            ) : null}
-          </Flex>
-        ))}
+        {picks.map((f) => {
+          // Setup CTAs point at admin-only surfaces (the layout editor above
+          // all) — show them to super admins only; everyone else keeps the
+          // docs link (a non-admin clicking into a HubSpot permission wall is
+          // worse than no link).
+          const showCta = isSuperAdmin && f.ctaLabel && (f.ctaUrl || f.ctaRoute);
+          return (
+            <Flex key={f.key} direction="column" gap="extra-small">
+              <Text format={{ fontWeight: "demibold" }}>{f.name}</Text>
+              {f.rationale ? <Text>{f.rationale}</Text> : null}
+              {showCta && f.ctaUrl ? (
+                <Link href={{ url: f.ctaUrl, external: true }}>
+                  {f.ctaLabel} →
+                </Link>
+              ) : null}
+              {showCta && !f.ctaUrl && f.ctaRoute && onNavigate ? (
+                <Button variant="secondary" onClick={() => onNavigate(f.ctaRoute)}>
+                  {f.ctaLabel}
+                </Button>
+              ) : null}
+              {f.docsUrl ? (
+                <Link href={{ url: f.docsUrl, external: true }}>
+                  Learn more →
+                </Link>
+              ) : null}
+            </Flex>
+          );
+        })}
         {recommendationsRotated(notInUse) ? (
           <Text variant="microcopy">
             New picks daily — {notInUse.length} features to explore in all.
@@ -80,13 +97,17 @@ function RecommendedTile({ notInUse }) {
   );
 }
 
-export function FeatureUsage({ state }) {
+export function FeatureUsage({ state, onNavigate }) {
   const view = featureUsageOf(state);
   if (!view) return null;
   return (
     <>
       <MostUsedTile mostUsed={view.mostUsed} />
-      <RecommendedTile notInUse={view.notInUse} />
+      <RecommendedTile
+        notInUse={view.notInUse}
+        isSuperAdmin={state?.user?.is_super_admin === true}
+        onNavigate={onNavigate}
+      />
     </>
   );
 }

package/src/lib/featureUsage.js

@@ -39,6 +39,12 @@ export function resolveFeatureUsage(featureUsage) {
       name: f.name,
       docsUrl: typeof f.docs_url === "string" && f.docs_url ? f.docs_url : null,
       rationale: typeof f.rationale === "string" ? f.rationale : "",
+      // Optional SETUP action (the same cta_* vocabulary as nudges): the "go
+      // do the thing" deep link for an unused feature — layout editor, store
+      // listing, or in-app route. Absent on backends that predate it.
+      ctaLabel: typeof f.cta_label === "string" && f.cta_label ? f.cta_label : null,
+      ctaUrl: typeof f.cta_url === "string" && f.cta_url ? f.cta_url : null,
+      ctaRoute: typeof f.cta_route === "string" && f.cta_route ? f.cta_route : null,
     }));
 
   if (mostUsed.length === 0 && notInUse.length === 0) return null;