Rollback to 9d67724e
This commit is contained in:
Manus Sandbox
364
client/src/pages/AdminEmailTemplates.tsx
Normal file
364
client/src/pages/AdminEmailTemplates.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import DashboardLayout from "@/components/DashboardLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Mail, Eye, Save, RotateCcw } from "lucide-react";
|
||||
|
||||
export default function AdminEmailTemplates() {
|
||||
const [selectedType, setSelectedType] = useState<string>("inscription");
|
||||
const [formData, setFormData] = useState({
|
||||
type: "inscription",
|
||||
name: "",
|
||||
logoUrl: "",
|
||||
primaryColor: "#2563eb",
|
||||
headerBgColor: "#2563eb",
|
||||
headerTextColor: "#ffffff",
|
||||
headerTitle: "Formation Manager Itinova",
|
||||
footerText: "",
|
||||
active: true,
|
||||
});
|
||||
|
||||
const { data: templates, refetch } = trpc.emailTemplates.list.useQuery();
|
||||
const { data: currentTemplate } = trpc.emailTemplates.getByType.useQuery(
|
||||
{ type: selectedType },
|
||||
{ enabled: !!selectedType }
|
||||
);
|
||||
|
||||
const upsertMutation = trpc.emailTemplates.upsert.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Template enregistré avec succès");
|
||||
refetch();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Erreur: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const initMutation = trpc.emailTemplates.initializeDefaults.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Templates par défaut initialisés");
|
||||
refetch();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Erreur: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
// Charger le template sélectionné
|
||||
useEffect(() => {
|
||||
if (currentTemplate) {
|
||||
setFormData({
|
||||
type: currentTemplate.type,
|
||||
name: currentTemplate.name,
|
||||
logoUrl: currentTemplate.logoUrl || "",
|
||||
primaryColor: currentTemplate.primaryColor,
|
||||
headerBgColor: currentTemplate.headerBgColor,
|
||||
headerTextColor: currentTemplate.headerTextColor,
|
||||
headerTitle: currentTemplate.headerTitle,
|
||||
footerText: currentTemplate.footerText || "",
|
||||
active: currentTemplate.active,
|
||||
});
|
||||
}
|
||||
}, [currentTemplate]);
|
||||
|
||||
const handleSave = () => {
|
||||
upsertMutation.mutate({
|
||||
...formData,
|
||||
logoUrl: formData.logoUrl || null,
|
||||
footerText: formData.footerText || null,
|
||||
});
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (currentTemplate) {
|
||||
setFormData({
|
||||
type: currentTemplate.type,
|
||||
name: currentTemplate.name,
|
||||
logoUrl: currentTemplate.logoUrl || "",
|
||||
primaryColor: currentTemplate.primaryColor,
|
||||
headerBgColor: currentTemplate.headerBgColor,
|
||||
headerTextColor: currentTemplate.headerTextColor,
|
||||
headerTitle: currentTemplate.headerTitle,
|
||||
footerText: currentTemplate.footerText || "",
|
||||
active: currentTemplate.active,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleInitDefaults = () => {
|
||||
if (confirm("Initialiser les templates par défaut ? Cela ne modifiera pas les templates existants.")) {
|
||||
initMutation.mutate();
|
||||
}
|
||||
};
|
||||
|
||||
// Générer la prévisualisation HTML
|
||||
const generatePreview = () => {
|
||||
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>${formData.headerTitle}</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>Exemple de contenu</h2>
|
||||
<p>Bonjour,</p>
|
||||
<p>Ceci est un exemple de prévisualisation de votre template d'email personnalisé.</p>
|
||||
<div class="info-box">
|
||||
<p><strong>Information importante</strong></p>
|
||||
<p>Ce bloc utilise la couleur principale que vous avez choisie.</p>
|
||||
</div>
|
||||
<div style="text-align: center; margin: 20px 0;">
|
||||
<a href="#" class="button">Bouton d'action</a>
|
||||
</div>
|
||||
<p>Cordialement,<br/>L'équipe Formation Manager Itinova</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>${formData.footerText || 'Texte du pied de page'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`.trim();
|
||||
};
|
||||
|
||||
const templateTypes = [
|
||||
{ value: "inscription", label: "Confirmation d'inscription" },
|
||||
{ value: "teaser", label: "Email teaser" },
|
||||
{ value: "rappel", label: "Rappel J-7" },
|
||||
{ value: "reset_password", label: "Réinitialisation de mot de passe" },
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold mb-2">Templates d'emails</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Personnalisez l'apparence de vos emails automatiques
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(!templates || templates.length === 0) && (
|
||||
<Card className="mb-6 border-yellow-200 bg-yellow-50">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Mail className="h-5 w-5" />
|
||||
Initialisation requise
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Aucun template trouvé. Initialisez les templates par défaut pour commencer.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={handleInitDefaults} disabled={initMutation.isPending}>
|
||||
{initMutation.isPending ? "Initialisation..." : "Initialiser les templates par défaut"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Éditeur */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Éditeur de template</CardTitle>
|
||||
<CardDescription>
|
||||
Modifiez les paramètres du template sélectionné
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="templateType">Type de template</Label>
|
||||
<Select
|
||||
value={selectedType}
|
||||
onValueChange={(value) => {
|
||||
setSelectedType(value);
|
||||
setFormData((prev) => ({ ...prev, type: value }));
|
||||
}}
|
||||
>
|
||||
<SelectTrigger id="templateType">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{templateTypes.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="name">Nom du template</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Ex: Confirmation d'inscription"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="logoUrl">URL du logo (optionnel)</Label>
|
||||
<Input
|
||||
id="logoUrl"
|
||||
value={formData.logoUrl}
|
||||
onChange={(e) => setFormData({ ...formData, logoUrl: e.target.value })}
|
||||
placeholder="https://exemple.com/logo.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="headerBgColor">Couleur fond en-tête</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="headerBgColor"
|
||||
type="color"
|
||||
value={formData.headerBgColor}
|
||||
onChange={(e) => setFormData({ ...formData, headerBgColor: e.target.value })}
|
||||
className="w-16 h-10 p-1"
|
||||
/>
|
||||
<Input
|
||||
value={formData.headerBgColor}
|
||||
onChange={(e) => setFormData({ ...formData, headerBgColor: e.target.value })}
|
||||
placeholder="#2563eb"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="headerTextColor">Couleur texte en-tête</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="headerTextColor"
|
||||
type="color"
|
||||
value={formData.headerTextColor}
|
||||
onChange={(e) => setFormData({ ...formData, headerTextColor: e.target.value })}
|
||||
className="w-16 h-10 p-1"
|
||||
/>
|
||||
<Input
|
||||
value={formData.headerTextColor}
|
||||
onChange={(e) => setFormData({ ...formData, headerTextColor: e.target.value })}
|
||||
placeholder="#ffffff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="primaryColor">Couleur principale</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="primaryColor"
|
||||
type="color"
|
||||
value={formData.primaryColor}
|
||||
onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
|
||||
className="w-16 h-10 p-1"
|
||||
/>
|
||||
<Input
|
||||
value={formData.primaryColor}
|
||||
onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
|
||||
placeholder="#2563eb"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Utilisée pour les boutons et les accents
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="headerTitle">Titre de l'en-tête</Label>
|
||||
<Input
|
||||
id="headerTitle"
|
||||
value={formData.headerTitle}
|
||||
onChange={(e) => setFormData({ ...formData, headerTitle: e.target.value })}
|
||||
placeholder="Formation Manager Itinova"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="footerText">Texte du pied de page</Label>
|
||||
<Textarea
|
||||
id="footerText"
|
||||
value={formData.footerText}
|
||||
onChange={(e) => setFormData({ ...formData, footerText: e.target.value })}
|
||||
placeholder="Cet email a été envoyé automatiquement..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button onClick={handleSave} disabled={upsertMutation.isPending} className="flex-1">
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"}
|
||||
</Button>
|
||||
<Button onClick={handleReset} variant="outline">
|
||||
<RotateCcw className="h-4 w-4 mr-2" />
|
||||
Réinitialiser
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Prévisualisation */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Eye className="h-5 w-5" />
|
||||
Prévisualisation en temps réel
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Aperçu de votre template avec les paramètres actuels
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="border rounded-lg overflow-hidden bg-gray-50">
|
||||
<iframe
|
||||
srcDoc={generatePreview()}
|
||||
className="w-full h-[600px] border-0"
|
||||
title="Prévisualisation du template"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user