@growth-operations/ui-shared 1.0.5 → 1.0.7

package/package.json

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

package/src/billing/BillingTab.jsx

@@ -34,10 +34,12 @@ function StatusPanel({ entitlement }) {
   if (!entitlement) return null;
   const {
     status,
+    mode,
     current_period_end,
     trial_ends_at,
     sandbox_trial_expires_at,
     cancel_at_period_end,
+    has_payment_method,
   } = entitlement;
 
   // HubSpot's Alert renders `title` beside the body in a narrow column, which
@@ -53,13 +55,26 @@ function StatusPanel({ entitlement }) {
         : left <= 0
         ? "Your free trial ends today"
         : `${left} day${left === 1 ? "" : "s"} left in your free trial`;
+    // What (if anything) the customer must do before the trial ends, by mode:
+    //  - credits: pick/buy a credit plan to continue.
+    //  - trial_subscription (plan already chosen — toast): the trial just needs
+    //    a payment method. If one's already on file it auto-converts (nothing to
+    //    do); if not, they must add one or Stripe cancels at trial end.
+    //    has_payment_method may be null (unknown) — then give the safe ask.
+    const trialCta =
+      mode === "credits"
+        ? "Choose a plan in Stripe before then to keep going."
+        : has_payment_method === true
+          ? "Your payment method is on file, so it converts automatically — nothing to do."
+          : has_payment_method === false
+            ? "Add a payment method in Stripe before then, or your subscription will be canceled."
+            : "Add a payment method in Stripe before then so your subscription continues.";
     return (
       <Alert variant="warning">
         <Flex direction="column" gap="extra-small">
           <Text format={{ fontWeight: "bold" }}>{leftLabel}</Text>
           <Text>
-            Trial ends {fmtDate(trialEnd)}. Add a plan in Stripe before then to
-            keep syncing.
+            Trial ends {fmtDate(trialEnd)}. {trialCta}
           </Text>
         </Flex>
       </Alert>
@@ -102,11 +117,15 @@ function StatusPanel({ entitlement }) {
   }
 
   if (status === "pending_purchase") {
+    const resumeCta =
+      mode === "credits"
+        ? "Choose a plan in Stripe to resume."
+        : "Add a payment method in Stripe to resume syncing your data.";
     return (
       <Alert variant="warning">
         <Flex direction="column" gap="extra-small">
           <Text format={{ fontWeight: "bold" }}>Your free trial has ended</Text>
-          <Text>Choose a plan in Stripe to resume syncing your data.</Text>
+          <Text>{resumeCta}</Text>
         </Flex>
       </Alert>
     );

package/src/index.js

@@ -27,6 +27,19 @@ export {
 } from "./lib/format";
 export { useStrictModeEffect } from "./lib/useStrictModeEffect";
 
+// HubSpot URL builders (app.hubspot.com record/property/list links).
+export {
+  buildContactUrl,
+  buildRecordUrl,
+  buildObjectListUrl,
+  buildContactListCreateUrl,
+  buildContactListEditUrl,
+  buildFormEditorUrl,
+  buildPropertySettingsUrl,
+  buildPropertyName,
+  buildPropertyNames,
+} from "./lib/urls";
+
 // SDK — the token + API utility layer (see README "SDK" section and src/sdk/).
 export {
   // App backend

package/src/lib/urls.js

@@ -0,0 +1,53 @@
+// Shared HubSpot URL builders for Growth Operations app UIs.
+// Framework-agnostic (no React) — every app links out to HubSpot records,
+// properties, and lists from the same app.hubspot.com URL shapes, so these are
+// generic. Centralized here so a HubSpot URL-format change is fixed once.
+
+const APP = "https://app.hubspot.com";
+
+// A contact record. (Contacts are object type 0-1; see buildRecordUrl for the
+// generic form.)
+export function buildContactUrl(portalId, contactId) {
+  return `${APP}/contacts/${portalId}/contact/${contactId}`;
+}
+
+// Any CRM record by object type id (e.g. "0-1" contacts, a custom object id).
+export function buildRecordUrl(portalId, objectTypeId, recordId) {
+  return `${APP}/contacts/${portalId}/record/${objectTypeId}/${recordId}`;
+}
+
+// A custom object's "all records" list view.
+export function buildObjectListUrl(portalId, objectTypeId) {
+  return `${APP}/contacts/${portalId}/objects/${objectTypeId}/views/all/list`;
+}
+
+// The contact-list creation screen.
+export function buildContactListCreateUrl(portalId) {
+  return `${APP}/contacts/${portalId}/objectLists/create`;
+}
+
+// A specific contact list's filter editor.
+export function buildContactListEditUrl(portalId, listId) {
+  return `${APP}/contacts/${portalId}/objectLists/${listId}/filters`;
+}
+
+// A form's editor.
+export function buildFormEditorUrl(portalId, formId) {
+  return `${APP}/forms/${portalId}/editor/${formId}/edit/form`;
+}
+
+// A property's settings/edit screen. objectTypeId defaults to contacts ("0-1").
+export function buildPropertySettingsUrl(portalId, propertyName, objectTypeId = "0-1") {
+  return `${APP}/property-settings/${portalId}/properties?type=${objectTypeId}&action=edit&property=${propertyName}`;
+}
+
+// Prefix a property name with an app prefix (e.g. "a12005537"). No-op without a
+// prefix. Useful when reading/writing app-namespaced custom properties.
+export function buildPropertyName(appPrefix, propertyName) {
+  if (!appPrefix) return propertyName;
+  return `${appPrefix}_${propertyName}`;
+}
+
+export function buildPropertyNames(appPrefix, propertyNames = []) {
+  return propertyNames.map((name) => buildPropertyName(appPrefix, name));
+}