diff --git a/hire-ai/components/outreach/compose/compose-message.tsx b/hire-ai/components/outreach/compose/compose-message.tsx index baa28c5..b6ae8ec 100644 --- a/hire-ai/components/outreach/compose/compose-message.tsx +++ b/hire-ai/components/outreach/compose/compose-message.tsx @@ -25,7 +25,25 @@ import { TooltipTrigger, TooltipProvider, } from "@/components/ui/tooltip"; -import { Send, Clock, Save, Users, Mail, Eye } from "lucide-react"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/components/ui/alert-dialog"; +import { + Send, + Clock, + Save, + Users, + Mail, + Eye, + AlertTriangle, + CheckCircle, +} from "lucide-react"; import type { EmailTemplate } from "@/types/outreach"; import { sendMail, type sendMailProps } from "@/utils/mailgun/sendMail"; import { htmlTemplates } from "@/app/(recruiter)/outreach/_templates"; @@ -48,6 +66,10 @@ export function ComposeMessage({ useState(""); const [isLoading, setIsLoading] = useState(false); const [previewMode, setPreviewMode] = useState<"text" | "html">("text"); + const [alertMessage, setAlertMessage] = useState(""); + const [showValidationDialog, setShowValidationDialog] = useState(false); + const [showSuccessDialog, setShowSuccessDialog] = useState(false); + const [successMessage, setSuccessMessage] = useState(""); const handleTemplateChange = (templateId: string) => { setSelectedTemplate(templateId); @@ -126,8 +148,44 @@ export function ComposeMessage({ return processedContent; }; + const validateForm = (): { isValid: boolean; missingFields: string[] } => { + const missingFields: string[] = []; + + if (!emailData.to.length) { + missingFields.push("Recipients"); + } + if (!emailData.subject.trim()) { + missingFields.push("Subject"); + } + if (!emailData.text.trim()) { + missingFields.push("Message"); + } + + return { + isValid: missingFields.length === 0, + missingFields, + }; + }; + + const showValidationAlert = (missingFields: string[]) => { + setAlertMessage( + `Please fill out the following required fields: ${missingFields.join(", ")}`, + ); + setShowValidationDialog(true); + }; + + const showSuccessAlert = (recipientCount: number) => { + setSuccessMessage( + `Message sent successfully to ${recipientCount} recipient${recipientCount !== 1 ? "s" : ""}!`, + ); + setShowSuccessDialog(true); + }; + const handleSendNow = async () => { - if (!emailData.to.length || !emailData.subject || !emailData.text) { + const validation = validateForm(); + + if (!validation.isValid) { + showValidationAlert(validation.missingFields); return; } @@ -147,6 +205,9 @@ export function ComposeMessage({ console.log("Message sent successfully to:", emailData.to); + // Show success dialog + showSuccessAlert(emailData.to.length); + // Reset form after successful send setEmailData({ to: [], @@ -163,6 +224,13 @@ export function ComposeMessage({ }; const handleScheduleSend = () => { + const validation = validateForm(); + + if (!validation.isValid) { + showValidationAlert(validation.missingFields); + return; + } + // Implementation for scheduling message console.log("Scheduling message:", emailData); }; @@ -172,9 +240,6 @@ export function ComposeMessage({ console.log("Saving draft:", emailData); }; - const isFormValid = - emailData.to.length > 0 && emailData.subject && emailData.text; - // Check if current content is HTML const isHtmlContent = emailData.text.includes("") || @@ -189,7 +254,7 @@ export function ComposeMessage({ Compose Message - Send personalized outreach to candidates using HTML + Send personalized outreach to candidates using mail templates @@ -233,7 +298,7 @@ export function ComposeMessage({

- Choose a pre-built HTML template to + Choose a pre-built mail template to start with

@@ -379,7 +444,7 @@ export function ComposeMessage({