@jhits/plugin-newsletter 0.0.4 → 0.0.6

package/dist/views/CanvasEditor/hooks/useNewsletterLoader.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+export function useNewsletterLoader(newsletterSlug, currentNewsletterId, loadNewsletter) {
+    const [isLoadingNewsletter, setIsLoadingNewsletter] = useState(false);
+    useEffect(() => {
+        if (newsletterSlug && !currentNewsletterId) {
+            const loadNewsletterData = async () => {
+                try {
+                    setIsLoadingNewsletter(true);
+                    const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletterSlug}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to load newsletter');
+                    }
+                    const newsletter = await response.json();
+                    loadNewsletter(newsletter);
+                }
+                catch (error) {
+                    console.error('Failed to load newsletter:', error);
+                    alert('Failed to load newsletter. Please try again.');
+                }
+                finally {
+                    setIsLoadingNewsletter(false);
+                }
+            };
+            loadNewsletterData();
+        }
+    }, [newsletterSlug, currentNewsletterId, loadNewsletter]);
+    return { isLoadingNewsletter };
+}

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.d.ts

@@ -0,0 +1,2 @@
+export declare function useRegisteredBlocks(): import("../../..").BlockTypeDefinition[];
+//# sourceMappingURL=useRegisteredBlocks.d.ts.map

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRegisteredBlocks.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useRegisteredBlocks.ts"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,6CAkDlC"}

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { blockRegistry } from '../../../registry/BlockRegistry';
+export function useRegisteredBlocks() {
+    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
+        const initial = blockRegistry.getAll();
+        return initial;
+    });
+    // Watch for registry changes and update state
+    useEffect(() => {
+        // Check immediately
+        const checkBlocks = () => {
+            const currentBlocks = blockRegistry.getAll();
+            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
+                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
+                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
+            if (hasChanged) {
+                setRegisteredBlocks([...currentBlocks]);
+            }
+        };
+        // Initial check
+        checkBlocks();
+        // Poll for registry changes (blocks are registered asynchronously in useEffect)
+        let pollCount = 0;
+        const interval = setInterval(() => {
+            pollCount++;
+            checkBlocks();
+            // Stop polling after 5 seconds (25 checks at 200ms)
+            if (pollCount > 25) {
+                clearInterval(interval);
+            }
+        }, 200);
+        // Also check after delays to catch initial registrations
+        const timeouts = [
+            setTimeout(checkBlocks, 50),
+            setTimeout(checkBlocks, 100),
+            setTimeout(checkBlocks, 300),
+            setTimeout(checkBlocks, 500),
+            setTimeout(checkBlocks, 1000),
+        ];
+        return () => {
+            clearInterval(interval);
+            timeouts.forEach(clearTimeout);
+        };
+    }, [registeredBlocks.length]);
+    return registeredBlocks;
+}

package/dist/views/CanvasEditor/hooks/useSlashCommand.d.ts

@@ -0,0 +1,31 @@
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface SlashCommandState {
+    isOpen: boolean;
+    query: string;
+    selectedIndex: number;
+    position: {
+        top: number;
+        left: number;
+    } | null;
+    replaceBlockId?: string;
+}
+export declare function useSlashCommand(blocks: BlockTypeDefinition[], onSelectBlock: (blockType: string, replaceBlockId?: string) => void): {
+    isOpen: boolean;
+    query: string;
+    selectedIndex: number;
+    position: {
+        top: number;
+        left: number;
+    } | null;
+    replaceBlockId: string | undefined;
+    filteredBlocks: BlockTypeDefinition[];
+    openMenu: (position: {
+        top: number;
+        left: number;
+    }, replaceBlockId?: string) => void;
+    closeMenu: () => void;
+    updateQuery: (query: string) => void;
+    moveSelection: (direction: "up" | "down") => void;
+    selectCurrent: (replaceBlockId?: string) => void;
+};
+//# sourceMappingURL=useSlashCommand.d.ts.map

package/dist/views/CanvasEditor/hooks/useSlashCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlashCommand.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useSlashCommand.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAC3B,MAAM,EAAE,mBAAmB,EAAE,EAC7B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI;;;;;aANlD,MAAM;cAAQ,MAAM;;;;yBAyBG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,mBAAmB,MAAM;;yBAoBtD,MAAM;+BAQA,IAAI,GAAG,MAAM;qCAkBP,MAAM;EA2B7D"}

package/dist/views/CanvasEditor/hooks/useSlashCommand.js

@@ -0,0 +1,87 @@
+import { useState, useCallback } from 'react';
+export function useSlashCommand(blocks, onSelectBlock) {
+    const [state, setState] = useState({
+        isOpen: false,
+        query: '',
+        selectedIndex: 0,
+        position: null,
+    });
+    // Filter blocks based on query
+    const filteredBlocks = blocks.filter(block => {
+        if (!state.query)
+            return true;
+        const lowerQuery = state.query.toLowerCase();
+        const name = block.name.toLowerCase();
+        const description = block.description?.toLowerCase() || '';
+        const type = block.type.toLowerCase();
+        return name.includes(lowerQuery) || description.includes(lowerQuery) || type.includes(lowerQuery);
+    });
+    const openMenu = useCallback((position, replaceBlockId) => {
+        setState({
+            isOpen: true,
+            query: '',
+            selectedIndex: 0,
+            position,
+            replaceBlockId,
+        });
+    }, []);
+    const closeMenu = useCallback(() => {
+        setState({
+            isOpen: false,
+            query: '',
+            selectedIndex: 0,
+            position: null,
+            replaceBlockId: undefined,
+        });
+    }, []);
+    const updateQuery = useCallback((query) => {
+        setState(prev => ({
+            ...prev,
+            query,
+            selectedIndex: 0, // Reset selection when query changes
+        }));
+    }, []);
+    const moveSelection = useCallback((direction) => {
+        setState(prev => {
+            if (!prev.isOpen || filteredBlocks.length === 0)
+                return prev;
+            let newIndex = prev.selectedIndex;
+            if (direction === 'down') {
+                newIndex = (prev.selectedIndex + 1) % filteredBlocks.length;
+            }
+            else {
+                newIndex = prev.selectedIndex === 0 ? filteredBlocks.length - 1 : prev.selectedIndex - 1;
+            }
+            return {
+                ...prev,
+                selectedIndex: newIndex,
+            };
+        });
+    }, [filteredBlocks.length]);
+    const selectCurrent = useCallback((replaceBlockId) => {
+        if (state.isOpen && filteredBlocks[state.selectedIndex]) {
+            // Always use the replaceBlockId from state (set when menu was opened)
+            // The parameter is ignored to ensure we use the correct block ID
+            const blockIdToReplace = state.replaceBlockId;
+            if (!blockIdToReplace) {
+                console.warn('[useSlashCommand] No replaceBlockId in state when selecting block');
+                return;
+            }
+            onSelectBlock(filteredBlocks[state.selectedIndex].type, blockIdToReplace);
+            closeMenu();
+        }
+    }, [state.isOpen, state.selectedIndex, state.replaceBlockId, filteredBlocks, onSelectBlock, closeMenu]);
+    return {
+        isOpen: state.isOpen,
+        query: state.query,
+        selectedIndex: state.selectedIndex,
+        position: state.position,
+        replaceBlockId: state.replaceBlockId,
+        filteredBlocks,
+        openMenu,
+        closeMenu,
+        updateQuery,
+        moveSelection,
+        selectCurrent,
+    };
+}

package/dist/views/CanvasEditor/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Newsletter Canvas Editor Exports
+ */
+export { CanvasEditorView } from './CanvasEditorView';
+export type { CanvasEditorViewProps } from './CanvasEditorView';
+export { EditorBody } from './EditorBody';
+export type { EditorBodyProps } from './EditorBody';
+export { BlockWrapper } from './BlockWrapper';
+export type { BlockWrapperProps } from './BlockWrapper';
+export { EditorHeader } from './EditorHeader';
+export type { EditorHeaderProps } from './EditorHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/CanvasEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/views/CanvasEditor/index.js

@@ -0,0 +1,7 @@
+/**
+ * Newsletter Canvas Editor Exports
+ */
+export { CanvasEditorView } from './CanvasEditorView';
+export { EditorBody } from './EditorBody';
+export { BlockWrapper } from './BlockWrapper';
+export { EditorHeader } from './EditorHeader';

package/dist/views/NewsletterEditor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Newsletter Editor View
+ * Block-based editor for creating and editing newsletters
+ */
+export interface NewsletterEditorViewProps {
+    newsletterSlug?: string;
+    siteId: string;
+    locale: string;
+    darkMode?: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+}
+export declare function NewsletterEditorView({ newsletterSlug, siteId, locale, darkMode, backgroundColors }: NewsletterEditorViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NewsletterEditor.d.ts.map

package/dist/views/NewsletterEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterEditor.d.ts","sourceRoot":"","sources":["../../src/views/NewsletterEditor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,yBAAyB;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED,wBAAgB,oBAAoB,CAAC,EACjC,cAAc,EACd,MAAM,EACN,MAAM,EACN,QAAQ,EACR,gBAAgB,EACnB,EAAE,yBAAyB,2CAU3B"}

package/dist/views/NewsletterEditor.js

@@ -0,0 +1,10 @@
+/**
+ * Newsletter Editor View
+ * Block-based editor for creating and editing newsletters
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CanvasEditorView } from './CanvasEditor';
+export function NewsletterEditorView({ newsletterSlug, siteId, locale, darkMode, backgroundColors }) {
+    return (_jsx(CanvasEditorView, { newsletterSlug: newsletterSlug, siteId: siteId, locale: locale, darkMode: darkMode, backgroundColors: backgroundColors }));
+}

package/dist/views/NewsletterManager.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Newsletter Manager View
+ * List and manage newsletters
+ */
+export interface NewsletterManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NewsletterManager.d.ts.map

package/dist/views/NewsletterManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterManager.d.ts","sourceRoot":"","sources":["../../src/views/NewsletterManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAiBD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAgNnF"}

package/dist/views/NewsletterManager.js

@@ -0,0 +1,95 @@
+/**
+ * Newsletter Manager View
+ * List and manage newsletters
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Plus, Mail, Calendar, Trash2, Edit2 } from 'lucide-react';
+function getStatusBadgeColor(status) {
+    switch (status) {
+        case 'sent':
+            return 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20';
+        case 'draft':
+            return 'bg-neutral-500/10 text-dashboard-text-secondary border-neutral-500/20';
+        case 'archived':
+            return 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20';
+        default:
+            return 'bg-neutral-500/10 text-dashboard-text-secondary border-neutral-500/20';
+    }
+}
+export function NewsletterManagerView({ siteId, locale }) {
+    const [newsletters, setNewsletters] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [statusFilter, setStatusFilter] = useState('all');
+    // Fetch newsletters
+    useEffect(() => {
+        const fetchNewsletters = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/newsletters', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch newsletters');
+                }
+                const data = await response.json();
+                setNewsletters(Array.isArray(data) ? data : []);
+            }
+            catch (error) {
+                console.error('Failed to load newsletters:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchNewsletters();
+    }, []);
+    // Filter newsletters
+    const filteredNewsletters = statusFilter === 'all'
+        ? newsletters
+        : newsletters.filter(n => n.status === statusFilter);
+    // Handle create new newsletter
+    const handleCreate = () => {
+        window.location.href = '/dashboard/newsletter/new';
+    };
+    // Handle edit newsletter
+    const handleEdit = (slug) => {
+        window.location.href = `/dashboard/newsletter/editor/${slug}`;
+    };
+    // Handle delete newsletter
+    const handleDelete = async (slug, title) => {
+        if (!confirm(`Are you sure you want to delete "${title}"?`)) {
+            return;
+        }
+        try {
+            const response = await fetch(`/api/plugin-newsletter/newsletters/${slug}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+            if (!response.ok) {
+                throw new Error('Failed to delete newsletter');
+            }
+            // Remove from local state
+            setNewsletters(prev => prev.filter(n => n.slug !== slug));
+        }
+        catch (error) {
+            console.error('Failed to delete newsletter:', error);
+            alert(error.message || 'Failed to delete newsletter');
+        }
+    };
+    // Format date
+    const formatDate = (dateString) => {
+        if (!dateString)
+            return 'N/A';
+        const date = new Date(dateString);
+        return date.toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+        });
+    };
+    return (_jsx("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Newsletters" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Create and manage your email newsletters" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), className: "bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5 text-xs font-bold text-dashboard-text outline-none cursor-pointer uppercase tracking-widest", children: [_jsx("option", { value: "all", children: "All Status" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "sent", children: "Sent" }), _jsx("option", { value: "archived", children: "Archived" })] }), _jsxs("button", { onClick: handleCreate, className: "inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90", children: [_jsx(Plus, { size: 14 }), "New Newsletter"] })] })] }), _jsx("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredNewsletters.length === 0 ? (_jsxs("div", { className: "py-24 text-center", children: [_jsx(Mail, { size: 64, className: "mx-auto text-dashboard-text-secondary mb-4" }), _jsx("p", { className: "text-dashboard-text-secondary font-serif italic text-lg mb-6", children: statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".` }), _jsxs("button", { onClick: handleCreate, className: "inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90", children: [_jsx(Plus, { size: 14 }), "Create Your First Newsletter"] })] })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-5", children: "Title" }), _jsx("th", { className: "px-8 py-5", children: "Subject" }), _jsx("th", { className: "px-8 py-5", children: "Status" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Updated" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredNewsletters.map((newsletter) => (_jsxs("tr", { className: "hover:bg-dashboard-bg transition-colors group", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors", children: _jsx(Mail, { size: 18 }) }), _jsx("span", { className: "text-sm font-medium text-dashboard-text tracking-tight", children: newsletter.title })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: "text-sm text-dashboard-text-secondary", children: newsletter.subject || 'No subject' }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: `text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`, children: newsletter.status }) }), _jsx("td", { className: "px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Calendar, { size: 14 }), formatDate(newsletter.updatedAt)] }) }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => handleEdit(newsletter.slug), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: "Edit newsletter", children: _jsx(Edit2, { size: 18 }) }), _jsx("button", { onClick: () => handleDelete(newsletter.slug, newsletter.title), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors", title: "Delete newsletter", children: _jsx(Trash2, { size: 18 }) })] }) })] }, newsletter.id))) })] }) })) })] }) }));
+}

package/dist/views/SettingsView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Newsletter Settings View
+ * Interface for managing newsletter welcome email settings
+ */
+export interface SettingsViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function SettingsView({ siteId, locale }: SettingsViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SettingsView.d.ts.map

package/dist/views/SettingsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../src/views/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAoMjE"}

package/dist/views/SettingsView.js

@@ -0,0 +1,103 @@
+/**
+ * Newsletter Settings View
+ * Interface for managing newsletter welcome email settings
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Save, RefreshCw, Mail, Settings2, Globe } from 'lucide-react';
+const SUPPORTED_LANGUAGES = ['nl', 'en', 'sv'];
+export function SettingsView({ siteId, locale }) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [showSuccess, setShowSuccess] = useState(false);
+    const [settings, setSettings] = useState({
+        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) {
+            console.error('Failed to save settings:', error);
+            alert(error.message || 'Failed to save settings');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    // Update language setting
+    const updateLanguageSetting = (lang, field, value) => {
+        setSettings(prev => ({
+            ...prev,
+            languages: {
+                ...prev.languages,
+                [lang]: {
+                    ...prev.languages[lang],
+                    [field]: value,
+                },
+            },
+        }));
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "h-full w-full bg-white dark:bg-neutral-900 text-dashboard-text flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx(RefreshCw, { className: "w-8 h-8 animate-spin text-primary mx-auto mb-4" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Loading settings..." })] }) }));
+    }
+    return (_jsx("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Newsletter Settings" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Configure welcome emails for new subscribers" })] }), _jsx("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 shadow-primary/20 ${isSaving
+                                ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                : showSuccess
+                                    ? 'bg-green-600 text-white'
+                                    : 'bg-primary text-white hover:bg-primary/90'}`, children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Saving..."] })) : showSuccess ? (_jsxs(_Fragment, { children: [_jsx(Settings2, { className: "w-4 h-4" }), "Saved!"] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), "Save Settings"] })) })] }), _jsxs("section", { className: "bg-dashboard-sidebar p-8 rounded-3xl border border-dashboard-border mb-8", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Mail, { size: 20, className: "text-primary" }), "Welcome Email Automation"] }), _jsx("p", { className: "text-sm text-dashboard-text-secondary mb-8", children: "Configure the welcome email that will be sent automatically when someone subscribes to your newsletter." }), _jsx("div", { className: "space-y-8", children: SUPPORTED_LANGUAGES.map(lang => (_jsxs("div", { className: "bg-dashboard-card p-6 rounded-2xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 mb-6", children: [_jsx(Globe, { size: 16, className: "text-primary" }), _jsxs("h3", { className: "text-lg font-black text-dashboard-text uppercase tracking-tight", children: [lang.toUpperCase(), " - ", lang === 'nl' ? 'Dutch' : lang === 'en' ? 'English' : 'Swedish'] })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Email Subject" }), _jsx("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" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Email Message" }), _jsx("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" }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary mt-2", children: "Supports markdown: **bold**, \u2022 bullet points, line breaks" })] })] })] }, lang))) })] })] }) }));
+}

package/dist/views/SubscribersView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Newsletter Subscribers View
+ * Main interface for managing newsletter subscribers
+ */
+export interface SubscribersViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function SubscribersView({ siteId, locale }: SubscribersViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubscribersView.d.ts.map

package/dist/views/SubscribersView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribersView.d.ts","sourceRoot":"","sources":["../../src/views/SubscribersView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CA2PvE"}

package/dist/views/SubscribersView.js

@@ -0,0 +1,94 @@
+/**
+ * Newsletter Subscribers View
+ * Main interface for managing newsletter subscribers
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Mail, Copy, Check, Trash2, Filter, Users, Globe, Calendar } from 'lucide-react';
+export function SubscribersView({ siteId, locale }) {
+    const [subscribers, setSubscribers] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [filter, setFilter] = useState('all');
+    const [copyStatus, setCopyStatus] = useState(false);
+    const [deleteStatus, setDeleteStatus] = useState(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) => {
+        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) {
+            console.error('Failed to delete subscriber:', error);
+            alert(error.message || 'Failed to delete subscriber');
+        }
+        finally {
+            setDeleteStatus(null);
+        }
+    };
+    // Format date
+    const formatDate = (dateString) => {
+        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 (_jsx("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Newsletter Subscribers" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Manage your newsletter subscribers and their preferences" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5", children: [_jsx(Filter, { size: 16, className: "text-primary mr-2" }), _jsxs("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", children: [_jsx("option", { value: "all", children: "All Languages" }), languages.map(lang => (_jsx("option", { value: lang, children: lang.toUpperCase() }, lang)))] })] }), _jsx("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 shadow-primary/20 disabled:opacity-30 disabled:cursor-not-allowed bg-primary text-white hover:bg-primary/90", children: copyStatus ? (_jsxs(_Fragment, { children: [_jsx(Check, { size: 14 }), "Copied!"] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { size: 14 }), "Copy List"] })) })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8", children: [_jsxs("div", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx(Users, { size: 20, className: "text-primary" }), _jsx("span", { className: "text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black", children: "Total Subscribers" })] }), _jsx("p", { className: "text-3xl font-black text-dashboard-text", children: subscribers.length })] }), _jsxs("div", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx(Globe, { size: 20, className: "text-primary" }), _jsx("span", { className: "text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black", children: "Languages" })] }), _jsx("p", { className: "text-3xl font-black text-dashboard-text", children: languages.length })] }), _jsxs("div", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx(Filter, { size: 20, className: "text-primary" }), _jsx("span", { className: "text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black", children: "Filtered" })] }), _jsx("p", { className: "text-3xl font-black text-dashboard-text", children: filteredSubscribers.length })] })] }), _jsx("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredSubscribers.length === 0 ? (_jsxs("div", { className: "py-24 text-center", children: [_jsx(Users, { size: 64, className: "mx-auto text-dashboard-text-secondary mb-4" }), _jsx("p", { className: "text-dashboard-text-secondary font-serif italic text-lg", children: filter === 'all' ? 'No subscribers yet.' : `No subscribers found for ${filter.toUpperCase()}.` })] })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-5", children: "Subscriber" }), _jsx("th", { className: "px-8 py-5", children: "Language" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Subscribed" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredSubscribers.map((subscriber, idx) => (_jsxs("tr", { className: "hover:bg-dashboard-bg transition-colors group", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors", children: _jsx(Mail, { size: 18 }) }), _jsx("span", { className: "text-sm font-medium text-dashboard-text tracking-tight", children: subscriber.email })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: "text-[10px] font-black px-3 py-1 bg-primary/10 rounded-full uppercase text-primary border border-primary/20", children: subscriber.language }) }), _jsx("td", { className: "px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Calendar, { size: 14 }), formatDate(subscriber.subscribedAt)] }) }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsx("button", { onClick: () => handleDeleteSubscriber(subscriber.email), disabled: deleteStatus === subscriber.email, className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", title: "Remove subscriber", children: deleteStatus === subscriber.email ? (_jsx("div", { className: "w-5 h-5 border-2 border-red-500 border-t-transparent rounded-full animate-spin" })) : (_jsx(Trash2, { size: 18 })) }) })] }, idx))) })] }) })) })] }) }));
+}