CruGlobal · dr-bizz · Jun 20, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
diff --git a/pages/accountLists/[accountListId]/contacts/helpers.ts b/pages/accountLists/[accountListId]/contacts/helpers.ts
@@ -50,6 +50,41 @@
     '/accountLists/[accountListId]/reports/donations/[[...contactId]]'
   ) {
     pathname = `/accountLists/${accountListId}/reports/donations`;
+  } else if (
+    routerPathname ===
+    '/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`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/mergeContacts/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/mergeContacts`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/fixEmailAddresses/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/fixEmailAddresses`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/fixPhoneNumbers/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/fixPhoneNumbers`;
+  } else if (
+    routerPathname ===
+    '/accountLists/[accountListId]/tools/mergePeople/[[...contactId]]'
+  ) {
+    pathname = `/accountLists/${accountListId}/tools/mergePeople`;
   }
 
   if (contactId) {

diff --git a/pages/accountLists/[accountListId]/tools/ToolsWrapper.tsx b/pages/accountLists/[accountListId]/tools/ToolsWrapper.tsx
@@ -0,0 +1,56 @@
+import Head from 'next/head';
+import React, { JSXElementConstructor, ReactElement } from 'react';
+import { DynamicContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import Loading from 'src/components/Loading';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { ContactsWrapper } from '../contacts/ContactsWrapper';
+import { useToolsHelper } from './useToolsHelper';
+
+interface ToolsWrapperProps {
+  pageTitle: string;
+  pageUrl: string;
+  selectedMenuId: string; // for later use
+  children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
+}
+
+export const ToolsWrapper: React.FC<ToolsWrapperProps> = ({
+  pageTitle,
+  pageUrl,
+  children,
+}) => {
+  const { appName } = useGetAppSettings();
+  const { accountListId, selectedContactId, handleSelectContact } =
+    useToolsHelper();
+
+  return (
+    <>
+      <Head>
+        <title>
+          {appName} | {pageTitle}
+        </title>
+      </Head>
+      {accountListId ? (
+        <SidePanelsLayout
+          leftOpen={false}
+          leftWidth="290px"
+          mainContent={children}
+          rightPanel={
+            selectedContactId ? (
+              <ContactsWrapper>
+                <DynamicContactsRightPanel
+                  onClose={() => handleSelectContact(pageUrl, '')}
+                />
+              </ContactsWrapper>
+            ) : undefined
+          }
+          rightOpen={typeof selectedContactId !== 'undefined'}
+          rightWidth="60%"
+          headerHeight={'0px'}
+        />
+      ) : (
+        <Loading loading />
+      )}
+    </>
+  );
+};
diff --git a/pages/accountLists/[accountListId]/tools/fixCommitmentInfo.page.tsx b/pages/accountLists/[accountListId]/tools/fixCommitmentInfo.page.tsx
diff --git a/pages/accountLists/[accountListId]/tools/fixCommitmentInfo/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tools/fixCommitmentInfo/[[...contactId]].page.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { loadSession } from 'pages/api/utils/pagePropsHelpers';
+import FixCommitmentInfo from 'src/components/Tool/FixCommitmentInfo/FixCommitmentInfo';
+import { ToolsWrapper } from '../ToolsWrapper';
+import { SetContactFocus, useToolsHelper } from '../useToolsHelper';
+
+const FixCommitmentInfoPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { accountListId, handleSelectContact } = useToolsHelper();
+  const pageUrl = 'tools/fixCommitmentInfo';
+
+  const setContactFocus: SetContactFocus = (contactId) => {
+    handleSelectContact(pageUrl, contactId);
+  };
+
+  return (
+    <ToolsWrapper
+      pageTitle={t('Fix Commitment Info')}
+      pageUrl={pageUrl}
+      selectedMenuId="fixCommitmentInfo"
+    >
+      <FixCommitmentInfo
+        accountListId={accountListId || ''}
+        setContactFocus={setContactFocus}
+      />
+    </ToolsWrapper>
+  );
+};
+
+export const getServerSideProps = loadSession;
+
+export default FixCommitmentInfoPage;
diff --git a/pages/accountLists/[accountListId]/tools/fixEmailAddresses.page.tsx b/pages/accountLists/[accountListId]/tools/fixEmailAddresses.page.tsx
diff --git a/pages/accountLists/[accountListId]/tools/fixEmailAddresses/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tools/fixEmailAddresses/[[...contactId]].page.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { loadSession } from 'pages/api/utils/pagePropsHelpers';
+import { FixEmailAddresses } from 'src/components/Tool/FixEmailAddresses/FixEmailAddresses';
+import { ToolsWrapper } from '../ToolsWrapper';
+import { SetContactFocus, useToolsHelper } from '../useToolsHelper';
+
+const FixEmailAddressesPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { accountListId, handleSelectContact } = useToolsHelper();
+  const pageUrl = 'tools/fixEmailAddresses';
+
+  const setContactFocus: SetContactFocus = (contactId) => {
+    handleSelectContact(pageUrl, contactId);
+  };
+
+  return (
+    <ToolsWrapper
+      pageTitle={t('Fix Email Addresses')}
+      pageUrl={pageUrl}
+      selectedMenuId="fixEmailAddresses"
+    >
+      <FixEmailAddresses
+        accountListId={accountListId || ''}
+        setContactFocus={setContactFocus}
+      />
+    </ToolsWrapper>
+  );
+};
+
+export const getServerSideProps = loadSession;
+
+export default FixEmailAddressesPage;
diff --git a/pages/accountLists/[accountListId]/tools/fixMailingAddresses.page.tsx b/pages/accountLists/[accountListId]/tools/fixMailingAddresses.page.tsx
diff --git a/pages/accountLists/[accountListId]/tools/fixMailingAddresses/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/fixMailingAddresses/[[...contactId]].page.test.tsx
@@ -0,0 +1,102 @@
+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 { ApolloErgonoMockMap } from 'graphql-ergonomock';
+import { getSession } from 'next-auth/react';
+import { SnackbarProvider } from 'notistack';
+import { I18nextProvider } from 'react-i18next';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { mockInvalidAddressesResponse } from 'src/components/Tool/FixMailingAddresses/FixMailingAddressesMock';
+import { InvalidAddressesQuery } from 'src/components/Tool/FixMailingAddresses/GetInvalidAddresses.generated';
+import i18n from 'src/lib/i18n';
+import theme from 'src/theme';
+import FixMailingAddressesPage from './[[...contactId]].page';
+
+jest.mock('next-auth/react');
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+jest.mock('src/lib/helpScout', () => ({
+  suggestArticles: jest.fn(),
+}));
+jest.mock('notistack', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('notistack'),
+  useSnackbar: () => {
+    return {
+      enqueueSnackbar: jest.fn(),
+    };
+  },
+}));
+
+const pushFn = jest.fn();
+const accountListId = 'account-list-1';
+const contactId = 'contactId';
+const session = {
+  expires: '2021-10-28T14:48:20.897Z',
+  user: {
+    email: 'Chair Library Bed',
+    image: null,
+    name: 'Dung Tapestry',
+    token: 'superLongJwtString',
+  },
+};
+const Components = ({ mocks }: { mocks: ApolloErgonoMockMap }) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter>
+      <GqlMockedProvider<{
+        InvalidAddresses: InvalidAddressesQuery;
+      }>
+        mocks={mocks}
+      >
+        <I18nextProvider i18n={i18n}>
+          <SnackbarProvider>
+            <FixMailingAddressesPage />
+          </SnackbarProvider>
+        </I18nextProvider>
+      </GqlMockedProvider>
+    </TestRouter>
+  </ThemeProvider>
+);
+
+describe('FixMailingAddressesPage', () => {
+  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, queryByTestId } = render(
+      <Components
+        mocks={{
+          InvalidAddresses: {
+            ...mockInvalidAddressesResponse.InvalidAddresses,
+          },
+        }}
+      />,
+    );
+    await waitFor(() =>
+      expect(queryByTestId('loading')).not.toBeInTheDocument(),
+    );
+
+    const contactName = getByText('Baggins, Frodo');
+
+    expect(contactName).toBeInTheDocument();
+    userEvent.click(contactName);
+
+    await waitFor(() => {
+      expect(pushFn).toHaveBeenCalledWith(
+        `/accountLists/${accountListId}/tools/fixMailingAddresses/${contactId}`,
+      );
+    });
+  });
+});