@prenta/admin 0.92.0

package/src/components/forms/NotificationsPanel.tsx

@@ -0,0 +1,364 @@
+'use client'
+
+/**
+ * Notifications tab of the Form Schema drawer. Persists per-form notification
+ * settings (recipients, reply-to, subject/message templates, field inclusion,
+ * autoresponder). Email delivery uses the configured email adapter when enabled.
+ *
+ * Leave subject/message blank to use the built-in template (all fields +
+ * attribution). Shortcodes are listed in ShortcodeGlossary for copy/paste.
+ */
+import { useEffect, useMemo, useState } from 'react'
+import { Toggle } from '../ui/Toggle.js'
+import { toast } from 'sonner'
+import {
+  fetchFormById,
+  fetchNotificationSettings,
+  updateNotificationSettings,
+  testNotificationSettings,
+  type FormField,
+  type FormNotificationSettings,
+} from '../../lib/forms-service.js'
+import { emitFormsChanged } from '../../lib/forms-events.js'
+import { FormsErrorState, FormsLoading, btnPrimary, btnSecondary } from './primitives.js'
+import { ShortcodeGlossary } from './ShortcodeGlossary.js'
+
+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'
+
+const selectCls =
+  '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 NotificationsPanel({
+  formId,
+  fields: fieldsProp,
+  onChanged,
+}: {
+  formId: string
+  /** Optional schema fields for reply-to picker + shortcode glossary. */
+  fields?: FormField[]
+  /** Called after a successful save so the list can refresh the notify state. */
+  onChanged?: () => void
+}) {
+  const [settings, setSettings] = useState<FormNotificationSettings | null>(null)
+  const [fields, setFields] = useState<FormField[]>(fieldsProp ?? [])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+
+  useEffect(() => {
+    if (fieldsProp) setFields(fieldsProp)
+  }, [fieldsProp])
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+
+    const load = async () => {
+      const settingsPromise = fetchNotificationSettings(formId)
+      const fieldsPromise =
+        fieldsProp && fieldsProp.length > 0
+          ? Promise.resolve(fieldsProp)
+          : fetchFormById(formId).then((f) => f?.fields ?? [])
+
+      const [s, f] = await Promise.all([settingsPromise, fieldsPromise])
+      if (!active) return
+      setSettings(s)
+      setFields(f)
+    }
+
+    load()
+      .catch((e: unknown) => {
+        if (active)
+          setError(e instanceof Error ? e.message : 'Failed to load notification settings')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [formId, fieldsProp])
+
+  const emailFields = useMemo(() => fields.filter((f) => f.type === 'email'), [fields])
+
+  function patch(p: Partial<FormNotificationSettings>) {
+    setSettings((cur) => (cur ? { ...cur, ...p } : cur))
+  }
+
+  async function save() {
+    if (!settings) return
+    setSaving(true)
+    const res = await updateNotificationSettings(formId, settings)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) setSettings(res.data)
+    toast.success('Notification settings saved.')
+    emitFormsChanged()
+    onChanged?.()
+  }
+
+  async function sendTest() {
+    if (!settings) return
+    if (!settings.enabled || settings.recipients.length === 0) {
+      toast.error('Enable notifications and add at least one recipient before sending a test.')
+      return
+    }
+    setTesting(true)
+    // Persist first so the test uses what the admin currently sees.
+    const saved = await updateNotificationSettings(formId, settings)
+    if (saved.error) {
+      setTesting(false)
+      toast.error(saved.error)
+      return
+    }
+    if (saved.data) setSettings(saved.data)
+
+    const res = await testNotificationSettings(formId)
+    setTesting(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    const notified = res.data?.notified ?? 0
+    if (notified > 0) {
+      toast.success(`Test email sent to ${settings.recipients[0]}.`)
+      emitFormsChanged()
+      onChanged?.()
+      return
+    }
+    toast.error(
+      res.data?.skippedReason === 'no-email-adapter'
+        ? 'No email provider configured. Set up Email in Settings or RESEND_API_KEY / SMTP.'
+        : 'Test email was not sent.',
+    )
+  }
+
+  if (loading) return <FormsLoading label="Loading notification settings…" />
+  if (error) return <FormsErrorState message={error} />
+  if (!settings) return null
+
+  const missingRecipients = settings.enabled && settings.recipients.length === 0
+
+  return (
+    <div className="space-y-4">
+      <ToggleRow
+        label="Enable notifications"
+        help="Email the recipients below when a new entry arrives."
+        checked={settings.enabled}
+        onChange={(v) => patch({ enabled: v })}
+      />
+
+      {missingRecipients && (
+        <p className="text-destructive text-sm" role="status">
+          Notifications are on, but no recipients are set — admin emails will not send.
+        </p>
+      )}
+
+      <fieldset
+        disabled={!settings.enabled}
+        className="space-y-4 transition-opacity disabled:opacity-50"
+      >
+        <Field label="Recipients" hint="Comma-separated email addresses">
+          <input
+            type="text"
+            value={settings.recipients.join(', ')}
+            onChange={(e) =>
+              patch({
+                recipients: e.target.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              })
+            }
+            placeholder="team@example.com"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field
+          label="Reply-To"
+          hint="Defaults to the submitter’s email. Override with a specific email field if needed."
+        >
+          <select
+            value={settings.replyToFieldKey ?? ''}
+            onChange={(e) => patch({ replyToFieldKey: e.target.value || null })}
+            className={selectCls}
+            aria-label="Reply-To field"
+          >
+            <option value="">Submitter email (auto)</option>
+            {emailFields.map((f) => (
+              <option key={f.id || f.key} value={f.key}>
+                {`${f.label || f.key} ({{${f.key}}})`}
+              </option>
+            ))}
+          </select>
+        </Field>
+
+        <Field
+          label="Subject template"
+          hint="Leave blank for “New submission: {form} — {website}”. Use shortcodes below to customize."
+        >
+          <input
+            type="text"
+            value={settings.subjectTemplate ?? ''}
+            onChange={(e) => patch({ subjectTemplate: e.target.value })}
+            placeholder="New submission: {{formName}} — {{siteName}}"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field
+          label="Message template"
+          hint="Leave blank for the built-in intro. Field values and attribution are appended below when enabled."
+        >
+          <textarea
+            rows={3}
+            value={settings.messageTemplate ?? ''}
+            onChange={(e) => patch({ messageTemplate: e.target.value })}
+            placeholder="Optional custom intro — leave blank for the default template"
+            className={inputCls}
+          />
+        </Field>
+
+        <ShortcodeGlossary fields={fields} />
+
+        <ToggleRow
+          label="Include all fields"
+          help="Append every submitted field to the notification body."
+          checked={settings.includeFields ?? true}
+          onChange={(v) => patch({ includeFields: v })}
+        />
+        <ToggleRow
+          label="Include attribution"
+          help="Append marketing attribution (source, medium, channel, landing page, referrer) when captured."
+          checked={settings.includeAttribution ?? true}
+          onChange={(v) => patch({ includeAttribution: v })}
+        />
+        <ToggleRow
+          label="Exclude sensitive fields"
+          help="Omit fields marked as sensitive/PII from the email."
+          checked={settings.excludeSensitiveFields ?? false}
+          onChange={(v) => patch({ excludeSensitiveFields: v })}
+        />
+
+        <div className="border-border border-t pt-4">
+          <ToggleRow
+            label="Auto-response email"
+            help="Send a confirmation email back to the submitter."
+            checked={settings.autoresponderEnabled ?? false}
+            onChange={(v) => patch({ autoresponderEnabled: v })}
+          />
+          {settings.autoresponderEnabled && (
+            <div className="mt-3 space-y-3">
+              <Field
+                label="Auto-response email field"
+                hint="Defaults to the submitter’s email when left on Auto."
+              >
+                <select
+                  value={settings.autoresponderEmailFieldKey ?? ''}
+                  onChange={(e) => patch({ autoresponderEmailFieldKey: e.target.value || null })}
+                  className={selectCls}
+                  aria-label="Auto-response email field"
+                >
+                  <option value="">Submitter email (auto)</option>
+                  {emailFields.map((f) => (
+                    <option key={f.id || f.key} value={f.key}>
+                      {f.label || f.key}
+                    </option>
+                  ))}
+                </select>
+              </Field>
+              <Field label="Auto-response subject">
+                <input
+                  type="text"
+                  value={settings.autoresponderSubject ?? ''}
+                  onChange={(e) => patch({ autoresponderSubject: e.target.value })}
+                  placeholder="We received your submission"
+                  className={inputCls}
+                />
+              </Field>
+              <Field label="Auto-response body">
+                <textarea
+                  rows={3}
+                  value={settings.autoresponderBody ?? ''}
+                  onChange={(e) => patch({ autoresponderBody: e.target.value })}
+                  placeholder="Thanks, {{senderName}}! We received your submission…"
+                  className={inputCls}
+                />
+              </Field>
+            </div>
+          )}
+        </div>
+      </fieldset>
+
+      <p className="text-muted-foreground text-xs">
+        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 in{' '}
+        <span className="font-medium">Settings → Email</span> (or via{' '}
+        <span className="font-mono">RESEND_API_KEY</span> / SMTP).
+      </p>
+
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        <button
+          type="button"
+          className={btnSecondary}
+          onClick={() => void sendTest()}
+          disabled={testing || saving || !settings.enabled || settings.recipients.length === 0}
+        >
+          {testing ? 'Sending test…' : 'Send test'}
+        </button>
+        <button type="button" className={btnPrimary} onClick={() => void save()} disabled={saving}>
+          {saving ? 'Saving…' : 'Save notifications'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function ToggleRow({
+  label,
+  help,
+  checked,
+  onChange,
+}: {
+  label: string
+  help: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="min-w-0">
+        <span className="text-foreground block text-sm font-medium">{label}</span>
+        <span className="text-muted-foreground block text-sm">{help}</span>
+      </span>
+      <Toggle checked={checked} onCheckedChange={onChange} aria-label={label} />
+    </div>
+  )
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: string
+  children: React.ReactNode
+}) {
+  return (
+    <label className="block">
+      <span className="text-foreground mb-1 block text-sm font-medium">{label}</span>
+      {children}
+      {hint && <span className="text-muted-foreground mt-1 block text-xs">{hint}</span>}
+    </label>
+  )
+}

package/src/components/forms/ShortcodeGlossary.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+/**
+ * Copy-paste glossary of notification shortcodes (built-ins + form field keys).
+ * Used by the Notifications panel so admins never have to guess `{{token}}` names.
+ *
+ * Built-in keys must stay in sync with `FORM_NOTIFICATION_SHORTCODES` in
+ * `packages/cms-core/src/forms/notify.ts`.
+ */
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { toast } from 'sonner'
+import type { FormField } from '../../lib/forms-service.js'
+
+/** Mirrors cms-core `FORM_NOTIFICATION_SHORTCODES`. */
+const BUILTIN_SHORTCODES = [
+  { key: 'formName', description: 'Form name' },
+  { key: 'siteName', description: 'Website name (SEO settings)' },
+  { key: 'siteUrl', description: 'Website URL (SEO settings)' },
+  { key: 'entryNumber', description: 'Submission number (e.g. #00042)' },
+  { key: 'senderName', description: 'Derived submitter name' },
+  { key: 'senderEmail', description: 'Derived submitter email' },
+  { key: 'submittedAt', description: 'Submission timestamp (ISO)' },
+] as const
+
+function token(key: string): string {
+  return `{{${key}}}`
+}
+
+async function copyText(value: string, label: string) {
+  try {
+    await navigator.clipboard.writeText(value)
+    toast.success(`Copied ${label}`)
+    return true
+  } catch {
+    toast.error('Copy failed — your browser blocked clipboard access.')
+    return false
+  }
+}
+
+export function ShortcodeGlossary({ fields = [] }: { fields?: FormField[] }) {
+  const fieldTokens = fields.filter(
+    (f) => f.type !== 'honeypot' && f.type !== 'divider' && f.type !== 'richtext',
+  )
+
+  const allTokens = [
+    ...BUILTIN_SHORTCODES.map((s) => token(s.key)),
+    ...fieldTokens.map((f) => token(f.key)),
+  ].join('\n')
+
+  return (
+    <div className="border-border bg-muted/40 space-y-3 rounded-md border p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-foreground text-sm font-medium">Shortcode glossary</p>
+          <p className="text-muted-foreground text-xs">
+            Paste these into subject or message templates. Leave templates blank to use the built-in
+            email (all fields + attribution).
+          </p>
+        </div>
+        <CopyButton
+          label="Copy all"
+          ariaLabel="Copy all shortcodes"
+          value={allTokens}
+          successLabel="all shortcodes"
+        />
+      </div>
+
+      <ShortcodeGroup title="Built-in">
+        {BUILTIN_SHORTCODES.map((s) => (
+          <ShortcodeRow key={s.key} code={token(s.key)} description={s.description} />
+        ))}
+      </ShortcodeGroup>
+
+      {fieldTokens.length > 0 && (
+        <ShortcodeGroup title="Form fields">
+          {fieldTokens.map((f) => (
+            <ShortcodeRow key={f.id || f.key} code={token(f.key)} description={f.label || f.key} />
+          ))}
+        </ShortcodeGroup>
+      )}
+    </div>
+  )
+}
+
+function ShortcodeGroup({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="text-muted-foreground mb-1.5 text-xs font-medium tracking-wide uppercase">
+        {title}
+      </p>
+      <ul className="border-border divide-border bg-background divide-y overflow-hidden rounded-md border">
+        {children}
+      </ul>
+    </div>
+  )
+}
+
+function ShortcodeRow({ code, description }: { code: string; description: string }) {
+  return (
+    <li className="flex items-center justify-between gap-2 px-2.5 py-1.5">
+      <div className="min-w-0">
+        <code className="text-foreground font-mono text-xs">{code}</code>
+        <span className="text-muted-foreground ml-2 text-xs">{description}</span>
+      </div>
+      <CopyButton label="Copy" ariaLabel={`Copy ${code}`} value={code} successLabel={code} />
+    </li>
+  )
+}
+
+function CopyButton({
+  label,
+  ariaLabel,
+  value,
+  successLabel,
+}: {
+  label: string
+  ariaLabel: string
+  value: string
+  successLabel: string
+}) {
+  const [copied, setCopied] = useState(false)
+
+  async function onCopy() {
+    const ok = await copyText(value, successLabel)
+    if (!ok) return
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => void onCopy()}
+      className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
+      aria-label={ariaLabel}
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5" aria-hidden />
+      ) : (
+        <Copy className="h-3.5 w-3.5" aria-hidden />
+      )}
+      {copied ? 'Copied' : label}
+    </button>
+  )
+}