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

src/Routers.jsx

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

src/components/AuthPages/Login/index.jsx

@@ -67,6 +67,7 @@ export default function Login() {
           setLoginLoading(true);
           // userApi.getUserReminders(); //testing
           setTimeout(() => {
+            toast.success("Login Successfully");
             navigate("/", { replace: true });
             setLoginLoading(false);
           }, 2000);
@@ -96,7 +97,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 xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
@@ -118,8 +119,6 @@ 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,43 +79,37 @@ 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 (
     <>
@@ -245,8 +239,7 @@ export default function SignUp() {
                           <button
                             type="button"
                             onClick={handleSignUp}
-                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
+                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem]`}
-                              }`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>

src/components/AuthPages/VerifyLink/index.jsx

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useCallback } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -17,32 +17,33 @@ 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]
   )
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     verifyEmail(token)
-  })
+  }, [])
 
   console.log(token)
 
@@ -129,7 +130,6 @@ 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,4 +1,5 @@
 import AuthLayout from "../AuthLayout";
+import InputCom from "../../Helpers/Inputs/InputCom";
 
 export default function VerifyYou() {
   return (

src/components/Cards/HomeBannerOffersCard.jsx

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

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

@@ -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 && (
-        <label
+          <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+            className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
-          htmlFor={name}
+            htmlFor={name}
-        >
+          >
-          {label}
+            {label}
-        </label>
+          </label>
-      )}
+        )}
-      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+        {forgotPassword && <Link to="/forgot-password" className="text-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,13 +87,11 @@ 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,7 +2,6 @@ import SliderCom from "../Helpers/SliderCom";
 import slider1 from "../../assets/images/slider-1.jpg";
 import slider2 from "../../assets/images/slider-2.jpg";
 import slider3 from "../../assets/images/slider-3.jpg";
-import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";
 
 
 export default function HomeSliders(props) {
@@ -21,8 +20,8 @@ export default function HomeSliders(props) {
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider3} alt="slider" className="w-full h-full" />
                         </div>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        <div className="item w-full h-full bg-red dark:bg-dark-white   rounded-2xl overflow-hidden">
-                           <HomeBannerOffersCard />
+Olusesan Ameye Data
                         </div>
                     </SliderCom>
                 </div>

src/components/MyJobs/index.jsx

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

src/components/MyWallet/AddRecipient.jsx

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

src/components/MyWallet/TransferFund.jsx

@@ -2,7 +2,6 @@ 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'
 
@@ -98,53 +97,57 @@ 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="xl:flex xl:space-x-7 mb-6">
+                        <div className='my-3 md:flex items-center justify-between space-x-2'>
-
+                            <div className='transfer-input w-full md:w-1/2'>
-                            <div className="field w-full mb-6 xl:mb-0">
+                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
-                                <InputCom
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    label="Amount"
+                                    value={inputs.amount} 
-                                    type="text"
+                                    name='amount' 
-                                    name="amount"
+                                    type="text" 
-                                    value={inputs.amount}
+                                    placeholder='Amount' 
-                                    inputHandler={handleChange}
+                                    required
+                                    onChange={handleChange}
                                     onMouseEnter={()=>{setNewFee(false)}}
                                     onMouseLeave={()=>{setNewFee(true)}}
-                                />
+                                    />
                             </div>
-                            
+                            <div className='transfer-input w-full md:w-1/2'>
-                            <div className="field w-full">
+                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
-                                <InputCom
+                                <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' 
-                                    label="Fee"
+                                    value={sendMoneyFee.fee} 
-                                    type="text"
+                                    name='fee' 
-                                    name="fee"
+                                    type="text" 
-                                    value={sendMoneyFee.fee}
+                                    placeholder='Fee' 
-                                    disable={true}
+                                    required
-                                />
+                                    disabled
+                                    />
                             </div>
                         </div>
 
-                        <div className='md:flex items-center justify-end'>
+                        <div className='my-3 md:flex items-center justify-end space-x-2'>
-                            <div className="field w-full lg:w-1/2 mb-6">
+                            <div className='transfer-input w-full md:w-1/2'>
-                                <InputCom
+                                <label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
-                                    label="Total"
+                                <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' 
-                                    type="text"
+                                    value={sendMoneyFee.total} 
-                                    name="total"
+                                    name='total' 
-                                    value={sendMoneyFee.total}
+                                    type="text" 
-                                    disable={true}
+                                    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 py-2'>
+                                <div className='flex items-center justify-start'>
-                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
+                                    <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-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                    <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='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}>
+                                <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>
                                      :
@@ -165,23 +168,18 @@ function TransferFund({payment, wallet}) {
                             </div>
                         </div>
 
-                        <div className="field w-full mb-6">
+                        <div className='my-3 md:flex items-center'>
-                            {/* <InputCom
+                            <div className='transfer-input w-full'>
-                                label="Comment"
+                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
-                                type="text"
+                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                name="comment"
+                                    value={inputs.comment} 
-                                value={inputs.comment}
+                                    name='comment' 
-                                inputHandler={handleChange}
+                                    type="text" 
-                            /> */}
+                                    placeholder='Comment' 
-                            <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
+                                    required
-                            <textarea style={{resize: 'none'}}
+                                    onChange={handleChange}
-                            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" 
+                            </div>
-                            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,12 +10,6 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
-.banner-630-340{
-  width: 630px;
-  height: 340px;
-  background-color: aliceblue;
-}
-
 /* Bold italic Weight */
 @font-face {
   font-family: "Product Sans";

src/services/UsersService.js

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

src/views/MyJobsPage.jsx

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

src/views/SignupPage.jsx

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

src/views/VerifyLinkPages.jsx

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

yarn.lock

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