added validation to add recipient page

.env.development

@@ -0,0 +1,30 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+# REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
+# REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+
+#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+#"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_CHECKER=60000
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+
+# Had to change the error time to 3sec cause it took too long
+REACT_APP_RESET_START_ERROR_TIMEOUT=3000
+
+#apigate.lotus.g1.wrenchboard.com:76.209.103.227
+#apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.poduction

@@ -0,0 +1,30 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+# REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
+# REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
+REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
+REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
+
+#REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+
+#"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_CHECKER=60000
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+
+# Had to change the error time to 3sec cause it took too long
+REACT_APP_RESET_START_ERROR_TIMEOUT=3000
+
+#apigate.orion.g1.wrenchboard.com:76.209.103.227
+#apigate.orion.g1.wrenchboard.com:76.209.103.227

.eslintrc

@@ -1,59 +0,0 @@
-{
-  "extends": [
-    "airbnb",
-    "airbnb/hooks",
-    "eslint:recommended",
-    "prettier",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 8
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "rules": {
-    "no-plusplus": 0,
-    "import/no-dynamic-require": 0,
-    "global-require": 0,
-    "no-nested-ternary": 0,
-    "react/self-closing-comp": 0,
-    "react/no-unescaped-entities": 0,
-    "jsx-a11y/anchor-is-valid": 0,
-    "react/jsx-props-no-spreading": 0,
-    "jsx-eslint/eslint-plugin-jsx-a11y": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "jsx-a11y/no-noninteractive-element-interactions": 0,
-    "react/react-in-jsx-scope": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "no-console": 0,
-    "react/state-in-constructor": 0,
-    "indent": 0,
-    "linebreak-style": 0,
-    "react/prop-types": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ]
-    // "prettier/prettier": [
-    //     "error",
-    //     {
-    //         "trailingComma": "es5",
-    //         "singleQuote": true,
-    //         "printWidth": 100,
-    //         "tabWidth": 4,
-    //         "semi": true,
-    //         "endOfLine": "auto"
-    //     }
-    // ]
-  },
-  "plugins": ["prettier", "react", "react-hooks"]
-}

Dockerfile

@@ -0,0 +1,36 @@
+# pull the base image
+FROM node:alpine
+
+# Build args
+ARG NODE_ENV
+
+# set the working direction
+#WORKDIR /app
+WORKDIR /usr/src/app
+
+# add `/app/node_modules/.bin` to $PATH
+# ENV PATH /app/node_modules/.bin:$PATH
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV NODE_ENV=$NODE_ENV
+
+# install nginx
+RUN apk update
+RUN apk add nginx
+
+# install app dependencies
+COPY package.json ./
+
+COPY package-lock.json ./
+
+COPY nginx.conf ./
+
+COPY run.sh ./
+
+RUN npm install --legacy-peer-deps
+
+# add app
+COPY . ./
+
+# start app
+CMD /bin/sh ./run.sh
+

docker-compose.yml

@@ -4,7 +4,9 @@ services:
     image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
     build:
       context: .
-      dockerfile: docker/Dockerfile
+      dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
     restart: unless-stopped
     ports:
       - 9082:3000
@@ -13,19 +15,20 @@ services:
     working_dir: /usr/src/app
     volumes:
       - ./:/usr/src/app
-      - /usr/src/app/node_modules
       - ./src/:/usr/src/app/src
-      - ./vendors/:/usr/src/app/vendors
+      - ./run.sh:/usr/src/app/run.sh
     extra_hosts:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
       - apigate.lotus.g1.wrenchboard.com:10.10.33.15
+      - apigate.orion.g1.wrenchboard.com:10.10.33.15
       # #- backend.wrenchboard.api.live:172.31.4.27
       # #- backend.wrenchboard.api.test:10.20.30.27
       - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:
       - CHOKIDAR_USEPOLLING=true
+      - NODE_ENV=${NODE_ENV:-production}
    # volumes:
    #   - ./:/app
    #   - /app/node_modules

docker/Dockerfile

@@ -3,7 +3,15 @@
 
 FROM alpine:3.15
 
+# Build args
+ARG NODE_ENV
+
 ENV NODE_VERSION 14.19.0
+ENV NODE_ENV=$NODE_ENV
+
+# install nginx
+RUN apk update
+RUN apk add nginx
 
 RUN addgroup -g 1000 node \
     && adduser -u 1000 -G node -s /bin/sh -D node \
@@ -103,6 +111,10 @@ WORKDIR /usr/src/app
 # ENV PATH /app/node_modules/.bin:$PATH
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
 
+COPY nginx.conf ./
+
+COPY run.sh ./
+
 # install app dependencies
 COPY package.json ./
 RUN npm install
@@ -114,7 +126,9 @@ RUN npm install
 COPY . ./
 
 # start app
-CMD ["npm","run", "start"]
+# CMD ["npm","run", "start"]
  
 # CMD ["yarn", "start"]
 
+# start app
+CMD /bin/sh ./run.sh

nginx.conf

@@ -0,0 +1,29 @@
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  access_log /var/log/nginx/access.log;
+  error_log  /var/log/nginx/error.log;
+
+  server {
+    gzip on;
+    listen 3000;
+    server_name localhost;
+    root /usr/src/app/build;
+
+    include /etc/nginx/mime.types;
+
+    location /nginx_status {
+      stub_status on;
+      access_log off;
+    }
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}
+

package.json

@@ -30,11 +30,10 @@
     "yup": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts start -e .env.development",
-    "build": "react-scripts build",
+    "build": "react-scripts build -e .env.production",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "eject": "react-scripts eject"
-    "lint": "yarn add -D prettier@2.4.1 && yarn add -D eslint@7.11.0 && yarn add -D babel-eslint@10.1.0 && npx install-peerdeps --dev eslint-config-airbnb@18.2.1 && yarn add -D eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0"
   },
   "eslintConfig": {
     "extends": [
@@ -53,20 +52,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.5",
-    "babel-eslint": "10.1.0",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "1.7.0",
-    "postcss": "^8.4.12",
-    "prettier": "2.4.1",
-    "tailwindcss": "^3.0.24"
   }
 }

run.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env sh
+set -e
+set -x
+
+export NODE_ENV="${NODE_ENV:-development}"
+
+if [ $NODE_ENV == "development" ]; then
+  # this runs webpack-dev-server with hot reloading
+  npm install --legacy-peer-deps
+  npm start
+else
+  # build the app and serve it via nginx
+  npm install --legacy-peer-deps
+  npm run build
+  nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
+  nginx -c /usr/src/app/nginx.conf
+fi

src/components/Home/Hero.jsx

@@ -18,6 +18,7 @@ export default function Hero({ className }) {
     infinite: true,
     swipe: true,
   };
+  const sildeData =null;
   const [addFavorite, setValue] = useState(false);
   const favoriteHandler = () => {
     if (!addFavorite) {
@@ -96,7 +97,7 @@ export default function Hero({ className }) {
           </Link>
         </div>
       </div>
-      <HomeSliders settings={settings} />
+      <HomeSliders settings={settings} sideData={sildeData}/>
     </div>
   );
 }

src/components/Home/HomeSliders.jsx

@@ -20,6 +20,9 @@ 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>
                     </SliderCom>
                 </div>
             </div>

src/components/MyWallet/AddRecipient.jsx

@@ -1,161 +1,330 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import { Link } from 'react-router-dom'
 import Icons from '../Helpers/Icons'
+import usersService from '../../services/UsersService'
+import InputCom from '../Helpers/Inputs/InputCom'
+
+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()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Account Number is required'),
+    repeatAccountNumber: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Repeat Password is required'),
+    accountType: Yup.string()
+      .min(3, '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() {
 
-    //STATE FOR CONTROLLED INPUTS
+    const apiURL = new usersService()
-    let [inputs, setInputs] = useState({
+
-        firstname: '',
+    let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
-        lastname: '',
+        loading: true,
-        country: '',
+        data: []
-        'bank-name': '',
-        'account-number': '',
-        'repeat-account-number': '',
-        'account-type': '',
-        state: '',
-        city: ''
     })
 
-    // FUNCTION TO HANDLE INPUT CHANGE
+    let [bankName, setBankName] = useState({ // STATE TO HOLD LIST OF BANK NAME
-    const handleChange = ({target:{name, value}}) => {
+        loading: true,
-        setInputs(prev => ({...prev, [name]:value}))
+        data: []
-    }
+    })
+
+    let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
+        loading: true,
+        data: []
+    })
 
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
+    const handleSubmit = (values, helpers) => {
-        e.preventDefault();
+        // setRequestState({message: '', loading: true, status: false})
+        console.log('working')
 
         //valid inputs before submitting. Just for texting remove later       
+    }
 
-        // setInputs((prev)=>{
+    // FUNCTION TO GET COUNTRIES
-        //     for(let input in prev){
+    const getCountry = ()=> { 
-        //         prev[input] = ''
+        apiURL.getSignupCountryData().then((res)=>{
-        //     }
+            if(res.data.internal_return < 0){
-        // })
+                setAllCountries(prev => ({loading: false, data: []}))
-        // RETURN INPUTS TO EMPTY STRING
+                return
-        setInputs({
+            }
-            firstname: '',
+            setAllCountries(prev => ({loading: false, data:res.data.signup_country}))
-            lastname: '',
+        }).catch((error)=>{
-            country: '',
+            setAllCountries(prev => ({loading: false, data: []}))
-            'bank-name': '',
-            'account-number': '',
-            'repeat-account-number': '',
-            'account-type': '',
-            state: '',
-            city: ''
         })
     }
+    // END OF FUNCTION TO GET COUNTRIES
+
+    // FUNCTION TO GET COUNTRY BANK
+    const getCountryBank = ()=> { 
+        apiURL.getCountryBank().then((res)=>{
+            if(res.data.internal_return < 0){
+                setBankName(prev => ({loading: false, data: []}))
+                return
+            }
+            setBankName(prev => ({loading: false, data:res.data.result_list}))
+        }).catch((error)=>{
+            setBankName(prev => ({loading: false, data: []}))
+        })
+    }
+    // END OF FUNCTION TO GET COUNTRY BANK
+
+    // FUNCTION TO GET ACCOUNT TYPES
+    const getAccountTypes = ()=> { 
+        apiURL.getAccountTypes().then((res)=>{
+            if(res.data.internal_return < 0){
+                setAccType(prev => ({loading: false, data: []}))
+                return
+            }
+            setAccType(prev => ({loading: false, data:res.data.result_list}))
+        }).catch((error)=>{
+            setAccType(prev => ({loading: false, data: []}))
+        })
+    }
+    // END OF FUNCTION TO GET ACCOUNT TYPES
+
+    useEffect(()=>{
+        getCountry() // TO LOAD LIST COUNTRY
+        getCountryBank() // TO LOAD LIST COUNTRY BANK
+        getAccountTypes() // TO LOAD LIST ACCOUNT TYPES
+    },[])
+
     return (
         <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>
-                   <form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                        {(props)=>(
+                        <Form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]'>
                                 
-                        {/* inputs starts here */}
+                                {/* inputs starts here */}
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                {/* firstname */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className="field w-full mb-6 xl:mb-0">
-                                value={inputs.firstname} 
+                                    <InputCom
-                                name='firstname' 
+                                        label="Firstname"
-                                type="text" 
+                                        type="text"
-                                placeholder='Account Firstname' 
+                                        name="firstname"
-                                required
+                                        placeholder="Account Firstname"
-                                onChange={handleChange}
+                                        value={props.values.firstname}
-                                />
+                                        inputHandler={props.handleChange}
-                        </div>
+                                        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'>
+                                    {/* lastname */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
+                                    <div className="field w-full">
-                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <InputCom
-                                value={inputs.lastname} 
+                                        label="Lastname"
-                                name='lastname' 
+                                        type="text"
-                                type="text" 
+                                        name="lastname"
-                                placeholder='Account Lastname' 
+                                        placeholder="Account Lastname"
-                                required
+                                        value={props.values.lastname}
-                                onChange={handleChange}
+                                        inputHandler={props.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'>
-                            <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 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
-                                <option className='text-slate-500 text-lg' value="">Select...</option>
-                            </select>
-                        </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'>Bank Name <span className='text-red-500'>*</span></label>
+                                    {/* country */}
-                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
+                                    <div className='add-recipient w-full mb-6 xl:mb-0'>
-                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                                        <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>
+                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='country' 
-                        </div>
+                                        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>
                                     
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                    {/* bank name */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>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-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'>Bank Name <span className='text-red-500'>*</span></label>
-                                value={inputs['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='bank' 
-                                name='account-number' 
+                                        ovalue={props.values.bank}
-                                type="text" 
+                                        onChange={props.handleChange}
-                                placeholder='Account No' 
+                                        onBlur={props.handleBlur}
-                                required
+                                        >
-                                onChange={handleChange}
+                                        {bankName.loading ?
-                                />
+                                            <option className='text-slate-500 text-lg' value="">Loading...</option>
-                        </div>
+                                            :
+                                            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>
+                                        {(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'>
+                                {/* ACCOUNT NUMBER */}
-                            <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="xl:flex xl:space-x-7 mb-6">
-                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className="field w-full mb-6 xl:mb-0">
-                                value={inputs['repeat-account-number']} 
+                                    <InputCom
-                                name='repeat-account-number' 
+                                        label="Account Number"
-                                type="text" 
+                                        type="text"
-                                placeholder='Repeat Account No' 
+                                        name="accountNumber"
-                                required
+                                        placeholder="Account No"
-                                onChange={handleChange}
+                                        value={props.values.accountNumber}
-                                />
+                                        inputHandler={props.handleChange}
-                        </div>
+                                        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'>
+                                    {/* REPEAT ACCT. NUMBER */}
-                            <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">
-                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
+                                    <InputCom
-                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                                        label="Repeat Account Number"
-                            </select>
+                                        type="text"
-                        </div>
+                                        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'>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
+                                    {/* Account Type */}
-                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className='add-recipient w-full'>
-                                value={inputs.state} 
+                                        <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>
-                                name='state' 
+                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='accountType' 
-                                type="text" 
+                                        value={props.values.accountType}
-                                placeholder='State' 
+                                        onChange={props.handleChange}
-                                required
+                                        onBlur={props.handleBlur}
-                                onChange={handleChange}
+                                        >
-                                />
+                                            {accType.loading ?
-                        </div>
+                                            <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.name}>{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'>
+                                {/* state */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className="field w-full mb-6 xl:mb-0">
-                                value={inputs.city} 
+                                    <InputCom
-                                name='city' 
+                                        label="State"
-                                type="text" 
+                                        type="text"
-                                placeholder='City' 
+                                        name="state"
-                                required
+                                        placeholder="State/Province"
-                                onChange={handleChange}
+                                        value={props.values.state}
-                                />
+                                        inputHandler={props.handleChange}
-                        </div>
+                                        blurHandler={props.handleBlur}
+                                    />
+                                    {(props.errors.state && props.touched.state) && <p className="text-sm text-red-500">{props.errors.state}</p>}
+                                    </div>
 
-                        {/* end of inputs starts here */}
+                                    {/* 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>
 
-                        <div className='add-recipient-btn flex justify-end items-center py-4'>
+                                {/* end of inputs starts here */}
-                            <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>
+                                <div className='add-recipient-btn flex justify-end items-center py-4'>
-                                <Icons name="arrows" />
+                                    <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'>
-                            </button>
+                                        <span className='pr-2'>ADD RECIPIENT</span>
-                        </div>
+                                        <Icons name="arrows" />
-                   </form>
+                                    </button>
+                                </div>
+                        </Form>
+                        )}
+                   </Formik>
                 </div>
             </div>
 

src/services/UsersService.js

@@ -96,6 +96,17 @@ class usersService {
         return this.postAuxEnd("/getjobsdata", postData);
     }
 
+    getHeroJBanners(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            limit :100
+        };
+        return this.postAuxEnd("/homebanners", postData);
+    }
+
     getMyJobList(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -263,6 +274,29 @@ class usersService {
         return this.postAuxEnd("/signupcountry", null);
     }
 
+     // END POINT TO GET BANK NAME
+     getCountryBank() {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            action: 11183,
+            country: 'NG'
+        };
+        return this.postAuxEnd("/countrybanks", postData);
+    }
+
+    // END POINT TO GET ACCOUNT TYPE
+    getAccountTypes() {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            action: 11177
+        };
+        return this.postAuxEnd("/accounttypes", postData);
+    }
+
     /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/HomePages.jsx

@@ -1,7 +1,23 @@
-import React from "react";
+import React, {useState, useEffect} from 'react'
 import Home from "../components/Home";
-
+import usersService from "../services/UsersService";
 export default function HomePages() {
+
+    const [marketActiveJobList, setMarketActiveJobList] = useState([]);
+    const api = new usersService();
+
+    const getMarketActiveJobList = async () => {
+        try {
+            const res = await api.getHeroJBanners();
+            setMarketActiveJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMarketActiveJobList();
+    }, []);
+
   return (
     <>
       <Home />