@jhits/plugin-newsletter 0.0.9 → 0.0.11

package/src/views/SettingsView.tsx

@@ -0,0 +1,216 @@
+/**
+ * Newsletter Settings View
+ * Interface for managing newsletter welcome email settings
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Save, RefreshCw, Mail, Settings2, Globe } from 'lucide-react';
+import { NewsletterSettings } from '../types/newsletter';
+
+export interface SettingsViewProps {
+    siteId: string;
+    locale: string;
+}
+
+const SUPPORTED_LANGUAGES = ['nl', 'en', 'sv'];
+
+export function SettingsView({ siteId, locale }: SettingsViewProps) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [showSuccess, setShowSuccess] = useState(false);
+    const [settings, setSettings] = useState<NewsletterSettings>({
+        id: 'welcome_automation',
+        languages: {
+            nl: { title: '', message: '' },
+            en: { title: '', message: '' },
+            sv: { title: '', message: '' },
+        },
+    });
+
+    // Fetch settings on load
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/settings', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch settings');
+                }
+                const data = await response.json();
+                if (data.languages) {
+                    setSettings({
+                        id: data.id || 'welcome_automation',
+                        languages: {
+                            nl: data.languages.nl || { title: '', message: '' },
+                            en: data.languages.en || { title: '', message: '' },
+                            sv: data.languages.sv || { title: '', message: '' },
+                        },
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to load settings:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings();
+    }, []);
+
+    // Save settings
+    const handleSave = async () => {
+        try {
+            setIsSaving(true);
+            const response = await fetch('/api/plugin-newsletter/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    id: 'welcome_automation',
+                    languages: settings.languages,
+                }),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to save settings');
+            }
+
+            setShowSuccess(true);
+            setTimeout(() => setShowSuccess(false), 3000);
+        } catch (error: any) {
+            console.error('Failed to save settings:', error);
+            alert(error.message || 'Failed to save settings');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    // Update language setting
+    const updateLanguageSetting = (lang: string, field: 'title' | 'message', value: string) => {
+        setSettings(prev => ({
+            ...prev,
+            languages: {
+                ...prev.languages,
+                [lang]: {
+                    ...prev.languages[lang],
+                    [field]: value,
+                },
+            },
+        }));
+    };
+
+    if (isLoading) {
+        return (
+            <div className="h-full w-full bg-white dark:bg-neutral-900 text-dashboard-text flex items-center justify-center">
+                <div className="text-center">
+                    <RefreshCw className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+                    <p className="text-sm text-dashboard-text-secondary">Loading settings...</p>
+                </div>
+            </div>
+        );
+    }
+
+    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-6xl 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">
+                            Newsletter Settings
+                        </h1>
+                        <p className="text-sm text-dashboard-text-secondary">
+                            Configure welcome emails for new subscribers
+                        </p>
+                    </div>
+                    <button
+                        onClick={handleSave}
+                        disabled={isSaving}
+                        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 ${isSaving
+                            ? 'bg-neutral-400 text-white cursor-not-allowed'
+                            : showSuccess
+                                ? 'bg-green-600 text-white'
+                                : 'bg-primary text-white hover:bg-primary/90'
+                            }`}
+                    >
+                        {isSaving ? (
+                            <>
+                                <RefreshCw className="w-4 h-4 animate-spin" />
+                                Saving...
+                            </>
+                        ) : showSuccess ? (
+                            <>
+                                <Settings2 className="w-4 h-4" />
+                                Saved!
+                            </>
+                        ) : (
+                            <>
+                                <Save className="w-4 h-4" />
+                                Save Settings
+                            </>
+                        )}
+                    </button>
+                </div>
+
+                {/* Welcome Email Settings */}
+                <section className="bg-dashboard-sidebar p-8 rounded-3xl border border-dashboard-border mb-8">
+                    <div className="flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6">
+                        <Mail size={20} className="text-primary" />
+                        Welcome Email Automation
+                    </div>
+                    <p className="text-sm text-dashboard-text-secondary mb-8">
+                        Configure the welcome email that will be sent automatically when someone subscribes to your newsletter.
+                    </p>
+
+                    {/* Language Tabs */}
+                    <div className="space-y-8">
+                        {SUPPORTED_LANGUAGES.map(lang => (
+                            <div key={lang} className="bg-dashboard-card p-6 rounded-2xl border border-dashboard-border">
+                                <div className="flex items-center gap-2 mb-6">
+                                    <Globe size={16} className="text-primary" />
+                                    <h3 className="text-lg font-black text-dashboard-text uppercase tracking-tight">
+                                        {lang.toUpperCase()} - {lang === 'nl' ? 'Dutch' : lang === 'en' ? 'English' : 'Swedish'}
+                                    </h3>
+                                </div>
+                                <div className="space-y-4">
+                                    <div>
+                                        <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                            Email Subject
+                                        </label>
+                                        <input
+                                            type="text"
+                                            value={settings.languages[lang]?.title || ''}
+                                            onChange={(e) => updateLanguageSetting(lang, 'title', e.target.value)}
+                                            placeholder={`Welcome email subject (${lang.toUpperCase()})`}
+                                            className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                        />
+                                    </div>
+                                    <div>
+                                        <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                            Email Message
+                                        </label>
+                                        <textarea
+                                            value={settings.languages[lang]?.message || ''}
+                                            onChange={(e) => updateLanguageSetting(lang, 'message', e.target.value)}
+                                            placeholder={`Welcome email message (${lang.toUpperCase()}). Use **bold** for bold text and • for bullet points.`}
+                                            rows={8}
+                                            className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text resize-none font-mono text-sm"
+                                        />
+                                        <p className="text-[10px] text-dashboard-text-secondary mt-2">
+                                            Supports markdown: **bold**, • bullet points, line breaks
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+}
+

package/src/views/SubscribersView.tsx

@@ -0,0 +1,269 @@
+/**
+ * Newsletter Subscribers View
+ * Main interface for managing newsletter subscribers
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Mail, Copy, Check, Trash2, Filter, Users, Globe, Calendar } from 'lucide-react';
+import { Subscriber } from '../types/newsletter';
+
+export interface SubscribersViewProps {
+    siteId: string;
+    locale: string;
+}
+
+export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
+    const [subscribers, setSubscribers] = useState<Subscriber[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [filter, setFilter] = useState<string>('all');
+    const [copyStatus, setCopyStatus] = useState(false);
+    const [deleteStatus, setDeleteStatus] = useState<string | null>(null);
+
+    // Fetch subscribers on load
+    useEffect(() => {
+        const fetchSubscribers = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/subscribers', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch subscribers');
+                }
+                const data = await response.json();
+                setSubscribers(Array.isArray(data) ? data : []);
+            } catch (error) {
+                console.error('Failed to load subscribers:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSubscribers();
+    }, []);
+
+    // Filter subscribers
+    const filteredSubscribers = filter === 'all'
+        ? subscribers
+        : subscribers.filter(s => s.language === filter);
+
+    // Get unique languages
+    const languages = Array.from(new Set(subscribers.map(s => s.language))).sort();
+
+    // Copy emails to clipboard
+    const handleCopyEmails = async () => {
+        const emails = filteredSubscribers.map(s => s.email).join(', ');
+        try {
+            await navigator.clipboard.writeText(emails);
+            setCopyStatus(true);
+            setTimeout(() => setCopyStatus(false), 2000);
+        } catch (error) {
+            console.error('Failed to copy emails:', error);
+        }
+    };
+
+    // Delete subscriber
+    const handleDeleteSubscriber = async (email: string) => {
+        if (!confirm(`Are you sure you want to remove ${email} from the newsletter?`)) {
+            return;
+        }
+
+        try {
+            setDeleteStatus(email);
+            const response = await fetch(`/api/plugin-newsletter/subscribers/${encodeURIComponent(email)}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to delete subscriber');
+            }
+
+            // Remove from local state
+            setSubscribers(prev => prev.filter(sub => sub.email !== email));
+        } catch (error: any) {
+            console.error('Failed to delete subscriber:', error);
+            alert(error.message || 'Failed to delete subscriber');
+        } finally {
+            setDeleteStatus(null);
+        }
+    };
+
+    // Format date
+    const formatDate = (dateString: string | Date | undefined) => {
+        if (!dateString) return 'N/A';
+        const date = typeof dateString === 'string' ? new Date(dateString) : 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">
+                            Newsletter Subscribers
+                        </h1>
+                        <p className="text-sm text-dashboard-text-secondary">
+                            Manage your newsletter subscribers and their preferences
+                        </p>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        {/* Language Filter */}
+                        <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5">
+                            <Filter size={16} className="text-primary mr-2" />
+                            <select
+                                value={filter}
+                                onChange={(e) => setFilter(e.target.value)}
+                                className="bg-transparent text-xs font-bold text-dashboard-text outline-none cursor-pointer uppercase tracking-widest"
+                            >
+                                <option value="all">All Languages</option>
+                                {languages.map(lang => (
+                                    <option key={lang} value={lang}>{lang.toUpperCase()}</option>
+                                ))}
+                            </select>
+                        </div>
+
+                        {/* Copy Emails Button */}
+                        <button
+                            onClick={handleCopyEmails}
+                            disabled={filteredSubscribers.length === 0}
+                            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 disabled:opacity-30 disabled:cursor-not-allowed bg-primary text-white hover:bg-primary/90"
+                        >
+                            {copyStatus ? (
+                                <>
+                                    <Check size={14} />
+                                    Copied!
+                                </>
+                            ) : (
+                                <>
+                                    <Copy size={14} />
+                                    Copy List
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Stats */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <div className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
+                        <div className="flex items-center gap-3 mb-2">
+                            <Users size={20} className="text-primary" />
+                            <span className="text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black">
+                                Total Subscribers
+                            </span>
+                        </div>
+                        <p className="text-3xl font-black text-dashboard-text">
+                            {subscribers.length}
+                        </p>
+                    </div>
+                    <div className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
+                        <div className="flex items-center gap-3 mb-2">
+                            <Globe size={20} className="text-primary" />
+                            <span className="text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black">
+                                Languages
+                            </span>
+                        </div>
+                        <p className="text-3xl font-black text-dashboard-text">
+                            {languages.length}
+                        </p>
+                    </div>
+                    <div className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
+                        <div className="flex items-center gap-3 mb-2">
+                            <Filter size={20} className="text-primary" />
+                            <span className="text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black">
+                                Filtered
+                            </span>
+                        </div>
+                        <p className="text-3xl font-black text-dashboard-text">
+                            {filteredSubscribers.length}
+                        </p>
+                    </div>
+                </div>
+
+                {/* Subscribers 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>
+                    ) : filteredSubscribers.length === 0 ? (
+                        <div className="py-24 text-center">
+                            <Users size={64} className="mx-auto text-dashboard-text-secondary mb-4" />
+                            <p className="text-dashboard-text-secondary font-serif italic text-lg">
+                                {filter === 'all' ? 'No subscribers yet.' : `No subscribers found for ${filter.toUpperCase()}.`}
+                            </p>
+                        </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">Subscriber</th>
+                                        <th className="px-8 py-5">Language</th>
+                                        <th className="px-8 py-5 text-right">Subscribed</th>
+                                        <th className="px-8 py-5 text-right">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-dashboard-border">
+                                    {filteredSubscribers.map((subscriber, idx) => (
+                                        <tr
+                                            key={idx}
+                                            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">
+                                                        {subscriber.email}
+                                                    </span>
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5">
+                                                <span className="text-[10px] font-black px-3 py-1 bg-primary/10 rounded-full uppercase text-primary border border-primary/20">
+                                                    {subscriber.language}
+                                                </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(subscriber.subscribedAt)}
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5 text-right">
+                                                <button
+                                                    onClick={() => handleDeleteSubscriber(subscriber.email)}
+                                                    disabled={deleteStatus === subscriber.email}
+                                                    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 disabled:opacity-50 disabled:cursor-not-allowed"
+                                                    title="Remove subscriber"
+                                                >
+                                                    {deleteStatus === subscriber.email ? (
+                                                        <div className="w-5 h-5 border-2 border-red-500 border-t-transparent rounded-full animate-spin" />
+                                                    ) : (
+                                                        <Trash2 size={18} />
+                                                    )}
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+