@jhits/plugin-newsletter 0.0.8 → 0.0.9

package/dist/views/components/SendNewsletterModal.js

@@ -0,0 +1,107 @@
+/**
+ * Send Newsletter Modal Component
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { X, Send, RefreshCw, CheckCircle2, AlertCircle, Mail, Globe, Users } from 'lucide-react';
+const languages = [
+    { code: 'en', label: 'EN' },
+    { code: 'nl', label: 'NL' },
+    { code: 'sv', label: 'SV' },
+];
+export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCount }) {
+    const [language, setLanguage] = useState('en');
+    const [sendMode, setSendMode] = useState('subscribers');
+    const [testEmail, setTestEmail] = useState('');
+    const [isSending, setIsSending] = useState(false);
+    const [sendSuccess, setSendSuccess] = useState(false);
+    const [sendError, setSendError] = useState(null);
+    const [resultDetails, setResultDetails] = useState(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) {
+            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 (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: () => !isSending && onClose() }), _jsxs("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", children: [_jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Send, { className: "w-5 h-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: "Send Newsletter" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary truncate max-w-[200px]", children: newsletter.title })] })] }), _jsx("button", { onClick: () => !isSending && onClose(), disabled: isSending, className: "p-2 rounded-full hover:bg-dashboard-border transition-colors", children: _jsx(X, { size: 20, className: "text-dashboard-text-secondary" }) })] }), _jsxs("div", { className: "p-8", children: [isAlreadySent && (_jsx("div", { className: "mb-4 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800", children: _jsxs("div", { className: "flex items-center gap-2 text-amber-700 dark:text-amber-400", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter has already been sent" })] }) })), !newsletter.hasContent && (_jsx("div", { className: "mb-4 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800", children: _jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter has no content" })] }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Send To" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("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'}`, children: [_jsx(Users, { size: 14 }), "Subscribers", subscriberCount > 0 && (_jsxs("span", { className: "text-[10px] opacity-70", children: ["(", subscriberCount, ")"] }))] }), _jsxs("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'}`, children: [_jsx(Mail, { size: 14 }), "Test"] })] })] }), sendMode === 'test' && (_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Test Email Address" }), _jsx("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" })] })), _jsxs("div", { children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: [_jsx(Globe, { size: 12, className: "inline mr-1" }), "Language"] }), _jsx("div", { className: "flex gap-2", children: languages.map((lang) => (_jsx("button", { 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'}`, children: lang.label }, lang.code))) })] }), sendError && (_jsxs("div", { className: "flex items-center gap-2 text-red-500 text-sm", children: [_jsx(AlertCircle, { size: 16 }), sendError] })), noSubscribersError && (_jsxs("div", { className: "flex items-center gap-2 text-amber-600 dark:text-amber-400 text-sm", children: [_jsx(AlertCircle, { size: 16 }), "No subscribers found. Add subscribers or use Test mode."] })), sendSuccess && resultDetails && (_jsxs("div", { className: "flex items-center gap-2 text-green-600 dark:text-green-400 text-sm", children: [_jsx(CheckCircle2, { size: 16 }), sendMode === 'test'
+                                                ? `Test newsletter sent successfully!`
+                                                : `Sent to ${resultDetails.successCount} subscriber${resultDetails.successCount !== 1 ? 's' : ''}${resultDetails.failedCount > 0 ? ` (${resultDetails.failedCount} failed)` : ''}`] })), !sendSuccess && (_jsx("p", { className: "text-xs text-dashboard-text-secondary", children: 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.' }))] })] }), _jsxs("div", { className: "flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50", children: [_jsx("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", children: sendSuccess ? 'Close' : 'Cancel' }), _jsx("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'}`, children: isSending ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Sending..."] })) : sendSuccess ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "w-4 h-4" }), "Sent!"] })) : (_jsxs(_Fragment, { children: [_jsx(Send, { className: "w-4 h-4" }), sendMode === 'subscribers' ? 'Send to Subscribers' : 'Send Test'] })) })] })] })] }));
+}

package/dist/views/components/SmtpSettingsModal.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SMTP Settings Modal Component
+ */
+interface SmtpSettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function SmtpSettingsModal({ isOpen, onClose }: SmtpSettingsModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SmtpSettingsModal.d.ts.map

package/dist/views/components/SmtpSettingsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmtpSettingsModal.d.ts","sourceRoot":"","sources":["../../../src/views/components/SmtpSettingsModal.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAkBH,UAAU,sBAAsB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,sBAAsB,kDAuZ5E"}

package/dist/views/components/SmtpSettingsModal.js

@@ -0,0 +1,145 @@
+/**
+ * SMTP Settings Modal Component
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Settings2, X, Save, Eye, EyeOff, RefreshCw, CheckCircle2, Pencil, Unlink, Image as ImageIcon, Upload, XCircle } from 'lucide-react';
+export function SmtpSettingsModal({ isOpen, onClose }) {
+    const [smtpSettings, setSmtpSettings] = useState({
+        host: '',
+        port: 465,
+        user: '',
+        password: '',
+        from: '',
+        fromName: '',
+        primaryLanguage: 'en',
+        logoUrl: '',
+    });
+    const [smtpLoading, setSmtpLoading] = useState(true);
+    const [smtpSaving, setSmtpSaving] = useState(false);
+    const [smtpShowPassword, setSmtpShowPassword] = useState(false);
+    const [smtpSuccess, setSmtpSuccess] = useState(false);
+    const [fromEmailEditable, setFromEmailEditable] = useState(false);
+    const [isLogoUploading, setIsLogoUploading] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            fetchSmtpSettings();
+        }
+        else {
+            setFromEmailEditable(false);
+        }
+    }, [isOpen]);
+    const fetchSmtpSettings = async () => {
+        try {
+            setSmtpLoading(true);
+            const response = await fetch('/api/plugin-newsletter/smtp', {
+                credentials: 'include',
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setSmtpSettings({
+                    host: data.host || '',
+                    port: data.port || 465,
+                    user: data.user || '',
+                    password: data.password || '',
+                    from: data.from || '',
+                    fromName: data.fromName || '',
+                    primaryLanguage: data.primaryLanguage || 'en',
+                    logoUrl: data.logoUrl || '',
+                });
+                setFromEmailEditable(!!data.from && data.from !== data.user);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load SMTP settings:', error);
+        }
+        finally {
+            setSmtpLoading(false);
+        }
+    };
+    const handleSave = async () => {
+        try {
+            setSmtpSaving(true);
+            const settingsToSave = {
+                ...smtpSettings,
+                from: smtpSettings.from || smtpSettings.user,
+            };
+            const response = await fetch('/api/plugin-newsletter/smtp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify(settingsToSave),
+            });
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to save SMTP settings');
+            }
+            setSmtpSuccess(true);
+            setTimeout(() => {
+                setSmtpSuccess(false);
+                onClose();
+            }, 1500);
+        }
+        catch (error) {
+            console.error('Failed to save SMTP settings:', error);
+            alert(error.message || 'Failed to save SMTP settings');
+        }
+        finally {
+            setSmtpSaving(false);
+        }
+    };
+    const handleLogoUpload = async (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        const allowedTypes = ['image/png', 'image/jpeg'];
+        if (!allowedTypes.includes(file.type)) {
+            alert('Please upload a PNG or JPEG image');
+            return;
+        }
+        if (file.size > 2 * 1024 * 1024) {
+            alert('Image must be smaller than 2MB');
+            return;
+        }
+        try {
+            setIsLogoUploading(true);
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('type', 'logo');
+            const response = await fetch('/api/plugin-newsletter/upload', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData,
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to upload logo');
+            }
+            const data = await response.json();
+            setSmtpSettings(prev => ({ ...prev, logoUrl: data.url }));
+        }
+        catch (error) {
+            console.error('Failed to upload logo:', error);
+            alert(error.message || 'Failed to upload logo. Please try again.');
+        }
+        finally {
+            setIsLogoUploading(false);
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: () => !smtpSaving && onClose() }), _jsxs("div", { className: "relative w-full max-w-2xl mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Settings2, { className: "w-5 h-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: "SMTP Settings" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary", children: "Configure email server for sending newsletters" })] })] }), _jsx("button", { onClick: () => !smtpSaving && onClose(), disabled: smtpSaving, className: "p-2 rounded-full hover:bg-dashboard-border transition-colors", children: _jsx(X, { size: 20, className: "text-dashboard-text-secondary" }) })] }), _jsx("div", { className: "p-8 space-y-6 max-h-[60vh] overflow-y-auto", children: smtpLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(RefreshCw, { className: "w-6 h-6 animate-spin text-primary" }) })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "grid grid-cols-2 gap-6", children: [_jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "SMTP Host" }), _jsx("input", { type: "text", value: smtpSettings.host, onChange: (e) => setSmtpSettings(prev => ({ ...prev, host: e.target.value })), placeholder: "smtp.example.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" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Port" }), _jsx("input", { type: "number", value: smtpSettings.port, onChange: (e) => setSmtpSettings(prev => ({ ...prev, port: parseInt(e.target.value) || 465 })), placeholder: "465", 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" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "From Name" }), _jsx("input", { type: "text", value: smtpSettings.fromName, onChange: (e) => setSmtpSettings(prev => ({ ...prev, fromName: e.target.value })), placeholder: "My Newsletter", 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" })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Username / Email" }), _jsx("input", { type: "text", value: smtpSettings.user, onChange: (e) => setSmtpSettings(prev => ({ ...prev, user: e.target.value })), placeholder: "smtp@example.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" })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Password / App Password" }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: smtpShowPassword ? 'text' : 'password', value: smtpSettings.password, onChange: (e) => setSmtpSettings(prev => ({ ...prev, password: e.target.value })), placeholder: "Enter password or app password", className: "w-full px-4 py-3 pr-12 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text" }), _jsx("button", { type: "button", onClick: () => setSmtpShowPassword(!smtpShowPassword), className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-dashboard-text-secondary hover:text-dashboard-text", children: smtpShowPassword ? _jsx(EyeOff, { size: 18 }) : _jsx(Eye, { size: 18 }) })] })] }), _jsxs("div", { className: "col-span-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "From Email" }), _jsx("button", { type: "button", onClick: () => {
+                                                            if (fromEmailEditable) {
+                                                                setFromEmailEditable(false);
+                                                                setSmtpSettings(prev => ({ ...prev, from: prev.user }));
+                                                            }
+                                                            else {
+                                                                setFromEmailEditable(true);
+                                                            }
+                                                        }, className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline", children: fromEmailEditable ? (_jsxs(_Fragment, { children: [_jsx(Unlink, { size: 12 }), "Use same as username"] })) : (_jsxs(_Fragment, { children: [_jsx(Pencil, { size: 12 }), "Edit"] })) })] }), _jsx("input", { type: "email", value: smtpSettings.from || smtpSettings.user, onChange: (e) => setSmtpSettings(prev => ({ ...prev, from: e.target.value })), disabled: !fromEmailEditable, placeholder: "newsletter@example.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 ${!fromEmailEditable ? 'opacity-60 cursor-not-allowed' : ''}` }), !fromEmailEditable && smtpSettings.user && (_jsxs("p", { className: "text-[10px] text-dashboard-text-secondary mt-1", children: ["Using: ", smtpSettings.user] }))] }), _jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Primary Language" }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary mb-2", children: "Default language for welcome emails and newsletters" }), _jsxs("select", { value: smtpSettings.primaryLanguage || 'en', onChange: (e) => setSmtpSettings(prev => ({ ...prev, primaryLanguage: e.target.value })), 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", children: [_jsx("option", { value: "en", children: "English" }), _jsx("option", { value: "nl", children: "Dutch" }), _jsx("option", { value: "sv", children: "Swedish" })] })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { size: 14 }), "Email Logo"] }) }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary mb-2", children: "Logo to use in email headers (recommended: 200x50px PNG/JPEG)" }), _jsx("div", { className: "border-2 border-dashboard-border border-dashed rounded-xl p-6 bg-dashboard-bg text-center", children: isLogoUploading ? (_jsxs("div", { className: "flex flex-col items-center gap-2 text-dashboard-text-secondary", children: [_jsx(RefreshCw, { size: 24, className: "animate-spin" }), _jsx("span", { className: "text-xs", children: "Uploading..." })] })) : smtpSettings.logoUrl ? (_jsxs("div", { className: "relative inline-block", children: [_jsx("img", { src: smtpSettings.logoUrl, alt: "Logo preview", className: "max-h-16 mx-auto" }), _jsx("button", { onClick: () => setSmtpSettings(prev => ({ ...prev, logoUrl: '' })), className: "absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600", children: _jsx(XCircle, { size: 16 }) })] })) : (_jsxs("label", { className: "cursor-pointer block", children: [_jsx("input", { type: "file", accept: "image/png,image/jpeg", onChange: handleLogoUpload, className: "hidden" }), _jsxs("div", { className: "flex flex-col items-center gap-2 text-dashboard-text-secondary hover:text-dashboard-text", children: [_jsx(Upload, { size: 24 }), _jsx("span", { className: "text-xs", children: "Click to upload logo" })] })] })) })] })] }) })) }), _jsxs("div", { className: "flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50", children: [_jsx("button", { onClick: onClose, disabled: smtpSaving, 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", children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: smtpSaving || smtpLoading, className: `inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${smtpSaving
+                                    ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                    : smtpSuccess
+                                        ? 'bg-green-600 text-white'
+                                        : 'bg-primary text-white hover:bg-primary/90'}`, children: smtpSaving ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Saving..."] })) : smtpSuccess ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "w-4 h-4" }), "Saved!"] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), "Save Settings"] })) })] })] })] }));
+}

package/dist/views/components/TestEmailModal.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Test Email Modal Component
+ */
+interface TestEmailModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function TestEmailModal({ isOpen, onClose }: TestEmailModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=TestEmailModal.d.ts.map

package/dist/views/components/TestEmailModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestEmailModal.d.ts","sourceRoot":"","sources":["../../../src/views/components/TestEmailModal.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAOH,UAAU,mBAAmB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAWD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,kDAoPtE"}

package/dist/views/components/TestEmailModal.js

@@ -0,0 +1,99 @@
+/**
+ * Test Email Modal Component
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { X, Send, RefreshCw, CheckCircle2, AlertCircle, Mail, Globe, Sparkles } from 'lucide-react';
+const languages = [
+    { code: 'en', label: 'EN' },
+    { code: 'nl', label: 'NL' },
+    { code: 'sv', label: 'SV' },
+];
+export function TestEmailModal({ isOpen, onClose }) {
+    const [email, setEmail] = useState('');
+    const [language, setLanguage] = useState('en');
+    const [emailType, setEmailType] = useState('test');
+    const [welcomeEmailConfigured, setWelcomeEmailConfigured] = useState(false);
+    const [isSending, setIsSending] = useState(false);
+    const [sendSuccess, setSendSuccess] = useState(false);
+    const [sendError, setSendError] = useState(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);
+                }
+            }
+        }
+        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) {
+            console.error('Failed to send test email:', error);
+            setSendError(error.message || 'Failed to send test email');
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: () => !isSending && onClose() }), _jsxs("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", children: [_jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Mail, { className: "w-5 h-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: "Test Email" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary", children: "Send a test email to verify SMTP" })] })] }), _jsx("button", { onClick: () => !isSending && onClose(), disabled: isSending, className: "p-2 rounded-full hover:bg-dashboard-border transition-colors", children: _jsx(X, { size: 20, className: "text-dashboard-text-secondary" }) })] }), _jsx("div", { className: "p-8", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Email Template" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("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'}`, children: [_jsx(Mail, { size: 14 }), "Test"] }), _jsxs("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'}`, children: [_jsx(Sparkles, { size: 14 }), "Welcome", !welcomeEmailConfigured && (_jsx("span", { className: "text-[9px] normal-case opacity-70", children: "(Not configured)" }))] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Recipient Email" }), _jsx("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" })] }), _jsxs("div", { children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: [_jsx(Globe, { size: 12, className: "inline mr-1" }), "Language"] }), _jsx("div", { className: "flex gap-2", children: languages.map((lang) => (_jsx("button", { 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'}`, children: lang.label }, lang.code))) })] }), sendError && (_jsxs("div", { className: "flex items-center gap-2 text-red-500 text-sm", children: [_jsx(AlertCircle, { size: 16 }), sendError] })), _jsx("p", { className: "text-xs text-dashboard-text-secondary", children: "A test email will be sent to this address using your configured SMTP settings." })] }) }), _jsxs("div", { className: "flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50", children: [_jsx("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", children: "Cancel" }), _jsx("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'}`, children: isSending ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Sending..."] })) : sendSuccess ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "w-4 h-4" }), "Sent!"] })) : (_jsxs(_Fragment, { children: [_jsx(Send, { className: "w-4 h-4" }), "Send Test"] })) })] })] })] }));
+}

package/package.json

@@ -1,28 +1,36 @@
 {
   "name": "@jhits/plugin-newsletter",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Newsletter management and email delivery plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./src/index.tsx",
+      "import": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./src": {
+      "types": "./src/index.tsx",
+      "import": "./src/index.tsx",
+      "default": "./src/index.tsx"
     },
     "./server": {
-      "types": "./dist/index.server.d.ts",
-      "default": "./dist/index.server.js"
+      "types": "./src/index.server.ts",
+      "import": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
     }
   },
   "dependencies": {
+    "handlebars": "^4.7.8",
     "lucide-react": "^0.564.0",
     "mongodb": "^7.1.0",
     "next-auth": "^4.24.13",
     "nodemailer": "^8.0.1",
-    "@jhits/plugin-core": "0.0.5"
+    "@jhits/plugin-core": "0.0.7"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -30,6 +38,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@types/handlebars": "^4.1.0",
     "@types/node": "^25.2.3",
     "@types/nodemailer": "^7.0.9",
     "@types/react": "^19.2.14",
@@ -41,7 +50,9 @@
   },
   "files": [
     "dist",
-    "package.json"
+    "package.json",
+    "templates",
+    "data"
   ],
   "scripts": {
     "build": "tsc"