@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/components/forms/FormSchemaDrawer.tsx

@@ -1,192 +0,0 @@
-'use client'
-
-/**
- * Form Schema drawer — the right-side panel opened from the Forms list "Schema"
- * 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
- * historical entries never break when the schema changes.
- */
-import * as Tabs from '@radix-ui/react-tabs'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
-import { fetchFormSchema, saveFormSchema, type FormField } from '../../lib/forms-service.js'
-import type { FormListItem } from '../../lib/forms-service.js'
-import { emitFormsChanged } from '../../lib/forms-events.js'
-import { ConfirmDialog } from '../ui/ConfirmDialog.js'
-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({
-  form,
-  open,
-  onOpenChange,
-  onSaved,
-}: {
-  form: FormListItem | null
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  /** Called after a schema/settings change so the list can refetch. */
-  onSaved?: () => void
-}) {
-  const [tab, setTab] = useState<string>('fields')
-  const [fields, setFields] = useState<FormField[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [dirty, setDirty] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [confirmDiscard, setConfirmDiscard] = useState(false)
-
-  const formId = form?.id ?? null
-  const hasSubmissions = (form?.totalEntries ?? 0) > 0
-
-  useEffect(() => {
-    if (!open || !formId) return
-    setTab('fields')
-    setDirty(false)
-    setLoading(true)
-    setError(null)
-    let active = true
-    fetchFormSchema(formId)
-      .then((schema) => {
-        if (active) setFields(schema.fields)
-      })
-      .catch((e: unknown) => {
-        if (active) setError(e instanceof Error ? e.message : 'Failed to load schema')
-      })
-      .finally(() => {
-        if (active) setLoading(false)
-      })
-    return () => {
-      active = false
-    }
-  }, [open, formId])
-
-  function handleFieldsChange(next: FormField[]) {
-    setFields(next)
-    setDirty(true)
-  }
-
-  async function handleSave() {
-    if (!formId) return
-    setSaving(true)
-    const res = await saveFormSchema(
-      formId,
-      fields.map((f, i) => ({ ...f, sortOrder: i })),
-    )
-    setSaving(false)
-    if (res.error) {
-      toast.error(res.error)
-      return
-    }
-    setDirty(false)
-    toast.success('Schema saved.')
-    emitFormsChanged()
-    onSaved?.()
-  }
-
-  function requestClose(next: boolean) {
-    if (!next && dirty) {
-      setConfirmDiscard(true)
-      return
-    }
-    onOpenChange(next)
-  }
-
-  if (!form) return null
-
-  return (
-    <>
-      <Drawer
-        open={open}
-        onOpenChange={requestClose}
-        title={form.name}
-        description={`/${form.slug}`}
-        width="max-w-2xl"
-        footer={
-          tab === 'fields' ? (
-            <>
-              <button className={btnSecondary} onClick={() => requestClose(false)}>
-                Close
-              </button>
-              <button className={btnPrimary} onClick={handleSave} disabled={saving || loading}>
-                {saving ? 'Saving…' : 'Save Schema'}
-              </button>
-            </>
-          ) : undefined
-        }
-      >
-        <Tabs.Root value={tab} onValueChange={setTab}>
-          <Tabs.List
-            className="border-border mb-4 flex gap-1 border-b"
-            aria-label="Form schema sections"
-          >
-            {TABS.map((t) => (
-              <Tabs.Trigger
-                key={t.id}
-                value={t.id}
-                className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary focus-visible:ring-ring -mb-px border-b-2 border-transparent px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
-              >
-                {t.label}
-              </Tabs.Trigger>
-            ))}
-          </Tabs.List>
-
-          <Tabs.Content value="fields" tabIndex={-1}>
-            {loading ? (
-              <FormsLoading label="Loading schema…" />
-            ) : error ? (
-              <FormsErrorState message={error} onRetry={() => formId && setTab('fields')} />
-            ) : (
-              <FieldsPanel
-                fields={fields}
-                onChange={handleFieldsChange}
-                hasSubmissions={hasSubmissions}
-              />
-            )}
-          </Tabs.Content>
-
-          <Tabs.Content value="embed" tabIndex={-1}>
-            {formId && <EmbedPanel formId={formId} slug={form.slug} status={form.status} />}
-          </Tabs.Content>
-
-          <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>
-
-      <ConfirmDialog
-        open={confirmDiscard}
-        onClose={() => setConfirmDiscard(false)}
-        onConfirm={() => {
-          setDirty(false)
-          onOpenChange(false)
-        }}
-        title="Discard unsaved changes?"
-        description="You have unsaved schema changes. Closing now will discard them."
-        confirmLabel="Discard"
-        cancelLabel="Keep editing"
-        destructive
-      />
-    </>
-  )
-}