diff --git a/packages/web/src/components/SettingsLayout/index.tsx b/packages/web/src/components/SettingsLayout/index.tsx
index 7e8f1be8..488349ea 100644
--- a/packages/web/src/components/SettingsLayout/index.tsx
+++ b/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 (
<>
diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts
index 5500a6ab..07f3c448 100644
--- a/packages/web/src/config/urls.ts
+++ b/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;
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 87192f13..fbc85e78 100644
--- a/packages/web/src/locales/en.json
+++ b/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?",
diff --git a/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx b/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx
new file mode 100644
index 00000000..c9fd31f1
--- /dev/null
+++ b/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 ()
+ }
+
+ return (
+
+
+
+ {formatMessage('billingAndUsageSettings.title')}
+
+
+
+
+
+
+ );
+}
+
+export default BillingAndUsageSettings;
diff --git a/packages/web/src/pages/ProfileSettings/index.tsx b/packages/web/src/pages/ProfileSettings/index.tsx
index 7ec20ca5..f13968f1 100644
--- a/packages/web/src/pages/ProfileSettings/index.tsx
+++ b/packages/web/src/pages/ProfileSettings/index.tsx
@@ -101,7 +101,7 @@ function ProfileSettings() {
+
+
+
+ }
+ />
+
}