1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-06 00:07:44 +01:00
unleash.unleash/frontend/src/component/admin/billing/Billing.tsx
Nuno Góis 7093b49962 feat: add billing page to admin (#993)
* 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>
2022-05-25 23:26:05 +02:00

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>
);
};