@jhits/plugin-newsletter 0.0.14 → 0.0.16

package/src/views/components/NewsletterCard.tsx

@@ -0,0 +1,212 @@
+/**
+ * Newsletter Card Component
+ * Modern, distinctive card design for newsletters
+ */
+
+'use client';
+
+import React from 'react';
+import { Trash2, Edit2, Send, Check } from 'lucide-react';
+import { NewsletterListItem, NewsletterStatus } 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;
+}
+
+function getStatusConfig(status: NewsletterStatus) {
+    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: Record<string, string> = {
+    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: Record<string, string> = {
+    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: string, size: number = 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 
+}: NewsletterCardProps) {
+    const statusConfig = getStatusConfig(newsletter.status);
+    const languages = newsletter.availableLanguages || [];
+    const sendHistory = newsletter.sendHistory || [];
+
+    const sentLanguages = [...new Set(sendHistory.map(h => h.language))];
+
+    return (
+        <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">
+            <div className={`h-1.5 ${statusConfig.bg}`} />
+            
+            <div className="p-5">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-2">
+                        <span className={`text-[10px] font-black uppercase tracking-widest ${statusConfig.text}`}>
+                            {statusConfig.label}
+                        </span>
+                    </div>
+                    
+                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <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'}
+                        >
+                            <Send size={16} />
+                        </button>
+                        <button
+                            onClick={() => onEdit(newsletter.id)}
+                            className="p-2 rounded-lg text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
+                            title="Edit"
+                        >
+                            <Edit2 size={16} />
+                        </button>
+                        <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"
+                        >
+                            <Trash2 size={16} />
+                        </button>
+                    </div>
+                </div>
+
+                <h3 className="text-lg font-bold text-dashboard-text mb-4 line-clamp-2 group-hover:text-primary transition-colors">
+                    {newsletter.title || 'Untitled Newsletter'}
+                </h3>
+
+                <div className="space-y-2">
+                    {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 (
+                            <div 
+                                key={lang}
+                                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,
+                                }}
+                            >
+                                {hasBeenSent && (
+                                    <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">
+                                        <span className="text-[10px] font-bold text-white">{langHistory.length}</span>
+                                    </div>
+                                )}
+                                
+                                <div className="flex items-center gap-3 flex-1 min-w-0">
+                                    <img 
+                                        src={getFlagUrl(lang, 28)} 
+                                        alt={LANGUAGE_NAMES[lang] || lang}
+                                        className="w-7 h-5 rounded object-cover shrink-0"
+                                        loading="lazy"
+                                    />
+                                </div>
+                                
+                                <div className="flex items-center gap-4 text-xs shrink-0">
+                                    {hasBeenSent && lastLangSend ? (
+                                        <>
+                                            <div className="text-dashboard-text-secondary">
+                                                {formatDateTime(lastLangSend.sentAt)}
+                                            </div>
+                                            <div className="text-dashboard-text-secondary">
+                                                {lastLangSend.recipientCount} recipients
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <span className="text-dashboard-text-secondary">Not sent</span>
+                                    )}
+                                </div>
+
+                                {/* Hover tooltip with subject */}
+                                <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">
+                                    <div className="font-bold mb-1">{LANGUAGE_NAMES[lang] || lang.toUpperCase()}</div>
+                                    <div className="text-neutral-300 break-words">{langSubject || 'Untitled'}</div>
+                                    <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" />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/views/components/NewsletterGrid.tsx

@@ -0,0 +1,48 @@
+/**
+ * Newsletter Grid View Component
+ * Card-based grid layout for newsletters
+ */
+
+'use client';
+
+import React from 'react';
+import { NewsletterListItem } from '../../types/newsletter';
+import { NewsletterCard } from './NewsletterCard';
+
+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 function NewsletterGrid({ 
+    newsletters, 
+    onEdit, 
+    onSend, 
+    onDelete, 
+    formatDateTime,
+    locale 
+}: NewsletterGridProps) {
+    if (newsletters.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {newsletters.map((newsletter) => (
+                <NewsletterCard
+                    key={newsletter.id}
+                    newsletter={newsletter}
+                    onEdit={onEdit}
+                    onSend={onSend}
+                    onDelete={onDelete}
+                    formatDateTime={formatDateTime}
+                    locale={locale}
+                />
+            ))}
+        </div>
+    );
+}

package/src/views/components/SendNewsletterModal.tsx

@@ -127,7 +127,7 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
                         </div>
                         <div>
                             <h2 className="text-xl font-black text-dashboard-text uppercase tracking-tight">
-                                Send Newsletter
+                                {isAlreadySent ? 'Resend' : 'Send'} Newsletter
                             </h2>
                             <p className="text-xs text-dashboard-text-secondary truncate max-w-[200px]">
                                 {newsletter.title}
@@ -146,10 +146,10 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
                 {/* Content */}
                 <div className="p-8">
                     {isAlreadySent && (
-                        <div className="mb-4 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
-                            <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400">
-                                <AlertCircle size={16} />
-                                <span className="text-xs font-bold uppercase">This newsletter has already been sent</span>
+                        <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>
                     )}