feat: add trial status badge in appbar

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 {
             </Link>
           </div>
 
+          <TrialStatusBadge />
+
           <IconButton
             size="large"
-            edge="start"
             color="inherit"
             onClick={handleAccountMenuOpen}
             aria-controls={accountMenuId}

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 <React.Fragment />;
+
+  const { message, status } = data;
+
+  return (
+    <Chip
+      component={Link}
+      to={URLS.SETTINGS_BILLING_AND_USAGE}
+      clickable
+      label={message}
+      color={status}
+    />
+  );
+}

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;