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("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 `

${formData.bodyContent ? formData.bodyContent.replace(/\n/g, '
') : `

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

`.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 (

Templates d'emails

Personnalisez l'apparence de vos emails automatiques

{(!templates || templates.length === 0) && ( Initialisation requise Aucun template trouvé. Initialisez les templates par défaut pour commencer. )}

{/* Éditeur */} Éditeur de template Modifiez les paramètres du template sélectionné

Type de template

Nom du template setFormData({ ...formData, name: e.target.value })} placeholder="Ex: Confirmation d'inscription" />

URL du logo (optionnel) setFormData({ ...formData, logoUrl: e.target.value })} placeholder="https://exemple.com/logo.png" />

Couleur fond en-tête

setFormData({ ...formData, headerBgColor: e.target.value })} className="w-16 h-10 p-1" /> setFormData({ ...formData, headerBgColor: e.target.value })} placeholder="#2563eb" />

Couleur texte en-tête

setFormData({ ...formData, headerTextColor: e.target.value })} className="w-16 h-10 p-1" /> setFormData({ ...formData, headerTextColor: e.target.value })} placeholder="#ffffff" />

Couleur principale

setFormData({ ...formData, primaryColor: e.target.value })} className="w-16 h-10 p-1" /> setFormData({ ...formData, primaryColor: e.target.value })} placeholder="#2563eb" />

Utilisée pour les boutons et les accents

Titre de l'en-tête setFormData({ ...formData, headerTitle: e.target.value })} placeholder="Formation Manager Itinova" />

Corps du message

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>
  );
}

${formData.headerTitle}

Templates d'emails