@growth-operations/ui-shared 1.8.0 → 1.10.0

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   Flex,
   Heading,
@@ -11,6 +11,46 @@ import {
 import { fmtDate, daysUntil } from "../lib/format";
 import { CreditMeter } from "../home/CreditMeter";
 import { PlanGrid } from "./PlanGrid";
+import { refreshBillingActionTokens } from "../sdk/billing";
+
+// Billing action tokens (see common.billing.action_token) are signed with a
+// 5-minute TTL — short enough that a customer who opens the tab and comes
+// back later hits an expired Stripe link. Refresh at a fixed interval well
+// under that TTL so a normally-paced re-render always has a token with
+// several minutes of life left; if a refresh call is slow or fails, the
+// still-live token already in state keeps working until the next tick.
+const TOKEN_REFRESH_INTERVAL_MS = 3 * 60 * 1000;
+
+// Re-mints state.billing_action_tokens on an interval so long-open tabs never
+// hand the customer an expired Stripe link. Returns the latest known token
+// set — the initial props value until the first successful refresh, then
+// whatever the service last minted. Silently keeps the previous tokens on a
+// failed refresh (e.g. transient network blip); the tokens simply expire on
+// their own schedule as before this loop existed, which is a strict
+// improvement (some refreshes succeeding beats none).
+function useRefreshedBillingActionTokens(billingBaseUrl, initialTokens) {
+  const [tokens, setTokens] = useState(initialTokens ?? null);
+
+  useEffect(() => {
+    setTokens(initialTokens ?? null);
+  }, [initialTokens]);
+
+  useEffect(() => {
+    const portalToken = initialTokens?.portal;
+    if (!billingBaseUrl || !portalToken) return undefined;
+
+    const id = setInterval(() => {
+      refreshBillingActionTokens(billingBaseUrl, portalToken)
+        .then((fresh) => setTokens(fresh))
+        .catch(() => {});
+    }, TOKEN_REFRESH_INTERVAL_MS);
+
+    return () => clearInterval(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [billingBaseUrl, initialTokens?.portal]);
+
+  return tokens;
+}
 
 // The shared Billing tab for all Growth Operations apps. Branches on the
 // entitlement union (CONTRACT.md):
@@ -412,6 +452,20 @@ export function BillingTab({ context, state, appKey, openIframe = null }) {
   const mode = state?.entitlement?.mode;
   const isSuperAdmin = state?.user?.is_super_admin === true;
 
+  // Keep the billing action tokens (portal/checkout/upgrade Stripe links)
+  // fresh for as long as this tab stays open. Overriding billing_action_tokens
+  // on a copy of `state` means every descendant (TrialSubscriptionBilling,
+  // CreditsBilling, PlanGrid) picks up refreshed tokens through the same
+  // `state?.billing_action_tokens` reads they already had — no prop threading.
+  const refreshedTokens = useRefreshedBillingActionTokens(
+    state?.billing_base_url,
+    state?.billing_action_tokens
+  );
+  const billingState =
+    refreshedTokens && refreshedTokens !== state?.billing_action_tokens
+      ? { ...state, billing_action_tokens: refreshedTokens }
+      : state;
+
   return (
     <Flex direction="column" gap="medium">
       <Heading>Billing</Heading>
@@ -420,13 +474,13 @@ export function BillingTab({ context, state, appKey, openIframe = null }) {
           <Text>Billing settings are only available to super admins.</Text>
         </Alert>
       ) : mode === "legacy" ? (
-        <LegacyBilling state={state} />
+        <LegacyBilling state={billingState} />
       ) : mode === "credits" ? (
-        <CreditsBilling context={context} state={state} appKey={appKey} openIframe={openIframe} />
+        <CreditsBilling context={context} state={billingState} appKey={appKey} openIframe={openIframe} />
       ) : mode === "comped" ? (
         <CompedBilling />
       ) : (
-        <TrialSubscriptionBilling context={context} state={state} appKey={appKey} openIframe={openIframe} />
+        <TrialSubscriptionBilling context={context} state={billingState} appKey={appKey} openIframe={openIframe} />
       )}
     </Flex>
   );

package/src/billing/PlanGrid.jsx

@@ -118,15 +118,24 @@ function PlanCard({
   const leg = interval === "annual" ? plan.annual : plan.monthly;
   const periodLabel = interval === "annual" ? "/yr" : "/mo";
 
+  // Annual is billed as one yearly charge, but SaaS pricing convention shows
+  // it as an equivalent MONTHLY rate up front (the full annual total reads as
+  // sticker shock) — the actual "$X/yr" total moves to a smaller line below.
+  const monthlyEquivalent =
+    interval === "annual" && leg ? Math.round(leg.unit_amount / 12) : null;
+
   const priceText = plan.talk_to_sales
     ? "Custom"
     : leg
-      ? `${fmtMoney(leg.unit_amount, leg.currency)}${periodLabel}`
+      ? monthlyEquivalent != null
+        ? `${fmtMoney(monthlyEquivalent, leg.currency)}/mo`
+        : `${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.
+  // annual AND has both legs to compare. annualFull = the un-discounted "12×
+  // monthly" reference used only to compute savingsPct — never rendered as a
+  // dollar figure itself (see the "no full-year price shown" note above).
   const showAnnualSavings =
     interval === "annual" && hasMonthly && hasAnnual && plan.annual?.unit_amount;
   const annualFull = showAnnualSavings ? plan.monthly.unit_amount * 12 : null;
@@ -185,10 +194,16 @@ function PlanCard({
             <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
+        {/* Annual is billed as one yearly charge — show the real total in a
+            lighter line under the monthly-equivalent headline price, instead
+            of a struck-through full-year dollar figure. Deliberately no
+            "$X/yr" reference price shown as a big number anywhere on this
+            card — only the small parenthetical and the Save % badge above.
+            variant "microcopy" is the SDK's de-emphasized text style (no
+            fontColor option exists on Text). */}
+        {monthlyEquivalent != null && (
+          <Text variant="microcopy">
+            (or {fmtMoney(leg.unit_amount, leg.currency)}/yr)
           </Text>
         )}
 

package/src/index.js

@@ -91,4 +91,6 @@ export {
   TokenProvider,
   useToken,
   TokenContext,
+  // Billing service
+  refreshBillingActionTokens,
 } from "./sdk/index";

package/src/sdk/billing.js

@@ -0,0 +1,28 @@
+// Billing-service SDK — direct calls to growth-ops-apps-app's billing
+// endpoints (NOT the calling app's own backend, NOT api.hubapi.com). Every
+// consuming app already allowlists ${BILLING_BASE_URL} under
+// permittedUrls.fetch (it's also used for the Stripe-redirect <a href> links
+// and the embedded-checkout iframe host), so hubspot.fetch can reach it
+// directly with no new hsmeta changes.
+//
+// Auth here is the signed `token` query param (see
+// common.billing.action_token) — NOT an Authorization header — so this is a
+// bare hubspot.fetch, not callHubSpotApi (which always attaches a bearer
+// token these endpoints don't expect).
+import { hubspot, logger } from "@hubspot/ui-extensions";
+
+// Re-mint a fresh { portal, checkout, upgrade } token set from a still-valid
+// one. See billing.py's /v1/billing/refresh-tokens: it verifies `token`
+// (whichever action it authorizes — BillingTab always holds/passes `portal`)
+// and returns a brand-new set signed for the same app_key/portal_id. Throws
+// on a 401 (token already expired) — the caller's next /v1/home load is the
+// recovery path for that, same as before this refresh loop existed.
+export async function refreshBillingActionTokens(billingBaseUrl, token) {
+  const url = `${billingBaseUrl}/v1/billing/refresh-tokens?token=${encodeURIComponent(token)}`;
+  const response = await hubspot.fetch(url, { timeout: 10000, method: "GET" });
+  if (!response.ok) {
+    logger.warn(`[Billing] refresh-tokens failed: ${response.status}`);
+    throw new Error(`refresh-tokens failed with status ${response.status}`);
+  }
+  return response.json();
+}

package/src/sdk/index.js

@@ -32,3 +32,6 @@ export {
 // Token lifecycle.
 export { getShortLivedToken, isTokenExpired } from "./token/getShortLivedToken";
 export { TokenProvider, useToken, TokenContext } from "./token/TokenContext";
+
+// Billing service (growth-ops-apps-app), NOT the calling app's own backend.
+export { refreshBillingActionTokens } from "./billing";