@actuate-media/cms-admin 0.62.0 → 0.63.1

package/src/components/forms/FormSchemaDrawer.tsx

@@ -2,8 +2,9 @@
 
 /**
  * Form Schema drawer — the right-side panel opened from the Forms list "Schema"
- * action. Three tabs: Fields (versioned schema editor), Embed (public snippets
- * + domain restrictions), Notifications (per-form notification settings).
+ * action. Four tabs: Fields (versioned schema editor), Embed (public snippets
+ * + domain restrictions), Notifications (email settings), Integrations (CRM
+ * webhooks / Zapier).
  *
  * Saving the Fields tab creates a new schema version server-side; existing
  * submissions keep referencing the version they were captured against, so
@@ -20,12 +21,14 @@ import { Drawer } from './Drawer.js'
 import { FieldsPanel } from './FieldsPanel.js'
 import { EmbedPanel } from './EmbedPanel.js'
 import { NotificationsPanel } from './NotificationsPanel.js'
+import { WebhooksPanel } from './WebhooksPanel.js'
 import { FormsErrorState, FormsLoading, btnPrimary, btnSecondary } from './primitives.js'
 
 const TABS = [
   { id: 'fields', label: 'Fields' },
   { id: 'embed', label: 'Embed' },
   { id: 'notifications', label: 'Notifications' },
+  { id: 'integrations', label: 'Integrations' },
 ] as const
 
 export function FormSchemaDrawer({
@@ -164,6 +167,10 @@ export function FormSchemaDrawer({
           <Tabs.Content value="notifications" tabIndex={-1}>
             {formId && <NotificationsPanel formId={formId} onChanged={onSaved} />}
           </Tabs.Content>
+
+          <Tabs.Content value="integrations" tabIndex={-1}>
+            {formId && <WebhooksPanel formId={formId} formSlug={form.slug} />}
+          </Tabs.Content>
         </Tabs.Root>
       </Drawer>
 

package/src/components/forms/NotificationsPanel.tsx

@@ -3,8 +3,7 @@
 /**
  * Notifications tab of the Form Schema drawer. Persists per-form notification
  * settings (recipients, reply-to, subject/message templates, field inclusion,
- * autoresponder). Actual email/webhook delivery + the "send test" action are
- * wired in a later phase (PR 6); this panel owns the configuration only.
+ * autoresponder). Email delivery uses the configured email adapter when enabled.
  */
 import { useEffect, useState } from 'react'
 import * as Switch from '@radix-ui/react-switch'
@@ -179,8 +178,10 @@ export function NotificationsPanel({
       </fieldset>
 
       <p className="text-muted-foreground text-xs">
-        Email &amp; webhook delivery (including the test action) is wired in an upcoming release.
-        Settings saved here apply automatically once delivery is enabled.
+        For CRM integrations (Zapier, HubSpot via Zapier, etc.), use the{' '}
+        <span className="font-medium">Integrations</span> tab to add a signed webhook. Email
+        notifications send when recipients are configured and your email provider is set up (
+        <span className="font-mono">RESEND_API_KEY</span> or SMTP).
       </p>
 
       <div className="flex justify-end">

package/src/components/forms/WebhooksPanel.tsx

@@ -0,0 +1,311 @@
+'use client'
+
+/**
+ * Integrations tab of the Form Schema drawer. Manages signed outbound webhooks
+ * (Zapier Catch Hook, Make, custom CRM endpoints) and guides editors through
+ * the default Zapier → Webhooks by Zapier → Catch Hook setup.
+ */
+import * as Switch from '@radix-ui/react-switch'
+import { ExternalLink, Loader2, Plus, Trash2, Zap } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  createFormWebhook,
+  deleteFormWebhook,
+  fetchFormWebhooks,
+  testFormWebhook,
+  updateFormWebhook,
+  type FormWebhookConfig,
+} from '../../lib/forms-service.js'
+import { ConfirmDialog } from '../ui/ConfirmDialog.js'
+import { FormsErrorState, FormsLoading, btnPrimary, btnSecondary } from './primitives.js'
+
+const ZAPIER_CATCH_HOOK_DOCS = 'https://zapier.com/apps/webhook/integrations'
+const FORMS_INTEGRATIONS_DOCS = 'https://actuatecms.dev/docs/forms-and-integrations'
+
+const inputCls =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function WebhooksPanel({ formId, formSlug }: { formId: string; formSlug: string }) {
+  const [webhooks, setWebhooks] = useState<FormWebhookConfig[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [url, setUrl] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [createdSecret, setCreatedSecret] = useState<string | null>(null)
+  const [pendingDelete, setPendingDelete] = useState<FormWebhookConfig | null>(null)
+  const [testingId, setTestingId] = useState<string | null>(null)
+
+  async function reload(): Promise<void> {
+    setLoading(true)
+    setError(null)
+    try {
+      setWebhooks(await fetchFormWebhooks(formId))
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to load webhooks')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    fetchFormWebhooks(formId)
+      .then((rows) => {
+        if (active) setWebhooks(rows)
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e.message : 'Failed to load webhooks')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  async function handleCreate(e: React.FormEvent): Promise<void> {
+    e.preventDefault()
+    const trimmed = url.trim()
+    if (!trimmed) {
+      toast.error('Paste your Catch Hook URL first.')
+      return
+    }
+    setCreating(true)
+    const res = await createFormWebhook(formId, {
+      url: trimmed,
+      events: ['form.submitted'],
+      enabled: true,
+    })
+    setCreating(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.secret) setCreatedSecret(res.data.secret)
+    setUrl('')
+    toast.success('Webhook connected.')
+    await reload()
+  }
+
+  async function toggleEnabled(webhook: FormWebhookConfig, enabled: boolean): Promise<void> {
+    const res = await updateFormWebhook(formId, webhook.id, { enabled })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    setWebhooks((rows) => rows.map((row) => (row.id === webhook.id ? { ...row, enabled } : row)))
+  }
+
+  async function handleTest(webhookId: string): Promise<void> {
+    setTestingId(webhookId)
+    const res = await testFormWebhook(formId, webhookId)
+    setTestingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.ok) {
+      toast.success(`Test delivery succeeded (HTTP ${res.data.status}).`)
+    } else {
+      toast.error(res.data?.error || `Test failed (HTTP ${res.data?.status ?? 'unknown'}).`)
+    }
+    await reload()
+  }
+
+  async function confirmDelete(): Promise<void> {
+    if (!pendingDelete) return
+    const res = await deleteFormWebhook(formId, pendingDelete.id)
+    setPendingDelete(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Webhook removed.')
+    await reload()
+  }
+
+  if (loading) return <FormsLoading label="Loading integrations…" />
+  if (error) return <FormsErrorState message={error} onRetry={() => void reload()} />
+
+  return (
+    <div className="space-y-5">
+      <section
+        className="border-border bg-muted/40 space-y-3 rounded-lg border p-4"
+        aria-labelledby="zapier-helper-title"
+      >
+        <div className="flex items-start gap-3">
+          <span className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md">
+            <Zap size={18} aria-hidden />
+          </span>
+          <div className="min-w-0 space-y-2">
+            <h3 id="zapier-helper-title" className="text-foreground text-sm font-medium">
+              Connect to Zapier (recommended)
+            </h3>
+            <ol className="text-muted-foreground list-decimal space-y-1 pl-4 text-sm">
+              <li>
+                In Zapier, create a Zap with trigger{' '}
+                <span className="text-foreground font-medium">Webhooks by Zapier → Catch Hook</span>
+                .
+              </li>
+              <li>Copy the hook URL Zapier gives you and paste it below.</li>
+              <li>
+                Map fields in your action step — submission values arrive under{' '}
+                <span className="font-mono text-xs">data.email</span>,{' '}
+                <span className="font-mono text-xs">data.name</span>, etc.
+              </li>
+              <li>
+                Use event <span className="font-mono text-xs">form.submitted</span> only (spam hits
+                emit <span className="font-mono text-xs">form.spam_detected</span> separately).
+              </li>
+            </ol>
+            <p className="text-muted-foreground text-xs">
+              HubSpot, Salesforce, Slack, and Google Sheets work through Zapier actions — no native
+              Actuate app required for v1.
+            </p>
+            <div className="flex flex-wrap gap-3 pt-1">
+              <a
+                href={ZAPIER_CATCH_HOOK_DOCS}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary inline-flex items-center gap-1 text-sm font-medium hover:underline"
+              >
+                Open Zapier Webhooks
+                <ExternalLink size={14} aria-hidden />
+              </a>
+              <a
+                href={FORMS_INTEGRATIONS_DOCS}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary inline-flex items-center gap-1 text-sm font-medium hover:underline"
+              >
+                Full integration guide
+                <ExternalLink size={14} aria-hidden />
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <form onSubmit={handleCreate} className="space-y-3">
+        <label className="block">
+          <span className="text-foreground mb-1 block text-sm font-medium">Webhook URL</span>
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://hooks.zapier.com/hooks/catch/…"
+            className={inputCls}
+            autoComplete="off"
+          />
+          <span className="text-muted-foreground mt-1 block text-xs">
+            Paste your Catch Hook URL for form <span className="font-mono">{formSlug}</span>.
+            Payloads are HMAC-signed via <span className="font-mono">X-Actuate-Signature</span>.
+          </span>
+        </label>
+        <button
+          type="submit"
+          className={`${btnPrimary} inline-flex items-center`}
+          disabled={creating}
+        >
+          {creating ? (
+            <>
+              <Loader2 className="mr-2 inline h-4 w-4 animate-spin" aria-hidden />
+              Connecting…
+            </>
+          ) : (
+            <>
+              <Plus className="mr-1 inline h-4 w-4" aria-hidden />
+              Add webhook
+            </>
+          )}
+        </button>
+      </form>
+
+      {createdSecret && (
+        <div
+          className="border-success/30 bg-success/10 text-foreground space-y-2 rounded-md border px-3 py-3 text-sm"
+          role="status"
+        >
+          <p className="font-medium">Signing secret (shown once)</p>
+          <p className="text-muted-foreground text-xs">
+            Store this if your CRM verifies HMAC signatures. You cannot retrieve it again after
+            closing this panel.
+          </p>
+          <pre className="border-border bg-background overflow-x-auto rounded border px-2 py-1.5 font-mono text-xs">
+            {createdSecret}
+          </pre>
+          <button type="button" className={btnSecondary} onClick={() => setCreatedSecret(null)}>
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {webhooks.length === 0 ? (
+        <p className="text-muted-foreground text-sm">
+          No webhooks yet. Add a Catch Hook URL to send each submission to your CRM.
+        </p>
+      ) : (
+        <ul className="space-y-3" aria-label="Configured webhooks">
+          {webhooks.map((webhook) => (
+            <li
+              key={webhook.id}
+              className="border-border flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between"
+            >
+              <div className="min-w-0">
+                <p className="text-foreground truncate font-mono text-xs">{webhook.url}</p>
+                <p className="text-muted-foreground mt-1 text-xs">
+                  Events: {webhook.events.join(', ') || 'form.submitted'}
+                  {webhook.lastDeliveryAt
+                    ? ` · Last delivery: ${webhook.lastDeliveryStatus ?? 'unknown'}`
+                    : ''}
+                </p>
+              </div>
+              <div className="flex shrink-0 flex-wrap items-center gap-2">
+                <Switch.Root
+                  checked={webhook.enabled}
+                  onCheckedChange={(v) => void toggleEnabled(webhook, v)}
+                  aria-label={`Enable webhook ${webhook.url}`}
+                  className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative h-[18px] w-8 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                >
+                  <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
+                </Switch.Root>
+                <button
+                  type="button"
+                  className={btnSecondary}
+                  disabled={testingId === webhook.id}
+                  onClick={() => void handleTest(webhook.id)}
+                >
+                  {testingId === webhook.id ? 'Testing…' : 'Send test'}
+                </button>
+                <button
+                  type="button"
+                  className="text-destructive hover:bg-destructive/10 focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none"
+                  aria-label="Remove webhook"
+                  onClick={() => setPendingDelete(webhook)}
+                >
+                  <Trash2 size={16} aria-hidden />
+                  Remove
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <ConfirmDialog
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        onConfirm={() => void confirmDelete()}
+        title="Remove webhook?"
+        description="New submissions will no longer be sent to this URL. Existing Zapier Zaps are not deleted — disable them in Zapier if needed."
+        confirmLabel="Remove"
+        cancelLabel="Keep webhook"
+        destructive
+      />
+    </div>
+  )
+}

package/src/hooks/useAppearanceBootstrap.ts

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { useTheme } from '../components/ThemeProvider.js'
+import { appearanceApiToSnapshot, type AppearanceApiResponse } from '../lib/appearance-api.js'
+import { cmsApi } from '../lib/api.js'
+
+/**
+ * Hydrate ThemeProvider from the DB-backed appearance settings as soon as the
+ * admin shell mounts with a session. Without this, the sidebar only picks up
+ * uploaded admin logos after visiting Settings → Appearance (which calls
+ * applyAppearance on tab load).
+ */
+export function useAppearanceBootstrap(session: unknown) {
+  const { applyAppearance } = useTheme()
+  const active = Boolean(session)
+
+  useEffect(() => {
+    if (!active) return
+
+    let cancelled = false
+
+    const hydrate = async () => {
+      try {
+        const res = await cmsApi<AppearanceApiResponse>('/appearance')
+        if (cancelled || res.error || !res.data) return
+        applyAppearance(appearanceApiToSnapshot(res.data))
+      } catch {
+        /* keep localStorage / config fallbacks */
+      }
+    }
+
+    void hydrate()
+
+    return () => {
+      cancelled = true
+    }
+  }, [active, applyAppearance])
+}

package/src/lib/appearance-api.ts

@@ -0,0 +1,84 @@
+import {
+  classifyLogoShape,
+  resolveAdminBrand,
+  type BrandAssetLike,
+  type BrandSettings,
+  type ColorMode,
+  type LogoShape,
+  type SidebarDensity,
+} from '@actuate-media/cms-core/appearance'
+
+import type { AdminBrandCache, AppearanceSnapshot } from '../components/ThemeProvider.js'
+
+/** GET /appearance response shape (admin Appearance tab + boot hydration). */
+export interface AppearanceApiResponse {
+  appearance: {
+    adminColorModeDefault: ColorMode
+    adminAccentColor: string
+    sidebarDensity: SidebarDensity
+    contentFont: string
+    reduceMotion: boolean
+  }
+  brand: BrandSettings
+  resolved: { admin: { initials: string } }
+  assets: BrandAssetLike[]
+  siteTitle: string | null
+}
+
+export interface AssetPreview {
+  id: string
+  url: string
+  mimeType: string
+  width?: number
+  height?: number
+  shape: LogoShape
+}
+
+export function parseAppearanceAssets(assets: BrandAssetLike[]): Record<string, AssetPreview> {
+  const next: Record<string, AssetPreview> = {}
+  for (const a of assets ?? []) {
+    next[a.id] = {
+      id: a.id,
+      url: a.publicUrl,
+      mimeType: a.mimeType,
+      width: a.width ?? undefined,
+      height: a.height ?? undefined,
+      shape: classifyLogoShape(a.width ?? undefined, a.height ?? undefined),
+    }
+  }
+  return next
+}
+
+export function adminBrandToCache(
+  brand: BrandSettings,
+  assets: Record<string, AssetPreview>,
+  siteTitle: string | null,
+): AdminBrandCache {
+  const map = new Map<string, BrandAssetLike>(
+    Object.values(assets).map((a) => [
+      a.id,
+      { id: a.id, publicUrl: a.url, mimeType: a.mimeType, width: a.width, height: a.height },
+    ]),
+  )
+  const resolved = resolveAdminBrand(brand, map, siteTitle)
+  return {
+    primaryUrl: resolved.primary?.url ?? null,
+    markUrl: resolved.mark?.url ?? null,
+    darkUrl: resolved.dark?.url ?? null,
+    initials: resolved.initials,
+  }
+}
+
+/** Map a stored appearance payload into the ThemeProvider snapshot. */
+export function appearanceApiToSnapshot(data: AppearanceApiResponse): AppearanceSnapshot {
+  const brand: BrandSettings = { ...data.brand, mode: data.brand?.mode ?? 'inheritPublicBrand' }
+  const assets = parseAppearanceAssets(data.assets)
+  return {
+    theme: data.appearance.adminColorModeDefault,
+    accent: data.appearance.adminAccentColor,
+    density: data.appearance.sidebarDensity,
+    font: data.appearance.contentFont,
+    reduceMotion: data.appearance.reduceMotion,
+    adminBrand: adminBrandToCache(brand, assets, data.siteTitle ?? null),
+  }
+}

package/src/lib/forms-service.ts

@@ -17,6 +17,8 @@ import type {
   FormField,
   FormNotificationSettings,
   FormEmbedSettings,
+  FormWebhookConfig,
+  FormWebhookEvent,
   FormStatus,
   FormStats,
   FormsSidebarCount,
@@ -35,6 +37,8 @@ export type {
   FieldValidationRules,
   FormNotificationSettings,
   FormEmbedSettings,
+  FormWebhookConfig,
+  FormWebhookEvent,
   FormStatus,
   FormStats,
   FormsSidebarCount,
@@ -251,6 +255,83 @@ export async function updateEmbedSettings(
   return { data: res.data, error: res.error }
 }
 
+// ─── Webhooks (CRM / Zapier) ───────────────────────────────────────────────
+
+export interface WebhookTestResult {
+  ok: boolean
+  status: number
+  attempts: number
+  error?: string
+}
+
+export interface CreateFormWebhookPayload {
+  url: string
+  events?: FormWebhookEvent[]
+  enabled?: boolean
+  retryCount?: number
+}
+
+export interface UpdateFormWebhookPayload {
+  url?: string
+  events?: FormWebhookEvent[]
+  enabled?: boolean
+  retryCount?: number
+}
+
+/** Plaintext secret is returned only on create — store it before closing the dialog. */
+export type CreatedFormWebhook = FormWebhookConfig & { secret: string }
+
+export async function fetchFormWebhooks(formId: string): Promise<FormWebhookConfig[]> {
+  const res = await cmsApi<FormWebhookConfig[]>(`/forms/${encodeURIComponent(formId)}/webhooks`)
+  throwIfError(res)
+  return res.data ?? []
+}
+
+export async function createFormWebhook(
+  formId: string,
+  payload: CreateFormWebhookPayload,
+): Promise<{ data?: CreatedFormWebhook; error?: string }> {
+  const res = await cmsApi<CreatedFormWebhook>(`/forms/${encodeURIComponent(formId)}/webhooks`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+  return { data: res.data, error: res.error }
+}
+
+export async function updateFormWebhook(
+  formId: string,
+  webhookId: string,
+  payload: UpdateFormWebhookPayload,
+): Promise<{ data?: FormWebhookConfig; error?: string }> {
+  const res = await cmsApi<FormWebhookConfig>(
+    `/forms/${encodeURIComponent(formId)}/webhooks/${encodeURIComponent(webhookId)}`,
+    { method: 'PATCH', body: JSON.stringify(payload) },
+  )
+  return { data: res.data, error: res.error }
+}
+
+export async function deleteFormWebhook(
+  formId: string,
+  webhookId: string,
+): Promise<{ error?: string }> {
+  const res = await cmsApi(
+    `/forms/${encodeURIComponent(formId)}/webhooks/${encodeURIComponent(webhookId)}`,
+    { method: 'DELETE' },
+  )
+  return { error: res.error }
+}
+
+export async function testFormWebhook(
+  formId: string,
+  webhookId: string,
+): Promise<{ data?: WebhookTestResult; error?: string }> {
+  const res = await cmsApi<WebhookTestResult>(
+    `/forms/${encodeURIComponent(formId)}/webhooks/${encodeURIComponent(webhookId)}/test`,
+    { method: 'POST' },
+  )
+  return { data: res.data, error: res.error }
+}
+
 // ─── Entries (submissions) ─────────────────────────────────────────────────
 
 /** A page of submissions as returned by `GET /forms/entries`. */