feat: redesign billing page

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

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-import PageTitle from 'components/PageTitle';
-import { generateExternalLink } from 'helpers/translation-values';
-import usePaymentPortalUrl from 'hooks/usePaymentPortalUrl.ee';
-import useFormatMessage from 'hooks/useFormatMessage';
-
-export default function PaymentInformation() {
-  const paymentPortal = usePaymentPortalUrl();
-  const formatMessage = useFormatMessage();
-
-  return (
-    <React.Fragment>
-      <PageTitle
-        gutterBottom
-      >
-        {formatMessage('billingAndUsageSettings.paymentInformation')}
-      </PageTitle>
-
-      <Typography>
-        {formatMessage(
-          'billingAndUsageSettings.paymentPortalInformation',
-          { link: generateExternalLink(paymentPortal.url) })}
-      </Typography>
-    </React.Fragment>
-  );
-}

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

@@ -1,12 +1,21 @@
 import * as React from 'react';
 import { DateTime } from 'luxon';
 
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
 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 Typography from '@mui/material/Typography';
 
 import useUsageData from 'hooks/useUsageData.ee';
 
@@ -15,43 +24,119 @@ export default function UsageDataInformation() {
 
   return (
     <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell component="td" scope="row">
-                Current plan
-              </TableCell>
-
-              <TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.name}</TableCell>
-            </TableRow>
-
-            <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>
+      <Card sx={{ minWidth: 275, mb: 3, p: 2 }}>
+        <CardContent>
+          <Box sx={{ mb: 1, display: 'flex', justifyContent: 'space-between' }}>
+            <Typography variant="h6" fontWeight="bold">
+              Subscription plan
+            </Typography>
+            {/* <Chip label="Active" color="success" /> */}
+          </Box>
+          <Divider sx={{ mb: 3 }} />
+          <Grid container item xs={12} spacing={2}>
+            <Grid item xs={4} sx={{ mb: [2, 5] }}>
+              <Card
+                sx={{
+                  mb: 3,
+                  backgroundColor: '#fafafa',
+                }}
+              >
+                <CardContent>
+                  <Typography variant="subtitle2" sx={{ pb: 0.5 }}>
+                    Monthly quota
+                  </Typography>
+                  <Typography variant="h6" fontWeight="bold">
+                    Free trial
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button size="small">Upgrade plan</Button>
+                </CardActions>
+              </Card>
+            </Grid>
+            <Grid item xs={4} sx={{ mb: [2, 5] }}>
+              <Card
+                sx={{
+                  mb: 3,
+                  backgroundColor: '#fafafa',
+                }}
+              >
+                <CardContent>
+                  <Typography variant="subtitle2" sx={{ pb: 0.5 }}>
+                    Next bill amount
+                  </Typography>
+                  <Typography variant="h6" fontWeight="bold">
+                    ---
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  {/* <Button size="small">Update billing info</Button> */}
+                </CardActions>
+              </Card>
+            </Grid>
+            <Grid item xs={4} sx={{ mb: [2, 5] }}>
+              <Card
+                sx={{
+                  mb: 3,
+                  backgroundColor: '#fafafa',
+                }}
+              >
+                <CardContent>
+                  <Typography variant="subtitle2" sx={{ pb: 0.5 }}>
+                    Next bill date
+                  </Typography>
+                  <Typography variant="h6" fontWeight="bold">
+                    ---
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  {/* <Button disabled size="small">
+                    monthly billing
+                  </Button> */}
+                </CardActions>
+              </Card>
+            </Grid>
+          </Grid>
+          <Box>
+            <Typography variant="h6" fontWeight="bold">
+              Your usage
+            </Typography>
+            <Box>
+              <Typography
+                variant="subtitle2"
+                sx={{ color: 'text.secondary', mt: 1 }}
+              >
+                Last 30 days total usage
+              </Typography>
+            </Box>
+            <Divider sx={{ mt: 2 }} />
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
+              >
+                Tasks
+              </Typography>
+              <Typography
+                variant="subtitle2"
+                sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
+              >
+                12300
+              </Typography>
+            </Box>
+            <Divider sx={{ mt: 2 }} />
+          </Box>
+          <Button size="small" variant="contained" sx={{ mt: 2 }}>
+            Upgrade
+          </Button>
+        </CardContent>
+      </Card>
     </React.Fragment>
   );
 }

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { Navigate } from 'react-router-dom';
 import Grid from '@mui/material/Grid';
 
-import * as URLS from 'config/urls'
-import PaymentInformation from 'components/PaymentInformation/index.ee';
+import * as URLS from 'config/urls';
 import UsageDataInformation from 'components/UsageDataInformation/index.ee';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
@@ -16,27 +15,25 @@ function BillingAndUsageSettings() {
 
   // redirect to the initial settings page
   if (isCloud === false) {
-    return (<Navigate to={URLS.SETTINGS} replace={true} />)
+    return <Navigate to={URLS.SETTINGS} replace={true} />;
   }
 
   // render nothing until we know if it's cloud or not
   // here, `isCloud` is not `false`, but `undefined`
-  if (!isCloud) return <React.Fragment />
+  if (!isCloud) return <React.Fragment />;
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
-      <Grid container item xs={12} sm={9} md={8} lg={6}>
+      <Grid container item xs={12} sm={9} md={8}>
         <Grid item xs={12} sx={{ mb: [2, 5] }}>
-          <PageTitle>{formatMessage('billingAndUsageSettings.title')}</PageTitle>
+          <PageTitle>
+            {formatMessage('billingAndUsageSettings.title')}
+          </PageTitle>
         </Grid>
 
         <Grid item xs={12} sx={{ mb: 6 }}>
           <UsageDataInformation />
         </Grid>
-
-        <Grid item xs={12}>
-          <PaymentInformation />
-        </Grid>
       </Grid>
     </Container>
   );