egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Email template improvements

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-28 16:56:36 -06:00
parent e65669fede
commit 57d2c43da7
13 changed files with 325 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/features/admin/mobile/AdminEmailTemplatesMobileScreen.tsx
View File

@@ -38,6 +38,8 @@ export const AdminEmailTemplatesMobileScreen: React.FC = () => {
const [editIsActive, setEditIsActive] = useState(true);
const [previewSubject, setPreviewSubject] = useState('');
const [previewBody, setPreviewBody] = useState('');
const [previewHtml, setPreviewHtml] = useState('');
const [showHtmlPreview, setShowHtmlPreview] = useState(false);
// Queries
const { data: templates, isLoading } = useQuery({
@@ -66,6 +68,7 @@ export const AdminEmailTemplatesMobileScreen: React.FC = () => {
onSuccess: (data) => {
setPreviewSubject(data.subject);
setPreviewBody(data.body);
setPreviewHtml(data.html || '');
},
onError: () => {
toast.error('Failed to generate preview');
@@ -117,6 +120,8 @@ export const AdminEmailTemplatesMobileScreen: React.FC = () => {
setPreviewTemplate(null);
setPreviewSubject('');
setPreviewBody('');
setPreviewHtml('');
setShowHtmlPreview(false);
}, []);
const handleSave = useCallback(() => {
@@ -304,6 +309,23 @@ export const AdminEmailTemplatesMobileScreen: React.FC = () => {
</div>
) : (
<>
{/* Toggle HTML/Text Preview */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-slate-700">Show HTML Preview</span>
<button
onClick={() => setShowHtmlPreview(!showHtmlPreview)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors min-h-[44px] min-w-[44px] ${
showHtmlPreview ? 'bg-blue-600' : 'bg-gray-200'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
showHtmlPreview ? 'translate-x-6' : 'translate-x-1'
}`}
/>
</button>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Subject
@@ -313,14 +335,29 @@ export const AdminEmailTemplatesMobileScreen: React.FC = () => {
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Body
</label>
<div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg font-mono text-sm whitespace-pre-wrap">
{previewBody}
{showHtmlPreview ? (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
HTML Preview
</label>
<div className="border border-gray-300 rounded-lg overflow-hidden bg-gray-50">
<iframe
srcDoc={previewHtml}
style={{ width: '100%', height: '400px', border: 'none' }}
title="Email HTML Preview"
/>
</div>
</div>
</div>
) : (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
Body (Plain Text)
</label>
<div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg font-mono text-sm whitespace-pre-wrap">
{previewBody}
</div>
</div>
)}
</>
)}