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

85
backend/src/features/notifications/domain/email-layout/base-layout.ts Normal file
View File

@@ -0,0 +1,85 @@
/**
* Base HTML Email Layout
* @ai-summary Main email wrapper with MotoVaultPro branding
* @ai-context Uses table-based layout for email client compatibility
*/
import { EMAIL_STYLES } from './email-styles';
// External logo URL - hosted on GitHub for reliability
const LOGO_URL = 'https://raw.githubusercontent.com/ericgullickson/images/c58b0e4773e8395b532f97f6ab529e38ea4dc8be/motovaultpro-auth0-small.png';
/**
* Renders the complete HTML email layout with branding
* @param content - The rendered email body content (HTML)
* @returns Complete HTML email string with DOCTYPE and layout
*/
export function renderEmailLayout(content: string): string {
return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MotoVaultPro</title>
<!--[if mso]>
<style type="text/css">
table { border-collapse: collapse; }
.outlook-fix { font-family: Arial, sans-serif; }
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #f8f9fa;">
<!-- Wrapper table for full width background -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${EMAIL_STYLES.wrapper}">
<tr>
<td align="center" style="${EMAIL_STYLES.cell}">
<!-- Main container table (max-width 600px) -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="${EMAIL_STYLES.container}" class="outlook-fix">
<!-- Header with logo -->
<tr>
<td style="${EMAIL_STYLES.header}">
<img src="${LOGO_URL}" alt="MotoVaultPro" style="${EMAIL_STYLES.logo}" width="280" />
</td>
</tr>
<!-- Content area -->
<tr>
<td style="${EMAIL_STYLES.content}">
${content}
</td>
</tr>
<!-- Footer -->
<tr>
<td style="${EMAIL_STYLES.footer}">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<p style="${EMAIL_STYLES.footerText}">
<strong>Professional Vehicle Management &amp; Maintenance Tracking</strong>
</p>
<p style="${EMAIL_STYLES.footerText}">
<a href="https://motovaultpro.com" style="${EMAIL_STYLES.footerLink}" target="_blank">Login to MotoVaultPro</a>
</p>
<p style="${EMAIL_STYLES.footerText}">
<a href="{{unsubscribeUrl}}" style="${EMAIL_STYLES.footerLink}" target="_blank">Manage Email Preferences</a>
</p>
<p style="${EMAIL_STYLES.copyright}">
&copy; 2025 MotoVaultPro. All rights reserved.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>`;
}