diff --git a/app/(public)/_homeComponents/DemoModal.tsx b/app/(public)/_homeComponents/DemoModal.tsx new file mode 100644 index 0000000..dc3ba56 --- /dev/null +++ b/app/(public)/_homeComponents/DemoModal.tsx @@ -0,0 +1,220 @@ +"use client"; + +import { useState } from "react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { toast } from "sonner"; + +const blockedDomains = [ + "gmail.com", + "yahoo.com", + "outlook.com", + "hotmail.com", + "icloud.com", +]; + +export default function DemoModal({ trigger }: { trigger: React.ReactNode }) { + const [open, setOpen] = useState(false); + const [loading, setLoading] = useState(false); + + const [form, setForm] = useState({ + name: "", + email: "", + phoneNumber: "", + company: "", + designation: "", + solution: "", + description: "", + }); + + // 🔹 Business Email Validation + const isBusinessEmail = (email: string) => { + const domain = email.split("@")[1]; + return domain && !blockedDomains.includes(domain.toLowerCase()); + }; + + const handleSubmit = async () => { + if ( + !form.name || + !form.email || + !form.phoneNumber || + !form.company || + !form.designation || + !form.solution + ) { + toast.error("Please fill all required fields."); + return; + } + + if (!isBusinessEmail(form.email)) { + toast.error("Please use your business email (no Gmail/Yahoo etc.)"); + return; + } + + try { + setLoading(true); + + // 🔹 Call API (you will create below) + const res = await fetch("/api/demo-lead", { + method: "POST", + body: JSON.stringify(form), + }); + + if (!res.ok) throw new Error(); + + toast.success("Demo request submitted successfully!"); + + setOpen(false); + setForm({ + name: "", + email: "", + phoneNumber: "", + company: "", + designation: "", + solution: "", + description: "", + }); + } catch (err) { + toast.error("Something went wrong. Try again."); + } finally { + setLoading(false); + } + }; + + return ( + + {trigger} + + + {/* Header (Fixed) */} +
+ + + Book a Demo + +

+ See how Winixco can transform your hiring process +

+
+
+ + {/* Scrollable Body */} +
+
+ + setForm({ ...form, name: e.target.value })} + /> +
+ +
+ + setForm({ ...form, email: e.target.value })} + /> +
+ +
+ + + setForm({ ...form, phoneNumber: e.target.value }) + } + /> +
+ +
+ + setForm({ ...form, company: e.target.value })} + /> +
+ +
+ + + setForm({ ...form, designation: e.target.value }) + } + /> +
+ +
+ + +
+ +
+ +