87 lines
3 KiB
TypeScript
87 lines
3 KiB
TypeScript
"use client";
|
|
|
|
import { Mail, Send, X } from "lucide-react";
|
|
import { Button } from "../ui/button";
|
|
|
|
interface TicketReplyConfirmationModalProps {
|
|
isOpen: boolean;
|
|
recipientEmail: string;
|
|
recipientName: string;
|
|
messageBody: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function TicketReplyConfirmationModal({
|
|
isOpen,
|
|
recipientEmail,
|
|
recipientName,
|
|
messageBody,
|
|
onConfirm,
|
|
onCancel,
|
|
isLoading = false
|
|
}: TicketReplyConfirmationModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
|
<div className="bg-white rounded-2xl max-w-2xl w-full mx-4 shadow-2xl border max-h-[90vh] flex flex-col">
|
|
<div className="p-6 flex-1 overflow-y-auto">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<Mail className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-slate-900">Confirmation d'envoi</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4 mb-6">
|
|
<div className="rounded-lg border bg-slate-50 p-4">
|
|
<div className="text-sm text-slate-500 mb-1">Destinataire</div>
|
|
<div className="font-medium text-slate-900">{recipientName}</div>
|
|
<div className="text-sm text-slate-600 flex items-center gap-2 mt-1">
|
|
<Mail className="w-4 h-4" />
|
|
{recipientEmail}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-white p-4">
|
|
<div className="text-sm text-slate-500 mb-2">Votre message</div>
|
|
<div className="text-sm text-slate-900 whitespace-pre-wrap bg-slate-50 p-3 rounded border max-h-[200px] overflow-y-auto">
|
|
{messageBody}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
|
|
<div className="text-sm text-blue-900">
|
|
<strong>Note :</strong> Un email sera envoyé à l'adresse personnelle de l'utilisateur avec votre réponse.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t p-4 bg-slate-50 rounded-b-2xl">
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
className="flex-1"
|
|
disabled={isLoading}
|
|
>
|
|
<X className="w-4 h-4 mr-2" />
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
onClick={onConfirm}
|
|
className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white"
|
|
disabled={isLoading}
|
|
>
|
|
<Send className="w-4 h-4 mr-2" />
|
|
{isLoading ? "Envoi en cours..." : "Envoyer la réponse"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|