@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/src/views/components/SendNewsletterModal.tsx

@@ -6,6 +6,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { X, Send, RefreshCw, CheckCircle2, AlertCircle, Mail, Globe, Users, Radio } from 'lucide-react';
+import { DomainPromptModal } from './DomainPromptModal';
 
 interface SendNewsletterModalProps {
     isOpen: boolean;
@@ -37,6 +38,10 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
     const [sendSuccess, setSendSuccess] = useState(false);
     const [sendError, setSendError] = useState<string | null>(null);
     const [resultDetails, setResultDetails] = useState<{ successCount: number; failedCount: number } | null>(null);
+    
+    // Domain prompt state
+    const [showDomainPrompt, setShowDomainPrompt] = useState(false);
+    const [isCheckingDomain, setIsCheckingDomain] = useState(false);
 
     useEffect(() => {
         if (isOpen) {
@@ -44,10 +49,11 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
             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;
@@ -61,6 +67,33 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
             }
         }
 
+        // 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: any) => 
+                    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);
@@ -71,13 +104,19 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
                 credentials: 'include',
                 body: JSON.stringify({ 
                     language, 
-                    testEmail: sendMode === 'test' ? testEmail : undefined 
+                    testEmail: sendMode === 'test' ? testEmail : undefined
                 }),
             });
 
             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');
             }
 
@@ -103,6 +142,43 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
         }
     };
 
+    const handleSaveDomain = async (domain: string) => {
+        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: any) => 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);
@@ -110,213 +186,223 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
     const noSubscribersError = sendMode === 'subscribers' && subscriberCount === 0;
 
     return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-            {/* Backdrop */}
-            <div 
-                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-                onClick={() => !isSending && onClose()}
-            />
-            
-            {/* Modal */}
-            <div className="relative w-full max-w-md mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden">
-                {/* Header */}
-                <div className="flex items-center justify-between px-8 py-6 border-b border-dashboard-border">
-                    <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center">
-                            <Send className="w-5 h-5 text-primary" />
-                        </div>
-                        <div>
-                            <h2 className="text-xl font-black text-dashboard-text uppercase tracking-tight">
-                                {isAlreadySent ? 'Resend' : 'Send'} Newsletter
-                            </h2>
-                            <p className="text-xs text-dashboard-text-secondary truncate max-w-[200px]">
-                                {newsletter.title}
-                            </p>
-                        </div>
-                    </div>
-                    <button
-                        onClick={() => !isSending && onClose()}
-                        disabled={isSending}
-                        className="p-2 rounded-full hover:bg-dashboard-border transition-colors"
-                    >
-                        <X size={20} className="text-dashboard-text-secondary" />
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="p-8">
-                    {isAlreadySent && (
-                        <div className="mb-4 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
-                            <div className="flex items-center gap-2 text-blue-700 dark:text-blue-400">
-                                <RefreshCw size={16} />
-                                <span className="text-xs font-bold uppercase">This newsletter was already sent - sending again</span>
+        <>
+            <div className="fixed inset-0 z-50 flex items-center justify-center">
+                {/* Backdrop */}
+                <div 
+                    className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                    onClick={() => !isSending && onClose()}
+                />
+                
+                {/* Modal */}
+                <div className="relative w-full max-w-md mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden">
+                    {/* Header */}
+                    <div className="flex items-center justify-between px-8 py-6 border-b border-dashboard-border">
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center">
+                                <Send className="w-5 h-5 text-primary" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-black text-dashboard-text uppercase tracking-tight">
+                                    {isAlreadySent ? 'Resend' : 'Send'} Newsletter
+                                </h2>
+                                <p className="text-xs text-dashboard-text-secondary truncate max-w-[200px]">
+                                    {newsletter.title}
+                                </p>
                             </div>
                         </div>
-                    )}
+                        <button
+                            onClick={() => !isSending && onClose()}
+                            disabled={isSending}
+                            className="p-2 rounded-full hover:bg-dashboard-border transition-colors"
+                        >
+                            <X size={20} className="text-dashboard-text-secondary" />
+                        </button>
+                    </div>
 
-                    {!newsletter.hasContent && (
-                        <div className="mb-4 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
-                            <div className="flex items-center gap-2 text-red-700 dark:text-red-400">
-                                <AlertCircle size={16} />
-                                <span className="text-xs font-bold uppercase">This newsletter has no content</span>
+                    {/* Content */}
+                    <div className="p-8">
+                        {isAlreadySent && (
+                            <div className="mb-4 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+                                <div className="flex items-center gap-2 text-blue-700 dark:text-blue-400">
+                                    <RefreshCw size={16} />
+                                    <span className="text-xs font-bold uppercase">This newsletter was already sent - sending again</span>
+                                </div>
                             </div>
-                        </div>
-                    )}
+                        )}
 
-                    <div className="space-y-4">
-                        {/* Send Mode Toggle */}
-                        <div>
-                            <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
-                                Send To
-                            </label>
-                            <div className="flex gap-2">
-                                <button
-                                    onClick={() => setSendMode('subscribers')}
-                                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
-                                        sendMode === 'subscribers'
-                                            ? 'bg-primary text-white'
-                                            : subscriberCount > 0
-                                                ? 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
-                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text-secondary opacity-50'
-                                    }`}
-                                >
-                                    <Users size={14} />
-                                    Subscribers
-                                    {subscriberCount > 0 && (
-                                        <span className="text-[10px] opacity-70">({subscriberCount})</span>
-                                    )}
-                                </button>
-                                <button
-                                    onClick={() => setSendMode('test')}
-                                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
-                                        sendMode === 'test'
-                                            ? 'bg-primary text-white'
-                                            : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
-                                    }`}
-                                >
-                                    <Mail size={14} />
-                                    Test
-                                </button>
+                        {!newsletter.hasContent && (
+                            <div className="mb-4 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+                                <div className="flex items-center gap-2 text-red-700 dark:text-red-400">
+                                    <AlertCircle size={16} />
+                                    <span className="text-xs font-bold uppercase">This newsletter has no content</span>
+                                </div>
                             </div>
-                        </div>
+                        )}
 
-                        {sendMode === 'test' && (
+                        <div className="space-y-4">
+                            {/* Send Mode Toggle */}
                             <div>
                                 <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
-                                    Test Email Address
+                                    Send To
                                 </label>
-                                <input
-                                    type="email"
-                                    value={testEmail}
-                                    onChange={(e) => {
-                                        setTestEmail(e.target.value);
-                                        setSendError(null);
-                                    }}
-                                    onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-                                    placeholder="your@email.com"
-                                    className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
-                                />
-                            </div>
-                        )}
-
-                        <div>
-                            <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
-                                <Globe size={12} className="inline mr-1" />
-                                Language
-                            </label>
-                            <div className="flex gap-2">
-                                {languages.map((lang) => (
+                                <div className="flex gap-2">
                                     <button
-                                        key={lang.code}
-                                        onClick={() => setLanguage(lang.code)}
-                                        className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
-                                            language === lang.code
+                                        onClick={() => setSendMode('subscribers')}
+                                        className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
+                                            sendMode === 'subscribers'
+                                                ? 'bg-primary text-white'
+                                                : subscriberCount > 0
+                                                    ? 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                                                    : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text-secondary opacity-50'
+                                        }`}
+                                    >
+                                        <Users size={14} />
+                                        Subscribers
+                                        {subscriberCount > 0 && (
+                                            <span className="text-[10px] opacity-70">({subscriberCount})</span>
+                                        )}
+                                    </button>
+                                    <button
+                                        onClick={() => setSendMode('test')}
+                                        className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
+                                            sendMode === 'test'
                                                 ? 'bg-primary text-white'
                                                 : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
                                         }`}
                                     >
-                                        {lang.label}
+                                        <Mail size={14} />
+                                        Test
                                     </button>
-                                ))}
+                                </div>
                             </div>
-                        </div>
 
-                        {sendError && (
-                            <div className="flex items-center gap-2 text-red-500 text-sm">
-                                <AlertCircle size={16} />
-                                {sendError}
-                            </div>
-                        )}
+                            {sendMode === 'test' && (
+                                <div>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        Test Email Address
+                                    </label>
+                                    <input
+                                        type="email"
+                                        value={testEmail}
+                                        onChange={(e) => {
+                                            setTestEmail(e.target.value);
+                                            setSendError(null);
+                                        }}
+                                        onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+                                        placeholder="your@email.com"
+                                        className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                    />
+                                </div>
+                            )}
 
-                        {noSubscribersError && (
-                            <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 text-sm">
-                                <AlertCircle size={16} />
-                                No subscribers found. Add subscribers or use Test mode.
+                            <div>
+                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                    <Globe size={12} className="inline mr-1" />
+                                    Language
+                                </label>
+                                <div className="flex gap-2">
+                                    {languages.map((lang) => (
+                                        <button
+                                            key={lang.code}
+                                            onClick={() => setLanguage(lang.code)}
+                                            className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${
+                                                language === lang.code
+                                                    ? 'bg-primary text-white'
+                                                    : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'
+                                            }`}
+                                        >
+                                            {lang.label}
+                                        </button>
+                                    ))}
+                                </div>
                             </div>
-                        )}
 
-                        {sendSuccess && resultDetails && (
-                            <div className="flex items-center gap-2 text-green-600 dark:text-green-400 text-sm">
-                                <CheckCircle2 size={16} />
-                                {sendMode === 'test' 
-                                    ? `Test newsletter sent successfully!`
-                                    : `Sent to ${resultDetails.successCount} subscriber${resultDetails.successCount !== 1 ? 's' : ''}${resultDetails.failedCount > 0 ? ` (${resultDetails.failedCount} failed)` : ''}`
-                                }
-                            </div>
-                        )}
+                            {sendError && (
+                                <div className="flex items-center gap-2 text-red-500 text-sm">
+                                    <AlertCircle size={16} />
+                                    {sendError}
+                                </div>
+                            )}
 
-                        {!sendSuccess && (
-                            <p className="text-xs text-dashboard-text-secondary">
-                                {sendMode === 'subscribers'
-                                    ? `This will send the newsletter to all ${subscriberCount} active subscriber${subscriberCount !== 1 ? 's' : ''}.`
-                                    : 'Send a test newsletter to verify the email looks correct.'
-                                }
-                            </p>
-                        )}
+                            {noSubscribersError && (
+                                <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 text-sm">
+                                    <AlertCircle size={16} />
+                                    No subscribers found. Add subscribers or use Test mode.
+                                </div>
+                            )}
+
+                            {sendSuccess && resultDetails && (
+                                <div className="flex items-center gap-2 text-green-600 dark:text-green-400 text-sm">
+                                    <CheckCircle2 size={16} />
+                                    {sendMode === 'test' 
+                                        ? `Test newsletter sent successfully!`
+                                        : `Sent to ${resultDetails.successCount} subscriber${resultDetails.successCount !== 1 ? 's' : ''}${resultDetails.failedCount > 0 ? ` (${resultDetails.failedCount} failed)` : ''}`
+                                    }
+                                </div>
+                            )}
+
+                            {!sendSuccess && (
+                                <p className="text-xs text-dashboard-text-secondary">
+                                    {sendMode === 'subscribers'
+                                        ? `This will send the newsletter to all ${subscriberCount} active subscriber${subscriberCount !== 1 ? 's' : ''}.`
+                                        : 'Send a test newsletter to verify the email looks correct.'
+                                    }
+                                </p>
+                            )}
+                        </div>
                     </div>
-                </div>
 
-                {/* Footer */}
-                <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50">
-                    <button
-                        onClick={onClose}
-                        disabled={isSending}
-                        className="px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border"
-                    >
-                        {sendSuccess ? 'Close' : 'Cancel'}
-                    </button>
-                    <button
-                        onClick={handleSend}
-                        disabled={isSending || sendSuccess || !canSend}
-                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${
-                            isSending 
-                                ? 'bg-neutral-400 text-white cursor-not-allowed'
-                                : sendSuccess
-                                    ? 'bg-green-600 text-white'
-                                    : !canSend
-                                        ? 'bg-neutral-400 text-white cursor-not-allowed'
-                                        : 'bg-primary text-white hover:bg-primary/90'
-                        }`}
-                    >
-                        {isSending ? (
-                            <>
-                                <RefreshCw className="w-4 h-4 animate-spin" />
-                                Sending...
-                            </>
-                        ) : sendSuccess ? (
-                            <>
-                                <CheckCircle2 className="w-4 h-4" />
-                                Sent!
-                            </>
-                        ) : (
-                            <>
-                                <Send className="w-4 h-4" />
-                                {sendMode === 'subscribers' ? 'Send to Subscribers' : 'Send Test'}
-                            </>
-                        )}
-                    </button>
+                    {/* Footer */}
+                    <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50">
+                        <button
+                            onClick={onClose}
+                            disabled={isSending}
+                            className="px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border"
+                        >
+                            {sendSuccess ? 'Close' : 'Cancel'}
+                        </button>
+                        <button
+                            onClick={() => handleSend()}
+                            disabled={isSending || sendSuccess || !canSend || 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'
+                                    : sendSuccess
+                                        ? 'bg-green-600 text-white'
+                                        : !canSend
+                                            ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                            : 'bg-primary text-white hover:bg-primary/90'
+                            }`}
+                        >
+                            {isSending || isCheckingDomain ? (
+                                <>
+                                    <RefreshCw className="w-4 h-4 animate-spin" />
+                                    {isCheckingDomain ? 'Checking...' : 'Sending...'}
+                                </>
+                            ) : sendSuccess ? (
+                                <>
+                                    <CheckCircle2 className="w-4 h-4" />
+                                    Sent!
+                                </>
+                            ) : (
+                                <>
+                                    <Send className="w-4 h-4" />
+                                    {sendMode === 'subscribers' ? 'Send to Subscribers' : 'Send Test'}
+                                </>
+                            )}
+                        </button>
+                    </div>
                 </div>
             </div>
-        </div>
+
+            {/* Domain Prompt Modal */}
+            <DomainPromptModal
+                isOpen={showDomainPrompt}
+                onClose={() => setShowDomainPrompt(false)}
+                onSave={handleSaveDomain}
+                language={language}
+            />
+        </>
     );
 }

package/src/views/components/SmtpSettingsModal.tsx

@@ -16,6 +16,7 @@ interface SmtpSettings {
     fromName: string;
     primaryLanguage?: string;
     logoUrl?: string;
+    unsubscribeTranslations?: Record<string, string>;
 }
 
 interface SmtpSettingsModalProps {
@@ -33,6 +34,11 @@ export function SmtpSettingsModal({ isOpen, onClose }: SmtpSettingsModalProps) {
         fromName: '',
         primaryLanguage: 'en',
         logoUrl: '',
+        unsubscribeTranslations: {
+            en: 'Unsubscribe',
+            nl: 'Afmelden',
+            sv: 'Avanmälan',
+        },
     });
     const [smtpLoading, setSmtpLoading] = useState(true);
     const [smtpSaving, setSmtpSaving] = useState(false);
@@ -66,6 +72,11 @@ export function SmtpSettingsModal({ isOpen, onClose }: SmtpSettingsModalProps) {
                     fromName: data.fromName || '',
                     primaryLanguage: data.primaryLanguage || 'en',
                     logoUrl: data.logoUrl || '',
+                    unsubscribeTranslations: data.unsubscribeTranslations || {
+                        en: 'Unsubscribe',
+                        nl: 'Afmelden',
+                        sv: 'Avanmälan',
+                    },
                 });
                 setFromEmailEditable(!!data.from && data.from !== data.user);
             }