Merge pull request #977 from CruGlobal/MPDX-8022-fix-newsletter-status

MPDX-8022 - Fix Send Newsletter: Contact Status Display Value

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

@@ -0,0 +1,82 @@
+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();
+      });
+    });
+  });
+});

src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx

@@ -115,6 +115,7 @@ const FixSendNewsletter: React.FC<Props> = ({
                 (contact) => contact.id !== updateContactId,
               ),
             },
+            constant: dataFromCache.constant,
           };
           cache.writeQuery({ ...query, data });
         }
@@ -173,7 +174,11 @@ const FixSendNewsletter: React.FC<Props> = ({
                     id={contact.id}
                     name={contact.name}
                     // need to fix this after changes to fix commitment info get merged
-                    status={contact.status || ''}
+                    status={
+                      data.constant.status?.find(
+                        (status) => contact.status === status.id,
+                      )?.value || ''
+                    }
                     primaryPerson={
                       contact.primaryPerson || {
                         firstName: '',

src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql

@@ -20,6 +20,9 @@ query GetInvalidNewsletter($accountListId: ID!) {
       }
     }
   }
+  constant {
+    ...Status
+  }
 }
 
 fragment ContactPrimaryAddress on Address {
@@ -39,3 +42,10 @@ fragment ContactPrimaryPerson on Person {
   }
   optoutEnewsletter
 }
+
+fragment Status on Constant {
+  status {
+    id
+    value
+  }
+}