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

63 lines
1.5 KiB
TypeScript
Raw Normal View History

2021-09-24 23:07:40 +00:00
import { useEffect } from "react";
2021-09-21 20:02:27 +00:00
import { useMutation, useRouter } from "blitz";
2021-08-27 21:09:45 +00:00
import { useForm } from "react-hook-form";
2021-08-29 21:00:34 +00:00
import * as Panelbear from "@panelbear/panelbear-js";
2021-08-27 21:09:45 +00:00
import joinWaitlist from "../mutations/join-waitlist";
type Form = {
email: string;
};
export default function CTAForm() {
2021-09-21 20:02:27 +00:00
const router = useRouter();
2021-08-27 21:09:45 +00:00
const [joinWaitlistMutation] = useMutation(joinWaitlist);
const {
handleSubmit,
register,
2021-09-21 20:02:27 +00:00
setFocus,
2021-08-27 21:09:45 +00:00
formState: { isSubmitted },
} = useForm<Form>();
2021-09-21 20:02:27 +00:00
useEffect(() => {
if (typeof router.query.join_waitlist !== "undefined") {
setFocus("email");
router.replace("/");
}
}, []);
2021-08-27 21:09:45 +00:00
const onSubmit = handleSubmit(async ({ email }) => {
if (isSubmitted) {
return;
}
2021-08-29 21:00:34 +00:00
Panelbear.track("join-waitlist");
2021-08-27 21:09:45 +00:00
return joinWaitlistMutation({ email });
});
return (
2021-09-01 15:04:16 +00:00
<form onSubmit={onSubmit}>
2021-08-27 21:09:45 +00:00
{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>
) : (
2021-09-01 15:04:16 +00:00
<div className="flex flex-col sm:flex-row justify-center w-full md:max-w-md md:mx-0">
2021-08-27 21:09:45 +00:00
<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"
2021-08-27 21:09:45 +00:00
placeholder="Enter your email address"
/>
<button
type="submit"
className="btn text-white bg-rebeccapurple-500 hover:bg-rebeccapurple-400 flex-shrink-0"
>
2021-08-27 21:09:45 +00:00
Request access
</button>
</div>
)}
</form>
);
}