80 lines
2.5 KiB
React
80 lines
2.5 KiB
React
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 AccountViewCom() {
|
|
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 (
|
|
<div className="w-full flex flex-col gap-8">
|
|
<BreadcrumbCom
|
|
title={`Account View [${state?.memberUID}]`}
|
|
paths={["Dashboard", "Account View"]}
|
|
/>
|
|
|
|
<div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
|
|
{isFetching ? (
|
|
<>
|
|
<p className="text-slate-800">Loading...</p>
|
|
</>
|
|
) : isError ? (
|
|
<p className="text-red-500">{error.message}</p>
|
|
) : (
|
|
<>
|
|
<CustomerAccountView accountInfo={account_info} />
|
|
<AccountProfileView profile={account_profile} />
|
|
<CustomerSubscriptionsView subscriptions={subscriptions} />
|
|
<CustomerPaymentsView payments={payments} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|