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

Jump to bottom

MPDX-8224 - Remove the partner display name from certain areas to avoid confusion. #1079

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

MPDX-8224 - Remove the partner display name from certain areas to avoid confusion. #1079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
85a3657
Removing displayName from contact details and then ensure we don't ca…
dr-bizz Sep 18, 2024
729b6fe
Add the displayName back in but altering how it updates the cache
dr-bizz Sep 18, 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
4 changes: 2 additions & 2 deletions .../ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPartnerSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ export const ContactHeaderPartnerSection: React.FC<Props> = ({
return (
<ContactHeaderSection>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
{t('Partner Account')}
{t('Partner No.')}
</Typography>
{contact?.contactDonorAccounts.nodes.map((donorAccount) => (
<Typography key={donorAccount.id} variant="subtitle1">
{donorAccount.donorAccount.displayName}
{donorAccount.donorAccount.accountNumber}
</Typography>
))}
</ContactHeaderSection>
Expand Down
1 change: 0 additions & 1 deletion src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ query ContactDetailsTab($accountListId: ID!, $contactId: ID!) {
...ContactPeople
...ContactOther
...ContactMailing
...ContactPartnerAccounts
}
}

Expand Down
25 changes: 11 additions & 14 deletions src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@ const ContactDetailHeadingText = styled(Typography)(() => ({
fontWeight: 'bold',
}));

const ContactDetailLoadingPlaceHolder = styled(Skeleton)(({ theme }) => ({
width: '100%',
height: '24px',
margin: theme.spacing(2, 0),
}));
export const ContactDetailLoadingPlaceHolder = styled(Skeleton)(
({ theme }) => ({
width: '100%',
height: '24px',
margin: theme.spacing(2, 0),
}),
);

interface ContactDetailTabProps {
accountListId: string;
Expand Down Expand Up @@ -149,15 +151,10 @@ export const ContactDetailsTab: React.FC<ContactDetailTabProps> = ({
{t('Partner Accounts')}
</ContactDetailHeadingText>
</ContactDetailHeadingContainer>
{!data ? (
<>
<ContactDetailLoadingPlaceHolder variant="rectangular" />
<ContactDetailLoadingPlaceHolder variant="rectangular" />
<ContactDetailLoadingPlaceHolder variant="rectangular" />
</>
) : (
<ContactDetailsPartnerAccounts contact={data.contact} />
)}
<ContactDetailsPartnerAccounts
contactId={contactId}
accountListId={accountListId}
/>
</ContactDetailSectionContainer>
<Divider />
</ContactDetailsTabContainer>
Expand Down
163 changes: 77 additions & 86 deletions ...s/ContactDetails/ContactDetailsTab/PartnerAccounts/ContactDetailsPartnerAccounts.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
import theme from '../../../../../theme';
import { ContactDetailProvider } from '../../ContactDetailContext';
import { ContactDetailsPartnerAccounts } from './ContactDetailsPartnerAccounts';
import {
ContactDonorAccountsQuery,
GetAccountListSalaryOrganizationQuery,
} from './ContactPartnerAccounts.generated';

const accountListId = 'account-list-1';
const contactId = 'contact-1';
Expand All @@ -18,6 +22,7 @@ const router = {
};

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

const getOperationByName = (mutationSpy: jest.Mock, operationName: string) => {
const operations = mutationSpy.mock.calls
Expand All @@ -38,72 +43,80 @@ jest.mock('notistack', () => ({
},
}));

const contact = {
id: '123',
contactDonorAccounts: {
nodes: [
{
id: 'donor1',
donorAccount: {
id: 'account1',
displayName: 'donor-1',
accountNumber: 'donor-1',
organization: {
id: 'org1',
name: 'org1',
const ContactDonorAccountsMock: ContactDonorAccountsQuery = {
contact: {
id: contactId,
contactDonorAccounts: {
nodes: [
{
id: 'donor1',
donorAccount: {
id: 'account1',
displayName: 'donor-1',
accountNumber: 'accountNumber-1',
organization: {
id: 'org1',
name: 'org1',
},
},
},
},
{
id: 'donor2',
donorAccount: {
id: 'account2',
displayName: 'donor-2',
accountNumber: 'donor-2',
organization: {
id: 'org2',
name: 'org2',
{
id: 'donor2',
donorAccount: {
id: 'account2',
displayName: 'donor-2',
accountNumber: 'accountNumber-2',
organization: {
id: 'org2',
name: 'org2',
},
},
},
},
],
],
},
},
};

const Components = () => (
<SnackbarProvider>
<TestRouter router={router}>
<GqlMockedProvider<{
ContactDonorAccounts: ContactDonorAccountsQuery;
GetAccountListSalaryOrganization: GetAccountListSalaryOrganizationQuery;
}>
mocks={{
ContactDonorAccounts: ContactDonorAccountsMock,
GetAccountListSalaryOrganization: {
accountList: { salaryOrganizationId: 'organizationId' },
},
}}
onCall={mutationSpy}
>
<ThemeProvider theme={theme}>
<ContactDetailProvider>
<ContactDetailsPartnerAccounts
contactId={contactId}
accountListId={accountListId}
/>
</ContactDetailProvider>
</ThemeProvider>
</GqlMockedProvider>
</TestRouter>
</SnackbarProvider>
);

describe('ContactDetailsPartnerAccounts', () => {
it('should render donor account', async () => {
const { getByText } = render(
<SnackbarProvider>
<TestRouter router={router}>
<GqlMockedProvider>
<ThemeProvider theme={theme}>
<ContactDetailProvider>
<ContactDetailsPartnerAccounts contact={contact} />
</ContactDetailProvider>
</ThemeProvider>
</GqlMockedProvider>
</TestRouter>
</SnackbarProvider>,
);
const { findByText, getByText } = render(<Components />);

expect(getByText('donor-1')).toBeInTheDocument();
expect(getByText('donor-2')).toBeInTheDocument();
expect(await findByText('accountNumber-1')).toBeInTheDocument();
expect(getByText('accountNumber-2')).toBeInTheDocument();
});

it('should render new donor account form', async () => {
const { getByRole, queryByRole } = render(
<SnackbarProvider>
<TestRouter router={router}>
<GqlMockedProvider>
<ThemeProvider theme={theme}>
<ContactDetailProvider>
<ContactDetailsPartnerAccounts contact={contact} />
</ContactDetailProvider>
</ThemeProvider>
</GqlMockedProvider>
</TestRouter>
</SnackbarProvider>,
);
const { getByRole, findByText, queryByRole } = render(<Components />);

expect(await findByText('accountNumber-1')).toBeInTheDocument();

expect(
queryByRole('textbox', { name: 'Account Number' }),
Expand All @@ -115,20 +128,9 @@ describe('ContactDetailsPartnerAccounts', () => {
});

it('handle submitting new donor account', async () => {
const mutationSpy = jest.fn();
const { queryByRole, getByRole } = render(
<SnackbarProvider>
<TestRouter router={router}>
<GqlMockedProvider onCall={mutationSpy}>
<ThemeProvider theme={theme}>
<ContactDetailProvider>
<ContactDetailsPartnerAccounts contact={contact} />
</ContactDetailProvider>
</ThemeProvider>
</GqlMockedProvider>
</TestRouter>
</SnackbarProvider>,
);
const { queryByRole, findByText, getByRole } = render(<Components />);

expect(await findByText('accountNumber-1')).toBeInTheDocument();

expect(
queryByRole('textbox', { name: 'Account Number' }),
Expand Down Expand Up @@ -158,11 +160,11 @@ describe('ContactDetailsPartnerAccounts', () => {
).toEqual({
accountListId,
attributes: {
id: contact.id,
id: contactId,
donorAccount: {
accountNumber: 'new-account',
name: 'new-account',
organizationId: '',
organizationId: 'organizationId',
},
},
});
Expand All @@ -172,24 +174,13 @@ describe('ContactDetailsPartnerAccounts', () => {
});

it('handle clicking delete button', async () => {
const mutationSpy = jest.fn();
const { getByText, queryAllByRole } = render(
<SnackbarProvider>
<TestRouter router={router}>
<GqlMockedProvider onCall={mutationSpy}>
<ThemeProvider theme={theme}>
<ContactDetailProvider>
<ContactDetailsPartnerAccounts contact={contact} />
</ContactDetailProvider>
</ThemeProvider>
</GqlMockedProvider>
</TestRouter>
</SnackbarProvider>,
);
const { getByText, findByText, queryAllByRole } = render(<Components />);

expect(await findByText('accountNumber-1')).toBeInTheDocument();

userEvent.click(queryAllByRole('button', { name: '' })[0]);
expect(getByText('donor-1')).toBeInTheDocument();
expect(getByText('donor-2')).toBeInTheDocument();
expect(getByText('accountNumber-1')).toBeInTheDocument();
expect(getByText('accountNumber-2')).toBeInTheDocument();
await waitFor(() =>
expect(mockEnqueue).toHaveBeenCalledWith('Partner account deleted!', {
variant: 'success',
Expand All @@ -199,7 +190,7 @@ describe('ContactDetailsPartnerAccounts', () => {
expect(
getOperationByName(mutationSpy, 'DeleteDonorAccount').variables,
).toEqual({
contactId: contact.id,
contactId: contactId,
donorAccountId: 'account1',
});
});
Expand Down
Loading
Loading