@actuate-media/cms-admin 0.76.7 → 0.78.0

package/src/components/forms/ExportMenu.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+/**
+ * Export dropdown shared by the per-form Submissions view and the All
+ * Entries inbox. Downloads the *server-side* export (every page, decrypted
+ * values, attribution columns — up to 5,000 rows), not just the rows
+ * currently rendered, in CSV or Excel format.
+ */
+import { useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDown, Download, FileSpreadsheet, FileText } from 'lucide-react'
+import { toast } from 'sonner'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+import { downloadEntriesExport, type EntriesExportFormat } from '../../lib/forms-service.js'
+import { btnSecondary } from './primitives.js'
+
+export interface ExportMenuProps {
+  /** Scope the export to one form; omit to export entries across all forms. */
+  formId?: string
+  /** Disable the trigger (e.g. no entries to export). */
+  disabled?: boolean
+}
+
+const itemClass =
+  'text-card-foreground data-highlighted:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none'
+
+export function ExportMenu({ formId, disabled }: ExportMenuProps) {
+  const [busy, setBusy] = useState(false)
+
+  const run = async (format: EntriesExportFormat) => {
+    setBusy(true)
+    try {
+      const res = await downloadEntriesExport({ formId, format })
+      if (res.error) toast.error(res.error)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button type="button" className={btnSecondary} disabled={disabled || busy}>
+          <Download className="h-4 w-4" aria-hidden />
+          {busy ? 'Exporting…' : 'Export'}
+          <ChevronDown className="h-4 w-4" aria-hidden />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
+        <DropdownMenu.Content
+          align="end"
+          sideOffset={4}
+          className="border-border bg-card z-50 min-w-52 rounded-lg border p-1 shadow-md"
+        >
+          <DropdownMenu.Label className="text-muted-foreground px-2 py-1.5 text-xs">
+            Exports all submissions with attribution
+          </DropdownMenu.Label>
+          <DropdownMenu.Item onSelect={() => void run('csv')} className={itemClass}>
+            <FileText size={14} aria-hidden />
+            CSV (.csv)
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => void run('xlsx')} className={itemClass}>
+            <FileSpreadsheet size={14} aria-hidden />
+            Excel (.xlsx)
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

package/src/components/forms/FormEntryDetailPane.tsx

@@ -58,14 +58,88 @@ interface AttrRow {
   value: string | null | undefined
 }
 
-function attributionRows(entry: FormSubmission): AttrRow[] {
-  return [
-    { label: 'Source', value: entry.utmSource },
-    { label: 'Medium', value: entry.utmMedium },
-    { label: 'Campaign', value: entry.utmCampaign },
+const CHANNEL_LABELS: Record<string, string> = {
+  paid: 'Paid',
+  search_organic: 'Organic search',
+  social: 'Social',
+  email: 'Email',
+  ai: 'AI',
+  referral: 'Referral',
+  direct: 'Direct',
+}
+
+const CLICK_ID_LABELS: Record<string, string> = {
+  gclid: 'GCLID (Google Ads)',
+  fbclid: 'FBCLID (Meta)',
+  msclkid: 'MSCLKID (Microsoft)',
+  ttclid: 'TTCLID (TikTok)',
+  li_fat_id: 'LinkedIn click ID',
+  dclid: 'DCLID (Display)',
+  twclid: 'TWCLID (X Ads)',
+  rdt_cid: 'Reddit click ID',
+}
+
+const DEVICE_LABELS: Record<string, string> = {
+  desktop: 'Desktop',
+  tablet: 'Tablet',
+  mobile: 'Mobile',
+}
+
+function attrString(blob: Record<string, unknown>, key: string): string {
+  const v = blob[key]
+  return typeof v === 'string' ? v : ''
+}
+
+/**
+ * Build the attribution rows for an entry. Prefers the full client-captured
+ * blob (channel, click IDs, first/last touch) and falls back to the
+ * denormalized UTM columns for entries captured before attribution shipped.
+ * Exported for tests.
+ */
+export function buildAttributionRows(entry: FormSubmission): AttrRow[] {
+  const blob =
+    entry.attribution && typeof entry.attribution === 'object' && !Array.isArray(entry.attribution)
+      ? entry.attribution
+      : {}
+
+  const channel = attrString(blob, 'channel')
+  const referrerName = attrString(blob, 'referrerName')
+  const channelLabel = channel
+    ? `${CHANNEL_LABELS[channel] ?? channel}${referrerName ? ` · ${referrerName}` : ''}`
+    : ''
+
+  const rows: AttrRow[] = [
+    { label: 'Channel', value: channelLabel },
+    { label: 'Source', value: attrString(blob, 'source') || entry.utmSource },
+    { label: 'Medium', value: attrString(blob, 'medium') || entry.utmMedium },
+    { label: 'Campaign', value: attrString(blob, 'campaign') || entry.utmCampaign },
+    { label: 'Term', value: attrString(blob, 'term') },
+    { label: 'Content', value: attrString(blob, 'content') },
+    { label: 'Landing page', value: attrString(blob, 'landingPage') },
     { label: 'Page', value: entry.pageUrl },
-    { label: 'Referrer', value: entry.referrer },
-  ].filter((r) => r.value)
+    { label: 'Referrer', value: attrString(blob, 'referrer') || entry.referrer },
+    {
+      label: 'Device',
+      value: DEVICE_LABELS[attrString(blob, 'deviceType')] ?? '',
+    },
+    { label: 'First touch', value: formatDateTimeOrEmpty(attrString(blob, 'firstTouchAt')) },
+  ]
+
+  const clickIds = blob.clickIds
+  if (clickIds && typeof clickIds === 'object' && !Array.isArray(clickIds)) {
+    for (const [key, label] of Object.entries(CLICK_ID_LABELS)) {
+      const value = (clickIds as Record<string, unknown>)[key]
+      if (typeof value === 'string' && value) rows.push({ label, value })
+    }
+  }
+
+  return rows.filter((r) => r.value)
+}
+
+function formatDateTimeOrEmpty(iso: string): string {
+  if (!iso) return ''
+  const formatted = formatDateTime(iso)
+  return formatted === '—' ? '' : formatted
 }
 
 export interface FormEntryDetailPaneProps {
@@ -155,7 +229,7 @@ export function FormEntryDetailPane({
 
   const entry = detail?.entry
   const senderName = entry?.senderName || 'Anonymous'
-  const attrRows = entry ? attributionRows(entry) : []
+  const attrRows = entry ? buildAttributionRows(entry) : []
 
   return (
     <>

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/lib/forms-service.ts

@@ -10,11 +10,12 @@
  * `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,
   FormField,
+  FormAnalyticsConfig,
   FormNotificationSettings,
   FormEmbedSettings,
   FormWebhookConfig,
@@ -35,6 +36,7 @@ export type {
   FormFieldType,
   FormFieldOption,
   FieldValidationRules,
+  FormAnalyticsConfig,
   FormNotificationSettings,
   FormEmbedSettings,
   FormWebhookConfig,
@@ -132,6 +134,9 @@ export interface CreateFormPayload {
   status?: FormStatus
   template?: string
   fields?: FormField[]
+  successMessage?: string
+  redirectUrl?: string
+  analytics?: FormAnalyticsConfig
 }
 
 export async function createForm(
@@ -144,9 +149,19 @@ export async function createForm(
   return { data: res.data, error: res.error }
 }
 
+/** Patch shape accepted by `PATCH /forms/:id` (cms-core `UpdateFormInput`). */
+export interface UpdateFormPayload {
+  name?: string
+  description?: string
+  status?: FormStatus
+  successMessage?: string
+  redirectUrl?: string
+  analytics?: FormAnalyticsConfig
+}
+
 export async function updateForm(
   id: string,
-  payload: Partial<Pick<FormDefinition, 'name' | 'slug' | 'description' | 'status'>>,
+  payload: UpdateFormPayload,
 ): Promise<{ data?: FormDefinition; error?: string }> {
   const res = await cmsApi<FormDefinition>(`/forms/${encodeURIComponent(id)}`, {
     method: 'PATCH',
@@ -422,3 +437,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 {}
+}