Merge branch 'master' of into implement-sign-up-page

src/Routers.jsx

@@ -22,7 +22,7 @@ import UpdatePasswordPages from "./views/UpdatePasswordPages";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
-
+import VerifyLinkPages from "./views/VerifyLinkPages";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -30,7 +30,6 @@ import ResourcePage from "./views/ResourcePage";
 import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
-import VerifyLinkPages from "./views/VerifyLinkPages";
 
 export default function Routers() {
   return (
@@ -49,8 +48,9 @@ export default function Routers() {
           path="/update-password"
           element={<UpdatePasswordPages />}
         />
-        <Route path="/vemail" element={<VerifyLinkPages />} />
+        <Route exact path="/verify-you" element={<VerifyYouPages />} />
-        <Route exact path="/outmessage" element={<VerifyYouPages />} />
+        <Route exact path="/verify-link" element={<VerifyLinkPages />} />
+        <Route path={`/vemail?`} element={<VerifyLinkPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -11,7 +11,6 @@ export default function ForgotPassword() {
   // email
   const [email, setMail] = useState("");
   const [msgError, setMsgError] = useState('');
-  const [msgSuccess, setMsgSuccess] = useState(false)
 
   const navigate = useNavigate();
   const userApi = new usersService();
@@ -21,8 +20,8 @@ export default function ForgotPassword() {
   };
 
   const humanChecker = () => {
-    setValue(!checked)
+    setValue(!checked);
-  }
+  };
 
   const resetHandler = async () => {
     if (email == '') {
@@ -31,16 +30,24 @@ export default function ForgotPassword() {
       setMsgError('Check if you are human')
     }
 
-    if (email !== '' && checked) {
+    if (email != '' && checked) {
       const reqData = { email }
       setResetLoading(true)
       try {
         const res = await userApi.StartResetPassword(reqData)
         if (res.status === 200) {
-          setMsgSuccess(true)
+          const { data } = res
+          if (data.status == -1) {
+            setMsgError('This is an incorrect or duplicate email')
+            setResetLoading(false)
+          } else if (data.status > 0) {
+            setResetLoading(false)
+            navigate("/verify-you", { replace: true })
+          } else{
+            setMsgError("reset was not successful")
+            setResetLoading(false)
+          }
           setMail("")
-          setValue(false)
-          setResetLoading(false)
         }
       } catch (error) {
         setResetLoading(false)
@@ -72,10 +79,12 @@ export default function ForgotPassword() {
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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 flex-col justify-center w-full h-full px-5">
               <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]">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                  fontSize: 'calc(1rem + .6vw)'
+                }}>
                   Forget Password
                 </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Enter your email to reset your password.</span>
+                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-10">
@@ -89,6 +98,7 @@ export default function ForgotPassword() {
                     iconName="message"
                   />
                 </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]">{msgError}</div>}
                 {/* hCaptha clone for the time being */}
                 <div className="mb-10">
                   <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
@@ -98,7 +108,7 @@ export default function ForgotPassword() {
                         <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} />
+                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
                             </div>
                           </div>
                         </div>
@@ -116,15 +126,12 @@ export default function ForgotPassword() {
                     </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>}
-                {msgSuccess && <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">If we find your email, you will receive a link to reset your password. Please use or <Link to='/contact' className="text-[#4687ba] hover:text-[#009ef7]">contact form</Link> if you did not get our message after few minutes.</div>}
-
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center items-center gap-2">
                     <button
                       type="button"
                       onClick={resetHandler}
-                      className={`rounded-[0.475rem] 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]`}
+                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] 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>
@@ -135,7 +142,7 @@ export default function ForgotPassword() {
                     <button
                       type="button"
                       onClick={() => navigate("/login")}
-                      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.8125rem] `}
+                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] 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.8125rem] `}
                     >
                       Cancel
                     </button>

src/components/AuthPages/Login/index.jsx

@@ -67,6 +67,7 @@ export default function Login() {
           setLoginLoading(true);
           // userApi.getUserReminders(); //testing
           setTimeout(() => {
+            toast.success("Login Successfully");
             navigate("/", { replace: true });
             setLoginLoading(false);
           }, 2000);
@@ -96,13 +97,15 @@ export default function Login() {
               <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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="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">
             <div className="w-full">
               <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]">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                  fontSize: 'calc(1rem + .6vw)'
+                }}>
                   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>
+                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-5">
@@ -116,7 +119,6 @@ export default function Login() {
                     iconName="message"
                   />
                 </div>
-
                 <div className="input-item mb-5">
                   <InputCom
                     value={password}
@@ -162,14 +164,15 @@ export default function Login() {
                   Forgot Password
                 </a>
               </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>}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">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>}
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center">
                     <button
                       onClick={doLogin}
                       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]`}
+                      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 ${loginLoading ? "active" : ""
+                        }`}
                     >
                       {loginLoading ? (
                         <div className="signup btn-loader"></div>
@@ -190,7 +193,7 @@ export default function Login() {
                   </a>
                 </p>
               </div> */}
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
               </div>
             </div>
           </div>
@@ -212,8 +215,8 @@ const BrandBtn = ({
         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]">
+        <span className="text-lg text-thin-light-gray font-normal">
-          Continue with {brand}
+          Sign In with {brand}
         </span>
       </a>
     </div>

src/components/AuthPages/SignUp/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
@@ -6,10 +6,10 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 
 export default function SignUp() {
-  const [signUpLoading, setSignUpLoading] = useState(false);
+  const [signUpLoading, setSignUpLoading] = useState(false)
   const [checked, setValue] = useState(false);
   // for the catch error
-  const [msgError, setMsgError] = useState("");
+  const [msgError, setMsgError] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [countries, setCountries] = useState([]);
 
@@ -18,7 +18,7 @@ export default function SignUp() {
     first_name: "",
     last_name: "",
     email: "",
-    password: "",
+    password: ""
   });
 
   const handleInputChange = (event) => {
@@ -39,36 +39,31 @@ export default function SignUp() {
   const userApi = new usersService();
 
   // Get Country Api
-  const getCountryList = useCallback(async () => {
+  const getCountryList = async () => {
-    const res = await userApi.getSignupCountryData();
+    const res = await userApi.getSignupCountryData()
 
     try {
       if (res.status === 200) {
-        const { signup_country } = await res.data;
+        const { signup_country } = await res.data
-        setCountries(signup_country);
+        setCountries(signup_country)
-      } else if (res.data.result !== 100) {
+      } else if (res.data.result != 100) {
-        setCountries("Nothing see here!");
+        setCountries('Nothing see here!')
       }
     } catch (error) {
-      throw new Error(error);
+      throw new Error(error)
     }
-  }, []);
+  }
 
   const handleSignUp = async () => {
-    let { country, first_name, last_name, email, password } = formData;
+    let { country, first_name, last_name, email, password } = formData
 
-    if (email === "" && password === "" && first_name === "") {
+    if (email == '' && password == '' && first_name == '') {
-      setMsgError("Please fill in fields");
+      setMsgError('Please fill in fields')
     }
 
     try {
-      if (
+      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
-        email !== "" &&
+        setSignUpLoading(true)
-        password !== "" &&
-        first_name !== "" &&
-        last_name !== ""
-      ) {
-        setSignUpLoading(true);
         const reqData = {
           country: country,
           firstname: first_name,
@@ -77,40 +72,44 @@ export default function SignUp() {
           username: email,
           password: password,
           terms: 1,
-          news: 1,
+          news: 1
-        };
+        }
 
-        const res = await userApi.CreateUser(reqData);
+        const res = await userApi.CreateUser(reqData)
 
         if (res.status === 200) {
-          const { data } = res;
+          const { data } = res
-          if (data.status === -1 && data.acc === "DULPICATE") {
+          if (data.status == -1 && data.acc == 'DULPICATE') {
-            setMsgError("This account has been already created");
+            setMsgError('This account has been already created')
-            setSignUpLoading(false);
+            setSignUpLoading(false)
           }
-          if (data && data.status === "1") {
+          if (data && data.status == 1) {
             setTimeout(() => {
-              navigate("/outmessage", { replace: true });
+              navigate("/verify-you", { replace: true });
-              setSignUpLoading(false);
+              setSignUpLoading(false)
-            }, 2000);
+            }, 2000)
+          } else {
+            setSignUpLoading(false)
+
           }
         } else {
-          setSignUpLoading(false);
+          setMsgError('This account does not exist')
-          setMsgError("An error occurred");
+          setSignUpLoading(false)
         }
       }
     } catch (error) {
-      throw new Error(error);
+      throw new Error(error)
+      setMsgError('An error occurred')
     } finally {
       setTimeout(() => {
-        setMsgError(null);
+        setMsgError(null)
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
     }
-  };
+  }
 
   useEffect(() => {
-    getCountryList();
+    getCountryList()
-  });
+  }, [])
 
   return (
     <>
@@ -119,52 +118,36 @@ export default function SignUp() {
           <div className=" h-full">
             <div className="flex-1 flex justify-center items-center">
               <div className="w-full">
-                <div className="mb-12">
+                <div className='mb-12'>
-                  <Link to="#">
+                  <Link to='#'>
-                    <img
+                    <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
-                      src={WrenchBoard}
-                      alt="wrenchboard"
-                      className="h-10 mx-auto"
-                    />
                   </Link>
                 </div>
                 <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] 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 mb-7">
                   <div>
                     <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]">
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                        fontSize: 'calc(1rem + .6vw)'
+                      }}>
                         Create Account
                       </h1>
-                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
-                        Already have an account?{" "}
-                        <Link
-                          to="/login"
-                          className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                        >
-                          Sign in here
-                        </Link>
-                      </span>
                     </div>
                     <button
                       type="button"
-                      className={`rounded-[0.475rem] w-full mb-6 text-[15px] h-[42px] 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.8125rem]`}
+                      className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] 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.8125rem]`}
                     >
-                      <img
+                      <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
-                        className="mr-3 h-6"
-                        src={facebookLogo}
-                        alt="logo-icon(s)"
-                      />
                       Sign in with Facebook
                     </button>
                     <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%]">
+                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">OR</span>
-                        OR
-                      </span>
                       <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
                     </div>
                     <div className="input-area">
                       <SelectOption
-                        label="Country"
+                        label='Country'
                         data={countries}
                         name="country"
                         value={formData.country}
@@ -207,20 +190,14 @@ export default function SignUp() {
                           placeholder="● ● ● ● ● ●"
                           label="Password"
                           name="password"
-                          type={showPassword ? "text" : "password"}
+                          type={showPassword ? 'text' : 'password'}
                           onClick={togglePasswordVisibility}
-                          passIcon={
+                          passIcon={showPassword ? "show-password" : "hide-password"}
-                            showPassword ? "show-password" : "hide-password"
-                          }
                           value={formData.password}
                           inputHandler={handleInputChange}
                         />
                       </div>
-                      {msgError && (
+                      {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
-                        <div className="relative 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">
                           <button
@@ -245,15 +222,15 @@ export default function SignUp() {
                           </button>
                           <span
                             onClick={rememberMe}
-                            className="cursor-default text-dark-gray dark:text-white text-[15px]"
+                            className="text-base cursor-default text-dark-gray dark:text-white"
                           >
                             I agree with all
-                            <Link
+                            <a
                               href="#"
                               className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
                             >
                               terms and condition
-                            </Link>
+                            </a>
                           </span>
                         </div>
                       </div>
@@ -262,7 +239,7 @@ export default function SignUp() {
                           <button
                             type="button"
                             onClick={handleSignUp}
-                            className={`rounded-[0.475rem] 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]`}
+                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem]`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>
@@ -289,35 +266,26 @@ const SelectOption = ({
   name,
   inputHandler,
   value,
-  data, // passing the data from parent
+  data // passing the data from parent 
 }) => {
   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"
+          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       </div>
       <div>
-        <select
+        <select name={name} id={name} className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] 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}>
-          name={name}
-          id={name}
-          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] 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}
-        >
           <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
+          {data?.length > 0 && data?.map((item, idx) => (
-            data?.map((item, idx) => (
+            <option value={item[0]} key={idx}>{item[1]}</option>
-              <option value={item[0]} key={idx}>
+          ))}
-                {item[1]}
-              </option>
-            ))}
         </select>
       </div>
     </div>
-  );
+  )
-};
+}

src/components/AuthPages/VerifyLink/index.jsx

@@ -1,190 +1,97 @@
-import { useState, useLayoutEffect, useCallback } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
-import debounce from "../../../hooks/debounce";
 
 export default function VerifyLink() {
-  const [email, setEmail] = useState("");
+  const [pageLoader, setPageLoader] = useState(true)
-  const [password, setPassword] = useState("");
+  const [linkSuccess, setLinkSuccess] = useState(false)
-  const [msgError, setMsgError] = useState("");
+  const [linkError, setLinkError] = useState(false)
-  const [linkLoader, setLinkLoader] = useState(false);
+  const navigate = useNavigate()
-  const [pageLoader, setPageLoader] = useState(true);
-  const [linkSuccess, setLinkSuccess] = useState(true);
-  const navigate = useNavigate();
   const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search);
+  const queryParams = new URLSearchParams(location?.search)
-  const token = queryParams.get("vlnk");
+  const token = queryParams.get('vlink')
-  const userApi = new usersService();
 
-  // email
+  const verifyEmail = useCallback(
-  const handleEmail = (e) => {
+    async (code) => {
-    setEmail(e.target.value);
+      const userApi = new usersService()
-  };
-  // password
-  const handlePassword = (e) => {
-    setPassword(e.target.value);
-  };
 
-  // for verifying the incoming verification link and render the correct component
+      try {
-  const verifyEmail = useCallback(async (code) => {
+        const verifyRes = await userApi.verifyEmail(code)
-    try {
+        console.log(verifyRes)
-      const verifyRes = await userApi.verifyEmail(code);
+        if (verifyRes.status === 200) {
-      if (verifyRes.status === 200) {
+          let { data } = verifyRes
-        let { data } = verifyRes;
 
-        if (
+          if (data && data.internal_return === 0 && data.status_text == 'Link Verfied') {
-          data &&
+            setPageLoader(false)
-          data.internal_return >= 0 &&
+            setLinkSuccess(true)
-          data.status_text === "Link Verfied"
-        ) {
-          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);
-
-  // if verification is okay. set a complete signup form
-  const completeSignup = async () => {
-    if (email === "" && password === "") {
-      setMsgError("Please fill in fields");
-    }
-
-    try {
-      if (email !== "" && password !== "") {
-        setLinkLoader(true);
-        var postData = {
-          username: email,
-          password: password,
-          login_mode: 100,
-          sessionid: "STARTER-NOTREAL",
-          verify_link: token,
-          action: 11012,
-        };
-        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("added", `${data?.added}`);
-            localStorage.setItem("city", `${data?.city}`);
-            localStorage.setItem("country", `${data?.country}`);
-            localStorage.setItem("firstname", `${data?.firstname}`);
-            localStorage.setItem("last_login", `${data?.last_login}`);
-            localStorage.setItem("lastname", `${data?.lastname}`);
-            localStorage.setItem("state", `${data?.state}`);
-            localStorage.setItem("zip_code", `${data?.zip_code}`);
-            localStorage.setItem("session", `${data?.session}`);
-
-            navigate("/", { replace: true });
-            setLinkLoader(false);
           } else {
-            setLinkLoader(false);
+            setPageLoader(false)
-            setMsgError("Invalid Link or Password Combination");
+            setLinkError(true)
           }
-        } else {
-          setLinkLoader(false);
-          setLinkSuccess(false)
-          setMsgError("An error occurred");
         }
+      } catch (error) {
+        console.log(error)
+        setPageLoader(false)
+        setLinkError(true)
+        throw new Error(error)
       }
-    } catch (error) {
+    }, [linkSuccess, linkError]
-      setLinkLoader(false);
+  )
-      setLinkSuccess(false)
-      throw new Error(error);
-    } finally {
-      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
-    }
-  };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
-    debouncedEmail(token);
+    verifyEmail(token)
-  });
+  }, [])
+
+  console.log(token)
 
   return (
     <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
         {pageLoader ? (
           <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
         ) : (
           <div className="w-full">
-            <div className="mb-12">
+            <div className='mb-12'>
-              <Link to="#">
+              <Link to='#'>
-                <img
+                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
-                  src={WrenchBoard}
-                  alt="wrenchboard"
-                  className="h-10 mx-auto"
-                />
               </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">
               <div className="w-full">
                 <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]">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                    {linkSuccess
+                    fontSize: 'calc(1rem + .6vw)'
-                      ? "Sign In to WrenchBoard"
+                  }}>
-                      : "Invalid verification link"}
+                    {linkError && 'Invalid verification link'}
+                    {linkSuccess && 'Sign In to WrenchBoard'}
                   </h1>
                 </div>
                 {/* If the verification was a success */}
-                {linkSuccess ? (
+                {linkSuccess && <SuccessfulComponent />}
-                  <SuccessfulComponent
+
-                    email={email}
+                {/* If the verification was unsuccessful */}
-                    password={password}
+                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
-                    handleEmail={handleEmail}
-                    handlePassword={handlePassword}
-                    onSubmit={completeSignup}
-                    msgErr={msgError}
-                    loader={linkLoader}
-                  />
-                ) : (
-                  <ErrorComponent onClick={() => navigate("/login")} />
-                )}
               </div>
             </div>
           </div>
         )}
       </AuthLayout>
     </>
-  );
+  )
 }
 
-const SuccessfulComponent = ({
+const SuccessfulComponent = ({ onClick }) => (
-  onSubmit,
-  password,
-  handlePassword,
-  email,
-  handleEmail,
-  msgErr,
-  loader,
-}) => (
   <div className="input-area">
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        value={email}
+        // value={password}
-        inputHandler={handleEmail}
+        // inputHandler={handlePassword}
         placeholder="support@mermsemr.com"
         label="Email"
         name="email"
@@ -194,8 +101,8 @@ const SuccessfulComponent = ({
     </div>
     <div className="mb-5">
       <InputCom
-        value={password}
+        // value={password}
-        inputHandler={handlePassword}
+        // inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
         name="password"
@@ -203,34 +110,23 @@ const SuccessfulComponent = ({
         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}
+        onClick={onClick}
         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]`}
+        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 $`}
       >
-        {loader ? (
+        <span>Continue</span>
-          <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
+        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.
-        link has expired. Try login or reset password. If none worked, try to
-        create the account from the start.
       </p>
     </div>
 
@@ -238,10 +134,10 @@ const ErrorComponent = ({ onClick }) => (
       <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]`}
+        className={`rounded-[0.475rem] mb-6 text-[1.15rem] 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/VerifyYou/index.jsx

@@ -1,49 +1,32 @@
-import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png"
+import InputCom from "../../Helpers/Inputs/InputCom";
 
 export default function VerifyYou() {
-  const navigate = useNavigate()
   return (
     <>
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="w-full">
+        <div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center sm:p-7 p-5">
-          <div className='mb-12'>
+          <div className="w-full">
-            <Link to='#'>
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+              <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-            </Link>
+                fontSize: 'calc(1rem + .6vw)'
-          </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">
+                Verification Sent
-            <div className="w-full">
+              </h1>
-              <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 className="input-area">
+              <div className="mb-5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
+                </p>
+              </div>
+              <div className="mb-5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
+                </p>
+              </div>
             </div>
           </div>
         </div>

src/components/Cards/HomeBannerOffersCard.jsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import localImgLoad from "../../lib/localImgLoad";
-
-export default function HomeBannerOffersCard(props) {
-    return (
-        <Link
-            to="/my-collection/collection-item"
-            className="item w-full block group banner-630-340"
-        >
-            <div className="flex flex-col justify-between h-full">
-                <div className="content flex justify-between items-center mb-5">
-                    <div>
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                            <>Ab hshsh jsjsj hshdhhdjjd</>
-                        </h1>
-                    </div>
-                    {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
-                </div>
-                <div className="h-[233px]">
-                    BEST IMAGE IN THE WORLLD
-                </div>
-            </div>
-        </Link>
-    );
-}

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -14,81 +14,83 @@ export default function InputCom({
   forgotPassword,
   onClick,
   disable,
-  blurHandler
+  blurHandler,
 }) {
   const inputRef = useRef(null)
   // Entry Validation
   // for Min Length:
   const minLengthValidation = () => {
-    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+    if (inputRef && inputRef?.current && inputRef?.current?.name == 'email') {
       return 7
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'first_name') {
       return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'last_name') {
       return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'address') {
       return 5
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'password') {
       return 8
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'state') {
       return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'province') {
       return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'city') {
       return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'amount') {
       return 1
     }
   }
 
   // for MaxLength
   const maxLengthValidation = () => {
-    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+    if (inputRef && inputRef?.current && inputRef?.current?.name == 'email') {
       return 35
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'first_name') {
       return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'last_name') {
       return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'address') {
       return 49
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'password') {
       return 15
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'state') {
       return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'province') {
       return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'city') {
       return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'amount') {
       return 9  
     }
   }
+
+  console.log(inputRef.current?.name, inputRef.current?.minLength)
   return (
     <div className="input-com">
       <div className="flex items-center justify-between">
-      {label && (
+        {label && (
-        <label
+          <label
-          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
+            className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
-          htmlFor={name}
+            htmlFor={name}
-        >
+          >
-          {label}
+            {label}
-        </label>
+          </label>
-      )}
+        )}
-      {forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
+        {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
       </div>
       <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] 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 ">
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}
+          readOnly={disable}
           minLength={minLengthValidation()}
           maxLength={maxLengthValidation()}
           ref={inputRef}
-          readOnly={disable}
           onBlur={blurHandler}
         />
         {iconName && (

src/components/Home/HomeSliders.jsx

@@ -2,7 +2,6 @@ import SliderCom from "../Helpers/SliderCom";
 import slider1 from "../../assets/images/slider-1.jpg";
 import slider2 from "../../assets/images/slider-2.jpg";
 import slider3 from "../../assets/images/slider-3.jpg";
-import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";
 
 
 export default function HomeSliders(props) {
@@ -21,8 +20,8 @@ export default function HomeSliders(props) {
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider3} alt="slider" className="w-full h-full" />
                         </div>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        <div className="item w-full h-full bg-red dark:bg-dark-white   rounded-2xl overflow-hidden">
-                           <HomeBannerOffersCard />
+Olusesan Ameye Data
                         </div>
                     </SliderCom>
                 </div>

src/components/MyJobs/index.jsx

@@ -4,12 +4,11 @@ import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 
-export default function MyJobs(props) {
+export default function MyJobs() {
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
     };
-    console.log("AMEYE LOC1", props.MyJobList);
     return (
         <Layout>
             <CommonHead />
@@ -33,7 +32,7 @@ export default function MyJobs(props) {
                         </div>
                     </div>
                     </div>
-                    <MyJobTable MyJobList={props.MyJobList} />
+                    <MyJobTable />
                 </div>
             </div>
         </Layout>

src/components/MyWallet/AddRecipient.jsx

@@ -1,76 +1,13 @@
 import React, {useEffect, useState} from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import Icons from '../Helpers/Icons'
 import usersService from '../../services/UsersService'
-import InputCom from '../Helpers/Inputs/InputCom'
-
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import {toast} from 'react-toastify'
-
-import {Formik, Form} from 'formik'
-import * as Yup from 'yup'
-
-
-const validationSchema = Yup.object().shape({
-    firstname: Yup.string()
-      .min(3, 'Minimum 3 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('Firstname is required'),
-    lastname: Yup.string()
-      .min(3, 'Minimum 3 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('Lastname is required'),
-    country: Yup.string()
-      .min(1, 'Minimum 1 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('Country is required'),
-    bank: Yup.string()
-      .min(3, 'Minimum 3 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('Bank name is required'),
-    accountNumber: Yup.string()
-    .matches(/\d/, "must be a number")
-    .min(3, 'Minimum 3 characters')
-    .max(25, 'Maximum 25 characters')
-    .required('Account Number is required'),
-    repeatAccountNumber: Yup.string()
-    .required('Repeat Account Number is required')
-    .oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
-    accountType: Yup.string()
-      .min(1, 'Minimum 3 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('Account Type is required'),
-    city: Yup.string()
-      .min(3, 'Minimum 3 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('City is required'),
-    state: Yup.string()
-      .min(3, 'Minimum 3 characters')
-      .max(25, 'Maximum 25 characters')
-      .required('State is required'),
-  })
-  
-  const initialValues = {
-    firstname: '',
-    lastname: '',
-    country: '',
-    bank: '',
-    accountNumber: '',
-    repeatAccountNumber: '',
-    accountType: '',
-    state: '',
-    city: ''
-  }
 
 function AddRecipient() {
 
     const apiURL = new usersService()
 
-    const navigate = useNavigate()
+    let [countries, setCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
-
-    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
-
-    let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
         loading: true,
         data: []
     })
@@ -80,51 +17,60 @@ function AddRecipient() {
         data: []
     })
 
-    let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
+    let [accountType, setAccountType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
         loading: true,
         data: []
     })
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        firstname: '',
+        lastname: '',
+        country: '',
+        'bank-name': '',
+        'account-number': '',
+        'repeat-account-number': '',
+        'account-type': '',
+        state: '',
+        city: ''
+    })
 
-    //FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
+    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleSubmit = (values, helpers) => {
+    const handleChange = ({target:{name, value}}) => {
-        setRequestStatus({message: '', loading: true, status: false})
+        setInputs(prev => ({...prev, [name]:value}))
-
-        let reqData = { //REQUEST DATA FOR API CALL
-            firstname: values.firstname,
-            lastname: values.lastname,
-            bank_code: values.bank,
-            account_no: values.accountNumber,
-            account_type: values.accountType,
-            country: values.country,
-            state: values.state,
-            city: values.city
-        }
-
-        //CALL TO ADD RECIPIENT API
-        apiURL.addRecipient(reqData).then((res)=>{
-            if(res.data.internal_return < 0){
-                setRequestStatus({message: 'could not add recipient, try again!', loading: false, status: true})
-                return
-            }
-            // setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
-            toast.success("Recipient Added Successfully!");
-            setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
-        }).catch((error)=>{
-            setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
-        })    
     }
 
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+    
+       
+        // RETURN INPUTS TO EMPTY STRING
+        setInputs({
+            firstname: '',
+            lastname: '',
+            country: '',
+            'bank-name': '',
+            'account-number': '',
+            'repeat-account-number': '',
+            'account-type': '',
+            state: '',
+            city: ''
+        })
+    }
 
     // FUNCTION TO GET COUNTRIES
     const getCountry = ()=> { 
         apiURL.getSignupCountryData().then((res)=>{
             if(res.data.internal_return < 0){
-                setAllCountries(prev => ({loading: false, data: []}))
+                setCountries(prev => ({loading: false, data: []}))
                 return
             }
-            setAllCountries(prev => ({loading: false, data:res.data.signup_country}))
+            setCountries(prev => ({loading: false, data:res.data.signup_country}))
         }).catch((error)=>{
-            setAllCountries(prev => ({loading: false, data: []}))
+            setCountries(prev => ({loading: false, data: []}))
         })
     }
     // END OF FUNCTION TO GET COUNTRIES
@@ -147,12 +93,12 @@ function AddRecipient() {
     const getAccountTypes = ()=> { 
         apiURL.getAccountTypes().then((res)=>{
             if(res.data.internal_return < 0){
-                setAccType(prev => ({loading: false, data: []}))
+                setAccountType(prev => ({loading: false, data: []}))
                 return
             }
-            setAccType(prev => ({loading: false, data:res.data.result_list}))
+            setAccountType(prev => ({loading: false, data:res.data.result_list}))
         }).catch((error)=>{
-            setAccType(prev => ({loading: false, data: []}))
+            setAccountType(prev => ({loading: false, data: []}))
         })
     }
     // END OF FUNCTION TO GET ACCOUNT TYPES
@@ -167,199 +113,148 @@ function AddRecipient() {
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
             <div className="w-full mb-10 lg:mb-0">
                 <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-                    <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
+                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
-                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                   <form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
-                        {(props)=>(
+                        
-                        <Form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]'>
+                        {/* inputs starts here */}
-                                
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                {/* inputs starts here */}
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
-                                {/* firstname */}
+                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                <div className="xl:flex xl:space-x-7 mb-6">
+                                value={inputs.firstname} 
-                                    <div className="field w-full mb-6 xl:mb-0">
+                                name='firstname' 
-                                    <InputCom
+                                type="text" 
-                                        label="Firstname"
+                                placeholder='Account Firstname' 
-                                        type="text"
+                                required
-                                        name="firstname"
+                                onChange={handleChange}
-                                        placeholder="Account Firstname"
+                                />
-                                        value={props.values.firstname}
+                        </div>
-                                        inputHandler={props.handleChange}
-                                        blurHandler={props.handleBlur}
-                                    />
-                                    {(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
-                                    </div>
 
-                                    {/* lastname */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                    <div className="field w-full">
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
-                                    <InputCom
+                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                        label="Lastname"
+                                value={inputs.lastname} 
-                                        type="text"
+                                name='lastname' 
-                                        name="lastname"
+                                type="text" 
-                                        placeholder="Account Lastname"
+                                placeholder='Account Lastname' 
-                                        value={props.values.lastname}
+                                required
-                                        inputHandler={props.handleChange}
+                                onChange={handleChange}
-                                        blurHandler={props.handleBlur}
+                                />
-                                    />
+                        </div>
-                                    {(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
-                                    </div>
-                                </div>
 
-                                
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                <div className="xl:flex xl:space-x-7 mb-6">
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
-                                    {/* country */}
+                            <select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
-                                    <div className='add-recipient w-full mb-6 xl:mb-0'>
+                                {countries.loading ?
-                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Country <span className='text-red-500'>*</span></label>
+                                <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='country' 
+                                :
-                                        value={props.values.country}
+                                countries.data.length ?
-                                        onChange={props.handleChange}
+                                <>
-                                        onBlur={props.handleBlur}
+                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                        >
+                                    {countries.data.map((item, index)=>(
-                                            {allCountries.loading ?
+                                        <option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
-                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
+                                    ))}
-                                            :
+                                </>
-                                            allCountries.data.length ?
+                                :
-                                            <>
+                                <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                                }
-                                                {allCountries.data.map((item, index)=>(
+                            </select>
-                                                    <option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
+                        </div>
-                                                ))}
-                                            </>
-                                            :
-                                            <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                            }
-                                        </select>
-                                        {(props.errors.country && props.touched.country) && <p className="text-sm text-red-500">{props.errors.country}</p>}
-                                    </div>
-                                    
-                                    {/* bank name */}
-                                    <div className='add-recipient w-full'>
-                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
-                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank' 
-                                        value={props.values.bank}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                        >
-                                        {bankName.loading ?
-                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                            :
-                                            bankName.data.length ?
-                                            <>
-                                                <option className='text-slate-500 text-lg' value="">Select...</option>
-                                                {bankName.data.map((item, index)=>(
-                                                    <option key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
-                                                ))}
-                                            </>
-                                            :
-                                            <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                            }
-                                        </select>
-                                        {(props.errors.bank && props.touched.bank) && <p className="text-sm text-red-500">{props.errors.bank}</p>}
-                                    </div>
-                                </div>
 
-                                {/* ACCOUNT NUMBER */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                <div className="xl:flex xl:space-x-7 mb-6">
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
-                                    <div className="field w-full mb-6 xl:mb-0">
+                            <select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
-                                    <InputCom
+                            {bankName.loading ?
-                                        label="Account Number"
+                                <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                        type="text"
+                                :
-                                        name="accountNumber"
+                                bankName.data.length ?
-                                        placeholder="Account No"
+                                <>
-                                        value={props.values.accountNumber}
+                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                        inputHandler={props.handleChange}
+                                    {bankName.data.map((item, index)=>(
-                                        blurHandler={props.handleBlur}
+                                        <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
-                                    />
+                                    ))}
-                                    {(props.errors.accountNumber && props.touched.accountNumber) && <p className="text-sm text-red-500">{props.errors.accountNumber}</p>}
+                                </>
-                                    </div>
+                                :
+                                <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
+                                }
+                            </select>
+                        </div>
 
-                                    {/* REPEAT ACCT. NUMBER */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                    <div className="field w-full">
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
-                                    <InputCom
+                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                        label="Repeat Account Number"
+                                value={inputs['account-number']} 
-                                        type="text"
+                                name='account-number' 
-                                        name="repeatAccountNumber"
+                                type="text" 
-                                        placeholder="Repeat Account Number"
+                                placeholder='Account No' 
-                                        value={props.values.repeatAccountNumber}
+                                required
-                                        inputHandler={props.handleChange}
+                                onChange={handleChange}
-                                        blurHandler={props.handleBlur}
+                                />
-                                    />
+                        </div>
-                                    {(props.errors.repeatAccountNumber && props.touched.repeatAccountNumber) && <p className="text-sm text-red-500">{props.errors.repeatAccountNumber}</p>}
-                                    </div>
-                                </div>
 
-                                <div className="xl:flex xl:space-x-7 mb-6">
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                    {/* Account Type */}
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
-                                    <div className='add-recipient w-full'>
+                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Account Type <span className='text-red-500'>*</span></label>
+                                value={inputs['repeat-account-number']} 
-                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='accountType' 
+                                name='repeat-account-number' 
-                                        value={props.values.accountType}
+                                type="text" 
-                                        onChange={props.handleChange}
+                                placeholder='Repeat Account No' 
-                                        onBlur={props.handleBlur}
+                                required
-                                        >
+                                onChange={handleChange}
-                                            {accType.loading ?
+                                />
-                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
+                        </div>
-                                            :
-                                            accType.data.length ?
-                                            <>
-                                                <option className='text-slate-500 text-lg' value="">Select...</option>
-                                                {accType.data.map((item, index)=>(
-                                                    <option key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
-                                                ))}
-                                            </>
-                                            :
-                                            <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                            }
-                                        </select>
-                                        {(props.errors.accountType && props.touched.accountType) && <p className="text-sm text-red-500">{props.errors.accountType}</p>}
-                                    </div>
-                                </div>
 
-                                {/* state */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                <div className="xl:flex xl:space-x-7 mb-6">
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
-                                    <div className="field w-full mb-6 xl:mb-0">
+                            <select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
-                                    <InputCom
+                            {accountType.loading ?
-                                        label="State"
+                                <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                        type="text"
+                                :
-                                        name="state"
+                                accountType.data.length ?
-                                        placeholder="State/Province"
+                                <>
-                                        value={props.values.state}
+                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                        inputHandler={props.handleChange}
+                                    {accountType.data.map((item, index)=>(
-                                        blurHandler={props.handleBlur}
+                                        <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
-                                    />
+                                    ))}
-                                    {(props.errors.state && props.touched.state) && <p className="text-sm text-red-500">{props.errors.state}</p>}
+                                </>
-                                    </div>
+                                :
+                                <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
+                                }
+                            </select>
+                        </div>
 
-                                    {/* city */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                    <div className="field w-full">
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
-                                    <InputCom
+                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                        label="City"
+                                value={inputs.state} 
-                                        type="text"
+                                name='state' 
-                                        name="city"
+                                type="text" 
-                                        placeholder="City"
+                                placeholder='State' 
-                                        value={props.values.city}
+                                required
-                                        inputHandler={props.handleChange}
+                                onChange={handleChange}
-                                        blurHandler={props.handleBlur}
+                                />
-                                    />
+                        </div>
-                                    {(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
-                                    </div>
-                                </div>
-                                {/* end of inputs starts here */}
 
-                                {/* REQUEST ERROR DISPLAY */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
-                                {requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.city} 
+                                name='city' 
+                                type="text" 
+                                placeholder='City' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
 
-                                <div className='add-recipient-btn flex justify-end items-center py-4'>
+                        {/* end of inputs starts here */}
-                                    {requestStatus.loading ? 
+
-                                    <LoadingSpinner size={6} color='sky-blue' />
+                        <div className='add-recipient-btn flex justify-end items-center py-4'>
-                                    :
+                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
-                                    <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
+                                <span className='pr-2'>ADD RECIPIENT</span>
-                                        <span className='pr-2'>ADD RECIPIENT</span>
+                                <Icons name="arrows" />
-                                        <Icons name="arrows" />
+                            </button>
-                                    </button>
+                        </div>
-                                    }
+                   </form>
-                                </div>
-                        </Form>
-                        )}
-                   </Formik>
                 </div>
             </div>
 

src/components/MyWallet/Balance.jsx

@@ -31,11 +31,11 @@ function Balance({wallet, payment, coupon, purchase}) {
                                 </div>
                                 <div className='balance-info'>
                                     <p className='py-2'>balance</p>
-                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
+                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*1).toFixed(2)}</span>
                                 </div>
                                 <div className='balance-info'>
                                     <p className='py-2'>Escrow</p>
-                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
+                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*1).toFixed(2)}</span>
                                 </div>
                             </div>
 

src/components/MyWallet/ConfirmTransfer.jsx

@@ -1,165 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import {useLocation, useNavigate} from 'react-router-dom'
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import InputCom from '../Helpers/Inputs/InputCom'
-import {toast} from 'react-toastify'
-
-import usersService from '../../services/UsersService'
-
-function ConfirmTransfer({payment, wallet}) {
-    const apiURL = new usersService()
-
-    const navigate = useNavigate()
-    
-    let {state} = useLocation()
-    // what happens if not state redirect user
-    if(!state){
-        navigate('../transfer-fund',{replace: true})
-    }
-
-    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
-    let [pageLoading, setPageLoading] = useState(true)
-
-    //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = () => {
-        setRequestStatus({message: '', loading: true, status: false})
-        let reqData = {
-            amount: Number(state.amount),
-            Fee: Number(state.fee),
-            recipientid: Number(state.recipientID)
-        }
-        apiURL.sendMoney(reqData).then((res)=>{
-            if(res.data.internal_return < 0){
-                setRequestStatus({message: 'Could not perform transaction', loading: false, status: false})
-                return
-            }
-            setRequestStatus({message: 'transfer successful', loading: false, status: true})
-            toast.success('Transfer sucessful')
-            setTimeout(()=>{
-                navigate('/', {replace: true})
-            }, 1000)
-        }).catch(error=>{
-            setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
-        })
-    }
-
-    useEffect(()=>{
-        setPageLoading(false)
-    },[])
-    return (
-        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-            {pageLoading ? 
-                <LoadingSpinner size='8' color='sky-blue' />
-            :
-                (
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-                        <div className='px-4 md:px-8 py-4'>
-                            {wallet.loading ?
-                                <LoadingSpinner size='8' color='sky-blue' />
-                                :
-                                wallet.data.length ? 
-                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>
-                                {wallet.data.map(item => {
-                                    if(item.description == 'Naira'){
-                                        return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
-                                    }
-                                })}
-                                </h2>
-                                :
-                                wallet.error ? 
-                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>Opps! An Error Occured</h2>
-                                :
-                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>No Wallet Information Found!</h2>
-                            }
-                        </div>
-                        <hr />
-                        <div className='px-4 md:px-8 py-4 add-fund-info'>
-                                <h2 className='my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium'>Confirm Withdraw to Account</h2>
-                                {/* AMOUNT */}
-                                <div className="field w-full mb-3">
-                                    <InputCom
-                                        label="Amount:"
-                                        type="text"
-                                        name="amount"
-                                        value={state?.amount || ''}
-                                        disable={true}
-                                    />
-                                </div>
-
-                                {/* RECIPIENT ACC: */}
-                                <div className="field w-full mb-3">
-                                    <InputCom
-                                        label="Recipient Acc:"
-                                        type="text"
-                                        name="recipient"
-                                        value={state?.details.recipient || ''}
-                                        disable={true}
-                                    />
-                                </div>
-
-                                {/* PROCESSING FEE: */}
-                                <div className="field w-full mb-3">
-                                    <InputCom
-                                        label="Processing Fee:"
-                                        type="text"
-                                        name="processingFee"
-                                        value={state?.fee || ''}
-                                        disable={true}
-                                    />
-                                </div>
-
-                                {/* TOTAL */}
-                                <div className="field w-full mb-3">
-                                    <InputCom
-                                        label="Total"
-                                        type="text"
-                                        name="total"
-                                        value={state?.total || ''}
-                                        disable={true}
-                                    />
-                                </div>
-
-                                {/* COMMENT/NOTE */}
-                                <div className="field w-full mb-3">
-                                    <InputCom
-                                        label="Comment/Note:"
-                                        type="text"
-                                        name="comment"
-                                        value={state?.comment || ''}
-                                        disable={true}
-                                    />
-                                </div>
-                        </div>
-
-                        <hr />
-                        {requestStatus.message && <p className={`text-base ${requestStatus.status? 'text-green-500' : 'text-red-500'} px-4 md:px-8 py-4`}>{requestStatus.message}</p>}
-                        <div className='px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center'>
-                            {requestStatus.loading ? 
-                            <LoadingSpinner size='8' color='sky-blue' />
-                            :
-                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Transfer</button>
-                            }
-                        </div>
-                    </div>
-                </div>
-                )
-            }
-    
-            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
-                    {payment.loading ?
-                    <LoadingSpinner size='16' color='sky-blue' />
-                    :
-                    <RecentActivityTable  payment={payment}/>
-                    }
-                </div>
-            </div>
-        </div>
-      )
-}
-
-export default ConfirmTransfer

src/components/MyWallet/TransferFund.jsx

@@ -1,48 +1,29 @@
 import React, {useEffect, useState} from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
-import InputCom from '../Helpers/Inputs/InputCom'
 
 import usersService from '../../services/UsersService'
 
-import {toast} from 'react-toastify'
-
-import {Formik, Form} from 'formik'
-import * as Yup from 'yup'
-
-const validationSchema = Yup.object().shape({
-    amount: Yup.number()
-    .typeError("you must specify a number")
-    .min(1, 'Amount must be greater than 0')
-    .required('Amount is required'),
-    recipientID: Yup.string()
-      .min(1, 'Minimum 1 characters')
-      .max(50, 'Maximum 50 characters')
-      .required('Recipient is required'),
-  })
-  
-  const initialValues = {
-    amount: '',
-    recipientID: '',
-    comment: '',
-  }
-
 function TransferFund({payment, wallet}) {
-    const apiCall = new usersService() // API CLASS CALL
+    const apiCall = new usersService()
 
-    const navigate = useNavigate()
+    let [newFee, setNewFee] = useState(false)
 
-    let [requestStatus, setRequestStatus] = useState(false)
+    let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
-
-    let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
         loading: true,
         data: [],
         error: false
     })
 
-    let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
+    let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
 
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        amount: '0',
+        recipient: '',
+        comment: ''
+    })
 
     //FUNCTION TO GET RECIPIENT LIST
     const getRecipients = ()=>{
@@ -58,172 +39,158 @@ function TransferFund({payment, wallet}) {
     }
 
     //FUNCTION TO GET SEND MONEY FEE
-    const getSendMoneyFee = ({target:{value}})=>{
+    const getSendMoneyFee = ()=>{
-        setSendMoneyFee({loading: true, fee: 0, total: 0})
+        let {amount} = inputs
-        let amount = value
         if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
-            setSendMoneyFee({loading: false, fee: 0, total: 0})
+            setSendMoneyFee({fee: 0, total: 0})
             return
         }
         apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
-            setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
+            setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
         }).catch((error)=>{
-            setSendMoneyFee({loading: false, fee: 0, total: 0})
+            setSendMoneyFee({fee: 0, total: 0})
         })
     }
 
 
-    //FUNCTION TO HANDLE SUBMIT
+    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleSubmit = (values, helpers) => {
+    const handleChange = ({target:{name, value}}) => {
-        setRequestStatus(true)
+        setInputs(prev => ({...prev, [name]:value}))
-        let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
+    }
-        let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
 
-        setTimeout(()=>{
+    //FUNCTION TO HANDLE SUBMIT
-            setRequestStatus(false)
+    const handleSubmit = (e) => {
-            navigate('confirm-transfer', {state: stateData})
+        e.preventDefault();
-        }, 1000)
+
+        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
+    
+        setInputs({
+            amount: '0',
+            recipient: '',
+            comment: ''
+        })
     }
 
     useEffect(()=>{
         getRecipients()
-    },[])
+        getSendMoneyFee()
+    },[newFee])
     return (
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
-                        {(props)=>{
+                        {wallet.loading ?
-                        return (
+                        <LoadingSpinner size='8' color='sky-blue' />
-                            <Form className='transfer-fund-info'>
+                        :
-                                    {wallet.loading ?
+                        wallet.data.length ? 
-                                    <LoadingSpinner size='8' color='sky-blue' />
+                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
-                                    :
+                        {wallet.data.map(item => {
-                                    wallet.data.length ? 
+                            if(item.description == 'Naira'){
-                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
+                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
-                                    {wallet.data.map(item => {
+                            }
-                                        if(item.description == 'Naira'){
+                        })}
-                                            return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
+                        </h2>
-                                        }
+                        :
-                                    })}
+                        wallet.error ? 
-                                    </h2>
+                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
-                                    :
+                        :
-                                    wallet.error ? 
+                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
-                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
+                        }
-                                    :
+                        <div className='my-3 md:flex items-center justify-between space-x-2'>
-                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.amount} 
+                                    name='amount' 
+                                    type="text" 
+                                    placeholder='Amount' 
+                                    required
+                                    onChange={handleChange}
+                                    onMouseEnter={()=>{setNewFee(false)}}
+                                    onMouseLeave={()=>{setNewFee(true)}}
+                                    />
+                            </div>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={sendMoneyFee.fee} 
+                                    name='fee' 
+                                    type="text" 
+                                    placeholder='Fee' 
+                                    required
+                                    disabled
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='my-3 md:flex items-center justify-end space-x-2'>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={sendMoneyFee.total} 
+                                    name='total' 
+                                    type="text" 
+                                    placeholder='Total' 
+                                    required
+                                    disabled
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='relative my-3 md:flex items-center'>
+                            <div className='transfer-input w-full'>
+                                <div className='flex items-center justify-start'>
+                                    <label className='text-slate-600 text-lg'>Recipient 
+                                        <span className='text-red-500 mx-2'>*</span> 
+                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
+                                    </label>
+                                    <Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                </div>
+                                <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
+                                    {recepients.loading ?
+                                     <option className='text-slate-500 text-lg' value="">Loading...</option>
+                                     :
+                                     recepients.data.length ?
+                                     <> 
+                                     <option className='text-slate-500 text-lg' value="">Select...</option>
+                                     {recepients.data.map((item, index)=>(
+                                        <option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
+                                     ))}
+                                     </>
+                                     :
+                                     recepients.error ?
+                                     <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
+                                     :
+                                     <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
                                     }
-                                    <div className="xl:flex xl:space-x-7 mb-6">
+                                </select>
+                            </div>
+                        </div>
 
-                                        <div className="field w-full mb-6 xl:mb-0">
+                        <div className='my-3 md:flex items-center'>
-                                            <InputCom
+                            <div className='transfer-input w-full'>
-                                                label="Amount"
+                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
-                                                type="text"
+                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                                name="amount"
+                                    value={inputs.comment} 
-                                                placeholder='0'
+                                    name='comment' 
-                                                value={props.values.amount}
+                                    type="text" 
-                                                inputHandler={props.handleChange}
+                                    placeholder='Comment' 
-                                                blurHandler={(e)=>{
+                                    required
-                                                    getSendMoneyFee(e)
+                                    onChange={handleChange}
-                                                    props.handleBlur
+                                    />
-                                                }}
+                            </div>
-                                                // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
+                        </div>
-                                            />
-                                            {(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
-                                        </div>
-                                        
-                                        <div className="field w-full">
-                                            <InputCom
-                                                label="Fee"
-                                                type="text"
-                                                name="fee"
-                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.fee}
-                                                disable={true}
-                                            />
-                                        </div>
-                                    </div>
 
-                                    <div className='md:flex items-center justify-end'>
+                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
-                                        <div className="field w-full lg:w-1/2 mb-6">
+                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
-                                            <InputCom
+                        </div>
-                                                label="Total"
+                   </form>
-                                                type="text"
-                                                name="total"
-                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.total}
-                                                disable={true}
-                                            />
-                                        </div>
-                                    </div>
-                                    
-                                    <div className='w-full'>
-                                        <div className='relative my-3 md:flex items-center'>
-                                            <div className='transfer-input w-full'>
-                                                <div className='flex items-center justify-start py-2'>
-                                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
-                                                        <span className='text-red-500 mx-2'>*</span> 
-                                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
-                                                    </label>
-                                                    <Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
-                                                </div>
-                                                <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={props.values.recipientID} name='recipientID' onChange={props.handleChange} onBlur={props.handleBlur}>
-                                                    {recipients.loading ?
-                                                    <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                                    :
-                                                    recipients.data.length ?
-                                                    <> 
-                                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                                    {recipients.data.map((item, index)=>(
-                                                        <option key={index} value={item.recipient_id} className='text-slate-500 text-lg'>{item.recipient}</option>
-                                                    ))}
-                                                    </>
-                                                    :
-                                                    recipients.error ?
-                                                    <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
-                                                    :
-                                                    <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
-                                                    }
-                                                </select>
-                                            </div>
-                                        </div>
-                                        {(props.errors.recipientID && props.touched.recipientID) && <p className="text-sm text-red-500">{props.errors.recipientID}</p>}
-                                    </div>
-
-                                    <div className="field w-full mb-6">
-                                        {/* <InputCom
-                                            label="Comment"
-                                            type="text"
-                                            name="comment"
-                                            value={inputs.comment}
-                                            inputHandler={handleChange}
-                                        /> */}
-                                        <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
-                                        <textarea style={{resize: 'none'}}
-                                        className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none' 
-                                        name="comment" 
-                                        value={props.values.comment}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                        cols="30" 
-                                        rows="2"
-                                        />
-                                    </div>
-
-                                    <div className='transfer-fund-btn flex justify-end items-center py-4'>
-                                        {requestStatus ?
-                                        <LoadingSpinner size='8' color='sky-blue' />
-                                        :
-                                        <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
-                                        }
-                                    </div>
-                            </Form>
-                        )
-                        }}
-                   </Formik>
                 </div>
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                     <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
                     {payment.loading ?

src/components/MyWallet/Wallet.jsx

@@ -8,7 +8,6 @@ import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
 import AddRecipient from './AddRecipient'
-import ConfirmTransfer from './ConfirmTransfer'
 
 function Wallet() {
   return (
@@ -114,9 +113,8 @@ const WalletRoutes = () => {
                 <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
                 <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
                 <Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
-                <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
-                <Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
                 <Route path='*' element={<Navigate to='/' />} />
+                <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
             </Route>
         </Routes>
     )

src/components/MyWallet/WalletHeader.jsx

@@ -58,7 +58,7 @@ export default function WalletHeader(props) {
                                             </div>
                                             <div>
                                                 <p className="eth text-xl font-bold text-purple">
-                                                    {(value.amount*0.01).toFixed(2)} {value.code}
+                                                    {(value.amount*1).toFixed(2)} {value.code}
                                                 </p>
                                                 <p className="usd text-base text-thin-light-gray text-right">
                                                     {/*(773.69 USD)*/}

src/hooks/debounce.js

@@ -1,21 +0,0 @@
-/**
-
-Returns a debounced version of a given function, which means that it delays the execution of the function until a certain amount of time has passed without the function being called again. This can be useful for performance optimization, especially when dealing with expensive or resource-intensive functions that are called frequently.
-@param {Function} func - The function to debounce.
-@param {number} delay - The number of milliseconds to wait before executing the debounced function.
-@returns {Function} - The debounced version of the original function.
-*/
-
-export default function debounce(func, delay) {
-  let timeoutId;
-
-  return function (...args) {
-    const context = this;
-
-    clearTimeout(timeoutId);
-
-    timeoutId = setTimeout(() => {
-      func.apply(context, args);
-    }, delay);
-  };
-}

src/index.css

@@ -10,12 +10,6 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
-.banner-630-340{
-  width: 630px;
-  height: 340px;
-  background-color: aliceblue;
-}
-
 /* Bold italic Weight */
 @font-face {
   font-family: "Product Sans";

src/services/UsersService.js

@@ -6,17 +6,12 @@ class usersService {
         console.log("WRB Service Entry");
     }
 
-    CreateUser(reqData){
+    CreateUser(reqData) {
         localStorage.setItem("session_token", ``);
         return this.postAuxEnd("/createuser", reqData);
     }
 
-    CompleteSignUp(reqData){
+    getHomeDate() {
-        localStorage.setItem("session_token", ``);
-        return this.postAuxEnd("/completesignuplink", reqData);
-    }
-
-    getHomeDate(){
         var postData = {
             uuid: localStorage.getItem("uuid"),
             member_id: localStorage.getItem("member_id"),
@@ -36,8 +31,8 @@ class usersService {
         };
         return this.postAuxEnd("/getjobsdata", postData);
     }
-//
+    //
-    getUserBankList(reqData){
+    getUserBankList(reqData) {
         var postData = {
             uuid: localStorage.getItem("uuid"),
             member_id: localStorage.getItem("member_id"),
@@ -45,7 +40,7 @@ class usersService {
         };
         return this.postAuxEnd("/mybanklist", postData);
     }
-    getUserWallets(reqData){
+    getUserWallets(reqData) {
         var postData = {
             uuid: localStorage.getItem("uuid"),
             member_id: localStorage.getItem("member_id"),
@@ -53,50 +48,51 @@ class usersService {
         };
         return this.postAuxEnd("/getwallets", postData);
     }
-    getApiGate(){
+    getApiGate() {
         // localStorage.setItem("session_token", ``);
         return this.postAuxEnd("/apigate", null);
     }
 
-    getLoadProfile(){
+    getLoadProfile() {
         var postData = {
             uuid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:0,
+            page: 0,
-            limit :100
+            limit: 100
         };
         return this.postAuxEnd("/loadprofile", null);
     }
 
-    getOffersList(){
+    getOffersList() {
         var postData = {
             uuid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:0,
+            page: 0,
-            limit :100
+            limit: 100
         };
         return this.postAuxEnd("/offerslist", null);
     }
 
-    getPendingJob(){
+    getPendingJob() {
-        var postData = {
-        uuid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
-            page:0,
-            limit :100};
-        return this.postAuxEnd("/pendingjob", postData);
-    }
-
-    getActiveJobList(){
         var postData = {
             uuid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:0,
+            page: 0,
-            limit :100
+            limit: 100
+        };
+        return this.postAuxEnd("/pendingjob", postData);
+    }
+
+    getActiveJobList() {
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page: 0,
+            limit: 100
         };
         return this.postAuxEnd("/getjobsdata", postData);
     }
@@ -117,72 +113,60 @@ class usersService {
             uuid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:0,
+            page: 0,
-            offset:0,
+            limit: 100
-            limit :100
         };
-        return this.postAuxEnd("/jobmanagerlist", postData);
+        return this.postAuxEnd("/myjobs", postData);
     }
 
-    getGetPendingJobs(){
+    getGetPendingJobs() {
         var postData = {
             uuid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:0,
+            page: 0,
-            limit :100
+            limit: 100
         };
         return this.postAuxEnd("/getpendingjobs", postData);
     }
 
-    getUsersCards(){
+    getUsersCards() {
-              var postData = {
+        var postData = {
-        uuid: localStorage.getItem("uid"),
+            uuid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:0,
+            page: 0,
-            limit :100
+            limit: 100
-    };
+        };
         return this.postAuxEnd("/userscards", postData);
     }
 
-    getCouponPending(){
+    getCouponPending() {
-    var postData = {
+        var postData = {
-        uuid: localStorage.getItem("uid"),
+            uuid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+            member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+            sessionid: localStorage.getItem("session_token"),
-        page:0,
+            page: 0,
-        limit :100
+            limit: 100
-    };
+        };
         return this.postAuxEnd("/couponpending", postData);
     }
 
     // API FUNCTION TO GET COUPON HISTORY
-    getRecipient(){
+    getRecipient() {
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:1,
+            page: 1,
-            limit :20,
+            limit: 20,
             action: 11175
         };
         return this.postAuxEnd("/recipients", postData);
     }
 
-    //END POINT CALL FOR UPDATE PROFILE
-    addRecipient(data){
-        var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        ...data
-        };
-        return this.postAuxEnd("/addrecipient", postData);
-    }
-
     // API FUNCTION TO GET SEND MONEY FEE
-    getSendMoneyFee(amount){
+    getSendMoneyFee(amount) {
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
@@ -194,108 +178,95 @@ class usersService {
     }
 
     // API FUNCTION TO GET COUPON HISTORY
-    getCouponHx(){
+    getCouponHx() {
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:1,
+            page: 1,
-            limit :20,
+            limit: 20,
             action: 85025
         };
         return this.postAuxEnd("/couponhx", postData);
     }
 
-    getPurchaseHx(){
+    getPurchaseHx() {
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:1,
+            page: 1,
-            limit :20,
+            limit: 20,
             action: 15049
         };
         return this.postAuxEnd("/purchasehx", postData);
     }
 
     // API FUNCTION TO GET PAYMENT HISTORY
-    getPaymentHx(){
+    getPaymentHx() {
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            page:1,
+            page: 1,
-            limit :20,
+            limit: 20,
             action: 15046
         };
         return this.postAuxEnd("/paymenthx", postData);
     }
 
-    // API FUNCTION TO GET PAYMENT HISTORY
+    //END POINT CALL FOR REFERRAL HISTORY
-    sendMoney(reqData){
+    getReferralHx() {
         var postData = {
             uid: localStorage.getItem("uid"),
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
-            senderid: localStorage.getItem("member_id"),
+            offset: 1,
-            action: 33020,
+            limit: 100,
-            ...reqData
+            action: 11064
-        };
-        return this.postAuxEnd("/sendmoney", postData);
-    }
-    
-    //END POINT CALL FOR REFERRAL HISTORY
-    getReferralHx(){
-        var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        offset: 1,
-        limit :100,
-        action: 11064
         };
         return this.postAuxEnd("/refferhx", postData);
     }
 
     //END POINT CALL FOR UPDATE PROFILE
-    updateProfile(post){
+    updateProfile(post) {
         var postData = {
-        uid: localStorage.getItem("uid"),
+            uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+            member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+            sessionid: localStorage.getItem("session_token"),
-        action: 5031,
+            action: 5031,
-        ...post
+            ...post
         };
         return this.postAuxEnd("/updateprofile", postData);
     }
 
     //END POINT CALL FOR GETTING USER PROFILE
-    loadProfile(post){
+    loadProfile(post) {
         var postData = {
-        uid: localStorage.getItem("uid"),
+            uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+            member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+            sessionid: localStorage.getItem("session_token"),
         };
         return this.postAuxEnd("/loadprofile", postData);
     }
 
     //END POINT CALL FOR SENDING REFERRAL MESSAGE
-    sendReferralMsg(postData){
+    sendReferralMsg(postData) {
         return this.postAuxEnd("/sendreferral", postData);
     }
 
-    StartResetPassword(reqData){
+    StartResetPassword(reqData) {
         return this.postAuxEnd("/startresetpasword", reqData)
     }
 
-    getCouponRedeem(){
+    getCouponRedeem() {
-    var postData = {
+        var postData = {
-        uuid: localStorage.getItem("uid"),
+            uuid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+            member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+            sessionid: localStorage.getItem("session_token"),
-        page:0,
+            page: 0,
-        limit :100
+            limit: 100
-    };
+        };
         return this.postAuxEnd("/couponredeem", postData);
     }
 
@@ -327,14 +298,6 @@ class usersService {
         return this.postAuxEnd("/accounttypes", postData);
     }
 
-    verifyEmail(code) {
-        const reqData = {
-            verify_link: code,
-            action: 11015
-        }
-        return this.postAuxEnd("/verifysignuplink", reqData);
-    }
-
     /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)
@@ -382,9 +345,17 @@ class usersService {
 
     */
 
-    getUserReminders(){
+    getUserReminders() {
         return this.getAuxEnd("/reminders", null);
     }
+
+    verifyEmail(code) {
+        const reqData = {
+            verify_link: code,
+            action: 11015
+        }
+        return this.postAuxEnd("/verifysignuplink", reqData);
+    }
     //----------------------------------------  -----
     //----------------------------------------  -----
     // Unified call below
@@ -400,10 +371,11 @@ class usersService {
             }
         };
         const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
-        return Axios.get(endPoint,{
+        return Axios.get(endPoint, {
             params: {
                 reqData
-            }})
+            }
+        })
             .then((response) => {
                 console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
                 return response;
@@ -426,22 +398,22 @@ class usersService {
     postAuxEnd(uri, reqData) {
         const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
         const session_token = localStorage.getItem("session_token");
-       // session_token = session_token !=null ?session_token : '';
+        // session_token = session_token !=null ?session_token : '';
         //   'Authorization': `Basic ${(session_token !=null) ?session_token : ''}`,
         let axiosConfig = {
             headers: {
                 'Accept': 'application/json',
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
-                'Access-Control-Allow-Headers':'Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token',
+                'Access-Control-Allow-Headers': 'Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token',
                 'Content-Type': 'application/json;charset=UTF-8',
 
             }
         };
         //  Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
-   //     Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
+        //     Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
-   //     Axios.defaults.withCredentials = true;
+        //     Axios.defaults.withCredentials = true;
-//debugger;
+        //debugger;
         return Axios.post(endPoint, reqData)
             .then((response) => {
                 console.log(response);

src/views/MyJobsPage.jsx

@@ -24,10 +24,10 @@ export default function MyJobsPage() {
         getMyJobList();
     }, []);
 
-   // debugger;
+    debugger;
     return (
         <>
-            <MyJobs MyJobList={MyJobList} />
+            <MyJobs />
         </>
     );
 }

src/views/SignupPage.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import SignUp from "../components/AuthPages/SignUp";
 
 function SignupPage() {
+  
   return (
     <>
       <SignUp />

src/views/VerifyLinkPages.jsx

@@ -1,5 +1,7 @@
+import React from "react";
 import VerifyLink from "../components/AuthPages/VerifyLink";
 
-export default function VerifyLinkPages() {
+export default function VerifyYouPages() {
+  
   return <VerifyLink />;
 }

yarn.lock

@@ -4810,6 +4810,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"