mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
7093b49962
* feat: add billing page to admin * some adjustments to billing page * add BillingHistory, remove invoices, misc improvements * refactor based on instanceStatus logic, add dialog * fix: cleanup * some refactoring and alignment with figma * add extend, isBilling, refactoring and misc improvements * fix: update tests * refactor: reorganize billing into smaller components, misc improvements * add STRIPE flag, some refactoring and adapting to comments and discussion * adapt BillingHistory slightly, refactor TextCell * Update src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> * refactor: address PR comments * fix: adjust divider color * fix: update snaps * refactor: address PR comments * fix: update snaps * fix: amountFormatted typo Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import AdminMenu from '../menu/AdminMenu';
|
|
import { PageContent } from 'component/common/PageContent/PageContent';
|
|
import { useContext } from 'react';
|
|
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import AccessContext from 'contexts/AccessContext';
|
|
import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
|
|
import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
|
|
import { Alert } from '@mui/material';
|
|
import { BillingDashboard } from './BillingDashboard/BillingDashboard';
|
|
import { BillingHistory } from './BillingHistory/BillingHistory';
|
|
import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
|
|
|
|
export const Billing = () => {
|
|
const { instanceStatus, isBilling } = useInstanceStatus();
|
|
const { invoices } = useInvoices();
|
|
const { hasAccess } = useContext(AccessContext);
|
|
|
|
return (
|
|
<div>
|
|
<AdminMenu />
|
|
<PageContent header="Billing">
|
|
<ConditionallyRender
|
|
condition={isBilling}
|
|
show={
|
|
<ConditionallyRender
|
|
condition={hasAccess(ADMIN)}
|
|
show={() => (
|
|
<>
|
|
<BillingDashboard
|
|
instanceStatus={instanceStatus!}
|
|
/>
|
|
<BillingHistory data={invoices} />
|
|
</>
|
|
)}
|
|
elseShow={() => <AdminAlert />}
|
|
/>
|
|
}
|
|
elseShow={
|
|
<Alert severity="error">
|
|
Billing is not enabled for this instance.
|
|
</Alert>
|
|
}
|
|
/>
|
|
</PageContent>
|
|
</div>
|
|
);
|
|
};
|