MPDX-8024 - Fix Send Newsletter - Confirm All Button

src/components/Tool/FixSendNewsletter/Contact.test.tsx

@@ -1,5 +1,6 @@
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
+import { SendNewsletterEnum } from 'src/graphql/types.generated';
 import theme from 'src/theme';
 import Contact from './Contact';
 import {
@@ -21,6 +22,9 @@ const TestComponent = ({
       primaryPerson={primaryPerson}
       status=""
       primaryAddress={primaryAddress}
+      contactUpdates={[
+        { id: '', sendNewsletter: null as unknown as SendNewsletterEnum },
+      ]}
       handleSingleConfirm={jest.fn()}
       setContactFocus={jest.fn()}
     />

src/components/Tool/FixSendNewsletter/Contact.tsx

@@ -16,6 +16,7 @@ import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToo
 import { SendNewsletterEnum } from 'src/graphql/types.generated';
 import theme from '../../../theme';
 import { StyledInput } from '../StyledInput';
+import { ContactUpdateData } from './FixSendNewsletter';
 import {
   ContactPrimaryAddressFragment,
   ContactPrimaryPersonFragment,
@@ -85,6 +86,7 @@ interface Props {
   status?: string;
   primaryAddress?: ContactPrimaryAddressFragment;
   source?: string;
+  contactUpdates: ContactUpdateData[];
   handleSingleConfirm: (
     id: string,
     name: string,
@@ -99,6 +101,7 @@ const Contact = ({
   primaryPerson,
   status,
   primaryAddress,
+  contactUpdates,
   handleSingleConfirm,
   setContactFocus,
 }: Props): ReactElement => {
@@ -122,15 +125,30 @@ const Contact = ({
         }
       }
     }
-    setNewsletter(newNewsletterValue);
+    updateNewsletterValue(newNewsletterValue);
   }, [primaryAddress]);
 
+  const updateNewsletterValue = (sendNewsletter: SendNewsletterEnum): void => {
+    setNewsletter(sendNewsletter);
+    const existingItem = contactUpdates.find(
+      (contactData) => contactData.id === id,
+    );
+    if (existingItem) {
+      existingItem.sendNewsletter = sendNewsletter;
+    } else {
+      contactUpdates.push({
+        id,
+        sendNewsletter: sendNewsletter,
+      });
+    }
+  };
+
   const handleChange = (
     event:
       | React.ChangeEvent<HTMLSelectElement>
       | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
   ): void => {
-    setNewsletter(event.target.value as SendNewsletterEnum);
+    updateNewsletterValue(event.target.value as SendNewsletterEnum);
   };
 
   const handleContactNameClick = () => {

src/components/Tool/FixSendNewsletter/FixSendNewsletter.test.tsx

@@ -7,10 +7,13 @@ 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 { MassActionsUpdateContactsMutation } from 'src/components/Contacts/MassActions/MassActionsUpdateContacts.generated';
+import { SendNewsletterEnum } from 'src/graphql/types.generated';
 import theme from 'src/theme';
 import FixSendNewsletter from './FixSendNewsletter';
 import {
   mockInvalidNewslettersResponse,
+  mockMassActionsUpdateContactsData,
   mockUploadNewsletterChange,
 } from './FixSendNewsletterMock';
 import { InvalidNewsletterQuery } from './InvalidNewsletter.generated';
@@ -49,6 +52,7 @@ const TestComponent = ({
         <GqlMockedProvider<{
           InvalidNewsletter: InvalidNewsletterQuery;
           UpdateContactNewsletter: UpdateContactNewsletterMutation;
+          MassActionsUpdateContacts: MassActionsUpdateContactsMutation;
         }>
           mocks={mocks}
           cache={cache}
@@ -67,6 +71,12 @@ const TestComponent = ({
 describe('FixSendNewsletter', () => {
   const deceasedName =
     mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[2].name;
+  const firstContactName =
+    mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[0].name;
+  const secondContactName =
+    mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[1].name;
+  const initialNewsletterValue = 'None';
+  const newNewsletterValue = 'Physical';
 
   beforeEach(() => {
     setContactFocus.mockClear();
@@ -105,6 +115,22 @@ describe('FixSendNewsletter', () => {
       });
     });
 
+    it('should show the confirm all button', async () => {
+      const { getByRole } = render(
+        <TestComponent
+          mocks={{
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
+            },
+          }}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(getByRole('button', { name: 'Confirm 2' })).toBeVisible();
+      });
+    });
+
     it('should not show deceased contacts', async () => {
       const { queryByRole, queryByText } = render(
         <TestComponent
@@ -127,17 +153,18 @@ describe('FixSendNewsletter', () => {
   });
 
   describe('confirm single', () => {
-    const name =
-      mockInvalidNewslettersResponse.InvalidNewsletter.contacts.nodes[0].name;
-    const otherName =
-      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.InvalidNewsletter,
+        contacts: {
+          nodes: [
+            {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter.contacts
+                .nodes[1],
+              sendNewsletter: SendNewsletterEnum.Physical,
+            },
+          ],
+        },
       });
 
       const { getAllByRole, queryByText, queryByRole } = render(
@@ -167,8 +194,8 @@ describe('FixSendNewsletter', () => {
         expect(mockEnqueue).toHaveBeenCalledWith('Newsletter updated!', {
           variant: 'success',
         });
-        expect(queryByText(name)).not.toBeInTheDocument();
-        expect(queryByText(otherName)).toBeInTheDocument();
+        expect(queryByText(firstContactName)).not.toBeInTheDocument();
+        expect(queryByText(secondContactName)).toBeInTheDocument();
       });
     });
 
@@ -194,7 +221,7 @@ describe('FixSendNewsletter', () => {
 
       await waitFor(() => {
         expect(mockEnqueue).toHaveBeenCalledWith(
-          `Error updating contact ${name}`,
+          `Error updating contact ${firstContactName}`,
           {
             variant: 'error',
             autoHideDuration: 7000,
@@ -232,7 +259,7 @@ describe('FixSendNewsletter', () => {
       userEvent.click(getAllByRole('button', { name: 'Confirm' })[0]);
       await waitFor(() => {
         expect(queryByText(deceasedName)).not.toBeInTheDocument();
-        expect(queryByText(otherName)).toBeInTheDocument();
+        expect(queryByText(secondContactName)).toBeInTheDocument();
         expect(cache.writeQuery).toHaveBeenCalledWith(
           expect.objectContaining({
             data: {
@@ -272,4 +299,133 @@ describe('FixSendNewsletter', () => {
       });
     });
   });
+
+  describe('bulk confirm', () => {
+    const secondContactNewNewsletterValue = 'Both';
+
+    const confirmAll = async (getAllByRole, getByRole, queryByRole) => {
+      await waitFor(() =>
+        expect(queryByRole('progressbar')).not.toBeInTheDocument(),
+      );
+
+      const firstNewsletterDropdown = getAllByRole('combobox')[0];
+      await waitFor(() => {
+        expect(firstNewsletterDropdown).toHaveDisplayValue([
+          initialNewsletterValue,
+        ]);
+      });
+      userEvent.selectOptions(firstNewsletterDropdown, newNewsletterValue);
+
+      const secondNewsletterDropdown = getAllByRole('combobox')[1];
+      await waitFor(() => {
+        expect(secondNewsletterDropdown).toHaveDisplayValue([
+          initialNewsletterValue,
+        ]);
+      });
+      userEvent.selectOptions(
+        secondNewsletterDropdown,
+        secondContactNewNewsletterValue,
+      );
+
+      userEvent.click(getByRole('button', { name: 'Confirm 2' }));
+      userEvent.click(getByRole('button', { name: 'Yes' }));
+    };
+
+    it('should bring up the confirmation modal', async () => {
+      const { getByRole, getByText, queryByRole } = render(
+        <TestComponent
+          mocks={{
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
+            },
+            UpdateContactNewsletter: {
+              ...mockUploadNewsletterChange.UpdateContactNewsletter,
+            },
+          }}
+        />,
+      );
+
+      await waitFor(() =>
+        expect(queryByRole('progressbar')).not.toBeInTheDocument(),
+      );
+
+      userEvent.click(getByRole('button', { name: 'Confirm 2' }));
+
+      await waitFor(() => {
+        expect(
+          getByText(
+            'You are updating all contacts visible on this page, setting it to the visible newsletter selection. Are you sure you want to do this?',
+          ),
+        ).toBeVisible();
+      });
+    });
+
+    it('should successfully update all the contacts', async () => {
+      let cardinality = 0;
+
+      const { getAllByRole, getByRole, queryByText, queryByRole } = render(
+        <TestComponent
+          mocks={{
+            InvalidNewsletter: () => {
+              let queryResult;
+              if (cardinality === 0) {
+                queryResult = {
+                  ...mockInvalidNewslettersResponse.InvalidNewsletter,
+                };
+              } else {
+                queryResult = {
+                  contacts: {
+                    nodes: [
+                      {
+                        ...mockInvalidNewslettersResponse.InvalidNewsletter
+                          .contacts.nodes[2],
+                      },
+                    ],
+                  },
+                };
+              }
+              cardinality++;
+              return queryResult;
+            },
+            MassActionsUpdateContacts: {
+              ...mockMassActionsUpdateContactsData.MassActionsUpdateContacts,
+            },
+          }}
+        />,
+      );
+      confirmAll(getAllByRole, getByRole, queryByRole);
+      await waitFor(() => {
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          'Newsletter statuses updated successfully',
+          {
+            variant: 'success',
+          },
+        );
+        expect(queryByText(firstContactName)).not.toBeInTheDocument();
+        expect(queryByText(secondContactName)).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle errors', async () => {
+      const { getAllByRole, getByRole, queryByRole } = render(
+        <TestComponent
+          mocks={{
+            InvalidNewsletter: {
+              ...mockInvalidNewslettersResponse.InvalidNewsletter,
+            },
+            MassActionsUpdateContacts: () => {
+              throw new Error('Server Error');
+            },
+          }}
+        />,
+      );
+      confirmAll(getAllByRole, getByRole, queryByRole);
+      await waitFor(() => {
+        expect(mockEnqueue).toHaveBeenCalledWith(`Error updating contacts`, {
+          variant: 'error',
+          autoHideDuration: 7000,
+        });
+      });
+    });
+  });
 });