@actuate-media/cms-admin 0.79.1 → 0.80.0

package/src/views/FormDeliveries.tsx

@@ -0,0 +1,214 @@
+'use client'
+
+/**
+ * Failed / retrying form delivery attempts (#675).
+ * Operators can see silent notify/webhook failures and retry without
+ * re-submitting the lead.
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { AlertTriangle, RefreshCw, RotateCcw } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchFormDeliveries,
+  retryFormDelivery,
+  type FormDeliveryAttempt,
+} from '../lib/forms-service.js'
+import {
+  FormsEmptyState,
+  FormsErrorState,
+  FormsLoading,
+  FormsPagination,
+} from '../components/forms/primitives.js'
+
+export interface FormDeliveriesProps {
+  onNavigate?: (path: string) => void
+}
+
+const PAGE_SIZE = 25
+
+function channelLabel(channel: string): string {
+  switch (channel) {
+    case 'email_notify':
+      return 'Admin email'
+    case 'email_autoresponder':
+      return 'Autoresponder'
+    case 'form_webhook':
+      return 'Webhook'
+    default:
+      return channel
+  }
+}
+
+function statusClass(status: string): string {
+  switch (status) {
+    case 'failed':
+      return 'bg-destructive/10 text-destructive'
+    case 'retrying':
+      return 'bg-accent text-accent-foreground'
+    case 'success':
+      return 'bg-primary/10 text-primary'
+    default:
+      return 'bg-muted text-muted-foreground'
+  }
+}
+
+export function FormDeliveries({ onNavigate }: FormDeliveriesProps) {
+  const [docs, setDocs] = useState<FormDeliveryAttempt[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchFormDeliveries({
+        status: 'failed,retrying',
+        page,
+        pageSize: PAGE_SIZE,
+      })
+      setDocs(result.docs)
+      setTotal(result.total)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load deliveries')
+    } finally {
+      setLoading(false)
+    }
+  }, [page])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function handleRetry(id: string) {
+    setRetryingId(id)
+    const res = await retryFormDelivery(id)
+    setRetryingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.status === 'success') {
+      toast.success('Delivery succeeded')
+    } else if (res.data?.status === 'retrying') {
+      toast.message('Delivery still failing — scheduled for another retry')
+    } else {
+      toast.error(res.data?.error ?? 'Delivery failed again')
+    }
+    void load()
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-4 p-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-foreground text-2xl font-medium">Deliveries</h1>
+          <p className="text-muted-foreground text-sm">
+            Failed or retrying notification and webhook deliveries. Leads stay saved — retry here
+            without re-submitting the form.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => void load()}
+          className="border-border bg-card text-foreground hover:bg-muted inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-medium"
+          aria-label="Refresh deliveries"
+        >
+          <RefreshCw size={16} />
+          Refresh
+        </button>
+      </div>
+
+      {loading ? (
+        <FormsLoading />
+      ) : error ? (
+        <FormsErrorState message={error} onRetry={() => void load()} />
+      ) : docs.length === 0 ? (
+        <FormsEmptyState
+          icon={<AlertTriangle size={24} />}
+          title="No failed deliveries"
+          description="When a notify email or webhook fails after a submission is saved, it will appear here."
+        />
+      ) : (
+        <>
+          <div className="border-border overflow-hidden rounded-lg border">
+            <table className="w-full text-left text-sm" aria-label="Failed form deliveries">
+              <thead className="bg-muted/50 border-border border-b">
+                <tr>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Form</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Entry</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Channel</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Destination</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Status</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Error</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Attempts</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {docs.map((row) => (
+                  <tr key={row.id} className="border-border border-b last:border-b-0">
+                    <td className="text-foreground px-4 py-3">
+                      <button
+                        type="button"
+                        className="hover:text-primary font-medium"
+                        onClick={() => onNavigate?.(`/forms/${row.formId}/submissions`)}
+                      >
+                        {row.formName ?? row.formId}
+                      </button>
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3">
+                      {row.entryNumber != null
+                        ? `#${String(row.entryNumber).padStart(5, '0')}`
+                        : '—'}
+                    </td>
+                    <td className="text-foreground px-4 py-3">{channelLabel(row.channel)}</td>
+                    <td
+                      className="text-muted-foreground max-w-[220px] truncate px-4 py-3"
+                      title={row.destination}
+                    >
+                      {row.destination}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`inline-flex rounded-md px-2 py-0.5 text-xs font-medium ${statusClass(row.status)}`}
+                      >
+                        {row.status}
+                      </span>
+                    </td>
+                    <td
+                      className="text-muted-foreground max-w-[240px] truncate px-4 py-3"
+                      title={row.error ?? row.skippedReason ?? undefined}
+                    >
+                      {row.error ?? row.skippedReason ?? '—'}
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3">
+                      {row.attempts}/{row.maxAttempts}
+                    </td>
+                    <td className="px-4 py-3">
+                      <button
+                        type="button"
+                        disabled={retryingId === row.id}
+                        onClick={() => void handleRetry(row.id)}
+                        className="border-border bg-card text-foreground hover:bg-muted inline-flex h-9 items-center gap-1.5 rounded-md border px-2.5 text-sm font-medium disabled:opacity-50"
+                        aria-label={`Retry delivery to ${row.destination}`}
+                      >
+                        <RotateCcw size={14} />
+                        Retry
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <FormsPagination page={page} pageSize={PAGE_SIZE} total={total} onPageChange={setPage} />
+        </>
+      )}
+    </div>
+  )
+}