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 = [
+function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
-  {
+  const items = [
-    Icon: AccountCircleIcon,
+    {
-    primary: 'settingsDrawer.myProfile',
+      Icon: AccountCircleIcon,
-    to: URLS.SETTINGS_PROFILE,
+      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 (
     <>

packages/web/src/config/urls.ts

@@ -64,8 +64,10 @@ export const FLOW_PATTERN = '/flows/:flowId';
 export const SETTINGS = '/settings';
 export const SETTINGS_DASHBOARD = SETTINGS;
 export const PROFILE = 'profile';
+export const BILLING_AND_USAGE = 'billing';
 export const UPDATES = '/updates';
 export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`;
+export const SETTINGS_BILLING_AND_USAGE = `${SETTINGS}/${BILLING_AND_USAGE}`;
 
 export const DASHBOARD = FLOWS;
 

packages/web/src/locales/en.json

@@ -11,6 +11,7 @@
   "settingsDrawer.myProfile": "My Profile",
   "settingsDrawer.goBack": "Go to the dashboard",
   "settingsDrawer.notifications": "Notifications",
+  "settingsDrawer.billingAndUsage": "Billing and usage",
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",
@@ -96,6 +97,7 @@
   "profileSettings.deleteAccountResult2": "All your flows",
   "profileSettings.deleteAccountResult3": "All your connections",
   "profileSettings.deleteAccountResult4": "All execution history",
+  "billingAndUsageSettings.title": "Billing and usage",
   "deleteAccountDialog.title": "Delete account?",
   "deleteAccountDialog.description": "This will permanently delete your account and all the associated data with it.",
   "deleteAccountDialog.cancel": "Cancel?",

packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Navigate } from 'react-router-dom';
+import Grid from '@mui/material/Grid';
+
+import * as URLS from 'config/urls'
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useCloud from 'hooks/useCloud';
+
+function BillingAndUsageSettings() {
+  const isCloud = useCloud();
+  const formatMessage = useFormatMessage();
+
+  if (!isCloud) {
+    return (<Navigate to={URLS.SETTINGS} replace={true} />)
+  }
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('billingAndUsageSettings.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{pt: 5 }}>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default BillingAndUsageSettings;

packages/web/src/pages/ProfileSettings/index.tsx

@@ -101,7 +101,7 @@ function ProfileSettings() {
 
         <Grid item xs={12} justifyContent="flex-end">
           <StyledForm
-            defaultValues={currentUser}
+            defaultValues={{ ...currentUser}}
             onSubmit={handleEmailUpdate}
             resolver={yupResolver(emailValidationSchema)}
             mode="onChange"

packages/web/src/settingsRoutes.tsx

@@ -1,6 +1,7 @@
 import { Route, Navigate } from 'react-router-dom';
 import SettingsLayout from 'components/SettingsLayout';
 import ProfileSettings from 'pages/ProfileSettings';
+import BillingAndUsageSettings from 'pages/BillingAndUsageSettings/index.ee';
 
 import * as URLS from 'config/urls';
 
@@ -15,6 +16,15 @@ export default (
       }
     />
 
+    <Route
+      path={URLS.SETTINGS_BILLING_AND_USAGE}
+      element={
+        <SettingsLayout>
+          <BillingAndUsageSettings />
+        </SettingsLayout>
+      }
+    />
+
     <Route
       path={URLS.SETTINGS}
       element={<Navigate to={URLS.SETTINGS_PROFILE} replace />}