@growth-operations/ui-shared 1.6.4 → 1.6.5

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -180,21 +180,22 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
         `&return_url=${encodeURIComponent(returnUrl)}`
       : null;
 
-  // Upgrade-only tier picker — shown ONLY while trialing (the lifecycle: trial
-  // starts on the entry tier at install; while trialing the customer may upgrade
-  // to a higher tier; once active, plan changes go through support, so no picker).
-  // The cards target /v1/billing/upgrade/start (swap the trialing sub's item, no
-  // new sub). "Higher tiers" = plans ranked above the current tier by tier_order;
-  // the backend stamps Plan.current on the account's tier.
+  // Tier picker — shown ONLY while trialing (the lifecycle: trial starts on the
+  // entry tier at install; while trialing the customer may upgrade to a higher
+  // tier in-app; once active, plan changes go through support). We show the FULL
+  // ladder for context so the customer sees where they sit:
+  //   current tier  -> "Current plan" (disabled marker; PlanCard keys off
+  //                    plan.current, stamped server-side on the account's tier).
+  //   higher tiers  -> the actionable upgrade (CTA targets /v1/billing/upgrade/
+  //                    start, swapping the trialing sub's item — no new sub).
+  //   lower tiers   -> shown disabled with a Talk-to-sales CTA (downgrades aren't
+  //                    self-serve). PlanCard derives this from currentOrder.
   const isTrialing = ent.status === "trialing";
   const plans = state?.plans ?? [];
   const currentOrder = plans.find((p) => p.current)?.tier_order;
-  const upgradePlans =
-    isTrialing && currentOrder != null
-      ? plans.filter(
-          (p) => !p.talk_to_sales && p.tier_order != null && p.tier_order > currentOrder
-        )
-      : [];
+  // Render the picker only while trialing AND once we know the current tier
+  // (currentOrder drives upgrade-vs-downgrade per card).
+  const showPicker = isTrialing && currentOrder != null && plans.length > 0;
 
   return (
     <Flex direction="column" gap="medium">
@@ -215,19 +216,22 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
         link above to update your plan, payment method, or view invoices.
       </Text>
 
-      {/* Trial-only upgrade path. Hidden once active (no plans pass the filter
-          when not trialing). Upgrading swaps the trialing sub onto the higher
-          tier, keeping the trial end date. */}
-      {upgradePlans.length > 0 && (
+      {/* Trial-only tier ladder: current (marked), higher (upgradeable), lower
+          (disabled, Talk-to-sales). Hidden once active. Upgrading swaps the
+          trialing sub onto the higher tier, keeping the trial end date. The full
+          `plans` list is passed; PlanCard decides each card's state from
+          plan.current + currentOrder. */}
+      {showPicker && (
         <PlanGrid
           context={context}
           state={state}
           appKey={appKey}
-          plans={upgradePlans}
+          plans={plans}
+          currentOrder={currentOrder}
           endpoint="upgrade/start"
           ctaLabel="Upgrade to"
-          heading="Upgrade your plan"
-          footnote="Upgrade any time during your trial — your trial end date stays the same, and the new tier applies when it converts."
+          heading="Your plan"
+          footnote="Upgrade any time during your trial — your trial end date stays the same, and the new tier applies when it converts. To move to a lower tier, talk to sales."
         />
       )}
     </Flex>

package/src/billing/PlanGrid.jsx

@@ -54,12 +54,29 @@ function PlanCard({
   // to this tier (the trial-archetype in-app upgrade) — no new sub.
   endpoint = "checkout/start",
   ctaLabel = "Choose",
+  // Trial-picker only: tier_order of the customer's current tier. When set, a
+  // card ranked BELOW it is a downgrade — shown for context but not self-serve
+  // (downgrades go through support), so it renders disabled with a Talk-to-sales
+  // CTA. Cards ranked ABOVE are upgrades (the normal CTA). null/undefined => the
+  // credit first-purchase grid, where this relation doesn't apply.
+  currentOrder = null,
 }) {
   // Default this card to annual when it offers annual (cheaper-per-month story);
   // monthly-only tiers default to monthly. Both legs → show the toggle.
   const hasMonthly = !!plan.monthly;
   const hasAnnual = !!plan.annual;
-  const canToggle = hasMonthly && hasAnnual;
+  // A lower-ranked tier than the customer's current one: a downgrade. Not
+  // self-serve (changes go through support) — show it for context, disabled,
+  // with a Talk-to-sales CTA. Only meaningful in the trial picker (currentOrder
+  // set); never flag the current tier itself as a downgrade.
+  const isDowngrade =
+    currentOrder != null &&
+    !plan.current &&
+    plan.tier_order != null &&
+    plan.tier_order < currentOrder;
+  // The interval toggle is only useful when the card can be acted on; a current
+  // or downgrade card is read-only, so hide its toggle.
+  const canToggle = hasMonthly && hasAnnual && !plan.current && !isDowngrade;
   const [interval, setInterval] = useState(hasAnnual ? "annual" : "monthly");
   const leg = interval === "annual" ? plan.annual : plan.monthly;
   const periodLabel = interval === "annual" ? "/yr" : "/mo";
@@ -152,10 +169,20 @@ function PlanCard({
           <Text key={`pad-${i}`}>{" "}</Text>
         ))}
 
-        {/* CTA. Current tier => disabled marker. talk_to_sales => contact link.
-            Otherwise pre-create-then-link checkout for the selected interval. */}
+        {/* CTA. Current tier => disabled marker. Downgrade (lower than current,
+            trial picker) => disabled + Talk-to-sales (not self-serve).
+            talk_to_sales tier => contact link. Otherwise pre-create-then-link
+            checkout/upgrade for the selected interval. */}
         {plan.current ? (
           <Button disabled>Current plan</Button>
+        ) : isDowngrade ? (
+          <Button
+            href={supportUrl ? { url: supportUrl, external: true } : undefined}
+            disabled={!supportUrl}
+            variant="secondary"
+          >
+            Talk to sales to switch
+          </Button>
         ) : plan.talk_to_sales ? (
           <Button
             href={supportUrl ? { url: supportUrl, external: true } : undefined}
@@ -202,6 +229,9 @@ export function PlanGrid({
   ctaLabel = "Choose",
   heading = "Plans",
   footnote = "Billing is managed in Stripe across all Growth Operations apps. Your new credits are added as soon as payment completes.",
+  // Trial-picker only: tier_order of the current tier, so cards below it render
+  // as disabled downgrades (Talk-to-sales). Omitted for the credit grid.
+  currentOrder = null,
 }) {
   const plans = plansOverride ?? state?.plans ?? [];
 
@@ -242,6 +272,7 @@ export function PlanGrid({
             maxFeatures={maxFeatures}
             endpoint={endpoint}
             ctaLabel={ctaLabel}
+            currentOrder={currentOrder}
           />
         ))}
       </AutoGrid>