@growth-operations/ui-shared 1.3.0 → 1.4.0

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -6,6 +6,7 @@ import {
   Text,
   Tile,
   LoadingButton,
+  Button,
   Alert,
 } from "@hubspot/ui-extensions";
 import { useStrictModeEffect } from "../lib/useStrictModeEffect";
@@ -339,13 +340,38 @@ function CreditsBilling({ context, state, appKey }) {
   );
 }
 
+// Legacy (Anvil) installs are billed through their existing subscription, NOT
+// the credit model. Render a calm informational panel — never the credit meter
+// or plan picker, which would falsely tell a paying Anvil customer they're out
+// of credits and push them to buy a credit plan.
+function LegacyBilling({ state }) {
+  const manageUrl = state?.legacy_billing_url;
+  return (
+    <Flex direction="column" gap="medium">
+      <Alert title="Managed through your existing subscription" variant="info">
+        <Text>
+          Your plan and payment method are billed through your existing
+          subscription. There's nothing to set up here.
+        </Text>
+      </Alert>
+      {manageUrl && (
+        <Button href={{ url: manageUrl, external: true }} variant="secondary">
+          Manage subscription
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
 export function BillingTab({ context, state, appKey }) {
   const mode = state?.entitlement?.mode;
 
   return (
     <Flex direction="column" gap="medium">
       <Heading>Billing</Heading>
-      {mode === "credits" ? (
+      {mode === "legacy" ? (
+        <LegacyBilling state={state} />
+      ) : mode === "credits" ? (
         <CreditsBilling context={context} state={state} appKey={appKey} />
       ) : (
         <TrialSubscriptionBilling context={context} state={state} appKey={appKey} />

package/src/usage/UsageTab.jsx

@@ -87,8 +87,12 @@ export function UsageTab({
 
   const series = data?.series ?? [];
   const usedInWindow = data?.used_in_window ?? 0;
-  const remaining = data?.remaining ?? 0;
-  const granted = data?.granted ?? 0;
+  // Legacy (Anvil) installs have no credit balance — the backend returns null
+  // granted/remaining. Show only the window usage stat for them; credit installs
+  // get the full granted/remaining breakdown.
+  const remaining = data?.remaining;
+  const granted = data?.granted;
+  const hasBalance = remaining != null && granted != null;
   const hasActivity = usedInWindow > 0;
 
   return (
@@ -106,9 +110,9 @@ export function UsageTab({
 
       <Tile>
         <Statistics>
-          <StatisticsItem label="Credits used (window)" number={usedInWindow} />
-          <StatisticsItem label="Remaining" number={remaining} />
-          <StatisticsItem label="Granted" number={granted} />
+          <StatisticsItem label="Used (window)" number={usedInWindow} />
+          {hasBalance && <StatisticsItem label="Remaining" number={remaining} />}
+          {hasBalance && <StatisticsItem label="Granted" number={granted} />}
         </Statistics>
       </Tile>