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

wallet page implentation

Browse Source
This commit is contained in:
victorAnumudu
2023-04-24 10:06:51 +01:00
parent 1fbf3d2f90
commit ee4437753d
10 changed files with 393 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFund.jsx
+9 -20
View File
@@ -1,6 +1,8 @@
import React, {useState} from 'react'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
function AddFund() {
function AddFund({payment}) {
//STATE FOR CONTROLLED INPUTS
let [inputs, setInputs] = useState('0')
@@ -53,27 +55,14 @@ function AddFund() {
</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-[500px] 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-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-gray-600 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/Fee</th>
<th className="py-3">Conf/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>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
{payment.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<RecentActivityTable payment={payment}/>
}
</div>
</div>
</div>
src/components/MyWallet/Balance.jsx
+67 -71
View File
@@ -1,10 +1,15 @@
import React, {useState} from 'react'
import { Link } from 'react-router-dom'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import PurchasesTable from './WalletComponent/PurchasesTable'
import CouponTable from './WalletComponent/CouponTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
function Balance() {
function Balance({wallet, payment, coupon, purchase}) {
return (
<div className="content-wrapper">
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
{/* WALLET SECTION */}
<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 bg-white dark:bg-dark-white rounded-2xl shadow">
<div className='flex items-baseline justify-between'>
@@ -12,20 +17,25 @@ function Balance() {
<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>
</div>
{/* wallet balance */}
<div className="md:flex items-center flex-wrap mt-3">
{wallet.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
wallet.data.length ?
wallet.data.map((item, index)=> (
<div key={index} className="md:flex items-center flex-wrap my-3 border-t-2 border-slate-400">
<div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
<div className='balance-info'>
<p className='py-2'>Currency</p>
<span className='text-base'>Naira</span>
<p className='text-base text-slate-500'>Naira</p>
<span className='text-base'>{item.description}</span>
<p className='text-base text-slate-500'>{item.symbol}</p>
</div>
<div className='balance-info'>
<p className='py-2'>balance</p>
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>&#8358;0.00</span>
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*1).toFixed(2)}</span>
</div>
<div className='balance-info'>
<p className='py-2'>Escrow</p>
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>&#8358;0.00</span>
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*1).toFixed(2)}</span>
</div>
</div>
@@ -34,85 +44,71 @@ function Balance() {
<Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
</div>
</div>
))
:
wallet.error ?
(
<div className="md:flex items-center flex-wrap mt-3">
<p className='text-base'>Opps! An Error occurred, please try again</p>
</div>
)
:
(
<div className="md:flex items-center flex-wrap mt-3">
<p className='text-base'>No Wallets Found!</p>
</div>
)
}
{/* end of wallet balance */}
</div>
</div>
{/* END OF WALLET SECTION */}
{/* RECENT ACTIVITY SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-[200px] 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-[300px] 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/Fee</th>
<th className="py-3">Conf/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>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
{payment.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<RecentActivityTable payment={payment} />
}
</div>
</div>
{/* END OF RECENT ACTIVITY SECTION */}
</div>
<div className='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="wallet w-full md:p-8 p-4 h-[200px] 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'>Purchases</h2>
<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">Description</th>
<th className="py-3">Amount</th>
<th className="py-3">Fee</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>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* PURCHASE SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-[200px] 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'>Coupons</h2>
<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">Description</th>
<th className="py-3">Amount</th>
<th className="py-3">Active</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>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
<div className="wallet w-full md:p-8 p-4 h-full max-h-[200px] 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'>Purchases</h2>
{purchase.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<PurchasesTable purchase={purchase} />
}
</div>
</div>
{/* END OF PURCHASE SECTION */}
{/* COUPON SECTION */}
<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-[200px] 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'>Coupons</h2>
{coupon.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<CouponTable coupon={coupon} />
}
</div>
</div>
{/* END OF COUPON SECTION */}
</div>
</div>
)
}
src/components/MyWallet/TransferFund.jsx
+11 -4
View File
@@ -1,7 +1,9 @@
import React, {useState} from 'react'
import { Link } from 'react-router-dom'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
function TransferFund() {
function TransferFund({payment}) {
//STATE FOR CONTROLLED INPUTS
let [inputs, setInputs] = useState({
@@ -113,10 +115,10 @@ function TransferFund() {
</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-[500px] 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-[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">
{/* <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>
@@ -131,7 +133,12 @@ function TransferFund() {
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
</table> */}
{payment.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<RecentActivityTable payment={payment}/>
}
</div>
</div>
</div>
src/components/MyWallet/Wallet.jsx
+90 -4
View File
@@ -1,5 +1,6 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import {Routes, Route, Outlet, Navigate} from 'react-router-dom'
import usersService from '../../services/UsersService'
import Layout from '../Partials/Layout'
@@ -21,12 +22,97 @@ function Wallet() {
const WalletRoutes = () => {
const apiCall = new usersService()
let [walletList, setWalletList] = useState({ // FOR WALLET LIST
loading: true,
data: [],
error: false
})
let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
loading: true,
data: [],
error: false
})
let [purchaseHistory, setPurchaseHistory] = useState({ // FOR PURCHASE HISTORY
loading: true,
data: [],
error: false
})
let [couponHistory, setCouponHistory] = useState({ // FOR COUPON HISTORY
loading: true,
data: [],
error: false
})
//FUNCTION TO GET WALLET LIST
const getWalletList = ()=>{
apiCall.getUserWallets(null).then((res)=>{
if(res.data.internal_return < 0){ // success but no data
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}))
})
}
//FUNCTION TO GET PAYMENT HISTORY
const getPaymentHistory = ()=>{
apiCall.getPaymentHx().then((res)=>{
if(res.data.internal_return < 0){ // success but no data
setPaymentHistory(prev => ({...prev, loading: false}))
return
}
setPaymentHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
}).catch((error)=>{
setPaymentHistory(prev => ({...prev, loading: false, error: true}))
})
}
//FUNCTION TO GET PURCHASE HISTORY
const getPurchaseHistory = ()=>{
apiCall.getPurchaseHx().then((res)=>{
if(res.data.internal_return < 0){ // success but no data
setPurchaseHistory(prev => ({...prev, loading: false}))
return
}
setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
}).catch((error)=>{
setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
})
}
//FUNCTION TO GET COUPON HISTORY
const getCouponHistory = ()=>{
apiCall.getCouponHx().then((res)=>{
if(res.data.internal_return < 0){ // success but no data
setCouponHistory(prev => ({...prev, loading: false}))
return
}
setCouponHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
}).catch((error)=>{
setCouponHistory(prev => ({...prev, loading: false, error: true}))
})
}
useEffect(()=>{
getWalletList()
getPaymentHistory()
getPurchaseHistory()
getCouponHistory()
}, [])
return (
<Routes>
<Route element={<Wallet />}>
<Route path='add-fund' element={<AddFund />} />
<Route path='transfer-fund' element={<TransferFund />} />
<Route index element={<Balance />} />
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} />} />
<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 />} />
</Route>
src/components/MyWallet/WalletComponent/CouponTable.jsx
+47
View File
@@ -0,0 +1,47 @@
import React from 'react'
function CouponTable({coupon}) {
return (
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="p-2">Date</th>
<th className="p-2">Description</th>
<th className="p-2">Amount</th>
<th className="p-2">Active</th>
</tr>
</thead>
{coupon.data.length ?
(
<tbody>
{coupon.data.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.added}</td>
<td className="p-2">{item.code}</td>
<td className="p-2">{item.amount}</td>
<td className="p-2">{item.status}</td>
</tr>
))}
</tbody>
)
:
coupon.error ?
(
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</tr>
</tbody>
)
:
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>No Purchase History Found!</td>
</tr>
</tbody>
}
</table>
)
}
export default CouponTable
src/components/MyWallet/WalletComponent/PurchasesTable.jsx
+47
View File
@@ -0,0 +1,47 @@
import React from 'react'
function PurchasesTable({purchase}) {
return (
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="p-2">Date</th>
<th className="p-2">Description</th>
<th className="p-2">Amount</th>
<th className="p-2">Fee</th>
</tr>
</thead>
{purchase.data.length ?
(
<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.amount}</td>
<td className="p-2">{item.status}</td>
</tr>
))}
</tbody>
)
:
purchase.error ?
(
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</tr>
</tbody>
)
:
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>No Purchase History Found!</td>
</tr>
</tbody>
}
</table>
)
}
export default PurchasesTable
src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+47
View File
@@ -0,0 +1,47 @@
import React from 'react'
function RecentActivityTable({payment}) {
return (
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="p-2">Date</th>
<th className="p-2">Recipient</th>
<th className="p-2">Amount/Fee</th>
<th className="p-2">Conf/Status</th>
</tr>
</thead>
{payment.data.length ?
(
<tbody>
{payment.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.amount}/{item.fee}</td>
<td className="p-2">{item.status}</td>
</tr>
))}
</tbody>
)
:
payment.error ?
(
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</tr>
</tbody>
)
:
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>No Payment History Found!</td>
</tr>
</tbody>
}
</table>
)
}
export default RecentActivityTable
src/components/MyWallet/WalletHeader.jsx
+25 -26
View File
@@ -1,3 +1,4 @@
import {Link} from 'react-router-dom'
import Icons from "../Helpers/Icons";
import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png";
@@ -41,33 +42,30 @@ export default function WalletHeader(props) {
{props.myWalletList &&
props.myWalletList?.result_list?.length > 0 &&
props.myWalletList.result_list.map((value) => (
<>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div
className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank1} alt=""/>
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
{value.description}
</p>
</div>
props.myWalletList.result_list.map((value, index) => (
<li key={index} className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div
className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank1} alt=""/>
</div>
<div>
<p className="eth text-xl font-bold text-purple">
{value.amount*0.01} {value.code}
</p>
<p className="usd text-base text-thin-light-gray text-right">
{/*(773.69 USD)*/}
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
{value.description}
</p>
</div>
</div>
</li>
</>
<div>
<p className="eth text-xl font-bold text-purple">
{(value.amount*1).toFixed(2)} {value.code}
</p>
<p className="usd text-base text-thin-light-gray text-right">
{/*(773.69 USD)*/}
</p>
</div>
</div>
</li>
))}
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
@@ -163,14 +161,15 @@ export default function WalletHeader(props) {
{/* </div>*/}
{/*</li>*/}
</ul>
<div className="add-money-btn flex justify-center items-center">
<button
<div className="add-money-btn flex justify-center items-center mt-3">
{/* <button
onClick={() => props.addMoneyHandler()}
type="button"
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</button> */}
<Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
</div>
</div>
</div>