232 lines
8.0 KiB
TypeScript
232 lines
8.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Participant, Campaign } from '@/types';
|
|
import { settingsService } from '@/lib/services';
|
|
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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { Mail, Send, CheckCircle, XCircle } from 'lucide-react';
|
|
|
|
interface SendParticipantEmailModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
participant: Participant;
|
|
campaign: Campaign;
|
|
}
|
|
|
|
export default function SendParticipantEmailModal({
|
|
isOpen,
|
|
onClose,
|
|
participant,
|
|
campaign
|
|
}: SendParticipantEmailModalProps) {
|
|
const [subject, setSubject] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [sending, setSending] = useState(false);
|
|
const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
|
|
|
|
// Générer le lien de vote (utiliser uniquement le lien court)
|
|
const voteUrl = participant.short_id
|
|
? `${typeof window !== 'undefined' ? window.location.origin : ''}/v/${participant.short_id}`
|
|
: `${typeof window !== 'undefined' ? window.location.origin : ''}/v/EN_ATTENTE`;
|
|
|
|
// Initialiser le message par défaut quand le modal s'ouvre
|
|
useEffect(() => {
|
|
if (isOpen && campaign && participant) {
|
|
setSubject(`Votez pour la campagne "${campaign.title}"`);
|
|
setMessage(`Bonjour [PRENOM],
|
|
|
|
Vous êtes invité(e) à participer au vote pour la campagne "${campaign.title}".
|
|
|
|
${campaign.description}
|
|
|
|
Pour voter, cliquez sur le lien suivant :
|
|
${voteUrl}
|
|
|
|
Vous disposez d'un budget de ${campaign.budget_per_user}€ à répartir entre les propositions selon vos préférences.
|
|
|
|
Merci de votre participation !
|
|
|
|
Cordialement,
|
|
L'équipe Mes Budgets Participatifs`);
|
|
}
|
|
}, [isOpen, campaign, participant]);
|
|
|
|
const handleSendEmail = async () => {
|
|
if (!subject.trim() || !message.trim()) {
|
|
setResult({ success: false, message: 'Veuillez remplir le sujet et le message' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSending(true);
|
|
setResult(null);
|
|
|
|
// Récupérer les paramètres SMTP
|
|
const smtpSettings = await settingsService.getSmtpSettings();
|
|
|
|
if (!smtpSettings.host || !smtpSettings.username || !smtpSettings.password) {
|
|
setResult({ success: false, message: 'Configuration SMTP manquante. Veuillez configurer les paramètres email dans les paramètres.' });
|
|
return;
|
|
}
|
|
|
|
// Envoyer l'email via l'API
|
|
const response = await fetch('/api/send-participant-email', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
smtpSettings,
|
|
toEmail: participant.email,
|
|
toName: `${participant.first_name} ${participant.last_name}`,
|
|
subject: subject.trim(),
|
|
message: message.trim(),
|
|
campaignTitle: campaign.title,
|
|
voteUrl
|
|
}),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
setResult({ success: true, message: 'Email envoyé avec succès !' });
|
|
// Vider les champs après succès
|
|
setTimeout(() => {
|
|
setSubject('');
|
|
setMessage('');
|
|
onClose();
|
|
}, 2000);
|
|
} else {
|
|
setResult({ success: false, message: result.error || 'Erreur lors de l\'envoi de l\'email' });
|
|
}
|
|
} catch (error) {
|
|
setResult({ success: false, message: 'Erreur inattendue lors de l\'envoi' });
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setSubject('');
|
|
setMessage('');
|
|
setResult(null);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={handleClose}>
|
|
<DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col">
|
|
<DialogHeader className="flex-shrink-0">
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Mail className="w-5 h-5" />
|
|
Envoyer un email à {participant.first_name} {participant.last_name}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Envoyez un email personnalisé à ce participant avec le lien de vote.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 flex-1 overflow-y-auto min-h-0">
|
|
{/* Informations du participant */}
|
|
<div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
<h4 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-2">
|
|
Destinataire :
|
|
</h4>
|
|
<div className="text-sm text-slate-600 dark:text-slate-300">
|
|
<div><strong>Nom :</strong> {participant.first_name} {participant.last_name}</div>
|
|
<div><strong>Email :</strong> {participant.email}</div>
|
|
<div><strong>Campagne :</strong> {campaign.title}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sujet */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email-subject">Sujet *</Label>
|
|
<Input
|
|
id="email-subject"
|
|
type="text"
|
|
placeholder="Sujet de l'email"
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
disabled={sending}
|
|
/>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email-message">Message *</Label>
|
|
<Textarea
|
|
id="email-message"
|
|
placeholder="Votre message..."
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
rows={8}
|
|
disabled={sending}
|
|
className="font-mono text-sm resize-none"
|
|
/>
|
|
<div className="text-xs text-slate-500 dark:text-slate-400">
|
|
Le lien de vote sera automatiquement inclus dans votre message.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Aperçu du lien */}
|
|
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
|
|
Lien de vote qui sera inclus :
|
|
</h4>
|
|
<div className="text-xs text-blue-700 dark:text-blue-300 font-mono break-all">
|
|
{voteUrl}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Résultat */}
|
|
{result && (
|
|
<Alert className={result.success ? 'border-green-200 bg-green-50 dark:bg-green-900/20' : 'border-red-200 bg-red-50 dark:bg-red-900/20'}>
|
|
{result.success ? (
|
|
<CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
|
|
) : (
|
|
<XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
|
|
)}
|
|
<AlertDescription className={result.success ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}>
|
|
{result.message}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="flex flex-col sm:flex-row gap-2 flex-shrink-0 pt-4 border-t border-slate-200 dark:border-slate-700">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleClose}
|
|
disabled={sending}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
onClick={handleSendEmail}
|
|
disabled={sending || !subject.trim() || !message.trim()}
|
|
className="flex items-center gap-2"
|
|
>
|
|
{sending ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
Envoi en cours...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Send className="w-4 h-4" />
|
|
Envoyer l'email
|
|
</>
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|