From 2f25ba4f48e348d58ea5159efd04fad62029ac60 Mon Sep 17 00:00:00 2001 From: Bill Randall Date: Wed, 10 Jul 2024 15:04:10 -0400 Subject: [PATCH 1/3] This has already been done --- src/components/Tool/FixSendNewsletter/Contact.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx index 9003836ee..4c70eb6dd 100644 --- a/src/components/Tool/FixSendNewsletter/Contact.tsx +++ b/src/components/Tool/FixSendNewsletter/Contact.tsx @@ -102,7 +102,6 @@ const Contact = ({ const { classes } = useStyles(); //TODO: Add button functionality - //TODO: Make contact name a link to contact page const handleChange = ( event: From c8e0a00e1c417c6923c283a7336297c7146f77fa Mon Sep 17 00:00:00 2001 From: Bill Randall Date: Wed, 10 Jul 2024 16:48:25 -0400 Subject: [PATCH 2/3] Use enum instead of hard coded strings --- .../Tool/FixSendNewsletter/Contact.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Tool/FixSendNewsletter/Contact.tsx b/src/components/Tool/FixSendNewsletter/Contact.tsx index 4c70eb6dd..c52209f4a 100644 --- a/src/components/Tool/FixSendNewsletter/Contact.tsx +++ b/src/components/Tool/FixSendNewsletter/Contact.tsx @@ -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,7 +99,7 @@ const Contact = ({ setContactFocus, }: Props): ReactElement => { const { t } = useTranslation(); - const [newsletter, setNewsletter] = useState('BOTH'); + const [newsletter, setNewsletter] = useState(SendNewsletterEnum.Both); const { classes } = useStyles(); //TODO: Add button functionality @@ -108,7 +109,7 @@ const Contact = ({ | React.ChangeEvent | React.ChangeEvent, ): void => { - setNewsletter(event.target.value); + setNewsletter(event.target.value as SendNewsletterEnum); }; const handleContactNameClick = () => { @@ -159,10 +160,14 @@ const Contact = ({ value={newsletter} onChange={(event) => handleChange(event)} > - - - - + + + + From 54f1cea62f1e57de3c298a2d125b21e360c7a9d7 Mon Sep 17 00:00:00 2001 From: Bill Randall Date: Wed, 10 Jul 2024 16:50:24 -0400 Subject: [PATCH 3/3] Set the initial dropdown value according to the same logic as in the Angular app --- .../Tool/FixSendNewsletter/Contact.test.tsx | 135 ++++++++++++++++++ .../Tool/FixSendNewsletter/Contact.tsx | 23 ++- .../FixSendNewsletter/FixSendNewsletter.tsx | 1 + .../GetInvalidNewsletter.graphql | 1 + 4 files changed, 158 insertions(+), 2 deletions(-) create mode 100644 src/components/Tool/FixSendNewsletter/Contact.test.tsx 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 c52209f4a..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 { @@ -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 = ( 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 }