@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { ArrowLeft, Settings2, Save, Edit, Eye, Plus } from 'lucide-react';
+import { useEditor } from '../../state/EditorContext';
+
+const ALL_LANGUAGES = [
+    { code: 'en', name: 'English' },
+    { code: 'nl', name: 'Dutch' },
+    { code: 'sv', name: 'Swedish' },
+    { code: 'de', name: 'German' },
+    { code: 'fr', name: 'French' },
+    { code: 'es', name: 'Spanish' },
+    { code: 'it', name: 'Italian' },
+    { code: 'pt', name: 'Portuguese' },
+    { code: 'pl', name: 'Polish' },
+    { code: 'ru', name: 'Russian' },
+    { code: 'ja', name: 'Japanese' },
+    { code: 'zh', name: 'Chinese' },
+    { code: 'ar', name: 'Arabic' },
+    { code: 'tr', name: 'Turkish' },
+    { code: 'cs', name: 'Czech' },
+    { code: 'da', name: 'Danish' },
+    { code: 'fi', name: 'Finnish' },
+    { code: 'el', name: 'Greek' },
+    { code: 'he', name: 'Hebrew' },
+    { code: 'hi', name: 'Hindi' },
+    { code: 'hu', name: 'Hungarian' },
+    { code: 'id', name: 'Indonesian' },
+    { code: 'ko', name: 'Korean' },
+    { code: 'no', name: 'Norwegian' },
+    { code: 'ro', name: 'Romanian' },
+    { code: 'th', name: 'Thai' },
+    { code: 'uk', name: 'Ukrainian' },
+    { code: 'vi', name: 'Vietnamese' },
+];
+
+export interface EditorHeaderProps {
+    isPreviewMode: boolean;
+    onPreviewToggle: () => void;
+    isSidebarOpen: boolean;
+    onSidebarToggle: () => void;
+    isSaving: boolean;
+    onSave: () => Promise<void>;
+    onSaveError: (error: string | null) => void;
+    isDirty?: boolean;
+    isWelcomeEmail?: boolean;
+    languages?: string[];
+    currentLanguage?: string;
+    onLanguageChange?: (language: string) => void;
+    onAddLanguage?: (language: string) => void;
+}
+
+export function EditorHeader({
+    isPreviewMode,
+    onPreviewToggle,
+    isSidebarOpen,
+    onSidebarToggle,
+    isSaving,
+    onSave,
+    onSaveError,
+    isDirty = false,
+    isWelcomeEmail = false,
+    languages = ['en'],
+    currentLanguage = 'en',
+    onLanguageChange,
+    onAddLanguage,
+}: EditorHeaderProps) {
+    const { state } = useEditor();
+    const [saveError, setSaveError] = useState<string | null>(null);
+    const [isAddLangOpen, setIsAddLangOpen] = useState(false);
+    const addLangRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (addLangRef.current && !addLangRef.current.contains(event.target as Node)) {
+                setIsAddLangOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const availableToAdd = ALL_LANGUAGES.filter(l => !languages.includes(l.code));
+
+    const handleSave = async () => {
+        try {
+            setSaveError(null);
+            await onSave();
+        } catch (error: any) {
+            console.error('[EditorHeader] Failed to save newsletter:', error);
+            let errorMessage = error.message || 'Failed to save newsletter';
+            if (errorMessage.includes('Unauthorized')) {
+                errorMessage = 'You are not authorized to save. Please log in again.';
+            }
+            setSaveError(errorMessage);
+            onSaveError(errorMessage);
+        }
+    };
+
+    const currentLangName = ALL_LANGUAGES.find(l => l.code === currentLanguage)?.name || currentLanguage.toUpperCase();
+
+    return (
+        <header className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0 z-50 relative">
+            <div className="flex items-center gap-6">
+                <button
+                    onClick={() => {
+                        if (isDirty) {
+                            const confirmed = window.confirm(
+                                'You have unsaved changes. Are you sure you want to leave? Your changes will be lost.'
+                            );
+                            if (!confirmed) {
+                                return;
+                            }
+                        }
+                        window.location.href = '/dashboard/newsletter';
+                    }}
+                    className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors"
+                >
+                    <ArrowLeft size={20} strokeWidth={1.5} />
+                </button>
+
+                {/* Language Selector */}
+                {languages.length > 0 && (
+                    <div className="flex items-center gap-2">
+                        <select
+                            value={currentLanguage}
+                            onChange={(e) => {
+                                if (onLanguageChange) {
+                                    onLanguageChange(e.target.value);
+                                }
+                            }}
+                            className="px-3 py-1.5 text-xs bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text font-medium"
+                        >
+                            {languages.map((lang) => {
+                                const langInfo = ALL_LANGUAGES.find(l => l.code === lang);
+                                return (
+                                    <option key={lang} value={lang}>
+                                        {langInfo?.name || lang.toUpperCase()}
+                                    </option>
+                                );
+                            })}
+                        </select>
+
+                        {/* Add Language Button */}
+                        {availableToAdd.length > 0 && (
+                            <div className="relative" ref={addLangRef}>
+                                <button
+                                    onClick={() => setIsAddLangOpen(!isAddLangOpen)}
+                                    className="p-1.5 text-neutral-500 hover:text-primary transition-colors"
+                                    title="Add language"
+                                >
+                                    <Plus size={16} />
+                                </button>
+
+                                {isAddLangOpen && (
+                                    <div className="absolute top-full left-0 mt-1 w-48 bg-dashboard-card border border-dashboard-border rounded-lg shadow-lg z-[100] py-1 max-h-60 overflow-y-auto">
+                                        <div className="px-3 py-2 text-[10px] uppercase tracking-wider text-neutral-500 font-bold border-b border-dashboard-border">
+                                            Add Language
+                                        </div>
+                                        {availableToAdd.map((lang) => (
+                                            <button
+                                                key={lang.code}
+                                                onClick={() => {
+                                                    if (onAddLanguage) {
+                                                        onAddLanguage(lang.code);
+                                                    }
+                                                    setIsAddLangOpen(false);
+                                                }}
+                                                className="w-full text-left px-3 py-2 text-xs hover:bg-dashboard-bg transition-colors text-dashboard-text"
+                                            >
+                                                {lang.name}
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            <div className="flex items-center gap-4">
+                {/* Edit/Preview Toggle */}
+                <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1">
+                    <button
+                        onClick={() => {
+                            if (isPreviewMode) {
+                                onPreviewToggle();
+                            }
+                        }}
+                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
+                            !isPreviewMode
+                                ? 'bg-primary text-white shadow-sm'
+                                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                        }`}
+                        title="Edit mode"
+                    >
+                        <Edit size={12} strokeWidth={2.5} />
+                        <span>Edit</span>
+                    </button>
+                    <button
+                        onClick={() => {
+                            if (!isPreviewMode) {
+                                onPreviewToggle();
+                            }
+                        }}
+                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
+                            isPreviewMode
+                                ? 'bg-primary text-white shadow-sm'
+                                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                        }`}
+                        title="Preview mode"
+                    >
+                        <Eye size={12} strokeWidth={2.5} />
+                        <span>Preview</span>
+                    </button>
+                </div>
+
+                {/* Settings Toggle */}
+                <button
+                    onClick={onSidebarToggle}
+                    className={`flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isSidebarOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'
+                        }`}
+                >
+                    <Settings2 size={16} strokeWidth={1.5} />
+                    Settings
+                </button>
+
+                {/* Save Button */}
+                <button
+                    onClick={handleSave}
+                    disabled={isSaving || !isDirty}
+                    className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${
+                        isSaving || !isDirty
+                            ? 'bg-neutral-400 text-white cursor-not-allowed'
+                            : 'bg-primary text-white hover:bg-primary/90'
+                    }`}
+                >
+                    {isSaving ? (
+                        <>
+                            <div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                            Saving...
+                        </>
+                    ) : (
+                        <>
+                            <Save size={14} />
+                            {isDirty ? 'Save Changes' : 'Saved'}
+                        </>
+                    )}
+                </button>
+            </div>
+        </header>
+    );
+}

package/src/views/CanvasEditor/components/CustomBlockItem.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { GripVertical } from 'lucide-react';
+
+export interface CustomBlockItemProps {
+    blockType: string;
+    name: string;
+    description?: string;
+    icon: React.ReactNode;
+    onAddBlock?: (blockType: string) => void;
+}
+
+export function CustomBlockItem({
+    blockType,
+    name,
+    description,
+    icon,
+    onAddBlock
+}: CustomBlockItemProps) {
+    const [hasDragged, setHasDragged] = useState(false);
+    const mouseDownRef = useRef<{ x: number; y: number } | null>(null);
+
+    const handleDragStart = (e: React.DragEvent) => {
+        e.dataTransfer.setData('block-type', blockType);
+        e.dataTransfer.effectAllowed = 'move';
+        setHasDragged(true);
+    };
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        mouseDownRef.current = { x: e.clientX, y: e.clientY };
+        setHasDragged(false);
+    };
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        if (mouseDownRef.current) {
+            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
+            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
+            if (dx > 5 || dy > 5) {
+                setHasDragged(true);
+            }
+        }
+    };
+
+    const handleClick = (e: React.MouseEvent) => {
+        if (!hasDragged && onAddBlock) {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddBlock(blockType);
+        }
+        mouseDownRef.current = null;
+        setTimeout(() => setHasDragged(false), 100);
+    };
+
+    return (
+        <div
+            draggable
+            onDragStart={handleDragStart}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onClick={handleClick}
+            className="p-4 rounded-xl border border-dashboard-border bg-dashboard-bg hover:border-primary cursor-pointer transition-all group"
+            title={description}
+        >
+            <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                    <div className="text-neutral-500 dark:text-neutral-400 group-hover:text-primary dark:group-hover:text-primary transition-colors">
+                        {icon}
+                    </div>
+                    <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
+                        {name}
+                    </span>
+                </div>
+                <GripVertical size={12} className="text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-400" />
+            </div>
+            {description && (
+                <p className="text-[9px] text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2">
+                    {description}
+                </p>
+            )}
+        </div>
+    );
+}