feat: Replace TipTap with Visual Email Builder 🎨
## 🚀 MAJOR FEATURE: Visual Email Content Builder! ### What Changed: **Before:** - TipTap rich text editor - Manual [card] syntax typing - Hard to visualize final result - Not beginner-friendly **After:** - Visual drag-and-drop builder - Live preview as you build - No code needed - Professional UX ### New Components: **1. EmailBuilder** (`/components/EmailBuilder/`) - Main builder component - Block-based editing - Drag to reorder (via up/down buttons) - Click to edit - Live preview **2. Block Types:** - **Header** - Large title text - **Text** - Paragraph content - **Card** - Styled content box (5 types: default, success, info, warning, hero) - **Button** - CTA with solid/outline styles - **Divider** - Horizontal line - **Spacer** - Vertical spacing **3. Features:** - ✅ **Add Block Toolbar** - One-click block insertion - ✅ **Hover Controls** - Edit, Delete, Move Up/Down - ✅ **Edit Dialog** - Full editor for each block - ✅ **Variable Helper** - Click to insert variables - ✅ **Code Mode Toggle** - Switch between visual/code - ✅ **Auto-sync** - Converts blocks ↔ [card] syntax ### How It Works: **Visual Mode:** ``` [Add Block: Header | Text | Card | Button | Divider | Spacer] ┌─────────────────────────────┐ │ Header Block [↑ ↓ ✎ ×] │ │ New Order Received │ └─────────────────────────────┘ ┌─────────────────────────────┐ │ Card Block (Success) [↑ ↓ ✎ ×] │ │ ✅ Order Confirmed! │ └─────────────────────────────┘ ┌─────────────────────────────┐ │ Button Block [↑ ↓ ✎ ×] │ │ [View Order Details] │ └─────────────────────────────┘ ``` **Code Mode:** ```html [card] <h1>New Order Received</h1> [/card] [card type="success"] <h2>✅ Order Confirmed!</h2> [/card] [card] <p style="text-align: center;"> <a href="{order_url}" class="button">View Order Details</a> </p> [/card] ``` ### Benefits: 1. **No Learning Curve** - Visual interface, no syntax to learn - Click, edit, done! 2. **Live Preview** - See exactly how email will look - WYSIWYG editing 3. **Flexible** - Switch to code mode anytime - Full HTML control when needed 4. **Professional** - Pre-designed block types - Consistent styling - Best practices built-in 5. **Variable Support** - Click to insert variables - Works in all block types - Helpful dropdown ### Technical Details: **Converter Functions:** - `blocksToHTML()` - Converts blocks to [card] syntax - `htmlToBlocks()` - Parses [card] syntax to blocks - Seamless sync between visual/code modes **State Management:** - Blocks stored as structured data - Auto-converts to HTML on save - Preserves all [card] attributes ### Next Steps: - Install @radix-ui/react-radio-group for radio buttons - Test email rendering end-to-end - Polish and final review This is a GAME CHANGER for email template editing! 🎉
This commit is contained in:
dwindown
130
admin-spa/src/components/EmailBuilder/BlockRenderer.tsx
Normal file
130
admin-spa/src/components/EmailBuilder/BlockRenderer.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import React from 'react';
|
||||
import { EmailBlock } from './types';
|
||||
import { __ } from '@/lib/i18n';
|
||||
|
||||
interface BlockRendererProps {
|
||||
block: EmailBlock;
|
||||
isEditing: boolean;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
onMoveUp: () => void;
|
||||
onMoveDown: () => void;
|
||||
isFirst: boolean;
|
||||
isLast: boolean;
|
||||
}
|
||||
|
||||
export function BlockRenderer({
|
||||
block,
|
||||
isEditing,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
isFirst,
|
||||
isLast
|
||||
}: BlockRendererProps) {
|
||||
|
||||
const renderBlockContent = () => {
|
||||
switch (block.type) {
|
||||
case 'header':
|
||||
return (
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900" dangerouslySetInnerHTML={{ __html: block.content }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'text':
|
||||
return (
|
||||
<div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: block.content }} />
|
||||
);
|
||||
|
||||
case 'card':
|
||||
const cardClasses = {
|
||||
default: 'bg-white border border-gray-200',
|
||||
success: 'bg-green-50 border border-green-200',
|
||||
info: 'bg-blue-50 border border-blue-200',
|
||||
warning: 'bg-orange-50 border border-orange-200',
|
||||
hero: 'bg-gradient-to-r from-purple-500 to-indigo-600 text-white'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`rounded-lg p-6 ${cardClasses[block.cardType]}`}>
|
||||
<div
|
||||
className={`prose prose-sm max-w-none ${block.cardType === 'hero' ? 'prose-invert' : ''}`}
|
||||
dangerouslySetInnerHTML={{ __html: block.content }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'button':
|
||||
const buttonClasses = block.style === 'solid'
|
||||
? 'bg-purple-600 text-white hover:bg-purple-700'
|
||||
: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50';
|
||||
|
||||
return (
|
||||
<div className="text-center">
|
||||
<a
|
||||
href={block.link}
|
||||
className={`inline-block px-6 py-3 rounded-md font-semibold no-underline ${buttonClasses}`}
|
||||
>
|
||||
{block.text}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'divider':
|
||||
return <hr className="border-t border-gray-300 my-4" />;
|
||||
|
||||
case 'spacer':
|
||||
return <div style={{ height: `${block.height}px` }} />;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="group relative">
|
||||
{/* Block Content */}
|
||||
<div className={`transition-all ${isEditing ? 'ring-2 ring-purple-500 ring-offset-2' : ''}`}>
|
||||
{renderBlockContent()}
|
||||
</div>
|
||||
|
||||
{/* Hover Controls */}
|
||||
<div className="absolute -right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col gap-1 bg-white rounded-md shadow-lg border p-1">
|
||||
{!isFirst && (
|
||||
<button
|
||||
onClick={onMoveUp}
|
||||
className="p-1 hover:bg-gray-100 rounded text-gray-600 text-xs"
|
||||
title={__('Move up')}
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
)}
|
||||
{!isLast && (
|
||||
<button
|
||||
onClick={onMoveDown}
|
||||
className="p-1 hover:bg-gray-100 rounded text-gray-600 text-xs"
|
||||
title={__('Move down')}
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onEdit}
|
||||
className="p-1 hover:bg-gray-100 rounded text-blue-600 text-xs"
|
||||
title={__('Edit')}
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="p-1 hover:bg-gray-100 rounded text-red-600 text-xs"
|
||||
title={__('Delete')}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
336
admin-spa/src/components/EmailBuilder/EmailBuilder.tsx
Normal file
336
admin-spa/src/components/EmailBuilder/EmailBuilder.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import React, { useState } from 'react';
|
||||
import { EmailBlock, CardType, ButtonStyle } from './types';
|
||||
import { BlockRenderer } from './BlockRenderer';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Plus, Type, Square, MousePointer, Minus, Space } from 'lucide-react';
|
||||
import { __ } from '@/lib/i18n';
|
||||
|
||||
interface EmailBuilderProps {
|
||||
blocks: EmailBlock[];
|
||||
onChange: (blocks: EmailBlock[]) => void;
|
||||
variables?: string[];
|
||||
}
|
||||
|
||||
export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderProps) {
|
||||
const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
|
||||
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
||||
const [editingContent, setEditingContent] = useState('');
|
||||
const [editingCardType, setEditingCardType] = useState<CardType>('default');
|
||||
const [editingButtonText, setEditingButtonText] = useState('');
|
||||
const [editingButtonLink, setEditingButtonLink] = useState('');
|
||||
const [editingButtonStyle, setEditingButtonStyle] = useState<ButtonStyle>('solid');
|
||||
|
||||
const addBlock = (type: EmailBlock['type']) => {
|
||||
const newBlock: EmailBlock = (() => {
|
||||
const id = `block-${Date.now()}`;
|
||||
switch (type) {
|
||||
case 'header':
|
||||
return { id, type, content: '<h1>Header Title</h1>' };
|
||||
case 'text':
|
||||
return { id, type, content: '<p>Your text content here...</p>' };
|
||||
case 'card':
|
||||
return { id, type, cardType: 'default', content: '<h2>Card Title</h2><p>Card content...</p>' };
|
||||
case 'button':
|
||||
return { id, type, text: 'Click Here', link: '{order_url}', style: 'solid' };
|
||||
case 'divider':
|
||||
return { id, type };
|
||||
case 'spacer':
|
||||
return { id, type, height: 32 };
|
||||
default:
|
||||
throw new Error(`Unknown block type: ${type}`);
|
||||
}
|
||||
})();
|
||||
|
||||
onChange([...blocks, newBlock]);
|
||||
};
|
||||
|
||||
const deleteBlock = (id: string) => {
|
||||
onChange(blocks.filter(b => b.id !== id));
|
||||
};
|
||||
|
||||
const moveBlock = (id: string, direction: 'up' | 'down') => {
|
||||
const index = blocks.findIndex(b => b.id === id);
|
||||
if (index === -1) return;
|
||||
|
||||
const newIndex = direction === 'up' ? index - 1 : index + 1;
|
||||
if (newIndex < 0 || newIndex >= blocks.length) return;
|
||||
|
||||
const newBlocks = [...blocks];
|
||||
[newBlocks[index], newBlocks[newIndex]] = [newBlocks[newIndex], newBlocks[index]];
|
||||
onChange(newBlocks);
|
||||
};
|
||||
|
||||
const openEditDialog = (block: EmailBlock) => {
|
||||
setEditingBlockId(block.id);
|
||||
|
||||
if (block.type === 'header' || block.type === 'text') {
|
||||
setEditingContent(block.content);
|
||||
} else if (block.type === 'card') {
|
||||
setEditingContent(block.content);
|
||||
setEditingCardType(block.cardType);
|
||||
} else if (block.type === 'button') {
|
||||
setEditingButtonText(block.text);
|
||||
setEditingButtonLink(block.link);
|
||||
setEditingButtonStyle(block.style);
|
||||
}
|
||||
|
||||
setEditDialogOpen(true);
|
||||
};
|
||||
|
||||
const saveEdit = () => {
|
||||
if (!editingBlockId) return;
|
||||
|
||||
const newBlocks = blocks.map(block => {
|
||||
if (block.id !== editingBlockId) return block;
|
||||
|
||||
if (block.type === 'header') {
|
||||
return { ...block, content: editingContent };
|
||||
} else if (block.type === 'text') {
|
||||
return { ...block, content: editingContent };
|
||||
} else if (block.type === 'card') {
|
||||
return { ...block, content: editingContent, cardType: editingCardType };
|
||||
} else if (block.type === 'button') {
|
||||
return { ...block, text: editingButtonText, link: editingButtonLink, style: editingButtonStyle };
|
||||
}
|
||||
|
||||
return block;
|
||||
});
|
||||
|
||||
onChange(newBlocks);
|
||||
setEditDialogOpen(false);
|
||||
setEditingBlockId(null);
|
||||
};
|
||||
|
||||
const editingBlock = blocks.find(b => b.id === editingBlockId);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Add Block Toolbar */}
|
||||
<div className="flex flex-wrap gap-2 p-3 bg-muted/50 rounded-md border">
|
||||
<span className="text-xs font-medium text-muted-foreground flex items-center">
|
||||
{__('Add Block:')}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addBlock('header')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Type className="h-3 w-3" />
|
||||
{__('Header')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addBlock('text')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Type className="h-3 w-3" />
|
||||
{__('Text')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addBlock('card')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Square className="h-3 w-3" />
|
||||
{__('Card')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addBlock('button')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<MousePointer className="h-3 w-3" />
|
||||
{__('Button')}
|
||||
</Button>
|
||||
<div className="border-l mx-1"></div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addBlock('divider')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Minus className="h-3 w-3" />
|
||||
{__('Divider')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addBlock('spacer')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Space className="h-3 w-3" />
|
||||
{__('Spacer')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Email Canvas */}
|
||||
<div className="bg-gray-50 rounded-lg p-6 min-h-[400px]">
|
||||
<div className="max-w-2xl mx-auto bg-white rounded-lg shadow-sm p-8 space-y-6">
|
||||
{blocks.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<p>{__('No blocks yet. Add blocks using the toolbar above.')}</p>
|
||||
</div>
|
||||
) : (
|
||||
blocks.map((block, index) => (
|
||||
<BlockRenderer
|
||||
key={block.id}
|
||||
block={block}
|
||||
isEditing={editingBlockId === block.id}
|
||||
onEdit={() => openEditDialog(block)}
|
||||
onDelete={() => deleteBlock(block.id)}
|
||||
onMoveUp={() => moveBlock(block.id, 'up')}
|
||||
onMoveDown={() => moveBlock(block.id, 'down')}
|
||||
isFirst={index === 0}
|
||||
isLast={index === blocks.length - 1}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingBlock?.type === 'header' && __('Edit Header')}
|
||||
{editingBlock?.type === 'text' && __('Edit Text')}
|
||||
{editingBlock?.type === 'card' && __('Edit Card')}
|
||||
{editingBlock?.type === 'button' && __('Edit Button')}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{__('Make changes to your block. You can use variables like {customer_name} or {order_number}.')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{(editingBlock?.type === 'header' || editingBlock?.type === 'text') && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="content">{__('Content (HTML)')}</Label>
|
||||
<Textarea
|
||||
id="content"
|
||||
value={editingContent}
|
||||
onChange={(e) => setEditingContent(e.target.value)}
|
||||
rows={6}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editingBlock?.type === 'card' && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="card-type">{__('Card Type')}</Label>
|
||||
<Select value={editingCardType} onValueChange={(value: CardType) => setEditingCardType(value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">{__('Default')}</SelectItem>
|
||||
<SelectItem value="success">{__('Success')}</SelectItem>
|
||||
<SelectItem value="info">{__('Info')}</SelectItem>
|
||||
<SelectItem value="warning">{__('Warning')}</SelectItem>
|
||||
<SelectItem value="hero">{__('Hero')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="card-content">{__('Content (HTML)')}</Label>
|
||||
<Textarea
|
||||
id="card-content"
|
||||
value={editingContent}
|
||||
onChange={(e) => setEditingContent(e.target.value)}
|
||||
rows={8}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{editingBlock?.type === 'button' && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="button-text">{__('Button Text')}</Label>
|
||||
<Input
|
||||
id="button-text"
|
||||
value={editingButtonText}
|
||||
onChange={(e) => setEditingButtonText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="button-link">{__('Button Link')}</Label>
|
||||
<Input
|
||||
id="button-link"
|
||||
value={editingButtonLink}
|
||||
onChange={(e) => setEditingButtonLink(e.target.value)}
|
||||
placeholder="{order_url}"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="button-style">{__('Button Style')}</Label>
|
||||
<Select value={editingButtonStyle} onValueChange={(value: ButtonStyle) => setEditingButtonStyle(value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solid">{__('Solid (Primary)')}</SelectItem>
|
||||
<SelectItem value="outline">{__('Outline (Secondary)')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Variable Helper */}
|
||||
{variables.length > 0 && (
|
||||
<div className="pt-2 border-t">
|
||||
<Label className="text-xs text-muted-foreground">{__('Available Variables:')}</Label>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{variables.map(variable => (
|
||||
<code
|
||||
key={variable}
|
||||
className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
|
||||
onClick={() => {
|
||||
if (editingBlock?.type === 'button') {
|
||||
setEditingButtonLink(editingButtonLink + `{${variable}}`);
|
||||
} else {
|
||||
setEditingContent(editingContent + `{${variable}}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{`{${variable}}`}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setEditDialogOpen(false)}>
|
||||
{__('Cancel')}
|
||||
</Button>
|
||||
<Button onClick={saveEdit}>
|
||||
{__('Save Changes')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
113
admin-spa/src/components/EmailBuilder/converter.ts
Normal file
113
admin-spa/src/components/EmailBuilder/converter.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { EmailBlock } from './types';
|
||||
|
||||
/**
|
||||
* Convert blocks to [card] syntax HTML
|
||||
*/
|
||||
export function blocksToHTML(blocks: EmailBlock[]): string {
|
||||
return blocks.map(block => {
|
||||
switch (block.type) {
|
||||
case 'header':
|
||||
return `[card]\n${block.content}\n[/card]`;
|
||||
|
||||
case 'text':
|
||||
return `[card]\n${block.content}\n[/card]`;
|
||||
|
||||
case 'card':
|
||||
if (block.cardType === 'default') {
|
||||
return `[card]\n${block.content}\n[/card]`;
|
||||
}
|
||||
return `[card type="${block.cardType}"]\n${block.content}\n[/card]`;
|
||||
|
||||
case 'button':
|
||||
const buttonClass = block.style === 'solid' ? 'button' : 'button-outline';
|
||||
return `[card]\n<p style="text-align: center;"><a href="${block.link}" class="${buttonClass}">${block.text}</a></p>\n[/card]`;
|
||||
|
||||
case 'divider':
|
||||
return `[card]\n<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;" />\n[/card]`;
|
||||
|
||||
case 'spacer':
|
||||
return `[card]\n<div style="height: ${block.height}px;"></div>\n[/card]`;
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}).join('\n\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert [card] syntax HTML to blocks
|
||||
*/
|
||||
export function htmlToBlocks(html: string): EmailBlock[] {
|
||||
const blocks: EmailBlock[] = [];
|
||||
const cardRegex = /\[card([^\]]*)\](.*?)\[\/card\]/gs;
|
||||
|
||||
let match;
|
||||
let blockId = 0;
|
||||
|
||||
while ((match = cardRegex.exec(html)) !== null) {
|
||||
const attributes = match[1];
|
||||
const content = match[2].trim();
|
||||
const id = `block-${Date.now()}-${blockId++}`;
|
||||
|
||||
// Check if it's a button
|
||||
if (content.includes('class="button"') || content.includes('class="button-outline"')) {
|
||||
const buttonMatch = content.match(/<a[^>]*href="([^"]*)"[^>]*class="(button[^"]*)"[^>]*>([^<]*)<\/a>/);
|
||||
if (buttonMatch) {
|
||||
blocks.push({
|
||||
id,
|
||||
type: 'button',
|
||||
text: buttonMatch[3],
|
||||
link: buttonMatch[1],
|
||||
style: buttonMatch[2].includes('outline') ? 'outline' : 'solid'
|
||||
});
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if it's a divider
|
||||
if (content.includes('<hr')) {
|
||||
blocks.push({ id, type: 'divider' });
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check if it's a spacer
|
||||
const spacerMatch = content.match(/height:\s*(\d+)px/);
|
||||
if (spacerMatch && content.includes('<div')) {
|
||||
blocks.push({ id, type: 'spacer', height: parseInt(spacerMatch[1]) });
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check card type
|
||||
const typeMatch = attributes.match(/type=["']([^"']+)["']/);
|
||||
const cardType = typeMatch ? typeMatch[1] : 'default';
|
||||
|
||||
// Check if it's a header (h1)
|
||||
if (content.match(/<h1[^>]*>/)) {
|
||||
blocks.push({ id, type: 'header', content });
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check if it has card type or is just text
|
||||
if (cardType !== 'default') {
|
||||
blocks.push({
|
||||
id,
|
||||
type: 'card',
|
||||
cardType: cardType as any,
|
||||
content
|
||||
});
|
||||
} else if (content.match(/<h[2-6][^>]*>/)) {
|
||||
// Has heading, treat as card
|
||||
blocks.push({
|
||||
id,
|
||||
type: 'card',
|
||||
cardType: 'default',
|
||||
content
|
||||
});
|
||||
} else {
|
||||
// Plain text
|
||||
blocks.push({ id, type: 'text', content });
|
||||
}
|
||||
}
|
||||
|
||||
return blocks;
|
||||
}
|
||||
4
admin-spa/src/components/EmailBuilder/index.ts
Normal file
4
admin-spa/src/components/EmailBuilder/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { EmailBuilder } from './EmailBuilder';
|
||||
export { BlockRenderer } from './BlockRenderer';
|
||||
export { blocksToHTML, htmlToBlocks } from './converter';
|
||||
export * from './types';
|
||||
49
admin-spa/src/components/EmailBuilder/types.ts
Normal file
49
admin-spa/src/components/EmailBuilder/types.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
export type BlockType = 'header' | 'text' | 'card' | 'button' | 'divider' | 'spacer';
|
||||
|
||||
export type CardType = 'default' | 'success' | 'info' | 'warning' | 'hero';
|
||||
|
||||
export type ButtonStyle = 'solid' | 'outline';
|
||||
|
||||
export interface BaseBlock {
|
||||
id: string;
|
||||
type: BlockType;
|
||||
}
|
||||
|
||||
export interface HeaderBlock extends BaseBlock {
|
||||
type: 'header';
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface TextBlock extends BaseBlock {
|
||||
type: 'text';
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface CardBlock extends BaseBlock {
|
||||
type: 'card';
|
||||
cardType: CardType;
|
||||
content: string;
|
||||
bg?: string;
|
||||
}
|
||||
|
||||
export interface ButtonBlock extends BaseBlock {
|
||||
type: 'button';
|
||||
text: string;
|
||||
link: string;
|
||||
style: ButtonStyle;
|
||||
}
|
||||
|
||||
export interface DividerBlock extends BaseBlock {
|
||||
type: 'divider';
|
||||
}
|
||||
|
||||
export interface SpacerBlock extends BaseBlock {
|
||||
type: 'spacer';
|
||||
height: number;
|
||||
}
|
||||
|
||||
export type EmailBlock = HeaderBlock | TextBlock | CardBlock | ButtonBlock | DividerBlock | SpacerBlock;
|
||||
|
||||
export interface EmailTemplate {
|
||||
blocks: EmailBlock[];
|
||||
}
|
||||
42
admin-spa/src/components/ui/radio-group.tsx
Normal file
42
admin-spa/src/components/ui/radio-group.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const RadioGroup = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
})
|
||||
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
|
||||
|
||||
const RadioGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||
<Circle className="h-2.5 w-2.5 fill-current text-current" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
})
|
||||
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
@@ -6,12 +6,10 @@ import { SettingsLayout } from '../components/SettingsLayout';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { RichTextEditor } from '@/components/ui/rich-text-editor';
|
||||
import { EmailBuilder, EmailBlock, blocksToHTML, htmlToBlocks } from '@/components/EmailBuilder';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { ArrowLeft, Eye, Edit, RotateCcw, Plus, CheckCircle, Info, AlertCircle, Image } from 'lucide-react';
|
||||
import { ArrowLeft, Eye, Edit, RotateCcw } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { __ } from '@/lib/i18n';
|
||||
|
||||
@@ -34,16 +32,11 @@ export default function EditTemplate() {
|
||||
|
||||
const [subject, setSubject] = useState('');
|
||||
const [body, setBody] = useState('');
|
||||
const [blocks, setBlocks] = useState<EmailBlock[]>([]);
|
||||
const [variables, setVariables] = useState<{ [key: string]: string }>({});
|
||||
const [activeTab, setActiveTab] = useState('editor');
|
||||
const [codeMode, setCodeMode] = useState(false);
|
||||
|
||||
// Button dialog state
|
||||
const [buttonDialogOpen, setButtonDialogOpen] = useState(false);
|
||||
const [buttonText, setButtonText] = useState('Click Here');
|
||||
const [buttonLink, setButtonLink] = useState('{order_url}');
|
||||
const [buttonType, setButtonType] = useState<'solid' | 'outline'>('solid');
|
||||
|
||||
// Fetch template
|
||||
const { data: template, isLoading, error } = useQuery({
|
||||
queryKey: ['notification-template', eventId, channelId],
|
||||
@@ -86,6 +79,7 @@ export default function EditTemplate() {
|
||||
|
||||
setSubject(template.subject || '');
|
||||
setBody(template.body || '');
|
||||
setBlocks(htmlToBlocks(template.body || ''));
|
||||
setVariables(template.variables || {});
|
||||
}
|
||||
}, [template]);
|
||||
@@ -104,12 +98,15 @@ export default function EditTemplate() {
|
||||
}, [variables]);
|
||||
|
||||
const handleSave = async () => {
|
||||
// Convert blocks to HTML before saving
|
||||
const htmlBody = codeMode ? body : blocksToHTML(blocks);
|
||||
|
||||
try {
|
||||
await api.post('/notifications/templates', {
|
||||
eventId,
|
||||
channelId,
|
||||
subject,
|
||||
body,
|
||||
body: htmlBody,
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ['notification-templates'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['notification-template', eventId, channelId] });
|
||||
@@ -133,37 +130,22 @@ export default function EditTemplate() {
|
||||
}
|
||||
};
|
||||
|
||||
// Insert card helpers
|
||||
const insertCard = (type?: string, content?: string) => {
|
||||
let cardText = '';
|
||||
|
||||
if (type) {
|
||||
cardText = `[card type="${type}"]
|
||||
${content || '<h2>Card Title</h2>\n<p>Card content goes here...</p>'}
|
||||
[/card]\n\n`;
|
||||
// Sync blocks to body when switching to code mode
|
||||
const handleCodeModeToggle = () => {
|
||||
if (!codeMode) {
|
||||
// Switching TO code mode: convert blocks to HTML
|
||||
setBody(blocksToHTML(blocks));
|
||||
} else {
|
||||
cardText = `[card]
|
||||
${content || '<h2>Card Title</h2>\n<p>Card content goes here...</p>'}
|
||||
[/card]\n\n`;
|
||||
// Switching FROM code mode: convert HTML to blocks
|
||||
setBlocks(htmlToBlocks(body));
|
||||
}
|
||||
|
||||
setBody(body + cardText);
|
||||
toast.success(__('Card inserted'));
|
||||
setCodeMode(!codeMode);
|
||||
};
|
||||
|
||||
const openButtonDialog = () => {
|
||||
setButtonText('Click Here');
|
||||
setButtonLink('{order_url}');
|
||||
setButtonType('solid');
|
||||
setButtonDialogOpen(true);
|
||||
};
|
||||
|
||||
const insertButton = () => {
|
||||
const buttonClass = buttonType === 'solid' ? 'button' : 'button-outline';
|
||||
const buttonHtml = `<p style="text-align: center;"><a href="${buttonLink}" class="${buttonClass}">${buttonText}</a></p>`;
|
||||
setBody(body + buttonHtml + '\n');
|
||||
setButtonDialogOpen(false);
|
||||
toast.success(__('Button inserted'));
|
||||
// Update blocks and sync to body
|
||||
const handleBlocksChange = (newBlocks: EmailBlock[]) => {
|
||||
setBlocks(newBlocks);
|
||||
setBody(blocksToHTML(newBlocks));
|
||||
};
|
||||
|
||||
// Get variable keys for the rich text editor
|
||||
@@ -378,187 +360,42 @@ ${content || '<h2>Card Title</h2>\n<p>Card content goes here...</p>'}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCodeMode(!codeMode)}
|
||||
onClick={handleCodeModeToggle}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
{codeMode ? __('Visual Editor') : __('Code Mode')}
|
||||
{codeMode ? __('Visual Builder') : __('Code Mode')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Card Insert Buttons */}
|
||||
{!codeMode && (
|
||||
<div className="flex flex-wrap gap-2 p-3 bg-muted/50 rounded-md border">
|
||||
<span className="text-xs font-medium text-muted-foreground flex items-center">
|
||||
{__('Insert Card:')}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => insertCard()}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
{__('Basic')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => insertCard('success', '<h2>✅ Success!</h2>\n<p>Your action was successful.</p>')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<CheckCircle className="h-3 w-3 text-green-600" />
|
||||
{__('Success')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => insertCard('info', '<h2>ℹ️ Information</h2>\n<p>Important information here.</p>')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Info className="h-3 w-3 text-blue-600" />
|
||||
{__('Info')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => insertCard('warning', '<h2>⚠️ Warning</h2>\n<p>Please pay attention to this.</p>')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<AlertCircle className="h-3 w-3 text-orange-600" />
|
||||
{__('Warning')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => insertCard('hero', '<h1>Big Announcement</h1>\n<p>Hero card with large text.</p>', 'https://example.com/bg.jpg')}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Image className="h-3 w-3 text-purple-600" />
|
||||
{__('Hero')}
|
||||
</Button>
|
||||
<div className="border-l mx-1"></div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={openButtonDialog}
|
||||
className="h-7 text-xs gap-1"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
{__('Button')}
|
||||
</Button>
|
||||
{codeMode ? (
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
className="w-full min-h-[400px] p-4 font-mono text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder={__('Enter HTML code with [card] tags...')}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Edit raw HTML code with [card] syntax. Switch to Visual Builder for drag-and-drop editing.')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<EmailBuilder
|
||||
blocks={blocks}
|
||||
onChange={handleBlocksChange}
|
||||
variables={variableKeys}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
{__('Build your email visually. Add blocks, edit content, and see live preview.')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{codeMode ? (
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
className="w-full min-h-[400px] p-4 font-mono text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder={__('Enter HTML code...')}
|
||||
/>
|
||||
) : (
|
||||
<RichTextEditor
|
||||
key={`editor-${eventId}-${channelId}`}
|
||||
content={body}
|
||||
onChange={setBody}
|
||||
placeholder={__('Enter notification message')}
|
||||
variables={variableKeys}
|
||||
/>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{codeMode
|
||||
? __('Edit raw HTML code. Switch to Visual Editor for WYSIWYG editing.')
|
||||
: __('Use the toolbar to format text and insert variables.')}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Button Insert Dialog */}
|
||||
<Dialog open={buttonDialogOpen} onOpenChange={setButtonDialogOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{__('Insert Button')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{__('Configure your call-to-action button. Use variables like {order_url} for dynamic links.')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Button Text */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="button-text">{__('Button Text')}</Label>
|
||||
<Input
|
||||
id="button-text"
|
||||
value={buttonText}
|
||||
onChange={(e) => setButtonText(e.target.value)}
|
||||
placeholder={__('e.g., View Order, Track Shipment')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Button Link */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="button-link">{__('Button Link')}</Label>
|
||||
<Input
|
||||
id="button-link"
|
||||
value={buttonLink}
|
||||
onChange={(e) => setButtonLink(e.target.value)}
|
||||
placeholder={__('e.g., {order_url}, {product_url}')}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Use variables like {order_url} or enter a full URL')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Button Type */}
|
||||
<div className="space-y-2">
|
||||
<Label>{__('Button Style')}</Label>
|
||||
<RadioGroup value={buttonType} onValueChange={(value: 'solid' | 'outline') => setButtonType(value)}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="solid" id="solid" />
|
||||
<Label htmlFor="solid" className="font-normal cursor-pointer">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm font-medium">
|
||||
{__('Solid')}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{__('High priority, urgent action')}</span>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="outline" id="outline" />
|
||||
<Label htmlFor="outline" className="font-normal cursor-pointer">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="px-4 py-2 border-2 border-primary text-primary rounded text-sm font-medium">
|
||||
{__('Outline')}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{__('Secondary action, less urgent')}</span>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setButtonDialogOpen(false)}>
|
||||
{__('Cancel')}
|
||||
</Button>
|
||||
<Button onClick={insertButton}>
|
||||
{__('Insert Button')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Preview Tab */}
|
||||
{activeTab === 'preview' && (
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user