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')} + + ); +};