@growth-operations/ui-shared 1.6.4 → 1.6.6

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -138,7 +138,7 @@ function StatusPanel({ entitlement }) {
   );
 }
 
-function TrialSubscriptionBilling({ context, state, appKey }) {
+function TrialSubscriptionBilling({ context, state, appKey, openIframe = null }) {
   const ent = state?.entitlement;
 
   // Install not provisioned with a Stripe customer yet — calm "finish setup"
@@ -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,26 +216,30 @@ 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."
+          openIframe={openIframe}
         />
       )}
     </Flex>
   );
 }
 
-function CreditsBilling({ context, state, appKey }) {
+function CreditsBilling({ context, state, appKey, openIframe = null }) {
   const onPaidPlan = !!state?.entitlement?.plan;
 
   // Direct external link to the billing service's GET /v1/billing/portal/start,
@@ -297,7 +302,7 @@ function CreditsBilling({ context, state, appKey }) {
         entitlement={state?.entitlement}
         creditMeter={state?.credit_meter}
       />
-      <PlanGrid context={context} state={state} appKey={appKey} />
+      <PlanGrid context={context} state={state} appKey={appKey} openIframe={openIframe} />
       {!hasPlans && (
         <LoadingButton
           href={
@@ -341,7 +346,7 @@ function LegacyBilling({ state }) {
   );
 }
 
-export function BillingTab({ context, state, appKey }) {
+export function BillingTab({ context, state, appKey, openIframe = null }) {
   const mode = state?.entitlement?.mode;
 
   return (
@@ -350,9 +355,9 @@ export function BillingTab({ context, state, appKey }) {
       {mode === "legacy" ? (
         <LegacyBilling state={state} />
       ) : mode === "credits" ? (
-        <CreditsBilling context={context} state={state} appKey={appKey} />
+        <CreditsBilling context={context} state={state} appKey={appKey} openIframe={openIframe} />
       ) : (
-        <TrialSubscriptionBilling context={context} state={state} appKey={appKey} />
+        <TrialSubscriptionBilling context={context} state={state} appKey={appKey} openIframe={openIframe} />
       )}
     </Flex>
   );

package/src/billing/PlanGrid.jsx

@@ -54,12 +54,36 @@ 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,
+  // actions.openIframeModal from the card root (threaded BillingTab → PlanGrid).
+  // When present, a talk_to_sales tier with plan.meetings_url opens the meetings
+  // scheduler in an IN-CARD modal (the Anvil "Meet with Andrew" experience).
+  // Absent (or no meetings_url) → fall back to a new-tab href. UI Extensions
+  // can't read whether the external meetings page is CSP-frameable, so the modal
+  // is best-effort; the href fallback always works.
+  openIframe = 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,18 +176,54 @@ 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>
-        ) : plan.talk_to_sales ? (
+        ) : isDowngrade ? (
           <Button
             href={supportUrl ? { url: supportUrl, external: true } : undefined}
             disabled={!supportUrl}
             variant="secondary"
           >
-            Contact sales
+            Talk to sales to switch
           </Button>
+        ) : plan.talk_to_sales ? (
+          // Talk-to-sales tier (e.g. Enterprise+): no price/checkout. If we have
+          // a meetings link AND the openIframeModal action, open the scheduler in
+          // an in-card modal (Anvil "Meet with Andrew"). Otherwise a new-tab href
+          // to the meetings link (preferred) or support page.
+          openIframe && plan.meetings_url ? (
+            <Button
+              variant="secondary"
+              onClick={() =>
+                openIframe({
+                  uri: plan.meetings_url,
+                  title: `Talk to sales — ${plan.name ?? plan.tier}`,
+                  width: 1100,
+                  height: 760,
+                })
+              }
+            >
+              Talk to sales
+            </Button>
+          ) : (
+            <Button
+              href={
+                plan.meetings_url
+                  ? { url: plan.meetings_url, external: true }
+                  : supportUrl
+                    ? { url: supportUrl, external: true }
+                    : undefined
+              }
+              disabled={!plan.meetings_url && !supportUrl}
+              variant="secondary"
+            >
+              Talk to sales
+            </Button>
+          )
         ) : !leg ? (
           // No price for the selected interval (e.g. annual not offered) — guide
           // the customer to the other toggle rather than dead-ending.
@@ -202,6 +262,12 @@ 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,
+  // actions.openIframeModal (from the hosting card root) — lets a talk_to_sales
+  // tier open its meetings_url scheduler in an in-card modal. Optional.
+  openIframe = null,
 }) {
   const plans = plansOverride ?? state?.plans ?? [];
 
@@ -242,6 +308,8 @@ export function PlanGrid({
             maxFeatures={maxFeatures}
             endpoint={endpoint}
             ctaLabel={ctaLabel}
+            currentOrder={currentOrder}
+            openIframe={openIframe}
           />
         ))}
       </AutoGrid>