Merge pull request #1026 from automatisch/invoices-section

feat: add invoices on billing and usage page

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;

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 (
+    <React.Fragment>
+      <Card sx={{ mb: 3, p: 2 }}>
+        <CardContent sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Box sx={{ mb: 2, display: 'flex', justifyContent: 'space-between' }}>
+            <Typography variant="h6" fontWeight="bold">
+              {formatMessage('invoices.invoices')}
+            </Typography>
+          </Box>
+
+          <Divider sx={{ mb: 2 }} />
+
+          <Grid container item xs={12} spacing={1} alignItems="stretch">
+            <Grid item xs={5}>
+              <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+                {formatMessage('invoices.date')}
+              </Typography>
+            </Grid>
+
+            <Grid item xs={5}>
+              <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+                {formatMessage('invoices.amount')}
+              </Typography>
+            </Grid>
+
+            <Grid item xs={2}>
+              <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+                {formatMessage('invoices.invoice')}
+              </Typography>
+            </Grid>
+          </Grid>
+
+          <Divider sx={{ mt: 2 }} />
+
+          {invoices.map((invoice, invoiceIndex) => (
+            <React.Fragment key={invoice.id}>
+              {invoiceIndex !== 0 && <Divider sx={{ mt: 2 }} />}
+
+              <Grid
+                container
+                item
+                xs={12}
+                spacing={1}
+                alignItems="stretch"
+                sx={{ mt: 1 }}
+              >
+                <Grid item xs={5}>
+                  <Typography
+                    variant="subtitle2"
+                    fontWeight="500"
+                    sx={{ color: 'text.secondary' }}
+                  >
+                    {DateTime.fromISO(invoice.payout_date).toFormat('LLL dd, yyyy')}
+                  </Typography>
+                </Grid>
+
+                <Grid item xs={5}>
+                  <Typography variant="subtitle2">€{invoice.amount}</Typography>
+                </Grid>
+
+                <Grid item xs={2}>
+                  <Typography variant="subtitle2">
+                    <Link target="_blank" href={invoice.receipt_url}>
+                      {formatMessage('invoices.link')}
+                    </Link>
+                  </Typography>
+                </Grid>
+              </Grid>
+            </React.Fragment>
+          ))}
+        </CardContent>
+      </Card>
+    </React.Fragment>
+  );
+}

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
+    }
+  }
+`;
+

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<UseBillingAndUsageDataReturn>) {
   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<UseBillingAndUsageDataReturn
       ...billingAndUsageData.subscription,
       nextBillDate: {
         ...billingAndUsageData.subscription.nextBillDate,
-        title: relativeNextBillDateTitle,
+        title: formattedNextBillDateTitle,
       }
     }
   };

packages/web/src/hooks/useInvoices.ee.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@apollo/client';
+import { TInvoice } from '@automatisch/types';
+
+import { GET_INVOICES } from 'graphql/queries/get-invoices.ee';
+
+type UseInvoicesReturn = {
+  invoices: TInvoice[],
+  loading: boolean;
+};
+
+export default function useInvoices(): UseInvoicesReturn {
+  const { data, loading } = useQuery(GET_INVOICES);
+
+  return {
+    invoices: data?.getInvoices || [],
+    loading: loading
+  };
+}

packages/web/src/locales/en.json

@@ -148,5 +148,10 @@
   "usageDataInformation.yourUsage": "Your usage",
   "usageDataInformation.yourUsageDescription": "Last 30 days total usage",
   "usageDataInformation.yourUsageTasks": "Tasks",
-  "usageDataInformation.upgrade": "Upgrade"
+  "usageDataInformation.upgrade": "Upgrade",
+  "invoices.invoices": "Invoices",
+  "invoices.date": "Date",
+  "invoices.amount": "Amount",
+  "invoices.invoice": "Invoice",
+  "invoices.link": "Link"
 }

packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx

@@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid';
 
 import * as URLS from 'config/urls';
 import UsageDataInformation from 'components/UsageDataInformation/index.ee';
+import Invoices from 'components/Invoices/index.ee';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -34,6 +35,10 @@ function BillingAndUsageSettings() {
         <Grid item xs={12} sx={{ mb: 6 }}>
           <UsageDataInformation />
         </Grid>
+
+        <Grid item xs={12} sx={{ mb: 6 }}>
+          <Invoices />
+        </Grid>
       </Grid>
     </Container>
   );