ajout envoi smtp (paramètres, test envois, envoi à 1 participant). protège vue mot de passe
- ajout filtre page statistiques
This commit is contained in:
Yannick Le Duc
229
src/components/SendParticipantEmailModal.tsx
Normal file
229
src/components/SendParticipantEmailModal.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
'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
|
||||
const voteUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/campaigns/${campaign.id}/vote/${participant.id}`;
|
||||
|
||||
// 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 ${participant.first_name},
|
||||
|
||||
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">
|
||||
<DialogHeader>
|
||||
<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">
|
||||
{/* 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={12}
|
||||
disabled={sending}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<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">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user