@prenta/admin 0.92.0

package/src/components/forms/WebhooksPanel.tsx

@@ -0,0 +1,313 @@
+'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 { Toggle } from '../ui/Toggle.js'
+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://prentacms.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. Marketing attribution
+                (when captured) arrives under{' '}
+                <span className="font-mono text-xs">attribution.source</span>,{' '}
+                <span className="font-mono text-xs">attribution.medium</span>,{' '}
+                <span className="font-mono text-xs">attribution.channel</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
+              Prenta 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-Prenta-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">
+                <Toggle
+                  checked={webhook.enabled}
+                  onCheckedChange={(v) => void toggleEnabled(webhook, v)}
+                  aria-label={`Enable webhook ${webhook.url}`}
+                  variant="enabled"
+                />
+                <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/components/forms/primitives.tsx

@@ -0,0 +1,290 @@
+'use client'
+
+/**
+ * Shared Forms UI primitives — token-only, accessible building blocks used
+ * across the Forms list, schema drawer, and (later) the entries views. No raw
+ * palette colours: field-type and status hues map onto the theme's semantic
+ * tokens (success / warning / info / destructive / primary / muted) so they
+ * track light/dark mode and brand overrides automatically.
+ */
+import type { ReactNode } from 'react'
+import { AlertTriangle, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
+import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
+
+// ─── Field-type badges ─────────────────────────────────────────────────────
+
+/** Map a field type onto a semantic colour pair (background + text). */
+function fieldTypeTone(type: FormFieldType): string {
+  switch (type) {
+    case 'email':
+    case 'url':
+    case 'date':
+    case 'number':
+      return 'bg-info/10 text-info'
+    case 'phone':
+    case 'textarea':
+      return 'bg-primary/10 text-primary'
+    case 'select':
+    case 'multiselect':
+    case 'radio':
+      return 'bg-warning/10 text-warning'
+    case 'checkbox':
+    case 'consent':
+      return 'bg-success/10 text-success'
+    case 'file':
+      return 'bg-destructive/10 text-destructive'
+    default:
+      return 'bg-muted text-muted-foreground'
+  }
+}
+
+const FIELD_TYPE_LABELS: Partial<Record<FormFieldType, string>> = {
+  text: 'TEXT',
+  email: 'EMAIL',
+  phone: 'PHONE',
+  textarea: 'TEXTAREA',
+  select: 'SELECT',
+  multiselect: 'MULTI',
+  radio: 'RADIO',
+  checkbox: 'CHECKBOX',
+  date: 'DATE',
+  number: 'NUMBER',
+  url: 'URL',
+  hidden: 'HIDDEN',
+  file: 'FILE',
+  consent: 'CONSENT',
+  richtext: 'CONTENT',
+  divider: 'DIVIDER',
+  honeypot: 'HONEYPOT',
+}
+
+export function FieldTypeBadge({ type }: { type: FormFieldType }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase ${fieldTypeTone(type)}`}
+    >
+      {FIELD_TYPE_LABELS[type] ?? type}
+    </span>
+  )
+}
+
+// ─── Status badges ─────────────────────────────────────────────────────────
+
+const STATUS_META: Record<FormStatus, { label: string; tone: StatusBadgeTone }> = {
+  active: { label: 'Active', tone: 'success' },
+  draft: { label: 'Draft', tone: 'warning' },
+  archived: { label: 'Archived', tone: 'muted' },
+}
+
+export function FormStatusBadge({ status }: { status: FormStatus }) {
+  const meta = STATUS_META[status] ?? STATUS_META.draft
+  return <StatusBadge tone={meta.tone}>{meta.label}</StatusBadge>
+}
+
+/** Small red count badge for unread submissions. Hidden when count is 0. */
+export function UnreadBadge({ count, className = '' }: { count: number; className?: string }) {
+  if (count <= 0) return null
+  return (
+    <span
+      className={`bg-destructive text-destructive-foreground inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums ${className}`}
+      aria-label={`${count} unread`}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  )
+}
+
+// ─── Summary chips ───────────────────────────────────────────────────────
+
+export function SummaryChip({
+  value,
+  label,
+  tone = 'neutral',
+}: {
+  value: ReactNode
+  label: string
+  tone?: 'neutral' | 'success' | 'warning' | 'destructive'
+}) {
+  const valueCls =
+    tone === 'success'
+      ? 'text-success'
+      : tone === 'warning'
+        ? 'text-warning'
+        : tone === 'destructive'
+          ? 'text-destructive'
+          : 'text-foreground'
+  return (
+    <div className="border-border bg-card flex items-baseline gap-1.5 rounded-lg border px-3 py-2">
+      <span className={`text-base font-medium tabular-nums ${valueCls}`}>{value}</span>
+      <span className="text-muted-foreground text-sm">{label}</span>
+    </div>
+  )
+}
+
+// ─── States ──────────────────────────────────────────────────────────────
+
+export function FormsLoading({ label = 'Loading…' }: { label?: string }) {
+  return (
+    <div className="flex h-64 items-center justify-center" role="status" aria-live="polite">
+      <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+      <span className="sr-only">{label}</span>
+    </div>
+  )
+}
+
+export function FormsEmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+}) {
+  return (
+    <div className="border-border flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-12 text-center">
+      {icon && (
+        <div className="text-muted-foreground mb-3" aria-hidden>
+          {icon}
+        </div>
+      )}
+      <h3 className="text-foreground text-base font-medium">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 max-w-md text-sm">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
+
+export function FormsErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div
+      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-3"
+      role="alert"
+    >
+      <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />
+      <span className="text-destructive flex-1 text-sm">{message}</span>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm transition-colors"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ─── Pagination ────────────────────────────────────────────────────────────
+
+/**
+ * Return up to 7 page-control entries: a sliding window around the current
+ * page with ellipsis markers, so the footer stays narrow on large datasets.
+ */
+function pageWindow(current: number, total: number): Array<number | 'gap'> {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  const out: Array<number | 'gap'> = [1]
+  const start = Math.max(2, current - 1)
+  const end = Math.min(total - 1, current + 1)
+  if (start > 2) out.push('gap')
+  for (let i = start; i <= end; i++) out.push(i)
+  if (end < total - 1) out.push('gap')
+  out.push(total)
+  return out
+}
+
+/**
+ * Token-only pagination footer matching the Posts/Pages list styling. Renders
+ * a "start–end of total" summary plus prev / numbered / next controls. Hidden
+ * when there is a single page of results.
+ */
+export function FormsPagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  noun = 'result',
+  label = 'Pagination',
+}: {
+  page: number
+  pageSize: number
+  total: number
+  onPageChange: (page: number) => void
+  /** Singular noun for the summary (pluralised automatically). */
+  noun?: string
+  /** Accessible label for the nav landmark. */
+  label?: string
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  if (totalPages <= 1) return null
+  const start = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const end = Math.min(total, page * pageSize)
+
+  return (
+    <div className="border-border flex items-center justify-between border-t px-4 py-3 text-sm">
+      <span className="text-muted-foreground tabular-nums">
+        {start}–{end} of {total} {noun}
+        {total === 1 ? '' : 's'}
+      </span>
+      <nav className="flex items-center gap-1" aria-label={label}>
+        <button
+          type="button"
+          onClick={() => onPageChange(Math.max(1, page - 1))}
+          disabled={page === 1}
+          aria-label="Previous page"
+          className="border-border bg-background text-foreground hover:bg-accent focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <ChevronLeft className="h-4 w-4" aria-hidden />
+        </button>
+        {pageWindow(page, totalPages).map((p, idx) =>
+          p === 'gap' ? (
+            <span
+              key={`gap-${idx}`}
+              aria-hidden
+              className="text-muted-foreground inline-flex h-8 w-8 items-center justify-center"
+            >
+              …
+            </span>
+          ) : (
+            <button
+              key={p}
+              type="button"
+              onClick={() => onPageChange(p)}
+              aria-current={p === page ? 'page' : undefined}
+              className={`focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                p === page
+                  ? 'bg-primary text-primary-foreground'
+                  : 'border-border bg-background text-foreground hover:bg-accent border'
+              }`}
+            >
+              {p}
+            </button>
+          ),
+        )}
+        <button
+          type="button"
+          onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+          disabled={page === totalPages}
+          aria-label="Next page"
+          className="border-border bg-background text-foreground hover:bg-accent focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <ChevronRight className="h-4 w-4" aria-hidden />
+        </button>
+      </nav>
+    </div>
+  )
+}
+
+// ─── Button helpers (token-only) ─────────────────────────────────────────
+
+export const btnPrimary =
+  'inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnSecondary =
+  'inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card px-4 py-2 text-base font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnGhostIcon =
+  'inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'