@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/components/SendNewsletterModal.tsx

@@ -0,0 +1,322 @@
+/**
+ * Send Newsletter Modal Component
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { X, Send, RefreshCw, CheckCircle2, AlertCircle, Mail, Globe, Users, Radio } from 'lucide-react';
+
+interface SendNewsletterModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    newsletter: {
+        id: string;
+        title: string;
+        subject: string;
+        status: string;
+        hasContent: boolean;
+    };
+    subscriberCount: number;
+}
+
+type Language = 'en' | 'nl' | 'sv';
+type SendMode = 'subscribers' | 'test';
+
+const languages: { code: Language; label: string }[] = [
+    { code: 'en', label: 'EN' },
+    { code: 'nl', label: 'NL' },
+    { code: 'sv', label: 'SV' },
+];
+
+export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCount }: SendNewsletterModalProps) {
+    const [language, setLanguage] = useState<Language>('en');
+    const [sendMode, setSendMode] = useState<SendMode>('subscribers');
+    const [testEmail, setTestEmail] = useState('');
+    const [isSending, setIsSending] = useState(false);
+    const [sendSuccess, setSendSuccess] = useState(false);
+    const [sendError, setSendError] = useState<string | null>(null);
+    const [resultDetails, setResultDetails] = useState<{ successCount: number; failedCount: number } | null>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            setSendMode('subscribers');
+            setSendError(null);
+            setResultDetails(null);
+            setSendSuccess(false);
+        }
+    }, [isOpen]);
+
+    const handleSend = async () => {
+        if (sendMode === 'test' && !testEmail.trim()) {
+            setSendError('Please enter an email address');
+            return;
+        }
+
+        if (sendMode === 'test') {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(testEmail)) {
+                setSendError('Please enter a valid email address');
+                return;
+            }
+        }
+
+        try {
+            setIsSending(true);
+            setSendError(null);
+
+            const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletter.id}/send`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ 
+                    language, 
+                    testEmail: sendMode === 'test' ? testEmail : undefined 
+                }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to send newsletter');
+            }
+
+            setResultDetails(data.details);
+            setSendSuccess(true);
+            
+            if (sendMode === 'subscribers') {
+                setTimeout(() => {
+                    onClose();
+                    window.location.reload();
+                }, 2000);
+            } else {
+                setTimeout(() => {
+                    setSendSuccess(false);
+                    setTestEmail('');
+                }, 3000);
+            }
+        } catch (error: any) {
+            console.error('Failed to send newsletter:', error);
+            setSendError(error.message || 'Failed to send newsletter');
+        } finally {
+            setIsSending(false);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    const canSend = newsletter.hasContent && (sendMode === 'test' || subscriberCount > 0);
+    const isAlreadySent = newsletter.status === 'sent';
+    const noSubscribersError = sendMode === 'subscribers' && subscriberCount === 0;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <div 
+                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={() => !isSending && onClose()}
+            />
+            
+            {/* Modal */}
+            <div className="relative w-full max-w-md mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden">
+                {/* Header */}
+                <div className="flex items-center justify-between px-8 py-6 border-b border-dashboard-border">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center">
+                            <Send className="w-5 h-5 text-primary" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-black text-dashboard-text uppercase tracking-tight">
+                                Send Newsletter
+                            </h2>
+                            <p className="text-xs text-dashboard-text-secondary truncate max-w-[200px]">
+                                {newsletter.title}
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => !isSending && onClose()}
+                        disabled={isSending}
+                        className="p-2 rounded-full hover:bg-dashboard-border transition-colors"
+                    >
+                        <X size={20} className="text-dashboard-text-secondary" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-8">
+                    {isAlreadySent && (
+                        <div className="mb-4 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+                            <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400">
+                                <AlertCircle size={16} />
+                                <span className="text-xs font-bold uppercase">This newsletter has already been sent</span>
+                            </div>
+                        </div>
+                    )}
+
+                    {!newsletter.hasContent && (
+                        <div className="mb-4 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+                            <div className="flex items-center gap-2 text-red-700 dark:text-red-400">
+                                <AlertCircle size={16} />
+                                <span className="text-xs font-bold uppercase">This newsletter has no content</span>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="space-y-4">
+                        {/* Send Mode Toggle */}
+                        <div>
+                            <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                Send To
+                            </label>
+                            <div className="flex gap-2">
+                                <button
+                                    onClick={() => setSendMode('subscribers')}
+                                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
+                                        sendMode === 'subscribers'
+                                            ? 'bg-primary text-white'
+                                            : subscriberCount > 0
+                                                ? 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text-secondary opacity-50'
+                                    }`}
+                                >
+                                    <Users size={14} />
+                                    Subscribers
+                                    {subscriberCount > 0 && (
+                                        <span className="text-[10px] opacity-70">({subscriberCount})</span>
+                                    )}
+                                </button>
+                                <button
+                                    onClick={() => setSendMode('test')}
+                                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
+                                        sendMode === 'test'
+                                            ? 'bg-primary text-white'
+                                            : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                                    }`}
+                                >
+                                    <Mail size={14} />
+                                    Test
+                                </button>
+                            </div>
+                        </div>
+
+                        {sendMode === 'test' && (
+                            <div>
+                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                    Test Email Address
+                                </label>
+                                <input
+                                    type="email"
+                                    value={testEmail}
+                                    onChange={(e) => {
+                                        setTestEmail(e.target.value);
+                                        setSendError(null);
+                                    }}
+                                    onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+                                    placeholder="your@email.com"
+                                    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">
+                                <Globe size={12} className="inline mr-1" />
+                                Language
+                            </label>
+                            <div className="flex gap-2">
+                                {languages.map((lang) => (
+                                    <button
+                                        key={lang.code}
+                                        onClick={() => setLanguage(lang.code)}
+                                        className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
+                                            language === lang.code
+                                                ? 'bg-primary text-white'
+                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                                        }`}
+                                    >
+                                        {lang.label}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        {sendError && (
+                            <div className="flex items-center gap-2 text-red-500 text-sm">
+                                <AlertCircle size={16} />
+                                {sendError}
+                            </div>
+                        )}
+
+                        {noSubscribersError && (
+                            <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 text-sm">
+                                <AlertCircle size={16} />
+                                No subscribers found. Add subscribers or use Test mode.
+                            </div>
+                        )}
+
+                        {sendSuccess && resultDetails && (
+                            <div className="flex items-center gap-2 text-green-600 dark:text-green-400 text-sm">
+                                <CheckCircle2 size={16} />
+                                {sendMode === 'test' 
+                                    ? `Test newsletter sent successfully!`
+                                    : `Sent to ${resultDetails.successCount} subscriber${resultDetails.successCount !== 1 ? 's' : ''}${resultDetails.failedCount > 0 ? ` (${resultDetails.failedCount} failed)` : ''}`
+                                }
+                            </div>
+                        )}
+
+                        {!sendSuccess && (
+                            <p className="text-xs text-dashboard-text-secondary">
+                                {sendMode === 'subscribers'
+                                    ? `This will send the newsletter to all ${subscriberCount} active subscriber${subscriberCount !== 1 ? 's' : ''}.`
+                                    : 'Send a test newsletter to verify the email looks correct.'
+                                }
+                            </p>
+                        )}
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50">
+                    <button
+                        onClick={onClose}
+                        disabled={isSending}
+                        className="px-6 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"
+                    >
+                        {sendSuccess ? 'Close' : 'Cancel'}
+                    </button>
+                    <button
+                        onClick={handleSend}
+                        disabled={isSending || sendSuccess || !canSend}
+                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${
+                            isSending 
+                                ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                : sendSuccess
+                                    ? 'bg-green-600 text-white'
+                                    : !canSend
+                                        ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                        : 'bg-primary text-white hover:bg-primary/90'
+                        }`}
+                    >
+                        {isSending ? (
+                            <>
+                                <RefreshCw className="w-4 h-4 animate-spin" />
+                                Sending...
+                            </>
+                        ) : sendSuccess ? (
+                            <>
+                                <CheckCircle2 className="w-4 h-4" />
+                                Sent!
+                            </>
+                        ) : (
+                            <>
+                                <Send className="w-4 h-4" />
+                                {sendMode === 'subscribers' ? 'Send to Subscribers' : 'Send Test'}
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}