diff --git a/packages/web/src/components/UsageDataInformation/index.ee.tsx b/packages/web/src/components/UsageDataInformation/index.ee.tsx index 4cd47a2f..19bbcf08 100644 --- a/packages/web/src/components/UsageDataInformation/index.ee.tsx +++ b/packages/web/src/components/UsageDataInformation/index.ee.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; +import Alert from '@mui/material/Alert'; +import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; @@ -15,7 +17,8 @@ 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); +const capitalize = (str: string) => + str[0].toUpperCase() + str.slice(1, str.length); type BillingCardProps = { name: string; @@ -62,21 +65,13 @@ function Action(props: { action?: TBillingCardAction }) { if (type === 'link') { if (action.src.startsWith('http')) { return ( - - ) + ); } else { return ( - ); @@ -100,6 +95,21 @@ export default function UsageDataInformation() { return ( + + + + Your free trial is over. Please{' '} + upgrade + your plan to continue using Automatisch. + + + @@ -137,7 +147,9 @@ export default function UsageDataInformation() { @@ -192,15 +204,17 @@ export default function UsageDataInformation() { {/* free plan has `null` status so that we can show the upgrade button */} - {billingAndUsageData?.subscription?.status === null && } + {billingAndUsageData?.subscription?.status === null && ( + + )}