added family wallet page
This commit was merged in pull request #617.
This commit is contained in:
victorAnumudu
+3
-2
@@ -64,6 +64,7 @@ import FamAIQuestionPage from "./views/FamAIQuestionPage"
|
||||
import FamMyFilesPage from "./views/FamMyFilesPage"
|
||||
import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
|
||||
import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
|
||||
import FamilyWalletPage from "./views/FamilyWalletPage";
|
||||
|
||||
export default function Routers() {
|
||||
return (
|
||||
@@ -124,13 +125,13 @@ export default function Routers() {
|
||||
<Route exact path="/notification" element={<Notification />} />
|
||||
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
||||
<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="/tracking" element={<TrackingPage />} />
|
||||
<Route exact path="/calendar" element={<CalendarPage />} />
|
||||
<Route exact path="/resources" element={<ResourcePage />} />
|
||||
<Route exact path="/my-wallet/*" element={<MyWalletPage />} />
|
||||
<Route exact path="/family-wallet" element={<FamilyWalletPage />} />
|
||||
<Route exact path="/my-coupon" element={<MyCouponPage />} />
|
||||
<Route exact path="/notification" element={<Notification />} />
|
||||
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
||||
|
||||
@@ -42,14 +42,16 @@ export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
|
||||
<div>
|
||||
<div className="home-page-wrapper">
|
||||
{/* Header */}
|
||||
<div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center">
|
||||
<div className="w-full flex flex-wrap gap-x-4">
|
||||
<p className="text-lg font-normal leading-5">Welcome</p>
|
||||
<div className="">
|
||||
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
|
||||
<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">
|
||||
<div className="w-full flex flex-wrap gap-x-4 ">
|
||||
<p className="text-lg font-normal leading-5">Welcome</p>
|
||||
<div className="">
|
||||
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -15,21 +15,6 @@ export default function WalletBox({ wallet, payment, countries }) {
|
||||
return (
|
||||
<div className="my-wallet-wrapper w-full mb-10">
|
||||
<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">
|
||||
{loading ? (
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -7,8 +7,11 @@ import Icons from "../Helpers/Icons";
|
||||
import Accordion from "../Helpers/Accordion";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function WalletHeader(props) {
|
||||
|
||||
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
|
||||
// debugger;
|
||||
//props.myWalletList.result_list
|
||||
let { pathname } = useLocation();
|
||||
@@ -21,187 +24,196 @@ export default function WalletHeader(props) {
|
||||
}
|
||||
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">
|
||||
<div
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
{account_type == 'FULL' ?
|
||||
<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">
|
||||
<div
|
||||
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>
|
||||
<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 className="content px-7 pb-7">
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.length > 0 &&
|
||||
props.myWalletList.map((value, index) =>
|
||||
{
|
||||
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
|
||||
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 className="content px-7 pb-7">
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.length > 0 &&
|
||||
props.myWalletList.map((value, index) =>
|
||||
{
|
||||
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 className="name">
|
||||
<p className="text-2xl font-bold text-dark-gray dark:text-white">
|
||||
{value.description}
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</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">*/}
|
||||
{/* <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">*/}
|
||||
{/* MetaMask*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 75,320 ETH*/}
|
||||
{/* </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">*/}
|
||||
{/* <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={bank2} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Coinbase Wallet*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 56,124 ETH*/}
|
||||
{/* </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">*/}
|
||||
{/* <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={bank3} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Bitski*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 99,123 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-5">*/}
|
||||
{/* <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={bank4} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* WalletConnect*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 43,728 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||
else navigate('/my-wallet', {replace: true})
|
||||
}}
|
||||
type="button"
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button> */}
|
||||
<Link
|
||||
to="/my-wallet"
|
||||
onClick={onWalletClick}
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</Link>
|
||||
{/*<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">*/}
|
||||
{/* MetaMask*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 75,320 ETH*/}
|
||||
{/* </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">*/}
|
||||
{/* <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={bank2} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Coinbase Wallet*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 56,124 ETH*/}
|
||||
{/* </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">*/}
|
||||
{/* <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={bank3} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Bitski*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 99,123 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-5">*/}
|
||||
{/* <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={bank4} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* WalletConnect*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 43,728 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||
else navigate('/my-wallet', {replace: true})
|
||||
}}
|
||||
type="button"
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button> */}
|
||||
<Link
|
||||
to="/my-wallet"
|
||||
onClick={onWalletClick}
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div*/}
|
||||
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
||||
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
||||
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
||||
{/* $ 234,435.34*/}
|
||||
{/* </p>*/}
|
||||
{/* </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">
|
||||
<div
|
||||
onClick={() => navigate("/family-wallet", { replace: true })}
|
||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||
>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="wallet" />
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -34,9 +34,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
};
|
||||
|
||||
const currentWalletCurrency = countries
|
||||
// .map((country) => country)
|
||||
.filter((country) => country.code === walletItem.country);
|
||||
const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
|
||||
|
||||
const image = walletItem.code
|
||||
? `${walletItem.code.toLowerCase()}.svg`
|
||||
|
||||
@@ -34,9 +34,7 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
};
|
||||
|
||||
const currentWalletCurrency = countries
|
||||
// .map((country) => country)
|
||||
.filter((country) => country.code === walletItem.country);
|
||||
const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
|
||||
|
||||
const image = walletItem.code
|
||||
? `${walletItem.code.toLowerCase()}.svg`
|
||||
|
||||
@@ -20,6 +20,9 @@ import TimeDifference from "../Helpers/TimeDifference";
|
||||
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
|
||||
|
||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
|
||||
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
|
||||
|
||||
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
||||
const [notificationDropdown, setNotificationValue] = useToggle(false);
|
||||
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
|
||||
@@ -402,7 +405,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</li>
|
||||
)}
|
||||
<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">
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
My Wallet
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import FamilyWallet from "../components/MyWallet/FamilyWallet";
|
||||
|
||||
export default function FamilyWalletPage() {
|
||||
return <FamilyWallet />;
|
||||
}
|
||||
@@ -23,6 +23,9 @@ module.exports = {
|
||||
screens:{
|
||||
xxs: '400px',
|
||||
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%)",
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user