91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import type { JobApplication } from '@/types/entities';
|
|
import React, { useState } from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Mail, Phone, Send, CheckCircle2 } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface MessageCandidateModalProps {
|
|
open: boolean;
|
|
onClose?: () => void;
|
|
/* `Partial`: `TalentPool` opens this with a target built from a profile —
|
|
name, email and phone — rather than a stored application. */
|
|
application: Partial<JobApplication>;
|
|
}
|
|
|
|
export default function MessageCandidateModal({ open, onClose, application }: MessageCandidateModalProps) {
|
|
const { t } = useTranslation();
|
|
const [channel, setChannel] = useState('message');
|
|
const [message, setMessage] = useState('');
|
|
const [sent, setSent] = useState(false);
|
|
|
|
const handleSend = () => {
|
|
setSent(true);
|
|
setTimeout(() => {
|
|
setSent(false);
|
|
setMessage('');
|
|
onClose();
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('messageCandidateModal.message')} {application?.applicant_name}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{sent ? (
|
|
<div className="py-8 text-center">
|
|
<div className="w-12 h-12 rounded-full bg-[#D1FAE5] flex items-center justify-center mx-auto mb-3">
|
|
<CheckCircle2 className="w-6 h-6 text-[#059669]" />
|
|
</div>
|
|
<p className="text-[14px] font-medium text-[#111827]">{t('messageCandidateModal.messageSent')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={() => setChannel('message')}
|
|
className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
|
|
channel === 'message' ? 'border-[#0838E0] bg-[#EEF3FE] text-[#0838E0]' : 'border-[#E5E7EB] text-[#6B7280]'
|
|
}`}
|
|
>
|
|
<Mail className="w-4 h-4" /> {t('messageCandidateModal.message')}
|
|
</button>
|
|
<button
|
|
onClick={() => setChannel('call')}
|
|
className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
|
|
channel === 'call' ? 'border-[#0838E0] bg-[#EEF3FE] text-[#0838E0]' : 'border-[#E5E7EB] text-[#6B7280]'
|
|
}`}
|
|
>
|
|
<Phone className="w-4 h-4" /> {t('messageCandidateModal.call')}
|
|
</button>
|
|
</div>
|
|
|
|
{channel === 'call' ? (
|
|
<div className="py-6 text-center text-[13px] text-[#6B7280]">
|
|
<Phone className="w-8 h-8 text-[#0838E0] mx-auto mb-2" />
|
|
{t('messageCandidateModal.calling')} {application?.phone || 'candidate'}...
|
|
</div>
|
|
) : (
|
|
<textarea
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
placeholder={`Hi ${application?.applicant_name?.split(' ')[0]}, ...`}
|
|
className="w-full min-h-[100px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0838E0] focus:outline-none resize-none"
|
|
/>
|
|
)}
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>{t('messageCandidateModal.cancel')}</Button>
|
|
<Button onClick={handleSend} disabled={channel === 'message' && !message.trim()} className="bg-[#0838E0] hover:bg-[#062BAF]">
|
|
<Send className="w-4 h-4 mr-2" /> {t('messageCandidateModal.send')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |