@growth-operations/ui-shared 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.6.3",
+  "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,6 +180,23 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
         `&return_url=${encodeURIComponent(returnUrl)}`
       : null;
 
+  // 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;
+  // 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">
       {/* PRIMARY CTA at the top. Direct external link to the billing-service
@@ -198,6 +215,25 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
         Billing is managed in Stripe across all Growth Operations apps. Use the
         link above to update your plan, payment method, or view invoices.
       </Text>
+
+      {/* 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={plans}
+          currentOrder={currentOrder}
+          endpoint="upgrade/start"
+          ctaLabel="Upgrade to"
+          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

@@ -48,12 +48,35 @@ function PlanCard({
   returnUrl,
   supportUrl,
   maxFeatures = 0,
+  // Billing-service redirect the "Choose" button targets. "checkout/start" (the
+  // default) starts a NEW subscription via hosted Checkout — for free/credit
+  // first purchase. "upgrade/start" swaps the EXISTING trialing/active sub's item
+  // 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";
@@ -80,7 +103,7 @@ function PlanCard({
   // price) — the button is disabled until then.
   const startUrl =
     billingBaseUrl && appKey && portalId && leg?.price_id
-      ? `${billingBaseUrl}/v1/billing/checkout/start` +
+      ? `${billingBaseUrl}/v1/billing/${endpoint}` +
         `?app_key=${encodeURIComponent(appKey)}` +
         `&portal_id=${encodeURIComponent(portalId)}` +
         `&price_id=${encodeURIComponent(leg.price_id)}` +
@@ -146,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}
@@ -175,7 +208,7 @@ function PlanCard({
             disabled={!startUrl}
             variant="primary"
           >
-            Choose {plan.name ?? plan.tier}
+            {ctaLabel} {plan.name ?? plan.tier}
           </Button>
         )}
       </Flex>
@@ -183,8 +216,24 @@ function PlanCard({
   );
 }
 
-export function PlanGrid({ context, state, appKey }) {
-  const plans = state?.plans ?? [];
+export function PlanGrid({
+  context,
+  state,
+  appKey,
+  // Customization for non-default uses. The credit-app first-purchase grid uses
+  // all defaults; the trial-archetype in-app UPGRADE picker passes:
+  //   plans={higherTiersOnly}  endpoint="upgrade/start"  ctaLabel="Upgrade to"
+  //   heading="Upgrade your plan"  footnote={trial copy}
+  plans: plansOverride,
+  endpoint = "checkout/start",
+  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 ?? [];
 
   if (plans.length === 0) return null;
 
@@ -205,7 +254,7 @@ export function PlanGrid({ context, state, appKey }) {
 
   return (
     <Flex direction="column" gap="medium">
-      <Heading>Plans</Heading>
+      <Heading>{heading}</Heading>
 
       {/* AutoGrid(flexible): equal-width columns that wrap responsively. Card
           height is equalized via the maxFeatures padding in PlanCard. Each card
@@ -221,14 +270,14 @@ export function PlanGrid({ context, state, appKey }) {
             returnUrl={returnUrl}
             supportUrl={supportUrl}
             maxFeatures={maxFeatures}
+            endpoint={endpoint}
+            ctaLabel={ctaLabel}
+            currentOrder={currentOrder}
           />
         ))}
       </AutoGrid>
 
-      <Text format={{ fontStyle: "italic" }}>
-        Billing is managed in Stripe across all Growth Operations apps. Your new
-        credits are added as soon as payment completes.
-      </Text>
+      <Text format={{ fontStyle: "italic" }}>{footnote}</Text>
     </Flex>
   );
 }