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

confirm transfer page added

Browse Source
This commit was merged in pull request #29.
This commit is contained in:
victorAnumudu
2023-04-28 09:52:23 +01:00
parent 76621a87c5
commit 0bac836eb8
4 changed files with 172 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/TransferFund.jsx
+34 -20
View File
@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react'
import { Link } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import InputCom from '../Helpers/Inputs/InputCom'
@@ -16,22 +16,26 @@ const validationSchema = Yup.object().shape({
.typeError("you must specify a number")
.min(1, 'Amount must be greater than 0')
.required('Amount is required'),
recipient: Yup.string()
.min(3, 'Minimum 3 characters')
recipientID: Yup.string()
.min(1, 'Minimum 1 characters')
.max(50, 'Maximum 50 characters')
.required('Recipient is required'),
})
const initialValues = {
amount: '',
recipient: '',
recipientID: '',
comment: '',
}
function TransferFund({payment, wallet}) {
const apiCall = new usersService()
const apiCall = new usersService() // API CLASS CALL
let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
const navigate = useNavigate()
let [requestStatus, setRequestStatus] = useState(false)
let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
loading: true,
data: [],
error: false
@@ -70,12 +74,15 @@ function TransferFund({payment, wallet}) {
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = () => {
// setRequestStatus({message: '', loading: true, status: false})
let reqData = {}
const handleSubmit = (values, helpers) => {
setRequestStatus(true)
let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
// MAKE API CALL
setTimeout(()=>{
setRequestStatus(false)
navigate('confirm-transfer', {state: stateData})
}, 1000)
}
useEffect(()=>{
@@ -116,8 +123,11 @@ function TransferFund({payment, wallet}) {
placeholder='0'
value={props.values.amount}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
onMouseLeave={(e)=>{getSendMoneyFee(e)}}
blurHandler={(e)=>{
getSendMoneyFee(e)
props.handleBlur
}}
// onMouseLeave={(e)=>{getSendMoneyFee(e)}}
/>
{(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
</div>
@@ -155,19 +165,19 @@ function TransferFund({payment, wallet}) {
</label>
<Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
</div>
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={props.values.recipient} name='recipient' onChange={props.handleChange} onBlur={props.handleBlur}>
{recepients.loading ?
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={props.values.recipientID} name='recipientID' onChange={props.handleChange} onBlur={props.handleBlur}>
{recipients.loading ?
<option className='text-slate-500 text-lg' value="">Loading...</option>
:
recepients.data.length ?
recipients.data.length ?
<>
<option className='text-slate-500 text-lg' value="">Select...</option>
{recepients.data.map((item, index)=>(
<option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
{recipients.data.map((item, index)=>(
<option key={index} value={item.recipient_id} className='text-slate-500 text-lg'>{item.recipient}</option>
))}
</>
:
recepients.error ?
recipients.error ?
<option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
:
<option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
@@ -175,7 +185,7 @@ function TransferFund({payment, wallet}) {
</select>
</div>
</div>
{(props.errors.recipient && props.touched.recipient) && <p className="text-sm text-red-500">{props.errors.recipient}</p>}
{(props.errors.recipientID && props.touched.recipientID) && <p className="text-sm text-red-500">{props.errors.recipientID}</p>}
</div>
<div className="field w-full mb-6">
@@ -199,7 +209,11 @@ function TransferFund({payment, wallet}) {
</div>
<div className='transfer-fund-btn flex justify-end items-center py-4'>
{requestStatus ?
<LoadingSpinner size='8' color='sky-blue' />
:
<button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
}
</div>
</Form>
)