From 26d38a057eb41bb1f5ce2491a81edbaed76e844d Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 29 Apr 2024 19:18:26 +0530
Subject: [PATCH] Added country code to form/ updated Subnets

---
 package.json                                  |  1 +
 src/components/Contact/Form.jsx               | 86 +++++++++++++------
 .../SubnetsComponent/NewSubnetComp.jsx        |  2 +-
 src/index.css                                 | 10 +++
 4 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 0a18478..36a2b04 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.51.2",
     "react-intersection-observer": "^9.8.1",
+    "react-phone-input-2": "^2.15.1",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
     "swiper": "^11.1.0"
diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx
index 87b7da7..4a5a1eb 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>
                   )}
                 />
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 91ca45c..1df02be 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -462,7 +462,7 @@ export const NewSubnetComp = () => {
                   >
                     51.4 Million RBT
                   </Text>
-                  <Text fontSize={"16px"}>Fixed Supply.Hardcapped </Text>
+                  <Text fontSize={"16px"}>Fixed Supply. Hardcapped </Text>
                 </Box>
               </Box>
             </Box>
diff --git a/src/index.css b/src/index.css
index b0b2ac0..d66d1a4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -167,6 +167,16 @@ span.swiper-pagination-bullet {
   font-weight: 900 !important;
 }
 
+.react-tel-input .form-control {
+  margin-top: 10px !important;
+  margin-bottom: 5px !important;
+}
+
+.react-tel-input .flag-dropdown {
+  background-color: #de858e;
+  border: none;
+}
+
 @media only screen and (max-width: 600px) {
   .swiper-button-prev:after,
   .swiper-button-next:after {