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.

2025-11-23 16:14:53 -05:00
parent 4e825dbf99
commit 33161d1a4d
5 changed files with 206 additions and 9 deletions
--- a/client/src/pages/AdminEmailTemplates.tsx
+++ b/client/src/pages/AdminEmailTemplates.tsx
@@ -26,9 +26,17 @@ import {
 } from "@/components/ui/select";
 import { toast } from "sonner";
 import { Mail, Eye, Save, RotateCcw, Plus } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";

 export default function AdminEmailTemplates() {
  const [selectedType, setSelectedType] = useState<string>("inscription");
+  const [showPreviewModal, setShowPreviewModal] = useState(false);
  const [formData, setFormData] = useState({
    type: "inscription",
    name: "",
@@ -139,6 +147,63 @@ export default function AdminEmailTemplates() {
    }
  };

+  // Générer la prévisualisation HTML avec variables remplacées
+  const generatePreviewWithVariables = () => {
+    // Remplacer les variables par des données d'exemple
+    const replaceVariables = (text: string) => {
+      return text
+        .replace(/\{\{nomApprenant\}\}/g, 'Dupont')
+        .replace(/\{\{prenomApprenant\}\}/g, 'Marie')
+        .replace(/\{\{nomFormation\}\}/g, 'Formation Management')
+        .replace(/\{\{nomSequence\}\}/g, 'Séquence 1 - Introduction')
+        .replace(/\{\{dateDebut\}\}/g, '15/01/2025')
+        .replace(/\{\{dateFin\}\}/g, '17/01/2025')
+        .replace(/\{\{lieu\}\}/g, 'Salle de formation A - Bâtiment principal')
+        .replace(/\{\{formateur\}\}/g, 'Jean Martin');
+    };
+
+    const bodyWithVars = formData.bodyContent ? replaceVariables(formData.bodyContent) : `
+      <p style="color: #9ca3af; font-style: italic;">Saisissez le contenu de votre email dans le champ "Corps du message" pour voir la prévisualisation ici...</p>
+    `;
+    const headerWithVars = replaceVariables(formData.headerTitle);
+    const footerWithVars = formData.footerText ? replaceVariables(formData.footerText) : 'Texte du pied de page';
+
+    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: ${formData.headerBgColor}; color: ${formData.headerTextColor}; padding: 30px 20px; text-align: center; }
+    .header h1 { margin: 0; font-size: 24px; }
+    ${formData.logoUrl ? `.header img { max-width: 150px; margin-bottom: 15px; }` : ''}
+    .content { background-color: #f9fafb; padding: 30px 20px; }
+    .content h2 { color: ${formData.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: ${formData.primaryColor}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
+    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.primaryColor}; padding: 15px; margin: 15px 0; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      ${formData.logoUrl ? `<img src="${formData.logoUrl}" alt="Logo" />` : ''}
+      <h1>${headerWithVars}</h1>
+    </div>
+    <div class="content">
+      ${bodyWithVars}
+    </div>
+    <div class="footer">
+      <p>${footerWithVars}</p>
+    </div>
+  </div>
+</body>
+</html>
+    `.trim();
+  };
+
  // Générer la prévisualisation HTML
  const generatePreview = () => {
    return `
@@ -503,6 +568,10 @@ export default function AdminEmailTemplates() {
                <Save className="h-4 w-4 mr-2" />
                {upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"}
              </Button>
+              <Button onClick={() => setShowPreviewModal(true)} variant="secondary">
+                <Eye className="h-4 w-4 mr-2" />
+                Aperçu email
+              </Button>
              <Button onClick={handleReset} variant="outline">
                <RotateCcw className="h-4 w-4 mr-2" />
                Réinitialiser
@@ -511,6 +580,26 @@ export default function AdminEmailTemplates() {
          </CardContent>
        </Card>

+        {/* Modal d'aperçu email */}
+        <Dialog open={showPreviewModal} onOpenChange={setShowPreviewModal}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>Aperçu de l'email final</DialogTitle>
+              <DialogDescription>
+                Cet aperçu montre comment l'email apparaîtra avec des données d'exemple.
+                Les variables (nomApprenant, nomFormation, etc.) sont remplacées par des valeurs de test.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="border rounded-lg overflow-hidden bg-gray-50">
+              <iframe
+                srcDoc={generatePreviewWithVariables()}
+                className="w-full h-[600px] border-0"
+                title="Aperçu de l'email final"
+              />
+            </div>
+          </DialogContent>
+        </Dialog>
+
        {/* Prévisualisation */}
        <Card>
          <CardHeader>
--- a/server/emailService.ts
+++ b/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,
  });
 }
--- a/server/emailTemplateGenerator.ts
+++ b/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>
--- a/server/emailTemplateUtils.ts
+++ b/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);
+}
--- a/todo.md
+++ b/todo.md
@@ -503,3 +503,11 @@

 - [x] Remplacer React Quill par une solution compatible (TipTap)
 - [x] Tester le nouvel éditeur
+
+## Remplacement automatique des variables dans les emails
+
+- [x] Créer une fonction utilitaire de remplacement des variables
+- [x] Modifier les fonctions d'envoi d'emails pour utiliser le remplacement
+- [x] Ajouter un bouton "Aperçu email" dans l'interface de gestion des templates
+- [x] Créer un modal d'aperçu montrant l'email final avec variables remplacées
+- [x] Tester l'envoi d'emails avec variables