diff --git a/admin-spa/src/components/ui/rich-text-editor.tsx b/admin-spa/src/components/ui/rich-text-editor.tsx index ee8bee0..b4c145b 100644 --- a/admin-spa/src/components/ui/rich-text-editor.tsx +++ b/admin-spa/src/components/ui/rich-text-editor.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useEditor, EditorContent } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; import Placeholder from '@tiptap/extension-placeholder'; @@ -55,6 +55,13 @@ export function RichTextEditor({ }, }); + // Update editor content when prop changes (fix for default value not showing) + useEffect(() => { + if (editor && content !== editor.getHTML()) { + editor.commands.setContent(content); + } + }, [content, editor]); + if (!editor) { return null; } diff --git a/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx b/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx index 2dc45d4..a9bd007 100644 --- a/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx +++ b/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx @@ -21,7 +21,8 @@ import { SelectValue, } from '@/components/ui/select'; import { Badge } from '@/components/ui/badge'; -import { X, Plus } from 'lucide-react'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { X, Plus, Eye, Edit } from 'lucide-react'; import { toast } from 'sonner'; import { __ } from '@/lib/i18n'; @@ -48,14 +49,17 @@ export default function TemplateEditor({ const [subject, setSubject] = useState(''); const [body, setBody] = useState(''); const [variables, setVariables] = useState<{ [key: string]: string }>({}); + const [activeTab, setActiveTab] = useState('editor'); useEffect(() => { if (initialTemplate) { setSubject(initialTemplate.subject || ''); - setBody(initialTemplate.body || ''); + // Set body with default value - ensure it's set properly + const defaultBody = initialTemplate.body || ''; + setBody(defaultBody); setVariables(initialTemplate.variables || {}); } - }, [initialTemplate]); + }, [initialTemplate, open]); const saveMutation = useMutation({ mutationFn: async () => { @@ -93,80 +97,138 @@ export default function TemplateEditor({ // Get variable keys for the rich text editor const variableKeys = Object.keys(variables); + // Generate preview HTML + const generatePreviewHTML = () => { + // Simple preview - replace variables with sample data + let previewBody = body; + Object.keys(variables).forEach(key => { + const sampleValue = `[${key}]`; + previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue); + }); + + return ` + + + + + + +
+
+ [Your Store Name] +
+
+ ${previewBody} +
+
+

© ${new Date().getFullYear()} [Your Store Name]. All rights reserved.

+
+
+ + + `; + }; + return ( - - + + {/* Header - Fixed */} + {__('Edit Template')}: {eventLabel} - {channelLabel} - - {__('Customize the notification template. Use variables like {customer_name} to personalize messages.')} - - - -
- {/* Subject */} -
- +
+ setSubject(e.target.value)} placeholder={__('Enter notification subject')} /> -

- {channelId === 'email' - ? __('Email subject line') - : __('Push notification title')} -

+ - {/* Body */} -
- - -

- {__('Click variables below to insert them into your message')} -

-
+ {/* Body - Scrollable */} +
+ + + + + {__('Editor')} + + + + {__('Preview')} + + - {/* Variable Reference */} -
- -
- {Object.entries(variables).map(([key, label]) => ( - - - {`{${key}}`} - - ))} -
-

- {__('Click a variable to insert it at cursor position')} -

-
+ {/* Editor Tab */} + +
+ + +
+

+ {__('Available Variables:')} +

+
+ {Object.keys(variables).map((key) => ( + + {`{${key}}`} + + ))} +
+
+
+ - {/* Preview */} -
- -
-
{subject || __('(No subject)')}
-
{body || __('(No message)')}
-
-
+ {/* Preview Tab */} + +
+ +
+