Add family acc
This commit is contained in:
Ebube
@@ -1,370 +1,499 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import Icons from '../Helpers/Icons'
|
||||
import usersService from '../../services/UsersService'
|
||||
import InputCom from '../Helpers/Inputs/InputCom'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import usersService from "../../services/UsersService";
|
||||
import Icons from "../Helpers/Icons";
|
||||
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'
|
||||
import { toast } from "react-toastify";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
import { Form, Formik } 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 1 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()
|
||||
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 1 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: ''
|
||||
}
|
||||
.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 apiURL = new usersService()
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigate = useNavigate()
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
|
||||
let [allCountries, setAllCountries] = useState({
|
||||
// STATE TO HOLD LIST OF COUNTRIES
|
||||
loading: true,
|
||||
data: [],
|
||||
});
|
||||
|
||||
let [allCountries, setAllCountries] = 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 [bankName, setBankName] = useState({ // STATE TO HOLD LIST OF BANK NAME
|
||||
loading: true,
|
||||
data: []
|
||||
})
|
||||
let [accType, setAccType] = useState({
|
||||
// STATE TO HOLD LIST ACCOUNT TYPE
|
||||
loading: true,
|
||||
data: [],
|
||||
});
|
||||
|
||||
let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
|
||||
loading: true,
|
||||
data: []
|
||||
})
|
||||
//FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
|
||||
const handleSubmit = (values, helpers) => {
|
||||
setRequestStatus({ message: "", loading: true, status: false });
|
||||
|
||||
//FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
|
||||
const handleSubmit = (values, helpers) => {
|
||||
setRequestStatus({message: '', loading: true, status: false})
|
||||
let reqData = {
|
||||
//REQUEST DATA FOR API CALL
|
||||
firstname: values.firstname,
|
||||
lastname: values.lastname,
|
||||
bank_code: values.bank,
|
||||
account_no: values.accountNumber,
|
||||
account_type: values.accountType,
|
||||
country: values.country,
|
||||
state: values.state,
|
||||
city: values.city,
|
||||
};
|
||||
|
||||
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("/my-wallet/transfer-fund", { replace: true });
|
||||
}, 1000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
message: "Opps! an error occured! Try again later",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//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('/my-wallet/transfer-fund',{replace:true})},1000)
|
||||
}).catch((error)=>{
|
||||
setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
|
||||
})
|
||||
}
|
||||
// FUNCTION TO GET COUNTRIES
|
||||
const getCountry = () => {
|
||||
apiURL
|
||||
.getSignupCountryData()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setAllCountries((prev) => ({ loading: false, data: [] }));
|
||||
return;
|
||||
}
|
||||
setAllCountries((prev) => ({
|
||||
loading: false,
|
||||
data: res.data.signup_country,
|
||||
}));
|
||||
})
|
||||
.catch((error) => {
|
||||
setAllCountries((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 COUNTRIES
|
||||
const getCountry = ()=> {
|
||||
apiURL.getSignupCountryData().then((res)=>{
|
||||
if(res.data.internal_return < 0){
|
||||
setAllCountries(prev => ({loading: false, data: []}))
|
||||
return
|
||||
}
|
||||
setAllCountries(prev => ({loading: false, data:res.data.signup_country}))
|
||||
}).catch((error)=>{
|
||||
setAllCountries(prev => ({loading: false, data: []}))
|
||||
})
|
||||
}
|
||||
// END OF FUNCTION TO GET COUNTRIES
|
||||
// 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
|
||||
|
||||
// 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
|
||||
useEffect(() => {
|
||||
getCountry(); // TO LOAD LIST COUNTRY
|
||||
getCountryBank(); // TO LOAD LIST COUNTRY BANK
|
||||
getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES
|
||||
}, []);
|
||||
|
||||
// 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
|
||||
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>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(props) => (
|
||||
<Form className="add-recipient-info px-1 md:px-[50px] lg:px-[100px]">
|
||||
{/* inputs starts here */}
|
||||
{/* firstname */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Firstname"
|
||||
type="text"
|
||||
name="firstname"
|
||||
placeholder="Account Firstname"
|
||||
value={props.values.firstname}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.firstname && props.touched.firstname && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.firstname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
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>
|
||||
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
|
||||
{(props)=>(
|
||||
<Form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]'>
|
||||
|
||||
{/* inputs starts here */}
|
||||
{/* firstname */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
label="Firstname"
|
||||
type="text"
|
||||
name="firstname"
|
||||
placeholder="Account Firstname"
|
||||
value={props.values.firstname}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
|
||||
</div>
|
||||
|
||||
{/* lastname */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
label="Lastname"
|
||||
type="text"
|
||||
name="lastname"
|
||||
placeholder="Account Lastname"
|
||||
value={props.values.lastname}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
{/* country */}
|
||||
<div className='add-recipient w-full mb-6 xl:mb-0'>
|
||||
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Country <span className='text-red-500'>*</span></label>
|
||||
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='country'
|
||||
value={props.values.country}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{allCountries.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
allCountries.data.length ?
|
||||
<>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
{allCountries.data.map((item, index)=>(
|
||||
<option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
|
||||
}
|
||||
</select>
|
||||
{(props.errors.country && props.touched.country) && <p className="text-sm text-red-500">{props.errors.country}</p>}
|
||||
</div>
|
||||
|
||||
{/* bank name */}
|
||||
<div className='add-recipient w-full'>
|
||||
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
|
||||
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank'
|
||||
value={props.values.bank}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{bankName.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
bankName.data.length ?
|
||||
<>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
{bankName.data.map((item, index)=>(
|
||||
<option key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
|
||||
}
|
||||
</select>
|
||||
{(props.errors.bank && props.touched.bank) && <p className="text-sm text-red-500">{props.errors.bank}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACCOUNT NUMBER */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
label="Account Number"
|
||||
type="text"
|
||||
name="accountNumber"
|
||||
placeholder="Account No"
|
||||
value={props.values.accountNumber}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.accountNumber && props.touched.accountNumber) && <p className="text-sm text-red-500">{props.errors.accountNumber}</p>}
|
||||
</div>
|
||||
|
||||
{/* REPEAT ACCT. NUMBER */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
label="Repeat Account Number"
|
||||
type="text"
|
||||
name="repeatAccountNumber"
|
||||
placeholder="Repeat Account Number"
|
||||
value={props.values.repeatAccountNumber}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.repeatAccountNumber && props.touched.repeatAccountNumber) && <p className="text-sm text-red-500">{props.errors.repeatAccountNumber}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
{/* Account Type */}
|
||||
<div className='add-recipient w-full'>
|
||||
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Account Type <span className='text-red-500'>*</span></label>
|
||||
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='accountType'
|
||||
value={props.values.accountType}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{accType.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
accType.data.length ?
|
||||
<>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
{accType.data.map((item, index)=>(
|
||||
<option key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
|
||||
}
|
||||
</select>
|
||||
{(props.errors.accountType && props.touched.accountType) && <p className="text-sm text-red-500">{props.errors.accountType}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* state */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
label="State"
|
||||
type="text"
|
||||
name="state"
|
||||
placeholder="State/Province"
|
||||
value={props.values.state}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.state && props.touched.state) && <p className="text-sm text-red-500">{props.errors.state}</p>}
|
||||
</div>
|
||||
|
||||
{/* city */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
label="City"
|
||||
type="text"
|
||||
name="city"
|
||||
placeholder="City"
|
||||
value={props.values.city}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
|
||||
</div>
|
||||
</div>
|
||||
{/* end of inputs starts here */}
|
||||
|
||||
{/* REQUEST ERROR DISPLAY */}
|
||||
{requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}
|
||||
|
||||
<div className='add-recipient-btn flex justify-end items-center py-4'>
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner size={6} color='sky-blue' />
|
||||
:
|
||||
<button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
|
||||
<span className='pr-2'>ADD RECIPIENT</span>
|
||||
<Icons name="arrows" />
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
{/* lastname */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Lastname"
|
||||
type="text"
|
||||
name="lastname"
|
||||
placeholder="Account Lastname"
|
||||
value={props.values.lastname}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.lastname && props.touched.lastname && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.lastname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
{/* country */}
|
||||
<div className="add-recipient w-full mb-6 xl:mb-0">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
||||
Country <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{allCountries.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : allCountries.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select...
|
||||
</option>
|
||||
{allCountries.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item[0]}
|
||||
>
|
||||
{item[1]}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Options Found! Try Again
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.country}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* bank name */}
|
||||
<div className="add-recipient w-full">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
||||
Bank Name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
||||
name="bank"
|
||||
value={props.values.bank}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{bankName.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : bankName.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select...
|
||||
</option>
|
||||
{bankName.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item.code}
|
||||
>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Options Found! Try Again
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{props.errors.bank && props.touched.bank && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.bank}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACCOUNT NUMBER */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Account Number"
|
||||
type="text"
|
||||
name="accountNumber"
|
||||
placeholder="Account No"
|
||||
value={props.values.accountNumber}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.accountNumber &&
|
||||
props.touched.accountNumber && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.accountNumber}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* REPEAT ACCT. NUMBER */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Repeat Account Number"
|
||||
type="text"
|
||||
name="repeatAccountNumber"
|
||||
placeholder="Repeat Account Number"
|
||||
value={props.values.repeatAccountNumber}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.repeatAccountNumber &&
|
||||
props.touched.repeatAccountNumber && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.repeatAccountNumber}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
{/* Account Type */}
|
||||
<div className="add-recipient w-full">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
||||
Account Type <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
||||
name="accountType"
|
||||
value={props.values.accountType}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{accType.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : accType.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select...
|
||||
</option>
|
||||
{accType.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item.value}
|
||||
>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Options Found! Try Again
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{props.errors.accountType && props.touched.accountType && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.accountType}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* state */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="State"
|
||||
type="text"
|
||||
name="state"
|
||||
placeholder="State/Province"
|
||||
value={props.values.state}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.state && props.touched.state && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.state}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* city */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="City"
|
||||
type="text"
|
||||
name="city"
|
||||
placeholder="City"
|
||||
value={props.values.city}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.city && props.touched.city && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.city}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* end of inputs starts here */}
|
||||
|
||||
{/* REQUEST ERROR DISPLAY */}
|
||||
{requestStatus.message && (
|
||||
<p className="text-sm text-red-500">
|
||||
{requestStatus.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="add-recipient-btn flex justify-end items-center py-4">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size={6} color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1"
|
||||
>
|
||||
<span className="pr-2">ADD RECIPIENT</span>
|
||||
<Icons name="arrows" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddRecipient
|
||||
export default AddRecipient;
|
||||
|
||||
Reference in New Issue
Block a user