diff --git a/app/_inquires/form.tsx b/app/_inquires/form.tsx index d7cc371..0500d90 100644 --- a/app/_inquires/form.tsx +++ b/app/_inquires/form.tsx @@ -4,7 +4,8 @@ import { sanitizeText } from "@/lib/sanitize"; import { createFieldValidation } from "@/lib/validation"; import api from "@/service/api"; import { CmsContact } from "@/types/TCms"; -import { useMemo, useState } from "react"; +import HCaptcha from "@hcaptcha/react-hcaptcha"; +import { useMemo, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "react-toastify"; import InputGroup from "../_components/InputGroup"; @@ -26,6 +27,8 @@ const InquiresForm = ({ contactData, }: InquiresFormProps) => { const [isLoading, setIsLoading] = useState(false); + const [hcaptchaToken, setHcaptchaToken] = useState(null); + const captchaRef = useRef(null); const { register, handleSubmit, @@ -61,13 +64,24 @@ const InquiresForm = ({ required: false, }, ], - [] + [], ); const fields = contactData?.fields || defaultFields; const formFieldNames = useMemo(() => fields.map((f) => f.name), [fields]); + const onCaptchaVerify = (token: string) => { + setHcaptchaToken(token); + }; + + const onCaptchaExpire = () => { + setHcaptchaToken(null); + }; const onSubmit = async (data: TInquiresForm) => { + if (!hcaptchaToken) { + toast.error("Please complete the captcha verification"); + return; + } setIsLoading(true); try { const response = (await api.post("inquiries", { ...data })).data; @@ -167,6 +181,14 @@ const InquiresForm = ({ /> ); })} +
+ +