diff --git a/src/Routers.jsx b/src/Routers.jsx index cd0f515..345f832 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -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() { } /> } /> } /> - } /> - } />*/} + } />*/} } /> } /> } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/Home/FamilyDash.jsx b/src/components/Home/FamilyDash.jsx index 6f84983..f4f081f 100644 --- a/src/components/Home/FamilyDash.jsx +++ b/src/components/Home/FamilyDash.jsx @@ -42,14 +42,16 @@ export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
{/* Header */} -
-
-

Welcome

-
-

{`${userDetails?.firstname} ${userDetails?.lastname}`}

+
+
+
+

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%)", } }, },