feat: make invoices dynamic

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

@@ -1,95 +1,19 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { DateTime } from 'luxon';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
+import Link from '@mui/material/Link';
 import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
 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 { TBillingCardAction } from '@automatisch/types';
-import * as URLS from 'config/urls';
-import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee';
+import useInvoices from 'hooks/useInvoices.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 
-const capitalize = (str: string) =>
-  str[0].toUpperCase() + str.slice(1, str.length);
-
-type BillingCardProps = {
-  name: string;
-  title?: string;
-  action?: TBillingCardAction;
-};
-
-function BillingCard(props: BillingCardProps) {
-  const { name, title = '', action } = props;
-
-  return (
-    <Card
-      sx={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        backgroundColor: (theme) => theme.palette.background.default,
-      }}
-    >
-      <CardContent>
-        <Typography variant="subtitle2" sx={{ pb: 0.5 }}>
-          {name}
-        </Typography>
-
-        <Typography variant="h6" fontWeight="bold">
-          {title}
-        </Typography>
-      </CardContent>
-
-      <CardActions>
-        <Action action={action} />
-      </CardActions>
-    </Card>
-  );
-}
-
-function Action(props: { action?: TBillingCardAction }) {
-  const { action } = props;
-  if (!action) return <React.Fragment />;
-
-  const { text, type } = action;
-
-  if (type === 'link') {
-    if (action.src.startsWith('http')) {
-      return (
-        <Button size="small" href={action.src} target="_blank">
-          {text}
-        </Button>
-      );
-    } else {
-      return (
-        <Button size="small" component={Link} to={action.src}>
-          {text}
-        </Button>
-      );
-    }
-  }
-
-  if (type === 'text') {
-    return (
-      <Typography variant="subtitle2" pb={1}>
-        {text}
-      </Typography>
-    );
-  }
-
-  return <React.Fragment />;
-}
-
 export default function Invoices() {
   const formatMessage = useFormatMessage();
-  const billingAndUsageData = useBillingAndUsageData();
+  const { invoices } = useInvoices();
 
   return (
     <React.Fragment>
@@ -97,33 +21,38 @@ export default function Invoices() {
         <CardContent sx={{ display: 'flex', flexDirection: 'column' }}>
           <Box sx={{ mb: 2, display: 'flex', justifyContent: 'space-between' }}>
             <Typography variant="h6" fontWeight="bold">
-              Invoices
+              {formatMessage('invoices.invoices')}
             </Typography>
           </Box>
 
           <Divider sx={{ mb: 2 }} />
 
           <Grid container item xs={12} spacing={1} alignItems="stretch">
-            <Grid item xs={12} md={5}>
+            <Grid item xs={5}>
               <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
-                Date
+                {formatMessage('invoices.date')}
               </Typography>
             </Grid>
 
-            <Grid item xs={12} md={5}>
+            <Grid item xs={5}>
               <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
-                Amount
+                {formatMessage('invoices.amount')}
               </Typography>
             </Grid>
 
-            <Grid item xs={12} md={2}>
+            <Grid item xs={2}>
               <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
-                Invoice
+                {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
@@ -132,58 +61,30 @@ export default function Invoices() {
                 alignItems="stretch"
                 sx={{ mt: 1 }}
               >
-            <Grid item xs={12} md={5}>
+                <Grid item xs={5}>
                   <Typography
                     variant="subtitle2"
                     fontWeight="500"
                     sx={{ color: 'text.secondary' }}
                   >
-                Mar 16, 2023
+                    {DateTime.fromISO(invoice.payout_date).toFormat('LLL dd, yyyy')}
                   </Typography>
                 </Grid>
 
-            <Grid item xs={12} md={5}>
-              <Typography variant="subtitle2">€20.00</Typography>
+                <Grid item xs={5}>
+                  <Typography variant="subtitle2">€{invoice.amount}</Typography>
                 </Grid>
 
-            <Grid item xs={12} md={2}>
+                <Grid item xs={2}>
                   <Typography variant="subtitle2">
-                <Link target="_blank" to="https://sample.com">
-                  Link
+                    <Link target="_blank" href={invoice.receipt_url}>
+                      {formatMessage('invoices.link')}
                     </Link>
                   </Typography>
                 </Grid>
               </Grid>
-          <Divider sx={{ mt: 2 }} />
-
-          <Grid
-            container
-            item
-            xs={12}
-            spacing={1}
-            alignItems="stretch"
-            sx={{ mt: 1 }}
-          >
-            <Grid item xs={12} md={5}>
-              <Typography
-                variant="subtitle2"
-                fontWeight="500"
-                sx={{ color: 'text.secondary' }}
-              >
-                Mar 16, 2023
-              </Typography>
-            </Grid>
-
-            <Grid item xs={12} md={5}>
-              <Typography variant="subtitle2">€20.00</Typography>
-            </Grid>
-
-            <Grid item xs={12} md={2}>
-              <Typography variant="subtitle2">
-                <Link to="https://sample.com">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/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"
 }