MPDX - (#8032, #8033, #7533, #8034, #8035, #8036, #8037) - FixCommitm…

…entInfo (#974)

* Updates Fix Commitment Info Tool

pages/accountLists/[accountListId]/tools/fix/commitmentInfo/[[...contactId]].page.test.tsx

@@ -0,0 +1,95 @@
+import { useRouter } from 'next/router';
+import { ThemeProvider } from '@mui/material/styles';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ErgonoMockShape } from 'graphql-ergonomock';
+import { getSession } from 'next-auth/react';
+import { SnackbarProvider } from 'notistack';
+import { I18nextProvider } from 'react-i18next';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { mockInvalidStatusesResponse } from 'src/components/Tool/FixCommitmentInfo/FixCommitmentInfoMocks';
+import { InvalidStatusesQuery } from 'src/components/Tool/FixCommitmentInfo/GetInvalidStatuses.generated';
+import i18n from 'src/lib/i18n';
+import theme from 'src/theme';
+import FixCommitmentInfoPage from './[[...contactId]].page';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+const pushFn = jest.fn();
+const accountListId = 'account-list-1';
+const session = {
+  expires: '2021-10-28T14:48:20.897Z',
+  user: {
+    email: 'Chair Library Bed',
+    image: null,
+    name: 'Dung Tapestry',
+    token: 'superLongJwtString',
+  },
+};
+const Components = ({
+  mockNodes = mockInvalidStatusesResponse,
+}: {
+  mockNodes?: ErgonoMockShape[];
+}) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter>
+      <GqlMockedProvider<{
+        InvalidStatuses: InvalidStatusesQuery;
+      }>
+        mocks={{
+          InvalidStatuses: {
+            contacts: {
+              nodes: mockNodes,
+            },
+          },
+        }}
+      >
+        <I18nextProvider i18n={i18n}>
+          <SnackbarProvider>
+            <VirtuosoMockContext.Provider
+              value={{ viewportHeight: 1000, itemHeight: 100 }}
+            >
+              <FixCommitmentInfoPage />
+            </VirtuosoMockContext.Provider>
+          </SnackbarProvider>
+        </I18nextProvider>
+      </GqlMockedProvider>
+    </TestRouter>
+  </ThemeProvider>
+);
+
+describe('FixCommitmentInfoPage', () => {
+  beforeEach(() => {
+    (getSession as jest.Mock).mockResolvedValue(session);
+    (useRouter as jest.Mock).mockReturnValue({
+      query: {
+        accountListId,
+      },
+      isReady: true,
+      push: pushFn,
+    });
+  });
+
+  it('should open up contact details', async () => {
+    const { getByText, queryByText } = render(<Components />);
+    await waitFor(() => expect(queryByText('Tester 1')).toBeInTheDocument());
+
+    const contactName = getByText('Tester 1');
+
+    expect(contactName).toBeInTheDocument();
+    userEvent.click(contactName);
+
+    await waitFor(() => {
+      expect(pushFn).toHaveBeenCalledWith({
+        pathname:
+          '/accountLists/account-list-1/tools/fix/commitmentInfo/tester-1',
+
+        query: { tab: 'Donations' },
+      });
+    });
+  });
+});

pages/accountLists/[accountListId]/tools/fix/commitmentInfo/[[...contactId]].page.tsx

@@ -10,8 +10,8 @@ const FixCommitmentInfoPage: React.FC = () => {
   const { accountListId, handleSelectContact } = useToolsHelper();
   const pageUrl = 'tools/fix/commitmentInfo';
 
-  const setContactFocus: SetContactFocus = (contactId) => {
-    handleSelectContact(pageUrl, contactId);
+  const setContactFocus: SetContactFocus = (contactId, tabKey) => {
+    handleSelectContact(pageUrl, contactId, tabKey);
   };
 
   return (

pages/accountLists/[accountListId]/tools/useToolsHelper.ts

@@ -1,18 +1,25 @@
 import { useRouter } from 'next/router';
 import { useCallback } from 'react';
+import { TabKey } from 'src/components/Contacts/ContactDetails/ContactDetails';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { getQueryParam } from 'src/utils/queryParam';
 
-export type SetContactFocus = (contactId: string) => void;
+export type SetContactFocus = (contactId: string, tab?: TabKey) => void;
 
 export const useToolsHelper = () => {
   const { query, push } = useRouter();
   const accountListId = useAccountListId();
   const selectedContactId = getQueryParam(query, 'contactId');
 
   const handleSelectContact = useCallback(
-    (pagePath: string, contactId: string) => {
-      push(`/accountLists/${accountListId}/${pagePath}/${contactId}`);
+    (pagePath: string, contactId: string, tab?: TabKey) => {
+      const pathname = `/accountLists/${accountListId}/${pagePath}/${contactId}`;
+      tab
+        ? push({
+            pathname,
+            query: { tab },
+          })
+        : push(pathname);
     },
     [accountListId],
   );

src/components/Contacts/ContactDetails/ContactDetailContext.tsx

@@ -59,7 +59,7 @@ export const ContactDetailProvider: React.FC<Props> = ({ children }) => {
   const [editOtherModalOpen, setEditOtherModalOpen] = useState(false);
   const [editMailingModalOpen, setEditMailingModalOpen] = useState(false);
   const [selectedTabKey, setSelectedTabKey] = React.useState(
-    query?.tab ? TabKey[query?.tab.toString()] ?? TabKey.Tasks : TabKey.Tasks,
+    query?.tab ? TabKey[query.tab.toString()] ?? TabKey.Tasks : TabKey.Tasks,
   );
   const handleTabChange = (
     _event: React.ChangeEvent<Record<string, unknown>>,