+
+
+
Welcome
+
+
{`${userDetails?.firstname} ${userDetails?.lastname}`}
+
-
+
Last Login: {`${userDetails?.last_login.split(' ')[0]}`}
diff --git a/src/components/MyWallet/FamilyWallet.jsx b/src/components/MyWallet/FamilyWallet.jsx
new file mode 100644
index 0000000..0deb90e
--- /dev/null
+++ b/src/components/MyWallet/FamilyWallet.jsx
@@ -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 (
+
+
+
+
+ }>
+
+
+
+ );
+};
+
+export default FamilyWallet;
diff --git a/src/components/MyWallet/FamilyWalletBox.jsx b/src/components/MyWallet/FamilyWalletBox.jsx
new file mode 100644
index 0000000..133589b
--- /dev/null
+++ b/src/components/MyWallet/FamilyWalletBox.jsx
@@ -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 (
+
+
+
+ {loading ? (
+
+
+
+ ) : (
+ data.length > 0 && data.map((item) => (
+
+
+
+ ))
+ )}
+
+
+
+ );
+}
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index e3ff49d..cd6f636 100644
--- a/src/components/MyWallet/WalletBox.jsx
+++ b/src/components/MyWallet/WalletBox.jsx
@@ -15,21 +15,6 @@ export default function WalletBox({ wallet, payment, countries }) {
return (
- {accountType ?
-
- {loading ? (
-
-
-
- ) : (
- data.length > 0 && data.map((item) => (
-
-
-
- ))
- )}
-
- :
{loading ? (
@@ -43,7 +28,6 @@ export default function WalletBox({ wallet, payment, countries }) {
))
)}
- }
);
diff --git a/src/components/MyWallet/WalletHeader.jsx b/src/components/MyWallet/WalletHeader.jsx
index d6282d6..4b86292 100644
--- a/src/components/MyWallet/WalletHeader.jsx
+++ b/src/components/MyWallet/WalletHeader.jsx
@@ -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 (
<>
-
-
props.handlerBalance()}
- className="flex items-center lg:justify-between justify-center w-full h-full"
- >
-
-
-
-
Wallet
-
-
-
-
-
-
-
- Wallet
-
+ {account_type == 'FULL' ?
+
+
props.handlerBalance()}
+ className="flex items-center lg:justify-between justify-center w-full h-full"
+ >
+
+
+
+
Wallet
+
+
+
-
-
- {props.myWalletList &&
- props.myWalletList?.length > 0 &&
- props.myWalletList.map((value, index) =>
- {
- let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
- return(
- -
-
-
-
-
})
+
+
+
+ Wallet
+
+
+
+
+ {props.myWalletList &&
+ props.myWalletList?.length > 0 &&
+ props.myWalletList.map((value, index) =>
+ {
+ let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+ return(
+ -
+
+
+
+
})
+
+
+
+ {value.description}
+
+
-
-
- {value.description}
+
+
+ {PriceFormatter(value.amount * 0.01, value.code)}
-
-
- {PriceFormatter(value.amount * 0.01, value.code)}
-
-
-
-
- )
- }
- )}
+
+ )
+ }
+ )}
- {/*- */}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*

*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* MetaMask*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* 75,320 ETH*/}
- {/*
*/}
- {/*
*/}
- {/* (773.69 USD)*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* */}
- {/*- */}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*

*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* Coinbase Wallet*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* 56,124 ETH*/}
- {/*
*/}
- {/*
*/}
- {/* (773.69 USD)*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* */}
- {/*- */}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*

*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* Bitski*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* 99,123 ETH*/}
- {/*
*/}
- {/*
*/}
- {/* (773.69 USD)*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* */}
- {/*- */}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*

*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* WalletConnect*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* 43,728 ETH*/}
- {/*
*/}
- {/*
*/}
- {/* (773.69 USD)*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* */}
-
-
- {/*
*/}
-
- Manage
-
+ {/*
- */}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*

*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* MetaMask*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* 75,320 ETH*/}
+ {/*
*/}
+ {/*
*/}
+ {/* (773.69 USD)*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* */}
+ {/*
- */}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*

*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* Coinbase Wallet*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* 56,124 ETH*/}
+ {/*
*/}
+ {/*
*/}
+ {/* (773.69 USD)*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* */}
+ {/*
- */}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*

*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* Bitski*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* 99,123 ETH*/}
+ {/*
*/}
+ {/*
*/}
+ {/* (773.69 USD)*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* */}
+ {/*
- */}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*

*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* WalletConnect*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* 43,728 ETH*/}
+ {/*
*/}
+ {/*
*/}
+ {/* (773.69 USD)*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/* */}
+
+
+ {/* */}
+
+ Manage
+
+
-
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/* $ 234,435.34*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
+ :
+
+
navigate("/family-wallet", { replace: true })}
+ className="flex items-center lg:justify-between justify-center w-full h-full"
+ >
+
+
+
+
Wallet
+
+
+
+
+
+ }
>
);
diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx
index daf2c13..4b3ce3f 100644
--- a/src/components/MyWallet/WalletItemCard.jsx
+++ b/src/components/MyWallet/WalletItemCard.jsx
@@ -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`
diff --git a/src/components/MyWallet/WalletItemCardFamily.jsx b/src/components/MyWallet/WalletItemCardFamily.jsx
index 4600e17..b647bdd 100644
--- a/src/components/MyWallet/WalletItemCardFamily.jsx
+++ b/src/components/MyWallet/WalletItemCardFamily.jsx
@@ -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`
diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx
index 2e3a7a4..97678f7 100644
--- a/src/components/Partials/Header.jsx
+++ b/src/components/Partials/Header.jsx
@@ -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 }) {
)}
-
-
+
My Wallet
diff --git a/src/views/FamilyWalletPage.jsx b/src/views/FamilyWalletPage.jsx
new file mode 100644
index 0000000..9a52cb9
--- /dev/null
+++ b/src/views/FamilyWalletPage.jsx
@@ -0,0 +1,5 @@
+import FamilyWallet from "../components/MyWallet/FamilyWallet";
+
+export default function FamilyWalletPage() {
+ return ;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e3a086e..236c3fd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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%)",
}
},
},