shellphone.app/app/public-area/components/cta-form.tsx

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&#39;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>
	);
}