diff --git a/client/src/pages/AdminEmailTemplates.tsx b/client/src/pages/AdminEmailTemplates.tsx index a28fcac..a1aa833 100644 --- 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("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) : ` +

Saisissez le contenu de votre email dans le champ "Corps du message" pour voir la prévisualisation ici...

+ `; + const headerWithVars = replaceVariables(formData.headerTitle); + const footerWithVars = formData.footerText ? replaceVariables(formData.footerText) : 'Texte du pied de page'; + + return ` + + + + + + + +
+
+ ${formData.logoUrl ? `Logo` : ''} +

${headerWithVars}

+
+
+ ${bodyWithVars} +
+
+

${footerWithVars}

+
+
+ + + `.trim(); + }; + // Générer la prévisualisation HTML const generatePreview = () => { return ` @@ -503,6 +568,10 @@ export default function AdminEmailTemplates() { {upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"} +