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);
|
setPreviewLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await masterService.previewEmailTemplate({
|
const res = await masterService.previewEmailTemplate({
|
||||||
template: editingTemplate,
|
subject: editingTemplate?.subject,
|
||||||
testData: JSON.parse(testDataInput)
|
body: editingTemplate?.body,
|
||||||
|
data: JSON.parse(testDataInput)
|
||||||
}) as any;
|
}) as any;
|
||||||
if (res.success) setPreviewContent(res.data);
|
if (res.success) setPreviewContent(res.data);
|
||||||
} catch (error) { toast.error('Preview failed'); }
|
} catch (error) { toast.error('Preview failed'); }
|
||||||
@ -516,8 +517,27 @@ export const MasterPage: React.FC = () => {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="templates" className="animate-in fade-in duration-300">
|
<TabsContent value="templates" className="animate-in fade-in duration-300">
|
||||||
<EmailTemplates onAddTemplate={() => setShowTemplateDialog(true)}
|
<EmailTemplates
|
||||||
onEditTemplate={() => toast.info('Template Editor being updated')} onDeleteTemplate={() => toast.error('Delete Template restricted')} />
|
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>
|
||||||
|
|
||||||
<TabsContent value="locations" className="animate-in fade-in duration-300">
|
<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 { Input } from '../../ui/input';
|
||||||
import { Textarea } from '../../ui/textarea';
|
import { Textarea } from '../../ui/textarea';
|
||||||
import { Switch } from '../../ui/switch';
|
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 {
|
interface TemplateDialogProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@ -25,6 +26,26 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
|
|||||||
testDataInput, setTestDataInput, previewLoading, handlePreviewTemplate,
|
testDataInput, setTestDataInput, previewLoading, handlePreviewTemplate,
|
||||||
previewContent, handleSaveTemplate
|
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 (
|
return (
|
||||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="sm:max-w-7xl w-full max-h-[95vh] overflow-y-auto">
|
<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>
|
<DialogDescription>Configure automated email template with dynamic content</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||||
<div className="space-y-4">
|
{/* Left Column: Template Configuration */}
|
||||||
<div>
|
<div className="lg:col-span-4 space-y-6">
|
||||||
<Label>Template Name</Label>
|
<div className="space-y-4">
|
||||||
<Input
|
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200 space-y-4">
|
||||||
placeholder="e.g., Application Received"
|
<h3 className="text-sm font-semibold text-slate-800 flex items-center gap-2">
|
||||||
className="mt-2 text-slate-900"
|
<Settings className="w-4 h-4 text-amber-600" />
|
||||||
value={editingTemplate?.name || ''}
|
General Settings
|
||||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, name: e.target.value })}
|
</h3>
|
||||||
/>
|
<div>
|
||||||
</div>
|
<Label className="text-xs uppercase tracking-wider text-slate-500">Template Name</Label>
|
||||||
<div>
|
<Input
|
||||||
<Label>Template Code (Unique)</Label>
|
placeholder="e.g., Application Received"
|
||||||
<Input
|
className="mt-1.5 bg-white"
|
||||||
placeholder="e.g., APPLICATION_RECEIVED"
|
value={editingTemplate?.name || ''}
|
||||||
className="mt-2 text-slate-900"
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, name: e.target.value })}
|
||||||
value={editingTemplate?.templateCode || ''}
|
/>
|
||||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, templateCode: e.target.value })}
|
</div>
|
||||||
/>
|
<div>
|
||||||
</div>
|
<Label className="text-xs uppercase tracking-wider text-slate-500">Trigger Code</Label>
|
||||||
<div>
|
<Input
|
||||||
<Label>Email Subject</Label>
|
placeholder="e.g., APPLICATION_RECEIVED"
|
||||||
<Input
|
className="mt-1.5 bg-white font-mono text-xs"
|
||||||
placeholder="Subject line with {{variables}}"
|
value={editingTemplate?.templateCode || ''}
|
||||||
className="mt-2 text-slate-900"
|
onChange={(e) => setEditingTemplate({ ...editingTemplate!, templateCode: e.target.value })}
|
||||||
value={editingTemplate?.subject || ''}
|
/>
|
||||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, subject: e.target.value })}
|
</div>
|
||||||
/>
|
<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>
|
{/* Placeholders Library */}
|
||||||
<Label>Email Body (Handlebars supported)</Label>
|
<div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
|
||||||
<Textarea
|
<h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2 mb-3">
|
||||||
placeholder="Hello {{applicant_name}}, ..."
|
<Info className="w-4 h-4" />
|
||||||
className="mt-2 font-mono text-sm text-slate-900"
|
Available Placeholders
|
||||||
rows={12}
|
</h3>
|
||||||
value={editingTemplate?.body || ''}
|
<p className="text-[10px] text-amber-700 mb-4 leading-relaxed">
|
||||||
onChange={(e) => setEditingTemplate({ ...editingTemplate!, body: e.target.value })}
|
Click on a placeholder below to insert it at your current cursor position in the editor.
|
||||||
/>
|
</p>
|
||||||
</div>
|
<div className="flex flex-wrap gap-2">
|
||||||
<div className="flex items-center space-x-2">
|
{placeholders.length > 0 ? placeholders.map((p: string) => (
|
||||||
<Switch
|
<button
|
||||||
id="active"
|
key={p}
|
||||||
checked={editingTemplate?.isActive ?? true}
|
onClick={() => insertPlaceholder(p)}
|
||||||
onCheckedChange={(checked) => setEditingTemplate({ ...editingTemplate!, isActive: checked })}
|
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"
|
||||||
/>
|
>
|
||||||
<Label htmlFor="active">Active template</Label>
|
{`{{${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>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4 lg:border-l lg:pl-6">
|
{/* Middle Column: Editor */}
|
||||||
<h3 className="font-semibold text-slate-900">Preview & Test</h3>
|
<div className="lg:col-span-4 space-y-4 flex flex-col h-full min-h-[600px]">
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<Label>Test Data (JSON)</Label>
|
<h3 className="font-semibold text-slate-900 flex items-center gap-2">
|
||||||
<Textarea
|
<Edit2 className="w-4 h-4 text-amber-600" />
|
||||||
placeholder='{"applicant_name": "John Doe"}'
|
Template Designer
|
||||||
className="mt-2 font-mono text-xs text-slate-900"
|
</h3>
|
||||||
rows={6}
|
|
||||||
value={testDataInput}
|
|
||||||
onChange={(e) => setTestDataInput(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
{previewContent && (
|
<div className="flex-1 flex flex-col space-y-4">
|
||||||
<div className="mt-4 border rounded-lg overflow-hidden flex flex-col max-h-[500px]">
|
<div>
|
||||||
<div className="bg-slate-100 p-2 border-b text-xs font-mono text-slate-500 shrink-0">
|
<Label className="text-xs font-semibold">Subject Line</Label>
|
||||||
Subject: {previewContent.subject}
|
<Input
|
||||||
</div>
|
placeholder="Subject line with {{variables}}"
|
||||||
<div className="p-4 bg-white prose prose-sm max-w-none overflow-auto flex-1">
|
className="mt-1.5 text-slate-900 font-medium"
|
||||||
<div dangerouslySetInnerHTML={{ __html: previewContent.html }} />
|
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>
|
||||||
)}
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user