diff --git a/packages/backend/src/graphql/queries/get-trial-status.ee.ts b/packages/backend/src/graphql/queries/get-trial-status.ee.ts
index 58a8f936..77bc84ee 100644
--- a/packages/backend/src/graphql/queries/get-trial-status.ee.ts
+++ b/packages/backend/src/graphql/queries/get-trial-status.ee.ts
@@ -9,7 +9,9 @@ const getTrialStatus = async (
if (!appConfig.isCloud) return;
const inTrial = await context.currentUser.inTrial();
- if (!inTrial) return;
+ const hasActiveSubscription = await context.currentUser.hasActiveSubscription();
+
+ if (!inTrial && hasActiveSubscription) return;
return {
expireAt: context.currentUser.trialExpiryDate,
diff --git a/packages/backend/src/models/user.ts b/packages/backend/src/models/user.ts
index f83b6c01..daba8d74 100644
--- a/packages/backend/src/models/user.ts
+++ b/packages/backend/src/models/user.ts
@@ -165,6 +165,16 @@ class User extends Base {
this.trialExpiryDate = DateTime.now().plus({ days: 30 }).toISODate();
}
+ async hasActiveSubscription() {
+ if (!appConfig.isCloud) {
+ return false;
+ }
+
+ const subscription = await this.$relatedQuery('currentSubscription');
+
+ return subscription?.isActive;
+ }
+
async inTrial() {
if (!appConfig.isCloud) {
return false;
@@ -174,9 +184,7 @@ class User extends Base {
return false;
}
- const subscription = await this.$relatedQuery('currentSubscription');
-
- if (subscription?.isActive) {
+ if (await this.hasActiveSubscription()) {
return false;
}
diff --git a/packages/web/src/components/AppBar/index.tsx b/packages/web/src/components/AppBar/index.tsx
index cf32768a..9577252c 100644
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -12,6 +12,7 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import * as URLS from 'config/urls';
import AccountDropdownMenu from 'components/AccountDropdownMenu';
+import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
import Container from 'components/Container';
import { FormattedMessage } from 'react-intl';
import { Link } from './style';
@@ -67,9 +68,10 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
+
+
;
+
+ return (
+
+
+ {formatMessage('trialOverAlert.text', {
+ link: generateInternalLink(URLS.SETTINGS_PLAN_UPGRADE)
+ })}
+
+
+ );
+}
diff --git a/packages/web/src/components/TrialStatusBadge/index.ee.tsx b/packages/web/src/components/TrialStatusBadge/index.ee.tsx
new file mode 100644
index 00000000..8632be77
--- /dev/null
+++ b/packages/web/src/components/TrialStatusBadge/index.ee.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Chip } from './style.ee';
+
+import * as URLS from 'config/urls';
+import useTrialStatus from 'hooks/useTrialStatus.ee';
+
+export default function TrialStatusBadge(): React.ReactElement {
+ const data = useTrialStatus();
+
+ if (!data) return ;
+
+ const { message, status } = data;
+
+ return (
+
+ );
+}
diff --git a/packages/web/src/components/TrialStatusBadge/style.ee.tsx b/packages/web/src/components/TrialStatusBadge/style.ee.tsx
new file mode 100644
index 00000000..18c97124
--- /dev/null
+++ b/packages/web/src/components/TrialStatusBadge/style.ee.tsx
@@ -0,0 +1,13 @@
+import { styled } from '@mui/material/styles';
+import MuiChip, { chipClasses } from '@mui/material/Chip';
+
+export const Chip = styled(MuiChip)`
+ &.${chipClasses.root} {
+ font-weight: 500;
+ }
+
+ &.${chipClasses.colorWarning} {
+ background: #fef3c7;
+ color: #78350f;
+ }
+` as typeof MuiChip;
diff --git a/packages/web/src/components/UsageDataInformation/index.ee.tsx b/packages/web/src/components/UsageDataInformation/index.ee.tsx
index 4cd47a2f..7ff84a5d 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';
@@ -11,11 +13,13 @@ 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';
-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 +66,13 @@ function Action(props: { action?: TBillingCardAction }) {
if (type === 'link') {
if (action.src.startsWith('http')) {
return (
-