From 4d823b9fbb949a03ab91eea2c0602d15987b12db Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 29 Apr 2024 20:40:25 +0530
Subject: [PATCH] Form added

---
 src/components/Contact/Form.jsx | 86 ++++++++++++++++++++++-----------
 1 file changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx
index 87b7da7..4ddfd16 100644
--- a/src/components/Contact/Form.jsx
+++ b/src/components/Contact/Form.jsx
@@ -29,6 +29,8 @@ import forml from "../../assets/images/forml.png";
 import { Link } from "react-router-dom";
 import ReCAPTCHA from "react-google-recaptcha";
 import { contactUs } from "../../service/api";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
 
 const Contact = () => {
   const {
@@ -45,6 +47,11 @@ const Contact = () => {
 
   // const email = "rubix@gmail.com";
 
+  const preprocessPhoneNumber = (value) => {
+    // Remove any non-digit characters from the phone number
+    return value.replace(/\D/g, "");
+  };
+
   const handleVerify = (token) => {
     setRecaptchaToken(token);
   };
@@ -58,6 +65,7 @@ const Contact = () => {
 
     //   reset();
     // }
+    // console.log(data.phone);
     try {
       const result = await contactUs(data);
       if (result.status) {
@@ -432,7 +440,7 @@ const Contact = () => {
                         value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                         message: "Please enter a valid email address",
                       },
-                      required: true,
+                      required: "Email ID is required",
                     })}
                   />
                   {errors.email && (
@@ -453,34 +461,55 @@ const Contact = () => {
                   >
                     Phone*
                   </label>
-                  <input
-                    style={{
-                      width: "100%",
-                      marginBottom: "5px",
-                      background: "#1E1E23",
-                      color: "#fff",
-                      padding: "10px",
-                      marginTop: "10px",
-                      borderRadius: "5px",
-                    }}
-                    //   placeholder="Phone"
-                    type="tel"
-                    {...register("phone", {
-                      pattern: {
-                        value: /^[0-9]*$/,
-                        message: "Phone number should contain only digits",
-                      },
-                      minLength: {
-                        value: 10,
-                        message: "Phone number should be at least 10 digits",
-                      },
-                      maxLength: {
-                        value: 10,
-                        message: "Phone number should not exceed 10 digits",
-                      },
-                      required: true,
-                    })}
+                  <Controller
+                    name="phone"
+                    control={control}
+                    defaultValue=""
+                    render={({ field }) => (
+                      <PhoneInput
+                        // autoFormat={false}
+                        placeholder
+                        type="tel"
+                        enableSearch={true}
+                        // country={"in"}
+                        inputStyle={{
+                          display: "block",
+                          marginBottom: "5px !important",
+                          background: "#1E1E23",
+                          color: "#fff",
+                          marginTop: "10px !important",
+                          borderRadius: "5px",
+                          border: "none",
+                          width: "100%",
+                          height: "43px",
+                        }}
+                        {...field}
+                        inputProps={{
+                          name: "phone",
+                          ...register("phone", {
+                            pattern: {
+                              // value: /^[0-9]*$/,
+                              value: /^[+()?[\d -]+$/,
+                              message:
+                                "Phone number should contain only digits",
+                            },
+                            maxLength: {
+                              value: 17, //including the space and other non digits
+                              message:
+                                "Phone number should not exceed 10 digits",
+                            },
+                            minLength: {
+                              value: 15,
+                              message:
+                                "Phone number should be at least 10 digits",
+                            },
+                            required: "Please enter a valid phone number",
+                          }),
+                        }}
+                      />
+                    )}
                   />
+                  {/* <PhoneInput country={"in"} enableSearch={true} type="tel" /> */}
                   {errors.phone && (
                     <p style={{ fontSize: "13px", color: "red" }}>
                       {errors.phone.message}
@@ -528,6 +557,7 @@ const Contact = () => {
                       <option value="investing">Investing</option>
                       <option value="events">Events</option>
                       <option value="media">Media</option>
+                      <option value="career">Career</option>
                     </select>
                   )}
                 />