@jhits/plugin-newsletter 0.0.7 → 0.0.8

package/src/views/SubscribersView.tsx

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