Checkpoint: Implémentation complète du remplacement automatique des variables dans les emails et ajout d'un bouton d'aperçu. Les variables {{nomApprenant}}, {{prenomApprenant}}, {{nomFormation}}, {{nomSequence}}, {{dateDebut}}, {{dateFin}}, {{lieu}}, {{formateur}} sont automatiquement remplacées lors de l'envoi d'emails. Un bouton "Aperçu email" permet de visualiser le rendu final avec des données d'exemple avant l'envoi.

server/emailService.ts

@@ -6,6 +6,7 @@
 import { generateFormationICS } from "./icsGenerator";
 import { sendEmail as sendEmailViaService, isEmailServiceConfigured } from "./_core/emailSender";
 import { generateEmailFromTemplate } from "./emailTemplateGenerator";
+import { EmailVariables } from "./emailTemplateUtils";
 
 interface EmailParams {
   to: string;
@@ -29,8 +30,12 @@ async function sendEmail(params: EmailParams): Promise<boolean> {
 /**
  * Template HTML de base pour les emails (avec template personnalisé)
  */
-async function getEmailTemplate(content: string, templateType: string = 'inscription'): Promise<string> {
-  return await generateEmailFromTemplate(templateType, content);
+async function getEmailTemplate(
+  content: string, 
+  templateType: string = 'inscription',
+  variables?: EmailVariables
+): Promise<string> {
+  return await generateEmailFromTemplate(templateType, content, variables);
 }
 
 /**
@@ -117,12 +122,23 @@ export async function sendInscriptionConfirmation(params: {
     contentType: 'text/calendar',
   })) : undefined;
 
+  // Préparer les variables pour le remplacement
+  const variables: EmailVariables = {
+    nomApprenant: params.apprenantNom,
+    prenomApprenant: params.apprenantPrenom,
+    nomFormation: params.formationNom,
+    nomSequence: params.sequenceNom,
+    dateDebut: params.dates[0]?.dateDebut.toLocaleDateString('fr-FR') || '',
+    dateFin: params.dates[params.dates.length - 1]?.dateFin.toLocaleDateString('fr-FR') || '',
+    lieu: params.lieu,
+  };
+
   return sendEmail({
     to: params.apprenantEmail,
     subject: isConfirmed 
       ? `Confirmation d'inscription - ${params.formationNom}`
       : `Liste d'attente - ${params.formationNom}`,
-    html: await getEmailTemplate(content, 'inscription'),
+    html: await getEmailTemplate(content, 'inscription', variables),
     attachments,
   });
 }

server/emailTemplateGenerator.ts

@@ -5,29 +5,48 @@
 
 import * as db from "./db";
 import { EmailTemplate } from "../drizzle/schema";
+import { replaceEmailVariables, EmailVariables } from "./emailTemplateUtils";
 
 /**
  * Génère le HTML d'un email en utilisant le template personnalisé
+ * @param templateType - Type de template (à utiliser)
+ * @param content - Contenu de l'email (legacy, sera remplacé par bodyContent)
+ * @param variables - Variables à remplacer dans le template
  */
 export async function generateEmailFromTemplate(
   templateType: string,
-  content: string
+  content: string,
+  variables?: EmailVariables
 ): 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);
+    const defaultContent = variables ? replaceEmailVariables(content, variables) : content;
+    return getDefaultEmailTemplate(defaultContent);
   }
   
-  return buildEmailHTML(template, content);
+  return buildEmailHTML(template, content, variables);
 }
 
 /**
  * Construit le HTML de l'email avec le template
  */
-function buildEmailHTML(template: EmailTemplate, content: string): string {
+function buildEmailHTML(template: EmailTemplate, content: string, variables?: EmailVariables): string {
+  // Utiliser bodyContent si disponible, sinon utiliser content (legacy)
+  let emailBody = template.bodyContent || content;
+  
+  // Remplacer les variables si fournies
+  if (variables) {
+    emailBody = replaceEmailVariables(emailBody, variables);
+    // Remplacer aussi dans le titre et le pied de page
+    template = {
+      ...template,
+      headerTitle: replaceEmailVariables(template.headerTitle, variables),
+      footerText: template.footerText ? replaceEmailVariables(template.footerText, variables) : template.footerText,
+    };
+  }
   return `
 <!DOCTYPE html>
 <html>
@@ -110,7 +129,7 @@ function buildEmailHTML(template: EmailTemplate, content: string): string {
       <h1>${template.headerTitle}</h1>
     </div>
     <div class="content">
-      ${content}
+      ${emailBody}
     </div>
     <div class="footer">
       <p>${template.footerText || 'Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.'}</p>
@@ -148,7 +167,7 @@ function getDefaultEmailTemplate(content: string): string {
       <h1>Formation Manager Itinova</h1>
     </div>
     <div class="content">
-      ${content}
+      ${emailBody}
     </div>
     <div class="footer">
       <p>Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.</p>

server/emailTemplateUtils.ts

@@ -0,0 +1,65 @@
+/**
+ * Utilitaires pour le remplacement des variables dans les templates d'emails
+ */
+
+export interface EmailVariables {
+  nomApprenant?: string;
+  prenomApprenant?: string;
+  nomFormation?: string;
+  nomSequence?: string;
+  dateDebut?: string;
+  dateFin?: string;
+  lieu?: string;
+  formateur?: string;
+  lienInscription?: string;
+  [key: string]: string | undefined;
+}
+
+/**
+ * Remplace les variables {{variable}} dans un texte par leurs valeurs
+ * @param template - Le texte contenant les variables à remplacer
+ * @param variables - Un objet contenant les valeurs des variables
+ * @returns Le texte avec les variables remplacées
+ */
+export function replaceEmailVariables(
+  template: string,
+  variables: EmailVariables
+): string {
+  let result = template;
+
+  // Remplacer chaque variable trouvée dans le template
+  Object.keys(variables).forEach((key) => {
+    const value = variables[key];
+    if (value !== undefined && value !== null) {
+      // Remplacer toutes les occurrences de {{key}} par la valeur
+      const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
+      result = result.replace(regex, value);
+    }
+  });
+
+  // Nettoyer les variables non remplacées (optionnel)
+  // result = result.replace(/\{\{[^}]+\}\}/g, '');
+
+  return result;
+}
+
+/**
+ * Génère un aperçu d'email avec des données d'exemple
+ * @param template - Le template d'email
+ * @returns Le template avec des données d'exemple
+ */
+export function generateEmailPreview(template: string): string {
+  const exampleVariables: EmailVariables = {
+    nomApprenant: 'Dupont',
+    prenomApprenant: 'Marie',
+    nomFormation: 'Formation Management',
+    nomSequence: 'Séquence 1 - Introduction',
+    dateDebut: '15/01/2025',
+    dateFin: '17/01/2025',
+    lieu: 'Salle de formation A - Bâtiment principal',
+    formateur: 'Jean Martin',
+    lienInscription: 'https://exemple.com/inscription/abc123',
+  };
+
+  return replaceEmailVariables(template, exampleVariables);
+}