contact page task almost done

.env

@@ -8,7 +8,7 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my
 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
 
-# Changed href to this url
-REACT_APP_APPSITE=" http://www.dev.floatev.chiefsoft.us"
+REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
 
 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT = 10000

src/assets/css/style.css

@@ -3525,7 +3525,44 @@ header.fix_style.white_header {
   resize: none;
 }
 
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
+  margin: 0 !important;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
+  width: 24px;
+  height: 24px;
+}
+
+#contact_body{
+  min-height: 48rem;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.contact_body{
+  font-size: 20px;
+  font-weight: 800;
+  justify-content: center;
+  text-align: center;
+}
+
 /* For the err msg */
+#errText{
+  text-align: center;
+  color: tomato;
+  font-weight: 600;
+}
+
 .contact_page_section .contact_inner .contact_form form .form-group span{
   font-size: 12px;
   color: tomato;
@@ -4609,6 +4646,55 @@ header.fix_style.white_header {
   padding: 20px 0 0 0;
 }
 
+/* Loader */
+
+.loader{
+  border-radius: 100%;
+  position: relative;
+}
+
+.loader-sm{
+  width: 24px;
+  height: 24px;
+}
+
+/* LOADER 1 */
+
+#loader-1:before, #loader-1:after{
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border: 3.5px solid transparent;
+  border-top-color: #3498db;
+}
+
+#loader-1:before{
+  z-index: 100;
+  animation: spin 1.5s infinite;
+}
+
+#loader-1:after{
+  border: 3.5px solid #ccc;
+}
+
+@keyframes spin{
+  0%{
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 992px) {
   .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
     position: absolute !important;

src/component/Contact/Main.js

@@ -1,7 +1,7 @@
 /** @format */
 
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
@@ -50,6 +50,10 @@ const FormInput = (props) => {
 };
 
 const Main = ({ brdcum }) => {
+  let response = document.getElementById("contact_loader");
+  let contact_body = document.getElementById("contact_body");
+  let errText = document.getElementById("errText");
+  let navigate = useNavigate();
   // Form Validation
   const [values, setValues] = useState({
     name: "",
@@ -60,6 +64,7 @@ const Main = ({ brdcum }) => {
     checkBox: false,
   }); //initial state values
   const [countries, setCountries] = useState([]); // initial state for country dropdown
+  const [myData, setMyData] = useState(null);
 
   // Gave a generic name for multiple calls
   const API_CALL = new SiteService(); // instantiating the class
@@ -81,12 +86,33 @@ const Main = ({ brdcum }) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    let formReg;
+    response.innerHTML = `<div
+    class="loader loader-sm"
+    id="loader-1" style='margin-right: 20px'></div>`;
 
-    contactForm(JSON.stringify(values)).then((contact) => {
-      formReg = contact;
-      console.log("FormReg:", formReg);
-    });
+    contactForm(values)
+      .then((contact) => {
+        setMyData(contact);
+
+        // Checking for errors
+        if (contact?.data?.status < 1 || contact?.data?.message_id == "")
+          return (errText.textContent =
+            "unable to send your message, please try able");
+        else {
+          response.innerHTML = `<p> SEND MESSAGE </p>`;
+          
+          contact_body.innerHTML = `<div class='contact_body'>
+      <div><img /></div>
+      <p>We have received your message and will follow up promptly.</p>
+      </div>`;
+          setTimeout(() => {
+            navigate("/");
+          }, 10000);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   //CALLS THE API AFTER COMPONENT LOADS
@@ -94,6 +120,10 @@ const Main = ({ brdcum }) => {
     allCountry().then((data) => setCountries(Object.values(data.data)));
   }, []);
 
+  useEffect(() => {
+    myData;
+  }, [myData]);
+
   return (
     <>
       {brdcum.b1 && (
@@ -150,7 +180,9 @@ const Main = ({ brdcum }) => {
         id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div className="contact_form">
+            <div
+              className="contact_form"
+              id="contact_body">
               <div className="section_title">
                 <h2>
                   <span>Leave a</span> message
@@ -241,12 +273,15 @@ const Main = ({ brdcum }) => {
                 <div className="form-group mb-0">
                   <button
                     type="submit"
-                    className="btn puprple_btn"
-                    aria-label="submit form">
-                    SEND MESSAGE
+                    className="btn puprple_btn contact_btn"
+                    aria-label="submit form"
+                    id="contact_loader">
+                    <p> SEND MESSAGE </p>
                   </button>
                 </div>
               </form>
+              {/* Error Tag */}
+              <p id="errText"></p>
             </div>
 
             {/* Contact Info */}
@@ -259,7 +294,7 @@ const Main = ({ brdcum }) => {
               </div>
               <div className="section_title">
                 <h2>
-                  Have any <span>question?</span>
+                  <span> Have any </span>question?
                 </h2>
                 <p>
                   If you have any question about our product, service, payment