diff --git a/pages/StartAProject.tsx b/pages/StartAProject.tsx index 0f64ab6..330df3e 100644 --- a/pages/StartAProject.tsx +++ b/pages/StartAProject.tsx @@ -51,32 +51,7 @@ import { Shield, } from "lucide-react"; -// Validation Schema -const validationSchema = Yup.object().shape({ - name: Yup.string() - .required("Name is required") - .min(2, "Name must be at least 2 characters") - .max(50, "Name must not exceed 50 characters"), - email: Yup.string() - .required("Email is required") - .email("Invalid email address"), - country: Yup.string().required("Country is required"), - phone: Yup.string() - .required("Phone number is required") - .matches(/^[\d\s+\-().]{10,}$/, "Please enter a valid phone number"), - services: Yup.string().required("Service selection is required"), - budget: Yup.string().required("Budget range is required"), - projectDescription: Yup.string() - .required("Project description is required") - .min(50, "Description should be at least 50 characters") - .max(2000, "Description must not exceed 2000 characters"), - developmentStage: Yup.string().required("Development stage is required"), - timeline: Yup.string().required("Timeline is required"), - ndaRequired: Yup.boolean(), - agreeTerms: Yup.boolean() - .oneOf([true], "You must agree to the terms and conditions") - .required("You must agree to the terms and conditions"), -}); + // Hero Section const HeroSection = () => { @@ -120,6 +95,41 @@ const HeroSection = () => { // Project Form Section const ProjectFormSection = () => { + + const [isRecaptchaVerified, setIsRecaptchaVerified] = useState(false); + + // Validation Schema + const validationSchema = Yup.object().shape({ + name: Yup.string() + .required("Name is required") + .min(2, "Name must be at least 2 characters") + .max(50, "Name must not exceed 50 characters"), + email: Yup.string() + .required("Email is required") + .email("Invalid email address"), + country: Yup.string().required("Country is required"), + phone: Yup.string() + .required("Phone number is required") + .matches(/^[\d\s+\-().]{10,}$/, "Please enter a valid phone number"), + services: Yup.string().required("Service selection is required"), + budget: Yup.string().required("Budget range is required"), + projectDescription: Yup.string() + .required("Project description is required") + .min(50, "Description should be at least 50 characters") + .max(2000, "Description must not exceed 2000 characters"), + developmentStage: Yup.string().required("Development stage is required"), + timeline: Yup.string().required("Timeline is required"), + ndaRequired: Yup.boolean(), + agreeTerms: Yup.boolean() + .oneOf([true], "You must agree to the terms and conditions") + .required("You must agree to the terms and conditions"), + recaptcha: Yup.string() + .required("Please complete the reCAPTCHA verification") + .test('recaptcha', 'reCAPTCHA is required', () => { + return isRecaptchaVerified; // This will validate against your state + }), + }); + const [formData, setFormData] = useState({ name: "", email: "", @@ -138,7 +148,6 @@ const ProjectFormSection = () => { const [touched, setTouched] = useState>({}); const [attachedFiles, setAttachedFiles] = useState([]); const [recaptchaToken, setRecaptchaToken] = useState(""); - const [isRecaptchaVerified, setIsRecaptchaVerified] = useState(false); const recaptchaRef = useRef(null); const [submitContactForm, { isLoading }] = useStoreContactUsMutation(); @@ -208,6 +217,14 @@ const ProjectFormSection = () => { const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); + if (!isRecaptchaVerified) { + setErrors(prev => ({ + ...prev, + recaptcha: "Please complete the reCAPTCHA verification" + })); + return; + } + const isValid = await validateForm(); if (!isValid) return; @@ -731,7 +748,7 @@ const ProjectFormSection = () => {
{isLoading ? ( @@ -746,6 +763,12 @@ const ProjectFormSection = () => {
+ {errors.recaptcha && ( +

+ {errors.recaptcha} +

+ )} + {(!formData.agreeTerms || !isRecaptchaVerified) && (

{!formData.agreeTerms && !isRecaptchaVerified