MPDX-7943 | Add Contacts Drawer to Tools

pages/accountLists/[accountListId]/contacts/helpers.ts

@@ -55,6 +55,16 @@ export const getRedirectPathname = ({
     '/accountLists/[accountListId]/tools/fixMailingAddresses/[[...contactId]]'
   ) {
     pathname = `/accountLists/${accountListId}/tools/fixMailingAddresses`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/fixCommitmentInfo/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/fixCommitmentInfo`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/fixSendNewsletter/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/fixSendNewsletter`;
   }
 
   if (contactId) {

pages/accountLists/[accountListId]/tools/fixSendNewsletter/[[...contactId]].page.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { loadSession } from 'pages/api/utils/pagePropsHelpers';
+import FixSendNewsletter from 'src/components/Tool/FixSendNewsletter/FixSendNewsletter';
+import { ToolsWrapper } from '../ToolsWrapper';
+import { SetContactFocus, useToolsHelper } from '../useToolsHelper';
+
+const FixSendNewsletterPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { accountListId, handleSelectContact } = useToolsHelper();
+  const pageUrl = 'tools/fixSendNewsletter';
+
+  const setContactFocus: SetContactFocus = (contactId) => {
+    handleSelectContact(pageUrl, contactId);
+  };
+
+  return (
+    <ToolsWrapper
+      pageTitle={t('Fix Send Newsletter')}
+      pageUrl={pageUrl}
+      selectedMenuId="fixSendNewsletter'"
+    >
+      <FixSendNewsletter
+        accountListId={accountListId || ''}
+        setContactFocus={setContactFocus}
+      />
+    </ToolsWrapper>
+  );
+};
+
+export const getServerSideProps = loadSession;
+
+export default FixSendNewsletterPage;

src/components/Tool/FixSendNewsletter/Contact.tsx

@@ -6,11 +6,13 @@ import {
   Box,
   Button,
   Grid,
+  Link,
   NativeSelect,
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
 import theme from '../../../theme';
 import { StyledInput } from '../StyledInput';
 import {
@@ -83,6 +85,7 @@ interface Props {
   primaryAddress?: ContactPrimaryAddressFragment;
   source?: string;
   updateFunction: (id: string, sendNewsletter: string) => Promise<void>;
+  setContactFocus: SetContactFocus;
 }
 
 const Contact = ({
@@ -92,13 +95,14 @@ const Contact = ({
   status,
   primaryAddress,
   updateFunction,
+  setContactFocus,
 }: Props): ReactElement => {
   const { t } = useTranslation();
   const [newsletter, setNewsletter] = useState('BOTH');
   const { classes } = useStyles();
 
   //TODO: Add button functionality
-  //TODO: Mkae contact name a link to contact page
+  //TODO: Make contact name a link to contact page
 
   const handleChange = (
     event:
@@ -108,6 +112,10 @@ const Contact = ({
     setNewsletter(event.target.value);
   };
 
+  const handleContactNameClick = () => {
+    setContactFocus(id);
+  };
+
   return (
     <Grid container className={classes.container}>
       <Grid container>
@@ -129,8 +137,10 @@ const Contact = ({
                     }}
                   />
                   <Box display="flex" flexDirection="column" ml={2}>
-                    <Typography variant="h6">{name}</Typography>
-                    <Typography>{status}</Typography>
+                    <Link underline="hover" onClick={handleContactNameClick}>
+                      <Typography variant="h6">{name}</Typography>
+                      <Typography>{status}</Typography>
+                    </Link>
                   </Box>
                 </Box>
               </Grid>

src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx

@@ -12,6 +12,7 @@ import {
 import { useSnackbar } from 'notistack';
 import { Trans, useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
 import { SendNewsletterEnum } from 'src/graphql/types.generated';
 import theme from '../../../theme';
 import NoData from '../NoData';
@@ -62,9 +63,13 @@ const useStyles = makeStyles()(() => ({
 
 interface Props {
   accountListId: string;
+  setContactFocus: SetContactFocus;
 }
 
-const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
+const FixSendNewsletter: React.FC<Props> = ({
+  accountListId,
+  setContactFocus,
+}: Props) => {
   const { classes } = useStyles();
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -190,6 +195,7 @@ const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
                       }
                     }
                     updateFunction={updateContact}
+                    setContactFocus={setContactFocus}
                   />
                 ))}
               </Grid>