From ee4437753d8029f5b50be37af9601b80d33b0ae7 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 24 Apr 2023 10:06:51 +0100 Subject: [PATCH] wallet page implentation --- src/components/MyWallet/AddFund.jsx | 29 ++-- src/components/MyWallet/Balance.jsx | 138 +++++++++--------- src/components/MyWallet/TransferFund.jsx | 15 +- src/components/MyWallet/Wallet.jsx | 94 +++++++++++- .../MyWallet/WalletComponent/CouponTable.jsx | 47 ++++++ .../WalletComponent/PurchasesTable.jsx | 47 ++++++ .../WalletComponent/RecentActivityTable.jsx | 47 ++++++ src/components/MyWallet/WalletHeader.jsx | 51 ++++--- src/components/Spinners/LoadingSpinner.jsx | 16 ++ src/services/UsersService.js | 41 +++++- 10 files changed, 393 insertions(+), 132 deletions(-) create mode 100644 src/components/MyWallet/WalletComponent/CouponTable.jsx create mode 100644 src/components/MyWallet/WalletComponent/PurchasesTable.jsx create mode 100644 src/components/MyWallet/WalletComponent/RecentActivityTable.jsx create mode 100644 src/components/Spinners/LoadingSpinner.jsx diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx index c50dda1..8660c34 100644 --- a/src/components/MyWallet/AddFund.jsx +++ b/src/components/MyWallet/AddFund.jsx @@ -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() {
-
+

Recent Activity

Activity Report

- - - - - - - - - - - - - - - - - -
DateRecipientAmount/FeeConf/Status
ItemItemItemItem
+ {payment.loading ? + + : + + }
diff --git a/src/components/MyWallet/Balance.jsx b/src/components/MyWallet/Balance.jsx index 46e6965..3125134 100644 --- a/src/components/MyWallet/Balance.jsx +++ b/src/components/MyWallet/Balance.jsx @@ -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 (
+ {/* WALLET SECTION */}
@@ -12,20 +17,25 @@ function Balance() {

Add New Wallet

{/* wallet balance */} -
+ {wallet.loading ? + + : + wallet.data.length ? + wallet.data.map((item, index)=> ( +

Currency

- Naira -

Naira

+ {item.description} +

{item.symbol}

balance

- ₦0.00 + {item.symbol}{(item.amount*1).toFixed(2)}

Escrow

- ₦0.00 + {item.symbol}{(item.escrow*1).toFixed(2)}
@@ -34,85 +44,71 @@ function Balance() { Top Up
+ )) + : + wallet.error ? + ( +
+

Opps! An Error occurred, please try again

+
+ ) + : + ( +
+

No Wallets Found!

+
+ ) + } {/* end of wallet balance */}
- + {/* END OF WALLET SECTION */} + + + {/* RECENT ACTIVITY SECTION */}
-
+

Recent Activity

Activity Report

- - - - - - - - - - - - - - - - - -
DateRecipientAmount/FeeConf/Status
ItemItemItemItem
+ {payment.loading ? + + : + + }
+ {/* END OF RECENT ACTIVITY SECTION */}
- + +
-
-
-

Purchases

- - - - - - - - - - - - - - - - - -
DateDescriptionAmountFee
ItemItemItemItem
-
-
- + {/* PURCHASE SECTION */}
-
-

Coupons

- - - - - - - - - - - - - - - - - -
DateDescriptionAmountActive
ItemItemItemItem
+
+

Purchases

+ {purchase.loading ? + + : + + }
+ {/* END OF PURCHASE SECTION */} + + {/* COUPON SECTION */} +
+
+

Coupons

+ {coupon.loading ? + + : + + } +
+
+ {/* END OF COUPON SECTION */}
+
) } diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx index 715dc69..27b913b 100644 --- a/src/components/MyWallet/TransferFund.jsx +++ b/src/components/MyWallet/TransferFund.jsx @@ -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() {
-
+

Recent Activity

Activity Report

- + {/*
@@ -131,7 +133,12 @@ function TransferFund() { -
DateItem
+ */} + {payment.loading ? + + : + + }
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 2aeb381..884efb9 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -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 ( }> - } /> - } /> - } /> + } /> + } /> + } /> } /> } /> diff --git a/src/components/MyWallet/WalletComponent/CouponTable.jsx b/src/components/MyWallet/WalletComponent/CouponTable.jsx new file mode 100644 index 0000000..29a695c --- /dev/null +++ b/src/components/MyWallet/WalletComponent/CouponTable.jsx @@ -0,0 +1,47 @@ +import React from 'react' + +function CouponTable({coupon}) { + return ( + + + + + + + + + + {coupon.data.length ? + ( + + {coupon.data.map((item, index) => ( + + + + + + + ))} + + ) + : + coupon.error ? + ( + + + + + + ) + : + + + + + + } +
DateDescriptionAmountActive
{item.added}{item.code}{item.amount}{item.status}
Opps! an error occurred. Please try again!
No Purchase History Found!
+ ) +} + +export default CouponTable \ No newline at end of file diff --git a/src/components/MyWallet/WalletComponent/PurchasesTable.jsx b/src/components/MyWallet/WalletComponent/PurchasesTable.jsx new file mode 100644 index 0000000..8c90fdc --- /dev/null +++ b/src/components/MyWallet/WalletComponent/PurchasesTable.jsx @@ -0,0 +1,47 @@ +import React from 'react' + +function PurchasesTable({purchase}) { + return ( + + + + + + + + + + {purchase.data.length ? + ( + + {purchase.data.map((item, index) => ( + + + + + + + ))} + + ) + : + purchase.error ? + ( + + + + + + ) + : + + + + + + } +
DateDescriptionAmountFee
{item.trx_date}{item.amount}{item.status}
Opps! an error occurred. Please try again!
No Purchase History Found!
+ ) +} + +export default PurchasesTable \ No newline at end of file diff --git a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx new file mode 100644 index 0000000..841002d --- /dev/null +++ b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx @@ -0,0 +1,47 @@ +import React from 'react' + +function RecentActivityTable({payment}) { + return ( + + + + + + + + + + {payment.data.length ? + ( + + {payment.data.map((item, index) => ( + + + + + + + ))} + + ) + : + payment.error ? + ( + + + + + + ) + : + + + + + + } +
DateRecipientAmount/FeeConf/Status
{item.trx_date}{item.amount}/{item.fee}{item.status}
Opps! an error occurred. Please try again!
No Payment History Found!
+ ) +} + +export default RecentActivityTable \ No newline at end of file diff --git a/src/components/MyWallet/WalletHeader.jsx b/src/components/MyWallet/WalletHeader.jsx index 1c19632..d769841 100644 --- a/src/components/MyWallet/WalletHeader.jsx +++ b/src/components/MyWallet/WalletHeader.jsx @@ -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) => ( - <> -
  • -
    -
    -
    - -
    -
    -

    - {value.description} -

    -
    + props.myWalletList.result_list.map((value, index) => ( +
  • +
    +
    +
    +
    -
    -

    - {value.amount*0.01} {value.code} -

    -

    - {/*(773.69 USD)*/} +

    +

    + {value.description}

    -
    • - - +
    +

    + {(value.amount*1).toFixed(2)} {value.code} +

    +

    + {/*(773.69 USD)*/} +

    +
    +
    + ))} {/*
  • */} @@ -163,14 +161,15 @@ export default function WalletHeader(props) { {/* */} {/*
    • */} -
    - + */} + Manage
    diff --git a/src/components/Spinners/LoadingSpinner.jsx b/src/components/Spinners/LoadingSpinner.jsx new file mode 100644 index 0000000..ed48666 --- /dev/null +++ b/src/components/Spinners/LoadingSpinner.jsx @@ -0,0 +1,16 @@ +import React from 'react' + +function LoadingSpinner({size, color}) { + return ( +
    +
    + +
    +
    + ) +} + +export default LoadingSpinner \ No newline at end of file diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 1e1dd37..433c132 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -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"),