Merge pull request #979 from automatisch/show-usage-data

feat: show usage data

packages/web/src/components/UsageDataInformation/index.ee.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DateTime } from 'luxon';
+
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+
+import useUsageData from 'hooks/useUsageData.ee';
+
+export default function UsageDataInformation() {
+  const usageData = useUsageData();
+
+  return (
+    <React.Fragment>
+      <TableContainer component={Paper}>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell component="td" scope="row">
+                Total allowed task count
+              </TableCell>
+
+              <TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.allowedTaskCount}</TableCell>
+            </TableRow>
+
+            <TableRow>
+              <TableCell component="td" scope="row">
+                Consumed task count
+              </TableCell>
+
+              <TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.consumedTaskCount}</TableCell>
+            </TableRow>
+
+            <TableRow sx={{ 'td': { border: 0 } }}>
+              <TableCell component="td" scope="row">
+                Next billing date
+              </TableCell>
+
+              <TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.nextResetAt?.toLocaleString(DateTime.DATE_FULL)}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </React.Fragment>
+  );
+}

packages/web/src/graphql/queries/get-usage-data.ee.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const GET_USAGE_DATA = gql`
+  query GetUsageData {
+    getUsageData {
+      allowedTaskCount
+      consumedTaskCount
+      remainingTaskCount
+      nextResetAt
+    }
+  }
+`;
+

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

@@ -0,0 +1,28 @@
+import { useQuery } from '@apollo/client';
+import { DateTime } from 'luxon';
+
+import { GET_USAGE_DATA } from 'graphql/queries/get-usage-data.ee';
+
+type UseUsageDataReturn = {
+  allowedTaskCount: number;
+  consumedTaskCount: number;
+  remainingTaskCount: number;
+  nextResetAt: DateTime;
+  loading: boolean;
+};
+
+export default function useUsageData(): UseUsageDataReturn {
+  const { data, loading } = useQuery(GET_USAGE_DATA);
+
+  const usageData = data?.getUsageData;
+  const nextResetAt = usageData?.nextResetAt;
+  const nextResetAtDateTimeObject = nextResetAt && DateTime.fromMillis(Number(nextResetAt));
+
+  return {
+    allowedTaskCount: usageData?.allowedTaskCount,
+    consumedTaskCount: usageData?.consumedTaskCount,
+    remainingTaskCount: usageData?.remainingTaskCount,
+    nextResetAt: nextResetAtDateTimeObject,
+    loading
+  };
+}

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 PaymentInformation from 'components/PaymentInformation/index.ee';
+import UsageDataInformation from 'components/UsageDataInformation/index.ee';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -29,7 +30,11 @@ function BillingAndUsageSettings() {
           <PageTitle>{formatMessage('billingAndUsageSettings.title')}</PageTitle>
         </Grid>
 
-        <Grid item xs={12} justifyContent="flex-end" sx={{ mt: 2 }}>
+        <Grid item xs={12} sx={{ mb: 6 }}>
+          <UsageDataInformation />
+        </Grid>
+
+        <Grid item xs={12}>
           <PaymentInformation />
         </Grid>
       </Grid>