feat: add trial status badge in appbar

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;