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

Merge pull request #1026 from automatisch/invoices-section

Browse Source 
feat: add invoices on billing and usage page
This commit is contained in:
Ali BARIN
2023-03-27 10:25:18 +02:00
committed by GitHub
parent 5ae53c79b6 372cdb10d6
commit f1cdc7e422
7 changed files with 146 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/types/index.d.ts vendored
View File

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

92
packages/web/src/components/Invoices/index.ee.tsx Normal file
View File

@@ -0,0 +1,92 @@
import * as React from 'react';
import { DateTime } from 'luxon';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Card from '@mui/material/Card';
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 useInvoices from 'hooks/useInvoices.ee';
import useFormatMessage from 'hooks/useFormatMessage';
export default function Invoices() {
const formatMessage = useFormatMessage();
const { invoices } = useInvoices();
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">
{formatMessage('invoices.invoices')}
</Typography>
</Box>
<Divider sx={{ mb: 2 }} />
<Grid container item xs={12} spacing={1} alignItems="stretch">
<Grid item xs={5}>
<Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
{formatMessage('invoices.date')}
</Typography>
</Grid>
<Grid item xs={5}>
<Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
{formatMessage('invoices.amount')}
</Typography>
</Grid>
<Grid item xs={2}>
<Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
{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
xs={12}
spacing={1}
alignItems="stretch"
sx={{ mt: 1 }}
>
<Grid item xs={5}>
<Typography
variant="subtitle2"
fontWeight="500"
sx={{ color: 'text.secondary' }}
>
{DateTime.fromISO(invoice.payout_date).toFormat('LLL dd, yyyy')}
</Typography>
</Grid>
<Grid item xs={5}>
<Typography variant="subtitle2">€{invoice.amount}</Typography>
</Grid>
<Grid item xs={2}>
<Typography variant="subtitle2">
<Link target="_blank" href={invoice.receipt_url}>
{formatMessage('invoices.link')}
</Link>
</Typography>
</Grid>
</Grid>
</React.Fragment>
))}
</CardContent>
</Card>
</React.Fragment>
);
}

14
packages/web/src/graphql/queries/get-invoices.ee.ts Normal file
View File

@@ -0,0 +1,14 @@
import { gql } from '@apollo/client';
export const GET_INVOICES = gql`
query GetInvoices {
getInvoices {
id
amount
currency
payout_date
receipt_url
}
}
`;

5
packages/web/src/hooks/useBillingAndUsageData.ee.ts
View File

@@ -7,7 +7,8 @@ import { GET_BILLING_AND_USAGE } from 'graphql/queries/get-billing-and-usage.ee'
function transform(billingAndUsageData: NonNullable<UseBillingAndUsageDataReturn>) {
const nextBillDate = billingAndUsageData.subscription.nextBillDate;
const nextBillDateTitle = nextBillDate.title;
const relativeNextBillDateTitle = nextBillDateTitle ? DateTime.fromMillis(Number(nextBillDateTitle)).toFormat('LLL dd, yyyy') as string : '';
const nextBillDateTitleDateObject = DateTime.fromMillis(Number(nextBillDateTitle));
const formattedNextBillDateTitle = nextBillDateTitleDateObject.isValid ? nextBillDateTitleDateObject.toFormat('LLL dd, yyyy') : nextBillDateTitle;
return {
...billingAndUsageData,
@@ -15,7 +16,7 @@ function transform(billingAndUsageData: NonNullable<UseBillingAndUsageDataReturn
...billingAndUsageData.subscription,
nextBillDate: {
...billingAndUsageData.subscription.nextBillDate,
title: relativeNextBillDateTitle,
title: formattedNextBillDateTitle,
}
}
};

18
packages/web/src/hooks/useInvoices.ee.ts Normal file
View File

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

7
packages/web/src/locales/en.json
View File

@@ -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"
}

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

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