testing recaptcha validation

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<Record<string, boolean>>({});
   const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
   const [recaptchaToken, setRecaptchaToken] = useState<string>("");
-  const [isRecaptchaVerified, setIsRecaptchaVerified] = useState(false);
   const recaptchaRef = useRef<ReCaptchaRef>(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 = () => {
                   <ShimmerButton
                     type="submit"
                     className="w-full py-6 text-xl rounded-2xl shadow-lg hover:shadow-xl"
-                    disabled={!formData.agreeTerms || isLoading}
+                    disabled={!formData.agreeTerms || isRecaptchaVerified || isLoading}
                   >
                     <div className="inline-flex items-center justify-center gap-3">
                       {isLoading ? (
@@ -746,6 +763,12 @@ const ProjectFormSection = () => {
                     </div>
                   </ShimmerButton>
 
+                  {errors.recaptcha && (
+                    <p className="text-red-400 text-sm text-center mt-3">
+                      {errors.recaptcha}
+                    </p>
+                  )}
+
                   {(!formData.agreeTerms || !isRecaptchaVerified) && (
                     <p className="text-center text-sm text-gray-400 mt-3">
                       {!formData.agreeTerms && !isRecaptchaVerified