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>
src/components/Spinners/LoadingSpinner.jsx
+16
View File
@@ -0,0 +1,16 @@
import React from 'react'
function LoadingSpinner({size, color}) {
return (
<div className='flex items-center justify-center'>
<div role="status">
<svg aria-hidden="true" className={`w-${size} h-${size} text-gray-200 animate-spin dark:text-gray-600 fill-${color}`} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
</svg>
</div>
</div>
)
}
export default LoadingSpinner
src/services/UsersService.js
+34 -7
View File
@@ -140,17 +140,44 @@ class usersService {
return this.postAuxEnd("/couponpending", postData);
}
// API FUNCTION TO GET COUPON HISTORY
getCouponHx(){
var postData = {
uuid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
page:0,
limit :100
};
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
page:1,
limit :20,
action: 85025
};
return this.postAuxEnd("/couponhx", postData);
}
getPurchaseHx(){
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
page:1,
limit :20,
action: 15049
};
return this.postAuxEnd("/purchasehx", postData);
}
// API FUNCTION TO GET PAYMENT HISTORY
getPaymentHx(){
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
page:1,
limit :20,
action: 15046
};
return this.postAuxEnd("/paymenthx", postData);
}
getCouponRedeem(){
var postData = {
uuid: localStorage.getItem("uid"),