@growth-operations/ui-shared 1.24.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.24.0",
+  "version": "1.26.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

package/src/home/FeatureUsage.jsx

@@ -12,9 +12,10 @@ import {
 //
 // Composition: most-used first (what this install actually runs on), then
 // the not-in-use catalog as "Recommended to explore" — each with its
-// one-line rationale and setup-guide link. Each section renders only when it
-// has rows, and the whole thing renders NOTHING when the block is absent
-// (older backends, legacy installs) — absence is never an empty box.
+// one-line rationale and (for super admins) its setup CTA links. Each
+// section renders only when it has rows, and the whole thing renders NOTHING
+// when the block is absent (older backends, legacy installs) — absence is
+// never an empty box.
 
 // Singular/plural label for a row's unit ("credits" | "events") — the wire
 // field is credits_or_events, so an event-denominated feature must not be
@@ -61,29 +62,34 @@ function RecommendedTile({ notInUse, isSuperAdmin, onNavigate }) {
         <Text format={{ fontWeight: "bold" }}>Recommended to explore</Text>
         {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);
+          // all) — show them to super admins only; everyone else gets name +
+          // rationale alone (a non-admin clicking into a HubSpot permission
+          // wall is worse than no link).
+          //
+          // "Learn more →" (docs_url) intentionally NOT rendered (Jasper
+          // 2026-10-14): every feature's docs_url points at the same single
+          // setup guide — noise until per-feature articles exist. docs_url
+          // stays in the wire contract; re-enabling is a one-line revert.
+          const ctas = isSuperAdmin ? f.ctas : [];
           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}
+              {ctas.map((cta) =>
+                cta.url ? (
+                  <Link key={cta.label} href={{ url: cta.url, external: true }}>
+                    {cta.label} →
+                  </Link>
+                ) : onNavigate ? (
+                  <Button
+                    key={cta.label}
+                    variant="secondary"
+                    onClick={() => onNavigate(cta.route)}
+                  >
+                    {cta.label}
+                  </Button>
+                ) : null
+              )}
             </Flex>
           );
         })}

package/src/lib/featureUsage.js

@@ -15,9 +15,21 @@
 const normalizeUnit = (u) =>
   typeof u === "string" && u.toLowerCase().startsWith("event") ? "events" : "credits";
 
+// One well-formed setup CTA is {label: non-empty string, url XOR route:
+// non-empty string}. Anything else (missing label, both targets, neither
+// target, wrong types) is dropped — a malformed item never renders.
+const normalizeCta = (c) => {
+  if (!c || typeof c !== "object") return null;
+  const label = typeof c.label === "string" && c.label ? c.label : null;
+  const url = typeof c.url === "string" && c.url ? c.url : null;
+  const route = typeof c.route === "string" && c.route ? c.route : null;
+  if (!label || !(url || route) || (url && route)) return null;
+  return url ? { label, url } : { label, route };
+};
+
 // Resolve the feature_usage block into render-ready shape:
 //   { mostUsed: [{ key, name, count, unit }],
-//     notInUse: [{ key, name, docsUrl, rationale }] }
+//     notInUse: [{ key, name, docsUrl, rationale, ctas }] }
 // Returns null when the block is absent/malformed or BOTH lists are empty
 // (an install using every detectable feature has nothing to show here).
 export function resolveFeatureUsage(featureUsage) {
@@ -39,12 +51,10 @@ 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,
+      // Optional SETUP actions (1.26.0 — a LIST per feature: one feature can
+      // surface in multiple places, e.g. a card on both contacts and
+      // applications). Each item is {label, url|route}; absent/empty -> [].
+      ctas: (Array.isArray(f.ctas) ? f.ctas : []).map(normalizeCta).filter(Boolean),
     }));
 
   if (mostUsed.length === 0 && notInUse.length === 0) return null;