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 {
+
+
;
+
+ 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/graphql/queries/get-trial-status.ee.ts b/packages/web/src/graphql/queries/get-trial-status.ee.ts
new file mode 100644
index 00000000..ec41ec20
--- /dev/null
+++ b/packages/web/src/graphql/queries/get-trial-status.ee.ts
@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const GET_TRIAL_STATUS = gql`
+ query GetTrialStatus {
+ getTrialStatus {
+ expireAt
+ }
+ }
+`;
diff --git a/packages/web/src/hooks/useBillingAndUsageData.ee.ts b/packages/web/src/hooks/useBillingAndUsageData.ee.ts
index 5d6e8446..22dbb810 100644
--- a/packages/web/src/hooks/useBillingAndUsageData.ee.ts
+++ b/packages/web/src/hooks/useBillingAndUsageData.ee.ts
@@ -23,7 +23,7 @@ function transform(billingAndUsageData: NonNullable