added third

.env

@@ -95,4 +95,7 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
-REACT_APP_FAMILY_MAXIMUM_AGE=18
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.development

@@ -63,4 +63,7 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
-REACT_APP_FAMILY_MAXIMUM_AGE=18
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.production

@@ -70,3 +70,6 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=0

src/Routers.jsx

@@ -8,9 +8,11 @@ import AcitveBidsPage from "./views/AcitveBidsPage";
 import AuthProfilePage from "./views/AuthProfilePage";
 import CollectionItemPage from "./views/CollectionItemPage";
 import ForgotPasswordPages from "./views/ForgotPasswordPages";
+import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
 import HistoryPage from "./views/HistoryPage";
 import HomePages from "./views/HomePages";
 import LoginPage from "./views/LoginPage";
+import LoginPageTwo from "./views/LoginPageTwo";
 import MarketPlacePage from "./views/MarketPlacePage";
 import MyWalletPage from "./views/MyWalletPage";
 import SavedPage from "./views/SavedPage";
@@ -18,11 +20,15 @@ import SellPage from "./views/SellPage";
 import SettingsPage from "./views/SettingsPage";
 import ShopDetailsPage from "./views/ShopDetailsPage";
 import SignupPage from "./views/SignupPage";
+import SignupPageTwo from "./views/SignupPageTwo";
 import UpdatePasswordPages from "./views/UpdatePasswordPages";
+import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
+import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
 import VerifyPasswordPages from "./views/VerifyPasswordPages";
+import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -31,6 +37,7 @@ import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
 import VerifyLinkPages from "./views/VerifyLinkPages";
+import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
 import MyActiveJobsPage from "./views/MyActiveJobsPage";
 import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
@@ -60,27 +67,34 @@ export default function Routers() {
     <ScrollToTop>
       <Routes>
         {/* guest routes */}
-        <Route exact path="/login" element={<LoginPage />} />
-        <Route exact path="/eoffer" element={<LoginPage />} />
-        <Route exact path="/invite" element={<LoginPage />} />
-
-        <Route exact path="/signup" element={<SignupPage />} />
+        {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ?
+        <>
+          <Route exact path="/login" element={<LoginPageTwo />} />
+          <Route exact path="/signup" element={<SignupPageTwo />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPagesTwo />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPagesTwo />} />
+          <Route path="/vemail" element={<VerifyLinkPagesTwo />} />
+          <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
+          <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
+          <Route exact path="/eoffer" element={<LoginPageTwo />} />
+          <Route exact path="/invite" element={<LoginPageTwo />} />
+        </>
+        :
+        <>
+          <Route exact path="/login" element={<LoginPage />} />
+          <Route exact path="/signup" element={<SignupPage />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPages />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPages />} />
+          <Route path="/vemail" element={<VerifyLinkPages />} />
+          <Route path="/complereset" element={<VerifyPasswordPages />} />
+          <Route exact path="/outmessage" element={<VerifyYouPages />} />
+          <Route exact path="/eoffer" element={<LoginPage />} />
+          <Route exact path="/invite" element={<LoginPage />} />
+        </>
+        }
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
         <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
-        <Route
-          exact
-          path="/forgot-password"
-          element={<ForgotPasswordPages />}
-        />
-        <Route
-          exact
-          path="/update-password"
-          element={<UpdatePasswordPages />}
-        />
-        <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route path="/complereset" element={<VerifyPasswordPages />} />
-        <Route exact path="/outmessage" element={<VerifyYouPages />} />
         <Route exact path="/lnd/*" element={<LndPage />} />
         <Route exact path="/app" element={<AppDownloadPage />} />
 

src/components/AuthPages/AuthLayout2.jsx

@@ -0,0 +1,62 @@
+import React, { lazy } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+export default function LoginLayout({ slogan, children }) {
+  const bgImg = localImgLoad('images/left-wrenchboard.jpg')
+
+  return (
+    <div className={`layout-wrapper login`}>
+      <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
+        <div 
+            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div>
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
+            <div className="w-full flex justify-center items-center">
+              {children && children}
+            </div>
+            <div className="w-full flex flex-col justify-center items-center px-10">
+              <div className="w-full flex justify-center items-center pt-5">
+                <div className="flex items-center">
+                <a
+                      href="https://www.wrenchboard.com/about-us"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      About
+                    </a>
+                    <a
+                      href="https://www.wrenchboard.com/service"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Services
+                    </a>
+                    <a
+                      href="https://www.wrenchboard.com/contact"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Contact Us
+                    </a>
+                </div>
+              </div>
+              <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
+                <span className="">&copy; {new Date().getFullYear()} -</span>
+                <Link to="/" className="text-[#009ef7] ml-1">
+                  WrenchBoard
+                </Link>{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AuthPages/ForgotPassword/index.jsx

@@ -59,7 +59,7 @@ export default function ForgotPassword() {
     }
 
     if (email !== "" && checked) {
-      const reqData = { email, action:11013 };
+      const reqData = { email };
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+
+import ReCAPTCHA from "react-google-recaptcha";
+
+export default function ForgotPassword() {
+  const [checked, setValue] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false);
+  // email
+  const [email, setMail] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [msgSuccess, setMsgSuccess] = useState(null);
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  const handleEmail = (e) => {
+    setMail(e?.target.value);
+  };
+
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
+
+  const resetHandler = async () => {
+    if (email == "") {
+      setMsgError("An email is required");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
+      setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if (email !== "" && checked) {
+      const reqData = { email };
+      setResetLoading(true);
+      try {
+        const res = await userApi.StartResetPassword(reqData);
+        if (res.status === 200) {
+          setMsgSuccess(true);
+          setMail("");
+          setValue(false);
+          setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
+        }
+      } catch (error) {
+        setMsgSuccess(false);
+        setResetLoading(false);
+        setMail("");
+        setMsgError("An error occurred");
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setMsgError(null);
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+      }
+    }
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[400px]">
+            {msgSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Forget Password
+                  </h1>
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter your email to reset your password.
+                  </span>
+                </div>
+                <div className="input-area">
+                  <div className="input-item mb-10">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Your Username/Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      inputHandler={handleEmail}
+                      iconName="message"
+                    />
+                  </div>
+                  {/* hCaptha clone for the time being */}
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
+                    <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
+                      <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
+                        
+                        <div className="h-full relative inline-block">
+                          <div className="relative table top-0 h-full">
+                            <div className="table-cell align-middle">
+                              <div className="relative w-[30px] h-[30px] mx-[15px]">
+                                <input
+                                  type="checkbox"
+                                  name="human-checkbox"
+                                  id="human-checkbox"
+                                  className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
+                                  checked={checked}
+                                  onChange={humanChecker}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="h-full relative inline-block w-[170px]">
+                          <label className="relative table top-0 h-full">
+                            <label className="table-cell align-middle">
+                              <label
+                                className="text-800 text-sm"
+                                htmlFor="human-checkbox"
+                              >
+                                I am human
+                              </label>
+                            </label>
+                          </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></div>
+                      </div>
+                    </div>
+                  </div> */}
+                  {msgError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                      {msgError}
+                    </div>
+                  )}
+                  <div className="signin-area mb-3.5">
+                    <div className="flex justify-center items-center gap-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="button"
+                        onClick={resetHandler}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      >
+                        {resetLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <span>Send Code</span>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </>
+            :
+            <ForgetPwdResponse 
+              title={'Forget Password'}
+              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
+              type={msgSuccess}
+            />
+            }
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index.jsx

@@ -98,7 +98,6 @@ export default function Login() {
         password: password,
         sessionid: "STARTING",
         login_mode: 1100,
-        action: 11025,
       };
     } else if (name == "family") {
       // Post Data Info for family Login
@@ -107,7 +106,6 @@ export default function Login() {
         pin: password,
         sessionid: "20067A92714",
         login_mode: 1105,
-        action: 11025,
       };
     } else {
       setLoginLoading(false);

src/components/AuthPages/Login/index2.jsx

@@ -0,0 +1,589 @@
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import linkedInLogo from "../../../assets/images/Linkedin.png";
+import appleLogo from "../../../assets/images/apple-black.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
+import googleLogo from "../../../assets/images/google-logo.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+// import { GoogleOAuthProvider } from '@react-oauth/google';
+import { useGoogleLogin } from "@react-oauth/google";
+
+import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
+
+import ReCAPTCHA from "react-google-recaptcha";
+
+export default function Login() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  // const sessionExpired = queryParams.get("sessionExpired");
+
+  const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
+
+  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
+
+  let [loginType, setLoginType] = useState("");
+
+  const [loginLoading, setLoginLoading] = useState(false);
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  //login error state
+  const [loginError, setLoginError] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState("");
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginType = ({ target: { name } }) => {
+    setLoginType(name);
+    let currentDate = new Date();
+    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
+    // Convert the expiration date to the appropriate format
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
+  };
+
+  // email
+  const [email, setMail] = useState("");
+  const handleEmail = (e) => {
+    setMail(e.target.value);
+  };
+  // password
+  const [password, setPassword] = useState("");
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  // FUNCTION TO HANDLE USER LOGIN
+  const doLogin = ({ target: { name } }) => {
+    setMsgError("");
+    setLoginError(false);
+    setLoginLoading(true);
+    let postData; // Post Data for API
+    if (!email || !password) {
+      setLoginLoading(false);
+      setMsgError("Please fill all the fields");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+
+    if (name == "full") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (regEx.test(email) == false) {
+        setLoginLoading(false);
+        setMsgError("Invalid Email");
+        return setTimeout(() => {
+          setMsgError("");
+        }, 3000);
+      }
+      // Post Data Info for normal Login
+      postData = {
+        username: email,
+        password: password,
+        sessionid: "STARTING",
+        login_mode: 1100
+      };
+    } else if (name == "family") {
+      // Post Data Info for family Login
+      postData = {
+        username: email,
+        pin: password,
+        sessionid: "20067A92714",
+        login_mode: 1105
+      };
+    } else {
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
+      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+      setMsgError("Please Verify Captcha");
+      setLoginLoading(false);
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    userApi
+      .logInUser(postData)
+      .then((res) => {
+        if (
+          res.status != 200 ||
+          res.data.internal_return < 0 ||
+          !res.data.member_id ||
+          !res.data.uid ||
+          !res.data.session
+        ) {
+          // setMsgError("Wrong, email/password");
+          setLoginError(true);
+          setLoginLoading(false);
+          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+          return;
+        }
+        localStorage.setItem("member_id", `${res.data.member_id}`);
+        localStorage.setItem("uid", `${res.data.uid}`);
+        localStorage.setItem("session_token", `${res.data.session}`);
+        if (name === "family") {
+          sessionStorage.setItem("family_uid", res.data?.family_uid);
+        }
+        // localStorage.setItem("session", `${res.data.session}`);
+        dispatch(updateUserDetails({ ...res.data }));
+        setTimeout(() => {
+          navigate("/", { replace: true });
+          setLoginLoading(false);
+        }, 2000);
+      })
+      .catch((error) => {
+        setMsgError("Unable to login, try again");
+        setLoginLoading(false);
+        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setLoginError(false);
+          setMsgError("");
+          setLoginLoading(false);
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      });
+  };
+
+  function captchaChecker(value) {
+    // FUNCTION TO VALIDATE CAPTCHA
+    if (value) {
+      setValidCaptcha({ show: true, valid: value });
+    } else {
+      setValidCaptcha({ show: true, valid: "" });
+    }
+  }
+
+  const googleLogin = useGoogleLogin({
+    flow: "auth-code",
+    ux_mode: "redirect",
+    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    onSuccess: async (codeResponse) => {
+      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
+  // In order to update the selected login type whenever the component renders
+  // useEffect(() => {
+  // Clear the loginType cookie if the user switches to loginfull
+  // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // }, []);
+
+  useLayoutEffect(() => {
+    // checks the cookie in order to set the login type before components mounts
+    // if(document.cookie.includes("loginType=family")){
+    //   setLoginType('family')
+    // }else if(document.cookie.includes("loginType=full")){
+    //   setLoginType('full')
+    // }else{
+    //   setLoginType('full')
+    // }
+    function readCookie(cname) {
+      // checks the cookie in order to set the login type before components mounts
+      let name = cname + "=";
+      let decoded_cookie = decodeURIComponent(document.cookie);
+      let carr = decoded_cookie.split(";");
+      for (let i = 0; i < carr.length; i++) {
+        let c = carr[i];
+        while (c.charAt(0) == " ") {
+          c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+          return c.substring(name.length, c.length);
+        }
+      }
+      return "full";
+    }
+    let loginValue = readCookie("loginType");
+    setLoginType(loginValue);
+
+    if (state?.error) {
+      //check if the login path has an error state indicating any social handle login with error
+      setMsgError("Unexpected Error, Please try again soon.");
+      setTimeout(() => {
+        setMsgError("");
+        navigate("/login", { replace: true });
+      }, 4000);
+    }
+  }, []);
+
+  useEffect(() => {
+    setMail("");
+    setPassword("");
+  }, [loginType]);
+
+
+  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
+  useEffect(()=>{
+    let timer;
+    if(sessionExpired == "true"){
+     timer = setTimeout(()=>{
+        setSessionExpired(false)
+      },5000)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[530px]">
+              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired != "true" && (
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Sign In to WrenchBoard
+                </h1> */}
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    New Here?{" "}
+                    <Link
+                      to="/signup"
+                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                    >
+                      Create an Account
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired == "true" && (
+                <div className="w-full p-1 mb-7">
+                  <p className="text-red-500 text-base text-center">
+                    Your session expired and will need to login again
+                  </p>
+                </div>
+              )}
+
+              {/* switch login component */}
+              <div className="ml-7 flex justify-start items-center gap-3">
+                <button
+                  name="full"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Sign in
+                </button>
+                <button
+                  name="family"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Family Account
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {
+                loginType == "full" ? (
+                  //user login component
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Your Email"
+                        label="Email"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Password"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
+                        forgotPassword
+                      />
+                    </div>
+
+                    {/* hCaptha clone for the time being */}
+                    {validCaptcha.show && (
+                      <div className="mb-5 flex justify-center w-full">
+                        <ReCAPTCHA
+                          sitekey={
+                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
+                          }
+                          onChange={captchaChecker}
+                        />
+                      </div>
+                    )}
+
+                    {loginError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
+                        Invalid username or password- Please{" "}
+                        <Link to="/#" className="text-[#009ef7]">
+                          reset your password
+                        </Link>{" "}
+                        or{" "}
+                        <Link to="/signup" className="text-[#009ef7]">
+                          create a new account
+                        </Link>
+                      </div>
+                    )}
+                    {msgError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                        {msgError}
+                      </div>
+                    )}
+                    <div className="signin-area mb-3.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="full"
+                          onClick={doLogin}
+                          type="button"
+                          disabled={loginLoading}
+                          className={`btn-login  rounded-full mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                        >
+                          {loginLoading ? (
+                            <div className="signup btn-loader"></div>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                      <div className="sm:grid grid-cols-2 gap-1">
+                        <div className="w-full">
+                          <BrandBtn
+                            link="#"
+                            imgSrc={googleLogo}
+                            brand="Google"
+                            onClick={googleLogin}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
+                            link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
+                            imgSrc={appleLogo}
+                            brand="Apple"
+                            isAnchor={true}
+                            // style={{visibility: 'hidden'}}
+                          />
+                        </div>
+                        <div className="w-full">
+                          <BrandBtn
+                            link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                            imgSrc={facebookLogo}
+                            brand="Facebook"
+                            isAnchor={true}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
+                            imgSrc={linkedInLogo}
+                            brand="LinkedIn"
+                            isAnchor={true}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  // END of user login compoenent
+                  // family login compoenent
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Account ID"
+                        label="Username"
+                        name="email"
+                        type="email"
+                        iconName="family-id"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Pin"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
+                      />
+                    </div>
+                    {loginError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
+                        Invalid username or password{" "}
+                        {/* <Link to="/#" className="text-[#009ef7]">
+                        reset your password
+                      </Link>{" "}
+                      or{" "}
+                      <Link to="/signup" className="text-[#009ef7]">
+                        create a new account
+                      </Link> */}
+                      </div>
+                    )}
+                    {msgError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                        {msgError}
+                      </div>
+                    )}
+                    <div className="signin-area mb-1.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="family"
+                          onClick={doLogin}
+                          disabled={loginLoading}
+                          type="button"
+                          className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                        >
+                          {loginLoading ? (
+                            <div className="signup btn-loader"></div>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )
+                // END of family login compoenent
+              }
+              {/* END of login component */}
+
+              {loginType == "full" && (
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  This site is protected by a Captcha. Our Privacy Policy and
+                  Terms of Service apply.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}
+
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand,
+  onClick,
+  isAnchor = false,
+  style = { visibility: "visible" },
+}) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
+
+  //  onSuccess: (codeResponse) => setUser(codeResponse),
+
+  // const doGoogle = useGoogleLogin({
+  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
+  //   onError: (error) => console.log('Login Failed:', error)
+  // });
+
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
+
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
+  return (
+    <div className="w-full flex justify-center bottomMargin" style={style}>
+      {isAnchor ? (
+        <a
+          href={link}
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </a>
+      ) : (
+        <button
+          onClick={onClick}
+          // href="#dd"
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </button>
+      )}
+    </div>
+  );
+};

src/components/AuthPages/SignUp/index2.jsx

@@ -0,0 +1,404 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+export default function SignUp() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  const country = queryParams.get("cnt")?.toUpperCase();
+  
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
+  const [signUpLoading, setSignUpLoading] = useState(false);
+  const [checked, setValue] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [countries, setCountries] = useState({loading:true, data:[]});
+
+  const [formData, setFormData] = useState({
+    country: country? country : "",
+    first_name: "",
+    last_name: "",
+    email: "",
+    password: "",
+  });
+
+  const handleInputChange = (event) => {
+    const { name, value } = event?.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const rememberMe = () => {
+    setValue(!checked);
+  };
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  // Get Country Api
+  const getCountryList = useCallback(async () => {
+    
+    try {
+      const res = await userApi.getSignupCountryData();
+      if (res.status === 200 && res.data.internal_return >= 0) {
+        const { result_list } = await res.data;
+        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
+          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData(prev => ({...prev, country: ''}))
+            return setCountries({loading: false, data: result_list});
+          }
+          return setCountries({loading: false, data: cnt});
+        }
+        setCountries({loading: false, data:result_list});
+      } else if (res.data.result !== 100) {
+        setCountries({loading: false, data:[]});
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  }, []);
+
+  const handleSignUp = async () => {
+    let { country, first_name, last_name, email, password } = formData;
+    try {
+      if (
+        email !== "" &&
+        password !== "" &&
+        first_name !== "" &&
+        last_name !== "" &&
+        country !== ""
+      ) {
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (regEx.test(email) == false) {
+          setMsgError("Invalid Email");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        //checks if terms and condition is checked
+        if (!checked) {
+          setMsgError("Terms and condition required");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        setSignUpLoading(true);
+        const reqData = {
+          country: country,
+          firstname: first_name,
+          lastname: last_name,
+          email: email,
+          username: email,
+          password: password,
+          terms: 1,
+          news: 1,
+        };
+
+        const res = await userApi.CreateUser(reqData);
+
+        if (res.status === 200) {
+          const { data } = res;
+          if (data && data.acc === "DULPICATE") {
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
+            setSignUpLoading(false);
+          }
+          if (data && data.status === "1") {
+            setTimeout(() => {
+              navigate("/outmessage", { replace: true });
+              setSignUpLoading(false);
+            }, 2000);
+          }
+        } else {
+          setSignUpLoading(false);
+          setMsgError("An error occurred");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  useEffect(() => {
+    getCountryList();
+  }, []);
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to={currentPath}>
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[530px]">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Create Account
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Already have an account?{" "}
+                  <Link
+                    to="/login"
+                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                  >
+                    Sign in here
+                  </Link>
+                </span>
+              </div>
+              <div className="w-full flex items-center gap-2">
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                  OR
+                </span>
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+              </div>
+              <div className="input-area">
+                <SelectOption
+                  label="Country"
+                  data={countries}
+                  name="country"
+                  value={formData.country}
+                  inputHandler={handleInputChange}
+                  disable={country && countries?.data?.length <= 1 ? true : false}
+                />
+                <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
+                  <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Firstname"
+                      label="First Name"
+                      name="first_name"
+                      type="text"
+                      value={formData.first_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                  <div className="input-item flex-1">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Lastname"
+                      label="Last Name"
+                      name="last_name"
+                      type="text"
+                      value={formData.last_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                </div>
+                <div className="input-item mb-4">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="support@mermsemr.com"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                <div className="input-item mb-4">
+                  <InputCom
+                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type={showPassword ? "text" : "password"}
+                    onClick={togglePasswordVisibility}
+                    passIcon={showPassword ? "show-password" : "hide-password"}
+                    value={formData.password}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                {msgError && (
+                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+                    {msgError}
+                  </div>
+                )}
+
+                <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
+                        checked && "text-white bg-[#4687ba]"
+                      }`}
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Forgot Password */}
+                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div> */}
+                <div className="signin-area mb-1">
+                  <div className="flex justify-center">
+                    <button
+                      disabled={countries.loading}
+                      type="button"
+                      onClick={handleSignUp}
+                      className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                    >
+                      {signUpLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Sign Up</span>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}
+
+const SelectOption = ({
+  label,
+  name,
+  inputHandler,
+  value,
+  data, // passing the data from parent
+  disable
+}) => {
+  return (
+    <div className="input-com mb-7">
+      <div className="flex items-center justify-between">
+        <label
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
+          htmlFor={name}
+        >
+          {label}
+        </label>
+      </div>
+      <div>
+        <select
+        disabled={disable}
+          name={name}
+          id={name}
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          onChange={inputHandler}
+          value={value}
+        >
+          {data?.data?.length > 1 ?
+            <>
+            <option value={""}>Select your Country</option>
+            {data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))}
+            </>
+            :
+            data?.data?.length == 1 ?
+            data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))
+            :
+            data?.data?.length < 1 && data.loading ?
+            <option value=''>
+              Loading...
+            </option>
+            :
+            <option value=''>
+              No Country Found!
+            </option>
+          }
+        </select>
+      </div>
+    </div>
+  );
+};

src/components/AuthPages/UpdatePassword/index2.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import titleShape from "../../../assets/images/shape/title-shape-two.svg";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import ThankYou from "../ThankYou";
+
+export default function UpdatePassword() {
+  const [updated, setValue] = useState(false);
+  const [message, setMessage] = useState(false);
+  const updatePassword = () => {
+    setValue(!updated);
+    setTimeout(() => {
+      setMessage(!message);
+    }, 100);
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to  myFit">
+        {updated === false ? (
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[600px]">
+              <div className="title-area relative flex flex-col justify-center items-center mb-7">
+                <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+                  Update Password
+                </h1>
+                {/* w-[341px] absolute top-14 left-12 */}
+                <div className="shape sm:w-[341px] w-[270px] -mt-5 sm:-mt-1 ml-5">
+                  <img src={titleShape} alt="shape" />
+                </div>
+              </div>
+              <div className="input-area">
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Old Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="New Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Re-enter Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="signin-area mb-3.5">
+                  <button
+                    onClick={updatePassword}
+                    type="button"
+                    className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  >
+                    Continue
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
+        )}
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/VerifyLink/index.jsx

@@ -36,10 +36,7 @@ export default function VerifyLink() {
         var postData = {
           username: email,
           password: password,
-          login_mode: 100,
-          sessionid: "STARTER-NOTREAL",
           verify_link: token,
-          action: 11012,
         };
         const res = await userApi?.CompleteSignUp(postData);
 

src/components/AuthPages/VerifyLink/index2.jsx

@@ -0,0 +1,242 @@
+import { useCallback, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import debounce from "../../../hooks/debounce";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+export default function VerifyLink() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [pageLoader, setPageLoader] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("vlnk");
+  const userApi = new usersService();
+
+  // email
+  const handleEmail = (e) => {
+    setEmail(e.target.value);
+  };
+  // password
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // if verification is okay. set a complete signup form
+  const completeSignup = async () => {
+    try {
+      if (email !== "" && password !== "") {
+        setLinkLoader(true);
+        var postData = {
+          username: email,
+          password: password,
+          verify_link: token,
+        };
+        const res = await userApi?.CompleteSignUp(postData);
+
+        if (res.status === 200) {
+          const { data } = res;
+          if (
+            data?.status > 0 &&
+            data?.internal_return == 100 &&
+            data?.session != ""
+          ) {
+            localStorage.setItem("email", `${data?.email}`);
+            localStorage.setItem("member_id", `${data?.member_id}`);
+            localStorage.setItem("session_token", `${data?.session}`);
+            localStorage.setItem("session", `${data?.session}`);
+            localStorage.setItem("uid", data?.uid)
+
+
+            navigate("/", { replace: true });
+            setLinkLoader(false);
+          } else {
+            setLinkLoader(false);
+            setMsgError("Invalid Link or Password Combination");
+          }
+        } else {
+          setLinkLoader(false);
+          setLinkSuccess(false);
+          setMsgError("An error occurred");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  // for verifying the incoming verification link and render the correct component
+  const verifyEmail = useCallback(async (code) => {
+    try {
+      const verifyRes = await userApi.verifyEmail(code);
+      if (verifyRes.status === 200) {
+        let { data } = verifyRes;
+        console.log('TESTING VERIFY',data)
+        if (
+          data &&
+          data.internal_return >= 0 && 
+          data.status == 0 && 
+          data.pending_id != '' && 
+          data.pending_uid != '' && 
+          data.username != '' &&
+          data.status_text === "Link Verified"
+        ) {
+          setPageLoader(false);
+        } else {
+          setPageLoader(false);
+          setLinkSuccess(false);
+        }
+      }
+    } catch (error) {
+      setPageLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    }
+  }, []);
+
+  // delay verify requests by 10000ms
+  const debouncedEmail = debounce(verifyEmail, 1000);
+
+  useEffect(() => {
+    debouncedEmail(token);
+  }, []);
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        {pageLoader ? (
+          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+        ) : (
+          <div className="w-full">
+            <div className="mb-12">
+              <Link to="#">
+                <img
+                  src={WrenchBoard}
+                  alt="wrenchboard"
+                  className="h-10 mx-auto"
+                />
+              </Link>
+            </div>
+            <div className="flex place-content-center">
+              <div className="w-11/12 sm:max-w-[500px]">
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    {linkSuccess
+                      ? "Sign In to WrenchBoard"
+                      : "Invalid verification link"}
+                  </h1>
+                </div>
+                {/* If the verification was a success */}
+                {linkSuccess ? (
+                  <SuccessfulComponent
+                    email={email}
+                    password={password}
+                    handleEmail={handleEmail}
+                    handlePassword={handlePassword}
+                    onSubmit={completeSignup}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                  />
+                ) : (
+                  <ErrorComponent onClick={() => navigate("/login")} />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </AuthLayout>
+    </>
+  );
+}
+
+const SuccessfulComponent = ({
+  onSubmit,
+  password,
+  handlePassword,
+  email,
+  handleEmail,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={email}
+        inputHandler={handleEmail}
+        placeholder="support@mermsemr.com"
+        label="Email"
+        name="email"
+        type="email"
+        iconName="message"
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type="password"
+        iconName="password"
+      />
+    </div>
+    {msgErr && (
+      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+        {msgErr}
+      </div>
+    )}
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onSubmit}
+        type="button"
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </div>
+  </div>
+);
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already verified this link or the
+        link has expired. Try login or reset password. If none worked, try to
+        create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/VerifyPassword/index.jsx

@@ -11,7 +11,11 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 const VerifyPassword = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
+  const [requestStatus, setRequestStatus] = useState({
+    loading: true,
+    status: false,
+    data: [],
+  });
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
   const [linkSuccess, setLinkSuccess] = useState(null);
@@ -35,60 +39,64 @@ const VerifyPassword = () => {
   };
 
   const completeReset = async () => {
-    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+    if (!password || !confirmPassword) {
+      // CHECKS IF PASSWORD IS EMPTY
       setMsgError("Please fill in fields");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+    if (password != confirmPassword) {
+      // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
       setMsgError("Passwords does not match");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+    if (password.length < 6) {
+      // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
       setMsgError("Password must be upto six characters");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
-      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+    if (!PasswordValidator(password)) {
+      // CHECKS IF PASSWORD IS VALID
+      setMsgError(
+        "Password must contain alphanumeric, uppercase and special character: eg: Password1@"
+      );
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
     try {
-          setLinkLoader(true);
-          var reqData = {
-            sessionid: "DUMMY-CANNOT_BE_EMPTY",
-            reset_link: token,
-            newpass: password,
-            m_uid: requestStatus.data?.m_uid || '',
-            reset_uid: requestStatus.data?.reset_uid || '',
-            step: 300,
-            action: 730,
-          };
-          const res = await userApi?.CompleteResetPassword(reqData);
+      setLinkLoader(true);
+      var reqData = {
+        reset_link: token,
+        newpass: password,
+        m_uid: requestStatus.data?.m_uid || "",
+        reset_uid: requestStatus.data?.reset_uid || "",
+        step: 300,
+      };
+      const res = await userApi?.CompleteResetPassword(reqData);
 
-          if (res.status == 200) {
-            const { data } = res;
-            if (data?.internal_return >= 0) {
-              // setTimeout(() => {
-              //   navigate("/login", { replace: true });
-              //   setLinkLoader(false);
-              // }, 2000);
-              setLinkSuccess(true);
-            } else {
-              setLinkLoader(false);
-              setMsgError("An error occurred");
-              setLinkSuccess(false);
-            }
-          } else {
-            setLinkLoader(false);
-            setLinkSuccess(false);
-          }
+      if (res.status == 200) {
+        const { data } = res;
+        if (data?.internal_return >= 0) {
+          // setTimeout(() => {
+          //   navigate("/login", { replace: true });
+          //   setLinkLoader(false);
+          // }, 2000);
+          setLinkSuccess(true);
+        } else {
+          setLinkLoader(false);
+          setMsgError("An error occurred");
+          setLinkSuccess(false);
+        }
+      } else {
+        setLinkLoader(false);
+        setLinkSuccess(false);
+      }
     } catch (error) {
       setLinkLoader(false);
       setLinkSuccess(false);
@@ -100,31 +108,33 @@ const VerifyPassword = () => {
     }
   };
 
-  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
-    setRequestStatus({loading: true, status:false, data: []})
+  const verifyResetPwd = () => {
+    // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({ loading: true, status: false, data: [] });
     var reqData = {
-      sessionid: "DUMMY-CANNOT_BE_EMPTY",
       reset_link: token,
       step: 200,
-      action: 730,
     };
-    userApi.CompleteResetPassword(reqData).then(res => {
-      if(res.status != 200 || res.data.internal_return < 0){
-        return setRequestStatus({loading: false, status:false, data: []})
-      }
-      setRequestStatus({loading: false, status:true, data: res.data})
-    }).catch(error => {
-      setRequestStatus({loading: false, status:false, data: []})
-    })
-  }
+    userApi
+      .CompleteResetPassword(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          return setRequestStatus({ loading: false, status: false, data: [] });
+        }
+        setRequestStatus({ loading: false, status: true, data: res.data });
+      })
+      .catch((error) => {
+        setRequestStatus({ loading: false, status: false, data: [] });
+      });
+  };
 
-  useEffect(()=>{
+  useEffect(() => {
     // little checker for the validity of the token
-  if (token==null || token?.length != 64) {
-    return setRequestStatus({loading: false, status:false, data: []});
-  }
-  verifyResetPwd()
-  },[])
+    if (token == null || token?.length != 64) {
+      return setRequestStatus({ loading: false, status: false, data: [] });
+    }
+    verifyResetPwd();
+  }, []);
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -139,59 +149,68 @@ const VerifyPassword = () => {
             </Link>
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
-            {requestStatus.loading ?
-            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
-            :
-            !requestStatus.loading && requestStatus.status ?
-            <div className="w-full">
-              {linkSuccess == null ?
-              <>
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                    Password Reset
-                  </h1>
-                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                      Enter a new password to reset
-                    </span>
-                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                      We'll send an email to confirm reset
-                    </span>
-                </div>
-                <div>
-                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
-                    Must include a special, numeric, uppercase and lowercase character
-                  </p>
-                </div>
-                  <SuccessfulComponent
-                    password={password}
-                    confirmPassword={confirmPassword}
-                    handlePassword={handlePassword}
-                    onSubmit={completeReset}
-                    msgErr={msgError}
-                    loader={linkLoader}
-                    showPassword={showPassword}
-                    onClick={togglePasswordVisibility}
-                    navigateHandler={() => navigate("/login")}
+            {requestStatus.loading ? (
+              <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
+            ) : !requestStatus.loading && requestStatus.status ? (
+              <div className="w-full">
+                {linkSuccess == null ? (
+                  <>
+                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                        Password Reset
+                      </h1>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        Enter a new password to reset
+                      </span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        We'll send an email to confirm reset
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                        Must include a special, numeric, uppercase and lowercase
+                        character
+                      </p>
+                    </div>
+                    <SuccessfulComponent
+                      password={password}
+                      confirmPassword={confirmPassword}
+                      handlePassword={handlePassword}
+                      onSubmit={completeReset}
+                      msgErr={msgError}
+                      loader={linkLoader}
+                      showPassword={showPassword}
+                      onClick={togglePasswordVisibility}
+                      navigateHandler={() => navigate("/login")}
+                    />
+                  </>
+                ) : (
+                  <ForgetPwdResponse
+                    title={
+                      linkSuccess
+                        ? "Password Reset Complete"
+                        : "Password Reset Error"
+                    }
+                    message={
+                      linkSuccess
+                        ? "Password Reset Complete. You can login now with your new credentials"
+                        : "Password Reset Error. Please get in touch with support for further support"
+                    }
+                    type={linkSuccess}
                   />
-                </>
-                :
-                <ForgetPwdResponse 
-                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
-                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
-                }
-                type={linkSuccess}
-              />
-              }
-            </div>
-            :
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <ForgetPwdResponse 
-                title={'Forget Password'}
-                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
-                type={requestStatus.status}
-              />
-            </div>
-            }
+                )}
+              </div>
+            ) : (
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <ForgetPwdResponse
+                  title={"Forget Password"}
+                  message={
+                    "We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
+                  }
+                  type={requestStatus.status}
+                />
+              </div>
+            )}
           </div>
         </div>
       </AuthLayout>

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -0,0 +1,288 @@
+import { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+import PasswordValidator from "../../../lib/PasswordValidator";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+const VerifyPassword = () => {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [requestStatus, setRequestStatus] = useState({
+    loading: true,
+    status: false,
+    data: [],
+  });
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [linkSuccess, setLinkSuccess] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("passlink");
+  const userApi = new usersService();
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  // Password
+  const handlePassword = (e) => {
+    let { name, value } = e?.target;
+    if (name == "password") setPassword(value);
+    if (name == "confirm_password") setConfirmPassword(value);
+  };
+
+  const completeReset = async () => {
+    if (!password || !confirmPassword) {
+      // CHECKS IF PASSWORD IS EMPTY
+      setMsgError("Please fill in fields");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if (password != confirmPassword) {
+      // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+      setMsgError("Passwords does not match");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if (password.length < 6) {
+      // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+      setMsgError("Password must be upto six characters");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if (!PasswordValidator(password)) {
+      // CHECKS IF PASSWORD IS VALID
+      setMsgError(
+        "Password must contain alphanumeric, uppercase and special character: eg: Password1@"
+      );
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    try {
+      setLinkLoader(true);
+      var reqData = {
+        reset_link: token,
+        newpass: password,
+        m_uid: requestStatus.data?.m_uid || "",
+        reset_uid: requestStatus.data?.reset_uid || "",
+        step: 300,
+      };
+      const res = await userApi?.CompleteResetPassword(reqData);
+
+      if (res.status == 200) {
+        const { data } = res;
+        if (data?.internal_return >= 0) {
+          // setTimeout(() => {
+          //   navigate("/login", { replace: true });
+          //   setLinkLoader(false);
+          // }, 2000);
+          setLinkSuccess(true);
+        } else {
+          setLinkLoader(false);
+          setMsgError("An error occurred");
+          setLinkSuccess(false);
+        }
+      } else {
+        setLinkLoader(false);
+        setLinkSuccess(false);
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  const verifyResetPwd = () => {
+    // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({ loading: true, status: false, data: [] });
+    var reqData = {
+      reset_link: token,
+      step: 200,
+    };
+    userApi
+      .CompleteResetPassword(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          return setRequestStatus({ loading: false, status: false, data: [] });
+        }
+        setRequestStatus({ loading: false, status: true, data: res.data });
+      })
+      .catch((error) => {
+        setRequestStatus({ loading: false, status: false, data: [] });
+      });
+  };
+
+  useEffect(() => {
+    // little checker for the validity of the token
+    if (token == null || token?.length != 64) {
+      return setRequestStatus({ loading: false, status: false, data: [] });
+    }
+    verifyResetPwd();
+  }, []);
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            {requestStatus.loading ? (
+              <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
+            ) : !requestStatus.loading && requestStatus.status ? (
+              <div className="w-11/12 sm:max-w-[500px]">
+                {linkSuccess == null ? (
+                  <>
+                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                        Password Reset
+                      </h1>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        Enter a new password to reset
+                      </span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        We'll send an email to confirm reset
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                        Must include a special, numeric, uppercase and lowercase
+                        character
+                      </p>
+                    </div>
+                    <SuccessfulComponent
+                      password={password}
+                      confirmPassword={confirmPassword}
+                      handlePassword={handlePassword}
+                      onSubmit={completeReset}
+                      msgErr={msgError}
+                      loader={linkLoader}
+                      showPassword={showPassword}
+                      onClick={togglePasswordVisibility}
+                      navigateHandler={() => navigate("/login")}
+                    />
+                  </>
+                ) : (
+                  <ForgetPwdResponse
+                    title={
+                      linkSuccess
+                        ? "Password Reset Complete"
+                        : "Password Reset Error"
+                    }
+                    message={
+                      linkSuccess
+                        ? "Password Reset Complete. You can login now with your new credentials"
+                        : "Password Reset Error. Please get in touch with support for further support"
+                    }
+                    type={linkSuccess}
+                  />
+                )}
+              </div>
+            ) : (
+              <div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <ForgetPwdResponse
+                  title={"Forget Password"}
+                  message={
+                    "We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
+                  }
+                  type={requestStatus.status}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+};
+
+export default VerifyPassword;
+
+const SuccessfulComponent = ({
+  onSubmit,
+  navigateHandler,
+  showPassword,
+  onClick,
+  password,
+  confirmPassword,
+  handlePassword,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type={showPassword ? "text" : "password"}
+        onClick={onClick}
+        passIcon={showPassword ? "show-password" : "hide-password"}
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={confirmPassword}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Confirm Password"
+        name="confirm_password"
+        type="password"
+      />
+    </div>
+    {msgErr && (
+      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+        {msgErr}
+      </div>
+    )}
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onSubmit}
+        type="button"
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={navigateHandler}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/VerifyYou/index2.jsx

@@ -0,0 +1,64 @@
+import { useNavigate, Link } from "react-router-dom";
+import AuthLayout from "../AuthLayout2";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+
+export default function VerifyYou() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[500px]">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Let's verify your email now
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Check your email.
+                </span>
+              </div>
+              <div className="input-area">
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    <b>Verify Email.</b> Help us secure your WrenchBoard account
+                    by verifying your email registration address. Verification
+                    will let you access all of WrenchBoard's features.
+                  </p>
+                </div>
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    If you do not receive the confirmation message within a few
+                    minutes of signing up, please check your Junk E-mail folder
+                    just in case the confirmation email got delivered there
+                    instead of your inbox. If so, select the confirmation
+                    message and click Not Junk, which will allow future messages
+                    to get through.
+                  </p>
+                </div>
+              </div>
+              <div className="signin-area flex justify-center mb-3.5">
+                <button
+                  onClick={() => navigate("/")}
+                  type="button"
+                  className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                >
+                  <span>Return Home</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -13,6 +13,7 @@ import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
 import FamilyWallet from "./Tabs/FamilyWallet";
+import { apiConst } from "../../lib/apiConst";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -127,7 +128,7 @@ export default function FamilyManageTabs({
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: 'FILE',
-          action: 11305
+          action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER
         }
         setUploadStatus({loading: true, status: false, message:'Loading...'})
         apiCall.sendFiles(reqData).then(res=>{
@@ -285,7 +286,7 @@ export default function FamilyManageTabs({
       limit: 30,
       offset: 0,
       job_type: "FAMILY",
-      action: 13005,
+      action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
     if (checkFamilyTask) {

src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef, useState } from "react";
 import usersService from "../../../../services/UsersService";
+import { apiConst } from "../../../../lib/apiConst";
 
 const FamilyBanner = ({ imageServer }) => {
   const uploadedImage = `${imageServer}${localStorage.getItem(
@@ -65,7 +66,7 @@ const FamilyBanner = ({ imageServer }) => {
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: "FILE",
-          action: 11303,
+          action: apiConst.WRENCHBOARD_PICTURE_JOB,
         };
         setUploadStatus({
           loading: true,

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -55,7 +55,6 @@ export default function FamilyProfile({ familyData, className }) {
     year: familyData?.year,
     month: familyData?.month,
     enable_traking: familyData?.enable_traking,
-    action: 22020,
   };
 
   // const handleChange = ({ target: { name, value } }) => {

src/components/FamilyAcc/Tabs/wallet/FamilyAddFundPopout.jsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import ModalCom from '../../../Helpers/ModalCom'
-import InputCom from '../../../Helpers/Inputs/InputCom'
+import React, { useEffect, useState } from "react";
+import ModalCom from "../../../Helpers/ModalCom";
+import InputCom from "../../../Helpers/Inputs/InputCom";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
-import {AmountTo2DP} from '../../../Helpers/PriceFormatter'
-import usersService from '../../../../services/UsersService';
-import LoadingSpinner from '../../../Spinners/LoadingSpinner';
-import { PriceFormatter } from '../../../Helpers/PriceFormatter';
-import { tableReload } from '../../../../store/TableReloads';
-import { useDispatch } from 'react-redux';
+import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
+import usersService from "../../../../services/UsersService";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../../../Helpers/PriceFormatter";
+import { tableReload } from "../../../../store/TableReloads";
+import { useDispatch } from "react-redux";
+import { apiConst } from "../../../../lib/apiConst";
 
 const validationSchema = Yup.object().shape({
   // amount: Yup.string()
@@ -22,104 +23,149 @@ const validationSchema = Yup.object().shape({
   //     return true;
   //   })
   //   .required("Amount is required"),
-  amount: Yup.number('Please enter a number')
-  .min(1, "Price must be greater than 0")
-  .required("Amount is required"),
-  comment: Yup.string()
-  .required("Comment is required"),
+  amount: Yup.number("Please enter a number")
+    .min(1, "Price must be greater than 0")
+    .required("Amount is required"),
+  comment: Yup.string().required("Comment is required"),
 });
 
-function FamilyAddFundPopout({action, situation, wallet, familyData}) {
+function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
+  const dispatch = useDispatch();
 
-  const dispatch = useDispatch()
+  const apiUrl = new usersService();
 
-  const apiUrl = new usersService()
-
-  const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
-
-  const [requestStatus, setRequestStatus] = useState({loading:false, status:false, message:''})
+  const [startTransfer, setStartTransfer] = useState({
+    loading: true,
+    data: {},
+  });
 
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
 
   // initial values for formik
   let initialValues = {
-    amount: '',
-    from : AmountTo2DP(startTransfer?.data?.origing_current_balance*0.01),
+    amount: "",
+    from: AmountTo2DP(startTransfer?.data?.origing_current_balance * 0.01),
     to: `${familyData.firstname} ${familyData.lastname}`,
-    comment: ''
+    comment: "",
   };
   // FUNCTION TO PERFORM FAMILY TRANSFER
   const handleAddFund = (values) => {
-    setRequestStatus({loading:true, status:false, message:''})
+    setRequestStatus({ loading: true, status: false, message: "" });
 
-    let senderBal = startTransfer?.data?.origing_current_balance || '' // SENDER'S ACCOUNT BALANCE
-    let senderLimit = startTransfer?.data?.origing_transfer_limit || '' // SENDER'S TRANSFER LIMIT
+    let senderBal = startTransfer?.data?.origing_current_balance || ""; // SENDER'S ACCOUNT BALANCE
+    let senderLimit = startTransfer?.data?.origing_transfer_limit || ""; // SENDER'S TRANSFER LIMIT
 
-    let reqData = { // API REQUEST DATA
-      family_uid : familyData.uid,
-      wallet_uid : wallet.wallet_uid,
-      origing_wallet_uid : startTransfer?.data?.origing_wallet_uid,
-      currency : startTransfer?.data?.currency,
-      amount : values.amount*100,
-      description : values.comment,
-      family_transfer_mode : 100,
-      action : 22014
+    let reqData = {
+      // API REQUEST DATA
+      family_uid: familyData.uid,
+      wallet_uid: wallet.wallet_uid,
+      origing_wallet_uid: startTransfer?.data?.origing_wallet_uid,
+      currency: startTransfer?.data?.currency,
+      amount: values.amount * 100,
+      description: values.comment,
+      family_transfer_mode: 100,
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFER,
+    };
+
+    if (!senderBal || !senderLimit) {
+      // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Unauthorized, try again later",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(!senderBal || !senderLimit){ // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
-      setRequestStatus({loading:false, status:false, message:'Unauthorized, try again later'})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
+    if (values.amount > senderBal * 0.01) {
+      // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "You cannot send more than your balance",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(values.amount > senderBal*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
-      setRequestStatus({loading:false, status:false, message:'You cannot send more than your balance'})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
+    if (values.amount > senderLimit * 0.01) {
+      // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `You cannot exceed ${senderLimit * 0.01} ${
+          startTransfer?.data?.origing_currency.charAt(0).toUpperCase() +
+          startTransfer?.data?.origing_currency.slice(1).toLowerCase()
+        }`,
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(values.amount > senderLimit*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
-      setRequestStatus({loading:false, status:false, message:`You cannot exceed ${senderLimit*0.01} ${startTransfer?.data?.origing_currency.charAt(0).toUpperCase() + startTransfer?.data?.origing_currency.slice(1).toLowerCase()}`})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
-    }
-
-    apiUrl.familyTransfer(reqData).then(({data}) => {
-      if(data.internal_return < 0 || data.credit_confirm == '' || data.pay_confirm == ''){
-        setRequestStatus({loading:false, status:false, message:'Transfer Failed'})
-        return setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message:''})
-        }, 5000)
-      }
-      setRequestStatus({loading:false, status:true, message:'Transfer Successful'})
-      setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-        dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
-        action() // TO CLOSE THE MODAL
-      }, 5000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message:'Network Error, try again'})
-      setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
-    })
-  }
+    apiUrl
+      .familyTransfer(reqData)
+      .then(({ data }) => {
+        if (
+          data.internal_return < 0 ||
+          data.credit_confirm == "" ||
+          data.pay_confirm == ""
+        ) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Transfer Failed",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 5000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Transfer Successful",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
+          action(); // TO CLOSE THE MODAL
+        }, 5000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Network Error, try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
 
   // LOAD FAMILY START TRANSFER
-  useEffect(()=>{
+  useEffect(() => {
     let reqData = {
       family_uid: familyData.uid,
       wallet_uid: wallet.wallet_uid,
-      action: 22013
-    }
-    apiUrl.familyTransferStart(reqData).then(response => {
-      setStartTransfer({loading:false, data:response?.data })
-    }).catch(err => {
-      setStartTransfer({loading:false, data: {}})
-    })
-  },[])
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFERSTART,
+    };
+    apiUrl
+      .familyTransferStart(reqData)
+      .then((response) => {
+        setStartTransfer({ loading: false, data: response?.data });
+      })
+      .catch((err) => {
+        setStartTransfer({ loading: false, data: {} });
+      });
+  }, []);
 
   return (
     <ModalCom action={action} situation={situation}>
@@ -155,116 +201,125 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
-          {startTransfer.loading && <LoadingSpinner size='16' color='sky-blue' height={'h-64'} />}
-          
-          { !startTransfer.loading &&
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleAddFund}
-          >
-            {(props) => (
-              <Form className="w-full">
-                <div className="flex flex-col-reverse sm:flex-row">
-                  <div className="fields w-full">
-                    {/* AMOUNT  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="0"
-                        label={`Amount (${startTransfer?.data?.currency})`}
-                        name="amount"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${props.errors.amount && props.touched.amount ? 'border border-red-500' : ''}`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.amount}
-                        inputHandler={props.handleChange}
-                      />
-                    </div>
+          {startTransfer.loading && (
+            <LoadingSpinner size="16" color="sky-blue" height={"h-64"} />
+          )}
 
-                    {/* FROM  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="From"
-                        label={`From (${startTransfer?.data?.origing_currency})`}
-                        name="from"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.from}
-                        disable={true}
-                      />
-                    </div>
-
-                     {/* TO  */}
-                     <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="To"
-                        label="To:"
-                        name="to"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.to}
-                        disable={true}
-                      />
-                    </div>
-
-                    {/* COMMENT  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <div className="w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
-                      >
-                        Comment
-                        {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
-                      </label>
-                      <textarea
-                        // id="Job Delivery Details"
-                        rows="2"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${props.errors.comment && props.touched.comment ? 'border border-red-500' : ''}`}
-                        style={{ resize: "none" }}
-                        name="comment"
-                        value={props.values.comment}
-                        onChange={props.handleChange}
-                      />
+          {!startTransfer.loading && (
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleAddFund}
+            >
+              {(props) => (
+                <Form className="w-full">
+                  <div className="flex flex-col-reverse sm:flex-row">
+                    <div className="fields w-full">
+                      {/* AMOUNT  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="0"
+                          label={`Amount (${startTransfer?.data?.currency})`}
+                          name="amount"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${
+                            props.errors.amount && props.touched.amount
+                              ? "border border-red-500"
+                              : ""
+                          }`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.amount}
+                          inputHandler={props.handleChange}
+                        />
                       </div>
+
+                      {/* FROM  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="From"
+                          label={`From (${startTransfer?.data?.origing_currency})`}
+                          name="from"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.from}
+                          disable={true}
+                        />
+                      </div>
+
+                      {/* TO  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="To"
+                          label="To:"
+                          name="to"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.to}
+                          disable={true}
+                        />
+                      </div>
+
+                      {/* COMMENT  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <div className="w-full">
+                          <label
+                            htmlFor="Job Delivery Details"
+                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
+                          >
+                            Comment
+                            {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
+                          </label>
+                          <textarea
+                            // id="Job Delivery Details"
+                            rows="2"
+                            className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${
+                              props.errors.comment && props.touched.comment
+                                ? "border border-red-500"
+                                : ""
+                            }`}
+                            style={{ resize: "none" }}
+                            name="comment"
+                            value={props.values.comment}
+                            onChange={props.handleChange}
+                          />
+                        </div>
+                      </div>
+                      {/* inputs ends here */}
                     </div>
-                    {/* inputs ends here */}
                   </div>
-                </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer w-full">
-                  {/* error or success display */}
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                        // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="content-footer w-full">
+                    {/* error or success display */}
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
                         <div
-                          className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                         >
                           {requestStatus.message}
                         </div>
-                      )
-                    ))}
-                  {/* End of error or success display */}
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                            // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
+                          </div>
+                        )
+                      ))}
+                    {/* End of error or success display */}
 
-                  <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                    <div className="w-full flex justify-between gap-2 items-center">
+                    <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                      <div className="w-full flex justify-between gap-2 items-center">
                         <button
                           type="button"
                           onClick={action}
@@ -273,29 +328,31 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                           Cancel
                         </button>
                         <>
-                          {requestStatus.loading ?
-                          <LoadingSpinner size='6' color='sky-blue' />
-                          :
-                          <button
-                            type="submit"
-                            className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${requestStatus.status ? 'opacity-50' : ''}`}
-                            disabled={requestStatus.status}
-                          >
-                            Send
-                          </button>
-                          }
+                          {requestStatus.loading ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <button
+                              type="submit"
+                              className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${
+                                requestStatus.status ? "opacity-50" : ""
+                              }`}
+                              disabled={requestStatus.status}
+                            >
+                              Send
+                            </button>
+                          )}
                         </>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Form>
-            )}
-          </Formik>
-          }
+                </Form>
+              )}
+            </Formik>
+          )}
         </div>
       </div>
     </ModalCom>
-  )
+  );
 }
 
-export default FamilyAddFundPopout
+export default FamilyAddFundPopout;

src/components/FamilyAcc/index.jsx

@@ -102,13 +102,7 @@ export default function FamilyAcc() {
   const memberList = useCallback(async () => {
     setLoader(true);
     try {
-      const reqData = {
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      const res = await apiCall.familyListings(reqData);
+      const res = await apiCall.familyListings();
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status === "OK") {
         const { result_list, session_image_server } = data;

src/components/JobGroups/AddGroup.jsx

@@ -1,69 +1,93 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import ModalCom from '../Helpers/ModalCom'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import InputCom from '../Helpers/Inputs/InputCom/index'
+import ModalCom from "../Helpers/ModalCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import InputCom from "../Helpers/Inputs/InputCom/index";
 
-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";
+import { apiConst } from "../../lib/apiConst";
 
-export default function AddGroup({action, situation , setUpdateList}) {
+export default function AddGroup({ action, situation, setUpdateList }) {
+  const api = new usersService();
 
-    const api = new usersService()
+  const [name, setName] = useState("");
 
-    const [name, setName] = useState('')
+  const handleChange = ({ target: { name, value } }) => {
+    setName(value);
+  };
 
-    const handleChange = ({target:{name, value}}) =>{
-        setName(value)
-    }
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
 
-    let [requestStatus, setRequestStatus] = useState({
+  const addGroup = () => {
+    setRequestStatus({ loading: true, status: false, message: "" });
+    if (name == "") {
+      setRequestStatus({
         loading: false,
         status: false,
-        message: "",
-      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
-
-    const addGroup = () => {
-        setRequestStatus({loading:true, status:false, message:''})
-        if(name == ''){
-            setRequestStatus({loading:false, status:false, message:'Please enter a group name'})
-            return setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-            },3000)
-        }
-        if(name.length < 6){
-            setRequestStatus({loading:false, status:false, message:'Group name must be up to six characters'})
-            return setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-            },3000)
-        }
-        api.jobGroupAdd({group_name:name, action:13025}).then(response => {
-            let {status, data} = response
-            if(status != 200 || data.internal_return < 0){
-                setRequestStatus({loading:false, status:false, message:'Unable to add Group'})
-                return 
-            }
-            setRequestStatus({loading:false, status:true, message:'Group Added'})
-            setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-                // close modal
-                action()
-                // reload group page
-                setUpdateList(prev => !prev)
-            },3000)
-        }).catch(error => {
-            setRequestStatus({loading:false, status:false, message:'Unable to add Group, try again later'})
-        }).finally(()=>{
-            setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-            },3000)
-        })
+        message: "Please enter a group name",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
     }
+    if (name.length < 6) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Group name must be up to six characters",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
+    }
+    api
+      .jobGroupAdd({
+        group_name: name,
+        action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
+      })
+      .then((response) => {
+        let { status, data } = response;
+        if (status != 200 || data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Unable to add Group",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Group Added",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          // close modal
+          action();
+          // reload group page
+          setUpdateList((prev) => !prev);
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to add Group, try again later",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+      });
+  };
 
   return (
-    <ModalCom   
-        action={action}
-        situation={situation}
-    >
+    <ModalCom action={action} situation={situation}>
       <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -98,7 +122,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
         <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
           <div className="mb-6 w-full">
             <div className="input-item">
-                <InputCom
+              <InputCom
                 labelClass="tracking-wider"
                 fieldClass="sm:px-6 px-2"
                 value={name}
@@ -108,7 +132,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
                 type="text"
                 inputHandler={handleChange}
                 // iconName="message"
-                />
+              />
             </div>
           </div>
           <div className="w-full flex justify-between items-center gap-4">
@@ -117,7 +141,9 @@ export default function AddGroup({action, situation , setUpdateList}) {
               type="button"
               className="text-base text-light-red tracking-wide "
             >
-              <span className="border-b dark:border-[#5356fb29]  border-light-red">Cancel</span>
+              <span className="border-b dark:border-[#5356fb29]  border-light-red">
+                Cancel
+              </span>
             </button>
             {requestStatus.loading ? (
               <LoadingSpinner size="8" color="sky-blue" />
@@ -153,5 +179,5 @@ export default function AddGroup({action, situation , setUpdateList}) {
         </div>
       </div>
     </ModalCom>
-  )
+  );
 }

src/components/JobGroups/MemberList.jsx

@@ -1,262 +1,295 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import InputCom from '../../components/Helpers/Inputs/InputCom/index'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import GroupMemberTable from './GroupMemberTable'
+import InputCom from "../../components/Helpers/Inputs/InputCom/index";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import GroupMemberTable from "./GroupMemberTable";
 
-import EmailValidator from '../../lib/EmailValidator'
+import EmailValidator from "../../lib/EmailValidator";
 
-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";
+import { apiConst } from "../../lib/apiConst";
 
-export default function MemberList({groupList, selectedGroup, setUpdateList}) {
+export default function MemberList({
+  groupList,
+  selectedGroup,
+  setUpdateList,
+}) {
+  const api = new usersService();
 
-    const api = new usersService()
+  const [fields, setFields] = useState({
+    firstname: "",
+    lastname: "",
+    email: "",
+  });
 
-    const [fields, setFields] = useState({
-        firstname: '',
-        lastname: '',
-        email: ''
-    })
+  const handleFieldsChange = ({ target: { name, value } }) => {
+    setFields((prev) => ({ ...prev, [name]: value }));
+    // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+    // if(error >= 0){
+    //   let oldErrorArr = requestState.errors
+    //   let newErrorArr = oldErrorArr.splice(error, 1)
+    //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
+    // }
 
-    const handleFieldsChange = ({target:{name, value}}) => {
-        setFields(prev => ({...prev, [name]:value}))
-        // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
-        // if(error >= 0){
-        //   let oldErrorArr = requestState.errors
-        //   let newErrorArr = oldErrorArr.splice(error, 1)
-        //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
-        // }
-
-        if(value == ''){
-            setRequestState({
-                loading: false,
-                status: false,
-                message: '',
-                data: [],
-                errors: [name]
-            })
-        }else{
-            let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
-            if(error >= 0){
-              let oldErrorArr = requestState.errors
-              let newErrorArr = oldErrorArr.splice(error, 1)
-              setRequestState(prev => ({...prev, errors:oldErrorArr}))
-            }
-        }
-
-        if(name == 'email'){
-             //checks if email is a valid email address
-            let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-            if (!EmailValidator(value)) {
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: ['email']
-                })
-            }
-        }
-    }
-
-    const [requestState, setRequestState] = useState({
+    if (value == "") {
+      setRequestState({
         loading: false,
         status: false,
-        message: '',
+        message: "",
         data: [],
-        errors: ['email', 'firstname', 'lastname']
-      })
-
-    const addMember = () => {
-        // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
-        //     if(typeof item == 'string' && fields[item] === ''){
-        //         return item
-        //     }
-        // })
-    
-        // if(errors.length){
-        // setRequestState({
-        //     loading: false,
-        //     status: false,
-        //     message: '',
-        //     data: [],
-        //     errors: [...errors]
-        // })
-        // return
-        // }
-
-        //checks if email is a valid email address
-        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-        if (!EmailValidator(fields.email)) {
-            setRequestState({
-                loading: false,
-                status: false,
-                message: 'Email is invalid',
-                data: [],
-                errors: []
-            })
-            return setTimeout(()=>{
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: []
-                })
-            },3000)
-        }
-              
-        setRequestState({
-        loading: true,
-        status: false,
-        message: '',
-        data: [],
-        errors: []
-        })
-         const requestData = {
-            firstname:fields.firstname,lastname:fields.lastname, email:fields.email, group_id: selectedGroup?.id, action:13015
-         }
-        
-         api.groupMemberAdd(requestData).then(response => {
-            let {status, data} = response
-            if(status != 200 || data?.internal_return < 0){
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: 'Unable to add member',
-                    data: [],
-                    errors: []
-                })
-                return
-            }
-            setRequestState({
-                loading: false,
-                status: true,
-                message: 'Member added',
-                data: [],
-                errors: []
-            })
-
-            setTimeout(()=>{
-                // trigger group page reload
-                setUpdateList(prev => !prev)
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: []
-                })
-            }, 3000)
-
-         }).catch(error=>{
-            setRequestState({
-                loading: false,
-                status: false,
-                message: 'Something went wrong, try again',
-                data: [],
-                errors: []
-            })
-         }).finally(()=>{
-            setTimeout(()=>{
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: []
-                })
-                setFields({
-                    firstname: '',
-                    lastname: '',
-                    email: ''
-                })
-            }, 3000)
-        })
+        errors: [name],
+      });
+    } else {
+      let error = requestState?.errors?.indexOf(name); //// checks if the input field was in error array and removes it when the input changes
+      if (error >= 0) {
+        let oldErrorArr = requestState.errors;
+        let newErrorArr = oldErrorArr.splice(error, 1);
+        setRequestState((prev) => ({ ...prev, errors: oldErrorArr }));
+      }
     }
 
+    if (name == "email") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (!EmailValidator(value)) {
+        setRequestState({
+          loading: false,
+          status: false,
+          message: "",
+          data: [],
+          errors: ["email"],
+        });
+      }
+    }
+  };
+
+  const [requestState, setRequestState] = useState({
+    loading: false,
+    status: false,
+    message: "",
+    data: [],
+    errors: ["email", "firstname", "lastname"],
+  });
+
+  const addMember = () => {
+    // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
+    //     if(typeof item == 'string' && fields[item] === ''){
+    //         return item
+    //     }
+    // })
+
+    // if(errors.length){
+    // setRequestState({
+    //     loading: false,
+    //     status: false,
+    //     message: '',
+    //     data: [],
+    //     errors: [...errors]
+    // })
+    // return
+    // }
+
+    //checks if email is a valid email address
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (!EmailValidator(fields.email)) {
+      setRequestState({
+        loading: false,
+        status: false,
+        message: "Email is invalid",
+        data: [],
+        errors: [],
+      });
+      return setTimeout(() => {
+        setRequestState({
+          loading: false,
+          status: false,
+          message: "",
+          data: [],
+          errors: [],
+        });
+      }, 3000);
+    }
+
+    setRequestState({
+      loading: true,
+      status: false,
+      message: "",
+      data: [],
+      errors: [],
+    });
+    const requestData = {
+      firstname: fields.firstname,
+      lastname: fields.lastname,
+      email: fields.email,
+      group_id: selectedGroup?.id,
+      action: apiConst.WRENCHBOARD_JOB_GROUP_MEMBER,
+    };
+
+    api
+      .groupMemberAdd(requestData)
+      .then((response) => {
+        let { status, data } = response;
+        if (status != 200 || data?.internal_return < 0) {
+          setRequestState({
+            loading: false,
+            status: false,
+            message: "Unable to add member",
+            data: [],
+            errors: [],
+          });
+          return;
+        }
+        setRequestState({
+          loading: false,
+          status: true,
+          message: "Member added",
+          data: [],
+          errors: [],
+        });
+
+        setTimeout(() => {
+          // trigger group page reload
+          setUpdateList((prev) => !prev);
+          setRequestState({
+            loading: false,
+            status: false,
+            message: "",
+            data: [],
+            errors: [],
+          });
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestState({
+          loading: false,
+          status: false,
+          message: "Something went wrong, try again",
+          data: [],
+          errors: [],
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestState({
+            loading: false,
+            status: false,
+            message: "",
+            data: [],
+            errors: [],
+          });
+          setFields({
+            firstname: "",
+            lastname: "",
+            email: "",
+          });
+        }, 3000);
+      });
+  };
+
   return (
     <>
-    <div className='p-5 w-full min-h-[600px] overflow-y-auto'>
-        {groupList && groupList.length < 1 ?
-        <>
-            <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
-        </>
-        :
-        <>
-            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>{selectedGroup?.name}</h1>
-            <div className='w-full flex flex-col-reverse lg:flex-col'>
-                <div className='py-3 w-full'>
-                    <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center'>
-                        <div className="input-item">
-                            <InputCom
-                                labelClass="tracking-wider"
-                                fieldClass="sm:px-6 px-2"
-                                value={fields.firstname}
-                                inputHandler={handleFieldsChange}
-                                placeholder="First Name"
-                                // label="Firstname"
-                                name="firstname"
-                                type="text"
-                                // iconName="message"
-                            />
-                        </div>
-                        <div className="input-item">
-                            <InputCom
-                                labelClass="tracking-wider"
-                                fieldClass="sm:px-6 px-2"
-                                value={fields.lastname}
-                                inputHandler={handleFieldsChange}
-                                placeholder="Last Name"
-                                // label="Lastname"
-                                name="lastname"
-                                type="text"
-                                // iconName="message"
-                            />
-                        </div>
-                        <div className="input-item w-full sm:w-[150%]">
-                            <InputCom
-                                labelClass="tracking-wider"
-                                fieldClass="sm:px-6 px-2"
-                                value={fields.email}
-                                inputHandler={handleFieldsChange}
-                                placeholder="Email"
-                                // label="Email"
-                                name="email"
-                                type="email"
-                                // iconName="message"
-                            />
-                        </div>
-                        <div className='flex justify-end items-end'>
-                            {requestState.loading ?
-                            <LoadingSpinner size='8' color='sky-blue' />
-                            :
-                            <button 
-                                onClick={addMember} 
-                                disabled={requestState.loading || requestState.status || requestState.errors.length} 
-                                className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${requestState.loading || requestState.status || requestState.errors.length ? 'bg-sky-blue/50' : 'bg-sky-blue hover:bg-sky-600'} `}
-                            >
-                                Add Member
-                            </button>
-                            }
-                        </div>
-
-                        {!requestState.loading && requestState.message &&
-                        <p className={`text-lg absolute -bottom-7 left-0 ${requestState.status ? 'text-green-500' : 'text-red-500'}`}>{requestState.message}</p>
+      <div className="p-5 w-full min-h-[600px] overflow-y-auto">
+        {groupList && groupList.length < 1 ? (
+          <>
+            <h1 className="my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100">
+              You Currently Do not have any Group, Please Add Group
+            </h1>
+          </>
+        ) : (
+          <>
+            <h1 className="mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100">
+              {selectedGroup?.name}
+            </h1>
+            <div className="w-full flex flex-col-reverse lg:flex-col">
+              <div className="py-3 w-full">
+                <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center">
+                  <div className="input-item">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={fields.firstname}
+                      inputHandler={handleFieldsChange}
+                      placeholder="First Name"
+                      // label="Firstname"
+                      name="firstname"
+                      type="text"
+                      // iconName="message"
+                    />
+                  </div>
+                  <div className="input-item">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={fields.lastname}
+                      inputHandler={handleFieldsChange}
+                      placeholder="Last Name"
+                      // label="Lastname"
+                      name="lastname"
+                      type="text"
+                      // iconName="message"
+                    />
+                  </div>
+                  <div className="input-item w-full sm:w-[150%]">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={fields.email}
+                      inputHandler={handleFieldsChange}
+                      placeholder="Email"
+                      // label="Email"
+                      name="email"
+                      type="email"
+                      // iconName="message"
+                    />
+                  </div>
+                  <div className="flex justify-end items-end">
+                    {requestState.loading ? (
+                      <LoadingSpinner size="8" color="sky-blue" />
+                    ) : (
+                      <button
+                        onClick={addMember}
+                        disabled={
+                          requestState.loading ||
+                          requestState.status ||
+                          requestState.errors.length
                         }
-                    </div>
-                </div>
-                <div className='my-2 flex flex-col min-h-[300px]'>
-                    {selectedGroup?.data?.length < 1 ?
-                    <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Member Found, Please Add</h1>
-                    :
-                    <GroupMemberTable selectedList={selectedGroup?.data} />
-                    }
+                        className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${
+                          requestState.loading ||
+                          requestState.status ||
+                          requestState.errors.length
+                            ? "bg-sky-blue/50"
+                            : "bg-sky-blue hover:bg-sky-600"
+                        } `}
+                      >
+                        Add Member
+                      </button>
+                    )}
+                  </div>
+
+                  {!requestState.loading && requestState.message && (
+                    <p
+                      className={`text-lg absolute -bottom-7 left-0 ${
+                        requestState.status ? "text-green-500" : "text-red-500"
+                      }`}
+                    >
+                      {requestState.message}
+                    </p>
+                  )}
                 </div>
+              </div>
+              <div className="my-2 flex flex-col min-h-[300px]">
+                {selectedGroup?.data?.length < 1 ? (
+                  <h1 className="my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100">
+                    No Member Found, Please Add
+                  </h1>
+                ) : (
+                  <GroupMemberTable selectedList={selectedGroup?.data} />
+                )}
+              </div>
             </div>
-        </>
-        }
-    </div>
+          </>
+        )}
+      </div>
     </>
-  )
+  );
 }

src/components/MyPendingJobs/DeleteTaskModal.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useDispatch } from "react-redux";
-
+import { apiConst } from "../../lib/apiConst";
 
 function DeleteTaskModal({ details, onClose, situation, setReloadList }) {
   let dispatch = useDispatch();
@@ -19,34 +19,50 @@ function DeleteTaskModal({ details, onClose, situation, setReloadList }) {
 
   // FUNCTION TO DELETE TASK
   const deleteTask = () => {
-    setRequestStatus({loading:true, status:false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
 
-    let reqData = { // REQUEST PAYLOAD
+    let reqData = {
+      // REQUEST PAYLOAD
       suggest_uid: details.uid,
-      suggest_action: 555,
-      offset: 0
-    }
-    ApiCall.suggestStatus(reqData).then((response)=>{ // API CALL TO DELETE SUGGESTED TASK
-      let {data} = response
-      if(data.internal_return < 0){
-        setRequestStatus({loading:false, status:false, message: 'Unable to delete, Try again'})
-        return setTimeout(()=>{
-            setRequestStatus({loading:false, status:false, message: ''})
-        },3000)
-      }
-      setRequestStatus({loading:false, status:true, message: 'Family Suggest Deleted'})
-      setReloadList(prev => !prev) // RELOADS THE FAMILY SUGGEST LIST TABLE
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-          onClose()
-      },3000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message: 'Unable to delete, Try again'})
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-      },3000)
-    })
-  }
+      suggest_action: apiConst.WRENCHBOARD_COMPLETE_SENDMONEY_INTERSW,
+      offset: 0,
+    };
+    ApiCall.suggestStatus(reqData)
+      .then((response) => {
+        // API CALL TO DELETE SUGGESTED TASK
+        let { data } = response;
+        if (data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Unable to delete, Try again",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Family Suggest Deleted",
+        });
+        setReloadList((prev) => !prev); // RELOADS THE FAMILY SUGGEST LIST TABLE
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          onClose();
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to delete, Try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+      });
+  };
 
   return (
     <ModalCom action={onClose} situation={situation}>

src/components/MyPendingJobs/SendReminderModal.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useDispatch } from "react-redux";
-
+import { apiConst } from "../../lib/apiConst";
 
 function SendReminderModal({ details, onClose, situation, setReloadList }) {
   let dispatch = useDispatch();
@@ -19,34 +19,50 @@ function SendReminderModal({ details, onClose, situation, setReloadList }) {
 
   // FUNCTION TO SEND REMINDER
   const sendReminder = () => {
-    setRequestStatus({loading:true, status:false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
 
-    let reqData = { // REQUEST PAYLOAD
+    let reqData = {
+      // REQUEST PAYLOAD
       suggest_uid: details.uid,
-      suggest_action: 222,
-      offset: 0
-    }
-    ApiCall.suggestStatus(reqData).then((response)=>{ // API CALL TO DELETE SUGGESTED TASK
-      let {data} = response
-      if(data.internal_return < 0){
-        setRequestStatus({loading:false, status:false, message: 'Unable to send reminder, Try again1111'})
-        return setTimeout(()=>{
-            setRequestStatus({loading:false, status:false, message: ''})
-        },3000)
-      }
-      setRequestStatus({loading:false, status:true, message: 'Reminder Sent'})
-      setReloadList(prev => !prev) // RELOADS THE FAMILY SUGGEST LIST TABLE
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-          onClose()
-      },3000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message: 'Unable to send reminder, Try againNETWORK'})
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-      },3000)
-    })
-  }
+      suggest_action: apiConst.OFFER_CANCEL,
+      offset: 0,
+    };
+    ApiCall.suggestStatus(reqData)
+      .then((response) => {
+        // API CALL TO DELETE SUGGESTED TASK
+        let { data } = response;
+        if (data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Unable to send reminder, Try again1111",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Reminder Sent",
+        });
+        setReloadList((prev) => !prev); // RELOADS THE FAMILY SUGGEST LIST TABLE
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          onClose();
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to send reminder, Try againNETWORK",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+      });
+  };
 
   return (
     <ModalCom action={onClose} situation={situation}>
@@ -82,27 +98,32 @@ function SendReminderModal({ details, onClose, situation, setReloadList }) {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center p-8">
-
-        <div className="mb-6 w-full flex gap-4 items-center">
+          <div className="mb-6 w-full flex gap-4 items-center">
             <div className="icon max-w-[150px] min-w-[150px] max-h-[150px] min-h-[150px] flex justify-center items-center">
-                <img src={require(`../../assets/images/family/${details.banner || "default.jpg"}`)} alt="" className="w-full h-full" />
+              <img
+                src={require(`../../assets/images/family/${
+                  details.banner || "default.jpg"
+                }`)}
+                alt=""
+                className="w-full h-full"
+              />
             </div>
             <div className="w-full">
-                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                    {details.title}
-                </p>
+              <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                {details.title}
+              </p>
 
-                <p className="text-sm mb-2 text-thin-light-gray font-medium">
-                    {details.description}
-                </p>
-                {
-                  details.remind && 
+              <p className="text-sm mb-2 text-thin-light-gray font-medium">
+                {details.description}
+              </p>
+              {details.remind && (
                 <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                    Last Remind: {new Date(details.remind).toLocaleString().split(',')[0]}
+                  Last Remind:{" "}
+                  {new Date(details.remind).toLocaleString().split(",")[0]}
                 </p>
-                }
+              )}
             </div>
-        </div>
+          </div>
 
           <div className="w-full flex justify-end">
             {/* <button

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -11,6 +11,7 @@ import profileImage from "../../../assets/images/profile.jpg";
 
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
+import { apiConst } from "../../../lib/apiConst";
 
 const validationSchema = Yup.object().shape({
   email: Yup.string()
@@ -147,7 +148,7 @@ export default function PersonalInfoTab({
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: "FILE",
-          action: 11300,
+          action: apiConst.WRENCHBOARD_PICTURE_PROFILE,
         };
 
         setUploadStatus({

src/components/UploadProduct/index.jsx

@@ -8,6 +8,7 @@ import ProductUploadField from "./ProductUploadField";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 import { useNavigate } from "react-router-dom";
+import { apiConst } from "../../lib/apiConst";
 
 export default function UploadProduct({uploadTypes}) {
   const apiCall = new usersService()
@@ -152,7 +153,7 @@ export default function UploadProduct({uploadTypes}) {
       title: itemName,
       description: description,
       msg_type: 'FILE',
-      action: 11307
+      action: apiConst.WRENCHBOARD_RESOURCE_MYFILES
     }
 
     if(!isValidFile(imgDetails, uploadTypes?.data)){ // FUNCTION TO CHECK IF FILE TYPE IS VALID

src/components/YourPage/LoadedPage.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import GetMyPageLoad from "./getMyPageLoad";
+
+
+const LoadedPage = ({reloader}) => {
+  const { loading, data, error } = GetMyPageLoad(reloader);
+
+  return (
+    <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
+      {loading ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">...</h1>
+          <p>...</p>
+        </>
+      ) : error ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">Unable to load</h1>
+        </>
+      ) : (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">
+            {!data.intro ? "Introduction" : data.intro}
+          </h1>
+          <p>{!data.description ? "Brief Details" : data.description}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default LoadedPage;

src/components/YourPage/UpdateButton.jsx

@@ -1,13 +1,19 @@
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-const UpdateButton = ({ onClick, loading }) => (
+const UpdateButton = ({ onClick, loading, msg }) => (
   <button
     type="submit"
     onClick={onClick}
     disabled={loading}
     className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
   >
-    {loading ? <LoadingSpinner size="6" color="sky-blue" /> : "Update"}
+    {loading ? (
+      <LoadingSpinner size="6" color="sky-blue" />
+    ) : msg !== "" ? (
+      msg
+    ) : (
+      "Update"
+    )}
   </button>
 );
 

src/components/YourPage/YourPageForm.jsx

@@ -1,7 +1,7 @@
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import UpdateButton from "./UpdateButton";
 
-const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
+const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
   <div className="ml-16 my-2 flex flex-col gap-3">
     <div className="field w-full">
       <InputCom
@@ -33,7 +33,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
       />
     </div>
     <div className="w-full flex justify-end mb-2">
-      <UpdateButton onClick={onSubmit} loading={loading} />
+      <UpdateButton onClick={onSubmit} loading={loading} msg={msg} />
     </div>
     <hr />
   </div>

src/components/YourPage/getMyPageLoad.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import usersService from "../../services/UsersService";
+
+
+const GetMyPageLoad = (reloader) => {
+  const api = new usersService();
+
+    const [response, setResponse] = useState({
+      loading: true,
+      data: null,
+      error: null,
+    });
+  
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const res = await api.MyPageLoad();
+
+          setResponse({ loading: false, data: res.data, error: null });
+        } catch (error) {
+          setResponse({ loading: false, data: null, error: error.message });
+        }
+      };
+  
+      fetchData();
+    }, [reloader]);
+  
+    return response;
+  };
+  
+  export default GetMyPageLoad;

src/components/YourPage/index.jsx

@@ -1,27 +1,67 @@
 import React, { useState } from "react";
-import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
+import Layout from "../Partials/Layout";
+import LoadedPage from "./LoadedPage";
 import YourPageForm from "./YourPageForm";
+// import { updateYourPage } from "./updateYourPage";
 
 const YourPage = () => {
-  const [pageValues, setPageValues] = useState({
-    intro: "",
-    description: "",
-  });
+  const [pageValues, setPageValues] = useState(pageInitialValues);
+  const [response, setResponse] = useState(responseInitialValues);
+  const [reloader, setReloader] = useState(false);
 
-  const [response, setResponse] = useState({
-    loading: false,
-    data: {},
-    error: "",
-    msg: "",
-  });
-
-  const handleChange = (event) => {
-    let { name, value } = event.target;
+  const handleChange = ({ target: { name, value } }) =>
     setPageValues((prev) => ({ ...prev, [name]: value }));
-  };
 
-  const updateYourPageDetails = async () => {
+  const updateYourPageDetails = updateYourPage(
+    pageValues,
+    setResponse,
+    setPageValues,
+    setReloader
+  );
+
+  return (
+    <Layout>
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[650px]">
+            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
+              My page
+            </h1>
+            <hr />
+            <YourPageForm
+              values={pageValues}
+              onChange={handleChange}
+              onSubmit={updateYourPageDetails}
+              loading={response.loading}
+              msg={response.msg}
+            />
+            <LoadedPage reloader={reloader} />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default YourPage;
+
+const pageInitialValues = {
+  intro: "",
+  description: "",
+};
+
+const responseInitialValues = {
+  loading: false,
+  data: {},
+  error: "",
+  msg: "",
+};
+
+function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
+  return async () => {
+    if (!pageValues.intro || !pageValues.description) return;
+
     try {
       setResponse({ loading: true, error: "", msg: "" });
 
@@ -32,14 +72,19 @@ const YourPage = () => {
         setResponse({
           loading: false,
           data: res.data,
-          msg: "Page updated successfully",
+          msg: "Update Complete",
         });
 
+        setReloader((prev) => !prev);
+      }, 1000);
+
+      setTimeout(() => {
+        setResponse({ msg: "" });
         // Clear form after successful update
         setPageValues({ intro: "", description: "" });
-      }, 2000);
+      }, 3000);
     } catch (error) {
-      setResponse({
+      return setResponse({
         loading: false,
         data: {},
         error: "Error updating page",
@@ -47,27 +92,4 @@ const YourPage = () => {
       });
     }
   };
-
-  return (
-    <Layout>
-      <div className="notification-page w-full mb-10">
-        <div className="notification-wrapper w-full">
-          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px]">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
-              My page
-            </h1>
-            <hr />
-            <YourPageForm
-              values={pageValues}
-              onChange={handleChange}
-              onSubmit={updateYourPageDetails}
-              loading={response.loading}
-            />
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-export default YourPage;
+}

src/components/jobPopout/EditJobPopout.jsx

@@ -8,6 +8,7 @@ import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { apiConst } from "../../lib/apiConst";
 
 const validationSchema = Yup.object().shape({
   country: Yup.string()
@@ -162,7 +163,7 @@ const EditJobPopOut = ({
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: "FILE",
-          action: 11303,
+          action: apiConst.WRENCHBOARD_PICTURE_JOB,
         };
         setUploadStatus({
           loading: true,
@@ -208,12 +209,6 @@ const EditJobPopOut = ({
     }
   };
 
-  // Check if the user is using iOS
-  const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream;
-
-  // Check if the user is using Windows
-  const isWindows = /Windows/.test(navigator.userAgent);
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">

src/components/jobPopout/JobListPopout.jsx

@@ -48,13 +48,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
   const memberList = useCallback(async () => {
     setLoader({ member: true, jobFields: false });
     try {
-      let reqData = {
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      let res = await apiCall.familyListings(reqData);
+      let res = await apiCall.familyListings();
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status == "OK") {
         let { result_list } = data;
@@ -130,7 +124,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       reqData = {
         ...jobReq,
         family_uid: values?.family,
-        action: 13025,
         assign_mode: 110011,
       };
       setLoader({ jobFields: { family: true } });
@@ -139,7 +132,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       reqData = {
         ...jobReq,
         duration: Number(values?.public),
-        action: 13025,
         assign_mode: 110022,
       };
       setLoader({ jobFields: { public: true } });
@@ -148,7 +140,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       reqData = {
         ...jobReq,
         email: values?.individual,
-        action: 13025,
         assign_mode: 110033,
       };
       setLoader({ jobFields: { individual: true } });
@@ -158,7 +149,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
         ...jobReq,
         email: '',
         group_id: values?.group,
-        action: 13025,
         assign_mode: 110044,
         duration: details?.timeline_days,
         // duration: 0,

src/index.css

@@ -180,7 +180,7 @@ html {
 
 .primary-home {
   /*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
-  background-image: url("./assets/images/left-myft.jpg");
+  background-image: url("./assets/images/left-wrenchboard.jpg");
   background-repeat: no-repeat;
   background-size: cover;
 }
@@ -955,6 +955,21 @@ TODO: Responsive ===========================
   padding-inline: 1rem;
 }
 
+.auth-bg {
+  border: none;
+  /* box-shadow: inset 0 0 10px 20px #fff; */
+}
+
+.auth-bg::after {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 50%,
+    transparent 95%,
+    rgb(255, 255, 255) 100%
+  );
+}
+
 /* For IE10 */
 .content-wrapper select::-ms-expand {
   display: none;

src/lib/apiConst.js

@@ -0,0 +1,269 @@
+export const apiConst = {
+    LOGIN_MODE_GENERAL: 1100,
+    LOGIN_MODE_FAMILY:  1105,
+    ADD_JOB:    10010,
+    UPDATE_JOB: 10020,
+    PHP_API_OK: 0,
+    PHP_LOGIN_OK: 100,
+    PHP_CREATED_OK: 10,
+    PHP_API_BAD_PARAM: -1,
+    PHP_INVALID_SESSION: -9999,
+    SESSION_TIMEOUT_LOGOUT:6000,
+    MOBILE_LOGIN: 1101,
+    SUPPORT_PHONE:'+234 (818)-3866434',
+    UPLOAD_FILE_SIZE:1,
+    OFFER_ACCEPT:100,
+    OFFER_REJECT:333,
+    OFFER_CANCEL:222,
+    OFFER_EXPIRE:444,
+    JOB_INTEREST_ACCEPT:100,
+    JOB_INTEREST_REJECT:200,
+    JOB_INTEREST_CANCEL:300,
+    SMONEY_PROCC_MANUAL:100,
+    SMONEY_PROCC_AUTO:200,
+    SMONEY_PROCC_INTERSWITCH:300,
+    ACCOUNT_AGREE_JOBS:100,
+    ACCOUNT_AGREE_REFER:200,
+    WRENCHBOARD_SESSION_CHECK: 299,
+    WRENCHBOARD_USER_LOGIN: 300,
+    WRENCHBOARD_USER_LOGOUT: 301,
+    WRENCHBOARD_CREATE_ACCOUNT: 320,
+    CONTRACT_CANCEL_CONTRACT: 7,
+    CONTRACT_EXTEND_TIMELINE: 9,
+    CONTRACT_NOTIFY_COMPLETE: 4,
+    CONTRACT_REQUEST_CANCEL:  3,
+    CONTRACT_REQUEST_TIMELINE: 2,
+    CONTRACT_ACCEPT_COMPLETE: 5,
+    CONTRACT_REJECT_COMPLETE: 1,
+    WRENCHBOARD_SIGNUP_COUNTRY : 648,
+    WRENCHBOARD_GET_MEDIA: 650,
+    WRENCHBOARD_SAVE_MEDIA: 652,
+    WRENCH_FILE_PROFILE:     100,
+    WRENCH_FILE_MYFILE:     200,
+    WRENCH_FILE_CONTRACTS:   300,
+    WRENCH_FILE_FAMILY:     400,
+    WRENCH_FILE_FAMILYBANNER:    410,
+    WRENCH_FILE_JOB :    500,
+    WRENCHBOARD_BKO_START: 10000,
+    WRENCHBOARD_BKO_LOGIN: 10010,
+    WRENCHBOARD_BKO_CREATEUSER: 10015,
+    WRENCHBOARD_BKO_UPDATEUSER: 10020,
+    WRENCHBOARD_BKO_END: 10999,
+    WRENCHBOARD_ACCOUNT_START: 11000,
+    WRENCHBOARD_PROFILE_RESETPASS: 11005,
+    WRENCHBOARD_ACCOUNT_TESTEMAIL: 11001,
+    WRENCHBOARD_ACCOUNT_PENDING: 11010,
+    WRENCHBOARD_CREATE_MOBILEUSER:   11011,
+    WRENCHBOARD_COMPLETE_MOBILEUSER: 11012,
+    WRENCHBOARD_RESET_PASSWORD: 11013 ,
+    WRENCHBOARD_ACCOUNT_JOBLIST:11014 ,
+    WRENCHBOARD_VERIFY_PENDING_LINK: 11015,
+    WRENCHBOARD_ACCOUNT_RESETPASS: 11016,
+    WRENCHBOARD_ACCOUNT_SETPASSWD: 11017,
+    WRENCHBOARD_DELETE_PENDING_LINK: 11018,
+    WRENCHBOARD_RESEND_PENDING_LINK: 11019,
+    LOGIN_GOOGLE: 990010,
+    LOGIN_FACEBOOK: 990011,
+    LOGIN_APPLE: 990012,
+    WRENCHBOARD_ACCOUNT_DASHRECENT: 11206,
+    WRENCHBOARD_ACCOUNT_QRLOGIN:    11022,
+    WRENCHBOARD_ACCOUNT_CREATEACC:  11020,
+    WRENCHBOARD_ACCOUNT_AUXSTART:   11023,
+    WRENCHBOARD_ACCOUNT_AUXLOGIN:   11024,
+    WRENCHBOARD_ACCOUNT_LOGIN:      11025,
+    WRENCHBOARD_FACEBOOK_LOGIN:     11026,
+    WRENCHBOARD_GOOGLE_LOGIN:       11027,
+    WRENCHBOARD_APPLE_LOGIN:        11031,
+    WRENCHBOARD_START_JOBLIST:      11028,
+    WRENCHBOARD_ACCOUNT_DASHDATA:   11029,
+
+    WRENCHBOARD_SEND_CONTACTUS:      11030,
+    WRENCHBOARD_ACCOUNT_SENDREFER:   11032,
+    WRENCHBOARD_ACCOUNT_REFERLINK:   11033,
+    WRENCHBOARD_SESSION_VERIFY:      11034,
+    WRENCHBOARD_UPDATE_PROFILE:      11035,
+    WRENCHBOARD_ACCOUNT_TERMS:       11036,
+    WRENCHBOARD_ACCOUNT_MDESCRIPTION:11037,
+    WRENCHBOARD_ACCOUNT_SAVESKILL:   11038,
+    WRENCHBOARD_ACCOUNT_DELSKILL:    11039,
+    WRENCHBOARD_LOG_MEMBER:          11040,
+    WRENCHBOARD_DELETE_RECACC:       11041,
+    WRENCHBOARD_SAVE_GALLERY:        11042,
+    WRENCHBOARD_ACCOUNT_PENDJOB:     11043,
+    WRENCHBOARD_ACCT_NOTIFICATIONS:  11046,
+    WRENCHBOARD_ACCT_HELPITEMS:     11047,
+    WRECNH_CREDIT_HOOKS_FULUTTER:   11045,
+
+    WRENCHBOARD_USER_GETBANKLIST: 11050,
+    WRENCHBOARD_USER_SENDMONEY:   11051,
+    WRENCHBOARD_USER_SENDJOBINT:  11052,
+
+    WRENCHBOARD_USER_STARTCREDIT: 11053,
+    WRENCHBOARD_USER_ADNEWCC:     11054,
+    WRENCHBOARD_USER_CARDLIST:    11055,
+    WRENCHBOARD_USER_USESAVEDCC:  11056,
+    WRENCHBOARD_USER_CARDREMV:    11057,
+
+    WRENCHBOARD_USER_SETTINGS:    11058,
+    WRENCHBOARD_GETUSER_SETTINGS: 11059,
+
+    WRENCHBOARD_ACCOUNT_WALLETS: 11060,
+
+    WRENCHBOARD_ACCOUNT_TOPUP_RESULT:     11061,
+    WRENCHBOARD_ACCOUNT_PREPARE_TOPUP:    11062,
+    WRENCHBOARD_ACCOUNT_COMPLETE_TOPUP:   11063,
+    WRENCHBOARD_ACCOUNT_REFFERHX:         11064,
+
+    WRENCHBOARD_ACCOUNT_PREFERENCES:      11065,
+
+
+    WRENCHBOARD_ACCOUNT_MYPAGE:      11070,
+    WRENCHBOARD_ACCOUNT_PAGEINTRO:   11071,
+
+    WRENCHBOARD_ACCOUNT_PRICE_COMBO:      11171,
+    WRENCHBOARD_ACCOUNT_JOBPOST_DURATION: 11173,
+    WRENCHBOARD_ACCOUNT_USER_RECIPIENT:   11175,
+    WRENCHBOARD_ACCOUNT_ADD_RECIPIENT:    11176,
+    WRENCHBOARD_ACCOUNT_ACCOUNT_TYPES:    11177,
+    WRENCHBOARD_ACCOUNT_COUNTRY_COMBO:    11179,
+    WRENCHBOARD_ACCOUNT_JOB_COUNTRY:      11181,
+    WRENCHBOARD_ACCOUNT_COUNTRY_BANKS:    11183,
+
+
+    WRENCHBOARD_ACCOUNT_HOMEBANNERS:   11200,
+    WRENCHBOARD_ACCOUNT_PLAYGROUND:    11201,
+
+    WRENCHBOARD_ACCOUNT_RECENTS:       11202,
+    WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
+
+    WRENCHBOARD_PICTURE_PROFILE: 11300,
+    WRENCHBOARD_PICTURE_JOB: 11303,
+    WRENCHBOARD_PICTURE_FAMBANNER: 11304,
+    WRENCHBOARD_PICTURE_FAMMEMBER: 11305,
+    WRENCHBOARD_RESOURCE_MYFILES: 11307,
+    WRENCHBOARD_MYFILES_LIST: 11309,
+
+    WRENCHBOARD_USER_DELETEACC: 11990,
+    WRENCHBOARD_ACCOUNT_END:    11999,
+    WRENCHBOARD_JOB_POSTAGREE:  13002,
+    WRENCHBOARD_JOB_LISTJOBS:   13005,
+    WRENCHBOARD_JOB_OFFERS:     13006,
+    WRENCHBOARD_JOB_ACTIVE:     13008,
+    WRENCHBOARD_JOB_USERACTIVE: 13009,
+
+    WRENCHBOARD_JOB_CREATEJOB:  13010 ,
+    WRENCHBOARD_JOB_DELETEJOB:  13011 ,
+
+    WRENCHBOARD_JOB_GROUP_MEMBER: 13015,
+    WRENCHBOARD_JOB_DELETE_GROUPMEMBER:13017,
+    WRENCHBOARD_JOB_CREATE_GROUP: 13020,
+    WRENCHBOARD_JOB_DELETE_GROUP:13023,
+
+    WRENCHBOARD_JOB_OFFER_INTLIST:   13024,
+    WRENCHBOARD_JOB_OFFER_SYSTEM:  13025,
+    WRENCHBOARD_JOB_OFFER_FAMILY:  13029,
+    WRENCHBOARD_JOB_OFFER_INDVI:13030,
+    WRENCHBOARD_JOB_OFFER_GROUP:13031,
+    WRENCHBOARD_JOB_OFFER_PUBLIC:13032,
+    WRENCHBOARD_JOB_SEND_INTEREST:13033,
+    WRENCHBOARD_JOB_PROC_INTEREST:13034,
+    WRENCHBOARD_JOB_OFFER_CONCLUDE:13035,
+    WRENCHBOARD_JOB_SEND_QUESTION:13036,
+    WRENCHBOARD_JOB_MRKTINT_QUEST:13037,
+    WRENCHBOARD_JOB_REPLY_QUESTION:13038,
+    WRENCHBOARD_JOB_INT_QUESTLST:  13039,
+    WRENCHBOARD_JOB_WAITING_INT:  13040,
+
+    WRENCHBOARD_JOB_EXTEND_EXPIRE: 13041,
+    WRENCHBOARD_JOB_RESEND_MESSAGE: 13042,
+    WRENCHBOARD_JOB_CANCEL_OFFER: 13043,
+
+    WRENCHBOARD_JOB_JOBGROUPS:    13045,
+    WRENCHBOARD_JOB_JOBGROUPADD:  13046,
+    WRENCHBOARD_JOB_REPORT:  13047,
+
+    WRENCHBOARD_GROUP_START: 12000,
+    WRENCHBOARD_GROUP_CREATEGROUP: 12010,
+    WRENCHBOARD_GROUP_INVITEGROUP: 12015,
+    WRENCHBOARD_GROUP_ACCEPTGROUP: 12020,
+    WRENCHBOARD_CONTRACT_MESSAGE: 14010,
+    WRENCHBOARD_CONTRACT_MSGLIST: 14011,
+    WRENCHBOARD_CONTRACT_STATUS:  14015,
+    WRENCHBOARD_MOBILE_OFFERSLIST: 15010,
+    WRENCHBOARD_MOBILE_OFFERSRESP:  15012,
+    WRENCHBOARD_MOBILE_ACTIVEJOB: 15020,
+    WRENCHBOARD_MOBILE_LOADPROFILE:  15030,
+    WRENCHBOARD_MOBILE_UPDATEPROFILE:15031,
+    WRENCHBOARD_MOBILE_ACCOUNT: 15040,
+    WRENCHBOARD_MOBILE_JOB_MESSAGE: 15044,
+    WRENCHBOARD_MOBILE_MESSAGE:  15045,
+    WRENCHBOARD_MOBILE_PAYMENTHX: 15046,
+    WRENCHBOARD_MOBILE_TASKMESSAGE: 15047,
+    WRENCHBOARD_MOBILE_SENDTASKMESSAGE: 15048,
+    WRENCHBOARD_MOBILE_PURCHASEHX:   15049,
+    WRENCHBOARD_FAMILY_LIST:           22010,
+    WRENCHBOARD_FAMILY_TRANSFERHX:     22011,
+    WRENCHBOARD_FAMILY_WALLET:         22012,
+    WRENCHBOARD_FAMILY_TRANSFERSTART:  22013,
+    WRENCHBOARD_FAMILY_TRANSFER:       22014,
+    WRENCHBOARD_FAMILY_ADD:            22015,
+    WRENCHBOARD_FAMILY_UPDATE:         22020,
+    WRENCHBOARD_FAMILY_MANAGE:         22025,
+    WRENCHBOARD_FAMILY_SGGESTSTATUS:   22026,
+    WRENCHBOARD_FAMILY_SAMPLETASKS:    22027,
+    WRENCHBOARD_FAMILY_SGGESTTASKS:    22028,
+    WRENCHBOARD_FAMILY_SGGESTLIST:     22029,
+    WRENCHBOARD_FAMILY_SGGESTWAITING:  22030,
+    WRENCHBOARD_FAMILY_RELINVITE:      22031,
+    WRENCHBOARD_SMONEY_ADDRECIPIENT: 33010,
+    WRENCHBOARD_SMONEY_MEMBER: 33020,
+    WRENCHBOARD_SMONEY_PROCFEE:  33025,
+    WRENCHBOARD_SMONEY_BKOPROC:  33030 ,
+    WRENCHBOARD_LOGIN_SHOP: 50501,
+    WRENCHBOARD_LOGIN_ADMIN: 50502,
+    WRENCHBOARD_LOGIN_MANAGER: 50503,
+    WRENCHBOARD_SURVEY_DATA: 55000,
+    WRENCHBOARD_ADD_SURVEY: 55050,
+    WRENCHBOARD_LOAD_SURVEY: 55055,
+    WRENCHBOARD_COMPLETE_SENDMONEY_INTERSW: 555,
+    WRENCHBOARD_GETBILLER_INTERSW: 556,
+    WRENCHBOARD_BILL_PAYMENT_ADVICE_INTERSW: 557,
+    WRENCHBOARD_INTERSW_GETBILLER: 556,
+    WRENCHBOARD_INTERSW_BILL_PAYMENT_ADVICE: 557,
+    WRENCHBOARD_INTERSW_GETBILLERPAYMENTINTEMS: 558,
+    WRENCHBOARD_INTERSW_GETBILLERCATEGORIES: 559,
+    WRENCHBOARD_INTERSW_DO_TRANSFER: 560,
+    WRENCHBOARD_INTERSW_QUERY_TRANSACTION: 561,
+    WRENCHBOARD_ADD_MONEYRECIPIENT: 600,
+    WRENCHBOARD_CREATE_USER_ACCOUNT: 700,
+    WRENCHBOARD_USER_ACCOUNT_LOGIN: 710,
+    WRENCHBOARD_START_PASSWORDRESET: 720,
+    WRENCHBOARD_VERIFY_PASSWD_RESETLINK: 725,
+    WRENCHBOARD_COMPLETE_PASSWORDRESET: 730,
+    WRENCHBOARD_CARDS_GETCARDLIST: 40010,
+    WRENCHBOARD_CARDS_UPDATECARD:  40015 ,
+    WRENCHBOARD_COUPON_REDEEM:   85020,
+    WRENCHBOARD_COUPON_MEMLIST:  85025,
+    WRENCHBOARD_COUPON_PENDLIST: 85030,
+    WRENCHBOARD_ADD_MOBILE_TOPUPNUM: 900,
+    WRENCHBOARD_PROMO_CALL: 990,
+    WRENCHBOARD_STOREFACE_GET_ACCOUNT_BALANCE: 891,
+    WRENCHBOARD_LOG_ENTRY: 900000,
+    WRENCHBOARD_CREDIT_TOPUP: 900010,
+    WRENCHBOARD_TOPUP_ORDER: 900020,
+    WRENCHBOARD_TOPUP_ORDER_PURCHASE: 900030,
+    WRENCHBOARD_PAYPAL_IPNMSG: 900090,
+    WRENCHBOARD_BULKTOPUP_ORDER: 700010,
+    WRENCHBOARD_BULKTOPUP_ITEM: 700020,
+    WRENCHBOARD_BULKTOPUP_ITEMUPDATE: 700030,
+    WRENCHBOARD_BULKTOPUP_DELIVER: 700040,
+    WRENCHBOARD_BALANCE_TOPUP_ORDER: 800020,
+    WRENCHBOARD_BALANCE_TOPUP_PURCHASE: 800030,
+    WRENCHBOARD_BALANCE_TOPUP_PAYMENT: 800040,
+    VIRTUAL_AIRTOPUP: 70011,
+    PAY_MODE_BALANCE: 0,
+    PAY_MODE_CCARD: 1,
+    PAY_MODE_BONUS: 9,
+    APPROVED_BALANCE: 5,
+    DISAPROVE_BALANCE: 3
+};

src/services/SiteService.js

@@ -1,4 +1,5 @@
 import Axios from "axios";
+import { apiConst } from "../lib/apiConst";
 
 class SiteService {
   constructor() {
@@ -32,7 +33,7 @@ class SiteService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22015,
+      action: apiConst.WRENCHBOARD_FAMILY_ADD,
       ...reqData,
     };
     return this.postAuxEnd("/familyadd", postData);

src/services/UsersService.js

@@ -1,4 +1,5 @@
 import Axios from "axios";
+import { apiConst } from "../lib/apiConst";
 
 class usersService {
   constructor() {
@@ -10,11 +11,21 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/mypageintro", postData);
   }
 
+  MyPageLoad() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_ACCOUNT_MYPAGE,
+    };
+    return this.postAuxEnd("/mypageload", postData);
+  }
+
   CreateUser(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/createuser", reqData);
@@ -24,8 +35,15 @@ class usersService {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authlogin", reqData);
   }
-  CompleteSignUp(reqData) {
+  CompleteSignUp(postData) {
     localStorage.setItem("session_token", ``);
+
+    var reqData = {
+      login_mode: 100,
+      sessionid: "STARTER-NOTREAL",
+      action: apiConst.WRENCHBOARD_COMPLETE_MOBILEUSER,
+      ...postData,
+    };
     return this.postAuxEnd("/completesignuplink", reqData);
   }
 
@@ -34,6 +52,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
       ...reqData,
     };
     return this.postAuxEnd("/assigntask", postData);
@@ -55,13 +74,18 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11202,
+      action: apiConst.WRENCHBOARD_ACCOUNT_RECENTS,
     };
     return this.postAuxEnd("/recentactivities", postData);
   }
 
-  logInUser(reqData) {
+  logInUser(postData) {
     localStorage.setItem("session_token", ``);
+
+    var reqData = {
+      action: apiConst.WRENCHBOARD_ACCOUNT_LOGIN,
+      ...postData,
+    };
     return this.postAuxEnd("/userlogin", reqData);
   }
 
@@ -123,7 +147,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 11309,
+      action: apiConst.WRENCHBOARD_MYFILES_LIST,
     };
     return this.postAuxEnd("/myfiles", postData);
   }
@@ -240,7 +264,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 11175,
+      action: apiConst.WRENCHBOARD_ACCOUNT_USER_RECIPIENT,
     };
     return this.postAuxEnd("/recipients", postData);
   }
@@ -263,7 +287,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       amount,
-      action: 33025,
+      action: apiConst.WRENCHBOARD_SMONEY_PROCFEE,
     };
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
@@ -274,7 +298,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11053,
+      action: apiConst.WRENCHBOARD_USER_STARTCREDIT,
       ...value,
     };
     return this.postAuxEnd("/startcredit", postData);
@@ -286,7 +310,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11056,
+      action: apiConst.WRENCHBOARD_USER_USESAVEDCC,
       ...value,
     };
     return this.postAuxEnd("/payprevcard", postData);
@@ -298,7 +322,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11054,
+      action: apiConst.WRENCHBOARD_USER_ADNEWCC,
       ...value,
     };
     return this.postAuxEnd("/paynewcard", postData);
@@ -311,7 +335,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 22027,
+      action: apiConst.WRENCHBOARD_FAMILY_SAMPLETASKS,
     };
     return this.postAuxEnd("/familysampletasks", postData);
   }
@@ -321,7 +345,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/familysuggesttasks", postData);
@@ -333,7 +357,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22025,
+      action: apiConst.WRENCHBOARD_FAMILY_MANAGE,
       ...reqData,
     };
     return this.postAuxEnd("/familymanage", postData);
@@ -348,7 +372,7 @@ class usersService {
       job_mode: "ACTIVE",
       limit: 30,
       offset: 0,
-      action: 13008,
+      action: apiConst.WRENCHBOARD_JOB_ACTIVE,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanageractive", postData);
@@ -360,7 +384,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       limit: 30,
       offset: 0,
     };
@@ -461,7 +485,7 @@ class usersService {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22010,
+      action: apiConst.WRENCHBOARD_FAMILY_LIST,
       ...reqData,
     };
     return this.postAuxEnd("/askresources", postData);
@@ -499,7 +523,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 85025,
+      action: apiConst.WRENCHBOARD_COUPON_MEMLIST,
     };
     return this.postAuxEnd("/couponhx", postData);
   }
@@ -511,7 +535,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 15049,
+      action: apiConst.WRENCHBOARD_MOBILE_PURCHASEHX,
     };
     return this.postAuxEnd("/purchasehx", postData);
   }
@@ -524,7 +548,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       offset: 1,
       limit: 20,
-      action: 22011,
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFERHX,
     };
     return this.postAuxEnd("/familyrewardhx", postData);
   }
@@ -537,7 +561,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 15046,
+      action: apiConst.WRENCHBOARD_MOBILE_PAYMENTHX,
     };
     return this.postAuxEnd("/paymenthx", postData);
   }
@@ -548,7 +572,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 33020,
+      action: apiConst.WRENCHBOARD_SMONEY_MEMBER,
       ...reqData,
     };
     return this.postAuxEnd("/sendmoney", postData);
@@ -562,7 +586,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       offset: 1,
       limit: 100,
-      action: 11064,
+      action: apiConst.WRENCHBOARD_ACCOUNT_REFFERHX,
     };
     return this.postAuxEnd("/refferhx", postData);
   }
@@ -573,7 +597,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 5031,
+      action: apiConst.WRENCHBOARD_MOBILE_UPDATEPROFILE,
       ...post,
     };
     return this.postAuxEnd("/updateprofile", postData);
@@ -618,6 +642,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 0,
       limit: 100,
+      action: apiConst.WRENCHBOARD_FAMILY_UPDATE,
       ...reqdata,
     };
     return this.postAuxEnd("/familyupdate", postData);
@@ -653,10 +678,10 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: Number(localStorage.getItem("member_id")),
       sessionid: localStorage.getItem("session_token"),
-      action: 11061,
+      action: apiConst.WRENCHBOARD_ACCOUNT_TOPUP_RESULT,
       ...post,
     };
-    console.log("topupresult", postData);
+    // console.log("topupresult", postData);
     return this.postAuxEnd("/topupresult", postData);
   }
 
@@ -666,17 +691,26 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11032,
+      action: apiConst.WRENCHBOARD_ACCOUNT_SENDREFER,
       ...postData,
     };
     return this.postAuxEnd("/sendreferral", reqData);
   }
 
-  StartResetPassword(reqData) {
+  StartResetPassword(postData) {
+    var reqData = {
+      action: apiConst.WRENCHBOARD_RESET_PASSWORD,
+      ...postData,
+    };
     return this.postAuxEnd("/startresetpasword", reqData);
   }
 
-  CompleteResetPassword(reqData) {
+  CompleteResetPassword(postData) {
+    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
+      action: apiConst.WRENCHBOARD_COMPLETE_PASSWORDRESET,
+      ...postData,
+    };
     return this.postAuxEnd("/stepresetpass", reqData);
   }
 
@@ -685,7 +719,7 @@ class usersService {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 85020,
+      action: apiConst.WRENCHBOARD_COUPON_REDEEM,
       ...reqData,
     };
     return this.postAuxEnd("/couponredeem", postData);
@@ -702,7 +736,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11183,
+      action: apiConst.WRENCHBOARD_ACCOUNT_COUNTRY_BANKS,
       ...value,
     };
     return this.postAuxEnd("/countrybanks", postData);
@@ -714,7 +748,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11177,
+      action: apiConst.WRENCHBOARD_ACCOUNT_ACCOUNT_TYPES,
     };
     return this.postAuxEnd("/accounttypes", postData);
   }
@@ -726,7 +760,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       msg_type: "JOB",
-      action: 13033,
+      action: apiConst.WRENCHBOARD_JOB_SEND_INTEREST,
       ...reqData,
     };
     return this.postAuxEnd("/marketinterest", postData);
@@ -738,7 +772,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       msg_type: "JOB",
-      action: 13036,
+      action: apiConst.WRENCHBOARD_JOB_SEND_QUESTION,
       ...reqData,
     };
     return this.postAuxEnd("/marketmessage", postData);
@@ -750,7 +784,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13002,
+      action: apiConst.WRENCHBOARD_JOB_POSTAGREE,
     };
     return this.postAuxEnd("/jobmanageragree", postData);
   }
@@ -761,7 +795,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanagercreatejob", postData);
@@ -772,7 +806,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanagerupdatejob", postData);
@@ -784,7 +818,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       extend_days: 7,
-      action: 13041,
+      action: apiConst.WRENCHBOARD_JOB_EXTEND_EXPIRE,
       ...reqData,
     };
     return this.postAuxEnd("/pendingjobextend", postData);
@@ -796,7 +830,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       mode: 200,
-      action: 13042,
+      action: apiConst.WRENCHBOARD_JOB_RESEND_MESSAGE,
       ...reqData,
     };
     return this.postAuxEnd("/pendingjobsendtome", postData);
@@ -807,7 +841,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13043,
+      action: apiConst.WRENCHBOARD_JOB_CANCEL_OFFER,
       ...reqData,
     };
     return this.postAuxEnd("/pendingjobcancel", postData);
@@ -820,7 +854,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
-      action: 14011,
+      action: apiConst.WRENCHBOARD_CONTRACT_MSGLIST,
       offset: 0,
       ...reqData,
     };
@@ -833,7 +867,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14010,
+      action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
       ...reqData,
     };
     return this.postAuxEnd("/sendtaskmessage", postData);
@@ -845,10 +879,10 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14010,
+      action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
       ...reqData,
     };
-    
+
     const formData = new FormData();
     for (let data in postData) {
       formData.append(data, postData[data]);
@@ -863,7 +897,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13011,
+      action: apiConst.WRENCHBOARD_JOB_DELETEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanagerdeletejob", postData);
@@ -872,7 +906,7 @@ class usersService {
   verifyEmail(code) {
     const reqData = {
       verify_link: code,
-      action: 11015,
+      action: apiConst.WRENCHBOARD_VERIFY_PENDING_LINK,
     };
     return this.postAuxEnd("/verifysignuplink", reqData);
   }
@@ -883,7 +917,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 15012,
+      action: apiConst.WRENCHBOARD_MOBILE_OFFERSRESP,
       ...reqData,
     };
     return this.postAuxEnd("/offersresponse", postData);
@@ -895,7 +929,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13024,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_INTLIST,
       limit: 30,
       offset: 0,
     };
@@ -908,7 +942,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13034,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_INTLIST,
       ...reqData,
     };
     return this.postAuxEnd("/offersinterestproc", postData);
@@ -920,7 +954,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14015,
+      action: apiConst.WRENCHBOARD_CONTRACT_STATUS,
       ...reqData,
     };
     return this.postAuxEnd("/activetaskstatus", postData);
@@ -932,7 +966,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14015,
+      action: apiConst.WRENCHBOARD_CONTRACT_STATUS,
       ...reqData,
     };
     return this.postAuxEnd("/activejobstatus", postData);
@@ -953,7 +987,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 11205,
+      action: apiConst.WRENCHBOARD_ACCOUNT_NOTIFICATIONS,
     };
     return this.postAuxEnd("/mynotifications", postData);
   }
@@ -964,7 +998,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11055,
+      action: apiConst.WRENCHBOARD_USER_CARDLIST,
     };
     return this.postAuxEnd("/paylistcard", postData);
   }
@@ -975,7 +1009,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13037,
+      action: apiConst.WRENCHBOARD_JOB_MRKTINT_QUEST,
       ...reqData,
     };
     return this.postAuxEnd("/offerinterestmsg", postData);
@@ -987,7 +1021,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13037,
+      action: apiConst.WRENCHBOARD_JOB_MRKTINT_QUEST,
       ...reqData,
     };
     return this.postAuxEnd("/offerinterestlistmsg", postData);
@@ -1009,7 +1043,9 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      ...reqData,
+      limit: 20,
+      offset: 0,
+      action: apiConst.WRENCHBOARD_FAMILY_LIST,
     };
     return this.postAuxEnd("/familylist", postData);
   }
@@ -1020,7 +1056,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13025,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
       ...reqData,
     };
     return this.postAuxEnd("/assigntask", postData);
@@ -1034,7 +1070,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
     };
     return this.postAuxEnd("/familysuggestlist", postData);
   }
@@ -1045,7 +1081,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11005,
+      action: apiConst.WRENCHBOARD_PROFILE_RESETPASS,
       ...reqData,
     };
     return this.postAuxEnd("/profilepasschange", postData);
@@ -1057,7 +1093,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11059,
+      action: apiConst.WRENCHBOARD_GETUSER_SETTINGS,
     };
     return this.postAuxEnd("/getaccsettings", postData);
   }
@@ -1068,7 +1104,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11058,
+      action: apiConst.WRENCHBOARD_USER_SETTINGS,
       ...reqdata,
     };
     return this.postAuxEnd("/setaccsettings", postData);
@@ -1080,7 +1116,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11057,
+      action: apiConst.WRENCHBOARD_USER_CARDREMV,
       ...reqData,
     };
     return this.postAuxEnd("/payremcard", postData);
@@ -1093,7 +1129,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 11202,
+      action: apiConst.WRENCHBOARD_ACCOUNT_RECENTS,
     };
     return this.postAuxEnd("/recentactivities", postData);
   }
@@ -1115,7 +1151,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22026,
+      action: apiConst.WRENCHBOARD_FAMILY_SGGESTSTATUS,
       ...reqData,
     };
     return this.postAuxEnd("/suggeststatus", postData);
@@ -1127,7 +1163,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22012,
+      action: apiConst.WRENCHBOARD_FAMILY_WALLET,
       ...reqData,
     };
     return this.postAuxEnd("/familywallet", postData);
@@ -1155,40 +1191,39 @@ class usersService {
     return this.postAuxEnd("/familytransfer", postData);
   }
 
+  // FUNCTION GET JOB GROUP LIST
+  jobGroupList(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_JOB_JOBGROUPS,
+      ...reqData,
+    };
+    return this.postAuxEnd("/jobgrouplist", postData);
+  }
 
-    // FUNCTION GET JOB GROUP LIST
-    jobGroupList(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        action: 13045,
-        ...reqData,
-      };
-      return this.postAuxEnd("/jobgrouplist", postData);
-    }
+  // FUNCTION TO ADD JOB GROUP
+  jobGroupAdd(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/jobgroupadd", postData);
+  }
 
-    // FUNCTION TO ADD JOB GROUP
-    jobGroupAdd(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        ...reqData,
-      };
-      return this.postAuxEnd("/jobgroupadd", postData);
-    }
-
-    // FUNCTION TO ADD JOB GROUP MEMBER
-    groupMemberAdd(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        ...reqData,
-      };
-      return this.postAuxEnd("/groupmemberadd", postData);
-    }
+  // FUNCTION TO ADD JOB GROUP MEMBER
+  groupMemberAdd(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/groupmemberadd", postData);
+  }
 
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)

src/views/ForgotPasswordPagesTwo.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ForgotPassword from "../components/AuthPages/ForgotPassword/index2";
+
+export default function ForgotPasswordPagesTwo() {
+  return (
+    <>
+      <ForgotPassword />
+    </>
+  );
+}

src/views/LoginPageTwo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Login from "../components/AuthPages/Login/index2";
+
+function LoginPageTwo() {
+  return (
+    <>
+      <Login />
+    </>
+  );
+}
+
+export default LoginPageTwo;

src/views/SignupPageTwo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import SignUp from "../components/AuthPages/SignUp/index2";
+
+function SignupPageTwo() {
+  return (
+    <>
+      <SignUp />
+    </>
+  );
+}
+
+export default SignupPageTwo;

src/views/UpdatePasswordPagesTwo.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import UpdatePassword from "../components/AuthPages/UpdatePassword/index2";
+
+export default function UpdatePasswordPagesTwo() {
+  return (
+    <>
+      <UpdatePassword />
+    </>
+  );
+}

src/views/VerifyLinkPagesTwo.jsx

@@ -0,0 +1,5 @@
+import VerifyLink from "../components/AuthPages/VerifyLink/index2";
+
+export default function VerifyLinkPagesTwo() {
+  return <VerifyLink />;
+}

src/views/VerifyPasswordPagesTwo.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import VerifyPassword from "../components/AuthPages/VerifyPassword/index2";
+
+export default function VerifyPasswordPagesTwo() {
+  return <VerifyPassword />;
+}

src/views/VerifyYouPagesTwo.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import VerifyYou from "../components/AuthPages/VerifyYou/index2";
+
+export default function VerifyYouPagesTwo() {
+  return <VerifyYou />;
+}