From bb42ffb4910c2b2d3a33a482bca32f3819d83aa0 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Fri, 12 Jul 2024 11:34:47 -0400
Subject: [PATCH 01/10] Rename function to be more consistent with the codebase

---
 src/components/Tool/FixSendNewsletter/Contact.test.tsx      | 2 +-
 src/components/Tool/FixSendNewsletter/Contact.tsx           | 6 +++---
 src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Tool/FixSendNewsletter/Contact.test.tsx b/src/components/Tool/FixSendNewsletter/Contact.test.tsx
index 17ac3c4f2..e734d5d81 100644
--- a/src/components/Tool/FixSendNewsletter/Contact.test.tsx
+++ b/src/components/Tool/FixSendNewsletter/Contact.test.tsx
@@ -21,7 +21,7 @@ const TestComponent = ({
       primaryPerson={primaryPerson}
       status=""
       primaryAddress={primaryAddress}
-      updateFunction={jest.fn()}
+      handleSingleConfirm={jest.fn()}
       setContactFocus={jest.fn()}
     />
   </ThemeProvider>
diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx
index 0a935f501..85a36a7e3 100644
--- a/src/components/Tool/FixSendNewsletter/Contact.tsx
+++ b/src/components/Tool/FixSendNewsletter/Contact.tsx
@@ -85,7 +85,7 @@ interface Props {
   status?: string;
   primaryAddress?: ContactPrimaryAddressFragment;
   source?: string;
-  updateFunction: (id: string, sendNewsletter: string) => Promise<void>;
+  handleSingleConfirm: (id: string, sendNewsletter: string) => Promise<void>;
   setContactFocus: SetContactFocus;
 }
 
@@ -95,7 +95,7 @@ const Contact = ({
   primaryPerson,
   status,
   primaryAddress,
-  updateFunction,
+  handleSingleConfirm,
   setContactFocus,
 }: Props): ReactElement => {
   const { t } = useTranslation();
@@ -252,7 +252,7 @@ const Contact = ({
             <Box className={classes.buttonTop}>
               <Button
                 variant="contained"
-                onClick={() => updateFunction(id, newsletter)}
+                onClick={() => handleSingleConfirm(id, newsletter)}
               >
                 <Icon
                   path={mdiCheckboxMarkedCircle}
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
index 0ab48ac0c..192b0deeb 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
@@ -80,7 +80,7 @@ const FixSendNewsletter: React.FC<Props> = ({
     useUpdateContactNewsletterMutation();
 
   //TODO: Add deceased to contact filters
-  const updateContact = async (
+  const handleSingleConfirm = async (
     id: string,
     sendNewsletter: string,
   ): Promise<void> => {
@@ -200,7 +200,7 @@ const FixSendNewsletter: React.FC<Props> = ({
                         createdAt: '',
                       }
                     }
-                    updateFunction={updateContact}
+                    handleSingleConfirm={handleSingleConfirm}
                     setContactFocus={setContactFocus}
                   />
                 ))}

From 1861d66e94ac25bfe5c8fc454f295918b4ac1966 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Fri, 12 Jul 2024 15:18:31 -0400
Subject: [PATCH 02/10] Add error handling to the Confirm button

---
 src/components/Tool/FixSendNewsletter/Contact.tsx         | 8 ++++++--
 .../Tool/FixSendNewsletter/FixSendNewsletter.tsx          | 7 +++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx
index 85a36a7e3..0c23ccf75 100644
--- a/src/components/Tool/FixSendNewsletter/Contact.tsx
+++ b/src/components/Tool/FixSendNewsletter/Contact.tsx
@@ -85,7 +85,11 @@ interface Props {
   status?: string;
   primaryAddress?: ContactPrimaryAddressFragment;
   source?: string;
-  handleSingleConfirm: (id: string, sendNewsletter: string) => Promise<void>;
+  handleSingleConfirm: (
+    id: string,
+    name: string,
+    sendNewsletter: string,
+  ) => Promise<void>;
   setContactFocus: SetContactFocus;
 }
 
@@ -252,7 +256,7 @@ const Contact = ({
             <Box className={classes.buttonTop}>
               <Button
                 variant="contained"
-                onClick={() => handleSingleConfirm(id, newsletter)}
+                onClick={() => handleSingleConfirm(id, name, newsletter)}
               >
                 <Icon
                   path={mdiCheckboxMarkedCircle}
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
index 192b0deeb..15e25e44e 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
@@ -82,6 +82,7 @@ const FixSendNewsletter: React.FC<Props> = ({
   //TODO: Add deceased to contact filters
   const handleSingleConfirm = async (
     id: string,
+    name: string,
     sendNewsletter: string,
   ): Promise<void> => {
     const attributes = {
@@ -120,6 +121,12 @@ const FixSendNewsletter: React.FC<Props> = ({
           cache.writeQuery({ ...query, data });
         }
       },
+      onError() {
+        enqueueSnackbar(t(`Error updating contact ${name}`), {
+          variant: 'error',
+          autoHideDuration: 7000,
+        });
+      },
     });
     enqueueSnackbar(t('Newsletter updated!'), {
       variant: 'success',

From 0de14b7de800bf598b1829b3ae03e8a5578fb413 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Fri, 12 Jul 2024 15:20:47 -0400
Subject: [PATCH 03/10] Remove TODO that has already been done

---
 src/components/Tool/FixSendNewsletter/Contact.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx
index 0c23ccf75..4ec8de088 100644
--- a/src/components/Tool/FixSendNewsletter/Contact.tsx
+++ b/src/components/Tool/FixSendNewsletter/Contact.tsx
@@ -125,8 +125,6 @@ const Contact = ({
     setNewsletter(newNewsletterValue);
   }, [primaryAddress]);
 
-  //TODO: Add button functionality
-
   const handleChange = (
     event:
       | React.ChangeEvent<HTMLSelectElement>

From 78d1bc4b4e155dc58666abe308bdc6cdfaed92a8 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 15 Jul 2024 09:08:17 -0400
Subject: [PATCH 04/10] Add tests for confirm button

---
 .../FixSendNewsletter.test.tsx                | 169 ++++++++++++++++++
 .../FixSendNewsletterMock.ts                  |  55 ++++++
 2 files changed, 224 insertions(+)
 create mode 100644 src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
 create mode 100644 src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts

diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
new file mode 100644
index 000000000..ca1151631
--- /dev/null
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
@@ -0,0 +1,169 @@
+import { ApolloCache, InMemoryCache } from '@apollo/client';
+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 { MockLinkCallHandler } from 'graphql-ergonomock/dist/apollo/MockLink';
+import { SnackbarProvider } from 'notistack';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import theme from 'src/theme';
+import FixSendNewsletter from './FixSendNewsletter';
+import {
+  mockInvalidNewslettersResponse,
+  mockUploadNewsletterChange,
+} from './FixSendNewsletterMock';
+import { GetInvalidNewsletterQuery } from './GetInvalidNewsletter.generated';
+import { UpdateContactNewsletterMutation } from './UpdateNewsletter.generated';
+
+const mockEnqueue = jest.fn();
+jest.mock('notistack', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('notistack'),
+  useSnackbar: () => {
+    return {
+      enqueueSnackbar: mockEnqueue,
+    };
+  },
+}));
+
+const accountListId = 'account-id';
+const router = {
+  isReady: true,
+};
+const setContactFocus = jest.fn();
+
+const TestComponent = ({
+  mocks,
+  cache,
+  onCall,
+}: {
+  mocks: ApolloErgonoMockMap;
+  cache?: ApolloCache<object>;
+  onCall?: MockLinkCallHandler;
+}) => (
+  <SnackbarProvider>
+    <TestRouter router={router}>
+      <ThemeProvider theme={theme}>
+        <GqlMockedProvider<{
+          GetInvalidNewsletter: GetInvalidNewsletterQuery;
+          UpdateContactNewsletter: UpdateContactNewsletterMutation;
+        }>
+          mocks={mocks}
+          cache={cache}
+          onCall={onCall}
+        >
+          <FixSendNewsletter
+            accountListId={accountListId}
+            setContactFocus={setContactFocus}
+          />
+        </GqlMockedProvider>
+      </ThemeProvider>
+    </TestRouter>
+  </SnackbarProvider>
+);
+
+describe('FixSendNewsletter', () => {
+  beforeEach(() => {
+    setContactFocus.mockClear();
+  });
+
+  describe('render', () => {
+    it('should show the confirm button', async () => {
+      const { getAllByRole } = render(
+        <TestComponent
+          mocks={{
+            GetInvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            },
+          }}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(getAllByRole('button', { name: 'Confirm' })[0]).toBeVisible();
+      });
+    });
+  });
+
+  describe('confirm single', () => {
+    const name =
+      mockInvalidNewslettersResponse.GetInvalidNewsletter.contacts.nodes[0]
+        .name;
+    const otherName =
+      mockInvalidNewslettersResponse.GetInvalidNewsletter.contacts.nodes[1]
+        .name;
+    const initialNewsletterValue = 'None';
+    const newNewsletterValue = 'Physical';
+
+    it('should successfully update the newsletter', async () => {
+      const cache = new InMemoryCache();
+      jest.spyOn(cache, 'readQuery').mockReturnValue({
+        ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+      });
+
+      const { getAllByRole, queryByText, queryByRole } = render(
+        <TestComponent
+          mocks={{
+            GetInvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            },
+            UpdateContactNewsletter: {
+              ...mockUploadNewsletterChange.UpdateContactNewsletter,
+            },
+          }}
+          cache={cache}
+        />,
+      );
+      await waitFor(() =>
+        expect(queryByRole('progressbar')).not.toBeInTheDocument(),
+      );
+
+      const newsletterDropdown = getAllByRole('combobox')[0];
+      await waitFor(() => {
+        expect(newsletterDropdown).toHaveDisplayValue([initialNewsletterValue]);
+      });
+      userEvent.selectOptions(newsletterDropdown, newNewsletterValue);
+      userEvent.click(getAllByRole('button', { name: 'Confirm' })[0]);
+      await waitFor(() => {
+        expect(mockEnqueue).toHaveBeenCalledWith('Newsletter updated!', {
+          variant: 'success',
+        });
+        expect(queryByText(name)).not.toBeInTheDocument();
+        expect(queryByText(otherName)).toBeInTheDocument();
+      });
+    });
+
+    it('should handle an error', async () => {
+      const { getAllByRole, queryByRole } = render(
+        <TestComponent
+          mocks={{
+            GetInvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            },
+            UpdateContactNewsletter: () => {
+              throw new Error('Server Error');
+            },
+          }}
+        />,
+      );
+
+      await waitFor(() =>
+        expect(queryByRole('progressbar')).not.toBeInTheDocument(),
+      );
+
+      userEvent.click(getAllByRole('button', { name: 'Confirm' })[0]);
+
+      await waitFor(() => {
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          `Error updating contact ${name}`,
+          {
+            variant: 'error',
+            autoHideDuration: 7000,
+          },
+        );
+      });
+    });
+  });
+});
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
new file mode 100644
index 000000000..a4a17e119
--- /dev/null
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
@@ -0,0 +1,55 @@
+import { SendNewsletterEnum, StatusEnum } from 'src/graphql/types.generated';
+
+export const mpdxSourcedAddress = {
+  street: '100 Lake Hart Drive',
+  city: 'Orlando',
+  state: 'FL',
+  postalCode: '32832',
+  source: 'MPDX',
+  createdAt: '2024-06-12T13:07:40-04:00',
+};
+
+export const primaryPerson = {
+  firstName: 'Frodo',
+  lastName: 'Baggins',
+  primaryEmailAddress: {
+    email: 'frodo.baggins@shire.com',
+  },
+  optoutEnewsletter: false,
+};
+
+export const mockInvalidNewslettersResponse = {
+  GetInvalidNewsletter: {
+    contacts: {
+      nodes: [
+        {
+          id: 'contactId',
+          name: 'Baggins, Frodo',
+          status: StatusEnum.PartnerPray,
+          source: 'MPDX',
+          primaryAddress: mpdxSourcedAddress,
+          primaryPerson,
+        },
+        {
+          id: 'contactId2',
+          name: 'Gamgee, Samwise',
+          status: StatusEnum.PartnerFinancial,
+          source: 'MPDX',
+          primaryAddress: null,
+          primaryPerson: null,
+        },
+      ],
+    },
+  },
+};
+
+export const mockUploadNewsletterChange = {
+  UpdateContactNewsletter: {
+    updateContact: {
+      contact: {
+        id: 'contactId',
+        sendNewsletter: SendNewsletterEnum.Physical,
+      },
+    },
+  },
+};

From a9a6e97f8fbd98e969ce95becd6a7a392aaf3f2f Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 15 Jul 2024 09:16:26 -0400
Subject: [PATCH 05/10] Pull the status test in properly

---
 .../FindSendNewsletter.test.tsx               | 82 -------------------
 .../FixSendNewsletter.test.tsx                | 16 ++++
 .../FixSendNewsletterMock.ts                  |  6 ++
 3 files changed, 22 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/Tool/FixSendNewsletter/FindSendNewsletter.test.tsx

diff --git a/src/components/Tool/FixSendNewsletter/FindSendNewsletter.test.tsx b/src/components/Tool/FixSendNewsletter/FindSendNewsletter.test.tsx
deleted file mode 100644
index c2cd7b28e..000000000
--- a/src/components/Tool/FixSendNewsletter/FindSendNewsletter.test.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ThemeProvider } from '@mui/material/styles';
-import { render, waitFor } from '@testing-library/react';
-import { SnackbarProvider } from 'notistack';
-import TestRouter from '__tests__/util/TestRouter';
-import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { StatusEnum } from 'src/graphql/types.generated';
-import theme from 'src/theme';
-import FixSendNewsletter from './FixSendNewsletter';
-import {
-  GetInvalidNewsletterQuery,
-  useGetInvalidNewsletterQuery,
-} from './GetInvalidNewsletter.generated';
-
-jest.mock('./GetInvalidNewsletter.generated');
-
-const mockEnqueue = jest.fn();
-jest.mock('notistack', () => ({
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  ...jest.requireActual('notistack'),
-  useSnackbar: () => {
-    return {
-      enqueueSnackbar: mockEnqueue,
-    };
-  },
-}));
-
-const accountListId = 'account-id';
-const contactId = 'contact-id';
-const router = {
-  isReady: true,
-};
-const setContactFocus = jest.fn();
-
-const TestComponent = () => (
-  <SnackbarProvider>
-    <TestRouter router={router}>
-      <ThemeProvider theme={theme}>
-        <GqlMockedProvider<{ InvalidNewsletters: GetInvalidNewsletterQuery }>>
-          <FixSendNewsletter
-            accountListId={accountListId}
-            setContactFocus={setContactFocus}
-          />
-        </GqlMockedProvider>
-      </ThemeProvider>
-    </TestRouter>
-  </SnackbarProvider>
-);
-
-describe('FixSendNewsletter', () => {
-  beforeEach(() => {
-    setContactFocus.mockClear();
-  });
-  beforeEach(() => {
-    (useGetInvalidNewsletterQuery as jest.Mock).mockReturnValue({
-      data: {
-        contacts: {
-          nodes: [
-            {
-              id: contactId,
-              name: 'Contact Name',
-              status: StatusEnum.PartnerPray,
-            },
-          ],
-        },
-        constant: {
-          status: [{ id: StatusEnum.PartnerPray, value: 'Partner - Pray' }],
-        },
-      },
-    });
-  });
-
-  describe('render', () => {
-    it('should show the readable value of contact status', async () => {
-      const { getByText } = render(<TestComponent />);
-
-      await waitFor(() => {
-        expect(getByText('Partner - Pray')).toBeVisible();
-      });
-    });
-  });
-});
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
index ca1151631..03d3ea6fb 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
@@ -70,6 +70,22 @@ describe('FixSendNewsletter', () => {
   });
 
   describe('render', () => {
+    it('should show the readable value of contact status', async () => {
+      const { getByText } = render(
+        <TestComponent
+          mocks={{
+            GetInvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            },
+          }}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(getByText('Partner - Pray')).toBeVisible();
+      });
+    });
+
     it('should show the confirm button', async () => {
       const { getAllByRole } = render(
         <TestComponent
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
index a4a17e119..084f7e605 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
@@ -40,6 +40,12 @@ export const mockInvalidNewslettersResponse = {
         },
       ],
     },
+    constant: {
+      status: [
+        { id: StatusEnum.PartnerPray, value: 'Partner - Pray' },
+        { id: StatusEnum.PartnerFinancial, value: 'Partner - Financial' },
+      ],
+    },
   },
 };
 

From d5754b7b166376facd2c99a9f71aae10b163ef52 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 15 Jul 2024 09:17:39 -0400
Subject: [PATCH 06/10] Fix some typos

---
 .../Tool/FixMailingAddresses/FixMailingAddresses.test.tsx   | 6 +++---
 .../Tool/FixMailingAddresses/FixMailingAddresses.tsx        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.test.tsx b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.test.tsx
index be34724c6..1867f10ca 100644
--- a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.test.tsx
+++ b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.test.tsx
@@ -8,7 +8,7 @@ import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { CreateContactAddressMutation } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/CreateContactAddress.generated';
 import theme from 'src/theme';
-import FixSendNewsletter from './FixMailingAddresses';
+import FixMailingAddresses from './FixMailingAddresses';
 import {
   mockInvalidAddressesResponse,
   mpdxSourcedAddress,
@@ -54,7 +54,7 @@ const Components = ({
           mocks={mocks}
           cache={cache}
         >
-          <FixSendNewsletter
+          <FixMailingAddresses
             accountListId={accountListId}
             setContactFocus={setContactFocus}
           />
@@ -64,7 +64,7 @@ const Components = ({
   </SnackbarProvider>
 );
 
-describe('FixSendNewsletter', () => {
+describe('FixMailingAddresses', () => {
   beforeEach(() => {
     setContactFocus.mockClear();
   });
diff --git a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
index 5fc6a7cfd..1efb9afb5 100644
--- a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
+++ b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
@@ -130,7 +130,7 @@ enum ModalEnum {
 
 const sourceOptions = [appName, 'DataServer'];
 
-const FixSendNewsletter: React.FC<Props> = ({
+const FixMailingAddresses: React.FC<Props> = ({
   accountListId,
   setContactFocus,
 }: Props) => {
@@ -475,4 +475,4 @@ const FixSendNewsletter: React.FC<Props> = ({
   );
 };
 
-export default FixSendNewsletter;
+export default FixMailingAddresses;

From 5f21447bf42190668302a33040ef40158db46581 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 15 Jul 2024 09:22:15 -0400
Subject: [PATCH 07/10] Ignore mock files for coverage

---
 jest.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/jest.config.js b/jest.config.js
index 3a684d970..cc8bf31c5 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -42,6 +42,7 @@ const customJestConfig = {
     '!**/*.mock.*',
     '!**/*.stories.*',
     '!**/*.test.*',
+    '!**/*Mock.ts',
   ],
   testEnvironment: 'jest-environment-jsdom',
   snapshotFormat: {

From 877b8e37bcf23a8f8c55621b2e2a0eb8c3ba7cf1 Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 15 Jul 2024 11:18:09 -0400
Subject: [PATCH 08/10] Filter out deceased contacts

---
 .../FixSendNewsletter.test.tsx                | 92 ++++++++++++++++++
 .../FixSendNewsletter/FixSendNewsletter.tsx   | 95 +++++++++++--------
 .../FixSendNewsletterMock.ts                  | 12 +++
 .../GetInvalidNewsletter.graphql              |  1 +
 4 files changed, 159 insertions(+), 41 deletions(-)

diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
index 03d3ea6fb..22c27df19 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
@@ -65,6 +65,9 @@ const TestComponent = ({
 );
 
 describe('FixSendNewsletter', () => {
+  const deceasedName =
+    mockInvalidNewslettersResponse.GetInvalidNewsletter.contacts.nodes[2].name;
+
   beforeEach(() => {
     setContactFocus.mockClear();
   });
@@ -101,6 +104,26 @@ describe('FixSendNewsletter', () => {
         expect(getAllByRole('button', { name: 'Confirm' })[0]).toBeVisible();
       });
     });
+
+    it('should not show deceased contacts', async () => {
+      const { queryByRole, queryByText } = render(
+        <TestComponent
+          mocks={{
+            GetInvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            },
+          }}
+        />,
+      );
+
+      await waitFor(() =>
+        expect(queryByRole('progressbar')).not.toBeInTheDocument(),
+      );
+
+      await waitFor(() => {
+        expect(queryByText(deceasedName)).not.toBeInTheDocument();
+      });
+    });
   });
 
   describe('confirm single', () => {
@@ -181,5 +204,74 @@ describe('FixSendNewsletter', () => {
         );
       });
     });
+
+    it('should filter out deceased', async () => {
+      const cache = new InMemoryCache();
+      jest.spyOn(cache, 'readQuery').mockReturnValue({
+        ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+      });
+      jest.spyOn(cache, 'writeQuery');
+
+      const { getAllByRole, queryByText, queryByRole } = render(
+        <TestComponent
+          mocks={{
+            GetInvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            },
+            UpdateContactNewsletter: {
+              ...mockUploadNewsletterChange.UpdateContactNewsletter,
+            },
+          }}
+          cache={cache}
+        />,
+      );
+      await waitFor(() =>
+        expect(queryByRole('progressbar')).not.toBeInTheDocument(),
+      );
+
+      const newsletterDropdown = getAllByRole('combobox')[0];
+      userEvent.selectOptions(newsletterDropdown, newNewsletterValue);
+      userEvent.click(getAllByRole('button', { name: 'Confirm' })[0]);
+      await waitFor(() => {
+        expect(queryByText(deceasedName)).not.toBeInTheDocument();
+        expect(queryByText(otherName)).toBeInTheDocument();
+        expect(cache.writeQuery).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: {
+              constant: expect.any(Object),
+              contacts: {
+                nodes: [
+                  {
+                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
+                      .contacts.nodes[0],
+                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
+                      .contacts.nodes[1],
+                  },
+                ],
+              },
+            },
+          }),
+        );
+        expect(cache.writeQuery).not.toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: {
+              constant: expect.any(Object),
+              contacts: {
+                nodes: [
+                  {
+                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
+                      .contacts.nodes[0],
+                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
+                      .contacts.nodes[1],
+                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
+                      .contacts.nodes[2],
+                  },
+                ],
+              },
+            },
+          }),
+        );
+      });
+    });
   });
 });
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
index 15e25e44e..1b6a42dd4 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
@@ -76,10 +76,17 @@ const FixSendNewsletter: React.FC<Props> = ({
   const { data, loading } = useGetInvalidNewsletterQuery({
     variables: { accountListId },
   });
+
+  let numberOfContacts = data?.contacts.nodes.length ?? 0;
+  if (data) {
+    const filtered = data.contacts.nodes.filter((node) => {
+      return !node.primaryPerson?.deceased;
+    });
+    numberOfContacts = filtered.length;
+  }
   const [updateNewsletter, { loading: updating }] =
     useUpdateContactNewsletterMutation();
 
-  //TODO: Add deceased to contact filters
   const handleSingleConfirm = async (
     id: string,
     name: string,
@@ -113,7 +120,9 @@ const FixSendNewsletter: React.FC<Props> = ({
             contacts: {
               ...dataFromCache.contacts,
               nodes: dataFromCache.contacts.nodes.filter(
-                (contact) => contact.id !== updateContactId,
+                (contact) =>
+                  contact.id !== updateContactId &&
+                  !contact.primaryPerson?.deceased,
               ),
             },
             constant: dataFromCache.constant,
@@ -141,7 +150,7 @@ const FixSendNewsletter: React.FC<Props> = ({
             <Typography variant="h4">{t('Fix Send Newsletter')}</Typography>
             <Divider className={classes.divider} />
           </Grid>
-          {data?.contacts.nodes.length > 0 ? (
+          {numberOfContacts > 0 ? (
             <>
               <Grid item xs={12}>
                 <Box className={classes.descriptionBox}>
@@ -150,7 +159,7 @@ const FixSendNewsletter: React.FC<Props> = ({
                       {t(
                         'You have {{amount}} newsletter statuses to confirm.',
                         {
-                          amount: data?.contacts.nodes.length,
+                          amount: numberOfContacts,
                         },
                       )}
                     </strong>
@@ -169,48 +178,52 @@ const FixSendNewsletter: React.FC<Props> = ({
                     <Trans
                       defaults="Cofirm {{value}}"
                       values={{
-                        value: data?.contacts.nodes.length,
+                        value: numberOfContacts,
                       }}
                     />
                   </Button>
                 </Box>
               </Grid>
               <Grid item xs={12}>
-                {data.contacts.nodes.map((contact) => (
-                  <Contact
-                    id={contact.id}
-                    name={contact.name}
-                    // need to fix this after changes to fix commitment info get merged
-                    status={
-                      data.constant.status?.find(
-                        (status) => contact.status === status.id,
-                      )?.value || ''
-                    }
-                    primaryPerson={
-                      contact.primaryPerson || {
-                        firstName: '',
-                        lastName: '',
-                        primaryEmailAddress: {
-                          email: '',
-                        },
-                        optoutEnewsletter: false,
-                      }
-                    }
-                    key={contact.id}
-                    primaryAddress={
-                      contact.primaryAddress || {
-                        street: '',
-                        city: '',
-                        state: '',
-                        postalCode: '',
-                        source: '',
-                        createdAt: '',
-                      }
-                    }
-                    handleSingleConfirm={handleSingleConfirm}
-                    setContactFocus={setContactFocus}
-                  />
-                ))}
+                {data.contacts.nodes.map(
+                  (contact) =>
+                    !contact.primaryPerson?.deceased && (
+                      <Contact
+                        id={contact.id}
+                        name={contact.name}
+                        // need to fix this after changes to fix commitment info get merged
+                        status={
+                          data.constant.status?.find(
+                            (status) => contact.status === status.id,
+                          )?.value || ''
+                        }
+                        primaryPerson={
+                          contact.primaryPerson || {
+                            firstName: '',
+                            lastName: '',
+                            primaryEmailAddress: {
+                              email: '',
+                            },
+                            optoutEnewsletter: false,
+                            deceased: false,
+                          }
+                        }
+                        key={contact.id}
+                        primaryAddress={
+                          contact.primaryAddress || {
+                            street: '',
+                            city: '',
+                            state: '',
+                            postalCode: '',
+                            source: '',
+                            createdAt: '',
+                          }
+                        }
+                        handleSingleConfirm={handleSingleConfirm}
+                        setContactFocus={setContactFocus}
+                      />
+                    ),
+                )}
               </Grid>
               <Grid item xs={12}>
                 <Box className={classes.footer}>
@@ -219,7 +232,7 @@ const FixSendNewsletter: React.FC<Props> = ({
                       defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
                       shouldUnescape
                       values={{
-                        value: data?.contacts.nodes.length,
+                        value: numberOfContacts,
                       }}
                       components={{ bold: <strong /> }}
                     />
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
index 084f7e605..2ac9d4281 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
@@ -16,6 +16,7 @@ export const primaryPerson = {
     email: 'frodo.baggins@shire.com',
   },
   optoutEnewsletter: false,
+  deceased: false,
 };
 
 export const mockInvalidNewslettersResponse = {
@@ -38,12 +39,23 @@ export const mockInvalidNewslettersResponse = {
           primaryAddress: null,
           primaryPerson: null,
         },
+        {
+          id: 'contactId3',
+          name: 'Gollum, Smeagol',
+          status: StatusEnum.NeverAsk,
+          source: 'MPDX',
+          primaryAddress: null,
+          primaryPerson: {
+            deceased: true,
+          },
+        },
       ],
     },
     constant: {
       status: [
         { id: StatusEnum.PartnerPray, value: 'Partner - Pray' },
         { id: StatusEnum.PartnerFinancial, value: 'Partner - Financial' },
+        { id: StatusEnum.NeverAsk, value: 'Never Ask' },
       ],
     },
   },
diff --git a/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql b/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql
index df729bd86..f02013608 100644
--- a/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql
+++ b/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql
@@ -41,6 +41,7 @@ fragment ContactPrimaryPerson on Person {
     email
   }
   optoutEnewsletter
+  deceased
 }
 
 fragment Status on Constant {

From 4bcff605db35df3959771d19f865a50a3aa592cd Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 29 Jul 2024 11:44:40 -0400
Subject: [PATCH 09/10] Rename GetInvalidNewsletter to InvalidNewsletter

---
 .../Tool/FixSendNewsletter/Contact.test.tsx   |  2 +-
 .../Tool/FixSendNewsletter/Contact.tsx        |  2 +-
 .../FixSendNewsletter.test.tsx                | 60 +++++++++----------
 .../FixSendNewsletter/FixSendNewsletter.tsx   | 14 ++---
 .../FixSendNewsletterMock.ts                  |  2 +-
 ...tter.graphql => InvalidNewsletter.graphql} |  2 +-
 6 files changed, 40 insertions(+), 42 deletions(-)
 rename src/components/Tool/FixSendNewsletter/{GetInvalidNewsletter.graphql => InvalidNewsletter.graphql} (93%)

diff --git a/src/components/Tool/FixSendNewsletter/Contact.test.tsx b/src/components/Tool/FixSendNewsletter/Contact.test.tsx
index e734d5d81..20c510975 100644
--- a/src/components/Tool/FixSendNewsletter/Contact.test.tsx
+++ b/src/components/Tool/FixSendNewsletter/Contact.test.tsx
@@ -5,7 +5,7 @@ import Contact from './Contact';
 import {
   ContactPrimaryAddressFragment,
   ContactPrimaryPersonFragment,
-} from './GetInvalidNewsletter.generated';
+} from './InvalidNewsletter.generated';
 
 const TestComponent = ({
   primaryPerson,
diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx
index 4ec8de088..c1de8f5dd 100644
--- a/src/components/Tool/FixSendNewsletter/Contact.tsx
+++ b/src/components/Tool/FixSendNewsletter/Contact.tsx
@@ -19,7 +19,7 @@ import { StyledInput } from '../StyledInput';
 import {
   ContactPrimaryAddressFragment,
   ContactPrimaryPersonFragment,
-} from './GetInvalidNewsletter.generated';
+} from './InvalidNewsletter.generated';
 
 const useStyles = makeStyles()(() => ({
   left: {
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
index 22c27df19..a0edd45d8 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx
@@ -13,7 +13,7 @@ import {
   mockInvalidNewslettersResponse,
   mockUploadNewsletterChange,
 } from './FixSendNewsletterMock';
-import { GetInvalidNewsletterQuery } from './GetInvalidNewsletter.generated';
+import { InvalidNewsletterQuery } from './InvalidNewsletter.generated';
 import { UpdateContactNewsletterMutation } from './UpdateNewsletter.generated';
 
 const mockEnqueue = jest.fn();
@@ -47,7 +47,7 @@ const TestComponent = ({
     <TestRouter router={router}>
       <ThemeProvider theme={theme}>
         <GqlMockedProvider<{
-          GetInvalidNewsletter: GetInvalidNewsletterQuery;
+          InvalidNewsletter: InvalidNewsletterQuery;
           UpdateContactNewsletter: UpdateContactNewsletterMutation;
         }>
           mocks={mocks}
@@ -66,7 +66,7 @@ const TestComponent = ({
 
 describe('FixSendNewsletter', () => {
   const deceasedName =
-    mockInvalidNewslettersResponse.GetInvalidNewsletter.contacts.nodes[2].name;
+    mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[2].name;
 
   beforeEach(() => {
     setContactFocus.mockClear();
@@ -77,8 +77,8 @@ describe('FixSendNewsletter', () => {
       const { getByText } = render(
         <TestComponent
           mocks={{
-            GetInvalidNewsletter: {
-              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
             },
           }}
         />,
@@ -93,8 +93,8 @@ describe('FixSendNewsletter', () => {
       const { getAllByRole } = render(
         <TestComponent
           mocks={{
-            GetInvalidNewsletter: {
-              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
             },
           }}
         />,
@@ -109,8 +109,8 @@ describe('FixSendNewsletter', () => {
       const { queryByRole, queryByText } = render(
         <TestComponent
           mocks={{
-            GetInvalidNewsletter: {
-              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
             },
           }}
         />,
@@ -128,25 +128,23 @@ describe('FixSendNewsletter', () => {
 
   describe('confirm single', () => {
     const name =
-      mockInvalidNewslettersResponse.GetInvalidNewsletter.contacts.nodes[0]
-        .name;
+      mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[0].name;
     const otherName =
-      mockInvalidNewslettersResponse.GetInvalidNewsletter.contacts.nodes[1]
-        .name;
+      mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[1].name;
     const initialNewsletterValue = 'None';
     const newNewsletterValue = 'Physical';
 
     it('should successfully update the newsletter', async () => {
       const cache = new InMemoryCache();
       jest.spyOn(cache, 'readQuery').mockReturnValue({
-        ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+        ...mockInvalidNewslettersResponse.InvalidNewsletter,
       });
 
       const { getAllByRole, queryByText, queryByRole } = render(
         <TestComponent
           mocks={{
-            GetInvalidNewsletter: {
-              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
             },
             UpdateContactNewsletter: {
               ...mockUploadNewsletterChange.UpdateContactNewsletter,
@@ -178,8 +176,8 @@ describe('FixSendNewsletter', () => {
       const { getAllByRole, queryByRole } = render(
         <TestComponent
           mocks={{
-            GetInvalidNewsletter: {
-              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
             },
             UpdateContactNewsletter: () => {
               throw new Error('Server Error');
@@ -208,15 +206,15 @@ describe('FixSendNewsletter', () => {
     it('should filter out deceased', async () => {
       const cache = new InMemoryCache();
       jest.spyOn(cache, 'readQuery').mockReturnValue({
-        ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+        ...mockInvalidNewslettersResponse.InvalidNewsletter,
       });
       jest.spyOn(cache, 'writeQuery');
 
       const { getAllByRole, queryByText, queryByRole } = render(
         <TestComponent
           mocks={{
-            GetInvalidNewsletter: {
-              ...mockInvalidNewslettersResponse.GetInvalidNewsletter,
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
             },
             UpdateContactNewsletter: {
               ...mockUploadNewsletterChange.UpdateContactNewsletter,
@@ -242,10 +240,10 @@ describe('FixSendNewsletter', () => {
               contacts: {
                 nodes: [
                   {
-                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
-                      .contacts.nodes[0],
-                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
-                      .contacts.nodes[1],
+                    ...mockInvalidNewslettersResponse.InvalidNewsletter.contacts
+                      .nodes[0],
+                    ...mockInvalidNewslettersResponse.InvalidNewsletter.contacts
+                      .nodes[1],
                   },
                 ],
               },
@@ -259,12 +257,12 @@ describe('FixSendNewsletter', () => {
               contacts: {
                 nodes: [
                   {
-                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
-                      .contacts.nodes[0],
-                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
-                      .contacts.nodes[1],
-                    ...mockInvalidNewslettersResponse.GetInvalidNewsletter
-                      .contacts.nodes[2],
+                    ...mockInvalidNewslettersResponse.InvalidNewsletter.contacts
+                      .nodes[0],
+                    ...mockInvalidNewslettersResponse.InvalidNewsletter.contacts
+                      .nodes[1],
+                    ...mockInvalidNewslettersResponse.InvalidNewsletter.contacts
+                      .nodes[2],
                   },
                 ],
               },
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
index 1b6a42dd4..794f2ddc8 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
@@ -18,10 +18,10 @@ import theme from '../../../theme';
 import NoData from '../NoData';
 import Contact from './Contact';
 import {
-  GetInvalidNewsletterDocument,
-  GetInvalidNewsletterQuery,
-  useGetInvalidNewsletterQuery,
-} from './GetInvalidNewsletter.generated';
+  InvalidNewsletterDocument,
+  InvalidNewsletterQuery,
+  useInvalidNewsletterQuery,
+} from './InvalidNewsletter.generated';
 import { useUpdateContactNewsletterMutation } from './UpdateNewsletter.generated';
 
 const useStyles = makeStyles()(() => ({
@@ -73,7 +73,7 @@ const FixSendNewsletter: React.FC<Props> = ({
   const { classes } = useStyles();
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
-  const { data, loading } = useGetInvalidNewsletterQuery({
+  const { data, loading } = useInvalidNewsletterQuery({
     variables: { accountListId },
   });
 
@@ -106,13 +106,13 @@ const FixSendNewsletter: React.FC<Props> = ({
           updateContactData?.updateContact?.contact.id || '';
 
         const query = {
-          query: GetInvalidNewsletterDocument,
+          query: InvalidNewsletterDocument,
           variables: {
             accountListId,
           },
         };
 
-        const dataFromCache = cache.readQuery<GetInvalidNewsletterQuery>(query);
+        const dataFromCache = cache.readQuery<InvalidNewsletterQuery>(query);
 
         if (dataFromCache) {
           const data = {
diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
index 2ac9d4281..8a66d1938 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletterMock.ts
@@ -20,7 +20,7 @@ export const primaryPerson = {
 };
 
 export const mockInvalidNewslettersResponse = {
-  GetInvalidNewsletter: {
+  InvalidNewsletter: {
     contacts: {
       nodes: [
         {
diff --git a/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql b/src/components/Tool/FixSendNewsletter/InvalidNewsletter.graphql
similarity index 93%
rename from src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql
rename to src/components/Tool/FixSendNewsletter/InvalidNewsletter.graphql
index f02013608..61c4e0763 100644
--- a/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql
+++ b/src/components/Tool/FixSendNewsletter/InvalidNewsletter.graphql
@@ -1,4 +1,4 @@
-query GetInvalidNewsletter($accountListId: ID!) {
+query InvalidNewsletter($accountListId: ID!) {
   contacts(
     accountListId: $accountListId
     contactsFilter: {

From a5a249255be17d09a3d3cd10e6498066809f47fb Mon Sep 17 00:00:00 2001
From: Bill Randall <william.randall@cru.org>
Date: Mon, 29 Jul 2024 11:51:33 -0400
Subject: [PATCH 10/10] Syntax improvement

---
 src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
index 794f2ddc8..f2b6e9abc 100644
--- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
+++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx
@@ -150,7 +150,7 @@ const FixSendNewsletter: React.FC<Props> = ({
             <Typography variant="h4">{t('Fix Send Newsletter')}</Typography>
             <Divider className={classes.divider} />
           </Grid>
-          {numberOfContacts > 0 ? (
+          {!!numberOfContacts ? (
             <>
               <Grid item xs={12}>
                 <Box className={classes.descriptionBox}>