diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx index fd419f64d..0f5ca710a 100644 --- a/components/ContactForm.tsx +++ b/components/ContactForm.tsx @@ -1,4 +1,6 @@ +"use client"; import { useState } from "react"; +import { useRouter } from "next/router"; const CONTACT_KEY = "Z-ymc97Dae8u4HHybHknc4DGRb51u6NnTOUaW-qG71ah1ZqsJfRcI6SaHg5APWutNcnMcaN3oZrZky-VQxBIyw"; @@ -7,17 +9,24 @@ export default function ContactForm({ eventName, eventVersion, gtmEvent, + button = "Send", + redirectTo, }: { eventName: string; eventVersion: string; gtmEvent: string; + button?: string; + redirectTo?: string; }) { + const router = useRouter(); + + // Fields const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [message, setMessage] = useState(""); - const [teamSize, setTeamSize] = useState(""); + const [survey, setSurvey] = useState(""); const [disabled, setDisabled] = useState(false); - const [buttonCopy, setButtonCopy] = useState("Send"); + const [buttonCopy, setButtonCopy] = useState(button); const onSubmit = async (e) => { e.preventDefault(); @@ -36,7 +45,7 @@ export default function ContactForm({ await window.Inngest.event( { name: eventName, - data: { email, name, message, teamSize, ref }, + data: { email, name, message, survey, ref }, user: { email, name }, v: eventVersion, }, @@ -46,9 +55,20 @@ export default function ContactForm({ window.dataLayer?.push({ event: gtmEvent, ref, - teamSize, + survey, }); - setButtonCopy("Your message has been sent!"); + if (redirectTo) { + setButtonCopy("Redirecting to scheduling..."); + const redirectURL = new URL(redirectTo); + // Assume it's a Savvycal call URL + redirectURL.searchParams.set("display_name", name); + redirectURL.searchParams.set("email", email); + router.push(redirectURL); + console.log(redirectURL.toString()); + router.push(redirectTo); + } else { + setButtonCopy("Your message has been sent!"); + } } catch (e) { console.warn("Message not sent"); setButtonCopy("Message not sent"); @@ -62,7 +82,9 @@ export default function ContactForm({ className="p-4 sm:p-6 bg-surfaceSubtle flex flex-col items-start gap-4 rounded-lg border border-subtle" >