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

feat: use actual data in billing and usage

Browse Source
This commit is contained in:
Ali BARIN
2023-03-26 19:28:15 +00:00
parent a99609e3da
commit f3a8ab289f
9 changed files with 240 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@ 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';
@@ -9,23 +10,113 @@ 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 useUsageData from 'hooks/useUsageData.ee';
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 UsageDataInformation() {
const usageData = useUsageData();
const formatMessage = useFormatMessage();
const billingAndUsageData = useBillingAndUsageData();
return (
<React.Fragment>
<Card sx={{ mb: 3, p: 2 }}>
<CardContent>
<CardContent sx={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{ mb: 1, display: 'flex', justifyContent: 'space-between' }}>
<Typography variant="h6" fontWeight="bold">
Subscription plan
{formatMessage('usageDataInformation.subscriptionPlan')}
</Typography>
{/* <Chip label="Active" color="success" /> */}
{billingAndUsageData?.subscription?.status && (
<Chip
label={capitalize(billingAndUsageData?.subscription?.status)}
color="success"
/>
)}
</Box>
<Divider sx={{ mb: 3 }} />
<Grid
container
item
@@ -35,76 +126,33 @@ export default function UsageDataInformation() {
alignItems="stretch"
>
<Grid item xs={12} md={4}>
<Card
sx={{
height: '100%',
backgroundColor: (theme) => theme.palette.background.default,
}}
>
<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>
<BillingCard
name={formatMessage('usageDataInformation.monthlyQuota')}
title={billingAndUsageData?.subscription?.monthlyQuota.title}
action={billingAndUsageData?.subscription?.monthlyQuota.action}
/>
</Grid>
<Grid item xs={12} md={4}>
<Card
sx={{
height: '100%',
backgroundColor: (theme) => theme.palette.background.default,
}}
>
<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>
<BillingCard
name={formatMessage('usageDataInformation.nextBillAmount')}
title={billingAndUsageData?.subscription?.nextBillAmount.title}
action={billingAndUsageData?.subscription?.nextBillAmount.action}
/>
</Grid>
<Grid item xs={12} md={4}>
<Card
sx={{
height: '100%',
backgroundColor: (theme) => theme.palette.background.default,
}}
>
<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>
<BillingCard
name={formatMessage('usageDataInformation.nextBillDate')}
title={billingAndUsageData?.subscription?.nextBillDate.title}
action={billingAndUsageData?.subscription?.nextBillDate.action}
/>
</Grid>
</Grid>
<Box>
<Typography variant="h6" fontWeight="bold">
Your usage
{formatMessage('usageDataInformation.yourUsage')}
</Typography>
<Box>
@@ -112,7 +160,7 @@ export default function UsageDataInformation() {
variant="subtitle2"
sx={{ color: 'text.secondary', mt: 1 }}
>
Last 30 days total usage
{formatMessage('usageDataInformation.yourUsageDescription')}
</Typography>
</Box>
@@ -129,14 +177,14 @@ export default function UsageDataInformation() {
variant="subtitle2"
sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
>
Tasks
{formatMessage('usageDataInformation.yourUsageTasks')}
</Typography>
<Typography
variant="subtitle2"
sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
>
12300
{billingAndUsageData?.usage.task}
</Typography>
</Box>
@@ -148,9 +196,9 @@ export default function UsageDataInformation() {
to={URLS.SETTINGS_PLAN_UPGRADE}
size="small"
variant="contained"
sx={{ mt: 2 }}
sx={{ mt: 2, alignSelf: 'flex-end' }}
>
Upgrade
{formatMessage('usageDataInformation.upgrade')}
</Button>
</CardContent>
</Card>