86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
/**
|
|
* 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 & 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}">
|
|
© {new Date().getFullYear()} MotoVaultPro. All rights reserved.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>`;
|
|
}
|