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