Compare commits

...

5 Commits

Author SHA1 Message Date
victorAnumudu 94ced78c82 tranfer fund input validation done 2023-04-27 17:01:30 +01:00
ameye b3582be38c Merge branch 'adding_recipient' of WrenchBoard/Users-Wrench into master 2023-04-27 12:58:03 +00:00
ameye 73cc1ef485 Merge branch 'verify-signup' of WrenchBoard/Users-Wrench into master 2023-04-27 12:57:59 +00:00
victorAnumudu 39b3218545 merged master to branch 2023-04-27 13:52:21 +01:00
victorAnumudu e26330af9a handling adding recipient done 2023-04-27 13:49:19 +01:00
4 changed files with 214 additions and 146 deletions
@@ -15,6 +15,8 @@ export default function InputCom({
onClick,
disable,
blurHandler,
onMouseEnter,
onMouseLeave
}) {
const inputRef = useRef(null)
// Entry Validation
@@ -90,6 +92,7 @@ export default function InputCom({
ref={inputRef}
readOnly={disable}
onBlur={blurHandler}
onMouseLeave={onMouseLeave}
/>
{iconName && (
<div className="absolute right-6 bottom-[10px] z-10">
+46 -11
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'
@@ -18,7 +21,7 @@ const validationSchema = Yup.object().shape({
.max(25, 'Maximum 25 characters')
.required('Lastname is required'),
country: Yup.string()
.min(1, 'Minimum 3 characters')
.min(1, 'Minimum 1 characters')
.max(25, 'Maximum 25 characters')
.required('Country is required'),
bank: Yup.string()
@@ -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>
)}
+154 -135
View File
@@ -2,28 +2,43 @@ 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'
import {toast} from 'react-toastify'
import {Formik, Form} from 'formik'
import * as Yup from 'yup'
const validationSchema = Yup.object().shape({
amount: Yup.number()
.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')
.max(50, 'Maximum 50 characters')
.required('Recipient is required'),
})
const initialValues = {
amount: '',
recipient: '',
comment: '',
}
function TransferFund({payment, wallet}) {
const apiCall = new usersService()
let [newFee, setNewFee] = useState(false)
let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
loading: true,
data: [],
error: false
})
let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
//STATE FOR CONTROLLED INPUTS
let [inputs, setInputs] = useState({
amount: '0',
recipient: '',
comment: ''
})
//FUNCTION TO GET RECIPIENT LIST
const getRecipients = ()=>{
@@ -39,158 +54,162 @@ function TransferFund({payment, wallet}) {
}
//FUNCTION TO GET SEND MONEY FEE
const getSendMoneyFee = ()=>{
let {amount} = inputs
const getSendMoneyFee = ({target:{value}})=>{
setSendMoneyFee({loading: true, fee: 0, total: 0})
let amount = value
if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
setSendMoneyFee({fee: 0, total: 0})
setSendMoneyFee({loading: false, fee: 0, total: 0})
return
}
apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
}).catch((error)=>{
setSendMoneyFee({fee: 0, total: 0})
setSendMoneyFee({loading: false, fee: 0, total: 0})
})
}
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({target:{name, value}}) => {
setInputs(prev => ({...prev, [name]:value}))
}
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = (e) => {
e.preventDefault();
const handleSubmit = () => {
// setRequestStatus({message: '', loading: true, status: false})
let reqData = {}
//valid inputs before submitting. Just for texting remove later. check amoutn to be number
setInputs({
amount: '0',
recipient: '',
comment: ''
})
// MAKE API CALL
}
useEffect(()=>{
getRecipients()
getSendMoneyFee()
},[newFee])
},[])
return (
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
<form className='transfer-fund-info' onSubmit={handleSubmit}>
{wallet.loading ?
<LoadingSpinner size='8' color='sky-blue' />
:
wallet.data.length ?
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
{wallet.data.map(item => {
if(item.description == 'Naira'){
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
}
})}
</h2>
:
wallet.error ?
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
:
<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}
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>
</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>
</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
<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>
</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}>
{recepients.loading ?
<option className='text-slate-500 text-lg' value="">Loading...</option>
:
recepients.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>
))}
</>
:
recepients.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>
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
{(props)=>{
return (
<Form className='transfer-fund-info'>
{wallet.loading ?
<LoadingSpinner size='8' color='sky-blue' />
:
wallet.data.length ?
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
{wallet.data.map(item => {
if(item.description == 'Naira'){
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
}
})}
</h2>
:
wallet.error ?
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
:
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
}
</select>
</div>
</div>
<div className="xl:flex xl:space-x-7 mb-6">
<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>
<div className="field w-full mb-6 xl:mb-0">
<InputCom
label="Amount"
type="text"
name="amount"
placeholder='0'
value={props.values.amount}
inputHandler={props.handleChange}
blurHandler={props.handleBlur}
onMouseLeave={(e)=>{getSendMoneyFee(e)}}
/>
{(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
</div>
<div className="field w-full">
<InputCom
label="Fee"
type="text"
name="fee"
value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.fee}
disable={true}
/>
</div>
</div>
<div className='transfer-fund-btn flex justify-end items-center py-4'>
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
</div>
</form>
<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.loading ? 'loading' : sendMoneyFee.total}
disable={true}
/>
</div>
</div>
<div className='w-full'>
<div className='relative my-3 md:flex items-center'>
<div className='transfer-input w-full'>
<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-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 ?
<option className='text-slate-500 text-lg' value="">Loading...</option>
:
recepients.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>
))}
</>
:
recepients.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>
}
</select>
</div>
</div>
{(props.errors.recipient && props.touched.recipient) && <p className="text-sm text-red-500">{props.errors.recipient}</p>}
</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={props.values.comment}
onChange={props.handleChange}
onBlur={props.handleBlur}
cols="30"
rows="2"
/>
</div>
<div className='transfer-fund-btn flex justify-end items-center py-4'>
<button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
</div>
</Form>
)
}}
</Formik>
</div>
</div>
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
{payment.loading ?
+11
View File
@@ -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 = {