import { useState, useMemo } from "react"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import "react-phone-number-input/style.css"; import PhoneInput from "react-phone-number-input"; import { ArrowLeft, X, Home, Building, Layers, UserX, User, Users, UsersRound, Building2, Zap, Calendar, Search, CircleSlash, Coins, Wallet, Banknote, TrendingUp } from "lucide-react"; import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; import { useNavigate } from "react-router-dom"; type Step = | "Q1_TRADE" | "Q2_CREWS" | "Q3_TIMELINE" | "Q4_SPEND" | "Q5_NAME" | "Q6_PHONE"; type StandardTrackingFieldKey = string; type RegisteredCustomFieldId = string; type TrackingCustomField = { value?: unknown; label: string }; type TrackingFileField = { file?: File; label: string }; type TrackingImageDataField = { dataUrl?: string; label: string }; const postTrackingEvent = ( trackingPayload: Record & { formData: Record; formLabels: Record; }, options: { customFields?: Record; fileFields?: Record; imageDataFields?: Record; } = {}, ) => { const { customFields = {}, fileFields = {}, imageDataFields = {} } = options; const eventPayload = { ...trackingPayload, formData: { ...trackingPayload.formData }, formLabels: { ...trackingPayload.formLabels }, }; const body = new FormData(); for (const [key, field] of Object.entries(customFields)) { if (field.value === undefined) continue; eventPayload.formData[key] = field.value; eventPayload.formLabels[key] = field.label; } for (const [key, field] of Object.entries(imageDataFields)) { const dataUrl = field.dataUrl; if (!dataUrl) continue; if (!dataUrl.startsWith("data:image/")) { throw new Error("Image data field must be a data:image/* base64 string"); } eventPayload.formData[key] = dataUrl; eventPayload.formLabels[key] = field.label; } for (const [key, field] of Object.entries(fileFields)) { const file = field.file; if (!file) continue; if (file.size > 50 * 1024 * 1024) { throw new Error("File must be 50 MB or smaller"); } eventPayload.formData[key] = { filename: file.name, size: file.size, type: file.type || "application/octet-stream", }; eventPayload.formLabels[key] = field.label; body.append(key, file, file.name); } for (const key of Object.keys(eventPayload.formData)) { eventPayload.formLabels[key] ||= key; } body.append("event", JSON.stringify(eventPayload)); fetch("https://backend.leadconnectorhq.com/external-tracking/events", { method: "POST", headers: { version: "2021-07-28", }, body, }).catch(() => {}); // Fire-and-forget }; interface QuizModalProps { isOpen: boolean; onClose: () => void; } const PROGRESS_MAP = [50, 62, 74, 84, 91, 96, 100]; export function QuizModal({ isOpen, onClose }: QuizModalProps) { const [history, setHistory] = useState(["Q1_TRADE"]); const [displayStep, setDisplayStep] = useState("Q1_TRADE"); const [animClass, setAnimClass] = useState("animate-in fade-in slide-in-from-bottom-4 duration-500"); const [formData, setFormData] = useState>({}); const navigate = useNavigate(); const currentStep = displayStep; const progress = PROGRESS_MAP[Math.min(history.length - 1, PROGRESS_MAP.length - 1)]; const handleNext = (nextStep: Step, key?: string, value?: string) => { if (key && value !== undefined) { setFormData(prev => ({ ...prev, [key]: value })); } setAnimClass("animate-slide-out-left"); setTimeout(() => { setHistory(prev => [...prev, nextStep]); setDisplayStep(nextStep); setAnimClass("animate-slide-in-right"); }, 250); }; const handleBack = () => { if (history.length > 1) { setAnimClass("animate-slide-out-right"); setTimeout(() => { const newHistory = history.slice(0, -1); setHistory(newHistory); setDisplayStep(newHistory[newHistory.length - 1]); setAnimClass("animate-slide-in-left"); }, 250); } }; const handleClose = () => { // Only allow close on first step if (history.length === 1) { onClose(); // Reset after animation setTimeout(() => { setHistory(["Q1_TRADE"]); setDisplayStep("Q1_TRADE"); setAnimClass("animate-in fade-in slide-in-from-bottom-4 duration-500"); setFormData({}); }, 300); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const trackingPayload = { type: "external_form_submission", timestamp: Date.now(), formId: "Contractor Lead Generation Quiz", formData: { first_name: formData.name?.split(" ")[0] || "", last_name: formData.name?.split(" ").slice(1).join(" ") || "", phone: formData.phone || "", source: "sitesfunnelusa", }, formLabels: { first_name: "First Name", last_name: "Last Name", phone: "Phone", source: "Contact Source", }, url: window.location.href, title: document.title, path: window.location.pathname, userAgent: navigator.userAgent, trackingId: "tk_5a61238b89b9410b917d0cd112d42265", locationId: "kVaOFIx6l0Mqf5mx1hur", sessionId: crypto.randomUUID(), properties: { deviceType: /Mobile|Android|iPhone/i.test(navigator.userAgent) ? "mobile" : "desktop", }, tags: ["US Website Funnel Lead"], }; postTrackingEvent(trackingPayload, { customFields: { "S8ZpkDcsccPmJ5PAbPil": { value: formData.trade, label: "What kind of contracting work do you do?" }, "1qWeFx6dx2SIiv8IANdY": { value: formData.crews, label: "How many crews do you have?" }, "mqJ0WWKbLRmb0ir1Yr1j": { value: formData.timeline, label: "How soon do you want more leads coming in?" }, "rNTyugo1b2uyZyWhnWTm": { value: formData.spend, label: "How much do you spend on marketing per month?" }, "l4QR6EfNa0OKacYsXpyG": { value: "dryftsites funnel 01", label: "lead type" }, } }); console.log("Submitting lead:", formData); onClose(); navigate("/we-will-call-you"); setTimeout(() => { setHistory(["Q1_TRADE"]); setDisplayStep("Q1_TRADE"); setAnimClass("animate-in fade-in slide-in-from-bottom-4 duration-500"); setFormData({}); }, 300); }; // Prevent closing by clicking outside if not on first step const handleInteractOutside = (e: Event) => { if (history.length > 1) { e.preventDefault(); } }; return ( ); }