375 lines
13 KiB
TypeScript
375 lines
13 KiB
TypeScript
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",
|
|
bodyContent: "",
|
|
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,
|
|
bodyContent: currentTemplate.bodyContent || "",
|
|
footerText: currentTemplate.footerText || "",
|
|
active: currentTemplate.active,
|
|
});
|
|
}
|
|
}, [currentTemplate]);
|
|
|
|
const handleSave = () => {
|
|
upsertMutation.mutate({
|
|
...formData,
|
|
logoUrl: formData.logoUrl || null,
|
|
bodyContent: formData.bodyContent || 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,
|
|
bodyContent: currentTemplate.bodyContent || "",
|
|
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">
|
|
${formData.bodyContent ? formData.bodyContent.replace(/\n/g, '<br>') : `
|
|
<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>
|
|
`}
|
|
</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="bodyContent">Corps du message</Label>
|
|
<Textarea
|
|
id="bodyContent"
|
|
value={formData.bodyContent}
|
|
onChange={(e) => setFormData({ ...formData, bodyContent: e.target.value })}
|
|
placeholder="Contenu principal de l'email...\n\nVous pouvez utiliser des variables : {{nomApprenant}}, {{nomFormation}}, {{nomSequence}}, etc."
|
|
rows={8}
|
|
/>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Le contenu du corps du message. Laissez vide pour utiliser le contenu par défaut.
|
|
</p>
|
|
</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>
|
|
);
|
|
}
|