diff --git a/packages/web/src/components/TrialOverAlert/index.ee.tsx b/packages/web/src/components/TrialOverAlert/index.ee.tsx new file mode 100644 index 00000000..8b6974f5 --- /dev/null +++ b/packages/web/src/components/TrialOverAlert/index.ee.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import Alert from '@mui/material/Alert'; +import Typography from '@mui/material/Typography'; + +import * as URLS from 'config/urls'; +import { generateInternalLink } from 'helpers/translation-values'; +import useTrialStatus from 'hooks/useTrialStatus.ee'; +import useFormatMessage from 'hooks/useFormatMessage'; + + +export default function TrialOverAlert() { + const formatMessage = useFormatMessage(); + const trialStatus = useTrialStatus(); + + if (!trialStatus || !trialStatus.over) return ; + + return ( + + + {formatMessage('trialOverAlert.text', { + link: generateInternalLink(URLS.SETTINGS_PLAN_UPGRADE) + })} + + + ); +} diff --git a/packages/web/src/components/UsageDataInformation/index.ee.tsx b/packages/web/src/components/UsageDataInformation/index.ee.tsx index 19bbcf08..7ff84a5d 100644 --- a/packages/web/src/components/UsageDataInformation/index.ee.tsx +++ b/packages/web/src/components/UsageDataInformation/index.ee.tsx @@ -13,6 +13,7 @@ import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { TBillingCardAction } from '@automatisch/types'; +import TrialOverAlert from 'components/TrialOverAlert/index.ee'; import * as URLS from 'config/urls'; import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee'; import useFormatMessage from 'hooks/useFormatMessage'; @@ -96,19 +97,7 @@ export default function UsageDataInformation() { return ( - - - Your free trial is over. Please{' '} - upgrade - your plan to continue using Automatisch. - - + diff --git a/packages/web/src/helpers/translation-values.tsx b/packages/web/src/helpers/translation-values.tsx index 1d2925ff..0f64b6c8 100644 --- a/packages/web/src/helpers/translation-values.tsx +++ b/packages/web/src/helpers/translation-values.tsx @@ -1,5 +1,13 @@ +import { Link as RouterLink } from 'react-router-dom'; import Link from '@mui/material/Link'; +export const generateInternalLink = (link: string) => (str: string) => + ( + + {str} + + ); + export const generateExternalLink = (link: string) => (str: string) => ( diff --git a/packages/web/src/hooks/useTrialStatus.ee.ts b/packages/web/src/hooks/useTrialStatus.ee.ts index 515f525c..ece79ddd 100644 --- a/packages/web/src/hooks/useTrialStatus.ee.ts +++ b/packages/web/src/hooks/useTrialStatus.ee.ts @@ -7,6 +7,7 @@ import useFormatMessage from './useFormatMessage'; type UseTrialStatusReturn = { expireAt: DateTime; message: string; + over: boolean; status: 'error' | 'warning'; } | null; @@ -25,11 +26,13 @@ function getFeedbackPayload(date: DateTime) { return { translationEntryId: 'trialBadge.over', status: 'error' as const, + over: true, }; } else if (diffInDays <= 0) { return { translationEntryId: 'trialBadge.endsToday', status: 'warning' as const, + over: false, } } else { return { @@ -38,6 +41,7 @@ function getFeedbackPayload(date: DateTime) { remainingDays: diffInDays }, status: 'warning' as const, + over: false, } } } @@ -54,11 +58,13 @@ export default function useTrialStatus(): UseTrialStatusReturn { translationEntryId, translationEntryValues, status, + over, } = getFeedbackPayload(expireAt); return { message: formatMessage(translationEntryId, translationEntryValues), expireAt, + over, status }; } diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 8d2186bc..b4b7437e 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -155,5 +155,6 @@ "invoices.link": "Link", "trialBadge.xDaysLeft": "{remainingDays} trial {remainingDays, plural, one {day} other {days}} left", "trialBadge.endsToday": "Trial ends today", - "trialBadge.over": "Trial is over" + "trialBadge.over": "Trial is over", + "trialOverAlert.text": "Your free trial is over. Please upgrade your plan to continue using Automatisch." }