tranfer fund input validation done

src/Routers.jsx

@@ -30,6 +30,7 @@ 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 (
@@ -48,6 +49,7 @@ export default function Routers() {
           path="/update-password"
           element={<UpdatePasswordPages />}
         />
+        <Route path="/vemail" element={<VerifyLinkPages />} />
         <Route exact path="/verify-you" element={<VerifyYouPages />} />
 
         {/* private route */}

src/components/AuthPages/Login/index.jsx

@@ -67,7 +67,6 @@ export default function Login() {
           setLoginLoading(true);
           // userApi.getUserReminders(); //testing
           setTimeout(() => {
-            toast.success("Login Successfully");
             navigate("/", { replace: true });
             setLoginLoading(false);
           }, 2000);
@@ -119,6 +118,8 @@ export default function Login() {
                     iconName="message"
                   />
                 </div>
+    <input type="text" placeholder="boyce" />
+
                 <div className="input-item mb-5">
                   <InputCom
                     value={password}

src/components/AuthPages/SignUp/index.jsx

@@ -46,7 +46,7 @@ export default function SignUp() {
       if (res.status === 200) {
         const { signup_country } = await res.data
         setCountries(signup_country)
-      } else if (res.data.result != 100) {
+      } else if (res.data.result !== 100) {
         setCountries('Nothing see here!')
       }
     } catch (error) {
@@ -57,12 +57,13 @@ export default function SignUp() {
   const handleSignUp = async () => {
     let { country, first_name, last_name, email, password } = formData
 
-    if (email == '' && password == '' && first_name == '') {
+    if (email === '' && password === '' && first_name === '') {
       setMsgError('Please fill in fields')
     }
 
     try {
       if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
+        setSignUpLoading(true)
         const reqData = {
           country: country,
           firstname: first_name,
@@ -75,46 +76,46 @@ export default function SignUp() {
         }
 
         const res = await userApi.CreateUser(reqData)
-        setSignUpLoading(true)
 
         if (res.status === 200) {
           const { data } = res
-          if (data.status == -1 && data.acc == 'DULPICATE') {
+          if (data.status === -1 && data.acc === 'DULPICATE') {
             setMsgError('This account has been already created')
             setSignUpLoading(false)
           }
-          if (data.status > 0 && data.internal_return == 100 && data.session != '') {
+          if (data && data.status === '1') {
-            localStorage.setItem("email", `${data.email}`);
-            localStorage.setItem("country", `${data.country}`);
-            localStorage.setItem("firstname", `${data.firstname}`);
-            localStorage.setItem("lastname", `${data.lastname}`);
-
             setTimeout(() => {
-              navigate("/", { replace: true });
+              navigate("/verify-you", { replace: true });
               setSignUpLoading(false)
             }, 2000)
           } else {
-            setMsgError(data.status)
             setSignUpLoading(false)
+            setMsgError('This account does not exist')
           }
+        } else {
+          setSignUpLoading(false)
+          setMsgError('An error occurred')
         }
-      } else {
-        setMsgError('This account does not exist')
-        setSignUpLoading(false)
       }
     } catch (error) {
       throw new Error(error)
-      setMsgError('An error occurred')
     } finally {
       setTimeout(() => {
         setMsgError(null)
       }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
+      setFormData({
+        first_name: '',
+        last_name: '',
+        email: '',
+        country: '',
+        password: ''
+      })
     }
   }
 
   useEffect(() => {
     getCountryList()
-  }, [])
+  })
 
   return (
     <>

src/components/AuthPages/VerifyLink/index.jsx

@@ -0,0 +1,143 @@
+import { useState, useLayoutEffect, 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"
+
+export default function VerifyLink() {
+  const [pageLoader, setPageLoader] = useState(true)
+  const [linkSuccess, setLinkSuccess] = useState(false)
+  const [linkError, setLinkError] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search)
+  const token = queryParams.get('vlnk')
+
+  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)
+        }
+      } catch (error) {
+        setPageLoader(false)
+        setLinkError(true)
+        throw new Error(error)
+      }
+    }, []
+  )
+
+  useLayoutEffect(() => {
+    verifyEmail(token)
+  })
+
+  console.log(token)
+
+  return (
+    <>
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
+        {pageLoader ? (
+          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+        ) : (
+          <div className="w-full">
+            <div className='mb-12'>
+              <Link to='#'>
+                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+              </Link>
+            </div>
+            <div className="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>
+                </div>
+                {/* If the verification was a success */}
+                {linkSuccess && <SuccessfulComponent />}
+
+                {/* If the verification was unsuccessful */}
+                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
+              </div>
+            </div>
+          </div>
+        )}
+      </AuthLayout>
+    </>
+  )
+}
+
+const SuccessfulComponent = ({ onClick }) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        // value={password}
+        // inputHandler={handlePassword}
+        placeholder="support@mermsemr.com"
+        label="Email"
+        name="email"
+        type="email"
+        iconName="message"
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        // value={password}
+        // inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type="password"
+        iconName="password"
+      />
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        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 $`}
+      >
+        <span>Continue</span>
+      </button>
+    </div>
+  </div>
+)
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
+      </p>
+    </div>
+
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[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,7 +1,4 @@
-import React from "react";
-import titleShape from "../../../assets/images/shape/text-shape-three.svg";
 import AuthLayout from "../AuthLayout";
-import Otp from "./Otp";
 
 export default function VerifyYou() {
   return (
@@ -9,32 +6,24 @@ export default function VerifyYou() {
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper xl:bg-white dark:bg-dark-white   w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
+        <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>
+          <div className="w-full">
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+              <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                Verification Code
+                fontSize: 'calc(1rem + .6vw)'
+              }}>
+                Verification Sent
               </h1>
-              <div className="shape sm:w-[377px] w-[270px] -mt-5 ml-5">
-                <img src={titleShape} alt="shape" />
-              </div>
             </div>
             <div className="input-area">
-              <Otp />
+              <div className="mb-5">
-              <div className="signin-area mb-3.5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                <a
+                  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.
-                  href="/update-password"
+                </p>
-                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
-                >
-                  Continue
-                </a>
               </div>
-              <div className="resend-code flex justify-center">
+              <div className="mb-5">
-                <p className="text-lg text-thin-light-gray font-normal">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                  Dont’t have an aceount ?
+                  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.
-                  <a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
-                    Please resend
-                  </a>
                 </p>
               </div>
             </div>

src/components/Cards/HomeBannerOffersCard.jsx

@@ -0,0 +1,26 @@
+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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import Icons from "../../Icons";
 import { Link } from "react-router-dom";
 
@@ -15,7 +15,56 @@ export default function InputCom({
   onClick,
   disable,
   blurHandler,
+  onMouseEnter,
+  onMouseLeave
 }) {
+  const inputRef = useRef(null)
+  // Entry Validation
+  // for Min Length:
+  const minLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+      return 7
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+      return 5
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+      return 8
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+      return 1
+    }
+  }
+
+  // for MaxLength
+  const maxLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+      return 35
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+      return 49
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+      return 15
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+      return 9  
+    }
+  }
   return (
     <div className="input-com">
       <div className="flex items-center justify-between">
@@ -38,8 +87,12 @@ export default function InputCom({
           type={type}
           id={name}
           name={name}
+          minLength={minLengthValidation()}
+          maxLength={maxLengthValidation()}
+          ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
+          onMouseLeave={onMouseLeave}
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10">

src/components/Home/HomeSliders.jsx

@@ -2,6 +2,7 @@ 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) {
@@ -20,8 +21,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-red dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-Olusesan Ameye Data
+                           <HomeBannerOffersCard />
                         </div>
                     </SliderCom>
                 </div>

src/components/MyJobs/index.jsx

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

src/components/MyWallet/AddRecipient.jsx

@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } 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'
 
@@ -18,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()
@@ -26,15 +29,15 @@ const validationSchema = Yup.object().shape({
       .max(25, 'Maximum 25 characters')
       .required('Bank name is required'),
     accountNumber: Yup.string()
-      .min(3, 'Minimum 3 characters')
+    .matches(/\d/, "must be a number")
-      .max(25, 'Maximum 25 characters')
+    .min(3, 'Minimum 3 characters')
-      .required('Account Number is required'),
+    .max(25, 'Maximum 25 characters')
+    .required('Account Number is required'),
     repeatAccountNumber: Yup.string()
-      .min(3, 'Minimum 3 characters')
+    .required('Repeat Account Number is required')
-      .max(25, 'Maximum 25 characters')
+    .oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
-      .required('Repeat Password is required'),
     accountType: Yup.string()
-      .min(3, 'Minimum 3 characters')
+      .min(1, 'Minimum 3 characters')
       .max(25, 'Maximum 25 characters')
       .required('Account Type is required'),
     city: Yup.string()
@@ -63,6 +66,10 @@ function AddRecipient() {
 
     const apiURL = new usersService()
 
+    const navigate = useNavigate()
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
+
     let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
         loading: true,
         data: []
@@ -78,14 +85,36 @@ function AddRecipient() {
         data: []
     })
 
-    //FUNCTION TO HANDLE SUBMIT
+    //FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
     const handleSubmit = (values, helpers) => {
-        // setRequestState({message: '', loading: true, status: false})
+        setRequestStatus({message: '', loading: true, status: false})
-        console.log('working')
 
-        //valid inputs before submitting. Just for texting remove later       
+        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 GET COUNTRIES
     const getCountry = ()=> { 
         apiURL.getSignupCountryData().then((res)=>{
@@ -205,7 +234,7 @@ function AddRecipient() {
                                     <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' 
-                                        ovalue={props.values.bank}
+                                        value={props.values.bank}
                                         onChange={props.handleChange}
                                         onBlur={props.handleBlur}
                                         >
@@ -216,7 +245,7 @@ function AddRecipient() {
                                             <>
                                                 <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.name}>{item.name}</option>
+                                                    <option key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
                                                 ))}
                                             </>
                                             :
@@ -273,7 +302,7 @@ function AddRecipient() {
                                             <>
                                                 <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.name}>{item.name}</option>
+                                                    <option key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
                                                 ))}
                                             </>
                                             :
@@ -313,14 +342,20 @@ function AddRecipient() {
                                     {(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 */}
+                                {requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}
+
                                 <div className='add-recipient-btn flex justify-end items-center py-4'>
+                                    {requestStatus.loading ? 
+                                    <LoadingSpinner size={6} color='sky-blue' />
+                                    :
                                     <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>
                                         <Icons name="arrows" />
                                     </button>
+                                    }
                                 </div>
                         </Form>
                         )}

src/components/MyWallet/TransferFund.jsx

@@ -2,28 +2,43 @@ import React, {useEffect, useState} from 'react'
 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'),
+    recipient: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(50, 'Maximum 50 characters')
+      .required('Recipient is required'),
+  })
+  
+  const initialValues = {
+    amount: '',
+    recipient: '',
+    comment: '',
+  }
+
 function TransferFund({payment, wallet}) {
     const apiCall = new usersService()
 
-    let [newFee, setNewFee] = useState(false)
-
     let [recepients, 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 = ()=>{
@@ -39,158 +54,162 @@ function TransferFund({payment, wallet}) {
     }
 
     //FUNCTION TO GET SEND MONEY FEE
-    const getSendMoneyFee = ()=>{
+    const getSendMoneyFee = ({target:{value}})=>{
-        let {amount} = inputs
+        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) => {
+    const handleSubmit = () => {
-        e.preventDefault();
+        // setRequestStatus({message: '', loading: true, status: false})
+        let reqData = {}
 
-        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
+        // MAKE API CALL
         
-        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">
-                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-                        {wallet.loading ?
+                        {(props)=>{
-                        <LoadingSpinner size='8' color='sky-blue' />
+                        return (
-                        :
+                            <Form className='transfer-fund-info'>
-                        wallet.data.length ? 
+                                    {wallet.loading ?
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
+                                    <LoadingSpinner size='8' color='sky-blue' />
-                        {wallet.data.map(item => {
+                                    :
-                            if(item.description == 'Naira'){
+                                    wallet.data.length ? 
-                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
+                                    <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'){
-                        </h2>
+                                            return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
-                        :
+                                        }
-                        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>
-                        :
+                                    :
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</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>
-                        <div className='my-3 md:flex items-center justify-between space-x-2'>
+                                    :
-                            <div className='transfer-input w-full md:w-1/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>
-                                <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>
                                     }
-                                </select>
+                                    <div className="xl:flex xl:space-x-7 mb-6">
-                            </div>
-                        </div>
 
-                        <div className='my-3 md:flex items-center'>
+                                        <div className="field w-full mb-6 xl:mb-0">
-                            <div className='transfer-input w-full'>
+                                            <InputCom
-                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
+                                                label="Amount"
-                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                                type="text"
-                                    value={inputs.comment} 
+                                                name="amount"
-                                    name='comment' 
+                                                placeholder='0'
-                                    type="text" 
+                                                value={props.values.amount}
-                                    placeholder='Comment' 
+                                                inputHandler={props.handleChange}
-                                    required
+                                                blurHandler={props.handleBlur}
-                                    onChange={handleChange}
+                                                onMouseLeave={(e)=>{getSendMoneyFee(e)}}
-                                    />
+                                            />
-                            </div>
+                                            {(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
-                        </div>
+                                        </div>
                                         
-                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        <div className="field w-full">
-                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                            <InputCom
-                        </div>
+                                                label="Fee"
-                   </form>
+                                                type="text"
+                                                name="fee"
+                                                value={sendMoneyFee.loading ? 'loading' : 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.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.recipient} name='recipient' onChange={props.handleChange} onBlur={props.handleBlur}>
+                                                    {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>
+                                                    }
+                                                </select>
+                                            </div>
+                                        </div>
+                                        {(props.errors.recipient && props.touched.recipient) && <p className="text-sm text-red-500">{props.errors.recipient}</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'>
+                                        <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/index.css

@@ -10,6 +10,12 @@
   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

@@ -113,9 +113,10 @@ class usersService {
             member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
             page:0,
+            offset:0,
             limit :100
         };
-        return this.postAuxEnd("/myjobs", postData);
+        return this.postAuxEnd("/jobmanagerlist", postData);
     }
 
     getGetPendingJobs(){
@@ -164,6 +165,17 @@ class usersService {
         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){
         var postData = {
@@ -297,6 +309,14 @@ 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)

src/views/MyJobsPage.jsx

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

src/views/VerifyLinkPages.jsx

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

yarn.lock

@@ -4810,11 +4810,6 @@ 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"