feat: add empty billing and usage page

packages/web/src/components/SettingsLayout/index.tsx

@@ -5,8 +5,10 @@ import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import PaymentIcon from '@mui/icons-material/Payment';
 
 import * as URLS from 'config/urls';
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 
@@ -14,13 +16,25 @@ type SettingsLayoutProps = {
   children: React.ReactNode;
 };
 
-const drawerLinks = [
-  {
-    Icon: AccountCircleIcon,
-    primary: 'settingsDrawer.myProfile',
-    to: URLS.SETTINGS_PROFILE,
-  },
-];
+function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
+  const items = [
+    {
+      Icon: AccountCircleIcon,
+      primary: 'settingsDrawer.myProfile',
+      to: URLS.SETTINGS_PROFILE,
+    }
+  ]
+
+  if (isCloud) {
+    items.push({
+      Icon: PaymentIcon,
+      primary: 'settingsDrawer.billingAndUsage',
+      to: URLS.SETTINGS_BILLING_AND_USAGE,
+    });
+  }
+
+  return items;
+}
 
 const drawerBottomLinks = [
   {
@@ -33,6 +47,7 @@ const drawerBottomLinks = [
 export default function SettingsLayout({
   children,
 }: SettingsLayoutProps): React.ReactElement {
+  const { isCloud } = useAutomatischInfo();
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), {
     noSsr: true,
@@ -41,6 +56,7 @@ export default function SettingsLayout({
 
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);
+  const drawerLinks = createDrawerLinks({ isCloud });
 
   return (
     <>