diff --git a/README.md b/README.md
index ecdb55b9de..a7967b4925 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,8 @@ Note: there is a test account you can use. Get this from another developer if yo
- `HS_HOME_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the dashboard page
- `HS_REPORTS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the reports pages
- `HS_TASKS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the tasks page
+- `PRIVACY_POLICY_URL` - URL of the privacy policy
+- `TERMS_OF_USE_URL` - URL of the terms of use
#### Auth provider
diff --git a/next.config.js b/next.config.js
index cc1dacf820..86d0e4f0ca 100644
--- a/next.config.js
+++ b/next.config.js
@@ -96,6 +96,8 @@ const config = {
process.env.HS_SETTINGS_SERVICES_SUGGESTIONS,
HS_SETUP_FIND_ORGANIZATION: process.env.HS_SETUP_FIND_ORGANIZATION,
ALERT_MESSAGE: process.env.ALERT_MESSAGE,
+ PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
+ TERMS_OF_USE_URL: process.env.TERMS_OF_USE_URL,
DD_ENV: process.env.DD_ENV ?? 'development',
},
experimental: {
diff --git a/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.tsx b/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.tsx
index a856171c1d..04bf222d15 100644
--- a/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.tsx
+++ b/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.tsx
@@ -3,10 +3,11 @@ import React, { useState } from 'react';
import { useApolloClient } from '@apollo/client';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ChevronRight from '@mui/icons-material/ChevronRight';
-import { Box, Button, Drawer, List, Link as MuiLink } from '@mui/material';
+import { Box, Button, Drawer, List } from '@mui/material';
import { styled } from '@mui/material/styles';
import { signOut } from 'next-auth/react';
import { useTranslation } from 'react-i18next';
+import { PrivacyPolicyLink, TermsOfUseLink } from 'src/components/Links/Links';
import { NextLinkComposed } from 'src/components/common/Links/NextLinkComposed';
import { clearDataDogUser } from 'src/lib/dataDog';
import { useAccountListId } from '../../../../../../hooks/useAccountListId';
@@ -222,23 +223,9 @@ export const ProfileMenuPanel: React.FC = () => {
{t('Sign Out')}
-
- {t('Privacy Policy')}
-
+
•
-
- {t('Terms of Use')}
-
+
diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx
index 8aee0ec50f..d956edd70d 100644
--- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx
+++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx
@@ -15,13 +15,13 @@ import {
ListItemText,
Menu,
MenuItem,
- Link as MuiLink,
Typography,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { signOut } from 'next-auth/react';
import { useSnackbar } from 'notistack';
import { useTranslation } from 'react-i18next';
+import { PrivacyPolicyLink, TermsOfUseLink } from 'src/components/Links/Links';
import { AccountList } from 'src/graphql/types.generated';
import { useRequiredSession } from 'src/hooks/useRequiredSession';
import { clearDataDogUser } from 'src/lib/dataDog';
@@ -374,21 +374,9 @@ const ProfileMenu = (): ReactElement => {
)}
-
- {t('Privacy Policy')}
-
+
•
-
- {t('Terms of Use')}
-
+
>
diff --git a/src/components/Links/Links.test.tsx b/src/components/Links/Links.test.tsx
new file mode 100644
index 0000000000..35356255a3
--- /dev/null
+++ b/src/components/Links/Links.test.tsx
@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import { PrivacyPolicyLink, TermsOfUseLink } from './Links';
+
+describe('PrivacyPolicyLink', () => {
+ it('uses the link from an environment variable', () => {
+ process.env.PRIVACY_POLICY_URL = 'privacy-policy.com';
+
+ const { getByRole } = render();
+ expect(getByRole('link')).toHaveAttribute('href', 'privacy-policy.com');
+ });
+});
+
+describe('TermsOfUseLink', () => {
+ it('uses the link from an environment variable', () => {
+ process.env.TERMS_OF_USE_URL = 'terms-of-use.com';
+
+ const { getByRole } = render();
+ expect(getByRole('link')).toHaveAttribute('href', 'terms-of-use.com');
+ });
+});
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
new file mode 100644
index 0000000000..f4a705db96
--- /dev/null
+++ b/src/components/Links/Links.tsx
@@ -0,0 +1,22 @@
+import { Link, LinkProps } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export const PrivacyPolicyLink: React.FC = (props) => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t('Privacy Policy')}
+
+ );
+};
+
+export const TermsOfUseLink: React.FC = (props) => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t('Terms of Use')}
+
+ );
+};