MPDX-7943 | Add Contacts Drawer to Tools

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

@@ -50,6 +50,11 @@ export const getRedirectPathname = ({
     '/accountLists/[accountListId]/reports/donations/[[...contactId]]'
   ) {
     pathname = `/accountLists/${accountListId}/reports/donations`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/fixMailingAddresses/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/fixMailingAddresses`;
   }
 
   if (contactId) {

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { loadSession } from 'pages/api/utils/pagePropsHelpers';
+import FixMailingAddresses from 'src/components/Tool/FixMailingAddresses/FixMailingAddresses';
+import { ToolsWrapper } from '../ToolsWrapper';
+import { useToolsHelper } from '../useToolsHelper';
+
+export type SetContactFocus = (contactId: string) => void;
+
+const FixMailingAddressesPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { accountListId, handleSelectContact } = useToolsHelper();
+  const pageUrl = 'tools/fixMailingAddresses';
+
+  const setContactFocus: SetContactFocus = (contactId) => {
+    handleSelectContact(pageUrl, contactId);
+  };
+
+  return (
+    <ToolsWrapper
+      pageTitle={t('Fix Mailing Addresses')}
+      pageUrl={pageUrl}
+      selectedMenuId="fixMailingAddresses"
+    >
+      <FixMailingAddresses
+        accountListId={accountListId || ''}
+        setContactFocus={setContactFocus}
+      />
+    </ToolsWrapper>
+  );
+};
+
+export const getServerSideProps = loadSession;
+
+export default FixMailingAddressesPage;

src/components/Tool/FixMailingAddresses/Contact.tsx

@@ -15,13 +15,15 @@ import {
   Grid,
   Hidden,
   IconButton,
+  Link,
   Typography,
 } from '@mui/material';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/fixMailingAddresses/[[...contactId]].page';
 import { editableSources } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal';
 import { useSetContactPrimaryAddressMutation } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/SetPrimaryAddress.generated';
 import {
@@ -40,6 +42,7 @@ import { emptyAddress } from './FixMailingAddresses';
 import { ContactAddressFragment } from './GetInvalidAddresses.generated';
 
 const ContactHeader = styled(CardHeader)(() => ({
+  cursor: 'pointer',
   '.MuiCardHeader-action': {
     alignSelf: 'center',
   },
@@ -113,6 +116,7 @@ interface Props {
   appName: string;
   openEditAddressModal: (address: ContactAddressFragment, id: string) => void;
   openNewAddressModal: (address: ContactAddressFragment, id: string) => void;
+  setContactFocus: SetContactFocus;
 }
 
 const Contact: React.FC<Props> = ({
@@ -123,6 +127,7 @@ const Contact: React.FC<Props> = ({
   appName,
   openEditAddressModal,
   openNewAddressModal,
+  setContactFocus,
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
@@ -156,18 +161,36 @@ const Contact: React.FC<Props> = ({
     });
   };
 
+  const handleContactNameClick = () => {
+    setContactFocus(id);
+  };
+
   return (
     <Card className={classes.contactCard}>
       <ContactHeader
-        avatar={<ContactAvatar src="" aria-label="Contact Avatar" />}
+        avatar={
+          <ContactAvatar
+            src=""
+            aria-label="Contact Avatar"
+            onClick={handleContactNameClick}
+          />
+        }
         action={
           <Button variant="contained" className={classes.confirmButon}>
             <Icon path={mdiCheckboxMarkedCircle} size={0.8} />
             {t('Confirm')}
           </Button>
         }
-        title={<Typography variant="h6">{name}</Typography>}
-        subheader={<Typography>{contactPartnershipStatus[status]}</Typography>}
+        title={
+          <Link underline="hover" onClick={handleContactNameClick}>
+            <Typography variant="h6">{name}</Typography>
+          </Link>
+        }
+        subheader={
+          <Link underline="hover" onClick={handleContactNameClick}>
+            <Typography>{contactPartnershipStatus[status]}</Typography>
+          </Link>
+        }
       />
       <CardContent className={(classes.paddingX, classes.paddingY)}>
         <Grid item xs={12}>

src/components/Tool/FixMailingAddresses/FixMailingAddresses.test.tsx

@@ -23,6 +23,7 @@ const contactId = 'contactId';
 const router = {
   isReady: true,
 };
+const setContactFocus = jest.fn();
 
 const mockEnqueue = jest.fn();
 jest.mock('notistack', () => ({
@@ -53,7 +54,10 @@ const Components = ({
           mocks={mocks}
           cache={cache}
         >
-          <FixSendNewsletter accountListId={accountListId} />
+          <FixSendNewsletter
+            accountListId={accountListId}
+            setContactFocus={setContactFocus}
+          />
         </GqlMockedProvider>
       </ThemeProvider>
     </TestRouter>

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

@@ -15,6 +15,7 @@ import {
 } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/fixMailingAddresses/[[...contactId]].page';
 import { DynamicAddAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/DynamicAddAddressModal';
 import { DynamicEditContactAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/DynamicEditContactAddressModal';
 import theme from '../../../theme';
@@ -110,6 +111,7 @@ export const emptyAddress: ContactAddressFragment = {
 
 interface Props {
   accountListId: string;
+  setContactFocus: SetContactFocus;
 }
 enum ModalEnum {
   New = 'New',
@@ -118,7 +120,10 @@ enum ModalEnum {
 
 const sourceOptions = [appName, 'DataServer'];
 
-const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
+const FixSendNewsletter: React.FC<Props> = ({
+  accountListId,
+  setContactFocus,
+}: Props) => {
   const { classes } = useStyles();
   const { t } = useTranslation();
   const [showEditAddressModal, setShowEditAddressModal] = useState(false);
@@ -297,6 +302,7 @@ const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
                         openNewAddressModal={(address, contactId) =>
                           handleModalOpen(ModalEnum.New, address, contactId)
                         }
+                        setContactFocus={setContactFocus}
                       />
                     ))}
                   </Grid>