Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
60ed9e7bcf | ||
 ameye
|
e5fa6544a5 | ||
|
victorAnumudu
|
f55b7186b9 | ||
|
ameye
|
05515333ba | ||
|
victorAnumudu
|
7212ab6cfc | ||
|
ameye
|
020154d51a | ||
|
victorAnumudu
|
e4aadfb627 | ||
|
ameye
|
6a79c3e56f |
@@ -1,4 +1,4 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import React, {memo, useCallback, useEffect, useState} from 'react'
|
||||
import Image from '../../assets/images/taskbanners/default.jpg'
|
||||
|
||||
import usersService from '../../services/UsersService';
|
||||
@@ -9,8 +9,8 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';
|
||||
|
||||
import { AmountTo2DP } from '../Helpers/PriceFormatter';
|
||||
|
||||
function RewardsTable() {
|
||||
|
||||
export const RewardsTable = memo(() => {
|
||||
const apiCall = new usersService()
|
||||
|
||||
let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
|
||||
@@ -30,7 +30,7 @@ function RewardsTable() {
|
||||
|
||||
|
||||
//FUNCTION TO GET FAMILY REWARD HISTORY
|
||||
const getFamilyRewardHistory = ()=>{
|
||||
const getFamilyRewardHistory = useCallback(()=>{
|
||||
apiCall.getFamilyRewardHx().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setFamilyRewardHistory(prev => ({...prev, loading: false}))
|
||||
@@ -40,7 +40,7 @@ function RewardsTable() {
|
||||
}).catch((error)=>{
|
||||
setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
}
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
getFamilyRewardHistory()
|
||||
@@ -99,5 +99,5 @@ function RewardsTable() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
)
|
||||
export default RewardsTable
|
||||
@@ -13,11 +13,15 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import RewardsTable from "./RewardsTable";
|
||||
import JobsCompleted from "./JobsCompleted";
|
||||
|
||||
import TabButton from "../customTabs/TabButton";
|
||||
|
||||
export default function History() {
|
||||
|
||||
const apiCall = new usersService()
|
||||
|
||||
let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
|
||||
const [selectedTab, setSelectedTab] = useState("purchases");
|
||||
const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
|
||||
|
||||
let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
|
||||
loading: true,
|
||||
@@ -222,7 +226,18 @@ export default function History() {
|
||||
{/* <TopHxBox className="mb-11" /> */}
|
||||
<div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
|
||||
{/* switch button */}
|
||||
<div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
|
||||
<div className="grid grid-cols-4 mt-4">
|
||||
{tabs.map((item) => (
|
||||
<TabButton
|
||||
key={item}
|
||||
item={item}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* switch button */}
|
||||
{/* <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
|
||||
<button
|
||||
name="purchases"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
@@ -259,12 +274,12 @@ export default function History() {
|
||||
>
|
||||
Jobs Completed
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* END OF switch button */}
|
||||
<div className="history-tables w-full">
|
||||
<div className="history-tables w-full bg-red-50 overflow-x-auto">
|
||||
{/* PURCHASE SECTION */}
|
||||
{tab == 'purchases' &&
|
||||
<div className="wallet w-full border-t">
|
||||
{selectedTab == 'purchases' &&
|
||||
<div className="wallet w-full">
|
||||
{/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
|
||||
{purchaseHistory.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
|
||||
@@ -276,8 +291,8 @@ export default function History() {
|
||||
{/* END OF PURCHASE SECTION */}
|
||||
|
||||
{/* RECENT ACTIVITY SECTION */}
|
||||
{tab == 'recent' &&
|
||||
<div className="wallet w-full border-t">
|
||||
{selectedTab == 'recent activity' &&
|
||||
<div className="wallet w-full">
|
||||
{/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
|
||||
{/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
|
||||
{paymentHistory.loading ?
|
||||
@@ -290,16 +305,16 @@ export default function History() {
|
||||
{/* END OF RECENT ACTIVITY SECTION */}
|
||||
|
||||
{/* REWARD SECTION */}
|
||||
{tab == 'reward' &&
|
||||
<div className="wallet w-full border-t">
|
||||
{selectedTab == 'rewards' &&
|
||||
<div className="wallet w-full">
|
||||
<RewardsTable />
|
||||
</div>
|
||||
}
|
||||
{/* END OF REWARD SECTION */}
|
||||
|
||||
{/* JOBS COMPLETED SECTION */}
|
||||
{tab == 'jobs_completed' &&
|
||||
<div className="wallet w-full border-t">
|
||||
{selectedTab == 'jobs completed' &&
|
||||
<div className="wallet w-full">
|
||||
<JobsCompleted />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -260,13 +260,13 @@ function AddFundDollars(props) {
|
||||
{/* switch button */}
|
||||
<div className="flex">
|
||||
<form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="job-label my-1">
|
||||
{countryWallet == "US" && "Payment Method"}
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
|
||||
</label>
|
||||
<label
|
||||
htmlFor="new"
|
||||
className={`cursor-pointer flex items-center gap-1 ${
|
||||
className={`flex items-center gap-1 ${
|
||||
payListCards.data.length >= MaxNoOfCards
|
||||
? "pointer-events-none"
|
||||
: ""
|
||||
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
|
||||
{/* Inputs */}
|
||||
{/* Name */}
|
||||
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
<label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
Name:
|
||||
</label>
|
||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
|
||||
className={`flex items-center justify-between mb-2.5`}
|
||||
>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Month{" "}
|
||||
|
||||
@@ -131,7 +131,7 @@ function AddFundPop({
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="job-label my-1">
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<div className="field w-full max-w-[250px]">
|
||||
|
||||
@@ -9,7 +9,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
|
||||
return (
|
||||
<div className="logout-modal-body w-full">
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="content-wrapper w-full h-[32rem] flex flex-col justify-center">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
@@ -59,12 +59,12 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
|
||||
{data?.internal_return >= 0 &&
|
||||
data?.result !== "Charge failed" && (
|
||||
<div className="w-full md:w-[60%] mx-auto">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
<div className="w-full max-w-[300px] mx-auto">
|
||||
<div className="flex gap-8 my-2">
|
||||
<h1 className="w-full job-label">
|
||||
Amount({data?.currency || ""})
|
||||
</h1>
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
<span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{`${data?.symbol || ""} ${
|
||||
Number(data?.amount * 0.01).toFixed(2) || ""
|
||||
}`}
|
||||
@@ -72,22 +72,22 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
</div>
|
||||
|
||||
{data?.curr_balance &&
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
<div className="flex gap-8 my-2">
|
||||
<h1 className="w-full job-label">
|
||||
Wallet Balance
|
||||
</h1>
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
<span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{(data?.curr_balance * 0.01).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
{isSuccess && (
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
<div className="flex gap-8 my-2">
|
||||
<h1 className="w-full job-label">
|
||||
Confirmation Number
|
||||
</h1>
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
<span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{data?.confirmation}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
|
||||
return (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details flex items-center gap-3">
|
||||
<h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
|
||||
<h1 className="text-base">
|
||||
{description} Card
|
||||
</h1>
|
||||
<p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
|
||||
<p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
|
||||
Bank **************{digits}
|
||||
</p>
|
||||
</div>
|
||||
@@ -49,10 +49,11 @@ function AmountSection({ currency, amount, country }) {
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-8`}>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedAmount}
|
||||
</span>
|
||||
</div>
|
||||
@@ -68,10 +69,10 @@ function TransactionFeeSection({ currency, fee, country }) {
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-8 border-b border-gray-600`}>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Transaction Fee
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedFee}
|
||||
</span>
|
||||
</div>
|
||||
@@ -89,10 +90,10 @@ function TotalSection({ currency, amount, fee, country }) {
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-8`}>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Total
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedTotal}
|
||||
</span>
|
||||
</div>
|
||||
@@ -380,7 +381,7 @@ function ConfirmAddFund({
|
||||
<div className="flex items-center gap-8">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
className="min-w-[150px] job-label"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
@@ -395,11 +396,12 @@ function ConfirmAddFund({
|
||||
<div
|
||||
className={`gap-8 flex items-center`}
|
||||
>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Reference No
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{__confirmData?.credit_reference}
|
||||
<span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{/* Displays only half of the string */}
|
||||
{__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -34,7 +34,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
<ModalCom
|
||||
action={onClose}
|
||||
situation={situation}
|
||||
className="assign-task-popup"
|
||||
>
|
||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="modal-header-con">
|
||||
|
||||
@@ -16,7 +16,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
||||
|
||||
return (
|
||||
<div className="counters w-full flex justify-between gap-2">
|
||||
<div className="w-1/2 flex justify-center items-center">
|
||||
<div className="w-1/2 flex justify-start items-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
|
||||
@@ -28,7 +28,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
||||
Spend
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center">
|
||||
<div className="w-1/2 flex justify-end items-center">
|
||||
<button
|
||||
className="logout-btn btn-gradient text-white"
|
||||
onClick={() => {
|
||||
@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span className="">Add Credit</span>
|
||||
Add Credit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ function RecentActivityTable({ payment }) {
|
||||
<thead className="border-b-2">
|
||||
<tr className="text-slate-600">
|
||||
<th className="p-2">Date</th>
|
||||
<th className="p-4">Trx.</th>
|
||||
<th className="p-2">Trx.</th>
|
||||
<th className="p-2">Amnt./Fee</th>
|
||||
<th className="p-2">Status</th>
|
||||
</tr>
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
|
||||
className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
|
||||
style={{
|
||||
background: `url(${background}) 0% 0% / cover no-repeat`,
|
||||
}}
|
||||
@@ -86,7 +86,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div className="my-2 w-full h-[1px] bg-white"></div>
|
||||
<div className="w-full h-[1px] bg-white"></div>
|
||||
|
||||
<WalletAction
|
||||
walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function RightSideBar({ myJobList }) {
|
||||
return (
|
||||
<>
|
||||
<div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
|
||||
<div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-6 2xl:border-none border ">
|
||||
<div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 w-full 2xl:mb-6 2xl:border-none border ">
|
||||
{/* heading */}
|
||||
<div className="heading flex justify-between items-center mb-3.5">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
@@ -280,7 +280,7 @@ export default function RightSideBar({ myJobList }) {
|
||||
{/*JOB LINKS*/}
|
||||
{userDetails?.account_type !== "FAMILY" &&
|
||||
myJobList?.data?.result_list?.length > 0 && (
|
||||
<div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
|
||||
<div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 w-full 2xl:mb-10 2xl:border-none border ">
|
||||
{/* heading */}
|
||||
<div className="px-8 heading flex justify-between items-center mb-3.5">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
|
||||
return (
|
||||
<button
|
||||
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
|
||||
selectedTab === item
|
||||
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
|
||||
: "bg-white text-[#000]"
|
||||
}`}
|
||||
value={item}
|
||||
name={item}
|
||||
onClick={() => setSelectedTab(item)}
|
||||
>
|
||||
<div
|
||||
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
|
||||
selectedTab === item
|
||||
? "border-white bg-emerald-500"
|
||||
: "border-red-50 dark:border-[#D85A5A] bg-white"
|
||||
}`}
|
||||
></div>
|
||||
{item[0].toUpperCase() + item.slice(1)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
+3
-3
@@ -183,7 +183,7 @@
|
||||
@apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
|
||||
}
|
||||
.logout-btn {
|
||||
@apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
|
||||
@apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1103,6 +1103,6 @@ TODO: Responsive ===========================
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.assign-task-popup {
|
||||
/* .assign-task-popup {
|
||||
top: 75px;
|
||||
}
|
||||
} */
|
||||
|
||||
Reference in New Issue
Block a user