Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
826fff7acf | ||
|
victorAnumudu
|
bd956cb470 | ||
 ameye
|
80e6f2e3db |
@@ -1,19 +1,58 @@
|
||||
import React, {useState} from 'react'
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
|
||||
function TransferFund({payment}) {
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
|
||||
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
|
||||
|
||||
//STATE FOR CONTROLLED INPUTS
|
||||
let [inputs, setInputs] = useState({
|
||||
amount: '0',
|
||||
fee: '0',
|
||||
recipient: '',
|
||||
total: '0',
|
||||
comment: ''
|
||||
})
|
||||
|
||||
//FUNCTION TO GET RECIPIENT LIST
|
||||
const getRecipients = ()=>{
|
||||
apiCall.getRecipient().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setRecipients(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
setRecipients(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setRecipients(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
}
|
||||
|
||||
//FUNCTION TO GET SEND MONEY FEE
|
||||
const getSendMoneyFee = ()=>{
|
||||
let {amount} = inputs
|
||||
if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
|
||||
setSendMoneyFee({fee: 0, total: 0})
|
||||
return
|
||||
}
|
||||
apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
|
||||
setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
|
||||
}).catch((error)=>{
|
||||
setSendMoneyFee({fee: 0, total: 0})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// FUNCTION TO HANDLE INPUT CHANGE
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setInputs(prev => ({...prev, [name]:value}))
|
||||
@@ -23,22 +62,41 @@ function TransferFund({payment}) {
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
//valid inputs before submitting. Just for texting remove later
|
||||
//valid inputs before submitting. Just for texting remove later. check amoutn to be number
|
||||
|
||||
setInputs({
|
||||
amount: '0',
|
||||
fee: '0',
|
||||
recipient: '',
|
||||
total: '0',
|
||||
comment: ''
|
||||
})
|
||||
}
|
||||
|
||||
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'>
|
||||
<h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : ₦0.00</h2>
|
||||
<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>
|
||||
@@ -49,31 +107,33 @@ function TransferFund({payment}) {
|
||||
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 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.fee}
|
||||
<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
|
||||
onChange={handleChange}
|
||||
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'>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.total}
|
||||
<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
|
||||
onChange={handleChange}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,8 +147,23 @@ function TransferFund({payment}) {
|
||||
</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' name='recipient' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
<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>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,7 +183,7 @@ function TransferFund({payment}) {
|
||||
</div>
|
||||
|
||||
<div className='transfer-fund-btn flex justify-end items-center py-4'>
|
||||
<button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
||||
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -118,22 +193,6 @@ function TransferFund({payment}) {
|
||||
<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">
|
||||
<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>
|
||||
{/* <table className="wallet-activity w-full table-auto border-collapse text-left">
|
||||
<thead className='border-b-2'>
|
||||
<tr className='text-slate-600'>
|
||||
<th className="py-3">Date</th>
|
||||
<th className="py-3">Recipient</th>
|
||||
<th className="py-3">Amount/FeeConf/Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='text-slate-500'>
|
||||
<td className="py-3">Item</td>
|
||||
<td className="py-3">Item</td>
|
||||
<td className="py-3">Item</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table> */}
|
||||
{payment.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
|
||||
@@ -55,7 +55,6 @@ const WalletRoutes = () => {
|
||||
setWalletList(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
console.log('wallet', res)
|
||||
setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setWalletList(prev => ({...prev, loading: false, error: true}))
|
||||
@@ -82,6 +81,7 @@ const WalletRoutes = () => {
|
||||
setPurchaseHistory(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
// console.log('purchase',res.data)
|
||||
setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
|
||||
@@ -111,7 +111,7 @@ const WalletRoutes = () => {
|
||||
<Routes>
|
||||
<Route element={<Wallet />}>
|
||||
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
|
||||
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} />} />
|
||||
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
|
||||
<Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
|
||||
<Route path='*' element={<Navigate to='/' />} />
|
||||
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
||||
|
||||
@@ -16,10 +16,10 @@ function PurchasesTable({purchase}) {
|
||||
<tbody>
|
||||
{purchase.data.map((item, index) => (
|
||||
<tr key={index} className='text-slate-500'>
|
||||
<td className="p-2">{item.trx_date}</td>
|
||||
<td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
|
||||
<td className="p-2">{item.added_date}</td>
|
||||
<td className="p-2">{item.confirmation}</td>
|
||||
<td className="p-2">{item.amount}</td>
|
||||
<td className="p-2">{item.status}</td>
|
||||
<td className="p-2">{item.fee}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@@ -140,6 +140,31 @@ class usersService {
|
||||
return this.postAuxEnd("/couponpending", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET COUPON HISTORY
|
||||
getRecipient(){
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
page:1,
|
||||
limit :20,
|
||||
action: 11175
|
||||
};
|
||||
return this.postAuxEnd("/recipients", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET SEND MONEY FEE
|
||||
getSendMoneyFee(amount){
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
amount,
|
||||
action: 33025
|
||||
};
|
||||
return this.postAuxEnd("/sendmoneyfee", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET COUPON HISTORY
|
||||
getCouponHx(){
|
||||
var postData = {
|
||||
|
||||
Reference in New Issue
Block a user