@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/NewsletterManager.tsx

@@ -0,0 +1,483 @@
+/**
+ * Newsletter Manager View
+ * List and manage newsletters
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users } from 'lucide-react';
+import { NewsletterListItem, NewsletterStatus } from '../types/newsletter';
+import { SmtpSettingsModal } from './components/SmtpSettingsModal';
+import { TestEmailModal } from './components/TestEmailModal';
+import { SendNewsletterModal } from './components/SendNewsletterModal';
+
+export interface NewsletterManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+
+function getStatusBadgeColor(status: NewsletterStatus) {
+    switch (status) {
+        case 'sent':
+            return 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20';
+        case 'draft':
+            return 'bg-neutral-500/10 text-dashboard-text-secondary border-neutral-500/20';
+        case 'archived':
+            return 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20';
+        default:
+            return 'bg-neutral-500/10 text-dashboard-text-secondary border-neutral-500/20';
+    }
+}
+
+export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewProps) {
+    const [newsletters, setNewsletters] = useState<NewsletterListItem[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [statusFilter, setStatusFilter] = useState<NewsletterStatus | 'all'>('all');
+    const [showSmtpModal, setShowSmtpModal] = useState(false);
+    const [showTestEmailModal, setShowTestEmailModal] = useState(false);
+    const [showSendModal, setShowSendModal] = useState(false);
+    const [selectedNewsletter, setSelectedNewsletter] = useState<(NewsletterListItem & { hasContent: boolean }) | null>(null);
+    const [smtpStatus, setSmtpStatus] = useState<'configured' | 'not_configured' | 'loading'>('loading');
+    
+    // Welcome Email Status
+    const [welcomeEmailStatus, setWelcomeEmailStatus] = useState<'configured' | 'not_configured'>('not_configured');
+    const [welcomeEmailLastUpdated, setWelcomeEmailLastUpdated] = useState<string | null>(null);
+    const [subscriberCount, setSubscriberCount] = useState(0);
+
+    // Fetch newsletters
+    useEffect(() => {
+        const fetchNewsletters = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/newsletters', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch newsletters');
+                }
+                const data = await response.json();
+                setNewsletters(Array.isArray(data) ? data : []);
+            } catch (error) {
+                console.error('Failed to load newsletters:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchNewsletters();
+    }, []);
+
+    // Fetch welcome email status
+    useEffect(() => {
+        const fetchWelcomeEmailStatus = async () => {
+            try {
+                const response = await fetch('/api/plugin-newsletter/welcome-email/status', {
+                    credentials: 'include',
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    setWelcomeEmailStatus(data.configured ? 'configured' : 'not_configured');
+                    setWelcomeEmailLastUpdated(data.lastUpdated || null);
+                }
+            } catch (error) {
+                console.error('Failed to load welcome email status:', error);
+            }
+        };
+        fetchWelcomeEmailStatus();
+    }, []);
+
+    // Fetch SMTP status
+    useEffect(() => {
+        const fetchSmtpStatus = async () => {
+            try {
+                const response = await fetch('/api/plugin-newsletter/smtp', {
+                    credentials: 'include',
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    setSmtpStatus(data.host ? 'configured' : 'not_configured');
+                } else {
+                    setSmtpStatus('not_configured');
+                }
+            } catch (error) {
+                console.error('Failed to load SMTP status:', error);
+                setSmtpStatus('not_configured');
+            }
+        };
+        fetchSmtpStatus();
+    }, []);
+
+    // Fetch subscriber count
+    useEffect(() => {
+        const fetchSubscriberCount = async () => {
+            try {
+                const response = await fetch('/api/plugin-newsletter/subscribers', {
+                    credentials: 'include',
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    setSubscriberCount(Array.isArray(data) ? data.length : 0);
+                }
+            } catch (error) {
+                console.error('Failed to load subscriber count:', error);
+            }
+        };
+        fetchSubscriberCount();
+    }, []);
+
+    // Filter newsletters
+    const filteredNewsletters = statusFilter === 'all'
+        ? newsletters
+        : newsletters.filter(n => n.status === statusFilter);
+
+    // Handle create new newsletter
+    const handleCreate = () => {
+        window.location.href = '/dashboard/newsletter/new';
+    };
+
+    // Handle edit newsletter
+    const handleEdit = (id: string | undefined) => {
+        if (!id) {
+            alert('Cannot edit: newsletter id is missing');
+            return;
+        }
+        window.location.href = `/dashboard/newsletter/editor/${id}`;
+    };
+
+    // Handle send newsletter
+    const handleSend = async (newsletter: NewsletterListItem) => {
+        if (smtpStatus === 'not_configured') {
+            alert('Please configure SMTP settings first');
+            setShowSmtpModal(true);
+            return;
+        }
+        if (newsletter.status === 'sent') {
+            alert('This newsletter has already been sent');
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletter.id}/send`, {
+                credentials: 'include',
+            });
+            const data = await response.json();
+            
+            if (!response.ok) {
+                alert(data.error || 'Failed to load newsletter details');
+                return;
+            }
+
+            setSelectedNewsletter({
+                ...newsletter,
+                hasContent: data.hasContent,
+            } as NewsletterListItem & { hasContent: boolean });
+            setShowSendModal(true);
+        } catch (error) {
+            console.error('Failed to load newsletter:', error);
+            alert('Failed to load newsletter details');
+        }
+    };
+
+    // Handle delete newsletter
+    const handleDelete = async (id: string | undefined, title: string) => {
+        if (!id) {
+            alert('Cannot delete: newsletter id is missing');
+            return;
+        }
+        
+        if (!confirm(`Are you sure you want to delete "${title}"?`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/plugin-newsletter/newsletters/${id}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to delete newsletter');
+            }
+
+            // Remove from local state
+            setNewsletters(prev => prev.filter(n => n.id !== id));
+        } catch (error: any) {
+            console.error('Failed to delete newsletter:', error);
+            alert(error.message || 'Failed to delete newsletter');
+        }
+    };
+
+    // Format date
+    const formatDate = (dateString: string | undefined) => {
+        if (!dateString) return 'N/A';
+        const date = new Date(dateString);
+        return date.toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+        });
+    };
+
+    return (
+        <>
+            <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+                    <div>
+                        <h1 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2">
+                            Newsletters
+                        </h1>
+                        <p className="text-sm text-dashboard-text-secondary">
+                            Create and manage your email newsletters
+                        </p>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        {/* Subscribers Button */}
+                        <button
+                            onClick={() => window.location.href = '/dashboard/newsletter/subscribers'}
+                            className="inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border"
+                        >
+                            <Users size={14} />
+                            Subscribers
+                        </button>
+
+                        {/* Test Email Button */}
+                        <button
+                            onClick={() => {
+                                if (smtpStatus === 'not_configured') {
+                                    alert('Please configure SMTP settings first');
+                                    setShowSmtpModal(true);
+                                } else {
+                                    setShowTestEmailModal(true);
+                                }
+                            }}
+                            className="inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border"
+                        >
+                            <Send size={14} />
+                            Test Email
+                        </button>
+
+                        {/* SMTP Settings Button */}
+                        <button
+                            onClick={() => setShowSmtpModal(true)}
+                            className={`inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors ${
+                                smtpStatus === 'not_configured'
+                                    ? 'bg-amber-50 border-amber-300 text-amber-700 dark:bg-amber-900/20 dark:border-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/40'
+                                    : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                            }`}
+                        >
+                            <Settings2 size={14} />
+                            SMTP
+                            {smtpStatus === 'not_configured' && (
+                                <span className="w-2 h-2 rounded-full bg-amber-500" />
+                            )}
+                        </button>
+
+                        {/* Status Filter */}
+                        <select
+                            value={statusFilter}
+                            onChange={(e) => setStatusFilter(e.target.value as NewsletterStatus | 'all')}
+                            className="bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5 text-xs font-bold text-dashboard-text outline-none cursor-pointer uppercase tracking-widest"
+                        >
+                            <option value="all">All Status</option>
+                            <option value="draft">Draft</option>
+                            <option value="scheduled">Scheduled</option>
+                            <option value="sent">Sent</option>
+                            <option value="archived">Archived</option>
+                        </select>
+
+                        {/* Create Button */}
+                        <button
+                            onClick={handleCreate}
+                            className="inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90"
+                        >
+                            <Plus size={14} />
+                            New Newsletter
+                        </button>
+                    </div>
+                </div>
+
+                {/* Welcome Email Card */}
+                <div className="mb-6 p-6 rounded-2xl bg-gradient-to-br from-primary/5 via-primary/10 to-transparent border border-dashboard-border">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-5">
+                            <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center">
+                                <Sparkles className="w-6 h-6 text-primary" />
+                            </div>
+                            <div>
+                                <h3 className="text-sm font-black text-dashboard-text uppercase tracking-tight mb-1">
+                                    Welcome Email
+                                </h3>
+                                <p className="text-xs text-dashboard-text-secondary mb-2">
+                                    The email sent automatically when someone subscribes
+                                </p>
+                                <div className="flex items-center gap-3 flex-wrap">
+                                    {welcomeEmailStatus === 'configured' ? (
+                                        <span className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-green-600 dark:text-green-400">
+                                            <CheckCircle2 size={12} />
+                                            Configured
+                                        </span>
+                                    ) : (
+                                        <span className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400">
+                                            <Clock size={12} />
+                                            Not configured
+                                        </span>
+                                    )}
+                                    <button
+                                        onClick={() => window.location.href = '/dashboard/newsletter/subscribers'}
+                                        className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline"
+                                    >
+                                        <Users size={12} />
+                                        {subscriberCount} subscriber{subscriberCount !== 1 ? 's' : ''}
+                                    </button>
+                                    {welcomeEmailLastUpdated && (
+                                        <span className="text-[10px] text-dashboard-text-secondary">
+                                            Last updated: {new Date(welcomeEmailLastUpdated).toLocaleDateString()}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                        <button
+                            onClick={() => window.location.href = '/dashboard/newsletter/welcome'}
+                            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-primary text-white hover:bg-primary/90"
+                        >
+                            <Edit2 size={14} />
+                            {welcomeEmailStatus === 'configured' ? 'Edit' : 'Configure'}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Newsletters Table */}
+                <div className="bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden">
+                    {isLoading ? (
+                        <div className="flex items-center justify-center py-20">
+                            <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+                        </div>
+                    ) : filteredNewsletters.length === 0 ? (
+                        <div className="py-24 text-center">
+                            <Mail size={64} className="mx-auto text-dashboard-text-secondary mb-4" />
+                            <p className="text-dashboard-text-secondary font-serif italic text-lg mb-6">
+                                {statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".`}
+                            </p>
+                            <button
+                                onClick={handleCreate}
+                                className="inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90"
+                            >
+                                <Plus size={14} />
+                                Create Your First Newsletter
+                            </button>
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-left border-collapse">
+                                <thead>
+                                    <tr className="bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border">
+                                        <th className="px-8 py-5">Title</th>
+                                        <th className="px-8 py-5">Subject</th>
+                                        <th className="px-8 py-5">Status</th>
+                                        <th className="px-8 py-5 text-right">Updated</th>
+                                        <th className="px-8 py-5 text-right">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-dashboard-border">
+                                    {filteredNewsletters.map((newsletter) => (
+                                        <tr
+                                            key={newsletter.id}
+                                            className="hover:bg-dashboard-bg transition-colors group"
+                                        >
+                                            <td className="px-8 py-5">
+                                                <div className="flex items-center gap-4">
+                                                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
+                                                        <Mail size={18} />
+                                                    </div>
+                                                    <span className="text-sm font-medium text-dashboard-text tracking-tight">
+                                                        {newsletter.title}
+                                                    </span>
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5">
+                                                <span className="text-sm text-dashboard-text-secondary">
+                                                    {newsletter.subject || 'No subject'}
+                                                </span>
+                                            </td>
+                                            <td className="px-8 py-5">
+                                                <span className={`text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`}>
+                                                    {newsletter.status}
+                                                </span>
+                                            </td>
+                                            <td className="px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium">
+                                                <div className="flex items-center justify-end gap-2">
+                                                    <Calendar size={14} />
+                                                    {formatDate(newsletter.updatedAt)}
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5 text-right">
+                                                <div className="flex items-center justify-end gap-2">
+                                                    {newsletter.status !== 'sent' && (
+                                                        <button
+                                                            onClick={() => handleSend(newsletter)}
+                                                            className="p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors"
+                                                            title="Send newsletter"
+                                                        >
+                                                            <Send size={18} />
+                                                        </button>
+                                                    )}
+                                                    <button
+                                                        onClick={() => handleEdit(newsletter.id)}
+                                                        className="p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors"
+                                                        title="Edit newsletter"
+                                                    >
+                                                        <Edit2 size={18} />
+                                                    </button>
+                                                    <button
+                                                        onClick={() => handleDelete(newsletter.id, newsletter.title)}
+                                                        className="p-2.5 rounded-full text-dashboard-text-secondary hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                                                        title="Delete newsletter"
+                                                    >
+                                                        <Trash2 size={18} />
+                                                    </button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+
+        <SmtpSettingsModal 
+            isOpen={showSmtpModal} 
+            onClose={() => setShowSmtpModal(false)} 
+        />
+        <TestEmailModal 
+            isOpen={showTestEmailModal} 
+            onClose={() => setShowTestEmailModal(false)} 
+        />
+        {selectedNewsletter && (
+            <SendNewsletterModal
+                isOpen={showSendModal}
+                onClose={() => {
+                    setShowSendModal(false);
+                    setSelectedNewsletter(null);
+                }}
+                newsletter={{
+                    id: selectedNewsletter.id,
+                    title: selectedNewsletter.title,
+                    subject: selectedNewsletter.subject,
+                    status: selectedNewsletter.status,
+                    hasContent: selectedNewsletter.hasContent,
+                }}
+                subscriberCount={subscriberCount}
+            />
+        )}
+        </>
+    );
+}