@growth-operations/ui-shared 1.35.0 → 1.37.0

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -640,6 +640,7 @@ export function CreditsBilling({ context, state, appKey, openIframe = null }) {
         <CreditMeter
           entitlement={state?.entitlement}
           creditMeter={state?.credit_meter}
+          appName={state?.app?.name}
         />
         <LoadingButton
           href={
@@ -719,6 +720,7 @@ export function CreditsBilling({ context, state, appKey, openIframe = null }) {
       <CreditMeter
         entitlement={state?.entitlement}
         creditMeter={state?.credit_meter}
+        appName={state?.app?.name}
       />
       <PlanGrid context={context} state={state} appKey={appKey} openIframe={openIframe} />
       {!hasPlans && (

package/src/home/CreditMeter.jsx

@@ -43,8 +43,10 @@ import { resolveCreditMeter } from "../lib/creditDisplay";
 //   credits      — the /v1/home credits block (optional; the authoritative
 //                  two-bucket monthly/additional numbers + renews_on when the
 //                  backend carries it — see CONTRACT.md).
-export function CreditMeter({ entitlement, creditMeter, credits = null }) {
-  const view = resolveCreditMeter(entitlement, creditMeter, credits);
+//   appName      — display name for the trial-ended alert copy (optional;
+//                  hosts pass state.app.name — falls back to "this app").
+export function CreditMeter({ entitlement, creditMeter, credits = null, appName = null }) {
+  const view = resolveCreditMeter(entitlement, creditMeter, credits, { appName });
   if (!view) return null;
 
   const { granted, used, remaining, bank, tagVariant, tagLabel, poolBarVariant, bankBarVariant, alert } = view;

package/src/lib/creditDisplay.js

@@ -25,6 +25,11 @@
 //   double-guards so a stale/mixed payload can't regress the 2026-09-02
 //   incident where a paying, overage account was shown a blocking
 //   "Depleted"/"out of credits" panel).
+//
+// TRIAL ENDED overrides all of the above for FREE accounts (Andrew
+// 2026-11-11): the backend maps an expired grant clock onto depleted even
+// with credits left, so a lapsed clock reads tag "Trial ended" + the
+// trial-ended alert, never "Depleted"/"out of credits".
 import { daysUntil, SUPPORT_FOOTER } from "./format";
 
 // True when the account has (or ever had) a top-up bank. Note the CreditMeter
@@ -108,7 +113,7 @@ export function creditsBlockOf(state) {
   return state.state?.credits ?? state.credits ?? null;
 }
 
-export function resolveCreditMeter(entitlement, creditMeter, credits = null) {
+export function resolveCreditMeter(entitlement, creditMeter, credits = null, { appName } = {}) {
   const ent = entitlement?.mode === "credits" ? entitlement : null;
   const meter = creditMeter ?? null;
   // The state.credits block stands on its own (it IS the credit data), so it
@@ -161,6 +166,16 @@ export function resolveCreditMeter(entitlement, creditMeter, credits = null) {
       : !onPaidPlan && (ent?.depleted === true || remaining <= 0);
   const low = !depleted && !overIncluded && remaining <= lowThreshold;
 
+  // Trial ended (free account, grant clock lapsed) outranks every credit
+  // reading on the tag/alert — the backend maps an expired grant onto
+  // depleted even with credits left, and the lapsed clock is the true story
+  // (Andrew 2026-11-11; the same override the top BillingBanner applies).
+  const trialDaysLeft =
+    !onPaidPlan && ent?.grant_expires_at != null
+      ? daysUntil(ent.grant_expires_at)
+      : null;
+  const trialEnded = trialDaysLeft != null && trialDaysLeft <= 0;
+
   // Bank split. Drawdown is monthly-first, so of the combined `remaining` the
   // bank portion is bankRemaining and the rest is pool remaining; the pool
   // segment's full size is the combined denominator minus the bank.
@@ -216,7 +231,10 @@ export function resolveCreditMeter(entitlement, creditMeter, credits = null) {
 
   let tagVariant;
   let tagLabel;
-  if (depleted) {
+  if (trialEnded) {
+    tagVariant = "danger";
+    tagLabel = "Trial ended";
+  } else if (depleted) {
     tagVariant = "danger";
     tagLabel = "Depleted";
   } else if (thresholdState === "top_up_failed") {
@@ -253,7 +271,13 @@ export function resolveCreditMeter(entitlement, creditMeter, credits = null) {
   // The inline meter alert mirrors the banner's messaging at the point of
   // glance. Legacy branches keep their pre-top-up copy byte-for-byte.
   let alert = null;
-  if (depleted) {
+  if (trialEnded) {
+    alert = {
+      variant: "error",
+      title: "Your trial has ended",
+      message: `Your free trial has ended. Select a plan to continue use of ${appName ?? "this app"}.`,
+    };
+  } else if (depleted) {
     alert = {
       variant: "error",
       title: "You're out of credits",
@@ -321,12 +345,19 @@ export function resolveCreditMeter(entitlement, creditMeter, credits = null) {
 // owner) is reused VERBATIM here — only the placement and the trial-ended
 // variant (warning -> error: it stops the app) changed.
 //
-// First match wins inside trialStateOf, mirroring the retired resolver:
-//   out of credits  — the free grant is spent (depleted / remaining <= 0).
-//                     Beats the clock: a burned-through grant is "out of
-//                     credits" even with days left.
-//   trial ended     — the grant's 30-day clock ran out with credits left.
-//   trial active    — the clock is still running: "[XX] trial days remaining".
+// Andrew 2026-11-11: the trial CLOCK outranks the credit count. Once the
+// 30-day window lapses, "trial ended" is the ONLY banner — it overrides the
+// credits reading even when the grant is also spent. This ordering matters
+// because the backend maps an EXPIRED grant (credits left) onto depleted /
+// threshold_state "depleted" (CreditState.to_entitlement), so the "explicit"
+// out-of-credits signals often MEAN "trial over", not "credits gone" —
+// portal 52109545 flew "You're out of credits" with 49/100 credits left.
+//
+// First match wins inside trialStateOf:
+//   trial ended    — the grant's 30-day clock ran out (credits left or not).
+//   out of credits — the free grant is spent INSIDE the window (depleted /
+//                    remaining <= 0 with days left, or no clock on record).
+//   trial active   — the clock is still running: "[XX] trial days remaining".
 // Returns { kind, title, body } or null (no grant clock on record).
 function trialStateOf(ent, { appName } = {}) {
   const name = appName ?? "this app";
@@ -336,13 +367,6 @@ function trialStateOf(ent, { appName } = {}) {
   const daysLeft =
     ent.grant_expires_at != null ? daysUntil(ent.grant_expires_at) : null;
 
-  if (ent.depleted === true || remaining <= 0) {
-    return {
-      kind: "out_of_credits",
-      title: "You're out of credits",
-      body: `You have used ${used}/${granted} free credits. Select one of the plans below to continue use of ${name}.`,
-    };
-  }
   if (daysLeft != null && daysLeft <= 0) {
     return {
       kind: "trial_ended",
@@ -350,6 +374,18 @@ function trialStateOf(ent, { appName } = {}) {
       body: `Your free trial has ended. Select a plan to continue use of ${name}.`,
     };
   }
+  if (ent.depleted === true || remaining <= 0) {
+    return {
+      kind: "out_of_credits",
+      // True when a live trial clock is on record (a lapsed clock returned
+      // trial_ended above). The banner's hard-depleted branch keys on this:
+      // live-clock accounts fly the slide's used-X/Y copy (Andrew 2026-11-11);
+      // clockless free accounts keep the generic pre-top-up line.
+      liveClock: daysLeft != null,
+      title: "You're out of credits",
+      body: `You have used ${used}/${granted} free credits. Select one of the plans below to continue use of ${name}.`,
+    };
+  }
   if (daysLeft != null) {
     return {
       kind: "trial_active",
@@ -395,13 +431,18 @@ function trialBannerView(trial) {
 //   1. top_up_pending  (info)    — transient in-flight top-up
 //   2. top_up_failed   (error)   — card on file failed to process
 //   3. limit_reached   (warning)
-//   4. depleted        (error)   — THE out-of-credits block; existing
-//                                  byte-identical copy wins whenever the
-//                                  explicit signals (threshold_state /
-//                                  depleted flag / entitled=false) fire
-//   5. trial out_of_credits (error) — free grant spent WITHOUT the explicit
+//   4. trial ended     (error)   — the grant clock ran out; the ONLY banner
+//                                  after day 30 (Andrew 2026-11-11), beating
+//                                  every credits reading — the backend maps
+//                                  expiry onto depleted / threshold_state
+//                                  "depleted", so an "explicit" depleted often
+//                                  MEANS trial over (portal 52109545)
+//   5. depleted        (error)   — THE out-of-credits block. A free account
+//                                  with a live trial clock flies the slide's
+//                                  used-X/Y trial copy; clockless free and
+//                                  topup-paid accounts keep the generic copy
+//   6. trial out_of_credits (error) — free grant spent WITHOUT the explicit
 //                                  signals (remaining <= 0 catch-all)
-//   6. trial ended     (error)   — the grant clock ran out with credits left
 //   7. over_included   (warning) — paid metered overage (never blocked)
 //   8. running low     (warning) — free grant under low_threshold
 //   9. trial active    (warning) — the countdown; yields to running-low, the
@@ -448,12 +489,15 @@ export function resolveBillingBanner(entitlement, { actionLabel, actionsNoun, ap
   }
 
   // The free-grant trial states (null for paid plans — a paid plan is past
-  // the trial). Computed BEFORE the depleted branch: a lapsed trial clock
-  // explains a legacy `entitled: false` reading better than "out of credits"
-  // (credits remain; the GRANT expired), so trial_ended wins over that one
-  // legacy signal below — but never over an explicit depleted flag or
-  // threshold_state "depleted".
+  // the trial). TRIAL ENDED is resolved BEFORE the depleted branch: the
+  // backend maps an expired grant onto depleted / threshold_state "depleted"
+  // even with credits left, and after the 30-day window the lapsed clock is
+  // the true story (Andrew 2026-11-11 — portal 52109545 showed "You're out of
+  // credits" with 49/100 credits left).
   const trial = onPaidPlan ? null : trialStateOf(ent, { appName });
+  if (trial?.kind === "trial_ended") {
+    return trialBannerView(trial);
+  }
 
   // --- Hard-blocked. threshold_state "depleted" is the ONLY blocking state
   // (a topup-model paid plan blocks at true zero); `over_included` overrides
@@ -464,11 +508,15 @@ export function resolveBillingBanner(entitlement, { actionLabel, actionsNoun, ap
   const depleted =
     thresholdState != null
       ? thresholdState === "depleted" && !overIncluded
-      : !onPaidPlan &&
-        (ent.depleted === true ||
-          (ent.entitled === false && trial?.kind !== "trial_ended"));
+      : !onPaidPlan && (ent.depleted === true || ent.entitled === false);
 
   if (depleted) {
+    // A free TRIAL account at 100/100 inside the window flies the slide's
+    // used-X/Y trial copy (Andrew 2026-11-11); the generic line below is for
+    // clockless free accounts and topup-model paid plans blocked at zero.
+    if (trial?.kind === "out_of_credits" && trial.liveClock) {
+      return trialBannerView(trial);
+    }
     return {
       variant: "error",
       title: "You're out of credits",
@@ -478,9 +526,9 @@ export function resolveBillingBanner(entitlement, { actionLabel, actionsNoun, ap
       cta: { kind: "billing", label: "Go to Billing →" },
     };
   }
-  // Free-grant blockers the explicit signals didn't catch: the spent grant
-  // (remaining <= 0 without any flag) and the lapsed trial clock.
-  if (trial && (trial.kind === "out_of_credits" || trial.kind === "trial_ended")) {
+  // The spent free grant the explicit signals didn't catch (remaining <= 0
+  // without any flag, clock still running).
+  if (trial?.kind === "out_of_credits") {
     return trialBannerView(trial);
   }
   if (overIncluded) {

package/src/support/SupportTab.jsx

@@ -12,7 +12,6 @@
 //   supportPath — the app's support route path, e.g.
 //                 "/v1/hubspot/app_pages/<app_key>/support" (base-hosted) or
 //                 "/api/v1/support" (self-hosted).
-//   appName     — display name, used in headings/success copy.
 //   supportUrl  — external support link shown as a fallback on error.
 import React, { useState } from "react";
 import {
@@ -37,7 +36,7 @@ import {
   validateSupportFields,
 } from "./supportLogic";
 
-export function SupportTab({ context, supportPath, appName = "the app", supportUrl }) {
+export function SupportTab({ context, supportPath, supportUrl }) {
   const [fields, setFields] = useState({
     firstname: context.user?.firstName ?? "",
     lastname: context.user?.lastName ?? "",
@@ -115,17 +114,14 @@ export function SupportTab({ context, supportPath, appName = "the app", supportU
   return (
     <Flex direction="column" gap="medium">
       <Flex direction="column" gap="small">
-        <Heading>Contact {appName} support</Heading>
+        <Heading>Contact Us</Heading>
         <Text>
-          Send us a message and we'll get back to you. For urgent issues you
-          can also{" "}
-          {supportUrl ? (
-            <Link href={{ url: supportUrl, external: true }}>
-              use our contact page
-            </Link>
-          ) : (
-            "use our contact page"
-          )}
+          Or shoot us your question at{" "}
+          <Link
+            href={{ url: "mailto:info@growthoperationsco.com", external: true }}
+          >
+            info@growthoperationsco.com
+          </Link>
           .
         </Text>
       </Flex>

package/src/usage/UsageTab.jsx

@@ -69,6 +69,7 @@ export function UsageTab({
           entitlement={state.entitlement}
           creditMeter={state.credit_meter}
           credits={creditsBlockOf(state)}
+          appName={state?.app?.name ?? appName}
         />
       )}