import { useEffect } from "react"; import { useMutation, useRouter } from "blitz"; import { useForm } from "react-hook-form"; import * as Panelbear from "@panelbear/panelbear-js"; import joinWaitlist from "../mutations/join-waitlist"; type Form = { email: string; }; export default function CTAForm() { const router = useRouter(); const [joinWaitlistMutation] = useMutation(joinWaitlist); const { handleSubmit, register, setFocus, formState: { isSubmitted }, } = useForm<Form>(); useEffect(() => { if (typeof router.query.join_waitlist !== "undefined") { setFocus("email"); router.replace("/"); } }, []); const onSubmit = handleSubmit(async ({ email }) => { if (isSubmitted) { return; } Panelbear.track("join-waitlist"); return joinWaitlistMutation({ email }); }); return ( <form onSubmit={onSubmit}> {isSubmitted ? ( <p className="text-center md:text-left mt-2 opacity-75 text-green-900 text-md"> You're on the list! We will be in touch soon </p> ) : ( <div className="flex flex-col sm:flex-row justify-center w-full md:max-w-md md:mx-0"> <input {...register("email")} type="email" className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-rebeccapurple-500 focus:border-rebeccapurple-500" placeholder="Enter your email address" /> <button type="submit" className="btn text-white bg-rebeccapurple-500 hover:bg-rebeccapurple-400 flex-shrink-0" > Request access </button> </div> )} </form> ); }