@growth-operations/ui-shared 1.6.3 → 1.6.4

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -180,6 +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.
+  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
+        )
+      : [];
+
   return (
     <Flex direction="column" gap="medium">
       {/* PRIMARY CTA at the top. Direct external link to the billing-service
@@ -198,6 +214,22 @@ 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 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 && (
+        <PlanGrid
+          context={context}
+          state={state}
+          appKey={appKey}
+          plans={upgradePlans}
+          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."
+        />
+      )}
     </Flex>
   );
 }

package/src/billing/PlanGrid.jsx

@@ -48,6 +48,12 @@ 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",
 }) {
   // Default this card to annual when it offers annual (cheaper-per-month story);
   // monthly-only tiers default to monthly. Both legs → show the toggle.
@@ -80,7 +86,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)}` +
@@ -175,7 +181,7 @@ function PlanCard({
             disabled={!startUrl}
             variant="primary"
           >
-            Choose {plan.name ?? plan.tier}
+            {ctaLabel} {plan.name ?? plan.tier}
           </Button>
         )}
       </Flex>
@@ -183,8 +189,21 @@ 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.",
+}) {
+  const plans = plansOverride ?? state?.plans ?? [];
 
   if (plans.length === 0) return null;
 
@@ -205,7 +224,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 +240,13 @@ export function PlanGrid({ context, state, appKey }) {
             returnUrl={returnUrl}
             supportUrl={supportUrl}
             maxFeatures={maxFeatures}
+            endpoint={endpoint}
+            ctaLabel={ctaLabel}
           />
         ))}
       </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>
   );
 }