WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

handling adding recipient done

Browse Source
This commit is contained in:
victorAnumudu
2023-04-27 13:49:19 +01:00
parent 53b9db85a5
commit e26330af9a
4 changed files with 110 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddRecipient.jsx
+45 -10
View File
@@ -1,9 +1,12 @@
import React, {useEffect, useState} from 'react'
import { Link } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
import Icons from '../Helpers/Icons'
import usersService from '../../services/UsersService'
import InputCom from '../Helpers/Inputs/InputCom'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import {toast} from 'react-toastify'
import {Formik, Form} from 'formik'
import * as Yup from 'yup'
@@ -34,7 +37,7 @@ const validationSchema = Yup.object().shape({
.required('Repeat Account Number is required')
.oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
accountType: Yup.string()
.min(3, 'Minimum 3 characters')
.min(1, 'Minimum 3 characters')
.max(25, 'Maximum 25 characters')
.required('Account Type is required'),
city: Yup.string()
@@ -63,6 +66,10 @@ function AddRecipient() {
const apiURL = new usersService()
const navigate = useNavigate()
let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
loading: true,
data: []
@@ -78,14 +85,36 @@ function AddRecipient() {
data: []
})
//FUNCTION TO HANDLE SUBMIT
//FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
const handleSubmit = (values, helpers) => {
// setRequestState({message: '', loading: true, status: false})
console.log('working')
setRequestStatus({message: '', loading: true, status: false})
//valid inputs before submitting. Just for texting remove later
let reqData = { //REQUEST DATA FOR API CALL
firstname: values.firstname,
lastname: values.lastname,
bank_code: values.bank,
account_no: values.accountNumber,
account_type: values.accountType,
country: values.country,
state: values.state,
city: values.city
}
//CALL TO ADD RECIPIENT API
apiURL.addRecipient(reqData).then((res)=>{
if(res.data.internal_return < 0){
setRequestStatus({message: 'could not add recipient, try again!', loading: false, status: true})
return
}
// setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
toast.success("Recipient Added Successfully!");
setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
}).catch((error)=>{
setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
})
}
// FUNCTION TO GET COUNTRIES
const getCountry = ()=> {
apiURL.getSignupCountryData().then((res)=>{
@@ -205,7 +234,7 @@ function AddRecipient() {
<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'
ovalue={props.values.bank}
value={props.values.bank}
onChange={props.handleChange}
onBlur={props.handleBlur}
>
@@ -216,7 +245,7 @@ function AddRecipient() {
<>
<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 key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
))}
</>
:
@@ -273,7 +302,7 @@ function AddRecipient() {
<>
<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 key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
))}
</>
:
@@ -313,14 +342,20 @@ function AddRecipient() {
{(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>
)}