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

added family wallet page

Browse Source
This commit was merged in pull request #617.
This commit is contained in:
victorAnumudu
2024-03-06 16:12:55 +01:00
parent cf8f32ed64
commit cf2df7529d
11 changed files with 338 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Routers.jsx
+3 -2
View File
@@ -64,6 +64,7 @@ import FamAIQuestionPage from "./views/FamAIQuestionPage"
import FamMyFilesPage from "./views/FamMyFilesPage" import FamMyFilesPage from "./views/FamMyFilesPage"
import FamWorkInProgressPage from "./views/FamWorkInProgressPage"; import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
import MyPastDueTasksPage from "./views/MyPastDueTasksPage"; import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
import FamilyWalletPage from "./views/FamilyWalletPage";
export default function Routers() { export default function Routers() {
return ( return (
@@ -124,13 +125,13 @@ export default function Routers() {
<Route exact path="/notification" element={<Notification />} /> <Route exact path="/notification" element={<Notification />} />
<Route exact path="/market-place" element={<MarketPlacePage />} /> <Route exact path="/market-place" element={<MarketPlacePage />} />
<Route exact path="/shop-details" element={<ShopDetailsPage />} /> <Route exact path="/shop-details" element={<ShopDetailsPage />} />
<Route exact path="/my-wallet" element={<MyWalletPage />} /> <Route exact path="/my-collection" element={<MyCollection />} />*/}
<Route exact path="/my-collection" element={<MyCollection />} />*/}
<Route exact path="/reminders" element={<RemindersPage />} /> <Route exact path="/reminders" element={<RemindersPage />} />
<Route exact path="/tracking" element={<TrackingPage />} /> <Route exact path="/tracking" element={<TrackingPage />} />
<Route exact path="/calendar" element={<CalendarPage />} /> <Route exact path="/calendar" element={<CalendarPage />} />
<Route exact path="/resources" element={<ResourcePage />} /> <Route exact path="/resources" element={<ResourcePage />} />
<Route exact path="/my-wallet/*" element={<MyWalletPage />} /> <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
<Route exact path="/family-wallet" element={<FamilyWalletPage />} />
<Route exact path="/my-coupon" element={<MyCouponPage />} /> <Route exact path="/my-coupon" element={<MyCouponPage />} />
<Route exact path="/notification" element={<Notification />} /> <Route exact path="/notification" element={<Notification />} />
<Route exact path="/market-place" element={<MarketPlacePage />} /> <Route exact path="/market-place" element={<MarketPlacePage />} />
src/components/Home/FamilyDash.jsx
+8 -6
View File
@@ -42,14 +42,16 @@ export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
<div> <div>
<div className="home-page-wrapper"> <div className="home-page-wrapper">
{/* Header */} {/* Header */}
<div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center"> <div className="text-white mb-4 min-h-[3rem] px-2 w-full flex justify-between items-center rounded-xl bg-family-header-bg">
<div className="w-full flex flex-wrap gap-x-4"> <div className="w-full">
<p className="text-lg font-normal leading-5">Welcome</p> <div className="w-full flex flex-wrap gap-x-4 ">
<div className=""> <p className="text-lg font-normal leading-5">Welcome</p>
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1> <div className="">
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
</div>
</div> </div>
</div> </div>
<div className="w-full text-sm flex justify-end items-end"> <div className="py-1 w-full text-sm text-right self-end">
<p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p> <p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
</div> </div>
</div> </div>
src/components/MyWallet/FamilyWallet.jsx
+95
View File
@@ -0,0 +1,95 @@
import React, { Suspense, lazy, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import usersService from "../../services/UsersService";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
const FamilyWallet = () => {
const apiCall = new usersService();
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
const { walletTable } = useSelector((state) => state.tableReload);
const [paymentHistory, setPaymentHistory] = useState({
loading: true,
data: [],
});
const [allCountries, setAllCountries] = useState({
// STATE TO HOLD LIST OF COUNTRIES
loading: true,
data: [],
});
const getPaymentHistory = () => {
apiCall
.getPaymentHx()
.then((res) => {
if (res.data.internal_return < 0) {
setPaymentHistory({ loading: false, data: [] });
} else {
setPaymentHistory({ loading: false, data: res.data?.result_list });
}
})
.catch(() => {
setPaymentHistory({ loading: false, data: [] });
});
};
// FUNCTION TO GET COUNTRIES
const getCountry = () => {
apiCall
.getSignupCountryData()
.then((res) => {
if (res?.data?.internal_return < 0) {
setAllCountries((prev) => ({ loading: false, data: [] }));
return;
}
setAllCountries((prev) => ({
loading: false,
data: res?.data?.result_list,
}));
})
.catch((error) => {
setAllCountries((prev) => ({ loading: false, data: [] }));
});
};
useEffect(() => {
getCountry();
getPaymentHistory();
}, [walletTable]);
console.log(
"Testing all country: ",
allCountries,
"Testing wallet: ",
walletDetails
);
return (
<Layout>
<div className='mb-4'>
<CustomBreadcrumb
title={'Wallet'}
breadcrumb = {
[
{ link: "/", title: "Home" },
{ link: '/family-wallet', title: 'Wallet', active: true},
]
}
/>
</div>
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<FamilyWalletBox
wallet={walletDetails}
payment={paymentHistory}
countries={allCountries.data}
/>
</Suspense>
</Layout>
);
};
export default FamilyWallet;
src/components/MyWallet/FamilyWalletBox.jsx
+34
View File
@@ -0,0 +1,34 @@
import { useSelector } from "react-redux";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";
import WalletItemCardFamily from "./WalletItemCardFamily";
/**
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
*/
export default function FamilyWalletBox({ wallet, payment, countries }) {
const { loading, data } = wallet;
const { userDetails } = useSelector((state) => state.userDetails);
const accountType = userDetails?.account_type === "FAMILY";
return (
<div className="my-wallet-wrapper w-full mb-10">
<div className="main-wrapper w-full">
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
{loading ? (
<div className="w-full h-full flex items-center justify-center bg-white">
<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
</div>
) : (
data.length > 0 && data.map((item) => (
<div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
<WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
</div>
))
)}
</div>
</div>
</div>
);
}
src/components/MyWallet/WalletBox.jsx
-16
View File
@@ -15,21 +15,6 @@ export default function WalletBox({ wallet, payment, countries }) {
return ( return (
<div className="my-wallet-wrapper w-full mb-10"> <div className="my-wallet-wrapper w-full mb-10">
<div className="main-wrapper w-full"> <div className="main-wrapper w-full">
{accountType ?
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
{loading ? (
<div className="w-full h-full flex items-center justify-center">
<LoadingSpinner size="16" color="sky-blue" />
</div>
) : (
data.length > 0 && data.map((item) => (
<div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
<WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
</div>
))
)}
</div>
:
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto"> <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
{loading ? ( {loading ? (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
@@ -43,7 +28,6 @@ export default function WalletBox({ wallet, payment, countries }) {
)) ))
)} )}
</div> </div>
}
</div> </div>
</div> </div>
); );
src/components/MyWallet/WalletHeader.jsx
+184 -172
View File
@@ -7,8 +7,11 @@ import Icons from "../Helpers/Icons";
import Accordion from "../Helpers/Accordion"; import Accordion from "../Helpers/Accordion";
import { PriceFormatter } from "../Helpers/PriceFormatter"; import { PriceFormatter } from "../Helpers/PriceFormatter";
import localImgLoad from "../../lib/localImgLoad"; import localImgLoad from "../../lib/localImgLoad";
import { useSelector } from "react-redux";
export default function WalletHeader(props) { export default function WalletHeader(props) {
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
// debugger; // debugger;
//props.myWalletList.result_list //props.myWalletList.result_list
let { pathname } = useLocation(); let { pathname } = useLocation();
@@ -21,187 +24,196 @@ export default function WalletHeader(props) {
} }
return ( return (
<> <>
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4"> {account_type == 'FULL' ?
<div <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
onClick={() => props.handlerBalance()} <div
className="flex items-center lg:justify-between justify-center w-full h-full" onClick={() => props.handlerBalance()}
> className="flex items-center lg:justify-between justify-center w-full h-full"
<span className="lg:block hidden"> >
<Icons name="wallet" /> <span className="lg:block hidden">
</span> <Icons name="wallet" />
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p> </span>
<span className="lg:block hidden"> <p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
<Icons name="deep-plus" /> <span className="lg:block hidden">
</span> <Icons name="deep-plus" />
</div> </span>
<div
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
props.balanceDropdown ? "active" : ""
}`}
>
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
Wallet
</h3>
</div> </div>
<div className="content px-7 pb-7"> <div
<ul> className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
{props.myWalletList && props.balanceDropdown ? "active" : ""
props.myWalletList?.length > 0 && }`}
props.myWalletList.map((value, index) => >
{ <div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png' <h3 className="text-xl font-bold text-dark-gray dark:text-white">
return( Wallet
<li </h3>
key={index} </div>
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple" <div className="content px-7 pb-7">
onClick={onWalletClick} <ul>
> {props.myWalletList &&
<div className="sm:flex justify-between items-center"> props.myWalletList?.length > 0 &&
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0"> props.myWalletList.map((value, index) =>
<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={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" /> let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
return(
<li
key={index}
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
onClick={onWalletClick}
>
<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={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
</div>
<div className="name">
<p className="text-2xl font-bold text-dark-gray dark:text-white">
{value.description}
</p>
</div>
</div> </div>
<div className="name"> <div>
<p className="text-2xl font-bold text-dark-gray dark:text-white"> <p className="eth text-xl font-bold text-purple">
{value.description} {PriceFormatter(value.amount * 0.01, value.code)}
</p> </p>
</div> </div>
</div> </div>
<div> </li>
<p className="eth text-xl font-bold text-purple"> )
{PriceFormatter(value.amount * 0.01, value.code)} }
</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">*/} {/*<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="sm:flex justify-between items-center">*/}
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} {/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <div*/} {/* <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 ">*/} {/* 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=""/>*/} {/* <img src={bank1} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="name">*/} {/* <div className="name">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* MetaMask*/} {/* MetaMask*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/* <div>*/} {/* <div>*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* 75,320 ETH*/} {/* 75,320 ETH*/}
{/* </p>*/} {/* </p>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/* (773.69 USD)*/} {/* (773.69 USD)*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/*</li>*/} {/*</li>*/}
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/} {/*<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="sm:flex justify-between items-center">*/}
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} {/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <div*/} {/* <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 ">*/} {/* 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={bank2} alt=""/>*/} {/* <img src={bank2} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="name">*/} {/* <div className="name">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* Coinbase Wallet*/} {/* Coinbase Wallet*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/* <div>*/} {/* <div>*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* 56,124 ETH*/} {/* 56,124 ETH*/}
{/* </p>*/} {/* </p>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/* (773.69 USD)*/} {/* (773.69 USD)*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/*</li>*/} {/*</li>*/}
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/} {/*<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="sm:flex justify-between items-center">*/}
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} {/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <div*/} {/* <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 ">*/} {/* 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={bank3} alt=""/>*/} {/* <img src={bank3} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="name">*/} {/* <div className="name">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* Bitski*/} {/* Bitski*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/* <div>*/} {/* <div>*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* 99,123 ETH*/} {/* 99,123 ETH*/}
{/* </p>*/} {/* </p>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/* (773.69 USD)*/} {/* (773.69 USD)*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/*</li>*/} {/*</li>*/}
{/*<li className="content-item py-5">*/} {/*<li className="content-item py-5">*/}
{/* <div className="sm:flex justify-between items-center">*/} {/* <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="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <div*/} {/* <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 ">*/} {/* 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={bank4} alt=""/>*/} {/* <img src={bank4} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="name">*/} {/* <div className="name">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* WalletConnect*/} {/* WalletConnect*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/* <div>*/} {/* <div>*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* 43,728 ETH*/} {/* 43,728 ETH*/}
{/* </p>*/} {/* </p>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/* (773.69 USD)*/} {/* (773.69 USD)*/}
{/* </p>*/} {/* </p>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* </div>*/}
{/*</li>*/} {/*</li>*/}
</ul> </ul>
<div className="add-money-btn flex justify-center items-center mt-3"> <div className="add-money-btn flex justify-center items-center mt-3">
{/* <button {/* <button
onClick={() => { onClick={() => {
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle() if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
else navigate('/my-wallet', {replace: true}) else navigate('/my-wallet', {replace: true})
}} }}
type="button" type="button"
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
Manage Manage
</button> */} </button> */}
<Link <Link
to="/my-wallet" to="/my-wallet"
onClick={onWalletClick} onClick={onWalletClick}
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
Manage Manage
</Link> </Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> :
{/*<div*/} <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/} <div
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/} onClick={() => navigate("/family-wallet", { replace: true })}
{/* <p className="lg:text-xl text-lg font-bold text-white">*/} className="flex items-center lg:justify-between justify-center w-full h-full"
{/* $ 234,435.34*/} >
{/* </p>*/} <span className="lg:block hidden">
{/* </div>*/} <Icons name="wallet" />
{/*</div>*/} </span>
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
<span className="lg:block hidden">
<Icons name="deep-plus" />
</span>
</div>
</div>
}
<div className="lg:hidden block"></div> <div className="lg:hidden block"></div>
</> </>
); );
src/components/MyWallet/WalletItemCard.jsx
+1 -3
View File
@@ -34,9 +34,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
dispatch(tableReload({ type: "WALLETTABLE" })); dispatch(tableReload({ type: "WALLETTABLE" }));
}; };
const currentWalletCurrency = countries const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
// .map((country) => country)
.filter((country) => country.code === walletItem.country);
const image = walletItem.code const image = walletItem.code
? `${walletItem.code.toLowerCase()}.svg` ? `${walletItem.code.toLowerCase()}.svg`
src/components/MyWallet/WalletItemCardFamily.jsx
+1 -3
View File
@@ -34,9 +34,7 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
dispatch(tableReload({ type: "WALLETTABLE" })); dispatch(tableReload({ type: "WALLETTABLE" }));
}; };
const currentWalletCurrency = countries const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
// .map((country) => country)
.filter((country) => country.code === walletItem.country);
const image = walletItem.code const image = walletItem.code
? `${walletItem.code.toLowerCase()}.svg` ? `${walletItem.code.toLowerCase()}.svg`
src/components/Partials/Header.jsx
+4 -1
View File
@@ -20,6 +20,9 @@ import TimeDifference from "../Helpers/TimeDifference";
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg"); const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
export default function Header({ logoutModalHandler, sidebarHandler }) { export default function Header({ logoutModalHandler, sidebarHandler }) {
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
const [balanceDropdown, setbalanceValue] = useToggle(false); const [balanceDropdown, setbalanceValue] = useToggle(false);
const [notificationDropdown, setNotificationValue] = useToggle(false); const [notificationDropdown, setNotificationValue] = useToggle(false);
const [userProfileDropdown, setProfileDropdown] = useToggle(false); const [userProfileDropdown, setProfileDropdown] = useToggle(false);
@@ -402,7 +405,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</li> </li>
)} )}
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg"> <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="/my-wallet" className="notifications"> <Link to={ account_type == "FULL" ? "/my-wallet" : "/family-wallet"} className="notifications">
<div className="name"> <div className="name">
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium"> <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
My Wallet My Wallet
src/views/FamilyWalletPage.jsx
+5
View File
@@ -0,0 +1,5 @@
import FamilyWallet from "../components/MyWallet/FamilyWallet";
export default function FamilyWalletPage() {
return <FamilyWallet />;
}
tailwind.config.js
+3
View File
@@ -23,6 +23,9 @@ module.exports = {
screens:{ screens:{
xxs: '400px', xxs: '400px',
xxl:'1900px' xxl:'1900px'
},
backgroundImage: {
'family-header-bg': "linear-gradient(90deg, rgba(45,126,241,1) 0%, rgba(58,143,195,1) 0%, rgba(11,100,119,1) 100%)",
} }
}, },
}, },