@jhits/plugin-newsletter 0.0.6 → 0.0.8

package/src/views/NewsletterManager.tsx

@@ -1,240 +0,0 @@
-/**
- * Newsletter Manager View
- * List and manage newsletters
- */
-
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Plus, Mail, Calendar, Trash2, Edit2 } from 'lucide-react';
-import { NewsletterListItem, NewsletterStatus } from '../types/newsletter';
-
-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');
-
-    // 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();
-    }, []);
-
-    // 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 = (slug: string) => {
-        window.location.href = `/dashboard/newsletter/editor/${slug}`;
-    };
-
-    // Handle delete newsletter
-    const handleDelete = async (slug: string, title: string) => {
-        if (!confirm(`Are you sure you want to delete "${title}"?`)) {
-            return;
-        }
-
-        try {
-            const response = await fetch(`/api/plugin-newsletter/newsletters/${slug}`, {
-                method: 'DELETE',
-                credentials: 'include',
-            });
-
-            if (!response.ok) {
-                throw new Error('Failed to delete newsletter');
-            }
-
-            // Remove from local state
-            setNewsletters(prev => prev.filter(n => n.slug !== slug));
-        } 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">
-                        {/* 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>
-
-                {/* 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">
-                                                    <button
-                                                        onClick={() => handleEdit(newsletter.slug)}
-                                                        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.slug, 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>
-    );
-}

package/src/views/SettingsView.tsx

@@ -1,216 +0,0 @@
-/**
- * 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>
-    );
-}
-