Set the initial dropdown value according to the same logic as in the …

…Angular app

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 {
@@ -99,9 +99,28 @@ const Contact = ({
   setContactFocus,
 }: Props): ReactElement => {
   const { t } = useTranslation();
-  const [newsletter, setNewsletter] = useState(SendNewsletterEnum.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
 
   const handleChange = (

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
 }