MPDX-8021 - Fix Send Newsletter dropdown initial values

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

@@ -0,0 +1,135 @@
+import { ThemeProvider } from '@mui/material/styles';
+import { render } from '@testing-library/react';
+import theme from 'src/theme';
+import Contact from './Contact';
+import {
+  ContactPrimaryAddressFragment,
+  ContactPrimaryPersonFragment,
+} from './GetInvalidNewsletter.generated';
+
+const TestComponent = ({
+  primaryPerson,
+  primaryAddress,
+}: {
+  primaryPerson: ContactPrimaryPersonFragment;
+  primaryAddress: ContactPrimaryAddressFragment;
+}) => (
+  <ThemeProvider theme={theme}>
+    <Contact
+      id=""
+      name=""
+      primaryPerson={primaryPerson}
+      status=""
+      primaryAddress={primaryAddress}
+      updateFunction={jest.fn()}
+      setContactFocus={jest.fn()}
+    />
+  </ThemeProvider>
+);
+
+describe('Fix Newsletter - Contact', () => {
+  describe('inital value for dropdown', () => {
+    let primaryPerson = {} as ContactPrimaryPersonFragment;
+    let primaryAddress = {} as ContactPrimaryAddressFragment;
+
+    beforeEach(() => {
+      primaryPerson = {
+        firstName: '',
+        lastName: '',
+        primaryEmailAddress: {
+          email: '',
+        },
+        optoutEnewsletter: false,
+      } as ContactPrimaryPersonFragment;
+
+      primaryAddress = {
+        street: '',
+        city: '',
+        state: '',
+        postalCode: '',
+        source: '',
+        createdAt: '',
+      } as ContactPrimaryAddressFragment;
+    });
+
+    it('should be None', () => {
+      const { getByRole } = render(
+        <TestComponent
+          primaryPerson={primaryPerson}
+          primaryAddress={primaryAddress}
+        />,
+      );
+
+      expect(getByRole('combobox')).toHaveDisplayValue(['None']);
+    });
+
+    it('should be Physical', () => {
+      primaryAddress.street = '100 Test St';
+
+      const { getByRole } = render(
+        <TestComponent
+          primaryPerson={primaryPerson}
+          primaryAddress={primaryAddress}
+        />,
+      );
+
+      expect(getByRole('combobox')).toHaveDisplayValue(['Physical']);
+    });
+
+    it('should be Email', () => {
+      primaryPerson.primaryEmailAddress = { email: '[email protected]' };
+
+      const { getByRole } = render(
+        <TestComponent
+          primaryPerson={primaryPerson}
+          primaryAddress={primaryAddress}
+        />,
+      );
+
+      expect(getByRole('combobox')).toHaveDisplayValue(['Email']);
+    });
+
+    it('should be None when opting out of emails', () => {
+      primaryPerson.primaryEmailAddress = { email: '[email protected]' };
+      primaryPerson.optoutEnewsletter = true;
+
+      const { getByRole } = render(
+        <TestComponent
+          primaryPerson={primaryPerson}
+          primaryAddress={primaryAddress}
+        />,
+      );
+
+      expect(getByRole('combobox')).toHaveDisplayValue(['None']);
+    });
+
+    it('should be Both', () => {
+      primaryAddress.street = '100 Test St';
+      primaryPerson.primaryEmailAddress = { email: '[email protected]' };
+
+      const { getByRole } = render(
+        <TestComponent
+          primaryPerson={primaryPerson}
+          primaryAddress={primaryAddress}
+        />,
+      );
+
+      expect(getByRole('combobox')).toHaveDisplayValue(['Both']);
+    });
+
+    it('should be Physical when opting out of emails', () => {
+      primaryAddress.street = '100 Test St';
+      primaryPerson.primaryEmailAddress = { email: '[email protected]' };
+      primaryPerson.optoutEnewsletter = true;
+
+      const { getByRole } = render(
+        <TestComponent
+          primaryPerson={primaryPerson}
+          primaryAddress={primaryAddress}
+        />,
+      );
+
+      expect(getByRole('combobox')).toHaveDisplayValue(['Physical']);
+    });
+  });
+});

src/components/Tool/FixSendNewsletter/Contact.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import { mdiCheckboxMarkedCircle } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import {
@@ -13,6 +13,7 @@
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
+import { SendNewsletterEnum } from 'src/graphql/types.generated';
 import theme from '../../../theme';
 import { StyledInput } from '../StyledInput';
 import {
@@ -98,18 +99,36 @@
   setContactFocus,
 }: Props): ReactElement => {
   const { t } = useTranslation();
-  const [newsletter, setNewsletter] = useState('BOTH');
+  const [newsletter, setNewsletter] = useState(SendNewsletterEnum.None);
   const { classes } = useStyles();
 
+  useEffect(() => {
+    let newNewsletterValue = SendNewsletterEnum.None;
+    if (primaryAddress?.street) {
+      newNewsletterValue = SendNewsletterEnum.Physical;
+    }
+    if (primaryPerson) {
+      if (!primaryPerson.optoutEnewsletter) {
+        if (primaryPerson.primaryEmailAddress?.email?.length) {
+          if (newNewsletterValue === SendNewsletterEnum.Physical) {
+            newNewsletterValue = SendNewsletterEnum.Both;
+          } else {
+            newNewsletterValue = SendNewsletterEnum.Email;
+          }
+        }
+      }
+    }
+    setNewsletter(newNewsletterValue);
+  }, [primaryAddress]);
+
   //TODO: Add button functionality
-  //TODO: Make contact name a link to contact page
 
   const handleChange = (
     event:
       | React.ChangeEvent<HTMLSelectElement>
       | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
   ): void => {
-    setNewsletter(event.target.value);
+    setNewsletter(event.target.value as SendNewsletterEnum);
   };
 
   const handleContactNameClick = () => {
@@ -160,10 +179,14 @@
                     value={newsletter}
                     onChange={(event) => handleChange(event)}
                   >
-                    <option value="PHYSICAL">{t('Physical')}</option>
-                    <option value="EMAIL">{t('Email')}</option>
-                    <option value="BOTH">{t('Both')}</option>
-                    <option value="NONE">{t('None')}</option>
+                    <option value={SendNewsletterEnum.Physical}>
+                      {t('Physical')}
+                    </option>
+                    <option value={SendNewsletterEnum.Email}>
+                      {t('Email')}
+                    </option>
+                    <option value={SendNewsletterEnum.Both}>{t('Both')}</option>
+                    <option value={SendNewsletterEnum.None}>{t('None')}</option>
                   </NativeSelect>
                 </Box>
               </Grid>

src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx

@@ -181,6 +181,7 @@ const FixSendNewsletter: React.FC<Props> = ({
                         primaryEmailAddress: {
                           email: '',
                         },
+                        optoutEnewsletter: false,
                       }
                     }
                     key={contact.id}

src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql

@@ -37,4 +37,5 @@ fragment ContactPrimaryPerson on Person {
   primaryEmailAddress {
     email
   }
+  optoutEnewsletter
 }