260 lines
12 KiB
TypeScript
260 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../ui/dialog';
|
|
import { Button } from '../../ui/button';
|
|
import { Label } from '../../ui/label';
|
|
import { Input } from '../../ui/input';
|
|
import { Textarea } from '../../ui/textarea';
|
|
import { Switch } from '../../ui/switch';
|
|
import { Loader2, Play, Info, Copy, CheckCircle2, Settings, Edit2 } from 'lucide-react';
|
|
import { Badge } from '../../ui/badge';
|
|
|
|
interface TemplateDialogProps {
|
|
isOpen: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
editingTemplate: any;
|
|
setEditingTemplate: (template: any) => void;
|
|
testDataInput: string;
|
|
setTestDataInput: (data: string) => void;
|
|
previewLoading: boolean;
|
|
handlePreviewTemplate: () => void;
|
|
previewContent: any;
|
|
handleSaveTemplate: () => void;
|
|
}
|
|
|
|
export const TemplateDialog: React.FC<TemplateDialogProps> = ({
|
|
isOpen, onOpenChange, editingTemplate, setEditingTemplate,
|
|
testDataInput, setTestDataInput, previewLoading, handlePreviewTemplate,
|
|
previewContent, handleSaveTemplate
|
|
}) => {
|
|
const textareaRef = React.useRef<HTMLTextAreaElement>(null);
|
|
|
|
const insertPlaceholder = (placeholder: string) => {
|
|
if (!textareaRef.current) return;
|
|
const { selectionStart, selectionEnd } = textareaRef.current;
|
|
const text = editingTemplate?.body || '';
|
|
const newText = text.substring(0, selectionStart) + `{{${placeholder}}}` + text.substring(selectionEnd);
|
|
setEditingTemplate({ ...editingTemplate!, body: newText });
|
|
|
|
// Set focus back and move cursor
|
|
setTimeout(() => {
|
|
if (textareaRef.current) {
|
|
textareaRef.current.focus();
|
|
textareaRef.current.setSelectionRange(selectionStart + placeholder.length + 4, selectionStart + placeholder.length + 4);
|
|
}
|
|
}, 0);
|
|
};
|
|
|
|
const placeholders = editingTemplate?.placeholders || [];
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-7xl w-full max-h-[95vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{editingTemplate?.id ? 'Edit Email Template' : 'Add Email Template'}</DialogTitle>
|
|
<DialogDescription>Configure automated email template with dynamic content</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
{/* Left Column: Template Configuration */}
|
|
<div className="lg:col-span-4 space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200 space-y-4">
|
|
<h3 className="text-sm font-semibold text-slate-800 flex items-center gap-2">
|
|
<Settings className="w-4 h-4 text-amber-600" />
|
|
General Settings
|
|
</h3>
|
|
<div>
|
|
<Label className="text-xs uppercase tracking-wider text-slate-500">Template Name</Label>
|
|
<Input
|
|
placeholder="e.g., Application Received"
|
|
className="mt-1.5 bg-white"
|
|
value={editingTemplate?.name || ''}
|
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs uppercase tracking-wider text-slate-500">Trigger Code</Label>
|
|
<Input
|
|
placeholder="e.g., APPLICATION_RECEIVED"
|
|
className="mt-1.5 bg-white font-mono text-xs"
|
|
value={editingTemplate?.templateCode || ''}
|
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, templateCode: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs uppercase tracking-wider text-slate-500">Description</Label>
|
|
<Input
|
|
placeholder="Brief purpose of this email"
|
|
className="mt-1.5 bg-white"
|
|
value={editingTemplate?.description || ''}
|
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, description: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between pt-2 border-t mt-2">
|
|
<div className="flex items-center space-x-2">
|
|
<Switch
|
|
id="active"
|
|
checked={editingTemplate?.isActive ?? true}
|
|
onCheckedChange={(checked) => setEditingTemplate({ ...editingTemplate!, isActive: checked })}
|
|
/>
|
|
<Label htmlFor="active" className="text-sm cursor-pointer">Active</Label>
|
|
</div>
|
|
<Badge className={editingTemplate?.isActive ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-500"}>
|
|
{editingTemplate?.isActive ? 'Template Enabled' : 'Template Disabled'}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Placeholders Library */}
|
|
<div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
|
|
<h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2 mb-3">
|
|
<Info className="w-4 h-4" />
|
|
Available Placeholders
|
|
</h3>
|
|
<p className="text-[10px] text-amber-700 mb-4 leading-relaxed">
|
|
Click on a placeholder below to insert it at your current cursor position in the editor.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{placeholders.length > 0 ? placeholders.map((p: string) => (
|
|
<button
|
|
key={p}
|
|
onClick={() => insertPlaceholder(p)}
|
|
className="px-2 py-1 bg-white border border-amber-200 rounded text-[11px] font-mono text-amber-800 hover:bg-amber-600 hover:text-white hover:border-amber-600 transition-all flex items-center gap-1 shadow-sm"
|
|
>
|
|
{`{{${p}}}`}
|
|
</button>
|
|
)) : (
|
|
<div className="w-full py-4 text-center border-2 border-dashed border-amber-200 rounded-lg">
|
|
<p className="text-[10px] text-amber-600">No placeholders defined for this trigger</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Middle Column: Editor */}
|
|
<div className="lg:col-span-4 space-y-4 flex flex-col h-full min-h-[600px]">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-slate-900 flex items-center gap-2">
|
|
<Edit2 className="w-4 h-4 text-amber-600" />
|
|
Template Designer
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col space-y-4">
|
|
<div>
|
|
<Label className="text-xs font-semibold">Subject Line</Label>
|
|
<Input
|
|
placeholder="Subject line with {{variables}}"
|
|
className="mt-1.5 text-slate-900 font-medium"
|
|
value={editingTemplate?.subject || ''}
|
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, subject: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col">
|
|
<Label className="text-xs font-semibold mb-1.5">Email Body (HTML/Handlebars)</Label>
|
|
<div className="relative flex-1">
|
|
<Textarea
|
|
ref={textareaRef}
|
|
placeholder="Hello {{applicant_name}}, ..."
|
|
className="h-full min-h-[450px] font-mono text-sm text-slate-900 bg-slate-900/5 focus:bg-white transition-colors p-4 resize-none"
|
|
value={editingTemplate?.body || ''}
|
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, body: e.target.value })}
|
|
/>
|
|
<div className="absolute bottom-3 right-3 opacity-30 pointer-events-none text-[10px] font-mono">
|
|
HTML Support Enabled
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Preview & Simulation */}
|
|
<div className="lg:col-span-4 space-y-6 lg:border-l lg:pl-8 flex flex-col h-full">
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900 flex items-center gap-2 mb-4">
|
|
<Play className="w-4 h-4 text-green-600" />
|
|
Live Simulation
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<Label className="text-xs font-semibold">Mock Test Data (JSON)</Label>
|
|
<button
|
|
onClick={() => setTestDataInput('{"applicantName": "Rajesh Kumar", "location": "Mumbai South", "applicationId": "APP-2026-X12"}')}
|
|
className="text-[10px] text-amber-600 hover:underline"
|
|
>
|
|
Reset to Sample
|
|
</button>
|
|
</div>
|
|
<Textarea
|
|
placeholder='{"applicant_name": "John Doe"}'
|
|
className="font-mono text-[11px] text-slate-900 bg-slate-50"
|
|
rows={6}
|
|
value={testDataInput}
|
|
onChange={(e) => setTestDataInput(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
variant="default"
|
|
className="w-full bg-green-600 hover:bg-green-700 shadow-md"
|
|
onClick={handlePreviewTemplate}
|
|
disabled={previewLoading}
|
|
>
|
|
{previewLoading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Play className="w-4 h-4 mr-2" />}
|
|
Generate Mock Preview
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col">
|
|
<Label className="text-xs font-semibold mb-2">Simulated Output</Label>
|
|
<div className="flex-1 border rounded-xl overflow-hidden flex flex-col bg-slate-50 shadow-inner">
|
|
{previewContent ? (
|
|
<>
|
|
<div className="bg-white p-3 border-b text-[11px] font-semibold text-slate-700 flex items-center justify-between">
|
|
<div className="truncate shrink">
|
|
<span className="text-slate-400 mr-2">Subject:</span> {previewContent.subject}
|
|
</div>
|
|
<Badge variant="outline" className="bg-green-50 text-green-600 text-[9px] whitespace-nowrap ml-2">
|
|
<CheckCircle2 className="w-3 h-3 mr-1" /> Compiled
|
|
</Badge>
|
|
</div>
|
|
<div className="p-6 bg-white overflow-auto flex-1 shadow-sm">
|
|
<div className="max-w-none text-sm text-slate-800 email-preview-container"
|
|
dangerouslySetInnerHTML={{ __html: previewContent.html }} />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center text-slate-400 space-y-3">
|
|
<div className="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center">
|
|
<Play className="w-8 h-8 opacity-20" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-500">Ready for Preview</p>
|
|
<p className="text-[11px]">Click "Generate Mock Preview" to see how your placeholders resolve with the test data.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4 border-t mt-4">
|
|
<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={handleSaveTemplate}>
|
|
Save Template
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|