contact page task almost done

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