diff --git a/src/components/Tool/FixSendNewsletter/Contact.test.tsx b/src/components/Tool/FixSendNewsletter/Contact.test.tsx new file mode 100644 index 000000000..17ac3c4f2 --- /dev/null +++ b/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; +}) => ( + + + +); + +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( + , + ); + + expect(getByRole('combobox')).toHaveDisplayValue(['None']); + }); + + it('should be Physical', () => { + primaryAddress.street = '100 Test St'; + + const { getByRole } = render( + , + ); + + expect(getByRole('combobox')).toHaveDisplayValue(['Physical']); + }); + + it('should be Email', () => { + primaryPerson.primaryEmailAddress = { email: 'a@b.com' }; + + const { getByRole } = render( + , + ); + + expect(getByRole('combobox')).toHaveDisplayValue(['Email']); + }); + + it('should be None when opting out of emails', () => { + primaryPerson.primaryEmailAddress = { email: 'a@b.com' }; + primaryPerson.optoutEnewsletter = true; + + const { getByRole } = render( + , + ); + + expect(getByRole('combobox')).toHaveDisplayValue(['None']); + }); + + it('should be Both', () => { + primaryAddress.street = '100 Test St'; + primaryPerson.primaryEmailAddress = { email: 'a@b.com' }; + + const { getByRole } = render( + , + ); + + expect(getByRole('combobox')).toHaveDisplayValue(['Both']); + }); + + it('should be Physical when opting out of emails', () => { + primaryAddress.street = '100 Test St'; + primaryPerson.primaryEmailAddress = { email: 'a@b.com' }; + primaryPerson.optoutEnewsletter = true; + + const { getByRole } = render( + , + ); + + expect(getByRole('combobox')).toHaveDisplayValue(['Physical']); + }); + }); +}); diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx index 9003836ee..0a935f501 100644 --- a/src/components/Tool/FixSendNewsletter/Contact.tsx +++ b/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 { 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 @@ const Contact = ({ 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 | React.ChangeEvent, ): void => { - setNewsletter(event.target.value); + setNewsletter(event.target.value as SendNewsletterEnum); }; const handleContactNameClick = () => { @@ -160,10 +179,14 @@ const Contact = ({ value={newsletter} onChange={(event) => handleChange(event)} > - - - - + + + + diff --git a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx index 4eb61810b..afa385a22 100644 --- a/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx +++ b/src/components/Tool/FixSendNewsletter/FixSendNewsletter.tsx @@ -181,6 +181,7 @@ const FixSendNewsletter: React.FC = ({ primaryEmailAddress: { email: '', }, + optoutEnewsletter: false, } } key={contact.id} diff --git a/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql b/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql index 53cfdecb9..5314e1197 100644 --- a/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql +++ b/src/components/Tool/FixSendNewsletter/GetInvalidNewsletter.graphql @@ -37,4 +37,5 @@ fragment ContactPrimaryPerson on Person { primaryEmailAddress { email } + optoutEnewsletter }