groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign billing page

Browse Source
This commit is contained in:
Faruk AYDIN
2023-03-18 21:21:06 +03:00
parent 5007b0bf1a
commit 08918282a7
3 changed files with 129 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/web/src/components/PaymentInformation/index.ee.tsx
View File

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

159
packages/web/src/components/UsageDataInformation/index.ee.tsx
View File

@@ -1,12 +1,21 @@
import * as React from 'react'; import * as React from 'react';
import { DateTime } from 'luxon'; 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 Paper from '@mui/material/Paper';
import Table from '@mui/material/Table'; import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody'; import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell'; import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer'; import TableContainer from '@mui/material/TableContainer';
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import useUsageData from 'hooks/useUsageData.ee'; import useUsageData from 'hooks/useUsageData.ee';
@@ -15,43 +24,119 @@ export default function UsageDataInformation() {
return ( return (
<React.Fragment> <React.Fragment>
<TableContainer component={Paper}> <Card sx={{ minWidth: 275, mb: 3, p: 2 }}>
<Table> <CardContent>
<TableBody> <Box sx={{ mb: 1, display: 'flex', justifyContent: 'space-between' }}>
<TableRow> <Typography variant="h6" fontWeight="bold">
<TableCell component="td" scope="row"> Subscription plan
Current plan </Typography>
</TableCell> {/* <Chip label="Active" color="success" /> */}
</Box>
<TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.name}</TableCell> <Divider sx={{ mb: 3 }} />
</TableRow> <Grid container item xs={12} spacing={2}>
<Grid item xs={4} sx={{ mb: [2, 5] }}>
<TableRow> <Card
<TableCell component="td" scope="row"> sx={{
Total allowed task count mb: 3,
</TableCell> backgroundColor: '#fafafa',
}}
<TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.allowedTaskCount}</TableCell> >
</TableRow> <CardContent>
<Typography variant="subtitle2" sx={{ pb: 0.5 }}>
<TableRow> Monthly quota
<TableCell component="td" scope="row"> </Typography>
Consumed task count <Typography variant="h6" fontWeight="bold">
</TableCell> Free trial
</Typography>
<TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.consumedTaskCount}</TableCell> </CardContent>
</TableRow> <CardActions>
<Button size="small">Upgrade plan</Button>
<TableRow sx={{ 'td': { border: 0 } }}> </CardActions>
<TableCell component="td" scope="row"> </Card>
Next billing date </Grid>
</TableCell> <Grid item xs={4} sx={{ mb: [2, 5] }}>
<Card
<TableCell align="right" sx={{ fontWeight: 500 }}>{usageData.nextResetAt?.toLocaleString(DateTime.DATE_FULL)}</TableCell> sx={{
</TableRow> mb: 3,
</TableBody> backgroundColor: '#fafafa',
</Table> }}
</TableContainer> >
<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> </React.Fragment>
); );
} }

17
packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx
View File

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