@prenta/admin 1.12.0 → 1.14.0

package/src/views/settings/SeoDigestCard.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { useCallback, useEffect, useId, useState } from 'react'
+import { Loader2, Send } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchDigestSettings,
+  sendTestDigest,
+  updateDigestSettings,
+  type SeoDigestSettings,
+} from '../../lib/seo-service.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+
+/**
+ * Settings → SEO "Weekly SEO digest" card: opt-in toggle, explicit recipient
+ * list, last-sent status, and a rate-limited test send. The digest itself is
+ * sent by the Monday /cron/seo-scan tick after the persisted audit.
+ */
+export function SeoDigestCard({ canEdit }: { canEdit: boolean }) {
+  const recipientsId = useId()
+  const [settings, setSettings] = useState<SeoDigestSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [recipientsText, setRecipientsText] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [sendingTest, setSendingTest] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    const s = await fetchDigestSettings()
+    if (s) {
+      setSettings(s)
+      setRecipientsText(s.recipients.join(', '))
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function handleToggle(enabled: boolean) {
+    const res = await updateDigestSettings({ enabled })
+    if (!res.ok) {
+      toast.error(res.error ?? 'Failed to update digest settings')
+      return
+    }
+    toast.success(enabled ? 'Weekly digest enabled' : 'Weekly digest disabled')
+    await load()
+  }
+
+  async function handleSaveRecipients() {
+    setSaving(true)
+    const recipients = recipientsText
+      .split(',')
+      .map((r) => r.trim())
+      .filter((r) => r.length > 0)
+    const res = await updateDigestSettings({ recipients })
+    setSaving(false)
+    if (!res.ok) {
+      toast.error(res.error ?? 'Failed to save recipients')
+      return
+    }
+    toast.success('Digest recipients saved')
+    await load()
+  }
+
+  async function handleTestSend() {
+    setSendingTest(true)
+    const res = await sendTestDigest()
+    setSendingTest(false)
+    if (!res.ok) {
+      toast.error(res.error ?? 'Test digest failed')
+      return
+    }
+    toast.success(`Test digest sent to ${res.to ?? 'your email'}`)
+  }
+
+  if (loading) {
+    return (
+      <SettingsCard title="Weekly SEO digest">
+        <div className="text-muted-foreground flex items-center gap-2 text-sm">
+          <Loader2 size={16} className="motion-safe:animate-spin" aria-hidden="true" />
+          Loading…
+        </div>
+      </SettingsCard>
+    )
+  }
+  if (!settings) {
+    return (
+      <SettingsCard title="Weekly SEO digest">
+        <p className="text-destructive text-sm">Failed to load digest settings.</p>
+      </SettingsCard>
+    )
+  }
+
+  return (
+    <SettingsCard
+      title="Weekly SEO digest"
+      description="A Monday email with the site score, search performance, quick wins, new issues, and pending proposals. Sent by the weekly audit cron."
+    >
+      <div className="flex flex-col gap-4">
+        <SettingsToggleRow
+          label="Send weekly digest"
+          description="Requires at least one recipient below."
+          checked={settings.enabled}
+          onChange={handleToggle}
+          disabled={!canEdit}
+        />
+        <div>
+          <label
+            htmlFor={recipientsId}
+            className="text-foreground mb-1 flex items-center gap-2 text-sm font-medium"
+          >
+            Recipients
+          </label>
+          <input
+            id={recipientsId}
+            type="text"
+            className={INPUT_CLASS}
+            placeholder="owner@example.com, seo@example.com"
+            value={recipientsText}
+            onChange={(e) => setRecipientsText(e.target.value)}
+            disabled={!canEdit}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">Comma-separated, up to 10 addresses.</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={() => void handleSaveRecipients()}
+            disabled={!canEdit || saving}
+          >
+            {saving ? 'Saving…' : 'Save recipients'}
+          </button>
+          <button
+            type="button"
+            className="border-border text-foreground inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={() => void handleTestSend()}
+            disabled={!canEdit || sendingTest}
+          >
+            {sendingTest ? (
+              <Loader2 size={16} className="motion-safe:animate-spin" aria-hidden="true" />
+            ) : (
+              <Send size={16} aria-hidden="true" />
+            )}
+            Send test digest
+          </button>
+        </div>
+        <p className="text-muted-foreground text-sm">
+          {settings.lastSentAt
+            ? `Last sent ${new Date(settings.lastSentAt).toLocaleString()}`
+            : 'Never sent'}
+          {settings.lastError ? (
+            <span className="text-destructive"> · {settings.lastError}</span>
+          ) : null}
+        </p>
+      </div>
+    </SettingsCard>
+  )
+}

package/src/views/settings/SeoSettingsTab.tsx

@@ -17,6 +17,7 @@ import { siteUrlMatchesAdminOrigin } from '../../lib/preview-link.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
 import { SearchDataCard } from './SearchDataCard.js'
+import { SeoDigestCard } from './SeoDigestCard.js'
 import {
   ConfirmDangerousSettingDialog,
   SettingsCard,
@@ -151,6 +152,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />
       <SearchDataCard canEdit={canEdit} />
+      <SeoDigestCard canEdit={canEdit} />
       <SitemapDefaultsCard seo={seo} canEdit={canEdit} onNavigate={onNavigate} />
 
       <details className="border-border bg-card group rounded-lg border">