@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/components/TestEmailModal.tsx

@@ -0,0 +1,268 @@
+/**
+ * Test Email Modal Component
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { X, Send, RefreshCw, CheckCircle2, AlertCircle, Mail, Globe, Sparkles, MailCheck } from 'lucide-react';
+
+interface TestEmailModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+type Language = 'en' | 'nl' | 'sv';
+type EmailType = 'test' | 'welcome';
+
+const languages: { code: Language; label: string }[] = [
+    { code: 'en', label: 'EN' },
+    { code: 'nl', label: 'NL' },
+    { code: 'sv', label: 'SV' },
+];
+
+export function TestEmailModal({ isOpen, onClose }: TestEmailModalProps) {
+    const [email, setEmail] = useState('');
+    const [language, setLanguage] = useState<Language>('en');
+    const [emailType, setEmailType] = useState<EmailType>('test');
+    const [welcomeEmailConfigured, setWelcomeEmailConfigured] = useState(false);
+    const [isSending, setIsSending] = useState(false);
+    const [sendSuccess, setSendSuccess] = useState(false);
+    const [sendError, setSendError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            fetchWelcomeEmailStatus();
+        }
+    }, [isOpen]);
+
+    const fetchWelcomeEmailStatus = async () => {
+        try {
+            const response = await fetch('/api/plugin-newsletter/welcome-email/status', {
+                credentials: 'include',
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setWelcomeEmailConfigured(data.configured || false);
+                if (data.primaryLanguage) {
+                    setLanguage(data.primaryLanguage as Language);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to load welcome email status:', error);
+        }
+    };
+
+    const handleSend = async () => {
+        if (!email.trim()) {
+            setSendError('Please enter an email address');
+            return;
+        }
+
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            setSendError('Please enter a valid email address');
+            return;
+        }
+
+        try {
+            setIsSending(true);
+            setSendError(null);
+
+            const response = await fetch('/api/plugin-newsletter/smtp/test', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ email, language, emailType }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to send test email');
+            }
+
+            setSendSuccess(true);
+            setTimeout(() => {
+                setSendSuccess(false);
+                onClose();
+                setEmail('');
+            }, 2000);
+        } catch (error: any) {
+            console.error('Failed to send test email:', error);
+            setSendError(error.message || 'Failed to send test email');
+        } finally {
+            setIsSending(false);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    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">
+                            <Mail className="w-5 h-5 text-primary" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-black text-dashboard-text uppercase tracking-tight">
+                                Test Email
+                            </h2>
+                            <p className="text-xs text-dashboard-text-secondary">
+                                Send a test email to verify SMTP
+                            </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">
+                    <div className="space-y-4">
+                        {/* Email Type Toggle */}
+                        <div>
+                            <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                Email Template
+                            </label>
+                            <div className="flex gap-2">
+                                <button
+                                    onClick={() => setEmailType('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 ${
+                                        emailType === 'test'
+                                            ? 'bg-primary text-white'
+                                            : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                                    }`}
+                                >
+                                    <Mail size={14} />
+                                    Test
+                                </button>
+                                <button
+                                    onClick={() => setEmailType('welcome')}
+                                    disabled={!welcomeEmailConfigured}
+                                    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 ${
+                                        emailType === 'welcome'
+                                            ? 'bg-primary text-white'
+                                            : welcomeEmailConfigured
+                                                ? '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 cursor-not-allowed'
+                                    }`}
+                                >
+                                    <Sparkles size={14} />
+                                    Welcome
+                                    {!welcomeEmailConfigured && (
+                                        <span className="text-[9px] normal-case opacity-70">(Not configured)</span>
+                                    )}
+                                </button>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                Recipient Email
+                            </label>
+                            <input
+                                type="email"
+                                value={email}
+                                onChange={(e) => {
+                                    setEmail(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>
+                        )}
+
+                        <p className="text-xs text-dashboard-text-secondary">
+                            A test email will be sent to this address using your configured SMTP settings.
+                        </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"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSend}
+                        disabled={isSending || sendSuccess}
+                        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'
+                                    : '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" />
+                                Send Test
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}