+
+ `;
+ emailContent = emailContent.replace('[PrioritySection]', priorityHTML);
+} else {
+ emailContent = emailContent.replace('[PrioritySection]', '');
+}
+```
+
+### 4. Send Email
+```javascript
+await sendEmail({
+ to: recipientEmail,
+ subject: `[${requestId}] New Approval Request`,
+ html: emailContent
+});
+```
+
+---
+
+## 📖 Complete Documentation
+
+See **TEMPLATE_MAPPING.md** for:
+- Complete list of all placeholders for each template
+- Dynamic section handling instructions
+- Priority-based sending strategy
+- Usage scenarios and triggers
+- Security considerations
+- Implementation examples
+
+---
+
+## 🚀 Integration Steps
+
+### Step 1: Email Service Setup
+```typescript
+// services/email.service.ts
+import nodemailer from 'nodemailer';
+import fs from 'fs';
+import path from 'path';
+
+class EmailService {
+ private transporter;
+
+ constructor() {
+ this.transporter = nodemailer.createTransport({
+ host: process.env.SMTP_HOST,
+ port: process.env.SMTP_PORT,
+ secure: process.env.SMTP_SECURE === 'true',
+ auth: {
+ user: process.env.SMTP_USER,
+ pass: process.env.SMTP_PASSWORD
+ }
+ });
+ }
+
+ async sendEmail(to: string, subject: string, html: string) {
+ return await this.transporter.sendMail({
+ from: process.env.EMAIL_FROM,
+ to,
+ subject,
+ html
+ });
+ }
+
+ loadTemplate(templateName: string): string {
+ const templatePath = path.join(__dirname, '../emailtemplates', `${templateName}.html`);
+ return fs.readFileSync(templatePath, 'utf8');
+ }
+
+ replaceplaceholders(template: string, data: RecordHigh Priority
++ This request has been marked as ${priority} priority and requires prompt attention. +
+` - Paragraphs with spacing
+✅ `
` - Line breaks
+
+### **Lists**
+✅ `
- `, `
- ` - Bulleted lists
+✅ `
- `, `
- ` - Numbered lists
+
+### **Headings**
+✅ `
` - 20px heading +✅ `
` - 18px heading +✅ `
` - 16px heading +✅ `
` - 14px heading + +### **Links** +✅ `` - Clickable links (Royal Enfield Red color) + +### **Special Elements** +✅ `
` - Quote blocks with gold accent +✅ `
` - Inline code snippets +✅ `` - Code blocks +✅ `
` - Horizontal dividers +✅ `` - Images (auto-scaled for mobile) + +--- + +## 📝 **Usage Example** + +### **From Rich Text Editor:** + +Your rich text editor might output: +```html +
This is a purchase request for new equipment.
+-
+
- Item 1: Motorcycle helmet +
- Item 2: Safety gear +
Total cost: $5,000
+``` + +### **In Your Code:** + +```typescript +import { getApprovalRequestEmail } from '@/emailtemplates'; + +const data = { + // ... other fields + requestDescription: editorHtmlContent, // Pass HTML directly + // ... other fields +}; + +const html = getApprovalRequestEmail(data); +``` + +### **Result in Email:** + +The HTML will be properly styled with: +- Royal Enfield brand colors +- Proper spacing and line heights +- Mobile-responsive fonts +- Email-safe formatting + +--- + +## 🔒 **Security - HTML Sanitization** + +**IMPORTANT:** Always sanitize HTML content before using in emails! + +### **Recommended: Use DOMPurify or similar** + +```typescript +import DOMPurify from 'isomorphic-dompurify'; + +// Sanitize rich text content +const sanitizedDescription = DOMPurify.sanitize(editorHtmlContent, { + ALLOWED_TAGS: [ + 'p', 'br', 'strong', 'b', 'em', 'i', 'u', + 'ul', 'ol', 'li', 'a', 'h1', 'h2', 'h3', 'h4', + 'blockquote', 'code', 'pre', 'hr', 'img' + ], + ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'target'], + ALLOW_DATA_ATTR: false +}); + +const data = { + requestDescription: sanitizedDescription, + // ... other fields +}; +``` + +### **Install DOMPurify:** + +```bash +npm install isomorphic-dompurify +npm install --save-dev @types/dompurify +``` + +--- + +## 🎯 **Rich Text Styling** + +### **Brand Colors Applied:** + +| Element | Color | Usage | +|---------|-------|-------| +| Links | #DB281B (RE Red) | Clickable links | +| Strong text | #1a1a1a (Black) | Bold emphasis | +| Blockquotes | Gold border (#DEB219) | Quoted text | +| Code | #DB281B (RE Red) | Code snippets | +| Headings | #1a1a1a (Black) | Section titles | + +### **Spacing:** + +- Paragraphs: 12px bottom margin +- Lists: 25px left padding, 8px item spacing +- Headings: 12px bottom margin +- Blockquotes: 12px padding, gold left border +- Images: Auto-scaled, 12px margin + +--- + +## 📱 **Mobile Responsive** + +Rich text content automatically adjusts for mobile: + +| Element | Desktop | Mobile | +|---------|---------|--------| +| Paragraphs | 14px | 13px | +| Headings H1 | 20px | 18px | +| Headings H2 | 18px | 16px | +| Lists | 14px | 13px | +| Images | 100% width | 100% width | + +--- + +## 💡 **Example Rich Text Content** + +### **Complex Example:** + +```html +Equipment Purchase Request
+ +We need to purchase the following items for the testing department:
+ +-
+
- 2× Royal Enfield Himalayan - Latest model +
- Safety gear - Helmets and protective equipment +
- Maintenance tools - Standard toolkit +
Budget Breakdown
+ +Total estimated cost: $15,000
+ ++ This purchase is critical for our Q1 testing schedule and has been approved by the department head. +
+ +Please review and approve at your earliest convenience.
+ +For questions, contact: john@example.com
+``` + +### **Will Render As:** + +✅ Styled headings with proper hierarchy +✅ Formatted lists with Royal Enfield accents +✅ Bold text in black +✅ Gold-bordered quote box +✅ Red links +✅ Proper spacing throughout +✅ Mobile-optimized fonts + +--- + +## 🛡️ **Best Practices** + +### **1. Sanitize User Input** +```typescript +const cleanHTML = DOMPurify.sanitize(userInput); +``` + +### **2. Use wrapRichText Helper** +```typescript +${wrapRichText(data.requestDescription)} +``` + +### **3. Test with Rich Content** +Test emails with: +- Multiple paragraphs +- Lists (bulleted and numbered) +- Links +- Bold and italic text +- Headings at different levels + +### **4. Avoid These in Emails** +❌ JavaScript or `
- ` - Numbered lists
+
+### **Headings**
+✅ `