victorAnumudu
70 lines
2.5 KiB
React
70 lines
2.5 KiB
React
import {useEffect, useState} from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import {useLocation, useNavigate, Link} 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 {state} = useLocation()
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(()=>{
|
|
if(!state?.memberUID){
|
|
navigate(RouteLinks.homePage, {replace: true})
|
|
}
|
|
},[])
|
|
|
|
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
|
|
// console.log('DATA', payments, subscriptions)
|
|
|
|
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>
|
|
)
|
|
} |