/** * Email Renderer Service * * Converts EmailBlock[] (visual template builder format) into * email-compatible HTML with inline styles, table-based layout, * and fallbacks for email clients that don't support modern CSS. * * Used by: * - emailDesignerTemplates route (/api/email-designer-templates/:id/render) * - SendEmailHandler in the automation workflow engine * - Any future endpoint that needs to render blocks to HTML */ import type { IEmailDesignerTemplate } from '../../models/EmailDesignerTemplate'; // ============================================ // PUBLIC API // ============================================ /** * Render an EmailDesignerTemplate's blocks into a complete email HTML document. * If htmlOutput is already present and non-empty, returns it directly. */ export function renderTemplateToHtml(template: IEmailDesignerTemplate): string { // If already rendered, return cached HTML if (template.htmlOutput && template.htmlOutput.trim()) { return template.htmlOutput; } return renderBlocksToHtml({ blocks: template.blocks || [], designSettings: template.designSettings || {}, subject: template.subject || template.name || '', }); } /** * Render raw blocks array + settings into a complete email HTML document. * Useful when you have blocks but not a full template document. */ export function renderBlocksToHtml(params: { blocks: any[]; designSettings?: Record; subject?: string; }): string { const { blocks, designSettings = {}, subject } = params; const bgColor = designSettings.backgroundColor || '#1a1d21'; const contentBgColor = designSettings.contentBackgroundColor || '#ffffff'; const contentWidth = designSettings.contentWidth || 600; const fontFamily = designSettings.fontFamily || 'Arial, sans-serif'; const blockHtmlParts: string[] = []; for (const block of blocks) { blockHtmlParts.push(renderSingleBlock(block)); } return ` ${escapeHtml(subject || 'Email')}
${blockHtmlParts.join('\n')}
`; } /** * Render a single block to HTML (exported for testing/composition). */ export function renderSingleBlock(block: any): string { const type = block.type || ''; const data = block.data || {}; switch (type) { case 'heading': return renderHeading(data); case 'paragraph': return renderParagraph(data); case 'image': return renderImage(data); case 'button': return renderButton(data); case 'divider': return renderDivider(data); case 'spacer': return renderSpacer(data); case 'hero-banner': return renderHeroBanner(data); case 'logo': return renderLogo(data); case 'social-icons': return renderSocialIcons(data); case 'footer': return renderFooter(data); case 'html-block': return data.html || ''; case 'product-card': return renderProductCard(data); case 'video-placeholder': return renderVideoPlaceholder(data); case 'two-columns': return renderColumns(data, 2); case 'three-columns': return renderColumns(data, 3); default: return ``; } } // ============================================ // BLOCK RENDERERS // ============================================ function renderHeading(data: any): string { const { text = '', level = 1, fontSize, fontWeight = 'bold', color = '#1a1a1a', alignment = 'left' } = data; const tag = `h${level}`; const size = fontSize ? `${fontSize}px` : (level === 1 ? '28px' : level === 2 ? '24px' : '20px'); const padding = formatPadding(data.padding, { top: 10, right: 20, bottom: 10, left: 20 }); return ` <${tag} style="margin:0;font-size:${size};font-weight:${fontWeight};color:${color};text-align:${alignment};line-height:1.3;">${escapeHtml(text)} `; } function renderParagraph(data: any): string { const { text = '', fontSize = 16, lineHeight = 1.6, color = '#333333', alignment = 'left' } = data; const padding = formatPadding(data.padding, { top: 0, right: 20, bottom: 0, left: 20 }); return `${text}`; } function renderImage(data: any): string { const { src = '', alt = '', width = 'auto', height = 'auto', borderRadius = 0, alignment = 'center' } = data; const padding = formatPadding(data.padding, { top: 10, right: 20, bottom: 10, left: 20 }); const wAttr = width !== 'auto' ? `width="${width}"` : ''; const hAttr = height !== 'auto' ? `height="${height}"` : ''; return ` ${escapeAttr(alt)} `; } function renderButton(data: any): string { const { text = 'Click Here', url = '', backgroundColor = '#C8FF2E', textColor = '#0d1117', borderRadius = 8, fontSize = 16, fontWeight = '600', alignment = 'center' } = data; const padding = formatPadding(data.padding, { top: 12, right: 24, bottom: 12, left: 24 }); return ` ${escapeHtml(text)} `; } function renderDivider(data: any): string { const { style = 'solid', color = '#e5e5e5', thickness = 1, width = '100%', alignment = 'center' } = data; const margin = data.margin || { top: 20, bottom: 20 }; return `
`; } function renderSpacer(data: any): string { const height = data.height || 30; return ` `; } function renderHeroBanner(data: any): string { const { backgroundImage = '', overlayColor = '#000000', overlayOpacity = 0.5, title = '', subtitle = '', buttonText = '', buttonUrl = '', buttonBackgroundColor = '#C8FF2E', buttonTextColor = '#0d1117', alignment = 'center', height = 300, } = data; const padding = formatPadding(data.padding, { top: 60, right: 40, bottom: 60, left: 40 }); // VML-based fallback for Outlook + background image for modern clients return `
${title ? `

${escapeHtml(title)}

` : ''} ${subtitle ? `

${escapeHtml(subtitle)}

` : ''} ${buttonText ? `${escapeHtml(buttonText)}` : ''}
`; } function renderLogo(data: any): string { const { src = '', width = 150, alignment = 'center' } = data; const padding = formatPadding(data.padding, { top: 20, right: 20, bottom: 20, left: 20 }); return ` Logo `; } function renderSocialIcons(data: any): string { const { platforms = [], alignment = 'center', spacing = 12 } = data; const padding = formatPadding(data.padding, { top: 20, right: 20, bottom: 20, left: 20 }); const iconLinks = platforms.map((p: any) => { const platformName = (p.platform || '').toLowerCase(); const iconUrl = getSocialIconUrl(platformName); return ` ${escapeAttr(p.platform || 'Social')} `; }).join('\n'); return `${iconLinks}`; } function renderFooter(data: any): string { const { companyName = '', address = '', backgroundColor = '#1a1d21', textColor = '#878e9a', fontSize = 12, alignment = 'center' } = data; const { showUnsubscribe = true, showPreferences = true, showViewInBrowser = true, unsubscribeUrl = '{{unsubscribe_link}}', preferencesUrl = '{{preferences_link}}', viewInBrowserUrl = '{{view_in_browser_link}}', } = data; const padding = formatPadding(data.padding, { top: 30, right: 20, bottom: 30, left: 20 }); const links: string[] = []; if (showViewInBrowser) links.push(`View in browser`); if (showPreferences) links.push(`Preferences`); if (showUnsubscribe) links.push(`Unsubscribe`); return ` ${companyName ? `

${escapeHtml(companyName)}

` : ''} ${address ? `

${escapeHtml(address)}

` : ''}

${links.join(' · ')}

`; } function renderProductCard(data: any): string { const { name = '', description = '', image = '', price = '', buttonText = 'Buy Now', buttonUrl = '', alignment = 'center' } = data; const padding = formatPadding(data.padding, { top: 20, right: 20, bottom: 20, left: 20 }); return ` ${image ? `${escapeAttr(name)}` : ''}

${escapeHtml(name)}

${description ? `

${escapeHtml(description)}

` : ''} ${price ? `

${escapeHtml(price)}

` : ''} ${escapeHtml(buttonText)} `; } function renderVideoPlaceholder(data: any): string { const { thumbnailImage = '', videoUrl = '', playButtonColor = '#C8FF2E', borderRadius = 8, alignment = 'center' } = data; const width = data.width || 556; const padding = formatPadding(data.padding, { top: 20, right: 20, bottom: 20, left: 20 }); return ` Video thumbnail `; } function renderColumns(data: any, numCols: number): string { const { columns = [], gap = numCols === 3 ? 15 : 20 } = data; const padding = formatPadding(data.padding, { top: 0, right: 20, bottom: 0, left: 20 }); const columnCells = (columns as any[][]).map((colBlocks: any[]) => { const innerHtml = (colBlocks || []).map((b: any) => renderSingleBlock(b)).join(''); return `${innerHtml}`; }).join('\n'); return ` ${columnCells}
`; } // ============================================ // UTILITY FUNCTIONS // ============================================ function formatPadding(padding: any, defaults: { top: number; right: number; bottom: number; left: number }): string { const p = { ...defaults, ...(padding || {}) }; return `padding:${p.top}px ${p.right}px ${p.bottom}px ${p.left}px;`; } function escapeHtml(str: string): string { if (!str) return ''; return str .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } function escapeAttr(str: string): string { if (!str) return ''; return str .replace(/&/g, '&') .replace(/"/g, '"') .replace(/'/g, ''') .replace(//g, '>'); } function hexToRgb(hex: string): string { const h = hex.replace('#', ''); const r = parseInt(h.substring(0, 2), 16); const g = parseInt(h.substring(2, 4), 16); const b = parseInt(h.substring(4, 6), 16); return `${r},${g},${b}`; } function getSocialIconUrl(platform: string): string { const icons: Record = { facebook: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook/facebook-icon.svg', twitter: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter/twitter-icon.svg', x: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/x/x-icon.svg', linkedin: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin/linkedin-icon.svg', instagram: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram/instagram-icon.svg', youtube: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube/youtube-icon.svg', tiktok: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/tiktok/tiktok-icon.svg', pinterest: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/pinterest/pinterest-icon.svg', }; return icons[platform] || icons.facebook; }