diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
index 40be642a5b..a8a7e48f40 100644
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@@ -368,6 +368,14 @@ type TBillingLinkCardAction = {
src: string;
}
+type TInvoice = {
+ id: number
+ amount: number
+ currency: string
+ payout_date: string
+ receipt_url: string
+}
+
declare module 'axios' {
interface AxiosResponse {
httpError?: IJSONObject;
diff --git a/packages/web/src/components/Invoices/index.ee.tsx b/packages/web/src/components/Invoices/index.ee.tsx
new file mode 100644
index 0000000000..b64bc3a6ab
--- /dev/null
+++ b/packages/web/src/components/Invoices/index.ee.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { DateTime } from 'luxon';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+
+import useInvoices from 'hooks/useInvoices.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function Invoices() {
+ const formatMessage = useFormatMessage();
+ const { invoices } = useInvoices();
+
+ return (
+
+
+
+
+
+ {formatMessage('invoices.invoices')}
+
+
+
+
+
+
+
+
+ {formatMessage('invoices.date')}
+
+
+
+
+
+ {formatMessage('invoices.amount')}
+
+
+
+
+
+ {formatMessage('invoices.invoice')}
+
+
+
+
+
+
+ {invoices.map((invoice, invoiceIndex) => (
+
+ {invoiceIndex !== 0 && }
+
+
+
+
+ {DateTime.fromISO(invoice.payout_date).toFormat('LLL dd, yyyy')}
+
+
+
+
+ €{invoice.amount}
+
+
+
+
+
+ {formatMessage('invoices.link')}
+
+
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/packages/web/src/graphql/queries/get-invoices.ee.ts b/packages/web/src/graphql/queries/get-invoices.ee.ts
new file mode 100644
index 0000000000..1710debf6b
--- /dev/null
+++ b/packages/web/src/graphql/queries/get-invoices.ee.ts
@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const GET_INVOICES = gql`
+ query GetInvoices {
+ getInvoices {
+ id
+ amount
+ currency
+ payout_date
+ receipt_url
+ }
+ }
+`;
+
diff --git a/packages/web/src/hooks/useBillingAndUsageData.ee.ts b/packages/web/src/hooks/useBillingAndUsageData.ee.ts
index 0d16ca2bd6..5d6e844659 100644
--- a/packages/web/src/hooks/useBillingAndUsageData.ee.ts
+++ b/packages/web/src/hooks/useBillingAndUsageData.ee.ts
@@ -7,7 +7,8 @@ import { GET_BILLING_AND_USAGE } from 'graphql/queries/get-billing-and-usage.ee'
function transform(billingAndUsageData: NonNullable) {
const nextBillDate = billingAndUsageData.subscription.nextBillDate;
const nextBillDateTitle = nextBillDate.title;
- const relativeNextBillDateTitle = nextBillDateTitle ? DateTime.fromMillis(Number(nextBillDateTitle)).toFormat('LLL dd, yyyy') as string : '';
+ const nextBillDateTitleDateObject = DateTime.fromMillis(Number(nextBillDateTitle));
+ const formattedNextBillDateTitle = nextBillDateTitleDateObject.isValid ? nextBillDateTitleDateObject.toFormat('LLL dd, yyyy') : nextBillDateTitle;
return {
...billingAndUsageData,
@@ -15,7 +16,7 @@ function transform(billingAndUsageData: NonNullable
+
+
+
+
);