data alteration done email templates addd for shortlist and questionnarie fill acknowldgement
This commit is contained in:
parent
0696756160
commit
3c54b8499e
@ -353,8 +353,9 @@ export const MasterPage: React.FC = () => {
|
||||
setPreviewLoading(true);
|
||||
try {
|
||||
const res = await masterService.previewEmailTemplate({
|
||||
template: editingTemplate,
|
||||
testData: JSON.parse(testDataInput)
|
||||
subject: editingTemplate?.subject,
|
||||
body: editingTemplate?.body,
|
||||
data: JSON.parse(testDataInput)
|
||||
}) as any;
|
||||
if (res.success) setPreviewContent(res.data);
|
||||
} catch (error) { toast.error('Preview failed'); }
|
||||
@ -516,8 +517,27 @@ export const MasterPage: React.FC = () => {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="templates" className="animate-in fade-in duration-300">
|
||||
<EmailTemplates onAddTemplate={() => setShowTemplateDialog(true)}
|
||||
onEditTemplate={() => toast.info('Template Editor being updated')} onDeleteTemplate={() => toast.error('Delete Template restricted')} />
|
||||
<EmailTemplates
|
||||
onAddTemplate={() => {
|
||||
setEditingTemplate({ templateCode: '', subject: '', body: '', description: '', placeholders: [] });
|
||||
setTestDataInput('{}');
|
||||
setShowTemplateDialog(true);
|
||||
}}
|
||||
onEditTemplate={(template) => {
|
||||
setEditingTemplate(template);
|
||||
if (template.placeholders && Array.isArray(template.placeholders)) {
|
||||
const defaults = template.placeholders.reduce((acc: any, p: string) => {
|
||||
acc[p] = `[${p}]`;
|
||||
return acc;
|
||||
}, {});
|
||||
setTestDataInput(JSON.stringify(defaults, null, 2));
|
||||
} else {
|
||||
setTestDataInput('{}');
|
||||
}
|
||||
setShowTemplateDialog(true);
|
||||
}}
|
||||
onDeleteTemplate={() => toast.error('Delete Template restricted')}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="locations" className="animate-in fade-in duration-300">
|
||||
|
||||
@ -5,7 +5,8 @@ import { Label } from '../../ui/label';
|
||||
import { Input } from '../../ui/input';
|
||||
import { Textarea } from '../../ui/textarea';
|
||||
import { Switch } from '../../ui/switch';
|
||||
import { Loader2, Play } from 'lucide-react';
|
||||
import { Loader2, Play, Info, Copy, CheckCircle2, Settings, Edit2 } from 'lucide-react';
|
||||
import { Badge } from '../../ui/badge';
|
||||
|
||||
interface TemplateDialogProps {
|
||||
isOpen: boolean;
|
||||
@ -25,6 +26,26 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
|
||||
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">
|
||||
@ -33,88 +54,194 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
|
||||
<DialogDescription>Configure automated email template with dynamic content</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Template Name</Label>
|
||||
<Input
|
||||
placeholder="e.g., Application Received"
|
||||
className="mt-2 text-slate-900"
|
||||
value={editingTemplate?.name || ''}
|
||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Template Code (Unique)</Label>
|
||||
<Input
|
||||
placeholder="e.g., APPLICATION_RECEIVED"
|
||||
className="mt-2 text-slate-900"
|
||||
value={editingTemplate?.templateCode || ''}
|
||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, templateCode: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Email Subject</Label>
|
||||
<Input
|
||||
placeholder="Subject line with {{variables}}"
|
||||
className="mt-2 text-slate-900"
|
||||
value={editingTemplate?.subject || ''}
|
||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, subject: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<Label>Email Body (Handlebars supported)</Label>
|
||||
<Textarea
|
||||
placeholder="Hello {{applicant_name}}, ..."
|
||||
className="mt-2 font-mono text-sm text-slate-900"
|
||||
rows={12}
|
||||
value={editingTemplate?.body || ''}
|
||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, body: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="active"
|
||||
checked={editingTemplate?.isActive ?? true}
|
||||
onCheckedChange={(checked) => setEditingTemplate({ ...editingTemplate!, isActive: checked })}
|
||||
/>
|
||||
<Label htmlFor="active">Active template</Label>
|
||||
{/* 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>
|
||||
|
||||
<div className="space-y-4 lg:border-l lg:pl-6">
|
||||
<h3 className="font-semibold text-slate-900">Preview & Test</h3>
|
||||
<div>
|
||||
<Label>Test Data (JSON)</Label>
|
||||
<Textarea
|
||||
placeholder='{"applicant_name": "John Doe"}'
|
||||
className="mt-2 font-mono text-xs text-slate-900"
|
||||
rows={6}
|
||||
value={testDataInput}
|
||||
onChange={(e) => setTestDataInput(e.target.value)}
|
||||
/>
|
||||
{/* 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>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
onClick={handlePreviewTemplate}
|
||||
disabled={previewLoading}
|
||||
>
|
||||
{previewLoading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Play className="w-4 h-4 mr-2" />}
|
||||
Generate Preview
|
||||
</Button>
|
||||
|
||||
<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>
|
||||
|
||||
{previewContent && (
|
||||
<div className="mt-4 border rounded-lg overflow-hidden flex flex-col max-h-[500px]">
|
||||
<div className="bg-slate-100 p-2 border-b text-xs font-mono text-slate-500 shrink-0">
|
||||
Subject: {previewContent.subject}
|
||||
</div>
|
||||
<div className="p-4 bg-white prose prose-sm max-w-none overflow-auto flex-1">
|
||||
<div dangerouslySetInnerHTML={{ __html: previewContent.html }} />
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user