diff --git a/app/_contact-us/form.tsx b/app/_contact-us/form.tsx index bedb149..d2b9071 100644 --- a/app/_contact-us/form.tsx +++ b/app/_contact-us/form.tsx @@ -1,6 +1,7 @@ "use client"; import api from "@/service/api"; -import { useState } from "react"; +import HCaptcha from "@hcaptcha/react-hcaptcha"; +import { useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "react-toastify"; import InputGroup from "../_components/InputGroup"; @@ -22,18 +23,37 @@ const ContactUsForm = ({ columnsPerRow = 1, }: IProps) => { const [isLoading, setIsLoading] = useState(false); + const [hcaptchaToken, setHcaptchaToken] = useState(null); + const captchaRef = useRef(null); const { register, handleSubmit, formState: { errors }, reset, } = useForm(); + + const onCaptchaVerify = (token: string) => { + setHcaptchaToken(token); + }; + + const onCaptchaExpire = () => { + setHcaptchaToken(null); + }; + const onSubmit = async (data: TContactUsForm) => { + if (!hcaptchaToken) { + toast.error("Please complete the captcha verification"); + return; + } setIsLoading(() => true); try { - const response = (await api.post("contacts", { ...data })).data; + const response = ( + await api.post("contacts", { ...data, hcaptcha_token: hcaptchaToken }) + ).data; toast.success(response.message); reset(); + setHcaptchaToken(null); + captchaRef.current?.resetCaptcha(); } catch (error) { console.log(error); toast.error("Something went wrong"); @@ -143,6 +163,14 @@ const ContactUsForm = ({ }, }} /> +
+ +