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() { + + + + } + /> + }