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>