feat: Add draft design for invoices section

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

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+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 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();
+
+  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">
+              Invoices
+            </Typography>
+          </Box>
+
+          <Divider sx={{ mb: 2 }} />
+
+          <Grid container item xs={12} spacing={1} alignItems="stretch">
+            <Grid item xs={12} md={5}>
+              <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+                Date
+              </Typography>
+            </Grid>
+
+            <Grid item xs={12} md={5}>
+              <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+                Amount
+              </Typography>
+            </Grid>
+
+            <Grid item xs={12} md={2}>
+              <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+                Invoice
+              </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 target="_blank" to="https://sample.com">
+                  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>
+        </CardContent>
+      </Card>
+    </React.Fragment>
+  );
+}

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