merged master to branch

src/Routers.jsx

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

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);
@@ -97,7 +96,7 @@ export default function Login() {
               <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center 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={{
@@ -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,7 +57,7 @@ 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')
     }
 
@@ -79,37 +79,43 @@ export default function SignUp() {
 
         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 && 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')
           }
         } else {
-          setMsgError('This account does not exist')
           setSignUpLoading(false)
+          setMsgError('An error occurred')
         }
       }
     } 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 (
     <>
@@ -239,7 +245,8 @@ 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]`}
+                            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" : ""
+                              }`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>

src/components/AuthPages/VerifyLink/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useState, useLayoutEffect, useCallback } from "react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -17,33 +17,32 @@ export default function VerifyLink() {
   const verifyEmail = useCallback(
     async (code) => {
       const userApi = new usersService()
-
+  
       try {
         const verifyRes = await userApi.verifyEmail(code)
-        console.log(verifyRes)
         if (verifyRes.status === 200) {
           let { data } = verifyRes
-
-          if (data && data.internal_return === 0 && data.status_text == 'Link Verfied') {
+  
+          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) {
-        console.log(error)
         setPageLoader(false)
         setLinkError(true)
         throw new Error(error)
       }
-    }, [linkSuccess, linkError]
+    }, []
   )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     verifyEmail(token)
-  }, [])
+  })
 
   console.log(token)
 
@@ -130,6 +129,7 @@ const ErrorComponent = ({ onClick }) => (
       </p>
     </div>
 
+
     <div className="signin-area flex justify-center mb-3.5">
       <button
         onClick={onClick}

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,5 +1,4 @@
 import AuthLayout from "../AuthLayout";
-import InputCom from "../../Helpers/Inputs/InputCom";
 
 export default function VerifyYou() {
   return (

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

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

src/components/MyWallet/TransferFund.jsx

@@ -2,6 +2,7 @@ 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'
 
@@ -97,57 +98,53 @@ function TransferFund({payment, wallet}) {
                         :
                         <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='my-3 md:flex items-center justify-between space-x-2'>
-                            <div className='transfer-input w-full md:w-1/2'>
-                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={inputs.amount} 
-                                    name='amount' 
-                                    type="text" 
-                                    placeholder='Amount' 
-                                    required
-                                    onChange={handleChange}
+                        <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='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 className="field w-full">
+                                <InputCom
+                                    label="Fee"
+                                    type="text"
+                                    name="fee"
+                                    value={sendMoneyFee.fee}
+                                    disable={true}
+                                />
                             </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 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'>
-                                    <label className='text-slate-600 text-lg'>Recipient 
+                                <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-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                    <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='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}>
+                                <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>
                                      :
@@ -168,18 +165,23 @@ function TransferFund({payment, wallet}) {
                             </div>
                         </div>
 
-                        <div className='my-3 md:flex items-center'>
-                            <div className='transfer-input w-full'>
-                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={inputs.comment} 
-                                    name='comment' 
-                                    type="text" 
-                                    placeholder='Comment' 
-                                    required
-                                    onChange={handleChange}
-                                    />
-                            </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={inputs.comment}
+                            onChange={handleChange}
+                            cols="30" 
+                            rows="2"
+                            />
                         </div>
 
                         <div className='transfer-fund-btn flex justify-end items-center py-4'>

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

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

src/views/MyJobsPage.jsx

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

src/views/SignupPage.jsx

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

src/views/VerifyLinkPages.jsx

@@ -1,7 +1,5 @@
-import React from "react";
 import VerifyLink from "../components/AuthPages/VerifyLink";
 
-export default function VerifyYouPages() {
-  
+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"