removed height checker

src/Routers.jsx

@@ -50,7 +50,7 @@ export default function Routers() {
           element={<UpdatePasswordPages />}
         />
         <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route exact path="/outmessage" element={<VerifyYouPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>

src/components/AuthPages/AuthLayout.jsx

@@ -1,24 +1,35 @@
 import React from "react";
-import loginThumb from "../../assets/images/auth-thumb.svg";
-import logo from "../../assets/images/wrenchboard.png"; //logo-1.svg";
+import { Link } from "react-router-dom";
 
 export default function LoginLayout({ slogan, children }) {
-  const checkScreenHeight = window.screen.height;
-  let screen = "";
-  if (checkScreenHeight <= 950) {
-    screen = "h-screen";
-    // screen = "h-[950px]";
-  } else {
-    screen = "h-screen";
-  }
   return (
-    <div className="layout-wrapper login">
-      <div className={`main-wrapper login-wrapper w-full ${screen}`}>
-        <div className="flex w-full h-full">
-
+    <div className={`layout-wrapper login`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
+        <div className="w-full h-full">
           <div className="flex-1 flex justify-center items-center">
             {children && children}
           </div>
+          <div className="flex-1 flex justify-center items-center p-10">
+            <div className="flex items-center">
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                About
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Services
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Contact Us
+              </Link>
+            </div>
+          </div>
+          <div className="flex-1 flex justify-center items-center p-10">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center">
+             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+              <Link to="/" className="text-[#009ef7] ml-1">
+                WrenchBoard
+              </Link>{" "}
+            </p>
+          </div>
         </div>
       </div>
     </div>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -11,6 +11,7 @@ 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();
@@ -20,8 +21,8 @@ export default function ForgotPassword() {
   };
 
   const humanChecker = () => {
-    setValue(!checked);
-  };
+    setValue(!checked)
+  }
 
   const resetHandler = async () => {
     if (email == '') {
@@ -30,24 +31,16 @@ 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) {
-          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)
-          }
+          setMsgSuccess(true)
           setMail("")
+          setValue(false)
+          setResetLoading(false)
         }
       } catch (error) {
         setResetLoading(false)
@@ -79,12 +72,10 @@ 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" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Forget Password
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Enter your email to reset your password.</span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-10">
@@ -98,7 +89,6 @@ 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">
@@ -108,7 +98,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" onClick={humanChecker} />
+                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" checked={checked} onChange={humanChecker} />
                             </div>
                           </div>
                         </div>
@@ -126,12 +116,15 @@ 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-[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]`}
+                      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]`}
                     >
                       {resetLoading ? (
                         <div className="signup btn-loader"></div>
@@ -142,7 +135,7 @@ export default function ForgotPassword() {
                     <button
                       type="button"
                       onClick={() => navigate("/login")}
-                      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] `}
+                      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] `}
                     >
                       Cancel
                     </button>

src/components/AuthPages/Login/index.jsx

@@ -99,12 +99,10 @@ export default function Login() {
           <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="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" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">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-[16.25px] leading-[24.375px]">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-5">
@@ -118,7 +116,6 @@ export default function Login() {
                     iconName="message"
                   />
                 </div>
-    <input type="text" placeholder="boyce" />
 
                 <div className="input-item mb-5">
                   <InputCom
@@ -165,15 +162,14 @@ 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]">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]">{msgError}</div>}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">{msgError}</div>}
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center">
                     <button
                       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 ${loginLoading ? "active" : ""
-                        }`}
+                      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]`}
                     >
                       {loginLoading ? (
                         <div className="signup btn-loader"></div>
@@ -194,7 +190,7 @@ export default function Login() {
                   </a>
                 </p>
               </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 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>
             </div>
           </div>
@@ -216,8 +212,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">
-          Sign In with {brand}
+        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          Continue with {brand}
         </span>
       </a>
     </div>

src/components/AuthPages/SignUp/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, 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,31 +39,36 @@ export default function SignUp() {
   const userApi = new usersService();
 
   // Get Country Api
-  const getCountryList = async () => {
-    const res = await userApi.getSignupCountryData()
+  const getCountryList = useCallback(async () => {
+    const res = await userApi.getSignupCountryData();
 
     try {
       if (res.status === 200) {
-        const { signup_country } = await res.data
-        setCountries(signup_country)
+        const { signup_country } = await res.data;
+        setCountries(signup_country);
       } 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 === '') {
-      setMsgError('Please fill in fields')
+    if (email === "" && password === "" && first_name === "") {
+      setMsgError("Please fill in fields");
     }
 
     try {
-      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
-        setSignUpLoading(true)
+      if (
+        email !== "" &&
+        password !== "" &&
+        first_name !== "" &&
+        last_name !== ""
+      ) {
+        setSignUpLoading(true);
         const reqData = {
           country: country,
           firstname: first_name,
@@ -72,50 +77,40 @@ 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
-          if (data.status === -1 && data.acc === 'DULPICATE') {
-            setMsgError('This account has been already created')
-            setSignUpLoading(false)
+          const { data } = res;
+          if (data.status === -1 && data.acc === "DULPICATE") {
+            setMsgError("This account has been already created");
+            setSignUpLoading(false);
           }
-          if (data && data.status === '1') {
+          if (data && data.status === "1") {
             setTimeout(() => {
-              navigate("/verify-you", { replace: true });
-              setSignUpLoading(false)
-            }, 2000)
-          } else {
-            setSignUpLoading(false)
-            setMsgError('This account does not exist')
+              navigate("/outmessage", { replace: true });
+              setSignUpLoading(false);
+            }, 2000);
           }
         } else {
-          setSignUpLoading(false)
-          setMsgError('An error occurred')
+          setSignUpLoading(false);
+          setMsgError("An error occurred");
         }
       }
     } catch (error) {
-      throw new Error(error)
+      throw new Error(error);
     } finally {
       setTimeout(() => {
-        setMsgError(null)
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
-      setFormData({
-        first_name: '',
-        last_name: '',
-        email: '',
-        country: '',
-        password: ''
-      })
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
     }
-  }
+  };  
 
   useEffect(() => {
-    getCountryList()
-  })
+    getCountryList();
+  });
 
   return (
     <>
@@ -124,36 +119,52 @@ 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'>
-                  <Link to='#'>
-                    <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+                <div className="mb-12">
+                  <Link to="#">
+                    <img
+                      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" style={{
-                        fontSize: 'calc(1rem + .6vw)'
-                      }}>
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                         Create Account
                       </h1>
-                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        Already have an account?{" "}
+                        <Link
+                          to="/login"
+                          className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                        >
+                          Sign in here
+                        </Link>
+                      </span>
                     </div>
                     <button
                       type="button"
-                      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]`}
+                      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]`}
                     >
-                      <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
+                      <img
+                        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%]">OR</span>
+                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                        OR
+                      </span>
                       <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
                     </div>
                     <div className="input-area">
                       <SelectOption
-                        label='Country'
+                        label="Country"
                         data={countries}
                         name="country"
                         value={formData.country}
@@ -196,14 +207,20 @@ export default function SignUp() {
                           placeholder="● ● ● ● ● ●"
                           label="Password"
                           name="password"
-                          type={showPassword ? 'text' : 'password'}
+                          type={showPassword ? "text" : "password"}
                           onClick={togglePasswordVisibility}
-                          passIcon={showPassword ? "show-password" : "hide-password"}
+                          passIcon={
+                            showPassword ? "show-password" : "hide-password"
+                          }
                           value={formData.password}
                           inputHandler={handleInputChange}
                         />
                       </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>}
+                      {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="forgot-password-area flex justify-between items-center mb-6">
                         <div className="remember-checkbox flex items-center space-x-2.5">
                           <button
@@ -228,15 +245,15 @@ export default function SignUp() {
                           </button>
                           <span
                             onClick={rememberMe}
-                            className="text-base cursor-default text-dark-gray dark:text-white"
+                            className="cursor-default text-dark-gray dark:text-white text-[15px]"
                           >
                             I agree with all
-                            <a
+                            <Link
                               href="#"
                               className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
                             >
                               terms and condition
-                            </a>
+                            </Link>
                           </span>
                         </div>
                       </div>
@@ -245,8 +262,7 @@ export default function SignUp() {
                           <button
                             type="button"
                             onClick={handleSignUp}
-                            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 ? "active" : ""
-                              }`}
+                            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]`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>
@@ -261,6 +277,27 @@ export default function SignUp() {
                 </div>
               </div>
             </div>
+            <div className="flex-1 flex justify-center items-center p-10">
+            <div className="flex items-center">
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                About
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Services
+              </Link>
+              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
+                Contact Us
+              </Link>
+            </div>
+          </div>
+          <div className="flex-1 flex justify-center items-center p-10">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center">
+             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+              <Link to="/" className="text-[#009ef7] ml-1">
+                WrenchBoard
+              </Link>{" "}
+            </p>
+          </div>
           </div>
         </div>
       </div>
@@ -273,26 +310,35 @@ 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-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       </div>
       <div>
-        <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}>
+        <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}
+        >
           <option value={""}>Select your Country</option>
-          {data?.length > 0 && data?.map((item, idx) => (
-            <option value={item[0]} key={idx}>{item[1]}</option>
-          ))}
+          {data?.length > 0 &&
+            data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
+              </option>
+            ))}
         </select>
       </div>
     </div>
-  )
-}
+  );
+};

src/components/AuthPages/VerifyLink/index.jsx

@@ -3,94 +3,188 @@ 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 [pageLoader, setPageLoader] = useState(true)
-  const [linkSuccess, setLinkSuccess] = useState(false)
-  const [linkError, setLinkError] = useState(false)
-  const navigate = useNavigate()
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [pageLoader, setPageLoader] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(true);
+  const navigate = useNavigate();
   const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search)
-  const token = queryParams.get('vlink')
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("vlnk");
+  const userApi = new usersService();
 
-  const verifyEmail = useCallback(
-    async (code) => {
-      const userApi = new usersService()
-  
-      try {
-        const verifyRes = await userApi.verifyEmail(code)
-        if (verifyRes.status === 200) {
-          let { data } = verifyRes
-  
-          if (data && data.internal_return === 0 && data.status_text === 'Link Verfied') {
-            setPageLoader(false)
-            setLinkSuccess(true)
-          } else {
-            setPageLoader(false)
-            setLinkError(true)
-          }
-          console.log(data)
+  // email
+  const handleEmail = (e) => {
+    setEmail(e.target.value);
+  };
+  // password
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // for verifying the incoming verification link and render the correct component
+  const verifyEmail = useCallback(async (code) => {
+    try {
+      const verifyRes = await userApi.verifyEmail(code);
+      if (verifyRes.status === 200) {
+        let { data } = verifyRes;
+
+        if (
+          data &&
+          data.internal_return >= 0 &&
+          data.status_text === "Link Verfied"
+        ) {
+          setPageLoader(false);
+        } else {
+          setPageLoader(false);
+          setLinkSuccess(false);
         }
-      } catch (error) {
-        setPageLoader(false)
-        setLinkError(true)
-        throw new Error(error)
       }
-    }, []
-  )
+    } 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);
+            setMsgError("Invalid Link or Password Combination");
+          }
+        } else {
+          setLinkLoader(false);
+          setLinkSuccess(false)
+          setMsgError("An error occurred");
+        }
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false)
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
 
   useLayoutEffect(() => {
-    verifyEmail(token)
-  })
-
-  console.log(token)
+    debouncedEmail(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'>
-              <Link to='#'>
-                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            <div className="mb-12">
+              <Link to="#">
+                <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 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" style={{
-                    fontSize: 'calc(1rem + .6vw)'
-                  }}>
-                    {linkError && 'Invalid verification link'}
-                    {linkSuccess && 'Sign In to WrenchBoard'}
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    {linkSuccess
+                      ? "Sign In to WrenchBoard"
+                      : "Invalid verification link"}
                   </h1>
                 </div>
                 {/* If the verification was a success */}
-                {linkSuccess && <SuccessfulComponent />}
-
-                {/* If the verification was unsuccessful */}
-                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
+                {linkSuccess ? (
+                  <SuccessfulComponent
+                    email={email}
+                    password={password}
+                    handleEmail={handleEmail}
+                    handlePassword={handlePassword}
+                    onSubmit={completeSignup}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                  />
+                ) : (
+                  <ErrorComponent onClick={() => navigate("/login")} />
+                )}
               </div>
             </div>
           </div>
         )}
       </AuthLayout>
     </>
-  )
+  );
 }
 
-const SuccessfulComponent = ({ onClick }) => (
+const SuccessfulComponent = ({
+  onSubmit,
+  password,
+  handlePassword,
+  email,
+  handleEmail,
+  msgErr,
+  loader,
+}) => (
   <div className="input-area">
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        // value={password}
-        // inputHandler={handlePassword}
+        value={email}
+        inputHandler={handleEmail}
         placeholder="support@mermsemr.com"
         label="Email"
         name="email"
@@ -100,8 +194,8 @@ const SuccessfulComponent = ({ onClick }) => (
     </div>
     <div className="mb-5">
       <InputCom
-        // value={password}
-        // inputHandler={handlePassword}
+        value={password}
+        inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
         name="password"
@@ -109,35 +203,45 @@ const SuccessfulComponent = ({ onClick }) => (
         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={onClick}
+        onClick={onSubmit}
         type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center $`}
+        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]`}
       >
-        <span>Continue</span>
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
       </button>
     </div>
   </div>
-)
+);
 
 const ErrorComponent = ({ onClick }) => (
   <div className="input-area">
     <div className="my-5">
       <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
+        This error occurs because you have already verified this link or the
+        link has expired. Try login or reset password. If none worked, try to
+        create the account from the start.
       </p>
     </div>
 
-
     <div className="signin-area flex justify-center mb-3.5">
       <button
         onClick={onClick}
         type="button"
-        className={`rounded-[0.475rem] mb-6 text-[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]`}
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
       >
         <span>Return Home</span>
       </button>
     </div>
   </div>
-)
+);

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,31 +1,49 @@
+import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 
 export default function VerifyYou() {
+  const navigate = useNavigate()
   return (
     <>
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <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="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" style={{
-                fontSize: 'calc(1rem + .6vw)'
-              }}>
-                Verification Sent
-              </h1>
+        <div className="w-full">
+          <div className='mb-12'>
+            <Link to='#'>
+              <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 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]">
+                  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/Helpers/Inputs/InputCom/index.jsx

@@ -14,9 +14,7 @@ export default function InputCom({
   forgotPassword,
   onClick,
   disable,
-  blurHandler,
-  onMouseEnter,
-  onMouseLeave
+  blurHandler
 }) {
   const inputRef = useRef(null)
   // Entry Validation
@@ -70,20 +68,20 @@ export default function InputCom({
       <div className="flex items-center justify-between">
       {label && (
         <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       )}
-      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      {forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] 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 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"
+          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"
           type={type}
           id={name}
           name={name}
@@ -92,8 +90,6 @@ export default function InputCom({
           ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10">

src/components/MyWallet/AddRecipient.jsx

@@ -21,7 +21,7 @@ const validationSchema = Yup.object().shape({
       .max(25, 'Maximum 25 characters')
       .required('Lastname is required'),
     country: Yup.string()
-      .min(1, 'Minimum 3 characters')
+      .min(1, 'Minimum 1 characters')
       .max(25, 'Maximum 25 characters')
       .required('Country is required'),
     bank: Yup.string()

src/components/MyWallet/ConfirmTransfer.jsx

@@ -0,0 +1,134 @@
+import React, {useState} 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'
+
+function ConfirmTransfer({payment, wallet}) {
+    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})
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = () => {
+        // let [requestStatus, setRequestStatus] = useState({message: '', loading: true, status: false})
+
+        //valid inputs before submitting. Just for texting remove later
+     
+    }
+    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 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*1).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 />
+                    <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,30 +1,48 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } 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()
+    const apiCall = new usersService() // API CLASS CALL
 
-    let [newFee, setNewFee] = useState(false)
+    const navigate = useNavigate()
 
-    let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
+    let [requestStatus, setRequestStatus] = useState(false)
+
+    let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
         loading: true,
         data: [],
         error: false
     })
 
-    let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
+    let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, 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 = ()=>{
@@ -40,159 +58,172 @@ function TransferFund({payment, wallet}) {
     }
 
     //FUNCTION TO GET SEND MONEY FEE
-    const getSendMoneyFee = ()=>{
-        let {amount} = inputs
+    const getSendMoneyFee = ({target:{value}})=>{
+        setSendMoneyFee({loading: true, fee: 0, total: 0})
+        let amount = value
         if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
             return
         }
         apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
-            setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
+            setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
         }).catch((error)=>{
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
         })
     }
 
 
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
-
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
-        e.preventDefault();
+    const handleSubmit = (values, helpers) => {
+        setRequestStatus(true)
+        let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
+        let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
 
-        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
-    
-        setInputs({
-            amount: '0',
-            recipient: '',
-            comment: ''
-        })
+        setTimeout(()=>{
+            setRequestStatus(false)
+            navigate('confirm-transfer', {state: stateData})
+        }, 1000)
     }
 
     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">
-                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
-                        {wallet.loading ?
-                        <LoadingSpinner size='8' color='sky-blue' />
-                        :
-                        wallet.data.length ? 
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
-                        {wallet.data.map(item => {
-                            if(item.description == 'Naira'){
-                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
-                            }
-                        })}
-                        </h2>
-                        :
-                        wallet.error ? 
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
-                        :
-                        <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="xl:flex xl:space-x-7 mb-6">
-
-                            <div className="field w-full mb-6 xl:mb-0">
-                                <InputCom
-                                    label="Amount"
-                                    type="text"
-                                    name="amount"
-                                    value={inputs.amount}
-                                    inputHandler={handleChange}
-                                    onMouseEnter={()=>{setNewFee(false)}}
-                                    onMouseLeave={()=>{setNewFee(true)}}
-                                />
-                            </div>
-                            
-                            <div className="field w-full">
-                                <InputCom
-                                    label="Fee"
-                                    type="text"
-                                    name="fee"
-                                    value={sendMoneyFee.fee}
-                                    disable={true}
-                                />
-                            </div>
-                        </div>
-
-                        <div className='md:flex items-center justify-end'>
-                            <div className="field w-full lg:w-1/2 mb-6">
-                                <InputCom
-                                    label="Total"
-                                    type="text"
-                                    name="total"
-                                    value={sendMoneyFee.total}
-                                    disable={true}
-                                />
-                            </div>
-                        </div>
-
-                        <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={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>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                        {(props)=>{
+                        return (
+                            <Form className='transfer-fund-info'>
+                                    {wallet.loading ?
+                                    <LoadingSpinner size='8' color='sky-blue' />
+                                    :
+                                    wallet.data.length ? 
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
+                                    {wallet.data.map(item => {
+                                        if(item.description == 'Naira'){
+                                            return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
+                                        }
+                                    })}
+                                    </h2>
+                                    :
+                                    wallet.error ? 
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
+                                    :
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
                                     }
-                                </select>
-                            </div>
-                        </div>
+                                    <div className="xl:flex xl:space-x-7 mb-6">
 
-                        <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={inputs.comment}
-                            onChange={handleChange}
-                            cols="30" 
-                            rows="2"
-                            />
-                        </div>
+                                        <div className="field w-full mb-6 xl:mb-0">
+                                            <InputCom
+                                                label="Amount"
+                                                type="text"
+                                                name="amount"
+                                                placeholder='0'
+                                                value={props.values.amount}
+                                                inputHandler={props.handleChange}
+                                                blurHandler={(e)=>{
+                                                    getSendMoneyFee(e)
+                                                    props.handleBlur
+                                                }}
+                                                // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
+                                            />
+                                            {(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='transfer-fund-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'>Continue</button>
-                        </div>
-                   </form>
+                                    <div className='md:flex items-center justify-end'>
+                                        <div className="field w-full lg:w-1/2 mb-6">
+                                            <InputCom
+                                                label="Total"
+                                                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-[600px] 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-[800px] 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,6 +8,7 @@ import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
 import AddRecipient from './AddRecipient'
+import ConfirmTransfer from './ConfirmTransfer'
 
 function Wallet() {
   return (
@@ -113,8 +114,9 @@ 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='*' element={<Navigate to='/' />} />
                 <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>
         </Routes>
     )

src/hooks/debounce.js

@@ -0,0 +1,21 @@
+/**
+
+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/services/UsersService.js

@@ -11,6 +11,11 @@ class usersService {
         return this.postAuxEnd("/createuser", reqData);
     }
 
+    CompleteSignUp(reqData){
+        localStorage.setItem("session_token", ``);
+        return this.postAuxEnd("/completesignuplink", reqData);
+    }
+
     getHomeDate(){
         var postData = {
             uuid: localStorage.getItem("uuid"),