diff --git a/src/pages/AdminEmailTemplates.tsx b/src/pages/AdminEmailTemplates.tsx new file mode 100644 index 0000000..44d6c15 --- /dev/null +++ b/src/pages/AdminEmailTemplates.tsx @@ -0,0 +1,548 @@ +import { useState, useCallback, useRef, useEffect } from 'react' +import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' +import { useTranslation } from 'react-i18next' +import { Link } from 'react-router-dom' +import { + adminEmailTemplatesApi, + EmailTemplateType, + EmailTemplateDetail, + EmailTemplateLanguageData, +} from '../api/adminEmailTemplates' + +// Icons +const BackIcon = () => ( + + + +) + +const MailIcon = () => ( + + + +) + +const SaveIcon = () => ( + + + +) + +const EyeIcon = () => ( + + + + +) + +const SendIcon = () => ( + + + +) + +const ResetIcon = () => ( + + + +) + +const XIcon = () => ( + + + +) + +const LANG_LABELS: Record = { + ru: 'RU', + en: 'EN', + zh: 'ZH', + ua: 'UA', +} + +const LANG_FULL_LABELS: Record = { + ru: 'Русский', + en: 'English', + zh: '中文', + ua: 'Українська', +} + +// ============ Template List View ============ + +function TemplateCard({ + template, + currentLang, + onClick, +}: { + template: EmailTemplateType + currentLang: string + onClick: () => void +}) { + const label = template.label[currentLang] || template.label['en'] || template.type + const description = template.description[currentLang] || template.description['en'] || '' + const customCount = Object.values(template.languages).filter(l => l.has_custom).length + + return ( + + ) +} + +// ============ Template Editor ============ + +function TemplateEditor({ + detail, + onClose, + currentLang: interfaceLang, +}: { + detail: EmailTemplateDetail + onClose: () => void + currentLang: string +}) { + const { t } = useTranslation() + const queryClient = useQueryClient() + const [activeLang, setActiveLang] = useState('ru') + const [editSubject, setEditSubject] = useState('') + const [editBody, setEditBody] = useState('') + const [isDirty, setIsDirty] = useState(false) + const [showPreview, setShowPreview] = useState(false) + const [previewHtml, setPreviewHtml] = useState('') + const [toast, setToast] = useState<{ type: 'success' | 'error'; message: string } | null>(null) + const textareaRef = useRef(null) + const iframeRef = useRef(null) + + const langData: EmailTemplateLanguageData | undefined = detail.languages[activeLang] + + // Load data for current language + useEffect(() => { + if (langData) { + setEditSubject(langData.subject) + setEditBody(langData.is_default ? langData.body_html : langData.body_html) + setIsDirty(false) + } + }, [activeLang, langData]) + + const showToast = useCallback((type: 'success' | 'error', message: string) => { + setToast({ type, message }) + setTimeout(() => setToast(null), 3000) + }, []) + + // Extract body content from full HTML (strip base template wrapper) + const extractBodyContent = useCallback((html: string): string => { + // If it's wrapped in the base template, extract just the content div + const contentMatch = html.match(/
\s*([\s\S]*?)\s*<\/div>\s*
/) + if (contentMatch) { + return contentMatch[1].trim() + } + return html + }, []) + + // When langData changes (e.g., after refetch), update the body content + useEffect(() => { + if (langData) { + if (langData.is_default) { + // For default templates, extract just the content portion + setEditBody(extractBodyContent(langData.body_html)) + } else { + setEditBody(langData.body_html) + } + setEditSubject(langData.subject) + setIsDirty(false) + } + }, [activeLang, langData, extractBodyContent]) + + // Save mutation + const saveMutation = useMutation({ + mutationFn: () => adminEmailTemplatesApi.updateTemplate(detail.notification_type, activeLang, { + subject: editSubject, + body_html: editBody, + }), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['admin', 'email-templates'] }) + queryClient.invalidateQueries({ queryKey: ['admin', 'email-template', detail.notification_type] }) + setIsDirty(false) + showToast('success', t('admin.emailTemplates.saved', 'Template saved')) + }, + onError: () => { + showToast('error', t('common.error', 'Error')) + }, + }) + + // Reset mutation + const resetMutation = useMutation({ + mutationFn: () => adminEmailTemplatesApi.deleteTemplate(detail.notification_type, activeLang), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['admin', 'email-templates'] }) + queryClient.invalidateQueries({ queryKey: ['admin', 'email-template', detail.notification_type] }) + setIsDirty(false) + showToast('success', t('admin.emailTemplates.resetted', 'Template reset to default')) + }, + onError: () => { + showToast('error', t('common.error', 'Error')) + }, + }) + + // Preview mutation + const previewMutation = useMutation({ + mutationFn: () => adminEmailTemplatesApi.previewTemplate(detail.notification_type, { + language: activeLang, + subject: editSubject, + body_html: editBody, + }), + onSuccess: (data) => { + setPreviewHtml(data.body_html) + setShowPreview(true) + }, + onError: () => { + showToast('error', t('common.error', 'Error')) + }, + }) + + // Send test mutation + const testMutation = useMutation({ + mutationFn: () => adminEmailTemplatesApi.sendTestEmail(detail.notification_type, { + language: activeLang, + }), + onSuccess: (data) => { + showToast('success', `${t('admin.emailTemplates.testSent', 'Test email sent')} → ${data.sent_to}`) + }, + onError: () => { + showToast('error', t('common.error', 'Error')) + }, + }) + + // Write preview HTML into iframe + useEffect(() => { + if (showPreview && iframeRef.current && previewHtml) { + const doc = iframeRef.current.contentDocument + if (doc) { + doc.open() + doc.write(previewHtml) + doc.close() + } + } + }, [showPreview, previewHtml]) + + const handleSubjectChange = (value: string) => { + setEditSubject(value) + setIsDirty(true) + } + + const handleBodyChange = (value: string) => { + setEditBody(value) + setIsDirty(true) + } + + const label = detail.label[interfaceLang] || detail.label['en'] || detail.notification_type + + return ( +
+ {/* Header */} +
+
+ +
+

{label}

+

+ {detail.description[interfaceLang] || detail.description['en'] || ''} +

+
+
+ {langData && !langData.is_default && ( + + Custom + + )} +
+ + {/* Language tabs */} +
+ {Object.keys(detail.languages).map(lang => { + const isActive = lang === activeLang + const langInfo = detail.languages[lang] + return ( + + ) + })} +
+ + {/* Subject */} +
+ + handleSubjectChange(e.target.value)} + className="w-full px-3 py-2.5 bg-dark-900 border border-dark-600 rounded-lg text-sm text-dark-100 placeholder-dark-500 focus:outline-none focus:ring-1 focus:ring-accent-500 focus:border-accent-500 transition-colors" + placeholder={t('admin.emailTemplates.subjectPlaceholder', 'Email subject line...')} + /> +
+ + {/* Context variables hint */} + {detail.context_vars.length > 0 && ( +
+

+ {t('admin.emailTemplates.variables', 'Available Variables')} +

+
+ {detail.context_vars.map(v => ( + { + navigator.clipboard.writeText(`{${v}}`) + showToast('success', `Copied {${v}}`) + }} + > + {`{${v}}`} + + ))} +
+
+ )} + + {/* Body HTML editor */} +
+ +