@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/dist/views/NewsletterManager.js

@@ -5,10 +5,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users } from 'lucide-react';
+import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users, Grid, List } from 'lucide-react';
 import { SmtpSettingsModal } from './components/SmtpSettingsModal';
 import { TestEmailModal } from './components/TestEmailModal';
 import { SendNewsletterModal } from './components/SendNewsletterModal';
+import { NewsletterGrid } from './components/NewsletterGrid';
 function getStatusBadgeColor(status) {
     switch (status) {
         case 'sent':
@@ -27,6 +28,8 @@ export function NewsletterManagerView({ siteId, locale }) {
     const [newsletters, setNewsletters] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [statusFilter, setStatusFilter] = useState('all');
+    const [primaryLanguage, setPrimaryLanguage] = useState('en');
+    const [viewMode, setViewMode] = useState('grid');
     const [showSmtpModal, setShowSmtpModal] = useState(false);
     const [showTestEmailModal, setShowTestEmailModal] = useState(false);
     const [showSendModal, setShowSendModal] = useState(false);
@@ -36,12 +39,33 @@ export function NewsletterManagerView({ siteId, locale }) {
     const [welcomeEmailStatus, setWelcomeEmailStatus] = useState('not_configured');
     const [welcomeEmailLastUpdated, setWelcomeEmailLastUpdated] = useState(null);
     const [subscriberCount, setSubscriberCount] = useState(0);
+    // Hover state for language tooltip
+    const [hoveredNewsletter, setHoveredNewsletter] = useState(null);
+    // Fetch primary language from SMTP settings
+    useEffect(() => {
+        const fetchPrimaryLanguage = async () => {
+            try {
+                const response = await fetch('/api/plugin-newsletter/smtp', {
+                    credentials: 'include',
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    setPrimaryLanguage(data.primaryLanguage || 'en');
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch SMTP settings:', error);
+            }
+        };
+        fetchPrimaryLanguage();
+    }, []);
     // Fetch newsletters
     useEffect(() => {
         const fetchNewsletters = async () => {
             try {
                 setIsLoading(true);
-                const response = await fetch('/api/plugin-newsletter/newsletters', {
+                const langParam = primaryLanguage ? `?language=${primaryLanguage}` : '';
+                const response = await fetch(`/api/plugin-newsletter/newsletters${langParam}`, {
                     credentials: 'include',
                 });
                 if (!response.ok) {
@@ -58,7 +82,7 @@ export function NewsletterManagerView({ siteId, locale }) {
             }
         };
         fetchNewsletters();
-    }, []);
+    }, [primaryLanguage]);
     // Fetch welcome email status
     useEffect(() => {
         const fetchWelcomeEmailStatus = async () => {
@@ -197,6 +221,37 @@ export function NewsletterManagerView({ siteId, locale }) {
             year: 'numeric',
         });
     };
+    // Format date with time
+    const formatDateTime = (dateString) => {
+        if (!dateString)
+            return 'Never';
+        const date = new Date(dateString);
+        return date.toLocaleString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    // Get send history for a specific language
+    const getSendHistoryForLanguage = (sendHistory, language) => {
+        return sendHistory
+            .filter(entry => entry.language === language)
+            .sort((a, b) => new Date(b.sentAt).getTime() - new Date(a.sentAt).getTime());
+    };
+    // Sort languages: those with send history first (most recent first), then by language code
+    const sortLanguages = (langs, sendHistory) => {
+        return [...langs].sort((a, b) => {
+            const aHasHistory = sendHistory.some(h => h.language === a);
+            const bHasHistory = sendHistory.some(h => h.language === b);
+            if (aHasHistory && !bHasHistory)
+                return -1;
+            if (!aHasHistory && bHasHistory)
+                return 1;
+            return a.localeCompare(b);
+        });
+    };
     // Format last sent info
     const formatLastSent = (sendHistory) => {
         if (!sendHistory || sendHistory.length === 0)
@@ -216,7 +271,18 @@ export function NewsletterManagerView({ siteId, locale }) {
                                                 }
                                             }, className: "inline-flex items-center gap-2 px-4 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: [_jsx(Send, { size: 14 }), "Test Email"] }), _jsxs("button", { onClick: () => setShowSmtpModal(true), className: `inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors ${smtpStatus === 'not_configured'
                                                 ? 'bg-amber-50 border-amber-300 text-amber-700 dark:bg-amber-900/20 dark:border-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/40'
-                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'}`, children: [_jsx(Settings2, { size: 14 }), "SMTP", smtpStatus === 'not_configured' && (_jsx("span", { className: "w-2 h-2 rounded-full bg-amber-500" }))] }), _jsxs("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), 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", children: [_jsx("option", { value: "all", children: "All Status" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "sent", children: "Sent" }), _jsx("option", { value: "archived", children: "Archived" })] }), _jsxs("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", children: [_jsx(Plus, { size: 14 }), "New Newsletter"] })] })] }), _jsx("div", { className: "mb-6 p-6 rounded-2xl bg-gradient-to-br from-primary/5 via-primary/10 to-transparent border border-dashboard-border", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: "w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Sparkles, { className: "w-6 h-6 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-black text-dashboard-text uppercase tracking-tight mb-1", children: "Welcome Email" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary mb-2", children: "The email sent automatically when someone subscribes" }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [welcomeEmailStatus === 'configured' ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-green-600 dark:text-green-400", children: [_jsx(CheckCircle2, { size: 12 }), "Configured"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400", children: [_jsx(Clock, { size: 12 }), "Not configured"] })), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/subscribers', className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline", children: [_jsx(Users, { size: 12 }), subscriberCount, " subscriber", subscriberCount !== 1 ? 's' : ''] }), welcomeEmailLastUpdated && (_jsxs("span", { className: "text-[10px] text-dashboard-text-secondary", children: ["Last updated: ", new Date(welcomeEmailLastUpdated).toLocaleDateString()] }))] })] })] }), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/welcome', className: "inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-primary text-white hover:bg-primary/90", children: [_jsx(Edit2, { size: 14 }), welcomeEmailStatus === 'configured' ? 'Edit' : 'Configure'] })] }) }), _jsx("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredNewsletters.length === 0 ? (_jsxs("div", { className: "py-24 text-center", children: [_jsx(Mail, { size: 64, className: "mx-auto text-dashboard-text-secondary mb-4" }), _jsx("p", { className: "text-dashboard-text-secondary font-serif italic text-lg mb-6", children: statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".` }), _jsxs("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", children: [_jsx(Plus, { size: 14 }), "Create Your First Newsletter"] })] })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-5", children: "Title" }), _jsx("th", { className: "px-8 py-5", children: "Subject" }), _jsx("th", { className: "px-8 py-5", children: "Status" }), _jsx("th", { className: "px-8 py-5", children: "Last Sent" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Updated" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredNewsletters.map((newsletter) => (_jsxs("tr", { className: "hover:bg-dashboard-bg transition-colors group", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("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", children: _jsx(Mail, { size: 18 }) }), _jsx("span", { className: "text-sm font-medium text-dashboard-text tracking-tight", children: newsletter.title })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: "text-sm text-dashboard-text-secondary", children: newsletter.subject || 'No subject' }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: `text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`, children: newsletter.status }) }), _jsx("td", { className: "px-8 py-5", children: formatLastSent(newsletter.sendHistory) || (_jsx("span", { className: "text-xs text-dashboard-text-secondary", children: "Never" })) }), _jsx("td", { className: "px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Calendar, { size: 14 }), formatDate(newsletter.updatedAt)] }) }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => handleSend(newsletter), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: newsletter.status === 'sent' ? 'Resend newsletter' : 'Send newsletter', children: _jsx(Send, { size: 18 }) }), _jsx("button", { onClick: () => handleEdit(newsletter.id), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: "Edit newsletter", children: _jsx(Edit2, { size: 18 }) }), _jsx("button", { onClick: () => handleDelete(newsletter.id, 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", children: _jsx(Trash2, { size: 18 }) })] }) })] }, newsletter.id))) })] }) })) })] }) }), _jsx(SmtpSettingsModal, { isOpen: showSmtpModal, onClose: () => setShowSmtpModal(false) }), _jsx(TestEmailModal, { isOpen: showTestEmailModal, onClose: () => setShowTestEmailModal(false) }), selectedNewsletter && (_jsx(SendNewsletterModal, { isOpen: showSendModal, onClose: () => {
+                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'}`, children: [_jsx(Settings2, { size: 14 }), "SMTP", smtpStatus === 'not_configured' && (_jsx("span", { className: "w-2 h-2 rounded-full bg-amber-500" }))] }), _jsxs("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), 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", children: [_jsx("option", { value: "all", children: "All Status" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "sent", children: "Sent" }), _jsx("option", { value: "archived", children: "Archived" })] }), _jsxs("div", { className: "flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl p-1 gap-1", children: [_jsx("button", { onClick: () => setViewMode('grid'), className: `p-2 rounded-lg transition-colors ${viewMode === 'grid'
+                                                        ? 'bg-primary text-white'
+                                                        : 'text-dashboard-text-secondary hover:text-dashboard-text'}`, title: "Grid view", children: _jsx(Grid, { size: 16 }) }), _jsx("button", { onClick: () => setViewMode('list'), className: `p-2 rounded-lg transition-colors ${viewMode === 'list'
+                                                        ? 'bg-primary text-white'
+                                                        : 'text-dashboard-text-secondary hover:text-dashboard-text'}`, title: "List view", children: _jsx(List, { size: 16 }) })] }), _jsxs("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", children: [_jsx(Plus, { size: 14 }), "New Newsletter"] })] })] }), _jsx("div", { className: "mb-6 p-6 rounded-2xl bg-gradient-to-br from-primary/5 via-primary/10 to-transparent border border-dashboard-border", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: "w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Sparkles, { className: "w-6 h-6 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-black text-dashboard-text uppercase tracking-tight mb-1", children: "Welcome Email" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary mb-2", children: "The email sent automatically when someone subscribes" }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [welcomeEmailStatus === 'configured' ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-green-600 dark:text-green-400", children: [_jsx(CheckCircle2, { size: 12 }), "Configured"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400", children: [_jsx(Clock, { size: 12 }), "Not configured"] })), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/subscribers', className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline", children: [_jsx(Users, { size: 12 }), subscriberCount, " subscriber", subscriberCount !== 1 ? 's' : ''] }), welcomeEmailLastUpdated && (_jsxs("span", { className: "text-[10px] text-dashboard-text-secondary", children: ["Last updated: ", new Date(welcomeEmailLastUpdated).toLocaleDateString()] }))] })] })] }), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/welcome', className: "inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-primary text-white hover:bg-primary/90", children: [_jsx(Edit2, { size: 14 }), welcomeEmailStatus === 'configured' ? 'Edit' : 'Configure'] })] }) }), _jsx("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredNewsletters.length === 0 ? (_jsxs("div", { className: "py-24 text-center", children: [_jsx(Mail, { size: 64, className: "mx-auto text-dashboard-text-secondary mb-4" }), _jsx("p", { className: "text-dashboard-text-secondary font-serif italic text-lg mb-6", children: statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".` }), _jsxs("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", children: [_jsx(Plus, { size: 14 }), "Create Your First Newsletter"] })] })) : viewMode === 'grid' ? (_jsx(NewsletterGrid, { newsletters: filteredNewsletters, onEdit: handleEdit, onSend: handleSend, onDelete: handleDelete, formatDateTime: formatDateTime, locale: locale })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-5", children: "Title" }), _jsx("th", { className: "px-8 py-5", children: "Subject" }), _jsx("th", { className: "px-8 py-5", children: "Status" }), _jsx("th", { className: "px-8 py-5", children: "Last Sent" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Updated" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredNewsletters.map((newsletter) => (_jsxs("tr", { className: "hover:bg-dashboard-bg transition-colors group", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("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", children: _jsx(Mail, { size: 18 }) }), _jsx("div", { className: "relative", children: _jsx("span", { className: "text-sm font-medium text-dashboard-text tracking-tight cursor-pointer hover:text-primary transition-colors", onMouseEnter: (e) => {
+                                                                            const rect = e.currentTarget.getBoundingClientRect();
+                                                                            setHoveredNewsletter({
+                                                                                id: newsletter.id,
+                                                                                x: rect.left + rect.width / 2,
+                                                                                y: rect.bottom + 8
+                                                                            });
+                                                                        }, onMouseLeave: () => setHoveredNewsletter(null), children: newsletter.title }) })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: "text-sm text-dashboard-text-secondary", children: newsletter.subject || 'No subject' }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: `text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`, children: newsletter.status }) }), _jsx("td", { className: "px-8 py-5", children: formatLastSent(newsletter.sendHistory) || (_jsx("span", { className: "text-xs text-dashboard-text-secondary", children: "Never" })) }), _jsx("td", { className: "px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Calendar, { size: 14 }), formatDate(newsletter.updatedAt)] }) }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => handleSend(newsletter), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: newsletter.status === 'sent' ? 'Resend newsletter' : 'Send newsletter', children: _jsx(Send, { size: 18 }) }), _jsx("button", { onClick: () => handleEdit(newsletter.id), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: "Edit newsletter", children: _jsx(Edit2, { size: 18 }) }), _jsx("button", { onClick: () => handleDelete(newsletter.id, 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", children: _jsx(Trash2, { size: 18 }) })] }) })] }, newsletter.id))) })] }) })) })] }) }), _jsx(SmtpSettingsModal, { isOpen: showSmtpModal, onClose: () => setShowSmtpModal(false) }), _jsx(TestEmailModal, { isOpen: showTestEmailModal, onClose: () => setShowTestEmailModal(false) }), selectedNewsletter && (_jsx(SendNewsletterModal, { isOpen: showSendModal, onClose: () => {
                     setShowSendModal(false);
                     setSelectedNewsletter(null);
                 }, newsletter: {
@@ -225,5 +291,21 @@ export function NewsletterManagerView({ siteId, locale }) {
                     subject: selectedNewsletter.subject,
                     status: selectedNewsletter.status,
                     hasContent: selectedNewsletter.hasContent,
-                }, subscriberCount: subscriberCount }))] }));
+                }, subscriberCount: subscriberCount })), hoveredNewsletter && (() => {
+                const tooltipNewsletter = newsletters.find(n => n.id === hoveredNewsletter.id);
+                if (!tooltipNewsletter?.languages)
+                    return null;
+                const tooltipLanguages = tooltipNewsletter.languages;
+                const tooltipSendHistory = tooltipNewsletter.sendHistory || [];
+                return (_jsxs("div", { className: "fixed z-50 w-72 bg-dashboard-card border border-dashboard-border rounded-xl shadow-2xl p-3 pointer-events-none", style: {
+                        left: hoveredNewsletter.x,
+                        top: hoveredNewsletter.y,
+                        transform: 'translateX(-50%)'
+                    }, children: [_jsx("div", { className: "text-[10px] uppercase tracking-wider text-dashboard-text-secondary font-bold mb-2", children: "Translations & Send History" }), sortLanguages(Object.keys(tooltipLanguages), tooltipSendHistory).map((lang) => {
+                            const data = tooltipLanguages[lang];
+                            const langSendHistory = getSendHistoryForLanguage(tooltipSendHistory, lang);
+                            const lastSend = langSendHistory[0];
+                            return (_jsxs("div", { className: "py-2 border-b border-dashboard-border last:border-0", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-[10px] font-black uppercase text-primary", children: lang }), lastSend && (_jsxs("div", { className: "text-[9px] text-green-600 dark:text-green-400 flex items-center gap-1", children: [_jsx(Send, { size: 10 }), "Sent"] }))] }), _jsx("div", { className: "text-xs text-dashboard-text truncate", children: data?.metadata?.subject || 'No subject' }), lastSend && (_jsxs("div", { className: "text-[9px] text-dashboard-text-secondary mt-1", children: [formatDateTime(lastSend.sentAt), " \u2022 ", lastSend.recipientCount, " recipients"] })), langSendHistory.length > 1 && (_jsxs("div", { className: "text-[9px] text-dashboard-text-secondary mt-0.5", children: ["+ ", langSendHistory.length - 1, " more send(s)"] }))] }, lang));
+                        })] }));
+            })()] }));
 }

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

@@ -0,0 +1,13 @@
+/**
+ * Domain Prompt Modal Component
+ * Non-technical modal to ask for the website domain when it's missing in dev mode.
+ */
+interface DomainPromptModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (domain: string) => Promise<void>;
+    language: string;
+}
+export declare function DomainPromptModal({ isOpen, onClose, onSave, language }: DomainPromptModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DomainPromptModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DomainPromptModal.d.ts","sourceRoot":"","sources":["../../../src/views/components/DomainPromptModal.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,UAAU,sBAAsB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,sBAAsB,kDA8I9F"}

package/dist/views/components/DomainPromptModal.js

@@ -0,0 +1,58 @@
+/**
+ * Domain Prompt Modal Component
+ * Non-technical modal to ask for the website domain when it's missing in dev mode.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Globe, Save, RefreshCw, CheckCircle2, Info } from 'lucide-react';
+export function DomainPromptModal({ isOpen, onClose, onSave, language }) {
+    const [domain, setDomain] = useState('');
+    const [isSaving, setIsSaving] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [error, setError] = useState(null);
+    const languageNames = {
+        en: 'English',
+        nl: 'Dutch',
+        sv: 'Swedish',
+    };
+    const handleSave = async () => {
+        if (!domain.trim()) {
+            setError('Please enter a website address');
+            return;
+        }
+        // Basic URL validation/cleanup
+        let cleanDomain = domain.trim().toLowerCase();
+        if (cleanDomain.startsWith('http://'))
+            cleanDomain = cleanDomain.replace('http://', '');
+        if (cleanDomain.startsWith('https://'))
+            cleanDomain = cleanDomain.replace('https://', '');
+        if (cleanDomain.endsWith('/'))
+            cleanDomain = cleanDomain.slice(0, -1);
+        try {
+            setIsSaving(true);
+            setError(null);
+            await onSave(cleanDomain);
+            setIsSuccess(true);
+            setTimeout(() => {
+                onClose();
+            }, 1500);
+        }
+        catch (err) {
+            setError(err.message || 'Failed to save domain configuration');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-[60] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-md", onClick: () => !isSaving && onClose() }), _jsxs("div", { className: "relative w-full max-w-lg bg-white dark:bg-neutral-900 rounded-[2.5rem] border border-dashboard-border shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300", children: [_jsxs("div", { className: "px-10 pt-10 pb-6 text-center", children: [_jsx("div", { className: "w-20 h-20 bg-primary/10 rounded-[2rem] flex items-center justify-center mx-auto mb-6", children: _jsx(Globe, { size: 40, className: "text-primary" }) }), _jsxs("h2", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2", children: ["Website Connection", _jsx("span", { className: "text-primary", children: "." })] }), _jsxs("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 font-medium", children: ["We need to know where your ", _jsx("span", { className: "font-bold text-dashboard-text", children: languageNames[language] || language }), " website is hosted to ensure links work correctly."] })] }), _jsxs("div", { className: "px-10 pb-10 space-y-6", children: [_jsxs("div", { className: "bg-blue-50/50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-2xl p-4 flex gap-3", children: [_jsx(Info, { size: 18, className: "text-blue-500 flex-shrink-0 mt-0.5" }), _jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300 leading-relaxed", children: "Since you are in development mode, we couldn't automatically find the domain for this language. Please provide it below." })] }), _jsxs("div", { children: [_jsxs("label", { className: "text-[10px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] block mb-3 ml-1", children: ["Your ", languageNames[language] || language, " Website URL"] }), _jsxs("div", { className: "relative group", children: [_jsx("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 group-focus-within:text-primary transition-colors font-mono text-sm", children: "https://" }), _jsx("input", { type: "text", value: domain, onChange: (e) => {
+                                                    setDomain(e.target.value);
+                                                    setError(null);
+                                                }, onKeyDown: (e) => e.key === 'Enter' && handleSave(), placeholder: "www.yourwebsite.com", className: "w-full pl-20 pr-6 py-4 bg-dashboard-bg border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-dashboard-text font-medium", autoFocus: true })] }), error && (_jsx("p", { className: "text-[10px] text-red-500 font-bold uppercase tracking-widest mt-3 ml-1", children: error }))] }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx("button", { onClick: onClose, disabled: isSaving, className: "flex-1 px-6 py-4 rounded-full text-[10px] font-black uppercase tracking-widest transition-all bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border active:scale-95", children: "Skip for now" }), _jsx("button", { onClick: handleSave, disabled: isSaving || isSuccess, className: `flex-[2] inline-flex items-center justify-center gap-2 px-6 py-4 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg active:scale-95 ${isSaving
+                                            ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                            : isSuccess
+                                                ? 'bg-green-600 text-white'
+                                                : 'bg-primary text-white hover:shadow-primary/20'}`, children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Connecting..."] })) : isSuccess ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "w-4 h-4" }), "Saved!"] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), "Link Website"] })) })] })] })] })] }));
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Newsletter Card Component
+ * Modern, distinctive card design for newsletters
+ */
+import { NewsletterListItem } from '../../types/newsletter';
+interface NewsletterCardProps {
+    newsletter: NewsletterListItem;
+    onEdit: (id: string) => void;
+    onSend: (newsletter: NewsletterListItem) => void;
+    onDelete: (id: string, title: string) => void;
+    formatDateTime: (dateString: string | undefined) => string;
+    locale: string;
+}
+export declare function NewsletterCard({ newsletter, onEdit, onSend, onDelete, formatDateTime, locale }: NewsletterCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NewsletterCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterCard.d.ts","sourceRoot":"","sources":["../../../src/views/components/NewsletterCard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,kBAAkB,EAAoB,MAAM,wBAAwB,CAAC;AAE9E,UAAU,mBAAmB;IACzB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IAC3D,MAAM,EAAE,MAAM,CAAC;CAClB;AA4ED,wBAAgB,cAAc,CAAC,EAC3B,UAAU,EACV,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,MAAM,EACT,EAAE,mBAAmB,2CA8GrB"}

package/dist/views/components/NewsletterCard.js

@@ -0,0 +1,94 @@
+/**
+ * Newsletter Card Component
+ * Modern, distinctive card design for newsletters
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Trash2, Edit2, Send } from 'lucide-react';
+function getStatusConfig(status) {
+    switch (status) {
+        case 'sent':
+            return {
+                label: 'Sent',
+                bg: 'bg-green-500',
+                text: 'text-green-600 dark:text-green-400',
+            };
+        case 'scheduled':
+            return {
+                label: 'Scheduled',
+                bg: 'bg-blue-500',
+                text: 'text-blue-600 dark:text-blue-400',
+            };
+        case 'draft':
+            return {
+                label: 'Draft',
+                bg: 'bg-gray-400',
+                text: 'text-gray-500 dark:text-gray-400',
+            };
+        case 'archived':
+            return {
+                label: 'Archived',
+                bg: 'bg-neutral-400',
+                text: 'text-neutral-500 dark:text-neutral-400',
+            };
+        default:
+            return {
+                label: status,
+                bg: 'bg-gray-400',
+                text: 'text-gray-500',
+            };
+    }
+}
+const LANGUAGE_NAMES = {
+    en: 'English',
+    nl: 'Dutch',
+    sv: 'Swedish',
+    de: 'German',
+    fr: 'French',
+    es: 'Spanish',
+    it: 'Italian',
+    pt: 'Portuguese',
+    pl: 'Polish',
+    ru: 'Russian',
+    ja: 'Japanese',
+    zh: 'Chinese',
+    ar: 'Arabic',
+    tr: 'Turkish',
+};
+const LANGUAGE_COUNTRY_CODES = {
+    en: 'gb',
+    nl: 'nl',
+    sv: 'se',
+    de: 'de',
+    fr: 'fr',
+    es: 'es',
+    it: 'it',
+    pt: 'pt',
+    pl: 'pl',
+    ru: 'ru',
+    ja: 'jp',
+    zh: 'cn',
+    ar: 'sa',
+    tr: 'tr',
+};
+const getFlagUrl = (lang, size = 32) => {
+    const countryCode = LANGUAGE_COUNTRY_CODES[lang] || lang;
+    return `https://flagcdn.com/${size}x${Math.round(size * 0.75)}/${countryCode}.png`;
+};
+export function NewsletterCard({ newsletter, onEdit, onSend, onDelete, formatDateTime, locale }) {
+    const statusConfig = getStatusConfig(newsletter.status);
+    const languages = newsletter.availableLanguages || [];
+    const sendHistory = newsletter.sendHistory || [];
+    const sentLanguages = [...new Set(sendHistory.map(h => h.language))];
+    return (_jsxs("div", { className: "group relative bg-white dark:bg-neutral-900 rounded-2xl border border-dashboard-border overflow-hidden hover:border-primary/40 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300", children: [_jsx("div", { className: `h-1.5 ${statusConfig.bg}` }), _jsxs("div", { className: "p-5", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: `text-[10px] font-black uppercase tracking-widest ${statusConfig.text}`, children: statusConfig.label }) }), _jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsx("button", { onClick: () => onSend(newsletter), className: "p-2 rounded-lg text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all", title: newsletter.status === 'sent' ? 'Resend' : 'Send', children: _jsx(Send, { size: 16 }) }), _jsx("button", { onClick: () => onEdit(newsletter.id), className: "p-2 rounded-lg text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all", title: "Edit", children: _jsx(Edit2, { size: 16 }) }), _jsx("button", { onClick: () => onDelete(newsletter.id, newsletter.title), className: "p-2 rounded-lg text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all", title: "Delete", children: _jsx(Trash2, { size: 16 }) })] })] }), _jsx("h3", { className: "text-lg font-bold text-dashboard-text mb-4 line-clamp-2 group-hover:text-primary transition-colors", children: newsletter.title || 'Untitled Newsletter' }), _jsx("div", { className: "space-y-2", children: languages.map((lang) => {
+                            const hasBeenSent = sentLanguages.includes(lang);
+                            const langHistory = sendHistory.filter(h => h.language === lang);
+                            const lastLangSend = langHistory[0];
+                            const langData = newsletter.languages?.[lang];
+                            const langSubject = langData?.metadata?.subject || newsletter.title;
+                            return (_jsxs("div", { className: `relative group/lang flex items-center justify-between px-3 py-2 rounded-lg border transition-all hover:border-primary/50 ${hasBeenSent ? '' : 'bg-dashboard-bg border-dashboard-border'}`, style: {
+                                    backgroundColor: hasBeenSent ? 'rgba(34, 197, 94, 0.08)' : undefined,
+                                    borderColor: hasBeenSent ? 'rgba(34, 197, 94, 0.3)' : undefined,
+                                }, children: [hasBeenSent && (_jsx("div", { className: "absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-green-500 rounded-full flex items-center justify-center shadow-sm", children: _jsx("span", { className: "text-[10px] font-bold text-white", children: langHistory.length }) })), _jsx("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: _jsx("img", { src: getFlagUrl(lang, 28), alt: LANGUAGE_NAMES[lang] || lang, className: "w-7 h-5 rounded object-cover shrink-0", loading: "lazy" }) }), _jsx("div", { className: "flex items-center gap-4 text-xs shrink-0", children: hasBeenSent && lastLangSend ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-dashboard-text-secondary", children: formatDateTime(lastLangSend.sentAt) }), _jsxs("div", { className: "text-dashboard-text-secondary", children: [lastLangSend.recipientCount, " recipients"] })] })) : (_jsx("span", { className: "text-dashboard-text-secondary", children: "Not sent" })) }), _jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-neutral-900 dark:bg-neutral-800 text-white text-xs rounded-lg opacity-0 group-hover/lang:opacity-100 transition-opacity pointer-events-none z-10 w-64 shadow-lg", children: [_jsx("div", { className: "font-bold mb-1", children: LANGUAGE_NAMES[lang] || lang.toUpperCase() }), _jsx("div", { className: "text-neutral-300 break-words", children: langSubject || 'Untitled' }), _jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-0 h-0 border-4 border-transparent border-t-neutral-900 dark:border-t-neutral-800" })] })] }, lang));
+                        }) })] })] }));
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Newsletter Grid View Component
+ * Card-based grid layout for newsletters
+ */
+import { NewsletterListItem } from '../../types/newsletter';
+interface NewsletterGridProps {
+    newsletters: NewsletterListItem[];
+    onEdit: (id: string) => void;
+    onSend: (newsletter: NewsletterListItem) => void;
+    onDelete: (id: string, title: string) => void;
+    formatDateTime: (dateString: string | undefined) => string;
+    locale: string;
+}
+export declare function NewsletterGrid({ newsletters, onEdit, onSend, onDelete, formatDateTime, locale }: NewsletterGridProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=NewsletterGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterGrid.d.ts","sourceRoot":"","sources":["../../../src/views/components/NewsletterGrid.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,mBAAmB;IACzB,WAAW,EAAE,kBAAkB,EAAE,CAAC;IAClC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IAC3D,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,MAAM,EACT,EAAE,mBAAmB,kDAoBrB"}

package/dist/views/components/NewsletterGrid.js

@@ -0,0 +1,13 @@
+/**
+ * Newsletter Grid View Component
+ * Card-based grid layout for newsletters
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewsletterCard } from './NewsletterCard';
+export function NewsletterGrid({ newsletters, onEdit, onSend, onDelete, formatDateTime, locale }) {
+    if (newsletters.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4", children: newsletters.map((newsletter) => (_jsx(NewsletterCard, { newsletter: newsletter, onEdit: onEdit, onSend: onSend, onDelete: onDelete, formatDateTime: formatDateTime, locale: locale }, newsletter.id))) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SendNewsletterModal.d.ts","sourceRoot":"","sources":["../../../src/views/components/SendNewsletterModal.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAOH,UAAU,wBAAwB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE;QACR,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,eAAe,EAAE,MAAM,CAAC;CAC3B;AAWD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,EAAE,wBAAwB,kDAkS7G"}
+{"version":3,"file":"SendNewsletterModal.d.ts","sourceRoot":"","sources":["../../../src/views/components/SendNewsletterModal.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAQH,UAAU,wBAAwB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE;QACR,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,eAAe,EAAE,MAAM,CAAC;CAC3B;AAWD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,EAAE,wBAAwB,kDAuX7G"}

package/dist/views/components/SendNewsletterModal.js

@@ -5,6 +5,7 @@
 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';
+import { DomainPromptModal } from './DomainPromptModal';
 const languages = [
     { code: 'en', label: 'EN' },
     { code: 'nl', label: 'NL' },
@@ -18,15 +19,19 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
     const [sendSuccess, setSendSuccess] = useState(false);
     const [sendError, setSendError] = useState(null);
     const [resultDetails, setResultDetails] = useState(null);
+    // Domain prompt state
+    const [showDomainPrompt, setShowDomainPrompt] = useState(false);
+    const [isCheckingDomain, setIsCheckingDomain] = useState(false);
     useEffect(() => {
         if (isOpen) {
             setSendMode('subscribers');
             setSendError(null);
             setResultDetails(null);
             setSendSuccess(false);
+            setShowDomainPrompt(false);
         }
     }, [isOpen]);
-    const handleSend = async () => {
+    const handleSend = async (skipDomainCheck = false) => {
         if (sendMode === 'test' && !testEmail.trim()) {
             setSendError('Please enter an email address');
             return;
@@ -38,6 +43,30 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
                 return;
             }
         }
+        // Check if we need to prompt for domain first (usually helpful in dev mode)
+        if (!skipDomainCheck) {
+            try {
+                setIsCheckingDomain(true);
+                // Check if this language has a domain configured
+                const response = await fetch('/api/plugin-website/settings');
+                const siteConfig = await response.json();
+                const hasDomain = siteConfig.domainLocaleConfig?.some((c) => c.locale === language &&
+                    c.domain &&
+                    c.domain !== 'undefined' &&
+                    c.domain.trim() !== '');
+                if (!hasDomain) {
+                    setShowDomainPrompt(true);
+                    setIsCheckingDomain(false);
+                    return; // Stop here, wait for domain prompt
+                }
+            }
+            catch (error) {
+                console.warn('Failed to check domain configuration:', error);
+            }
+            finally {
+                setIsCheckingDomain(false);
+            }
+        }
         try {
             setIsSending(true);
             setSendError(null);
@@ -52,6 +81,12 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
             });
             const data = await response.json();
             if (!response.ok) {
+                // If server detects missing domain, trigger prompt
+                if (data.code === 'DOMAIN_MISSING') {
+                    setShowDomainPrompt(true);
+                    setIsSending(false);
+                    return;
+                }
                 throw new Error(data.error || 'Failed to send newsletter');
             }
             setResultDetails(data.details);
@@ -77,31 +112,65 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
             setIsSending(false);
         }
     };
+    const handleSaveDomain = async (domain) => {
+        try {
+            // Get current site config
+            const response = await fetch('/api/plugin-website/settings');
+            const siteConfig = await response.json();
+            const currentConfigs = siteConfig.domainLocaleConfig || [];
+            const newConfigs = [...currentConfigs];
+            const existingIndex = newConfigs.findIndex((c) => c.locale === language);
+            if (existingIndex >= 0) {
+                newConfigs[existingIndex] = { ...newConfigs[existingIndex], domain };
+            }
+            else {
+                newConfigs.push({ locale: language, domain });
+            }
+            // Save updated site config
+            const saveResponse = await fetch('/api/plugin-website/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    ...siteConfig,
+                    domainLocaleConfig: newConfigs
+                }),
+            });
+            if (!saveResponse.ok)
+                throw new Error('Failed to save website settings');
+            // Re-trigger send with domain check skipped
+            setShowDomainPrompt(false);
+            handleSend(true);
+        }
+        catch (error) {
+            console.error('Failed to save domain:', error);
+            throw error;
+        }
+    };
     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: [_jsxs("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: [isAlreadySent ? 'Resend' : '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-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800", children: _jsxs("div", { className: "flex items-center gap-2 text-blue-700 dark:text-blue-400", children: [_jsx(RefreshCw, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter was already sent - sending again" })] }) })), !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
+    return (_jsxs(_Fragment, { children: [_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: [_jsxs("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: [isAlreadySent ? 'Resend' : '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-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800", children: _jsxs("div", { className: "flex items-center gap-2 text-blue-700 dark:text-blue-400", children: [_jsx(RefreshCw, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter was already sent - sending again" })] }) })), !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 || isCheckingDomain, 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 || isCheckingDomain
                                             ? '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'] })) })] })] })] }));
+                                            : 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 || isCheckingDomain ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), isCheckingDomain ? 'Checking...' : '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'] })) })] })] })] }), _jsx(DomainPromptModal, { isOpen: showDomainPrompt, onClose: () => setShowDomainPrompt(false), onSave: handleSaveDomain, language: language })] }));
 }