diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index e229527..63cdf45 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -1,9 +1,9 @@ -import React, { Suspense, lazy, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import usersService from "../../services/UsersService"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; -const WalletBox = lazy(() => import("./WalletBox")); +import WalletBox from "./WalletBox"; const WalletRoutes = () => { const apiCall = new usersService(); @@ -62,13 +62,11 @@ const WalletRoutes = () => { return ( - }> - ); }; diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index 15efc15..b9d611e 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -1,7 +1,7 @@ import { useSelector } from "react-redux"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import WalletItemCard from "./WalletItemCard"; -import WalletItemCardFamily from "./WalletItemCardFamily"; +import WalletItemCardVirtual from './walletvirtual/WalletItemCardVirtual' /** * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object. @@ -9,25 +9,32 @@ import WalletItemCardFamily from "./WalletItemCardFamily"; export default function WalletBox({ wallet, payment, countries }) { const { loading, data } = wallet; - const { userDetails } = useSelector((state) => state.userDetails); - const accountType = userDetails?.account_type === "FAMILY"; + // const { userDetails } = useSelector((state) => state.userDetails); + // const accountType = userDetails?.account_type === "FAMILY"; + + // console.log('mumu', data) return (
-
+ {/* xl:grid-cols[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] */} {loading ? (
) : ( - data.length > 0 && data.map((item) => ( -
- -
- )) +
+ { data.length > 0 && data.map((item) => ( +
+ {item.country ? + + : + + } +
+ ))} +
)} -
); diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index b17f8ed..af3a9fe 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) { return ( <>
- - +
+
+ +
{creditPopup.show && ( diff --git a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx new file mode 100644 index 0000000..c5347de --- /dev/null +++ b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx @@ -0,0 +1,88 @@ +import { useState } from "react"; +import ModalCom from "../../Helpers/ModalCom"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import CustomTimer from "../../countdown/CustomTimer"; + +const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { + const [input, setInput] = useState(""); +console.log(walletItem) + return ( + +
+
+

+ {walletItem?.description} +

+ +
+
+ {/*
+
+

Processing payment

+

Please do not refresh

+ + +
+
*/} +
+
+
+ + + + +
+
+
+ + ); +}; + +export default VirtualAddCardPopout; diff --git a/src/components/MyWallet/walletvirtual/WalletActionVirtual.jsx b/src/components/MyWallet/walletvirtual/WalletActionVirtual.jsx new file mode 100644 index 0000000..4fbbaf6 --- /dev/null +++ b/src/components/MyWallet/walletvirtual/WalletActionVirtual.jsx @@ -0,0 +1,23 @@ +import React, { useEffect, useState } from "react"; +import usersService from "../../../services/UsersService"; + + +function WalletActionVirtual({ walletItem, openPopUp, btnText }) { + + return ( +
+
+ +
+
+ ); +} + +export default WalletActionVirtual; diff --git a/src/components/MyWallet/walletvirtual/WalletItemCardVirtual.jsx b/src/components/MyWallet/walletvirtual/WalletItemCardVirtual.jsx new file mode 100644 index 0000000..1868300 --- /dev/null +++ b/src/components/MyWallet/walletvirtual/WalletItemCardVirtual.jsx @@ -0,0 +1,131 @@ +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import localImgLoad from "../../../lib/localImgLoad"; +import { tableReload } from "../../../store/TableReloads"; +import { PriceFormatter } from "../../Helpers/PriceFormatter"; +import WalletActionVirtual from "./WalletActionVirtual"; +import VirtualAddCardPopout from "./VirtualAddCardPopout"; +import WrenchTokenPopout from './WrenchTokenPopout' +import WrenchPointPopout from './WrenchPointPopout' + +/** + * Renders a card displaying information about a wallet item. + */ +export default function WalletItemCardVirtual({ walletItem, payment, countries }) { + + const dispatch = useDispatch(); + const [virtualPopup, setVirtualPopup] = useState({ name: '', data: {} }); + + /** + * Opens the credit popup. + * @param {Object} value - The value object. + */ + const openPopUp = (name, value) => { + setVirtualPopup({ + name: name.toLowerCase(), + data: { ...value }, + }); + }; + + /** + * Closes the credit popup and dispatches a table reload action. + */ + const closePopUp = () => { + setVirtualPopup({ name: false, data: {} }); + // dispatch(tableReload({ type: "WALLETTABLE" })); + }; + + const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country); + + const image = walletItem.code + ? `${walletItem.code.toLowerCase()}.svg` + : "default.png"; + + + return ( + <> +
+
+ {/*
+ currency-icon +
*/} +
+
+

+ {walletItem?.description} +

+ {/*

+ {PriceFormatter( + walletItem.amount * 0.01, + walletItem.code, + undefined, + "text-[2rem]" + )} +

*/} +
+
+
+ + {/* {walletItem.escrow > 0 ? +

+ HOLDINGS :{" "} + + {PriceFormatter( + walletItem.escrow * 0.01, + walletItem.code, + undefined, + "text-[1.5rem]" + )} + +

+ : + null + } */} +
+
+ +
+
+ + {virtualPopup.name == 'add virtual visa' && ( + + )} + + {virtualPopup.name == 'wrench token' && ( + + )} + + {virtualPopup.name == 'wrench points' && ( + + )} + + ); +} diff --git a/src/components/MyWallet/walletvirtual/WrenchPointPopout.jsx b/src/components/MyWallet/walletvirtual/WrenchPointPopout.jsx new file mode 100644 index 0000000..83ede42 --- /dev/null +++ b/src/components/MyWallet/walletvirtual/WrenchPointPopout.jsx @@ -0,0 +1,88 @@ +import { useState } from "react"; +import ModalCom from "../../Helpers/ModalCom"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import CustomTimer from "../../countdown/CustomTimer"; + +const WrenchPointPopout = ({ details, onClose, situation, walletItem }) => { + const [input, setInput] = useState(""); + + return ( + +
+
+

+ {walletItem?.description} +

+ +
+
+ {/*
+
+

Processing payment

+

Please do not refresh

+ + +
+
*/} +
+
+
+ + + + +
+
+
+ + ); +}; + +export default WrenchPointPopout; diff --git a/src/components/MyWallet/walletvirtual/WrenchTokenPopout.jsx b/src/components/MyWallet/walletvirtual/WrenchTokenPopout.jsx new file mode 100644 index 0000000..ede6c63 --- /dev/null +++ b/src/components/MyWallet/walletvirtual/WrenchTokenPopout.jsx @@ -0,0 +1,88 @@ +import { useState } from "react"; +import ModalCom from "../../Helpers/ModalCom"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import CustomTimer from "../../countdown/CustomTimer"; + +const WrenchTokenPopout = ({ details, onClose, situation, walletItem }) => { + const [input, setInput] = useState(""); + + return ( + +
+
+

+ {walletItem?.description} +

+ +
+
+ {/*
+
+

Processing payment

+

Please do not refresh

+ + +
+
*/} +
+
+
+ + + + +
+
+
+ + ); +}; + +export default WrenchTokenPopout;