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-8226 Edit Partnership Info & Contact Header #1081

Merged
merged 9 commits into from
Sep 19, 2024
Merged

MPDX-8226 Edit Partnership Info & Contact Header #1081

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
eff4ffd
Fix Icon title text
caleballdrin Sep 19, 2024
daa27a1
Contact Header improve styles
caleballdrin Sep 19, 2024
5f9936b
Contact Details Tab improve styles and organization
caleballdrin Sep 19, 2024
4a38141
Edit Contact Other Modal add new fields
caleballdrin Sep 19, 2024
9b02037
Edit Partnership Info Modal add new fields
caleballdrin Sep 19, 2024
49df4ac
Prevent contact address from showing null
caleballdrin Sep 19, 2024
b4f573d
Add timezone label
caleballdrin Sep 19, 2024
6fdeaf7
Unstar title and syntax changes
caleballdrin Sep 19, 2024
c1aa776
Localize titleAccess
caleballdrin Sep 19, 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
158 changes: 83 additions & 75 deletions src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SnackbarProvider } from 'notistack';
Expand Down Expand Up @@ -129,111 +131,117 @@ describe('ContactDetails', () => {
expect(queryByTestId('Skeleton')).toBeNull();
});

it('should open edit contact details modal', async () => {
it('should open Edit Partnership modal', async () => {
const { queryByText, getAllByLabelText } = render(
<SnackbarProvider>
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider<{
GetContactDetailsHeader: GetContactDetailsHeaderQuery;
}>
mocks={mocks}
>
<ContactsWrapper>
<ContactDetailProvider>
<ContactDetailsHeader
accountListId={accountListId}
contactId={contactId}
onClose={() => {}}
setContactDetailsLoaded={() => {}}
contactDetailsLoaded={false}
/>
</ContactDetailProvider>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider<{
GetContactDetailsHeader: GetContactDetailsHeaderQuery;
}>
mocks={mocks}
>
<ContactsWrapper>
<ContactDetailProvider>
<ContactDetailsHeader
accountListId={accountListId}
contactId={contactId}
onClose={() => {}}
setContactDetailsLoaded={() => {}}
contactDetailsLoaded={false}
/>
</ContactDetailProvider>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
</LocalizationProvider>
</SnackbarProvider>,
);
await waitFor(() =>
expect(getAllByLabelText('Edit Icon')[0]).toBeInTheDocument(),
expect(getAllByLabelText('Edit Partnership Info')[0]).toBeInTheDocument(),
);
userEvent.click(getAllByLabelText('Edit Icon')[0]);
userEvent.click(getAllByLabelText('Edit Partnership Info')[0]);
await waitFor(() =>
expect(queryByText('Edit Contact Details')).toBeInTheDocument(),
expect(queryByText('Edit Partnership')).toBeInTheDocument(),
);
});

it('should close edit contact address modal', async () => {
it('should close Edit Partnership modal', async () => {
const { queryByText, getAllByLabelText, getByLabelText } = render(
<SnackbarProvider>
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider<{
GetContactDetailsHeader: GetContactDetailsHeaderQuery;
}>
mocks={mocks}
>
<ContactsWrapper>
<ContactDetailProvider>
<ContactDetailsHeader
accountListId={accountListId}
contactId={contactId}
onClose={() => {}}
setContactDetailsLoaded={() => {}}
contactDetailsLoaded={false}
/>
</ContactDetailProvider>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider<{
GetContactDetailsHeader: GetContactDetailsHeaderQuery;
}>
mocks={mocks}
>
<ContactsWrapper>
<ContactDetailProvider>
<ContactDetailsHeader
accountListId={accountListId}
contactId={contactId}
onClose={() => {}}
setContactDetailsLoaded={() => {}}
contactDetailsLoaded={false}
/>
</ContactDetailProvider>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
</LocalizationProvider>
</SnackbarProvider>,
);
await waitFor(() =>
expect(getAllByLabelText('Edit Icon')[0]).toBeInTheDocument(),
expect(getAllByLabelText('Edit Partnership Info')[0]).toBeInTheDocument(),
);
userEvent.click(getAllByLabelText('Edit Icon')[0]);
userEvent.click(getAllByLabelText('Edit Partnership Info')[0]);
await waitFor(() =>
expect(queryByText('Edit Contact Details')).toBeInTheDocument(),
expect(queryByText('Edit Partnership')).toBeInTheDocument(),
);
userEvent.click(getByLabelText('Close'));
await waitFor(() =>
expect(queryByText('Edit Contact Details')).not.toBeInTheDocument(),
expect(queryByText('Edit Partnership')).not.toBeInTheDocument(),
);
});
it('should render avatar', async () => {
const { queryByText, getAllByLabelText } = render(
<SnackbarProvider>
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider<{
GetContactDetailsHeader: GetContactDetailsHeaderQuery;
}>
mocks={mocks}
>
<ContactsWrapper>
<ContactDetailProvider>
<ContactDetailsHeader
accountListId={accountListId}
contactId={contactId}
onClose={() => {}}
setContactDetailsLoaded={() => {}}
contactDetailsLoaded={false}
/>
</ContactDetailProvider>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider<{
GetContactDetailsHeader: GetContactDetailsHeaderQuery;
}>
mocks={mocks}
>
<ContactsWrapper>
<ContactDetailProvider>
<ContactDetailsHeader
accountListId={accountListId}
contactId={contactId}
onClose={() => {}}
setContactDetailsLoaded={() => {}}
contactDetailsLoaded={false}
/>
</ContactDetailProvider>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
</LocalizationProvider>
</SnackbarProvider>,
);
await waitFor(() =>
expect(getAllByLabelText('Edit Icon')[0]).toBeInTheDocument(),
expect(getAllByLabelText('Edit Partnership Info')[0]).toBeInTheDocument(),
);
userEvent.click(getAllByLabelText('Edit Icon')[0]);
userEvent.click(getAllByLabelText('Edit Partnership Info')[0]);
await waitFor(() =>
expect(queryByText('Edit Contact Details')).toBeInTheDocument(),
expect(queryByText('Edit Partnership Info')).toBeInTheDocument(),
);

const avatarImage = document.querySelector('img') as HTMLImageElement;
Expand Down
54 changes: 21 additions & 33 deletions src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import Close from '@mui/icons-material/Close';
import { Avatar, Box, IconButton, Skeleton, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
Expand All @@ -7,18 +7,13 @@ import { StatusEnum } from 'src/graphql/types.generated';
import { ContactContextTypesEnum } from 'src/lib/contactContextTypes';
import theme from '../../../../theme';
import { StarContactIconButton } from '../../StarContactIconButton/StarContactIconButton';
import {
ContactDetailContext,
ContactDetailsType,
} from '../ContactDetailContext';
import { EditContactDetailsModal } from '../ContactDetailsTab/People/Items/EditContactDetailsModal/EditContactDetailsModal';
import { EditIcon } from '../ContactDetailsTab/StyledComponents';
import { EditPartnershipInfoModal } from '../ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal';
import { useGetContactDetailsHeaderQuery } from './ContactDetailsHeader.generated';
import { ContactDetailsMoreAcitions } from './ContactDetailsMoreActions/ContactDetailsMoreActions';
import { ContactHeaderAddressSection } from './ContactHeaderSection/ContactHeaderAddressSection';
import { ContactHeaderEmailSection } from './ContactHeaderSection/ContactHeaderEmailSection';
import { ContactHeaderNewsletterSection } from './ContactHeaderSection/ContactHeaderNewsletterSection';
import { ContactHeaderPartnerSection } from './ContactHeaderSection/ContactHeaderPartnerSection';
import { ContactHeaderPhoneSection } from './ContactHeaderSection/ContactHeaderPhoneSection';
import { ContactHeaderStatusSection } from './ContactHeaderSection/ContactHeaderStatusSection';

Expand Down Expand Up @@ -46,18 +41,18 @@ const HeaderBarButtonsWrap = styled(Box)(({}) => ({
}));
const ContactAvatar = styled(Avatar)(({}) => ({
backgroundColor: theme.palette.secondary.dark,
height: 64,
width: 64,
borderRadius: 32,
height: 50,
width: 50,
borderRadius: 25,
}));
const PrimaryContactName = styled(Typography)(({}) => ({
display: 'inline',
marginLeft: 18,
fontWeight: 'bold',
}));
const CloseButtonIcon = styled(Close)(({}) => ({
width: 14,
height: 14,
width: 24,
height: 24,
color: theme.palette.text.primary,
}));
const HeaderSectionWrap = styled(Box)(({}) => ({
Expand All @@ -78,9 +73,8 @@ export const ContactDetailsHeader: React.FC<Props> = ({
const loading = !data;
const { t } = useTranslation();

const { editModalOpen, setEditModalOpen } = React.useContext(
ContactDetailContext,
) as ContactDetailsType;
const [editPartnershipModalOpen, setEditPartnershipModalOpen] =
useState(false);

useEffect(() => {
if (!loading && !contactDetailsLoaded) {
Expand All @@ -90,11 +84,11 @@ export const ContactDetailsHeader: React.FC<Props> = ({
}, [loading]);

return (
<Box style={{ padding: 24, backgroundColor: 'transparent' }}>
<Box sx={{ paddingY: 2, paddingX: 2, backgroundColor: 'transparent' }}>
caleballdrin marked this conversation as resolved.
Show resolved Hide resolved
<HeaderBar>
<ContactAvatar alt={data?.contact.name} src={data?.contact.avatar} />
<HeaderBarContactWrap>
{!data ? (
{!data?.contact ? (
<Box data-testid="Skeleton">
<Skeleton
variant="text"
Expand All @@ -106,19 +100,19 @@ export const ContactDetailsHeader: React.FC<Props> = ({
}}
/>
</Box>
) : data.contact ? (
) : (
<>
<PrimaryContactName data-testid="ContactName" variant="h5">
{data.contact.name}
{data?.contact.name}
</PrimaryContactName>
<IconButton
caleballdrin marked this conversation as resolved.
Show resolved Hide resolved
onClick={() => setEditModalOpen(true)}
aria-label={t('Edit Icon')}
onClick={() => setEditPartnershipModalOpen(true)}
aria-label={t('Edit Partnership Info')}
>
<EditIcon />
<EditIcon titleAccess="Edit Partnership Info" />
</IconButton>
</>
) : null}
)}
</HeaderBarContactWrap>
<HeaderBarButtonsWrap>
<StarContactIconButton
Expand Down Expand Up @@ -156,10 +150,6 @@ export const ContactDetailsHeader: React.FC<Props> = ({
/>
</Box>
<Box flex={1}>
<ContactHeaderPartnerSection
loading={loading}
contact={data?.contact}
/>
<ContactHeaderStatusSection
loading={loading}
contact={data?.contact}
Expand All @@ -170,12 +160,10 @@ export const ContactDetailsHeader: React.FC<Props> = ({
/>
</Box>
</HeaderSectionWrap>
{data && (
<EditContactDetailsModal
accountListId={accountListId}
contact={data.contact}
isOpen={editModalOpen}
handleClose={() => setEditModalOpen(false)}
{data?.contact && editPartnershipModalOpen && (
<EditPartnershipInfoModal
contact={data?.contact}
handleClose={() => setEditPartnershipModalOpen(false)}
/>
)}
</Box>
Expand Down
4 changes: 2 additions & 2 deletions ...ntactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ type AddMenuItem = {
};

const MoreButtonIcon = styled(MoreVert)(({ theme }) => ({
width: 16,
height: 16,
width: 24,
height: 24,
color: theme.palette.text.primary,
}));

Expand Down
19 changes: 15 additions & 4 deletions .../ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const TextSkeleton = styled(Skeleton)(({}) => ({
fontSize: 16,
}));

const StyledAddressTypography = styled(Typography)(() => ({
lineHeight: '1.50',
}));

export const ContactHeaderAddressSection = ({
loading,
contact,
Expand All @@ -51,17 +55,24 @@ export const ContactHeaderAddressSection = ({

return (
<ContactHeaderSection icon={<LocationIcon />}>
<Typography variant="subtitle1">{envelope}</Typography>
<Typography variant="subtitle1">{street}</Typography>
<StyledAddressTypography variant="subtitle1">
{envelope}
</StyledAddressTypography>
<StyledAddressTypography variant="subtitle1">
{street}
</StyledAddressTypography>
<Box>
<Typography
<StyledAddressTypography
style={{ display: 'inline-block' }}
variant="subtitle1"
>{`${city}, ${state ?? ''} ${postalCode}`}</Typography>{' '}
>{`${city}${city && ','} ${
caleballdrin marked this conversation as resolved.
Show resolved Hide resolved
state ?? ''
} ${postalCode}`}</StyledAddressTypography>{' '}
<Link
href={mapURL.replaceAll(' ', '+')}
target="_blank"
rel="noopener"
underline="hover"
style={{ display: 'inline-block' }}
variant="subtitle1"
>
Expand Down
4 changes: 3 additions & 1 deletion ...ts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export const ContactHeaderEmailSection = ({
return (
<ContactHeaderSection icon={<EmailIcon />}>
<Typography variant="subtitle1" style={{ width: 'fit-content' }}>
<Link href={`mailto:${email}`}>{email}</Link>
<Link underline="hover" href={`mailto:${email}`}>
{email}
</Link>
</Typography>
</ContactHeaderSection>
);
Expand Down
Loading