@jhits/plugin-newsletter 0.0.14 → 0.0.16

package/src/api/handlers/send-newsletter.ts

@@ -79,8 +79,22 @@ export async function POST_SEND_NEWSLETTER(
             );
         }
 
-        const blocks = newsletter.blocks || [];
-        const metadata = newsletter.metadata || {};
+        // Get language-specific content if available
+        const languages = newsletter.languages || {};
+        const primaryLanguage = newsletter.metadata?.lang || 'en';
+        
+        let blocks = newsletter.blocks || [];
+        let metadata = newsletter.metadata || {};
+        
+        // If the requested language has content, use it
+        if (language && languages[language]) {
+            blocks = languages[language].blocks || [];
+            metadata = { ...metadata, ...languages[language].metadata };
+        } else if (language !== primaryLanguage && languages[primaryLanguage]) {
+            // Fall back to primary language content
+            blocks = languages[primaryLanguage].blocks || [];
+            metadata = { ...metadata, ...languages[primaryLanguage].metadata };
+        }
 
         if (!blocks || blocks.length === 0) {
             return NextResponse.json(
@@ -150,13 +164,18 @@ export async function POST_SEND_NEWSLETTER(
             recipientEmails = [testEmail];
             recipientCount = 1;
         } else {
-            const subscriberList = await subscribers.find({ status: 'active' }).toArray();
+            // Filter subscribers by the selected language
+            const subscriberFilter: any = { status: 'active' };
+            if (language) {
+                subscriberFilter.language = language;
+            }
+            const subscriberList = await subscribers.find(subscriberFilter).toArray();
             recipientEmails = subscriberList.map((s: any) => s.email);
             recipientCount = recipientEmails.length;
 
             if (recipientCount === 0) {
                 return NextResponse.json(
-                    { error: 'No active subscribers found' },
+                    { error: `No active subscribers found for language: ${language?.toUpperCase() || 'en'}` },
                     { status: 400 }
                 );
             }
@@ -211,12 +230,22 @@ export async function POST_SEND_NEWSLETTER(
         }
 
         if (!isTest && successCount > 0) {
+            const sendHistoryEntry = {
+                language,
+                sentAt: new Date().toISOString(),
+                recipientCount: successCount,
+                authorId: userId,
+            };
+            
             await newsletters.updateOne(filter, {
                 $set: {
                     'publication.status': 'sent',
                     'publication.sentDate': new Date().toISOString(),
                     'publication.recipientCount': successCount,
                     updatedAt: new Date().toISOString(),
+                },
+                $push: {
+                    sendHistory: sendHistoryEntry,
                 }
             });
         }

package/src/api/handlers/welcome-email.ts

@@ -101,7 +101,7 @@ export async function GET_WELCOME_EMAIL(
                 title: 'Welcome Email',
                 language,
                 blocks: primaryContent.blocks,
-                metadata: primaryContent.metadata,
+                metadata: { ...primaryContent.metadata, lang: language },
                 languages,
                 isCopy: true,
                 copyFrom: primaryLanguage,
@@ -114,7 +114,10 @@ export async function GET_WELCOME_EMAIL(
             title: 'Welcome Email',
             language,
             blocks: languages[language as keyof WelcomeEmailLanguages]?.blocks || primaryContent.blocks,
-            metadata: languages[language as keyof WelcomeEmailLanguages]?.metadata || primaryContent.metadata,
+            metadata: { 
+                ...(languages[language as keyof WelcomeEmailLanguages]?.metadata || primaryContent.metadata),
+                lang: language 
+            },
             languages,
             isCopy: false,
         });

package/src/index.tsx

@@ -175,10 +175,13 @@ export default function NewsletterPlugin(props: PluginProps) {
                             apiData.metadata.lang = extraData.language;
                         }
                         
+                        // Build URL with language param if provided
+                        const langParam = extraData?.language ? `?language=${extraData.language}` : '';
+                        
                         // If we have an id, try to update first
                         if (originalId) {
                             console.log('[NewsletterPlugin] Attempting to update newsletter with id:', originalId);
-                            const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalId}`, {
+                            const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalId}${langParam}`, {
                                 method: 'PUT',
                                 headers: { 'Content-Type': 'application/json' },
                                 credentials: 'include',

package/src/types/newsletter.ts

@@ -47,6 +47,26 @@ export interface NewsletterPublicationData {
     
     /** Last modified date */
     updatedAt?: string;
+
+    /** Recipient count for last send */
+    recipientCount?: number;
+}
+
+/**
+ * Send history entry for tracking sends per language
+ */
+export interface SendHistoryEntry {
+    /** Language code sent to */
+    language: string;
+    
+    /** When this was sent */
+    sentAt: string;
+    
+    /** Number of recipients */
+    recipientCount: number;
+    
+    /** Who sent it (author ID) */
+    authorId?: string;
 }
 
 /**
@@ -69,6 +89,21 @@ export interface NewsletterMetadata {
     };
 }
 
+/**
+ * Newsletter language content (blocks + metadata per language)
+ */
+export interface NewsletterLanguageContent {
+    blocks: Block[];
+    metadata: NewsletterMetadata;
+}
+
+/**
+ * Languages object storing content per language
+ */
+export interface NewsletterLanguages {
+    [key: string]: NewsletterLanguageContent;
+}
+
 /**
  * Complete Newsletter Structure
  * This is the headless JSON structure stored in the database
@@ -89,6 +124,12 @@ export interface Newsletter {
     /** Publication data */
     publication: NewsletterPublicationData;
     
+    /** Send history for tracking multiple sends per language */
+    sendHistory?: SendHistoryEntry[];
+    
+    /** Content per language (for multi-language newsletters) */
+    languages?: NewsletterLanguages;
+    
     /** Additional metadata */
     metadata: NewsletterMetadata;
     
@@ -118,6 +159,9 @@ export interface NewsletterListItem {
     updatedAt: string;
     recipientCount?: number;
     hidden?: boolean;
+    sendHistory?: SendHistoryEntry[];
+    availableLanguages?: string[];
+    languages?: NewsletterLanguages;
 }
 
 /**

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -46,15 +46,26 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
     // Get registered blocks
     const registeredBlocks = useRegisteredBlocks();
 
-    // Newsletter loading - use current language for welcome email (wait until language settings are loaded)
+    // Newsletter loading - wait for language settings to be loaded first
     const { isLoadingNewsletter } = useNewsletterLoader(
         newsletterId,
         state.newsletterId,
-        (newsletter) => {
+        (newsletter: any) => {
             helpers.loadNewsletter(newsletter);
-            // Set current language from loaded newsletter metadata
-            if (newsletter.metadata?.lang && !isWelcomeEmail) {
-                setCurrentLanguage(newsletter.metadata.lang);
+            // Set current language from loaded newsletter (check both metadata.lang and top-level language)
+            const loadedLanguage = newsletter.metadata?.lang || newsletter.language;
+            if (loadedLanguage) {
+                setCurrentLanguage(loadedLanguage);
+            }
+            // Update available languages from newsletter's languages object (for regular newsletters)
+            if (!isWelcomeEmail && newsletter.languages && Object.keys(newsletter.languages).length > 0) {
+                const langs = Object.keys(newsletter.languages);
+                setAvailableLanguages(langs);
+            }
+            // For welcome emails, also update available languages
+            if (isWelcomeEmail && newsletter.languages && Object.keys(newsletter.languages).length > 0) {
+                const langs = Object.keys(newsletter.languages);
+                setAvailableLanguages(langs);
             }
             setTimeout(() => {
                 dispatch({ type: 'MARK_CLEAN' });
@@ -108,8 +119,16 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
         setCurrentLanguage(newLanguage);
         
         // Reload with new language
-        const response = await fetch(`/api/plugin-newsletter/welcome-email?language=${newLanguage}`);
-        if (response.ok) {
+        let response;
+        if (isWelcomeEmail) {
+            response = await fetch(`/api/plugin-newsletter/welcome-email?language=${newLanguage}`);
+        } else if (newsletterId) {
+            response = await fetch(`/api/plugin-newsletter/newsletters/${newsletterId}?language=${newLanguage}`);
+        } else {
+            return;
+        }
+        
+        if (response && response.ok) {
             const newsletter = await response.json();
             helpers.loadNewsletter(newsletter);
             dispatch({ type: 'MARK_CLEAN' });
@@ -218,7 +237,8 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
         setIsSaving(true);
         setSaveError(null);
         try {
-            await helpers.save(isWelcomeEmail ? { language: currentLanguage } : undefined);
+            // Always pass language for saving (both welcome email and regular newsletters)
+            await helpers.save({ language: currentLanguage });
             setIsSaving(false);
         } catch (error: any) {
             console.error('[CanvasEditorView] Save error:', error);

package/src/views/CanvasEditor/hooks/useNewsletterLoader.ts

@@ -17,14 +17,13 @@ export function useNewsletterLoader(
             return;
         }
 
-        // For welcome emails, wait until language is provided
-        if (isWelcomeEmail && !language) {
+        // Wait until language is provided (for both welcome emails and regular newsletters)
+        if (!language) {
             return;
         }
 
         // Skip if we have a regular newsletter id but no id yet, or if this is welcome email mode
         if (isWelcomeEmail) {
-            // Load welcome email with language
             // Load welcome email with language
             const loadWelcomeEmail = async () => {
                 try {
@@ -51,7 +50,8 @@ export function useNewsletterLoader(
             const loadNewsletterData = async () => {
                 try {
                     setIsLoadingNewsletter(true);
-                    const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletterId}`);
+                    const langParam = language ? `?language=${language}` : '';
+                    const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletterId}${langParam}`);
                     if (!response.ok) {
                         throw new Error('Failed to load newsletter');
                     }

package/src/views/NewsletterManager.tsx

@@ -6,11 +6,13 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users } from 'lucide-react';
-import { NewsletterListItem, NewsletterStatus } from '../types/newsletter';
+import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users, Grid, List } from 'lucide-react';
+import { NewsletterListItem, NewsletterStatus, SendHistoryEntry } from '../types/newsletter';
 import { SmtpSettingsModal } from './components/SmtpSettingsModal';
 import { TestEmailModal } from './components/TestEmailModal';
 import { SendNewsletterModal } from './components/SendNewsletterModal';
+import { NewsletterGrid } from './components/NewsletterGrid';
+import { NewsletterCard } from './components/NewsletterCard';
 
 export interface NewsletterManagerViewProps {
     siteId: string;
@@ -36,6 +38,8 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
     const [newsletters, setNewsletters] = useState<NewsletterListItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [statusFilter, setStatusFilter] = useState<NewsletterStatus | 'all'>('all');
+    const [primaryLanguage, setPrimaryLanguage] = useState<string>('en');
+    const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
     const [showSmtpModal, setShowSmtpModal] = useState(false);
     const [showTestEmailModal, setShowTestEmailModal] = useState(false);
     const [showSendModal, setShowSendModal] = useState(false);
@@ -47,12 +51,34 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
     const [welcomeEmailLastUpdated, setWelcomeEmailLastUpdated] = useState<string | null>(null);
     const [subscriberCount, setSubscriberCount] = useState(0);
 
+    // Hover state for language tooltip
+    const [hoveredNewsletter, setHoveredNewsletter] = useState<{ id: string; x: number; y: number } | null>(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) {
@@ -67,7 +93,7 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
             }
         };
         fetchNewsletters();
-    }, []);
+    }, [primaryLanguage]);
 
     // Fetch welcome email status
     useEffect(() => {
@@ -153,10 +179,6 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
             setShowSmtpModal(true);
             return;
         }
-        if (newsletter.status === 'sent') {
-            alert('This newsletter has already been sent');
-            return;
-        }
 
         try {
             const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletter.id}/send`, {
@@ -220,6 +242,62 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
         });
     };
 
+    // Format date with time
+    const formatDateTime = (dateString: string | undefined) => {
+        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: SendHistoryEntry[], language: string) => {
+        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: string[], sendHistory: SendHistoryEntry[]) => {
+        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: SendHistoryEntry[] | undefined) => {
+        if (!sendHistory || sendHistory.length === 0) return null;
+        
+        const lastEntry = sendHistory[sendHistory.length - 1];
+        const langLabel = lastEntry.language.toUpperCase();
+        const dateStr = formatDate(lastEntry.sentAt);
+        
+        return (
+            <div className="flex items-center gap-2">
+                <span className="text-[10px] font-black px-2 py-0.5 rounded bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20">
+                    {langLabel}
+                </span>
+                <span className="text-xs text-dashboard-text-secondary">
+                    {dateStr}
+                </span>
+                {sendHistory.length > 1 && (
+                    <span className="text-[10px] text-dashboard-text-secondary" title="Total sends">
+                        ({sendHistory.length})
+                    </span>
+                )}
+            </div>
+        );
+    };
+
     return (
         <>
             <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
@@ -290,6 +368,32 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                             <option value="archived">Archived</option>
                         </select>
 
+                        {/* View Toggle */}
+                        <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl p-1 gap-1">
+                            <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"
+                            >
+                                <Grid size={16} />
+                            </button>
+                            <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"
+                            >
+                                <List size={16} />
+                            </button>
+                        </div>
+
                         {/* Create Button */}
                         <button
                             onClick={handleCreate}
@@ -372,6 +476,15 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                 Create Your First Newsletter
                             </button>
                         </div>
+                    ) : viewMode === 'grid' ? (
+                        <NewsletterGrid
+                            newsletters={filteredNewsletters}
+                            onEdit={handleEdit}
+                            onSend={handleSend}
+                            onDelete={handleDelete}
+                            formatDateTime={formatDateTime}
+                            locale={locale}
+                        />
                     ) : (
                         <div className="overflow-x-auto">
                             <table className="w-full text-left border-collapse">
@@ -380,6 +493,7 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                         <th className="px-8 py-5">Title</th>
                                         <th className="px-8 py-5">Subject</th>
                                         <th className="px-8 py-5">Status</th>
+                                        <th className="px-8 py-5">Last Sent</th>
                                         <th className="px-8 py-5 text-right">Updated</th>
                                         <th className="px-8 py-5 text-right">Actions</th>
                                     </tr>
@@ -395,9 +509,22 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                                     <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">
                                                         <Mail size={18} />
                                                     </div>
-                                                    <span className="text-sm font-medium text-dashboard-text tracking-tight">
-                                                        {newsletter.title}
-                                                    </span>
+                                                    <div className="relative">
+                                                        <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)}
+                                                        >
+                                                            {newsletter.title}
+                                                        </span>
+                                                    </div>
                                                 </div>
                                             </td>
                                             <td className="px-8 py-5">
@@ -410,6 +537,11 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                                     {newsletter.status}
                                                 </span>
                                             </td>
+                                            <td className="px-8 py-5">
+                                                {formatLastSent(newsletter.sendHistory) || (
+                                                    <span className="text-xs text-dashboard-text-secondary">Never</span>
+                                                )}
+                                            </td>
                                             <td className="px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium">
                                                 <div className="flex items-center justify-end gap-2">
                                                     <Calendar size={14} />
@@ -418,15 +550,13 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                             </td>
                                             <td className="px-8 py-5 text-right">
                                                 <div className="flex items-center justify-end gap-2">
-                                                    {newsletter.status !== 'sent' && (
-                                                        <button
-                                                            onClick={() => handleSend(newsletter)}
-                                                            className="p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors"
-                                                            title="Send newsletter"
-                                                        >
-                                                            <Send size={18} />
-                                                        </button>
-                                                    )}
+                                                    <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'}
+                                                    >
+                                                        <Send size={18} />
+                                                    </button>
                                                     <button
                                                         onClick={() => handleEdit(newsletter.id)}
                                                         className="p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors"
@@ -478,6 +608,59 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                 subscriberCount={subscriberCount}
             />
         )}
+
+        {/* Fixed Language Tooltip */}
+        {hoveredNewsletter && (() => {
+            const tooltipNewsletter = newsletters.find(n => n.id === hoveredNewsletter.id);
+            if (!tooltipNewsletter?.languages) return null;
+            const tooltipLanguages = tooltipNewsletter.languages;
+            const tooltipSendHistory = tooltipNewsletter.sendHistory || [];
+            
+            return (
+                <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%)'
+                    }}
+                >
+                    <div className="text-[10px] uppercase tracking-wider text-dashboard-text-secondary font-bold mb-2">
+                        Translations & Send History
+                    </div>
+                    {sortLanguages(Object.keys(tooltipLanguages), tooltipSendHistory).map((lang: string) => {
+                        const data = tooltipLanguages[lang];
+                        const langSendHistory = getSendHistoryForLanguage(tooltipSendHistory, lang);
+                        const lastSend = langSendHistory[0];
+                        
+                        return (
+                            <div key={lang} className="py-2 border-b border-dashboard-border last:border-0">
+                                <div className="flex items-center justify-between">
+                                    <div className="text-[10px] font-black uppercase text-primary">{lang}</div>
+                                    {lastSend && (
+                                        <div className="text-[9px] text-green-600 dark:text-green-400 flex items-center gap-1">
+                                            <Send size={10} />
+                                            Sent
+                                        </div>
+                                    )}
+                                </div>
+                                <div className="text-xs text-dashboard-text truncate">{data?.metadata?.subject || 'No subject'}</div>
+                                {lastSend && (
+                                    <div className="text-[9px] text-dashboard-text-secondary mt-1">
+                                        {formatDateTime(lastSend.sentAt)} • {lastSend.recipientCount} recipients
+                                    </div>
+                                )}
+                                {langSendHistory.length > 1 && (
+                                    <div className="text-[9px] text-dashboard-text-secondary mt-0.5">
+                                        + {langSendHistory.length - 1} more send(s)
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            );
+        })()}
         </>
     );
 }