diff --git a/src/RouteLinks.js b/src/RouteLinks.js index d623096..0601eb2 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -3,6 +3,7 @@ const RouteLinks = { homePage: '/', customerPage: '/customer', accountDetails: '/account-view/*', + accountEdit:'/account-edit/*', subscriptionDetails: '/subscription-view/*', subscriptions: '/subscriptions', billings: '/billings', diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 6ec2d79..73c621d 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -24,7 +24,7 @@ import SubscriptionDetailsPage from "./pages/SubscriptionDetailsPage"; import CountrySettingsPage from "./pages/CountrySettingsPage"; import ProductViewPage from "./pages/ProductViewPage"; import FilesUploadPage from "./pages/FilesUploadPage"; // TRANSACTION DETAILS PAGE - +import AccountEditpage from "./pages/AccountEditPage"; // const Home = lazy(() => import('./pages/Home')); @@ -39,6 +39,8 @@ export default function SiteRoutes() { }/> {`*/SUBSCRIPTIONS PAGE*/`} }/> {`*/CUSTOMER PAGE*/`} }/> {`*/CUSTOMER PAGE*/`} + }/> {`*/CUSTOMER EDIT PAGE*/`} + }/> {`*/BILLINGS PAGE*/`} }/> {`*/PRODUCTS PAGE*/`} }/> {`*/PRODUCTS VIEW PAGE*/`} diff --git a/src/components/account_edit/AccountEditCom.jsx b/src/components/account_edit/AccountEditCom.jsx new file mode 100644 index 0000000..014f59e --- /dev/null +++ b/src/components/account_edit/AccountEditCom.jsx @@ -0,0 +1,79 @@ +import { useEffect } from "react"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; + +import { useLocation, useNavigate } from "react-router-dom"; + +import BreadcrumbCom from "../breadcrumb/BreadcrumbCom"; +import RouteLinks from "../../RouteLinks"; +import { getAccountView } from "../../services/siteServices"; +import queryKeys from "../../services/queryKeys"; +// import CustomerAccountView from "./CustomerAccountView"; +// import AccountProfileView from "./AccountProfileView"; +// import CustomerSubscriptionsView from "./CustomerSubscriptionsView"; +// import CustomerPaymentsView from "./CustomerPaymentsView"; + +export default function AccountEditCom() { + const queryClient = useQueryClient(); + + const { state } = useLocation(); + const navigate = useNavigate(); + + useEffect(() => { + if (!state?.memberUID) { + navigate(RouteLinks.homePage, { replace: true }); + } + }, [navigate, state?.memberUID]); + + const { data, isFetching, isError, error } = useQuery({ + queryKey: queryKeys.account_view, + queryFn: () => { + // const filterData = filter?.type ? {[filter?.type]: filter.id} : {} + const reqData = { + member_uid: state?.memberUID, + // page, + // ...filterData + }; + return getAccountView(reqData); + }, + staleTime: 0, //0 mins + }); + const accountsViewData = data?.data; // ACCOUNT VIEW DATA + const account_info = accountsViewData?.account; + const account_profile = accountsViewData?.account_profile; + const subscriptions = accountsViewData?.subscriptions; + const payments = accountsViewData?.payments; + + useEffect(() => { + queryClient.refetchQueries({ + queryKey: [...queryKeys.account_view], + // type: 'active', + // exact: true, + }); + }, [queryClient, state?.memberUID]); + + return ( +
+ + +
+ {isFetching ? ( + <> +

Loading...

+ + ) : isError ? ( +

{error.message}

+ ) : ( + <> + {/* + + + */} + + )} +
+
+ ); +} diff --git a/src/components/account_view/CustomerAccountView.jsx b/src/components/account_view/CustomerAccountView.jsx index 8dfdd03..02c48cc 100644 --- a/src/components/account_view/CustomerAccountView.jsx +++ b/src/components/account_view/CustomerAccountView.jsx @@ -71,8 +71,7 @@ export default function CustomerAccountView({accountInfo}) {
- diff --git a/src/components/layouts/rightaside/RecentPaymentsBar.jsx b/src/components/layouts/rightaside/RecentPaymentsBar.jsx index 2c4125f..fe4dab8 100644 --- a/src/components/layouts/rightaside/RecentPaymentsBar.jsx +++ b/src/components/layouts/rightaside/RecentPaymentsBar.jsx @@ -1,86 +1,143 @@ -import React from 'react' -import {Link} from 'react-router-dom' -import Img from '../../../assets/user_avatar.jpg' -import CustomCounter from '../../CustomCounter' +import React from "react"; +import { Link } from "react-router-dom"; +import Img from "../../../assets/user_avatar.jpg"; +import CustomCounter from "../../CustomCounter"; -export default function RecentPaymentsBar({data, isFetching, isError, error}) { - - const recentPayment = data?.data?.recent_payment_summary - const recentLogin = data?.data?.recent_login +export default function RecentPaymentsBar({ + data, + isFetching, + isError, + error, +}) { + const recentPayment = data?.data?.recent_payment_summary; + const recentLogin = data?.data?.recent_login; + const systemList = data?.data?.system_url; - return ( -
-
-

Recent Payments [7 days]

- {isFetching ? -
-
-
- : - isError ? -

{error?.message}

- : -
-
-

- -

-

Approved

-
-
-

- -

-

Verified

-
-
-

- -

-

Failed

-
-
-

- -

-

Total

-
-
- } + + return ( +
+
+

+ Recent Payments [7 days] +

+ {isFetching ? ( +
+
+
+ ) : isError ? ( +

+ {error?.message} +

+ ) : ( +
+
+

+ +

+

Approved

-
-

Recent Login

- {isFetching ? -
-
-
- : - isError ? -

{error?.message}

- : -
- {recentLogin.map((item, index)=> { - return ( - -
- Order -
-
-

{item.firstname} {item.lastname}

-

{item.username}

-
- - ) - } - )} -
- } +
+

+ +

+

Verified

-
- ) +
+

+ +

+

Failed

+
+
+

+ +

+

Total

+
+
+ )} +
+
+

Systems

+ {isFetching ? ( +
+
+
+ ) : isError ? ( +

+ {error?.message} +

+ ) : ( +
+ {systemList.map((item, index) => { + return ( + +
+ Order +
+
+

+ {item.name} +

+

{item.url}

+
+ + ); + })} +
+ )} +
+
+

Recent Login

+ {isFetching ? ( +
+
+
+ ) : isError ? ( +

+ {error?.message} +

+ ) : ( +
+ {recentLogin.map((item, index) => { + return ( + +
+ Order +
+
+

+ {item.firstname} {item.lastname} +

+

{item.username}

+
+ + ); + })} +
+ )} +
+
+ ); } diff --git a/src/pages/AccountEditPage.jsx b/src/pages/AccountEditPage.jsx new file mode 100644 index 0000000..d028aa5 --- /dev/null +++ b/src/pages/AccountEditPage.jsx @@ -0,0 +1,7 @@ +import React from 'react' +import AccountEditCom from "../components/account_edit/AccountEditCom"; +export default function AccountEditPage() { + return ( + + ) +}