Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
d94ff616a9 |
@@ -2,12 +2,68 @@ import React, {useEffect, useState} from 'react'
|
|||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import Icons from '../Helpers/Icons'
|
import Icons from '../Helpers/Icons'
|
||||||
import usersService from '../../services/UsersService'
|
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() {
|
function AddRecipient() {
|
||||||
|
|
||||||
const apiURL = new usersService()
|
const apiURL = new usersService()
|
||||||
|
|
||||||
let [countries, setCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
|
let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
|
||||||
loading: true,
|
loading: true,
|
||||||
data: []
|
data: []
|
||||||
})
|
})
|
||||||
@@ -17,60 +73,29 @@ function AddRecipient() {
|
|||||||
data: []
|
data: []
|
||||||
})
|
})
|
||||||
|
|
||||||
let [accountType, setAccountType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
|
let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
|
||||||
loading: true,
|
loading: true,
|
||||||
data: []
|
data: []
|
||||||
})
|
})
|
||||||
|
|
||||||
//STATE FOR CONTROLLED INPUTS
|
|
||||||
let [inputs, setInputs] = useState({
|
|
||||||
firstname: '',
|
|
||||||
lastname: '',
|
|
||||||
country: '',
|
|
||||||
'bank-name': '',
|
|
||||||
'account-number': '',
|
|
||||||
'repeat-account-number': '',
|
|
||||||
'account-type': '',
|
|
||||||
state: '',
|
|
||||||
city: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// FUNCTION TO HANDLE INPUT CHANGE
|
|
||||||
const handleChange = ({target:{name, value}}) => {
|
|
||||||
setInputs(prev => ({...prev, [name]:value}))
|
|
||||||
}
|
|
||||||
|
|
||||||
//FUNCTION TO HANDLE SUBMIT
|
//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
|
//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
|
// FUNCTION TO GET COUNTRIES
|
||||||
const getCountry = ()=> {
|
const getCountry = ()=> {
|
||||||
apiURL.getSignupCountryData().then((res)=>{
|
apiURL.getSignupCountryData().then((res)=>{
|
||||||
if(res.data.internal_return < 0){
|
if(res.data.internal_return < 0){
|
||||||
setCountries(prev => ({loading: false, data: []}))
|
setAllCountries(prev => ({loading: false, data: []}))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
setCountries(prev => ({loading: false, data:res.data.signup_country}))
|
setAllCountries(prev => ({loading: false, data:res.data.signup_country}))
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
setCountries(prev => ({loading: false, data: []}))
|
setAllCountries(prev => ({loading: false, data: []}))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// END OF FUNCTION TO GET COUNTRIES
|
// END OF FUNCTION TO GET COUNTRIES
|
||||||
@@ -93,12 +118,12 @@ function AddRecipient() {
|
|||||||
const getAccountTypes = ()=> {
|
const getAccountTypes = ()=> {
|
||||||
apiURL.getAccountTypes().then((res)=>{
|
apiURL.getAccountTypes().then((res)=>{
|
||||||
if(res.data.internal_return < 0){
|
if(res.data.internal_return < 0){
|
||||||
setAccountType(prev => ({loading: false, data: []}))
|
setAccType(prev => ({loading: false, data: []}))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
setAccountType(prev => ({loading: false, data:res.data.result_list}))
|
setAccType(prev => ({loading: false, data:res.data.result_list}))
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
setAccountType(prev => ({loading: false, data: []}))
|
setAccType(prev => ({loading: false, data: []}))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// END OF FUNCTION TO GET ACCOUNT TYPES
|
// END OF FUNCTION TO GET ACCOUNT TYPES
|
||||||
@@ -113,148 +138,193 @@ function AddRecipient() {
|
|||||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
<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 mb-10 lg:mb-0">
|
||||||
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
<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-slate-500 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-slate-500 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 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'>
|
<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 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}>
|
<div className='add-recipient w-full mb-6 xl:mb-0'>
|
||||||
{bankName.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}
|
||||||
bankName.data.length ?
|
onChange={props.handleChange}
|
||||||
<>
|
onBlur={props.handleBlur}
|
||||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
>
|
||||||
{bankName.data.map((item, index)=>(
|
{allCountries.loading ?
|
||||||
<option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</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>
|
||||||
|
|
||||||
<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-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'>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-slate-500 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 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="Repeat Account Number"
|
||||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
type="text"
|
||||||
:
|
name="repeatAccountNumber"
|
||||||
accountType.data.length ?
|
placeholder="Repeat Account Number"
|
||||||
<>
|
value={props.values.repeatAccountNumber}
|
||||||
<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.repeatAccountNumber && props.touched.repeatAccountNumber) && <p className="text-sm text-red-500">{props.errors.repeatAccountNumber}</p>}
|
||||||
</>
|
</div>
|
||||||
:
|
</div>
|
||||||
<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'>
|
<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-slate-500 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-slate-500 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user