bsmnt 0.6.4 → 0.7.0

package/src/modules/features/forms/hubspot/files/lib/integrations/hubspot/embed.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import { useCallback, useEffect, useId, useRef, useState } from "react"
+import { HubSpotFormSkeleton } from "./skeleton"
+import "./hubspot-form.css"
+
+const HUBSPOT_FORMS_SCRIPT_SRC = "https://js.hsforms.net/forms/embed/v2.js"
+// A form that hasn't rendered within this window is treated as failed.
+const FORM_READY_TIMEOUT_MS = 12_000
+
+let hubspotFormsScriptPromise: Promise<void> | null = null
+
+type HubSpotFormCreateOptions = {
+  portalId: string
+  formId: string
+  region: string
+  target: string
+  cssRequired?: string
+  css?: string
+  onFormReady?: (form: HTMLFormElement) => void
+}
+
+declare global {
+  interface Window {
+    hbspt?: {
+      forms?: {
+        create: (options: HubSpotFormCreateOptions) => void
+      }
+    }
+  }
+}
+
+const loadHubSpotFormsScript = () => {
+  if (typeof window === "undefined") return Promise.resolve()
+  if (window.hbspt?.forms) return Promise.resolve()
+  if (hubspotFormsScriptPromise) return hubspotFormsScriptPromise
+
+  hubspotFormsScriptPromise = new Promise((resolve, reject) => {
+    // Drop the dead tag on error so a later mount refetches instead of awaiting
+    // a `load` that already fired.
+    const fail = (script: HTMLScriptElement) => {
+      hubspotFormsScriptPromise = null
+      script.remove()
+      reject(new Error("Failed to load the HubSpot forms script."))
+    }
+
+    // An existing tag means a load is in flight (a finished one set window.hbspt,
+    // caught above) — attach to its events.
+    const existing = document.querySelector<HTMLScriptElement>(
+      `script[src="${HUBSPOT_FORMS_SCRIPT_SRC}"]`
+    )
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true })
+      existing.addEventListener("error", () => fail(existing), { once: true })
+      return
+    }
+
+    const script = document.createElement("script")
+    script.src = HUBSPOT_FORMS_SCRIPT_SRC
+    script.async = true
+    script.charset = "utf-8"
+    script.onload = () => resolve()
+    script.onerror = () => fail(script)
+    document.head.appendChild(script)
+  })
+
+  return hubspotFormsScriptPromise
+}
+
+type HubSpotFormEmbedProps = {
+  portalId: string
+  formId: string
+  region: string
+}
+
+export function HubSpotFormEmbed({
+  portalId,
+  formId,
+  region,
+}: HubSpotFormEmbedProps) {
+  // Sanitize useId() (it can contain `:`) for use as a DOM id / selector.
+  const containerId = `hubspot-form-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const readyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const unmountedRef = useRef(false)
+  const [hasError, setHasError] = useState(false)
+  const [isReady, setIsReady] = useState(false)
+
+  const createForm = useCallback(() => {
+    const target = containerRef.current
+    const formsApi = window.hbspt?.forms
+    if (!(target && formsApi)) {
+      setHasError(true)
+      return
+    }
+
+    setIsReady(false)
+    target.innerHTML = ""
+
+    // create() is fire-and-forget: a bad portal/region or archived form never
+    // calls onFormReady, so fall back to the error state on timeout.
+    if (readyTimeoutRef.current) clearTimeout(readyTimeoutRef.current)
+    readyTimeoutRef.current = setTimeout(() => {
+      if (unmountedRef.current) return
+      target.innerHTML = ""
+      setHasError(true)
+    }, FORM_READY_TIMEOUT_MS)
+
+    // cssRequired/css are emptied so HubSpot doesn't inject its own stylesheet —
+    // the form is styled by hubspot-form.css instead. Everything else (submit,
+    // validation, the post-submit thank-you message) is HubSpot's default.
+    formsApi.create({
+      portalId,
+      formId,
+      region,
+      target: `#${containerId}`,
+      cssRequired: "",
+      css: "",
+      onFormReady: () => {
+        if (unmountedRef.current) return
+        if (readyTimeoutRef.current) clearTimeout(readyTimeoutRef.current)
+        setIsReady(true)
+        setHasError(false)
+      },
+    })
+  }, [containerId, formId, portalId, region])
+
+  useEffect(() => {
+    unmountedRef.current = false
+    setHasError(false)
+
+    void loadHubSpotFormsScript()
+      .then(() => {
+        if (unmountedRef.current) return
+        createForm()
+      })
+      .catch((error: unknown) => {
+        if (unmountedRef.current) return
+        console.error("Failed to mount HubSpot form", error)
+        setHasError(true)
+      })
+
+    return () => {
+      unmountedRef.current = true
+      if (readyTimeoutRef.current) clearTimeout(readyTimeoutRef.current)
+      if (containerRef.current) containerRef.current.innerHTML = ""
+    }
+  }, [createForm])
+
+  const showSkeleton = !(isReady || hasError)
+
+  return (
+    <div className="hubspot-form-wrapper">
+      <div className="hubspot-form-embed" id={containerId} ref={containerRef} />
+
+      {showSkeleton ? <HubSpotFormSkeleton /> : null}
+
+      {hasError ? (
+        <p className="hubspot-form-error">
+          We couldn&apos;t load this form right now.
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/modules/features/forms/hubspot/files/lib/integrations/hubspot/form-selection.ts

@@ -0,0 +1,40 @@
+export type HubSpotFormSelection = {
+  name: string
+  formId: string
+  portalId: string
+  region: string
+}
+
+export function decodeHubSpotFormSelection(
+  value?: string | null
+): HubSpotFormSelection | null {
+  if (!value) return null
+
+  try {
+    const parsed: unknown = JSON.parse(value)
+
+    if (typeof parsed !== "object" || parsed === null) return null
+
+    const { name, formId, portalId, region } = parsed as Record<string, unknown>
+
+    if (
+      typeof name !== "string" ||
+      typeof formId !== "string" ||
+      typeof portalId !== "string" ||
+      typeof region !== "string"
+    ) {
+      return null
+    }
+
+    // Fields that drive hbspt.forms.create must be non-empty (name is cosmetic).
+    if (!(formId.trim() && portalId.trim() && region.trim())) return null
+
+    return { name, formId, portalId, region }
+  } catch {
+    return null
+  }
+}
+
+export function getHubSpotFormSelectionLabel(selection: HubSpotFormSelection) {
+  return `${selection.name} (${selection.formId})`
+}

package/src/modules/features/forms/hubspot/files/lib/integrations/hubspot/form.tsx

@@ -0,0 +1,29 @@
+import { HubSpotFormEmbed } from "./embed"
+import "./hubspot-form.css"
+
+type HubSpotFormProps = {
+  portalId: string
+  formId: string
+  region: string
+  className?: string | undefined
+}
+
+/**
+ * Renders a HubSpot form, fully styled and decoupled from any CMS. Pass the
+ * portal/form/region directly, or decode them from a stored selection with
+ * `decodeHubSpotFormSelection`.
+ */
+export function HubSpotForm({
+  portalId,
+  formId,
+  region,
+  className,
+}: HubSpotFormProps) {
+  const classes = ["hubspot-form-card", className].filter(Boolean).join(" ")
+
+  return (
+    <div className={classes}>
+      <HubSpotFormEmbed formId={formId} portalId={portalId} region={region} />
+    </div>
+  )
+}

package/src/modules/features/forms/hubspot/files/lib/integrations/hubspot/forms.ts

@@ -0,0 +1,142 @@
+"use server"
+
+import {
+  getHubSpotFormSelectionLabel,
+  type HubSpotFormSelection,
+} from "./form-selection"
+
+type HubSpotAccountDetailsResponse = {
+  portalId?: number | string
+  dataHostingLocation?: string
+}
+
+type HubSpotApiForm = {
+  id?: string
+  name?: string
+  archived?: boolean
+  displayOptions?: {
+    renderRawHtml?: boolean
+  }
+}
+
+type HubSpotFormsResponse = {
+  results?: HubSpotApiForm[]
+  paging?: { next?: { after?: string } }
+}
+
+export type HubSpotFormOption = {
+  label: string
+  value: string
+  /** False when HubSpot will iframe-embed (Free portals); used only as a hint. */
+  renderRawHtml: boolean | null
+}
+
+const HUBSPOT_API_BASE_URL = "https://api.hubapi.com"
+
+async function fetchHubSpotJson<T>(path: string, accessToken: string) {
+  const response = await fetch(`${HUBSPOT_API_BASE_URL}${path}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      Accept: "application/json",
+    },
+    cache: "no-store",
+  })
+
+  if (!response.ok) {
+    // Keep the full body for the server log, but throw a clean status so the
+    // caller-facing message never leaks HubSpot's raw response.
+    const body = await response.text()
+    console.error(
+      `HubSpot request failed (${response.status}) ${path}: ${body}`
+    )
+    throw new Error(`HubSpot request failed (${response.status}).`)
+  }
+
+  return (await response.json()) as T
+}
+
+async function fetchHubSpotForms(accessToken: string) {
+  const forms: HubSpotApiForm[] = []
+  let after: string | undefined
+
+  do {
+    const searchParams = new URLSearchParams({
+      formTypes: "hubspot",
+      limit: "100",
+    })
+    if (after) searchParams.set("after", after)
+
+    const response = await fetchHubSpotJson<HubSpotFormsResponse>(
+      `/marketing/v3/forms?${searchParams.toString()}`,
+      accessToken
+    )
+
+    forms.push(...(response.results ?? []))
+    after = response.paging?.next?.after
+  } while (after)
+
+  return forms
+}
+
+/**
+ * Lists every published HubSpot form in the connected portal as a flat list of
+ * options. Each option's `value` is the JSON-encoded selection consumed by
+ * `decodeHubSpotFormSelection` and ultimately by `<HubSpotForm />`.
+ *
+ * Requires a private-app token in `HUBSPOT_ACCESS_TOKEN` with the `forms` and
+ * `account-info.security.read` scopes.
+ */
+export async function getHubSpotFormOptions(): Promise<{
+  forms: HubSpotFormOption[]
+  error: string | null
+}> {
+  const accessToken = process.env.HUBSPOT_ACCESS_TOKEN
+
+  if (!accessToken) {
+    return { forms: [], error: "Missing HUBSPOT_ACCESS_TOKEN." }
+  }
+
+  try {
+    const [accountDetails, forms] = await Promise.all([
+      fetchHubSpotJson<HubSpotAccountDetailsResponse>(
+        "/account-info/v3/details",
+        accessToken
+      ),
+      fetchHubSpotForms(accessToken),
+    ])
+
+    const portalId = accountDetails.portalId
+    if (!portalId) {
+      return {
+        forms: [],
+        error: "HubSpot account details did not include a portal ID.",
+      }
+    }
+
+    const region = accountDetails.dataHostingLocation || "na1"
+
+    const options = forms
+      .filter((form) => form.id && form.name && !form.archived)
+      .map<HubSpotFormOption>((form) => {
+        const selection: HubSpotFormSelection = {
+          name: form.name as string,
+          formId: form.id as string,
+          portalId: String(portalId),
+          region,
+        }
+        return {
+          label: getHubSpotFormSelectionLabel(selection),
+          value: JSON.stringify(selection),
+          renderRawHtml: form.displayOptions?.renderRawHtml ?? null,
+        }
+      })
+      .sort((a, b) => a.label.localeCompare(b.label))
+
+    return { forms: options, error: null }
+  } catch (error) {
+    return {
+      forms: [],
+      error: error instanceof Error ? error.message : "Unable to load forms.",
+    }
+  }
+}