@growth-operations/ui-shared 1.0.10 → 1.2.0

package/package.json

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

package/src/alerts/AlertsTab.jsx

@@ -0,0 +1,246 @@
+// AlertsTab — the shared customer alerts table, extensible per app.
+//
+// Every Growth Ops app surfaces the same base Alert shape ({ id, level, title,
+// message, created_at, dismissable, action_name, action_url }) from the same
+// serve/dismiss contract (common.alerts + the app's alerts router). This owns
+// the shared chrome — level filter, pagination, fetch, and per-row dismiss —
+// and exposes two extension points so apps with richer alert shapes (sparkfly's
+// merge / replace-email / skip; toast's connection-lost retry) keep one table
+// instead of forking it:
+//
+//   - renderRowActions(alert, { context, refresh }) -> node
+//       Extra action UI rendered in the actions cell ALONGSIDE Dismiss. Use for
+//       app-specific buttons that act on the alert then refresh the table.
+//   - renderRow(alert, { context, refresh, dismiss, fetchOptions }) -> <TableRow>
+//       Full per-row override (escape hatch) for apps whose row needs custom
+//       layout — expandable merge panels, inline inputs, extra columns. When
+//       provided it replaces the default row entirely; the app owns the cells.
+//
+// Omit both -> default rows (level tag, title/message + action link, time,
+// Dismiss). Self-hosted apps (sparkfly, toast) call with default getAlerts/
+// dismissAlert paths; base-hosted apps pass `basePath` + `portalId` so the SDK
+// targets the base alerts route.
+import React, { useState, useEffect } from "react";
+import {
+  Alert,
+  EmptyState,
+  Text,
+  Link,
+  Button,
+  Table,
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  Select,
+  Tag,
+  Flex,
+  LoadingSpinner,
+} from "@hubspot/ui-extensions";
+
+import { getAlerts, dismissAlert } from "../sdk/app/alerts";
+import { fmtDate } from "../lib/format";
+
+const PAGE_SIZE = 10;
+
+const LEVEL_OPTIONS = [
+  { label: "All Levels", value: "all" },
+  { label: "Info", value: "info" },
+  { label: "Warning", value: "warning" },
+  { label: "Error", value: "error" },
+  { label: "Critical", value: "critical" },
+];
+
+// Alert level -> HubSpot Tag variant.
+const LEVEL_VARIANT = {
+  info: "default",
+  warning: "warning",
+  error: "error",
+  critical: "error",
+};
+
+function DefaultAlertRow({
+  context,
+  alert,
+  refresh,
+  fetchOptions,
+  renderRowActions,
+}) {
+  const [dismissing, setDismissing] = useState(false);
+
+  const dismiss = async () => {
+    setDismissing(true);
+    try {
+      await dismissAlert(context, alert.id, fetchOptions);
+      await refresh();
+    } finally {
+      setDismissing(false);
+    }
+  };
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Tag variant={LEVEL_VARIANT[alert.level] || "default"}>
+          {alert.level}
+        </Tag>
+      </TableCell>
+      <TableCell>
+        <Flex direction="column" gap="extra-small">
+          <Text format={{ fontWeight: "bold" }}>{alert.title}</Text>
+          <Text>{alert.message}</Text>
+          {alert.action_url && alert.action_name && (
+            <Link href={alert.action_url}>{alert.action_name}</Link>
+          )}
+        </Flex>
+      </TableCell>
+      <TableCell>{fmtDate(alert.created_at)}</TableCell>
+      <TableCell>
+        <Flex direction="row" gap="small" align="center">
+          {/* App-specific actions render before Dismiss. */}
+          {renderRowActions && renderRowActions(alert, { context, refresh })}
+          {alert.dismissable && (
+            <Button
+              variant="secondary"
+              size="xs"
+              disabled={dismissing}
+              onClick={dismiss}
+            >
+              {dismissing ? "Dismissing…" : "Dismiss"}
+            </Button>
+          )}
+        </Flex>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// context: extension context. basePath/portalId: forwarded to getAlerts/
+// dismissAlert (base-hosted apps pass both; self-hosted apps omit them).
+// renderRowActions / renderRow: per-app extension points (see file header).
+export function AlertsTab({
+  context,
+  basePath,
+  portalId,
+  renderRowActions,
+  renderRow,
+}) {
+  const [alerts, setAlerts] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [level, setLevel] = useState("all");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // The options the SDK needs to target the right backend (base vs self-hosted).
+  const fetchOptions = { basePath, portalId };
+
+  const load = async (pageNumber, levelValue) => {
+    setLoading(true);
+    try {
+      const response = await getAlerts(context, {
+        offset: (pageNumber - 1) * PAGE_SIZE,
+        limit: PAGE_SIZE,
+        orderBy: "created_at",
+        orderDirection: "DESCENDING",
+        filterField: levelValue !== "all" ? "level" : undefined,
+        filterValue: levelValue !== "all" ? levelValue : undefined,
+        ...fetchOptions,
+      });
+      setAlerts(response.alerts || []);
+      setTotal(response.total || 0);
+      setPage(pageNumber);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      setAlerts([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load(1, level);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [context]);
+
+  const onLevelChange = (value) => {
+    setLevel(value);
+    load(1, value);
+  };
+
+  if (error) {
+    return (
+      <Alert title="Couldn't load alerts" variant="error">
+        {error}
+      </Alert>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="medium">
+      <Select
+        label="Filter by level"
+        name="levelFilter"
+        options={LEVEL_OPTIONS}
+        value={level}
+        onChange={onLevelChange}
+      />
+      {loading ? (
+        <LoadingSpinner showLabel label="Loading alerts…" />
+      ) : !alerts.length ? (
+        <EmptyState title="No alerts" layout="vertical">
+          <Text>There are currently no alerts that need your attention.</Text>
+        </EmptyState>
+      ) : (
+        <Table
+          paginated={total > PAGE_SIZE}
+          page={page}
+          pageCount={Math.ceil(total / PAGE_SIZE)}
+          onPageChange={(p) => load(p, level)}
+        >
+          <TableHead>
+            <TableHeader width="min">Level</TableHeader>
+            <TableHeader width="max">Alert</TableHeader>
+            <TableHeader width="min">Time</TableHeader>
+            <TableHeader width="min"></TableHeader>
+          </TableHead>
+          <TableBody>
+            {alerts.map((alert) => {
+              const refresh = () => load(page, level);
+              // Full-row override escape hatch: the app owns the cells.
+              if (renderRow) {
+                const dismiss = () =>
+                  dismissAlert(context, alert.id, fetchOptions).then(refresh);
+                return (
+                  <React.Fragment key={alert.id}>
+                    {renderRow(alert, {
+                      context,
+                      refresh,
+                      dismiss,
+                      fetchOptions,
+                    })}
+                  </React.Fragment>
+                );
+              }
+              return (
+                <DefaultAlertRow
+                  key={alert.id}
+                  context={context}
+                  alert={alert}
+                  fetchOptions={fetchOptions}
+                  refresh={refresh}
+                  renderRowActions={renderRowActions}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </Flex>
+  );
+}
+
+export default AlertsTab;

package/src/billing/BillingTab.jsx

@@ -11,6 +11,7 @@ import {
 import { useStrictModeEffect } from "../lib/useStrictModeEffect";
 import { fmtDate, daysUntil } from "../lib/format";
 import { CreditMeter } from "../home/CreditMeter";
+import { PlanGrid } from "./PlanGrid";
 
 // The shared Billing tab for all Growth Operations apps. Branches on the
 // entitlement union (CONTRACT.md):
@@ -284,11 +285,17 @@ function TrialSubscriptionBilling({ context, state, appKey }) {
 }
 
 function CreditsBilling({ context, state, appKey }) {
-  // NOTE: the credit-pack / paid-allowance checkout backend is net-new and
-  // pending. For v1 the "Pick a plan" / "Buy credits" CTA reuses the same
-  // Stripe portal session pattern (routes to the portal); swap the endpoint to
-  // the credit checkout once that backend lands.
-  const { portalUrl, loading, error } = usePortalSession({ context, state, appKey });
+  // The Stripe portal session lets an EXISTING paid customer manage their plan
+  // / payment method / invoices (same pattern as the trial arm). NEW plan
+  // selection is the <PlanGrid> below, which pre-creates a per-tier checkout.
+  const { portalUrl, loading, error, notReady } = usePortalSession({
+    context,
+    state,
+    appKey,
+  });
+
+  const hasPlans = (state?.plans?.length ?? 0) > 0;
+  const onPaidPlan = !!state?.entitlement?.plan;
 
   return (
     <Flex direction="column" gap="medium">
@@ -297,26 +304,36 @@ function CreditsBilling({ context, state, appKey }) {
         creditMeter={state?.credit_meter}
       />
 
-      {/* PRIMARY CTA at top: pick a plan / buy credits. Button-with-href so it
-          reads as a real button; LoadingButton shows the prepared/loading state. */}
-      {error ? (
-        <Alert title="Couldn't open checkout" variant="danger">
-          <Text>{error}</Text>
-        </Alert>
-      ) : (
-        <LoadingButton
-          href={portalUrl ? { url: portalUrl, external: true } : undefined}
-          loading={loading}
-          disabled={!portalUrl}
-          variant="primary"
-        >
-          {portalUrl ? "Pick a plan or buy credits" : "Preparing checkout…"}
-        </LoadingButton>
-      )}
+      {/* The dynamically-rendered upgrade path (tiers from the Stripe catalog).
+          Renders nothing if no plans are mirrored yet. */}
+      <PlanGrid context={context} state={state} appKey={appKey} />
+
+      {/* Manage-billing link: relevant once the customer is on a paid plan
+          (change/cancel/invoices in Stripe). Hidden in the not-ready
+          (un-provisioned) state. When no plans are mirrored AND not on a paid
+          plan, fall back to the portal as the only CTA so the tab isn't empty. */}
+      {!notReady && (onPaidPlan || !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={onPaidPlan ? "secondary" : "primary"}
+          >
+            {portalUrl
+              ? onPaidPlan
+                ? "Manage billing in Stripe"
+                : "Buy credits in Stripe"
+              : "Preparing billing…"}
+          </LoadingButton>
+        ))}
 
       <Text format={{ fontStyle: "italic" }}>
-        Top up or move to a paid monthly allowance to keep going. Billing is
-        managed in Stripe across all Growth Operations apps.
+        Billing is managed in Stripe across all Growth Operations apps.
       </Text>
     </Flex>
   );

package/src/billing/PlanGrid.jsx

@@ -0,0 +1,208 @@
+import React, { useState } from "react";
+import {
+  hubspot,
+  Flex,
+  Tile,
+  Text,
+  Heading,
+  StatusTag,
+  LoadingButton,
+  Button,
+  Link,
+  Alert,
+  ToggleGroup,
+} from "@hubspot/ui-extensions";
+import { fmtMoney } from "../lib/format";
+
+// The credit-app upgrade path: a dynamically-rendered grid of the pickable
+// plans (tiers) a customer can move to, driven entirely by the backend `plans`
+// block (CONTRACT.md → common.billing.catalog.get_plans). The shared package is
+// presentational — it never hardcodes tiers/prices/features; everything comes
+// from the Stripe catalog mirror via the payload.
+//
+// Per-tier checkout follows the §5.3 UI-extension gotchas: Stripe can't be
+// iframed and there's no open-URL action — only <Link>/Button-with-href, whose
+// href must exist before render. So a tier's "Choose" click POSTs to the
+// billing service to PRE-CREATE a hosted checkout session for that price_id,
+// then renders the returned URL as an external link the customer clicks. The
+// extension can't read Stripe's redirect params (sandboxed iframe), so the
+// post-payment credit grant is server-side (Stripe webhook → grant_credits).
+//
+// Props:
+//   context — UI-extension serverless context (context.portal.id).
+//   state   — the /v1/home payload (plans[], billing_base_url, app_id).
+//   appKey  — the billing app_key for THIS app (always a prop, never hardcoded).
+
+// One plan card. Shows tier name, price for the selected interval, credits,
+// 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.
+function PlanCard({ plan, interval, onChoose, choosing, checkoutUrl, supportUrl }) {
+  const leg = interval === "annual" ? plan.annual : plan.monthly;
+  const periodLabel = interval === "annual" ? "/yr" : "/mo";
+
+  const priceText = plan.talk_to_sales
+    ? "Custom"
+    : leg
+      ? `${fmtMoney(leg.unit_amount, leg.currency)}${periodLabel}`
+      : "Free";
+
+  return (
+    <Tile>
+      <Flex direction="column" gap="small">
+        <Flex direction="row" gap="small" align="center">
+          <Heading>{plan.name ?? plan.tier}</Heading>
+          {plan.current && <StatusTag variant="success">Current plan</StatusTag>}
+        </Flex>
+
+        <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
+
+        {plan.credits_per_period != null && (
+          <Text>
+            {plan.credits_per_period.toLocaleString()} credits / month
+          </Text>
+        )}
+
+        {(plan.features ?? []).map((f, i) => (
+          <Text key={i}>• {f}</Text>
+        ))}
+
+        {/* CTA. Current tier => disabled marker. talk_to_sales => contact link.
+            Otherwise pre-create-then-link checkout for the selected interval. */}
+        {plan.current ? (
+          <Button disabled>Current plan</Button>
+        ) : plan.talk_to_sales ? (
+          <Button
+            href={supportUrl ? { url: supportUrl, external: true } : undefined}
+            disabled={!supportUrl}
+            variant="secondary"
+          >
+            Contact 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.
+          <Text format={{ fontStyle: "italic" }}>
+            Not available {interval === "annual" ? "annually" : "monthly"}
+          </Text>
+        ) : checkoutUrl ? (
+          <Button href={{ url: checkoutUrl, external: true }} variant="primary">
+            Continue to checkout
+          </Button>
+        ) : (
+          <LoadingButton
+            loading={choosing}
+            onClick={() => onChoose(plan, leg)}
+            variant="primary"
+          >
+            Choose {plan.name ?? plan.tier}
+          </LoadingButton>
+        )}
+      </Flex>
+    </Tile>
+  );
+}
+
+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");
+  const [choosingTier, setChoosingTier] = useState(null);
+  // Pre-created checkout URL keyed by `${tier}:${interval}` so a card only shows
+  // "Continue to checkout" for the exact price the customer picked.
+  const [checkoutUrls, setCheckoutUrls] = useState({});
+  const [error, setError] = useState(null);
+
+  if (plans.length === 0) return null;
+
+  const supportUrl = state?.helpful_links?.supportUrl ?? null;
+
+  async function choose(plan, leg) {
+    setError(null);
+    setChoosingTier(plan.tier);
+    try {
+      const base = state?.billing_base_url;
+      if (!base) throw new Error("Billing service not configured");
+      if (!appKey) throw new Error("Missing appKey for checkout");
+      const portalId = context?.portal?.id;
+
+      const returnUrl = state?.app_id
+        ? `https://app.hubspot.com/app/${portalId}/${state.app_id}/billing`
+        : "https://app.hubspot.com/";
+
+      // hubspot.fetch: body is a plain OBJECT (not a JSON string); only
+      // Authorization survives as a header — don't set Content-Type.
+      const res = await hubspot.fetch(`${base}/v1/billing/checkout`, {
+        method: "POST",
+        body: {
+          app_key: appKey,
+          portal_id: String(portalId),
+          price_id: leg.price_id,
+          return_url: returnUrl,
+        },
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(`Checkout request failed (${res.status}): ${text}`);
+      }
+      const { url } = await res.json();
+      if (!url) throw new Error("No checkout URL returned");
+      setCheckoutUrls((prev) => ({ ...prev, [`${plan.tier}:${interval}`]: url }));
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setChoosingTier(null);
+    }
+  }
+
+  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>
+
+      {error && (
+        <Alert title="Couldn't start checkout" variant="danger">
+          <Text>{error}</Text>
+        </Alert>
+      )}
+
+      <Flex direction="row" gap="medium" wrap="wrap">
+        {plans.map((plan) => (
+          <PlanCard
+            key={plan.tier}
+            plan={plan}
+            interval={interval}
+            onChoose={choose}
+            choosing={choosingTier === plan.tier}
+            checkoutUrl={checkoutUrls[`${plan.tier}:${interval}`]}
+            supportUrl={supportUrl}
+          />
+        ))}
+      </Flex>
+
+      <Text format={{ fontStyle: "italic" }}>
+        Billing is managed in Stripe across all Growth Operations apps. Your new
+        credits are added as soon as payment completes.
+      </Text>
+    </Flex>
+  );
+}
+
+export default PlanGrid;

package/src/index.js

@@ -16,10 +16,15 @@ export { HelpfulLinks } from "./home/HelpfulLinks";
 
 // Billing.
 export { BillingTab } from "./billing/BillingTab";
+export { PlanGrid } from "./billing/PlanGrid";
+
+// Alerts — the shared customer alerts table (level filter, sort, dismiss).
+export { AlertsTab } from "./alerts/AlertsTab";
 
 // Lib helpers.
 export {
   fmtDate,
+  fmtMoney,
   daysUntil,
   humanizeStatus,
   statusVariant,

package/src/lib/format.js

@@ -22,6 +22,23 @@ export function daysUntil(value) {
   return Math.ceil((ms - Date.now()) / (1000 * 60 * 60 * 24));
 }
 
+// Stripe amount (smallest currency unit, e.g. cents) -> "$29" / "€29.50".
+// Whole amounts drop the decimals; null/undefined -> "—". Currency defaults to
+// USD; falls back to an uppercased code prefix for currencies Intl can't symbol.
+export function fmtMoney(unitAmount, currency = "usd") {
+  if (unitAmount == null) return "—";
+  const amount = unitAmount / 100;
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: (currency || "usd").toUpperCase(),
+      minimumFractionDigits: Number.isInteger(amount) ? 0 : 2,
+    }).format(amount);
+  } catch {
+    return `${(currency || "usd").toUpperCase()} ${amount}`;
+  }
+}
+
 // Friendly labels for the AppInstallStatus enum (shared across apps).
 export const STATUS_LABELS = {
   trialing: "Free trial",

package/src/sdk/app/alerts.js

@@ -1,13 +1,24 @@
 // getAlerts / dismissAlert — generic alerts API client.
 //
-// Every Growth Ops app exposes the same /api/v1/alerts surface (paginated,
-// orderable, filterable). This is already app-agnostic, so it's ported verbatim.
+// Two backend shapes share this client:
+//   - SELF-HOSTED apps (sparkfly, toast) serve /api/v1/alerts from their OWN
+//     service and resolve portalId from the verified token. Default basePath,
+//     no portalId needed.
+//   - BASE-HOSTED credit apps (line-item, …) serve from the base service at
+//     /v1/hubspot/app_pages/{app}/alerts and require ?portalId=. Pass
+//     `basePath` + `portalId` to target that route.
+//
 // Goes through callAppApi, so it inherits the hubspot.fetch rules (object body,
-// no custom headers).
+// no custom headers). BASE_URL (the app's own service, or base for base-hosted
+// apps) comes from context.variables.
 import { callAppApi } from "./base";
 
+const DEFAULT_BASE_PATH = "/api/v1/alerts";
+
 // context: extension context. params: { offset, limit, orderBy, orderDirection,
-// filterField, filterValue }. Returns the backend's alerts response.
+// filterField, filterValue, basePath, portalId }. basePath defaults to the
+// self-hosted /api/v1/alerts; portalId is appended when set (base-hosted apps).
+// Returns the backend's alerts response.
 export async function getAlerts(context, params = {}) {
   const {
     offset = 0,
@@ -16,6 +27,8 @@ export async function getAlerts(context, params = {}) {
     orderDirection,
     filterField,
     filterValue,
+    basePath = DEFAULT_BASE_PATH,
+    portalId,
   } = params;
   const queryParams = new URLSearchParams();
   queryParams.append("offset", offset);
@@ -31,11 +44,19 @@ export async function getAlerts(context, params = {}) {
     queryParams.append("filter_field", filterField);
     queryParams.append("filter_value", filterValue);
   }
-  const path = `/api/v1/alerts?${queryParams.toString()}`;
+  if (portalId != null) {
+    queryParams.append("portalId", portalId);
+  }
+  const path = `${basePath}?${queryParams.toString()}`;
   return callAppApi(context, path, "GET");
 }
 
-export async function dismissAlert(context, alertId) {
-  const path = `/api/v1/alerts/${alertId}/dismiss`;
+// context, alertId, options: { basePath, portalId }. basePath defaults to the
+// self-hosted /api/v1/alerts; portalId is appended when set (base-hosted apps).
+export async function dismissAlert(context, alertId, options = {}) {
+  const { basePath = DEFAULT_BASE_PATH, portalId } = options;
+  const query =
+    portalId != null ? `?portalId=${encodeURIComponent(portalId)}` : "";
+  const path = `${basePath}/${alertId}/dismiss${query}`;
   return callAppApi(context, path, "POST");
 }