Merge branch 'add_recipient_country' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -1,8 +1,26 @@
|
||||
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'
|
||||
|
||||
function AddRecipient() {
|
||||
|
||||
const apiURL = new usersService()
|
||||
|
||||
let [countries, setCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
|
||||
loading: true,
|
||||
data: []
|
||||
})
|
||||
|
||||
let [bankName, setBankName] = useState({ // STATE TO HOLD LIST OF BANK NAME
|
||||
loading: true,
|
||||
data: []
|
||||
})
|
||||
|
||||
let [accountType, setAccountType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
|
||||
loading: true,
|
||||
data: []
|
||||
})
|
||||
|
||||
//STATE FOR CONTROLLED INPUTS
|
||||
let [inputs, setInputs] = useState({
|
||||
@@ -28,11 +46,7 @@ function AddRecipient() {
|
||||
|
||||
//valid inputs before submitting. Just for texting remove later
|
||||
|
||||
// setInputs((prev)=>{
|
||||
// for(let input in prev){
|
||||
// prev[input] = ''
|
||||
// }
|
||||
// })
|
||||
|
||||
// RETURN INPUTS TO EMPTY STRING
|
||||
setInputs({
|
||||
firstname: '',
|
||||
@@ -46,6 +60,55 @@ function AddRecipient() {
|
||||
city: ''
|
||||
})
|
||||
}
|
||||
|
||||
// FUNCTION TO GET COUNTRIES
|
||||
const getCountry = ()=> {
|
||||
apiURL.getSignupCountryData().then((res)=>{
|
||||
if(res.data.internal_return < 0){
|
||||
setCountries(prev => ({loading: false, data: []}))
|
||||
return
|
||||
}
|
||||
setCountries(prev => ({loading: false, data:res.data.signup_country}))
|
||||
}).catch((error)=>{
|
||||
setCountries(prev => ({loading: false, data: []}))
|
||||
})
|
||||
}
|
||||
// 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){
|
||||
setAccountType(prev => ({loading: false, data: []}))
|
||||
return
|
||||
}
|
||||
setAccountType(prev => ({loading: false, data:res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setAccountType(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">
|
||||
@@ -56,7 +119,7 @@ function AddRecipient() {
|
||||
{/* inputs starts here */}
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
<input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.firstname}
|
||||
name='firstname'
|
||||
type="text"
|
||||
@@ -68,7 +131,7 @@ function AddRecipient() {
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
<input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.lastname}
|
||||
name='lastname'
|
||||
type="text"
|
||||
@@ -80,21 +143,45 @@ function AddRecipient() {
|
||||
|
||||
<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 className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
|
||||
{countries.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
countries.data.length ?
|
||||
<>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
{countries.data.map((item, index)=>(
|
||||
<option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
|
||||
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
<select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
|
||||
{bankName.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
bankName.data.length ?
|
||||
<>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
{bankName.data.map((item, index)=>(
|
||||
<option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
<input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs['account-number']}
|
||||
name='account-number'
|
||||
type="text"
|
||||
@@ -106,7 +193,7 @@ function AddRecipient() {
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
<input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs['repeat-account-number']}
|
||||
name='repeat-account-number'
|
||||
type="text"
|
||||
@@ -118,14 +205,26 @@ function AddRecipient() {
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
|
||||
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
<select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
|
||||
{accountType.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
accountType.data.length ?
|
||||
<>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
{accountType.data.map((item, index)=>(
|
||||
<option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
<input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.state}
|
||||
name='state'
|
||||
type="text"
|
||||
@@ -137,7 +236,7 @@ function AddRecipient() {
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
<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"
|
||||
|
||||
@@ -274,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)
|
||||
|
||||
Reference in New Issue
Block a user