@growth-operations/ui-shared 1.23.0 → 1.24.0

package/package.json

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

package/src/home/AppHome.jsx

@@ -159,7 +159,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;