Checkpoint: Ajout d'une interface d'administration complète pour personnaliser les templates d'emails avec prévisualisation en temps réel, stockage en base de données et intégration avec le service d'envoi
This commit is contained in:
161
server/emailTemplateGenerator.ts
Normal file
161
server/emailTemplateGenerator.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* Générateur de templates d'emails personnalisés
|
||||
* Utilise les templates stockés en base de données
|
||||
*/
|
||||
|
||||
import * as db from "./db";
|
||||
import { EmailTemplate } from "../drizzle/schema";
|
||||
|
||||
/**
|
||||
* Génère le HTML d'un email en utilisant le template personnalisé
|
||||
*/
|
||||
export async function generateEmailFromTemplate(
|
||||
templateType: string,
|
||||
content: string
|
||||
): Promise<string> {
|
||||
// Récupérer le template depuis la base de données
|
||||
const template = await db.getEmailTemplateByType(templateType);
|
||||
|
||||
// Si pas de template trouvé, utiliser le template par défaut
|
||||
if (!template) {
|
||||
return getDefaultEmailTemplate(content);
|
||||
}
|
||||
|
||||
return buildEmailHTML(template, content);
|
||||
}
|
||||
|
||||
/**
|
||||
* Construit le HTML de l'email avec le template
|
||||
*/
|
||||
function buildEmailHTML(template: EmailTemplate, content: string): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
}
|
||||
.header {
|
||||
background-color: ${template.headerBgColor};
|
||||
color: ${template.headerTextColor};
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
${template.logoUrl ? `
|
||||
.header img {
|
||||
max-width: 150px;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}` : ''}
|
||||
.content {
|
||||
background-color: #f9fafb;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.content h2 {
|
||||
color: ${template.primaryColor};
|
||||
margin-top: 0;
|
||||
}
|
||||
.footer {
|
||||
background-color: #f3f4f6;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
background-color: ${template.primaryColor};
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.info-box {
|
||||
background-color: #dbeafe;
|
||||
border-left: 4px solid ${template.primaryColor};
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.date-item {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
${template.logoUrl ? `<img src="${template.logoUrl}" alt="Logo" />` : ''}
|
||||
<h1>${template.headerTitle}</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
${content}
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>${template.footerText || 'Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Template par défaut si aucun template personnalisé n'est trouvé
|
||||
*/
|
||||
function getDefaultEmailTemplate(content: string): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; background-color: #f5f5f5; }
|
||||
.container { max-width: 600px; margin: 0 auto; background-color: white; }
|
||||
.header { background-color: #2563eb; color: white; padding: 30px 20px; text-align: center; }
|
||||
.header h1 { margin: 0; font-size: 24px; }
|
||||
.content { background-color: #f9fafb; padding: 30px 20px; }
|
||||
.footer { background-color: #f3f4f6; padding: 20px; text-align: center; font-size: 12px; color: #6b7280; }
|
||||
.button { display: inline-block; padding: 12px 24px; background-color: #2563eb; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
|
||||
.info-box { background-color: #dbeafe; border-left: 4px solid #2563eb; padding: 15px; margin: 15px 0; }
|
||||
.date-item { margin: 10px 0; padding: 10px; background-color: white; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Formation Manager Itinova</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
${content}
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.</p>
|
||||
<p>Pour toute question, veuillez contacter le service RH.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`.trim();
|
||||
}
|
||||
Reference in New Issue
Block a user