Support customized privacy policy and terms of use URLs

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
 

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: {

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')}
           </Button>
           <Box display="flex" justifyContent="center" py={1}>
-            <MuiLink
-              href="https://get.mpdx.org/privacy-policy/"
-              target="_blank"
-              color="secondary"
-              variant="caption"
-            >
-              {t('Privacy Policy')}
-            </MuiLink>
+            <PrivacyPolicyLink color="secondary" variant="caption" />
             &nbsp; • &nbsp;
-            <MuiLink
-              href="https://get.mpdx.org/terms-of-use/"
-              target="_blank"
-              color="secondary"
-              variant="caption"
-            >
-              {t('Terms of Use')}
-            </MuiLink>
+            <TermsOfUseLink color="secondary" variant="caption" />
           </Box>
         </Box>
       </LeafListItem>

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 => {
           )}
         </MenuItem>
         <MenuItemFooter>
-          <MuiLink
-            href="https://get.mpdx.org/privacy-policy/"
-            target="_blank"
-            onClick={handleProfileMenuClose}
-          >
-            {t('Privacy Policy')}
-          </MuiLink>
+          <PrivacyPolicyLink />
           &nbsp; • &nbsp;
-          <MuiLink
-            href="https://get.mpdx.org/terms-of-use/"
-            target="_blank"
-            onClick={handleProfileMenuClose}
-          >
-            {t('Terms of Use')}
-          </MuiLink>
+          <TermsOfUseLink />
         </MenuItemFooter>
       </MenuWrapper>
     </>

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(<PrivacyPolicyLink />);
+    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(<TermsOfUseLink />);
+    expect(getByRole('link')).toHaveAttribute('href', 'terms-of-use.com');
+  });
+});

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<LinkProps> = (props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Link href={process.env.PRIVACY_POLICY_URL} target="_blank" {...props}>
+      {t('Privacy Policy')}
+    </Link>
+  );
+};
+
+export const TermsOfUseLink: React.FC<LinkProps> = (props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Link href={process.env.TERMS_OF_USE_URL} target="_blank" {...props}>
+      {t('Terms of Use')}
+    </Link>
+  );
+};