@growth-operations/ui-shared 1.5.7 → 1.5.9

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -140,9 +140,10 @@ function StatusPanel({ entitlement }) {
   );
 }
 
-// Pre-creates a Stripe billing/checkout portal session on mount and returns
-// { portalUrl, loading, error }. Shared by both arms — the credits arm reuses
-// the same portal endpoint for v1 (see note in CreditsBilling below).
+// Pre-creates a Stripe Customer Portal session on mount (in-iframe POST) and
+// returns { portalUrl, loading, error, notReady }. Used by the TRIAL arm only —
+// the credits arm builds a direct /v1/billing/portal/start link instead (no
+// in-iframe fetch, avoiding the billing service's cold-start timeout).
 function usePortalSession({ context, state, appKey }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -169,18 +170,11 @@ function usePortalSession({ context, state, appKey }) {
         resetOnUnmount();
         return;
       }
-      // No Stripe customer yet → don't even try to open a portal. An install
-      // that hasn't been provisioned has nothing to manage; show the calm "not
-      // ready" state. The credits arm has NO `status` field (only the
-      // not_installed shell does) but DOES carry `plan` once paid — treat a set
-      // `plan` as ready so a paid credit customer gets the Manage button. Only
-      // the trial arm relies on `status`.
-      const ent = state?.entitlement;
-      const status = ent?.status;
-      const onPaidPlan = !!ent?.plan;
-      const notProvisioned =
-        !ent || status === "not_installed" || (status == null && !onPaidPlan);
-      if (notProvisioned) {
+      // No Stripe customer yet → don't even try to open a portal. A trial
+      // install that hasn't been provisioned (no entitlement, or status null/
+      // not_installed) has nothing to manage; show the calm "not ready" state.
+      const status = state?.entitlement?.status;
+      if (!state.entitlement || status == null || status === "not_installed") {
         if (mounted.current) {
           setNotReady(true);
           setLoading(false);
@@ -293,16 +287,28 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
 }
 
 function CreditsBilling({ context, state, appKey }) {
-  // The Stripe portal session lets an EXISTING paid customer manage/switch/cancel
-  // their plan, with proration handled by Stripe.
-  const { portalUrl, loading, error, notReady } = usePortalSession({
-    context,
-    state,
-    appKey,
-  });
-
   const onPaidPlan = !!state?.entitlement?.plan;
 
+  // Direct external link to the billing service's GET /v1/billing/portal/start,
+  // which resolves the customer + creates the Customer Portal session server-side
+  // and 303s to Stripe — IN THE OPENED TAB. No in-iframe portal-session fetch
+  // (that round trip hit the billing service's cold-start/CPU stall and surfaced
+  // as the iframe's 15s "Gateway took too long" error). Same pattern as
+  // PlanGrid's /checkout/start "Choose" button. null (button disabled) until
+  // billing_base_url is known.
+  const base = state?.billing_base_url ?? null;
+  const portalId = context?.portal?.id;
+  const returnUrl = state?.app_id
+    ? `https://app.hubspot.com/app/${portalId}/${state.app_id}/billing`
+    : "https://app.hubspot.com/";
+  const portalStartUrl =
+    base && appKey && portalId
+      ? `${base}/v1/billing/portal/start` +
+        `?app_key=${encodeURIComponent(appKey)}` +
+        `&portal_id=${encodeURIComponent(String(portalId))}` +
+        `&return_url=${encodeURIComponent(returnUrl)}`
+      : null;
+
   // PAID: do NOT show the plan picker. The picker's "Choose" starts a NEW Stripe
   // Checkout subscription — clicking another tier would create a SECOND
   // subscription (double-bill), not switch in place. Plan changes (upgrade/
@@ -316,21 +322,15 @@ function CreditsBilling({ context, state, appKey }) {
           entitlement={state?.entitlement}
           creditMeter={state?.credit_meter}
         />
-        {!notReady &&
-          (error ? (
-            <Alert title="Couldn't open billing" variant="danger">
-              <Text>{error}</Text>
-            </Alert>
-          ) : (
-            <LoadingButton
-              href={portalUrl ? { url: portalUrl, external: true } : undefined}
-              loading={loading}
-              disabled={!portalUrl}
-              variant="primary"
-            >
-              {portalUrl ? "Manage subscription" : "Preparing billing…"}
-            </LoadingButton>
-          ))}
+        <LoadingButton
+          href={
+            portalStartUrl ? { url: portalStartUrl, external: true } : undefined
+          }
+          disabled={!portalStartUrl}
+          variant="primary"
+        >
+          {portalStartUrl ? "Manage subscription" : "Preparing billing…"}
+        </LoadingButton>
         <Text format={{ fontStyle: "italic" }}>
           Change or cancel your plan in Stripe — billing is managed across all
           Growth Operations apps.
@@ -350,21 +350,17 @@ function CreditsBilling({ context, state, appKey }) {
         creditMeter={state?.credit_meter}
       />
       <PlanGrid context={context} state={state} appKey={appKey} />
-      {!notReady && !hasPlans &&
-        (error ? (
-          <Alert title="Couldn't open billing" variant="danger">
-            <Text>{error}</Text>
-          </Alert>
-        ) : (
-          <LoadingButton
-            href={portalUrl ? { url: portalUrl, external: true } : undefined}
-            loading={loading}
-            disabled={!portalUrl}
-            variant="primary"
-          >
-            {portalUrl ? "Buy credits in Stripe" : "Preparing billing…"}
-          </LoadingButton>
-        ))}
+      {!hasPlans && (
+        <LoadingButton
+          href={
+            portalStartUrl ? { url: portalStartUrl, external: true } : undefined
+          }
+          disabled={!portalStartUrl}
+          variant="primary"
+        >
+          {portalStartUrl ? "Buy credits in Stripe" : "Preparing billing…"}
+        </LoadingButton>
+      )}
       {!hasPlans && (
         <Text format={{ fontStyle: "italic" }}>
           Billing is managed in Stripe across all Growth Operations apps.

package/src/billing/PlanGrid.jsx

@@ -34,9 +34,14 @@ import { fmtMoney } from "../lib/format";
 // feature bullets, and a CTA: "Current" (disabled) for the active tier,
 // "Contact sales" for talk_to_sales tiers, else "Choose" which pre-creates a
 // checkout session for that tier's price in the selected interval.
+//
+// The Monthly/Annual toggle is PER CARD (not a single grid-wide switch): a tier
+// may offer one interval and not the other (e.g. a top tier that's monthly-only),
+// so each card owns its own interval state and only shows the toggle when it has
+// BOTH legs. A subscription still bills on one cadence — the cadence bought is
+// whatever this card's toggle shows when its "Choose" is clicked.
 function PlanCard({
   plan,
-  interval,
   billingBaseUrl,
   appKey,
   portalId,
@@ -44,6 +49,12 @@ function PlanCard({
   supportUrl,
   maxFeatures = 0,
 }) {
+  // 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;
+  const [interval, setInterval] = useState(hasAnnual ? "annual" : "monthly");
   const leg = interval === "annual" ? plan.annual : plan.monthly;
   const periodLabel = interval === "annual" ? "/yr" : "/mo";
 
@@ -53,6 +64,17 @@ function PlanCard({
       ? `${fmtMoney(leg.unit_amount, leg.currency)}${periodLabel}`
       : "Free";
 
+  // Annual savings vs. paying monthly for a year. Only when this card is showing
+  // annual AND has both legs to compare. annualFull = the struck-through "12×
+  // monthly" reference price; pct = the highlighted discount.
+  const showAnnualSavings =
+    interval === "annual" && hasMonthly && hasAnnual && plan.annual?.unit_amount;
+  const annualFull = showAnnualSavings ? plan.monthly.unit_amount * 12 : null;
+  const savingsPct =
+    showAnnualSavings && annualFull > plan.annual.unit_amount
+      ? Math.round((1 - plan.annual.unit_amount / annualFull) * 100)
+      : 0;
+
   // Direct one-click checkout link to the billing service's redirect endpoint.
   // Null until we have everything (billing host, appKey, portal, this interval's
   // price) — the button is disabled until then.
@@ -85,7 +107,33 @@ function PlanCard({
           )}
         </Flex>
 
-        <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
+        <Flex direction="row" gap="small" align="center">
+          <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
+          {savingsPct > 0 && (
+            <StatusTag variant="success">Save {savingsPct}%</StatusTag>
+          )}
+        </Flex>
+        {/* Struck-through "12× monthly" reference so the annual discount reads. */}
+        {savingsPct > 0 && (
+          <Text format={{ lineDecoration: "strikethrough", fontStyle: "italic" }}>
+            {fmtMoney(annualFull, plan.annual.currency)}/yr
+          </Text>
+        )}
+
+        {/* Per-card interval toggle — only when this tier offers both legs. */}
+        {canToggle && (
+          <ToggleGroup
+            name={`billing-interval-${plan.tier}`}
+            toggleType="radioButtonList"
+            inline={true}
+            value={interval}
+            onChange={(v) => v && setInterval(v)}
+            options={[
+              { label: "Monthly", value: "monthly" },
+              { label: "Annual", value: "annual" },
+            ]}
+          />
+        )}
 
         {plan.credits_per_period != null && (
           <Text>{plan.credits_per_period.toLocaleString()} credits / month</Text>
@@ -137,11 +185,6 @@ function PlanCard({
 
 export function PlanGrid({ context, state, appKey }) {
   const plans = state?.plans ?? [];
-  // Default to annual only if EVERY paid plan offers it; else monthly.
-  const paid = plans.filter((p) => !p.talk_to_sales && (p.monthly || p.annual));
-  const annualAvailable =
-    paid.length > 0 && paid.every((p) => p.annual);
-  const [interval, setInterval] = useState(annualAvailable ? "annual" : "monthly");
 
   if (plans.length === 0) return null;
 
@@ -162,31 +205,16 @@ export function PlanGrid({ context, state, appKey }) {
 
   return (
     <Flex direction="column" gap="medium">
-      <Flex direction="row" gap="medium" align="center" justify="start">
-        <Heading>Plans</Heading>
-        {annualAvailable && (
-          <ToggleGroup
-            name="billing-interval"
-            toggleType="radioButtonList"
-            inline={true}
-            value={interval}
-            onChange={(v) => v && setInterval(v)}
-            options={[
-              { label: "Monthly", value: "monthly" },
-              { label: "Annual", value: "annual" },
-            ]}
-          />
-        )}
-      </Flex>
+      <Heading>Plans</Heading>
 
       {/* AutoGrid(flexible): equal-width columns that wrap responsively. Card
-          height is equalized via the maxFeatures padding in PlanCard. */}
+          height is equalized via the maxFeatures padding in PlanCard. Each card
+          owns its own Monthly/Annual toggle (see PlanCard). */}
       <AutoGrid columnWidth={240} flexible={true} gap="medium">
         {plans.map((plan) => (
           <PlanCard
             key={plan.tier}
             plan={plan}
-            interval={interval}
             billingBaseUrl={billingBaseUrl}
             appKey={appKey}
             portalId={portalId}