@jhits/plugin-newsletter 0.0.1

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@jhits/plugin-newsletter",
+  "version": "0.0.1",
+  "description": "Newsletter management and email delivery plugin for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "@jhits/plugin-core": "^0.0.1",
+    "lucide-react": "^0.562.0",
+    "mongodb": "^7.0.0",
+    "next-auth": "^4.24.13",
+    "nodemailer": "^7.0.12"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.27",
+    "@types/nodemailer": "^7.0.4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ]
+}

package/src/api/handler.ts

@@ -0,0 +1,354 @@
+/**
+ * Newsletter API Handler
+ * Handles all newsletter-related API requests
+ */
+
+'use server';
+
+import { NextRequest, NextResponse } from 'next/server';
+import { NewsletterApiConfig } from '../types/newsletter';
+import nodemailer from 'nodemailer';
+
+/**
+ * GET /api/plugin-newsletter/subscribers - List all subscribers
+ */
+export async function GET_SUBSCRIBERS(
+    req: NextRequest,
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId?.(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const subscribers = db.collection('subscribers');
+
+        const subscriberList = await subscribers
+            .find({})
+            .sort({ subscribedAt: -1 })
+            .toArray();
+
+        return NextResponse.json(subscriberList);
+    } catch (error: any) {
+        console.error('[NewsletterAPI] GET_SUBSCRIBERS error:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch subscribers', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-newsletter/subscribers - Subscribe new email
+ */
+export async function POST_SUBSCRIBE(
+    req: NextRequest,
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    try {
+        const body = await req.json();
+        const { email, language } = body;
+
+        if (!email || !email.includes('@')) {
+            return NextResponse.json(
+                { error: 'Invalid email address' },
+                { status: 400 }
+            );
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const subscribers = db.collection('subscribers');
+
+        // Check if already subscribed
+        const existing = await subscribers.findOne({ email: email.toLowerCase() });
+        if (existing) {
+            return NextResponse.json(
+                { error: 'You are already subscribed!' },
+                { status: 409 }
+            );
+        }
+
+        // Add subscriber
+        await subscribers.insertOne({
+            email: email.toLowerCase(),
+            language: language || 'en',
+            subscribedAt: new Date(),
+            status: 'active',
+        });
+
+        // Send welcome email if configured
+        if (config.emailConfig) {
+            const headers = await req.headers;
+            const host = headers.get('host') || undefined;
+            await sendWelcomeEmail(config, email, language || 'en', host);
+        }
+
+        return NextResponse.json({ message: 'Successfully subscribed' }, { status: 201 });
+    } catch (error: any) {
+        console.error('[NewsletterAPI] POST_SUBSCRIBE error:', error);
+        return NextResponse.json(
+            { error: 'Failed to subscribe', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * GET /api/plugin-newsletter/subscribers/[email] - Get specific subscriber
+ */
+export async function GET_SUBSCRIBER(
+    req: NextRequest,
+    email: string,
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId?.(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const subscribers = db.collection('subscribers');
+
+        const subscriber = await subscribers.findOne({ email: email.toLowerCase() });
+        if (!subscriber) {
+            return NextResponse.json(
+                { error: 'Subscriber not found' },
+                { status: 404 }
+            );
+        }
+
+        return NextResponse.json(subscriber);
+    } catch (error: any) {
+        console.error('[NewsletterAPI] GET_SUBSCRIBER error:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch subscriber', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * DELETE /api/plugin-newsletter/subscribers/[email] - Unsubscribe/delete subscriber
+ */
+export async function DELETE_SUBSCRIBER(
+    req: NextRequest,
+    email: string,
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId?.(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const subscribers = db.collection('subscribers');
+
+        const result = await subscribers.deleteOne({ email: email.toLowerCase() });
+        if (result.deletedCount === 0) {
+            return NextResponse.json(
+                { error: 'Subscriber not found' },
+                { status: 404 }
+            );
+        }
+
+        return NextResponse.json({ message: 'Subscriber successfully removed' });
+    } catch (error: any) {
+        console.error('[NewsletterAPI] DELETE_SUBSCRIBER error:', error);
+        return NextResponse.json(
+            { error: 'Failed to delete subscriber', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * GET /api/plugin-newsletter/settings - Get newsletter settings
+ */
+export async function GET_SETTINGS(
+    req: NextRequest,
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId?.(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const newsletters = db.collection('newsletters');
+
+        const settings = await newsletters.findOne({ id: 'welcome_automation' });
+        return NextResponse.json(settings || {
+            id: 'welcome_automation',
+            languages: {
+                nl: { title: '', message: '' },
+                en: { title: '', message: '' },
+                sv: { title: '', message: '' },
+            },
+        });
+    } catch (error: any) {
+        console.error('[NewsletterAPI] GET_SETTINGS error:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch settings', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-newsletter/settings - Update newsletter settings
+ */
+export async function POST_SETTINGS(
+    req: NextRequest,
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId?.(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await req.json();
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const newsletters = db.collection('newsletters');
+
+        await newsletters.updateOne(
+            { id: 'welcome_automation' },
+            {
+                $set: {
+                    id: 'welcome_automation',
+                    languages: body.languages || {},
+                    updatedAt: new Date(),
+                },
+            },
+            { upsert: true }
+        );
+
+        return NextResponse.json({ success: true, message: 'Settings updated successfully' });
+    } catch (error: any) {
+        console.error('[NewsletterAPI] POST_SETTINGS error:', error);
+        return NextResponse.json(
+            { error: 'Failed to update settings', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * Send welcome email to new subscriber
+ */
+async function sendWelcomeEmail(
+    config: NewsletterApiConfig,
+    email: string,
+    language: string,
+    host?: string
+): Promise<void> {
+    if (!config.emailConfig) return;
+
+    try {
+        const transporter = nodemailer.createTransport({
+            host: config.emailConfig.host,
+            port: config.emailConfig.port,
+            secure: true,
+            auth: {
+                user: config.emailConfig.user,
+                pass: config.emailConfig.password,
+            },
+            connectionTimeout: 10000,
+        });
+
+        const baseUrl = host
+            ? (host.includes('localhost') ? 'http' : 'https') + '://' + host
+            : config.baseUrl || 'https://bya.jorishummel.com';
+
+        const slugs: Record<string, string> = {
+            sv: '/avmälla',
+            nl: '/afmelden',
+            en: '/unsubscribe',
+        };
+        const slug = slugs[language] || slugs.en;
+        const unsubscribeUrl = `${baseUrl}${slug}?email=${encodeURIComponent(email)}`;
+
+        const isDutch = language === 'nl';
+        const message = isDutch
+            ? `Bedankt dat je deel uitmaakt van de **Botanics & You** community.\n\n` +
+              `Wij geloven dat de natuur alles biedt wat we werkelijk nodig hebben. Terwijl we achter de schermen hard werken aan de lancering, nemen we je graag mee op reis door de wereld van kruiden en natuurlijke vitaliteit.\n\n` +
+              `**Wat kun je van ons verwachten:**\n` +
+              `• Exclusieve updates over onze lancering\n` +
+              `• Inzichten in de kracht van lokale kruiden\n` +
+              `• Tips voor een diepere verbinding met de natuur\n\n` +
+              `Bedankt voor je geduld en interesse in een natuurlijke manier van leven. We spreken je snel!`
+            : `Thank you for joining the **Botanics & You** community.\n\n` +
+              `We believe that nature provides everything we truly need. While we work hard behind the scenes for our launch, we look forward to taking you on a journey through the world of herbs and natural vitality.\n\n` +
+              `**What to expect from us:**\n` +
+              `• Exclusive updates on our upcoming launch\n` +
+              `• Insights into the healing properties of local herbs\n` +
+              `• Tips for restoring your connection with nature\n\n` +
+              `Thank you for your patience and your interest in a more natural way of living. We'll be in touch soon!`;
+
+        const formattedMessage = message
+            .replace(/\n/g, '<br/>')
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/• (.*?)(<br\/>|$)/g, '<div style="margin-left: 10px; margin-bottom: 5px;">• $1</div>');
+
+        const html = `
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+            <style>
+              body { background-color: #faf9f6; margin: 0; padding: 0; font-family: 'Georgia', serif; }
+              .container { max-width: 600px; margin: 20px auto; background-color: #ffffff; border-radius: 40px; border: 1px solid #1a2e260d; overflow: hidden; }
+              .header { padding: 40px 0 20px 0; text-align: center; }
+              .logo { width: 180px; height: auto; }
+              .content { padding: 0 50px 40px 50px; color: #1a2e26; line-height: 1.8; font-size: 15px; }
+              .footer { padding: 40px 50px; text-align: center; font-family: sans-serif; font-size: 10px; color: #a1a1aa; letter-spacing: 1px; border-top: 1px solid #faf9f6; }
+              h1 { font-weight: normal; font-style: italic; font-size: 30px; margin-bottom: 30px; color: #1a2e26; text-align: center; }
+              .divider { height: 1px; width: 40px; background-color: #1a2e2620; margin: 30px auto; }
+            </style>
+          </head>
+          <body>
+            <div class="container">
+              <div class="header">
+                <img src="cid:botanics-logo" alt="Botanics & You" class="logo">
+              </div>
+              <div class="content">
+                <h1>${isDutch ? 'Welkom!' : 'Welcome!'}</h1>
+                ${formattedMessage}
+                <div class="divider"></div>
+                <p style="text-align: center; font-size: 12px; color: #a1a1aa;">
+                  <a href="${unsubscribeUrl}" style="color: #a1a1aa; text-decoration: none;">
+                    ${isDutch ? 'Afmelden' : 'Unsubscribe'}
+                  </a>
+                </p>
+              </div>
+              <div class="footer">
+                © ${new Date().getFullYear()} Botanics & You. All rights reserved.
+              </div>
+            </div>
+          </body>
+        </html>
+        `;
+
+        await transporter.sendMail({
+            from: config.emailConfig.from,
+            to: email,
+            subject: isDutch ? 'Welkom bij Botanics & You!' : 'Welcome to Botanics & You!',
+            html,
+        });
+    } catch (error) {
+        console.error('[NewsletterAPI] Failed to send welcome email:', error);
+        // Don't throw - subscription should still succeed even if email fails
+    }
+}
+

package/src/api/router.ts

@@ -0,0 +1,76 @@
+/**
+ * Newsletter Plugin API Router
+ * Routes API requests to appropriate handlers
+ */
+
+'use server';
+
+import { NextRequest, NextResponse } from 'next/server';
+import { NewsletterApiConfig } from '../types/newsletter';
+import {
+    GET_SUBSCRIBERS,
+    POST_SUBSCRIBE,
+    GET_SUBSCRIBER,
+    DELETE_SUBSCRIBER,
+    GET_SETTINGS,
+    POST_SETTINGS,
+} from './handler';
+
+/**
+ * Handle newsletter API requests
+ */
+export async function handleNewsletterApi(
+    req: NextRequest,
+    path: string[],
+    config: NewsletterApiConfig
+): Promise<NextResponse> {
+    const method = req.method;
+    const route = path[0] || '';
+
+    try {
+        // Route: /api/plugin-newsletter/subscribers
+        if (route === 'subscribers') {
+            if (path[1]) {
+                // /api/plugin-newsletter/subscribers/[email]
+                const email = decodeURIComponent(path[1]).toLowerCase();
+                if (method === 'GET') {
+                    return await GET_SUBSCRIBER(req, email, config);
+                }
+                if (method === 'DELETE') {
+                    return await DELETE_SUBSCRIBER(req, email, config);
+                }
+            } else {
+                // /api/plugin-newsletter/subscribers
+                if (method === 'GET') {
+                    return await GET_SUBSCRIBERS(req, config);
+                }
+                if (method === 'POST') {
+                    return await POST_SUBSCRIBE(req, config);
+                }
+            }
+        }
+
+        // Route: /api/plugin-newsletter/settings
+        if (route === 'settings') {
+            if (method === 'GET') {
+                return await GET_SETTINGS(req, config);
+            }
+            if (method === 'POST' || method === 'PUT') {
+                return await POST_SETTINGS(req, config);
+            }
+        }
+
+        // Method not allowed
+        return NextResponse.json(
+            { error: `Method ${method} not allowed for route: ${route || '/'}` },
+            { status: 405 }
+        );
+    } catch (error: any) {
+        console.error('[NewsletterApiRouter] Error:', error);
+        return NextResponse.json(
+            { error: error.message || 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/index.server.ts

@@ -0,0 +1,10 @@
+/**
+ * Plugin Newsletter - Server-Only Entry Point
+ * This file exports only server-side API handlers
+ * Used by the dynamic plugin router via @jhits/plugin-newsletter/server
+ */
+
+export { handleNewsletterApi as handleApi } from './api/router';
+export { handleNewsletterApi } from './api/router'; // Keep original export for backward compatibility
+export type { NewsletterApiConfig } from './types/newsletter';
+

package/src/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * Plugin Newsletter - Client Entry Point
+ * Main newsletter management interface for the dashboard
+ */
+
+'use client';
+
+import React from 'react';
+import { SubscribersView } from './views/SubscribersView';
+import { SettingsView } from './views/SettingsView';
+
+export interface PluginProps {
+    subPath: string[];
+    siteId: string;
+    locale: string;
+}
+
+export default function NewsletterPlugin({ subPath, siteId, locale }: PluginProps) {
+    const route = subPath[0] || 'subscribers';
+
+    switch (route) {
+        case 'subscribers':
+            return <SubscribersView siteId={siteId} locale={locale} />;
+        case 'settings':
+            return <SettingsView siteId={siteId} locale={locale} />;
+        default:
+            return <SubscribersView siteId={siteId} locale={locale} />;
+    }
+}
+
+// Export for use as default
+export { NewsletterPlugin as Index };
+

package/src/types/newsletter.ts

@@ -0,0 +1,38 @@
+/**
+ * Newsletter Plugin Types
+ */
+
+export interface Subscriber {
+    _id?: string;
+    email: string;
+    language: string;
+    subscribedAt: Date | string;
+    unsubscribedAt?: Date | string;
+    status?: 'active' | 'unsubscribed';
+}
+
+export interface NewsletterSettings {
+    id: string;
+    languages: {
+        [key: string]: {
+            title: string;
+            message: string;
+        };
+    };
+    updatedAt?: Date;
+}
+
+export interface NewsletterApiConfig {
+    getDb: () => Promise<{ db: () => any }>;
+    getUserId?: (req: any) => Promise<string | null>;
+    emailConfig?: {
+        host: string;
+        port: number;
+        user: string;
+        password: string;
+        from: string;
+    };
+    baseUrl?: string;
+    [key: string]: any;
+}
+

package/src/views/SettingsView.tsx

@@ -0,0 +1,216 @@
+/**
+ * Newsletter Settings View
+ * Interface for managing newsletter welcome email settings
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Save, RefreshCw, Mail, Settings2, Globe } from 'lucide-react';
+import { NewsletterSettings } from '../types/newsletter';
+
+export interface SettingsViewProps {
+    siteId: string;
+    locale: string;
+}
+
+const SUPPORTED_LANGUAGES = ['nl', 'en', 'sv'];
+
+export function SettingsView({ siteId, locale }: SettingsViewProps) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [showSuccess, setShowSuccess] = useState(false);
+    const [settings, setSettings] = useState<NewsletterSettings>({
+        id: 'welcome_automation',
+        languages: {
+            nl: { title: '', message: '' },
+            en: { title: '', message: '' },
+            sv: { title: '', message: '' },
+        },
+    });
+
+    // Fetch settings on load
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/settings', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch settings');
+                }
+                const data = await response.json();
+                if (data.languages) {
+                    setSettings({
+                        id: data.id || 'welcome_automation',
+                        languages: {
+                            nl: data.languages.nl || { title: '', message: '' },
+                            en: data.languages.en || { title: '', message: '' },
+                            sv: data.languages.sv || { title: '', message: '' },
+                        },
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to load settings:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings();
+    }, []);
+
+    // Save settings
+    const handleSave = async () => {
+        try {
+            setIsSaving(true);
+            const response = await fetch('/api/plugin-newsletter/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    id: 'welcome_automation',
+                    languages: settings.languages,
+                }),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to save settings');
+            }
+
+            setShowSuccess(true);
+            setTimeout(() => setShowSuccess(false), 3000);
+        } catch (error: any) {
+            console.error('Failed to save settings:', error);
+            alert(error.message || 'Failed to save settings');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    // Update language setting
+    const updateLanguageSetting = (lang: string, field: 'title' | 'message', value: string) => {
+        setSettings(prev => ({
+            ...prev,
+            languages: {
+                ...prev.languages,
+                [lang]: {
+                    ...prev.languages[lang],
+                    [field]: value,
+                },
+            },
+        }));
+    };
+
+    if (isLoading) {
+        return (
+            <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
+                <div className="text-center">
+                    <RefreshCw className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading settings...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-full w-full rounded-[2.5rem] bg-dashboard-card text-dashboard-text overflow-y-auto">
+            <div className="max-w-6xl mx-auto p-8">
+                {/* Header */}
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                            Newsletter Settings
+                        </h1>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                            Configure welcome emails for new subscribers
+                        </p>
+                    </div>
+                    <button
+                        onClick={handleSave}
+                        disabled={isSaving}
+                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${isSaving
+                            ? 'bg-neutral-400 text-white cursor-not-allowed'
+                            : showSuccess
+                                ? 'bg-green-600 text-white'
+                                : 'bg-primary text-white hover:bg-primary/90'
+                            }`}
+                    >
+                        {isSaving ? (
+                            <>
+                                <RefreshCw className="w-4 h-4 animate-spin" />
+                                Saving...
+                            </>
+                        ) : showSuccess ? (
+                            <>
+                                <Settings2 className="w-4 h-4" />
+                                Saved!
+                            </>
+                        ) : (
+                            <>
+                                <Save className="w-4 h-4" />
+                                Save Settings
+                            </>
+                        )}
+                    </button>
+                </div>
+
+                {/* Welcome Email Settings */}
+                <section className="bg-dashboard-sidebar p-8 rounded-3xl border border-dashboard-border mb-8">
+                    <div className="flex items-center gap-2 font-bold text-neutral-950 dark:text-white border-b border-dashboard-border pb-4 mb-6">
+                        <Mail size={20} className="text-primary" />
+                        Welcome Email Automation
+                    </div>
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-8">
+                        Configure the welcome email that will be sent automatically when someone subscribes to your newsletter.
+                    </p>
+
+                    {/* Language Tabs */}
+                    <div className="space-y-8">
+                        {SUPPORTED_LANGUAGES.map(lang => (
+                            <div key={lang} className="bg-dashboard-card p-6 rounded-2xl border border-dashboard-border">
+                                <div className="flex items-center gap-2 mb-6">
+                                    <Globe size={16} className="text-primary" />
+                                    <h3 className="text-lg font-black text-neutral-950 dark:text-white uppercase tracking-tight">
+                                        {lang.toUpperCase()} - {lang === 'nl' ? 'Dutch' : lang === 'en' ? 'English' : 'Swedish'}
+                                    </h3>
+                                </div>
+                                <div className="space-y-4">
+                                    <div>
+                                        <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest block mb-2">
+                                            Email Subject
+                                        </label>
+                                        <input
+                                            type="text"
+                                            value={settings.languages[lang]?.title || ''}
+                                            onChange={(e) => updateLanguageSetting(lang, 'title', e.target.value)}
+                                            placeholder={`Welcome email subject (${lang.toUpperCase()})`}
+                                            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-neutral-500 dark:text-neutral-400 uppercase tracking-widest block mb-2">
+                                            Email Message
+                                        </label>
+                                        <textarea
+                                            value={settings.languages[lang]?.message || ''}
+                                            onChange={(e) => updateLanguageSetting(lang, 'message', e.target.value)}
+                                            placeholder={`Welcome email message (${lang.toUpperCase()}). Use **bold** for bold text and • for bullet points.`}
+                                            rows={8}
+                                            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 resize-none font-mono text-sm"
+                                        />
+                                        <p className="text-[10px] text-neutral-500 dark:text-neutral-400 mt-2">
+                                            Supports markdown: **bold**, • bullet points, line breaks
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+}
+

package/src/views/SubscribersView.tsx

@@ -0,0 +1,269 @@
+/**
+ * Newsletter Subscribers View
+ * Main interface for managing newsletter subscribers
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Mail, Copy, Check, Trash2, Filter, Users, Globe, Calendar } from 'lucide-react';
+import { Subscriber } from '../types/newsletter';
+
+export interface SubscribersViewProps {
+    siteId: string;
+    locale: string;
+}
+
+export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
+    const [subscribers, setSubscribers] = useState<Subscriber[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [filter, setFilter] = useState<string>('all');
+    const [copyStatus, setCopyStatus] = useState(false);
+    const [deleteStatus, setDeleteStatus] = useState<string | null>(null);
+
+    // Fetch subscribers on load
+    useEffect(() => {
+        const fetchSubscribers = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/subscribers', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch subscribers');
+                }
+                const data = await response.json();
+                setSubscribers(Array.isArray(data) ? data : []);
+            } catch (error) {
+                console.error('Failed to load subscribers:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSubscribers();
+    }, []);
+
+    // Filter subscribers
+    const filteredSubscribers = filter === 'all'
+        ? subscribers
+        : subscribers.filter(s => s.language === filter);
+
+    // Get unique languages
+    const languages = Array.from(new Set(subscribers.map(s => s.language))).sort();
+
+    // Copy emails to clipboard
+    const handleCopyEmails = async () => {
+        const emails = filteredSubscribers.map(s => s.email).join(', ');
+        try {
+            await navigator.clipboard.writeText(emails);
+            setCopyStatus(true);
+            setTimeout(() => setCopyStatus(false), 2000);
+        } catch (error) {
+            console.error('Failed to copy emails:', error);
+        }
+    };
+
+    // Delete subscriber
+    const handleDeleteSubscriber = async (email: string) => {
+        if (!confirm(`Are you sure you want to remove ${email} from the newsletter?`)) {
+            return;
+        }
+
+        try {
+            setDeleteStatus(email);
+            const response = await fetch(`/api/plugin-newsletter/subscribers/${encodeURIComponent(email)}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to delete subscriber');
+            }
+
+            // Remove from local state
+            setSubscribers(prev => prev.filter(sub => sub.email !== email));
+        } catch (error: any) {
+            console.error('Failed to delete subscriber:', error);
+            alert(error.message || 'Failed to delete subscriber');
+        } finally {
+            setDeleteStatus(null);
+        }
+    };
+
+    // Format date
+    const formatDate = (dateString: string | Date | undefined) => {
+        if (!dateString) return 'N/A';
+        const date = typeof dateString === 'string' ? new Date(dateString) : dateString;
+        return date.toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+        });
+    };
+
+    return (
+        <div className="h-full w-full rounded-[2.5rem] bg-dashboard-card text-dashboard-text overflow-y-auto">
+            <div className="max-w-7xl mx-auto p-8">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+                    <div>
+                        <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                            Newsletter Subscribers
+                        </h1>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                            Manage your newsletter subscribers and their preferences
+                        </p>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        {/* Language Filter */}
+                        <div className="flex items-center bg-dashboard-sidebar border border-dashboard-border rounded-xl px-4 py-2.5 shadow-sm">
+                            <Filter size={16} className="text-primary mr-2" />
+                            <select
+                                value={filter}
+                                onChange={(e) => setFilter(e.target.value)}
+                                className="bg-transparent text-xs font-bold text-dashboard-text outline-none cursor-pointer uppercase tracking-widest"
+                            >
+                                <option value="all">All Languages</option>
+                                {languages.map(lang => (
+                                    <option key={lang} value={lang}>{lang.toUpperCase()}</option>
+                                ))}
+                            </select>
+                        </div>
+
+                        {/* Copy Emails Button */}
+                        <button
+                            onClick={handleCopyEmails}
+                            disabled={filteredSubscribers.length === 0}
+                            className="inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg disabled:opacity-30 disabled:cursor-not-allowed bg-primary text-white hover:bg-primary/90"
+                        >
+                            {copyStatus ? (
+                                <>
+                                    <Check size={14} />
+                                    Copied!
+                                </>
+                            ) : (
+                                <>
+                                    <Copy size={14} />
+                                    Copy List
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Stats */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <div className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                        <div className="flex items-center gap-3 mb-2">
+                            <Users size={20} className="text-primary" />
+                            <span className="text-[10px] uppercase tracking-widest text-neutral-500 dark:text-neutral-400 font-black">
+                                Total Subscribers
+                            </span>
+                        </div>
+                        <p className="text-3xl font-black text-neutral-950 dark:text-white">
+                            {subscribers.length}
+                        </p>
+                    </div>
+                    <div className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                        <div className="flex items-center gap-3 mb-2">
+                            <Globe size={20} className="text-primary" />
+                            <span className="text-[10px] uppercase tracking-widest text-neutral-500 dark:text-neutral-400 font-black">
+                                Languages
+                            </span>
+                        </div>
+                        <p className="text-3xl font-black text-neutral-950 dark:text-white">
+                            {languages.length}
+                        </p>
+                    </div>
+                    <div className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                        <div className="flex items-center gap-3 mb-2">
+                            <Filter size={20} className="text-primary" />
+                            <span className="text-[10px] uppercase tracking-widest text-neutral-500 dark:text-neutral-400 font-black">
+                                Filtered
+                            </span>
+                        </div>
+                        <p className="text-3xl font-black text-neutral-950 dark:text-white">
+                            {filteredSubscribers.length}
+                        </p>
+                    </div>
+                </div>
+
+                {/* Subscribers Table */}
+                <div className="bg-dashboard-sidebar rounded-3xl border border-dashboard-border shadow-sm overflow-hidden">
+                    {isLoading ? (
+                        <div className="flex items-center justify-center py-20">
+                            <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+                        </div>
+                    ) : filteredSubscribers.length === 0 ? (
+                        <div className="py-24 text-center">
+                            <Users size={64} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
+                            <p className="text-neutral-500 dark:text-neutral-400 font-serif italic text-lg">
+                                {filter === 'all' ? 'No subscribers yet.' : `No subscribers found for ${filter.toUpperCase()}.`}
+                            </p>
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-left border-collapse">
+                                <thead>
+                                    <tr className="bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border">
+                                        <th className="px-8 py-5">Subscriber</th>
+                                        <th className="px-8 py-5">Language</th>
+                                        <th className="px-8 py-5 text-right">Subscribed</th>
+                                        <th className="px-8 py-5 text-right">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-dashboard-border">
+                                    {filteredSubscribers.map((subscriber, idx) => (
+                                        <tr
+                                            key={idx}
+                                            className="hover:bg-dashboard-bg transition-colors group"
+                                        >
+                                            <td className="px-8 py-5">
+                                                <div className="flex items-center gap-4">
+                                                    <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">
+                                                        {subscriber.email}
+                                                    </span>
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5">
+                                                <span className="text-[10px] font-black px-3 py-1 bg-primary/10 rounded-full uppercase text-primary border border-primary/20">
+                                                    {subscriber.language}
+                                                </span>
+                                            </td>
+                                            <td className="px-8 py-5 text-right text-xs text-neutral-500 dark:text-neutral-400 font-medium">
+                                                <div className="flex items-center justify-end gap-2">
+                                                    <Calendar size={14} />
+                                                    {formatDate(subscriber.subscribedAt)}
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5 text-right">
+                                                <button
+                                                    onClick={() => handleDeleteSubscriber(subscriber.email)}
+                                                    disabled={deleteStatus === subscriber.email}
+                                                    className="p-2.5 rounded-full text-neutral-400 dark:text-neutral-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                                    title="Remove subscriber"
+                                                >
+                                                    {deleteStatus === subscriber.email ? (
+                                                        <div className="w-5 h-5 border-2 border-red-500 border-t-transparent rounded-full animate-spin" />
+                                                    ) : (
+                                                        <Trash2 size={18} />
+                                                    )}
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+