From 7066f7ea7640b2f7821df6170a86fa9568026479 Mon Sep 17 00:00:00 2001 From: Faruk AYDIN Date: Mon, 27 Mar 2023 00:57:58 +0300 Subject: [PATCH 1/3] feat: Add draft design for invoices section --- .../web/src/components/Invoices/index.ee.tsx | 191 ++++++++++++++++++ .../BillingAndUsageSettings/index.ee.tsx | 5 + 2 files changed, 196 insertions(+) create mode 100644 packages/web/src/components/Invoices/index.ee.tsx diff --git a/packages/web/src/components/Invoices/index.ee.tsx b/packages/web/src/components/Invoices/index.ee.tsx new file mode 100644 index 0000000000..09f2a671d4 --- /dev/null +++ b/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 ( + theme.palette.background.default, + }} + > + + + {name} + + + + {title} + + + + + + + + ); +} + +function Action(props: { action?: TBillingCardAction }) { + const { action } = props; + if (!action) return ; + + const { text, type } = action; + + if (type === 'link') { + if (action.src.startsWith('http')) { + return ( + + ); + } else { + return ( + + ); + } + } + + if (type === 'text') { + return ( + + {text} + + ); + } + + return ; +} + +export default function Invoices() { + const formatMessage = useFormatMessage(); + const billingAndUsageData = useBillingAndUsageData(); + + return ( + + + + + + Invoices + + + + + + + + + Date + + + + + + Amount + + + + + + Invoice + + + + + + + + + Mar 16, 2023 + + + + + €20.00 + + + + + + Link + + + + + + + + + + Mar 16, 2023 + + + + + €20.00 + + + + + Link + + + + + + + ); +} diff --git a/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx b/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx index 62a7de4ff5..73da9c29f8 100644 --- a/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx +++ b/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() { + + + + ); From fd24dbee218234c4e1a9805d37aa72cec9fc9029 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Mon, 27 Mar 2023 08:22:14 +0000 Subject: [PATCH 2/3] fix(useBillingAndUsageData): fix invalid date --- packages/web/src/hooks/useBillingAndUsageData.ee.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/web/src/hooks/useBillingAndUsageData.ee.ts b/packages/web/src/hooks/useBillingAndUsageData.ee.ts index 0d16ca2bd6..5d6e844659 100644 --- a/packages/web/src/hooks/useBillingAndUsageData.ee.ts +++ b/packages/web/src/hooks/useBillingAndUsageData.ee.ts @@ -7,7 +7,8 @@ import { GET_BILLING_AND_USAGE } from 'graphql/queries/get-billing-and-usage.ee' function transform(billingAndUsageData: NonNullable) { 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 Date: Mon, 27 Mar 2023 08:22:24 +0000 Subject: [PATCH 3/3] feat: make invoices dynamic --- packages/types/index.d.ts | 8 + .../web/src/components/Invoices/index.ee.tsx | 191 +++++------------- .../src/graphql/queries/get-invoices.ee.ts | 14 ++ packages/web/src/hooks/useInvoices.ee.ts | 18 ++ packages/web/src/locales/en.json | 7 +- 5 files changed, 92 insertions(+), 146 deletions(-) create mode 100644 packages/web/src/graphql/queries/get-invoices.ee.ts create mode 100644 packages/web/src/hooks/useInvoices.ee.ts diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts index 40be642a5b..a8a7e48f40 100644 --- a/packages/types/index.d.ts +++ b/packages/types/index.d.ts @@ -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; diff --git a/packages/web/src/components/Invoices/index.ee.tsx b/packages/web/src/components/Invoices/index.ee.tsx index 09f2a671d4..b64bc3a6ab 100644 --- a/packages/web/src/components/Invoices/index.ee.tsx +++ b/packages/web/src/components/Invoices/index.ee.tsx @@ -1,95 +1,19 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { DateTime } from 'luxon'; import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; +import Link from '@mui/material/Link'; 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 useInvoices from 'hooks/useInvoices.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 ( - theme.palette.background.default, - }} - > - - - {name} - - - - {title} - - - - - - - - ); -} - -function Action(props: { action?: TBillingCardAction }) { - const { action } = props; - if (!action) return ; - - const { text, type } = action; - - if (type === 'link') { - if (action.src.startsWith('http')) { - return ( - - ); - } else { - return ( - - ); - } - } - - if (type === 'text') { - return ( - - {text} - - ); - } - - return ; -} - export default function Invoices() { const formatMessage = useFormatMessage(); - const billingAndUsageData = useBillingAndUsageData(); + const { invoices } = useInvoices(); return ( @@ -97,93 +21,70 @@ export default function Invoices() { - Invoices + {formatMessage('invoices.invoices')} - + - Date + {formatMessage('invoices.date')} - + - Amount + {formatMessage('invoices.amount')} - + - Invoice + {formatMessage('invoices.invoice')} - - - - - Mar 16, 2023 - - - - - €20.00 - - - - - - Link - - - - - - - ( + + {invoiceIndex !== 0 && } + + - Mar 16, 2023 - - - - - €20.00 - - - - - Link - - - + + + {DateTime.fromISO(invoice.payout_date).toFormat('LLL dd, yyyy')} + + + + + €{invoice.amount} + + + + + + {formatMessage('invoices.link')} + + + + + + ))} diff --git a/packages/web/src/graphql/queries/get-invoices.ee.ts b/packages/web/src/graphql/queries/get-invoices.ee.ts new file mode 100644 index 0000000000..1710debf6b --- /dev/null +++ b/packages/web/src/graphql/queries/get-invoices.ee.ts @@ -0,0 +1,14 @@ +import { gql } from '@apollo/client'; + +export const GET_INVOICES = gql` + query GetInvoices { + getInvoices { + id + amount + currency + payout_date + receipt_url + } + } +`; + diff --git a/packages/web/src/hooks/useInvoices.ee.ts b/packages/web/src/hooks/useInvoices.ee.ts new file mode 100644 index 0000000000..8afdc48c96 --- /dev/null +++ b/packages/web/src/hooks/useInvoices.ee.ts @@ -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 + }; +} diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index e183f58cfe..56b65f622e 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -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" } \ No newline at end of file