Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
39b3218545 | ||
|
victorAnumudu
|
e26330af9a |
@@ -15,6 +15,8 @@ export default function InputCom({
|
||||
onClick,
|
||||
disable,
|
||||
blurHandler,
|
||||
onMouseEnter,
|
||||
onMouseLeave
|
||||
}) {
|
||||
const inputRef = useRef(null)
|
||||
// Entry Validation
|
||||
@@ -90,6 +92,8 @@ export default function InputCom({
|
||||
ref={inputRef}
|
||||
readOnly={disable}
|
||||
onBlur={blurHandler}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
/>
|
||||
{iconName && (
|
||||
<div className="absolute right-6 bottom-[10px] z-10">
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import InputCom from '../Helpers/Inputs/InputCom'
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
|
||||
@@ -97,57 +98,53 @@ function TransferFund({payment, wallet}) {
|
||||
:
|
||||
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
|
||||
}
|
||||
<div className='my-3 md:flex items-center justify-between space-x-2'>
|
||||
<div className='transfer-input w-full md:w-1/2'>
|
||||
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.amount}
|
||||
name='amount'
|
||||
type="text"
|
||||
placeholder='Amount'
|
||||
required
|
||||
onChange={handleChange}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
label="Amount"
|
||||
type="text"
|
||||
name="amount"
|
||||
value={inputs.amount}
|
||||
inputHandler={handleChange}
|
||||
onMouseEnter={()=>{setNewFee(false)}}
|
||||
onMouseLeave={()=>{setNewFee(true)}}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<div className='transfer-input w-full md:w-1/2'>
|
||||
<label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={sendMoneyFee.fee}
|
||||
name='fee'
|
||||
type="text"
|
||||
placeholder='Fee'
|
||||
required
|
||||
disabled
|
||||
/>
|
||||
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
label="Fee"
|
||||
type="text"
|
||||
name="fee"
|
||||
value={sendMoneyFee.fee}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='my-3 md:flex items-center justify-end space-x-2'>
|
||||
<div className='transfer-input w-full md:w-1/2'>
|
||||
<label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={sendMoneyFee.total}
|
||||
name='total'
|
||||
type="text"
|
||||
placeholder='Total'
|
||||
required
|
||||
disabled
|
||||
/>
|
||||
<div className='md:flex items-center justify-end'>
|
||||
<div className="field w-full lg:w-1/2 mb-6">
|
||||
<InputCom
|
||||
label="Total"
|
||||
type="text"
|
||||
name="total"
|
||||
value={sendMoneyFee.total}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='relative my-3 md:flex items-center'>
|
||||
<div className='transfer-input w-full'>
|
||||
<div className='flex items-center justify-start'>
|
||||
<label className='text-slate-600 text-lg'>Recipient
|
||||
<div className='flex items-center justify-start py-2'>
|
||||
<label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient
|
||||
<span className='text-red-500 mx-2'>*</span>
|
||||
<span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
|
||||
</label>
|
||||
<Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
|
||||
<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='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
|
||||
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
|
||||
{recepients.loading ?
|
||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
||||
:
|
||||
@@ -168,18 +165,23 @@ function TransferFund({payment, wallet}) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='my-3 md:flex items-center'>
|
||||
<div className='transfer-input w-full'>
|
||||
<label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.comment}
|
||||
name='comment'
|
||||
type="text"
|
||||
placeholder='Comment'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field w-full mb-6">
|
||||
{/* <InputCom
|
||||
label="Comment"
|
||||
type="text"
|
||||
name="comment"
|
||||
value={inputs.comment}
|
||||
inputHandler={handleChange}
|
||||
/> */}
|
||||
<label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
|
||||
<textarea style={{resize: 'none'}}
|
||||
className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none'
|
||||
name="comment"
|
||||
value={inputs.comment}
|
||||
onChange={handleChange}
|
||||
cols="30"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='transfer-fund-btn flex justify-end items-center py-4'>
|
||||
|
||||
@@ -165,6 +165,17 @@ class usersService {
|
||||
return this.postAuxEnd("/recipients", postData);
|
||||
}
|
||||
|
||||
//END POINT CALL FOR UPDATE PROFILE
|
||||
addRecipient(data){
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
...data
|
||||
};
|
||||
return this.postAuxEnd("/addrecipient", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET SEND MONEY FEE
|
||||
getSendMoneyFee(amount){
|
||||
var postData = {
|
||||
|
||||
Reference in New Issue
Block a user