diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx index 7eff64f..8963330 100644 --- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx +++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx @@ -38,6 +38,12 @@ export default function EditTemplate() { const [activeTab, setActiveTab] = useState('editor'); const [codeMode, setCodeMode] = useState(false); + // Fetch email customization settings + const { data: emailSettings } = useQuery({ + queryKey: ['email-settings'], + queryFn: () => api.get('/notifications/email-settings'), + }); + // Fetch template const { data: template, isLoading, error } = useQuery({ queryKey: ['notification-template', eventId, channelId], @@ -187,7 +193,7 @@ export default function EditTemplate() { // Replace dynamic variables with sample data (not just highlighting) const sampleData: { [key: string]: string } = { - order_number: '#12345', + order_number: '12345', order_total: '$99.99', order_status: 'Processing', order_date: new Date().toLocaleDateString(), @@ -262,6 +268,33 @@ export default function EditTemplate() { // Parse [card] tags previewBody = parseCardsForPreview(previewBody); + // Get email settings for preview + const settings = emailSettings || {}; + const primaryColor = settings.primary_color || '#7f54b3'; + const secondaryColor = settings.secondary_color || '#7f54b3'; + const heroGradientStart = settings.hero_gradient_start || '#667eea'; + const heroGradientEnd = settings.hero_gradient_end || '#764ba2'; + const heroTextColor = settings.hero_text_color || '#ffffff'; + const buttonTextColor = settings.button_text_color || '#ffffff'; + const logoUrl = settings.logo_url || ''; + const headerText = settings.header_text || 'My WordPress Store'; + const footerText = settings.footer_text || `© ${new Date().getFullYear()} My WordPress Store. All rights reserved.`; + const socialLinks = settings.social_links || []; + + // Replace {current_year} in footer + const processedFooter = footerText.replace('{current_year}', new Date().getFullYear().toString()); + + // Generate social icons HTML + const socialIconsHtml = socialLinks.length > 0 ? ` +
+ ${socialLinks.map((link: any) => ` + + ${getSocialIcon(link.platform)} + + `).join('')} +
+ ` : ''; + return ` @@ -272,17 +305,20 @@ export default function EditTemplate() { .header { padding: 32px; text-align: center; background: #f8f8f8; } .card-gutter { padding: 0 16px; } .card { background: #ffffff; border-radius: 8px; margin-bottom: 24px; padding: 32px 40px; } - .card-success { background: #e8f5e9; border: 1px solid #4caf50; } - .card-highlight { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } - .card-highlight * { color: #fff !important; } + .card-success { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; } + .card-success * { color: ${heroTextColor} !important; } + .card-highlight { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; } + .card-highlight * { color: ${heroTextColor} !important; } + .card-hero { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; } + .card-hero * { color: ${heroTextColor} !important; } .card-info { background: #f0f7ff; border: 1px solid #0071e3; } .card-warning { background: #fff8e1; border: 1px solid #ff9800; } h1 { font-size: 26px; margin-top: 0; margin-bottom: 16px; color: #333; } h2 { font-size: 18px; margin-top: 0; margin-bottom: 16px; color: #333; } h3 { font-size: 16px; margin-top: 0; margin-bottom: 8px; color: #333; } p { font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 16px; } - .button { display: inline-block; background: #7f54b3; color: #fff !important; padding: 14px 28px; border-radius: 6px; text-decoration: none; font-weight: 600; } - .button-outline { display: inline-block; background: transparent; color: #7f54b3 !important; padding: 12px 26px; border: 2px solid #7f54b3; border-radius: 6px; text-decoration: none; font-weight: 600; } + .button { display: inline-block; background: ${primaryColor}; color: ${buttonTextColor} !important; padding: 14px 28px; border-radius: 6px; text-decoration: none; font-weight: 600; } + .button-outline { display: inline-block; background: transparent; color: ${secondaryColor} !important; padding: 12px 26px; border: 2px solid ${secondaryColor}; border-radius: 6px; text-decoration: none; font-weight: 600; } .info-box { background: #f6f6f6; border-radius: 6px; padding: 20px; margin: 16px 0; } .footer { padding: 32px; text-align: center; color: #888; font-size: 13px; } @@ -290,19 +326,33 @@ export default function EditTemplate() {
- My WordPress Store + ${logoUrl ? `${headerText}` : `${headerText}`}
${previewBody}
-

© ${new Date().getFullYear()} My WordPress Store. All rights reserved.

+

${processedFooter}

+ ${socialIconsHtml}
`; }; + + // Helper function to get social icon emoji + const getSocialIcon = (platform: string) => { + const icons: Record = { + facebook: '📘', + twitter: '🐦', + instagram: '📷', + linkedin: '💼', + youtube: '📺', + website: '🌐', + }; + return icons[platform] || '🔗'; + }; if (!eventId || !channelId) { return ( diff --git a/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx b/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx index f39c5ae..84af504 100644 --- a/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx +++ b/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx @@ -496,10 +496,7 @@ export default function EmailCustomization() { onValueChange={(value) => updateSocialLink(index, 'platform', value)} > -
- {getSocialIcon(link.platform)} - -
+