@growth-operations/ui-shared 1.6.5 → 1.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "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"
@@ -232,13 +232,14 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
           ctaLabel="Upgrade to"
           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,
@@ -301,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={
@@ -345,7 +346,21 @@ function LegacyBilling({ state }) {
   );
 }
 
-export function BillingTab({ context, state, appKey }) {
+function CompedBilling() {
+  return (
+    <Alert variant="success">
+      <Flex direction="column" gap="extra-small">
+        <Text format={{ fontWeight: "bold" }}>Free access</Text>
+        <Text>
+          Your account has been granted complimentary access as a Growth Operations partner or
+          team member. No payment method or subscription is required.
+        </Text>
+      </Flex>
+    </Alert>
+  );
+}
+
+export function BillingTab({ context, state, appKey, openIframe = null }) {
   const mode = state?.entitlement?.mode;
 
   return (
@@ -354,9 +369,11 @@ 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} />
+      ) : mode === "comped" ? (
+        <CompedBilling />
       ) : (
-        <TrialSubscriptionBilling context={context} state={state} appKey={appKey} />
+        <TrialSubscriptionBilling context={context} state={state} appKey={appKey} openIframe={openIframe} />
       )}
     </Flex>
   );

package/src/billing/PlanGrid.jsx

@@ -60,6 +60,13 @@ function PlanCard({
   // 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.
@@ -184,13 +191,39 @@ function PlanCard({
             Talk to sales to switch
           </Button>
         ) : plan.talk_to_sales ? (
-          <Button
-            href={supportUrl ? { url: supportUrl, external: true } : undefined}
-            disabled={!supportUrl}
-            variant="secondary"
-          >
-            Contact sales
-          </Button>
+          // 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.
@@ -232,6 +265,9 @@ export function PlanGrid({
   // 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 ?? [];
 
@@ -273,6 +309,7 @@ export function PlanGrid({
             endpoint={endpoint}
             ctaLabel={ctaLabel}
             currentOrder={currentOrder}
+            openIframe={openIframe}
           />
         ))}
       </AutoGrid>

package/src/home/HealthHero.jsx

@@ -50,6 +50,17 @@ export function HealthHero({ appName, state }) {
     ) : null;
   }
 
+  if (ent.mode === "comped") {
+    return (
+      <Flex direction="column" gap="small">
+        {name && <Heading>{name}</Heading>}
+        <Alert title="Free access" variant="success">
+          <Text>Partner or team member access — no subscription required.</Text>
+        </Alert>
+      </Flex>
+    );
+  }
+
   if (ent.mode === "credits") {
     const remaining = ent.remaining ?? 0;
     const depleted = ent.depleted === true || remaining <= 0;