@growth-operations/ui-shared 1.5.8 → 1.6.0

package/package.json

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

package/src/billing/PlanGrid.jsx

@@ -34,9 +34,14 @@ import { fmtMoney } from "../lib/format";
 // 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.
+//
+// The Monthly/Annual toggle is PER CARD (not a single grid-wide switch): a tier
+// may offer one interval and not the other (e.g. a top tier that's monthly-only),
+// so each card owns its own interval state and only shows the toggle when it has
+// BOTH legs. A subscription still bills on one cadence — the cadence bought is
+// whatever this card's toggle shows when its "Choose" is clicked.
 function PlanCard({
   plan,
-  interval,
   billingBaseUrl,
   appKey,
   portalId,
@@ -44,6 +49,12 @@ function PlanCard({
   supportUrl,
   maxFeatures = 0,
 }) {
+  // Default this card to annual when it offers annual (cheaper-per-month story);
+  // monthly-only tiers default to monthly. Both legs → show the toggle.
+  const hasMonthly = !!plan.monthly;
+  const hasAnnual = !!plan.annual;
+  const canToggle = hasMonthly && hasAnnual;
+  const [interval, setInterval] = useState(hasAnnual ? "annual" : "monthly");
   const leg = interval === "annual" ? plan.annual : plan.monthly;
   const periodLabel = interval === "annual" ? "/yr" : "/mo";
 
@@ -53,6 +64,17 @@ function PlanCard({
       ? `${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.
+  const showAnnualSavings =
+    interval === "annual" && hasMonthly && hasAnnual && plan.annual?.unit_amount;
+  const annualFull = showAnnualSavings ? plan.monthly.unit_amount * 12 : null;
+  const savingsPct =
+    showAnnualSavings && annualFull > plan.annual.unit_amount
+      ? Math.round((1 - plan.annual.unit_amount / annualFull) * 100)
+      : 0;
+
   // Direct one-click checkout link to the billing service's redirect endpoint.
   // Null until we have everything (billing host, appKey, portal, this interval's
   // price) — the button is disabled until then.
@@ -85,7 +107,33 @@ function PlanCard({
           )}
         </Flex>
 
-        <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
+        <Flex direction="row" gap="small" align="center">
+          <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
+          {savingsPct > 0 && (
+            <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
+          </Text>
+        )}
+
+        {/* Per-card interval toggle — only when this tier offers both legs. */}
+        {canToggle && (
+          <ToggleGroup
+            name={`billing-interval-${plan.tier}`}
+            toggleType="radioButtonList"
+            inline={true}
+            value={interval}
+            onChange={(v) => v && setInterval(v)}
+            options={[
+              { label: "Monthly", value: "monthly" },
+              { label: "Annual", value: "annual" },
+            ]}
+          />
+        )}
 
         {plan.credits_per_period != null && (
           <Text>{plan.credits_per_period.toLocaleString()} credits / month</Text>
@@ -137,11 +185,6 @@ function PlanCard({
 
 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");
 
   if (plans.length === 0) return null;
 
@@ -162,31 +205,16 @@ export function PlanGrid({ context, state, appKey }) {
 
   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>
+      <Heading>Plans</Heading>
 
       {/* AutoGrid(flexible): equal-width columns that wrap responsively. Card
-          height is equalized via the maxFeatures padding in PlanCard. */}
+          height is equalized via the maxFeatures padding in PlanCard. Each card
+          owns its own Monthly/Annual toggle (see PlanCard). */}
       <AutoGrid columnWidth={240} flexible={true} gap="medium">
         {plans.map((plan) => (
           <PlanCard
             key={plan.tier}
             plan={plan}
-            interval={interval}
             billingBaseUrl={billingBaseUrl}
             appKey={appKey}
             portalId={portalId}

package/src/forms/OptionSelect.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { Select, LoadingSpinner, Alert, Flex, Text } from "@hubspot/ui-extensions";
+import { useToken } from "../sdk/index";
+import { getForms } from "../sdk/hubspot/forms";
+import { getLists } from "../sdk/hubspot/lists";
+import { getPipelines, getPipelineStages } from "../sdk/hubspot/pipeline";
+import { useStrictModeEffect } from "../lib/useStrictModeEffect";
+
+// OptionSelect — one shared HubSpot-options dropdown, replacing the per-app
+// FormSelector / SegmentSelector / PipelineStageSelector that every app
+// re-implemented (fetch options → map to {label,value} → <Select> → save on
+// change). The data-fetch half already lives in the SDK (getForms / getLists /
+// getPipelineStages); this owns the loading/error/Select chrome around it.
+//
+// Pick options ONE of two ways:
+//   - source="forms" | "lists" | "pipelines" | "pipelineStages" — built-in SDK
+//     fetchers. "pipelines"/"pipelineStages" take opts.objectType; the latter
+//     also needs opts.pipelineId.
+//   - fetchOptions={async (context, token) => [{label, value}, ...]} — any
+//     custom source. Takes precedence over `source`.
+//
+// onChange(value) fires with the selected value; the caller owns persistence
+// (e.g. ui-shared updateSettings). `value` is the controlled selection.
+const SOURCES = {
+  forms: async (context, token) => {
+    const { results = [] } = await getForms(context, token);
+    return results.map((f) => ({ label: f.name, value: f.id }));
+  },
+  lists: async (context, token, opts) => {
+    const { lists = [] } = await getLists(context, token, opts?.query ?? "");
+    return lists.map((l) => ({ label: l.name, value: String(l.listId) }));
+  },
+  pipelines: async (context, token, opts) => {
+    const { results = [] } = await getPipelines(context, token, opts?.objectType);
+    return results.map((p) => ({ label: p.label, value: p.id }));
+  },
+  pipelineStages: async (context, token, opts) => {
+    if (!opts?.pipelineId) return [];
+    const { results = [] } = await getPipelineStages(
+      context,
+      token,
+      opts.pipelineId,
+      opts.objectType
+    );
+    return results.map((s) => ({ label: s.label, value: s.id }));
+  },
+};
+
+export function OptionSelect({
+  context,
+  value,
+  onChange,
+  source,
+  fetchOptions,
+  label = "Select",
+  description,
+  placeholder = "Choose…",
+  // Extra source args (pipelineId/objectType for pipelineStages, query for lists)
+  ...opts
+}) {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { ensureValidToken } = useToken();
+
+  // Re-fetch when the source or its key args change (e.g. pipelineId).
+  const depKey = JSON.stringify({
+    source,
+    pipelineId: opts.pipelineId,
+    objectType: opts.objectType,
+    query: opts.query,
+  });
+
+  useStrictModeEffect(
+    async ({ mounted }) => {
+      try {
+        const token = await ensureValidToken();
+        if (!token || !mounted.current) return;
+        const loader =
+          fetchOptions ?? SOURCES[source] ?? (async () => []);
+        const opted = await loader(context, token, opts);
+        if (mounted.current) setOptions(opted);
+      } catch (e) {
+        if (mounted.current) setError(String(e?.message ?? e));
+      } finally {
+        if (mounted.current) setLoading(false);
+      }
+    },
+    [context, depKey]
+  );
+
+  if (loading) {
+    return <LoadingSpinner size="small" label={`Loading ${label.toLowerCase()}…`} showLabel />;
+  }
+  if (error) {
+    return (
+      <Alert title={`Couldn't load ${label.toLowerCase()}`} variant="danger">
+        <Text>{error}</Text>
+      </Alert>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="extra-small">
+      <Select
+        label={label}
+        description={description}
+        placeholder={placeholder}
+        options={options}
+        value={value ?? ""}
+        onChange={(v) => onChange?.(v)}
+      />
+    </Flex>
+  );
+}

package/src/index.js

@@ -27,6 +27,9 @@ export { UsageTab } from "./usage/UsageTab";
 // Sandbox — the shared "Install on a sandbox" action (mints a signed link).
 export { SandboxInstall } from "./sandbox/SandboxInstall";
 
+// Forms — shared HubSpot-options dropdown (forms/lists/pipeline-stages picker).
+export { OptionSelect } from "./forms/OptionSelect";
+
 // Lib helpers.
 export {
   fmtDate,