Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-7418 - Fix Email Addresses - Confirm Button #981

Merged
merged 15 commits into from
Aug 7, 2024
+338 −52
Merged

MPDX-7418 - Fix Email Addresses - Confirm Button #981

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c0148a5
added graphQL mutation
Jul 8, 2024
73a395c
fixed add email functionality
Jun 17, 2024
17b3df4
Fix inline email address editing
wrandall22 Jul 19, 2024
cfdbd7c
Fix part of the caching issue. The way the component is using state o…
Jul 9, 2024
3d89e00
fixed modal close button styling
Jul 11, 2024
a8b6328
added delete functionality and fixed modal issues
wrandall22 Jul 19, 2024
f93cc21
Do a bit of cleanup of the code
wrandall22 Jul 19, 2024
7e3678c
Fix up the tests now that delete is working
wrandall22 Jul 19, 2024
122cd9b
Implement single confirm button
wrandall22 Jul 24, 2024
ad84715
Allow for selection of primary when all email addresses are primary
wrandall22 Jul 24, 2024
27c2f63
Disable confirm button if there is not exactly 1 primary email for th…
wrandall22 Jul 26, 2024
3fccd9f
Merge branch 'main' into MPDX-7418-fix-email-addresses-confirm
dr-bizz Aug 7, 2024
86eaa39
Fixing small issues with the code. Nothing crazy
dr-bizz Aug 7, 2024
e736c47
removing screen logs on tests
dr-bizz Aug 7, 2024
601b4e7
fixing minor issues
dr-bizz Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 80 additions & 7 deletions src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const person: PersonInvalidEmailFragment = {

const setContactFocus = jest.fn();
const mutationSpy = jest.fn();
const handleSingleConfirm = jest.fn();
const mockEnqueue = jest.fn();

jest.mock('notistack', () => ({
Expand All @@ -62,14 +63,23 @@ jest.mock('notistack', () => ({
},
}));

const TestComponent = ({ mocks }: { mocks: ApolloErgonoMockMap }) => {
const defaultDataState = {
contactTestId: {
emailAddresses: person.emailAddresses.nodes as EmailAddressData[],
},
} as { [key: string]: PersonEmailAddresses };

type TestComponentProps = {
mocks?: ApolloErgonoMockMap;
dataState?: { [key: string]: PersonEmailAddresses };
};

const TestComponent = ({
mocks,
dataState = defaultDataState,
}: TestComponentProps) => {
const handleChangeMock = jest.fn();
const handleChangePrimaryMock = jest.fn();
const dataState = {
contactTestId: {
emailAddresses: person.emailAddresses.nodes as EmailAddressData[],
},
} as { [key: string]: PersonEmailAddresses };

return (
<SnackbarProvider>
Expand All @@ -85,9 +95,10 @@ const TestComponent = ({ mocks }: { mocks: ApolloErgonoMockMap }) => {
<FixEmailAddressPerson
person={person}
dataState={dataState}
handleChange={handleChangeMock}
accountListId={accountListId}
handleChange={handleChangeMock}
handleChangePrimary={handleChangePrimaryMock}
handleSingleConfirm={handleSingleConfirm}
setContactFocus={setContactFocus}
/>
</GqlMockedProvider>
Expand Down Expand Up @@ -273,4 +284,66 @@ describe('FixEmailAddressPerson', () => {
);
});
});

describe('confirm button', () => {
it('should disable confirm button if there is more than one primary email', async () => {
const dataState = {
contactTestId: {
emailAddresses: [
{
...person.emailAddresses.nodes[0],
primary: true,
},
{
...person.emailAddresses.nodes[1],
primary: true,
},
] as EmailAddressData[],
},
};

const { getByRole, queryByRole } = render(
<TestComponent dataState={dataState} />,
);

await waitFor(() => {
expect(queryByRole('loading')).not.toBeInTheDocument();
expect(getByRole('button', { name: 'Confirm' })).toBeDisabled();
});
});

it('should disable confirm button if there are no primary emails', async () => {
const dataState = {
contactTestId: {
emailAddresses: [
{
...person.emailAddresses.nodes[0],
primary: false,
},
{
...person.emailAddresses.nodes[1],
primary: false,
},
] as EmailAddressData[],
},
};
const { getByRole, queryByRole } = render(
<TestComponent dataState={dataState} />,
);

await waitFor(() => {
expect(queryByRole('loading')).not.toBeInTheDocument();
expect(getByRole('button', { name: 'Confirm' })).toBeDisabled();
});
});

it('should not disable confirm button if there is exactly one primary email', async () => {
const { getByRole, queryByRole } = render(<TestComponent />);

await waitFor(() => {
expect(queryByRole('loading')).not.toBeInTheDocument();
expect(getByRole('button', { name: 'Confirm' })).not.toBeDisabled();
});
});
});
});
25 changes: 22 additions & 3 deletions src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { dateFormatShort } from 'src/lib/intlFormat';
import theme from 'src/theme';
import { ConfirmButtonIcon } from '../../ConfirmButtonIcon';
import EmailValidationForm from '../EmailValidationForm';
import { PersonEmailAddresses } from '../FixEmailAddresses';
import { EmailAddressData, PersonEmailAddresses } from '../FixEmailAddresses';
import { PersonInvalidEmailFragment } from '../FixEmailAddresses.generated';

const PersonCard = styled(Box)(({ theme }) => ({
Expand Down Expand Up @@ -105,6 +105,10 @@ export interface FixEmailAddressPersonProps {
event: React.ChangeEvent<HTMLInputElement>,
) => void;
handleChangePrimary: (personId: string, emailIndex: number) => void;
handleSingleConfirm: (
person: PersonInvalidEmailFragment,
emails: EmailAddressData[],
) => void;
setContactFocus: SetContactFocus;
}

Expand All @@ -131,6 +135,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
accountListId,
handleChange,
handleChangePrimary,
handleSingleConfirm,
setContactFocus,
}) => {
const { t } = useTranslation();
Expand Down Expand Up @@ -214,6 +219,10 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
setEmailToDelete(null);
};

const hasOnePrimaryEmail = (): boolean => {
return emails.filter((email) => email.isPrimary)?.length === 1;
};

return (
<>
<Container container>
Expand Down Expand Up @@ -287,7 +296,10 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
</Typography>
</Box>
{email.isPrimary ? (
<Box data-testid={`starIcon-${id}-${index}`}>
<Box
data-testid={`starIcon-${id}-${index}`}
onClick={() => handleChangePrimary(id, index)}
>
Comment on lines +299 to +302
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently you're not making a GraphQL call for just updating the primary? Will that come in a later PR?

If not, We should note that we should come back and do that. Curreently there isn't a graphQL endpoint for this, s it will need to be made or made via proxy.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gets handled in the confirm itself, primary is part of the payload that gets mutated. If I'm reading the Angular code correctly, it does this as well. The changes in the UI to primary are in memory until clicking the Confirm button.

<HoverableIcon path={mdiStar} size={1} />
</Box>
) : (
Expand Down Expand Up @@ -373,7 +385,14 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
style={{ paddingLeft: theme.spacing(1) }}
>
<ConfirmButtonWrapper>
<Button variant="contained" style={{ width: '100%' }}>
<Button
variant="contained"
style={{ width: '100%' }}
onClick={() =>
handleSingleConfirm(person, emails as EmailAddressData[])
}
disabled={!hasOnePrimaryEmail()}
>
<ConfirmButtonIcon />
{t('Confirm')}
</Button>
Expand Down
Loading
Loading