@actuate-media/cms-admin 0.77.0 → 0.79.0

package/src/components/forms/NotificationsPanel.tsx

@@ -4,42 +4,72 @@
  * 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, useState } from 'react'
+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 } from './primitives.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)
-    fetchNotificationSettings(formId)
-      .then((s) => {
-        if (active) setSettings(s)
-      })
+
+    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')
@@ -47,10 +77,13 @@ export function NotificationsPanel({
       .finally(() => {
         if (active) setLoading(false)
       })
+
     return () => {
       active = false
     }
-  }, [formId])
+  }, [formId, fieldsProp])
+
+  const emailFields = useMemo(() => fields.filter((f) => f.type === 'email'), [fields])
 
   function patch(p: Partial<FormNotificationSettings>) {
     setSettings((cur) => (cur ? { ...cur, ...p } : cur))
@@ -71,10 +104,48 @@ export function NotificationsPanel({
     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
@@ -84,6 +155,12 @@ export function NotificationsPanel({
         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"
@@ -105,41 +182,65 @@ export function NotificationsPanel({
           />
         </Field>
 
-        <Field label="Reply-to field key" hint="Field whose value is used as the reply-to address">
-          <input
-            type="text"
+        <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 })}
-            placeholder="email"
-            className={inputCls}
-          />
+            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">
+        <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 from {{name}}"
+            placeholder="New submission: {{formName}} — {{siteName}}"
             className={inputCls}
           />
         </Field>
 
-        <Field label="Message template">
+        <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."
@@ -156,11 +257,30 @@ export function NotificationsPanel({
           />
           {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>
@@ -169,6 +289,7 @@ export function NotificationsPanel({
                   rows={3}
                   value={settings.autoresponderBody ?? ''}
                   onChange={(e) => patch({ autoresponderBody: e.target.value })}
+                  placeholder="Thanks, {{senderName}}! We received your submission…"
                   className={inputCls}
                 />
               </Field>
@@ -180,12 +301,21 @@ export function NotificationsPanel({
       <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 (
-        <span className="font-mono">RESEND_API_KEY</span> or SMTP).
+        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 justify-end">
-        <button className={btnPrimary} onClick={save} disabled={saving}>
+      <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>

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>
+  )
+}

package/src/components/forms/WebhooksPanel.tsx

@@ -155,7 +155,11 @@ export function WebhooksPanel({ formId, formSlug }: { formId: string; formSlug:
               <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.
+                <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

package/src/components/ui/ReauthDialog.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState } from 'react'
+import { Modal } from './Modal.js'
+import { Button } from './Button.js'
+
+export interface ReauthDialogProps {
+  open: boolean
+  onClose: () => void
+  /** Called with the entered password. Resolve on success; throw or return without closing on failure. */
+  onSubmit: (password: string) => Promise<void>
+  title?: string
+  description?: string
+  confirmLabel?: string
+  /** When true, the confirm button uses the destructive (danger) variant. */
+  destructive?: boolean
+}
+
+/**
+ * Password re-auth modal for sensitive admin actions. Prefer this over
+ * `window.prompt()` so the flow stays in-theme and accessible.
+ */
+export function ReauthDialog({
+  open,
+  onClose,
+  onSubmit,
+  title = "Confirm it's you",
+  description = 'This is a sensitive action. Re-enter your password to continue.',
+  confirmLabel = 'Confirm',
+  destructive = false,
+}: ReauthDialogProps) {
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const resetAndClose = () => {
+    setPassword('')
+    onClose()
+  }
+
+  const submit = async () => {
+    if (!password || busy) return
+    setBusy(true)
+    try {
+      await onSubmit(password)
+      setPassword('')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={resetAndClose}
+      title={title}
+      actions={
+        <>
+          <Button variant="ghost" onClick={resetAndClose} disabled={busy}>
+            Cancel
+          </Button>
+          <Button
+            variant={destructive ? 'danger' : 'primary'}
+            loading={busy}
+            disabled={!password || busy}
+            onClick={submit}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      <p className="text-muted-foreground mb-3 text-sm">{description}</p>
+      <label
+        htmlFor="reauth-password"
+        className="text-card-foreground mb-1 block text-sm font-medium"
+      >
+        Your password
+      </label>
+      <input
+        id="reauth-password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') void submit()
+        }}
+        autoComplete="current-password"
+        autoFocus
+        className="border-border bg-input-background text-foreground focus:ring-brand w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+      />
+    </Modal>
+  )
+}

package/src/components/ui/index.ts

@@ -28,6 +28,8 @@ export { Modal } from './Modal.js'
 export type { ModalProps } from './Modal.js'
 export { ConfirmDialog } from './ConfirmDialog.js'
 export type { ConfirmDialogProps } from './ConfirmDialog.js'
+export { ReauthDialog } from './ReauthDialog.js'
+export type { ReauthDialogProps } from './ReauthDialog.js'
 export { DataTable } from './DataTable.js'
 export type { DataTableProps } from './DataTable.js'
 export { Pagination } from './Pagination.js'

package/src/lib/forms-service.ts

@@ -10,7 +10,7 @@
  * `packages/cms-core/src/api/handlers.ts` (PR 2). Domain types are re-used
  * from `@actuate-media/cms-core` so the admin can never drift from the server.
  */
-import { cmsApi } from './api.js'
+import { cmsApi, getApiBase } from './api.js'
 import type {
   FormDefinition,
   FormSchemaVersion,
@@ -251,6 +251,18 @@ export async function setNotifyEnabled(
   return { data: res.data, error: res.error }
 }
 
+/** Send a sample notification email to the first configured recipient. */
+export async function testNotificationSettings(id: string): Promise<{
+  data?: { notified: number; autoresponded: boolean; skippedReason?: string }
+  error?: string
+}> {
+  const res = await cmsApi<{ notified: number; autoresponded: boolean; skippedReason?: string }>(
+    `/forms/${encodeURIComponent(id)}/notifications/test`,
+    { method: 'POST', body: '{}' },
+  )
+  return { data: res.data, error: res.error }
+}
+
 // ─── Embed ───────────────────────────────────────────────────────────────
 
 export async function fetchEmbedSettings(id: string): Promise<FormEmbedSettings> {
@@ -437,3 +449,47 @@ export async function bulkUpdateEntries(
   })
   return { data: res.data, error: res.error }
 }
+
+export type EntriesExportFormat = 'csv' | 'xlsx'
+
+/**
+ * Download the full server-side entries export (all pages, decrypted values,
+ * attribution columns — bounded server-side to 5,000 rows). Scoped to one
+ * form when `formId` is set, otherwise exports across all forms. Uses raw
+ * `fetch` because the response is a file, not the JSON envelope `cmsApi`
+ * unwraps.
+ */
+export async function downloadEntriesExport(
+  options: {
+    formId?: string
+    format?: EntriesExportFormat
+  } = {},
+): Promise<{ error?: string }> {
+  const format: EntriesExportFormat = options.format ?? 'csv'
+  const qs = new URLSearchParams({ format })
+  if (options.formId) qs.set('formId', options.formId)
+
+  let res: Response
+  try {
+    res = await fetch(`${getApiBase()}/forms/entries/export?${qs.toString()}`, {
+      credentials: 'include',
+    })
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Network error' }
+  }
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string }
+    return { error: body.error || `Export failed (${res.status})` }
+  }
+
+  const blob = await res.blob()
+  const disposition = res.headers.get('content-disposition') ?? ''
+  const filename = /filename="([^"]+)"/.exec(disposition)?.[1] ?? `entries.${format}`
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+  return {}
+}

package/src/lib/seo-service.ts

@@ -776,6 +776,9 @@ export interface RedirectRule {
   preserveQuery: boolean
   hits: number
   lastHitAt: string | null
+  /** True when lastHitAt is null — never recorded a public hit. */
+  neverHit: boolean
+  /** True when last hit was more than 60 days ago (never-hit is not stale). */
   stale: boolean
   source: string
   notes: string | null
@@ -786,6 +789,7 @@ export interface RedirectRule {
 export interface RedirectOverview {
   activeRedirects: number
   staleRedirects: number
+  neverHitRedirects: number
   notFoundCount: number
   notFoundHits: number
   chainsAndLoops: number
@@ -825,6 +829,7 @@ export async function fetchRedirectOverview(): Promise<RedirectOverview> {
     res.data ?? {
       activeRedirects: 0,
       staleRedirects: 0,
+      neverHitRedirects: 0,
       notFoundCount: 0,
       notFoundHits: 0,
       chainsAndLoops: 0,