From eff4ffd588012d13a0ccf0e541039ca5a9a719ad Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 19 Sep 2024 08:37:36 -0700 Subject: [PATCH 1/9] Fix Icon title text --- .../CelebrationIcons/CelebrationIcons.tsx | 4 +-- .../Celebrationicons.test.tsx | 4 +-- .../ContactHeaderSection/HandshakeIcon.tsx | 2 +- .../ContactTaskRow/ContactTaskRow.test.tsx | 6 ++-- .../TaskCommentsButton/TaskCommentsButton.tsx | 2 +- .../TaskCompleteButton.test.tsx | 4 +-- .../TaskCompleteButton/TaskCompleteButton.tsx | 2 +- .../StarTaskIconButton.test.tsx | 24 ++++--------- .../ContactFlowRow/ContactFlowRow.test.tsx | 2 +- .../StarContactIconButton.test.tsx | 34 +++++-------------- .../Layout/Header/Actions/Actions.tsx | 8 ++--- src/components/Task/Status/Status.tsx | 2 +- src/components/Task/TaskRow/TaskRow.test.tsx | 4 +-- .../ContactFlowRow/ContactFlowRow.test.tsx | 4 +-- .../common/DeleteItemIcon/DeleteItemIcon.tsx | 2 +- .../StarredItemIcon/StarredItemIcon.test.tsx | 24 ++++--------- .../StarredItemIcon/StarredItemIcon.tsx | 4 +-- 17 files changed, 46 insertions(+), 86 deletions(-) diff --git a/src/components/Contacts/CelebrationIcons/CelebrationIcons.tsx b/src/components/Contacts/CelebrationIcons/CelebrationIcons.tsx index c76927488..0610268b5 100644 --- a/src/components/Contacts/CelebrationIcons/CelebrationIcons.tsx +++ b/src/components/Contacts/CelebrationIcons/CelebrationIcons.tsx @@ -51,12 +51,12 @@ export const CelebrationIcons: React.FC = ({ contact }) => { <> {contactHasAnniversary() ? ( - + ) : null} {contactHasBirthday() ? ( - + ) : null} diff --git a/src/components/Contacts/CelebrationIcons/Celebrationicons.test.tsx b/src/components/Contacts/CelebrationIcons/Celebrationicons.test.tsx index 6e9e8c482..0b6313af9 100644 --- a/src/components/Contacts/CelebrationIcons/Celebrationicons.test.tsx +++ b/src/components/Contacts/CelebrationIcons/Celebrationicons.test.tsx @@ -28,6 +28,6 @@ it('should display ring', () => { }); const { getByRole } = render(); - expect(getByRole('img', { hidden: true, name: 'Cake' })).toBeVisible(); - expect(getByRole('img', { hidden: true, name: 'Ring' })).toBeVisible(); + expect(getByRole('img', { hidden: true, name: 'Birthday' })).toBeVisible(); + expect(getByRole('img', { hidden: true, name: 'Anniversary' })).toBeVisible(); }); diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx index 4fbcfcec4..c062b1d5e 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx @@ -11,7 +11,7 @@ const SwapIconSvg = styled(SvgIcon)(({}) => ({ })); export const HandshakeIcon = (): ReactElement => ( - + ); diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx index e5288d00b..c676abc24 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx @@ -138,7 +138,7 @@ describe('ContactTaskRow', () => { ); expect(await findByText(task.subject)).toBeVisible(); - userEvent.click(getByRole('img', { hidden: true, name: 'Check Icon' })); + userEvent.click(getByRole('img', { hidden: true, name: 'Check' })); expect(openTaskModal).toHaveBeenCalledWith({ view: TaskModalEnum.Complete, taskId: task.id, @@ -197,7 +197,7 @@ describe('ContactTaskRow', () => { ); expect(await findByText(task.subject)).toBeVisible(); - userEvent.click(getByRole('img', { hidden: true, name: 'Comment Icon' })); + userEvent.click(getByRole('img', { hidden: true, name: 'Comment' })); expect(openTaskModal).toHaveBeenCalledWith({ taskId: task.id, view: TaskModalEnum.Comments, @@ -226,7 +226,7 @@ describe('ContactTaskRow', () => { ); expect(await findByText(task.subject)).toBeVisible(); - userEvent.click(getByRole('img', { name: 'Outlined Delete Icon' })); + userEvent.click(getByRole('img', { name: 'Delete' })); expect( await findByText('Are you sure you wish to delete the selected task?'), ).toBeVisible(); diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton.tsx index b6efcc7a1..cd84c2444 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton.tsx @@ -54,7 +54,7 @@ export const TaskCommentsButton: React.FC = ({ detailsPage={detailsPage || false} {...props} > - + {numberOfComments} diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.test.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.test.tsx index c66be3f1e..87c5fbf69 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.test.tsx @@ -16,7 +16,7 @@ describe('TaskCompleteButton', () => { ); const completeButton = getByRole('button'); - const checkIcon = getByRole('img', { hidden: true, name: 'Check Icon' }); + const checkIcon = getByRole('img', { hidden: true, name: 'Check' }); expect(completeButton).toBeInTheDocument(); expect(checkIcon).toBeInTheDocument(); @@ -42,7 +42,7 @@ describe('TaskCompleteButton', () => { ); const completeButton = getByRole('button'); - const checkIcon = getByRole('img', { hidden: true, name: 'Check Icon' }); + const checkIcon = getByRole('img', { hidden: true, name: 'Check' }); expect(completeButton).toBeInTheDocument(); expect(checkIcon).toBeInTheDocument(); diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx index 7ea00352a..9041650bf 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx @@ -33,7 +33,7 @@ export const TaskCompleteButton: React.FC = ({ }) => { return ( - + ); }; diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/StarTaskIconButton/StarTaskIconButton.test.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/StarTaskIconButton/StarTaskIconButton.test.tsx index 43529364a..fc60d4175 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/StarTaskIconButton/StarTaskIconButton.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/StarTaskIconButton/StarTaskIconButton.test.tsx @@ -10,7 +10,7 @@ const taskId = '1'; describe('StarTaskIconButton', () => { it('renders not starred', async () => { - const { queryByRole } = render( + const { queryByTestId } = render( { , ); - const starFilledIcon = queryByRole('img', { - hidden: true, - name: 'Filled Star Icon', - }); - const starOutlineIcon = queryByRole('img', { - hidden: true, - name: 'Outline Star Icon', - }); + const starFilledIcon = queryByTestId('Filled Star Icon'); + const starOutlineIcon = queryByTestId('Outline Star Icon'); expect(starFilledIcon).not.toBeInTheDocument(); expect(starOutlineIcon).toBeInTheDocument(); }); it('renders starred', async () => { - const { queryByRole } = render( + const { queryByTestId } = render( { , ); - const starFilledIcon = queryByRole('img', { - hidden: true, - name: 'Filled Star Icon', - }); - const starOutlineIcon = queryByRole('img', { - hidden: true, - name: 'Outline Star Icon', - }); + const starFilledIcon = queryByTestId('Filled Star Icon'); + const starOutlineIcon = queryByTestId('Outline Star Icon'); expect(starFilledIcon).toBeInTheDocument(); expect(starOutlineIcon).not.toBeInTheDocument(); diff --git a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx index 0994c0646..31b633ab5 100644 --- a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx +++ b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx @@ -45,7 +45,7 @@ describe('ContactFlowRow', () => { , ); expect(getByText('Test Name')).toBeInTheDocument(); - expect(getByTitle('Filled Star Icon')).toBeInTheDocument(); + expect(getByTitle('Star')).toBeInTheDocument(); }); it('should call contact selected function', () => { diff --git a/src/components/Contacts/StarContactIconButton/StarContactIconButton.test.tsx b/src/components/Contacts/StarContactIconButton/StarContactIconButton.test.tsx index 05129ac39..8c74ba582 100644 --- a/src/components/Contacts/StarContactIconButton/StarContactIconButton.test.tsx +++ b/src/components/Contacts/StarContactIconButton/StarContactIconButton.test.tsx @@ -12,7 +12,7 @@ const contactId = '1'; describe('StarTaskIconButton', () => { it('renders not starred', async () => { - const { queryByRole } = render( + const { queryByTestId } = render( { , ); - const starFilledIcon = queryByRole('img', { - hidden: true, - name: 'Filled Star Icon', - }); - const starOutlineIcon = queryByRole('img', { - hidden: true, - name: 'Outline Star Icon', - }); + const starFilledIcon = queryByTestId('Filled Star Icon'); + const starOutlineIcon = queryByTestId('Outline Star Icon'); expect(starFilledIcon).not.toBeInTheDocument(); expect(starOutlineIcon).toBeInTheDocument(); }); it('renders starred', async () => { - const { queryByRole } = render( + const { queryByTestId } = render( { , ); - const starFilledIcon = queryByRole('img', { - hidden: true, - name: 'Filled Star Icon', - }); - const starOutlineIcon = queryByRole('img', { - hidden: true, - name: 'Outline Star Icon', - }); + const starFilledIcon = queryByTestId('Filled Star Icon'); + const starOutlineIcon = queryByTestId('Outline Star Icon'); expect(starFilledIcon).toBeInTheDocument(); expect(starOutlineIcon).not.toBeInTheDocument(); @@ -66,7 +54,7 @@ describe('StarTaskIconButton', () => { it('should toggle starred state', async () => { const mutationSpy = jest.fn(); - const { getByRole } = render( + const { getByTestId } = render( { , ); + const starOutlineIcon = getByTestId('Outline Star Icon'); - userEvent.click( - getByRole('img', { - hidden: true, - name: 'Outline Star Icon', - }), - ); + userEvent.click(starOutlineIcon); await waitFor(() => expect(mutationSpy).toHaveBeenCalledWith({ diff --git a/src/components/Reports/FourteenMonthReports/Layout/Header/Actions/Actions.tsx b/src/components/Reports/FourteenMonthReports/Layout/Header/Actions/Actions.tsx index c5bdebac3..15aba0e1b 100644 --- a/src/components/Reports/FourteenMonthReports/Layout/Header/Actions/Actions.tsx +++ b/src/components/Reports/FourteenMonthReports/Layout/Header/Actions/Actions.tsx @@ -42,9 +42,9 @@ export const FourteenMonthReportActions: React.FC< startIcon={ {isExpanded ? ( - + ) : ( - + )} } @@ -56,7 +56,7 @@ export const FourteenMonthReportActions: React.FC< + + + + + )} + + + + {t( + 'Commitments can only be set if status is Partner - Financial', + )} + + } + > + + + ), }} - > - - {getPledgeCurrencyOptions(pledgeCurrencies)} - - )} - - - - - - {t('Likely To Give')} - - - - - - - - {t('Frequency')} - - - setFieldValue('pledgeFrequency', e.target.value) - } - IconComponent={ - status !== StatusEnum.PartnerFinancial - ? () => ( - - {t( - 'Commitments can only be set if status is Partner - Financial', - )} - - } - > - - - ) - : undefined - } - > - - {Object.values(PledgeFrequencyEnum).map((value) => ( - - {getLocalizedPledgeFrequency(t, value)} - - ))} - - - - - setFieldValue('pledgeStartDate', date)} - /> - - - - - {t('Newsletter')} - - - - - - a.name.localeCompare(b.name)) - .map(({ id }) => id)) || - [] - } - getOptionLabel={(contactId) => - (filteredContacts && - [...currentContacts, ...filteredContacts].find( - ({ id }) => id === contactId, - )?.name) ?? - '' - } - loading={loading} - inputValue={referredByName} - renderInput={(params): ReactElement => ( - - handleUpdateReferredBySearch(e.target.value) + fullWidth + /> + + + + + + + {t('Frequency')} + + + setFieldValue('pledgeFrequency', e.target.value) + } + IconComponent={ + status !== StatusEnum.PartnerFinancial + ? () => ( + + {t( + 'Commitments can only be set if status is Partner - Financial', + )} + + } + > + + + ) + : undefined + } + > + + {Object.values(PledgeFrequencyEnum).map((value) => ( + + {getLocalizedPledgeFrequency(t, value)} + + ))} + + + + + + + + + {t('Currency')} + + {pledgeCurrencies && ( + + )} + + + + + + + setFieldValue('pledgeStartDate', date) } /> - )} - value={ - contactReferralsToMe.map( - (referral) => referral.referredById, - ) ?? undefined - } - onChange={(_, contactIds): void => - updateReferredBy(contactIds, setFieldValue) - } - isOptionEqualToValue={(option, value): boolean => - option === value - } - /> - - - setFieldValue('nextAsk', nextAsk)} - /> - + + + + + + + {t('Likely To Give')} + + + + + + + + setFieldValue('nextAsk', nextAsk)} + /> + + + Date: Thu, 19 Sep 2024 14:00:15 -0700 Subject: [PATCH 6/9] Prevent contact address from showing null --- .../ContactHeaderAddressSection.tsx | 2 +- .../Mailing/ContactDetailsTabMailing.tsx | 16 ++++++++-------- .../Contacts/ContactRow/ContactRow.test.tsx | 6 ++++-- .../Contacts/ContactRow/ContactRow.tsx | 6 ++++-- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx index 052ede4b7..013f34551 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx @@ -65,7 +65,7 @@ export const ContactHeaderAddressSection = ({ {`${city}${city && ','} ${ + >{`${city}, ${ state ?? '' } ${postalCode}`}{' '} = ({ > - {address.street} + {address.street ?? ''} { @@ -186,12 +186,12 @@ export const ContactDetailsTabMailing: React.FC = ({ - {`${address.city}${address.city && ','} ${ + {`${address.city ?? ''}${address.city && ','} ${ address.state ?? '' - } ${address.postalCode}`} + } ${address.postalCode ?? ''}`} - {address.country} + {address.country ?? ''} {t('Source:')} {sourceToStr(t, address.source)} ( @@ -222,21 +222,21 @@ export const ContactDetailsTabMailing: React.FC = ({ - {selectedAddress ? ( + {selectedAddress && ( setEditingAddressId(undefined)} /> - ) : null} - {addAddressModalOpen ? ( + )} + {addAddressModalOpen && ( setAddAddressModalOpen(false)} /> - ) : null} + )} {editMailingModalOpen && ( { getByText( [ contact.primaryAddress?.street, - contact.primaryAddress?.city, + `${contact.primaryAddress?.city}${ + contact.primaryAddress?.city && ',' + }`, contact.primaryAddress?.state, contact.primaryAddress?.postalCode, - ].join(', '), + ].join(' '), ), ).toBeInTheDocument(); }); diff --git a/src/components/Contacts/ContactRow/ContactRow.tsx b/src/components/Contacts/ContactRow/ContactRow.tsx index e79ba64bf..1c6109fd2 100644 --- a/src/components/Contacts/ContactRow/ContactRow.tsx +++ b/src/components/Contacts/ContactRow/ContactRow.tsx @@ -120,10 +120,12 @@ export const ContactRow: React.FC = ({ contact, useTopMargin }) => { {[ primaryAddress.street, - primaryAddress.city, + `${primaryAddress.city}${primaryAddress.city && ','}`, primaryAddress.state, primaryAddress.postalCode, - ].join(', ')} + ] + .filter(Boolean) + .join(' ')} ) From b4f573d840048e83ae354296db8f971b3c76292a Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 19 Sep 2024 14:00:56 -0700 Subject: [PATCH 7/9] Add timezone label --- .../ContactDetailsTab/Other/ContactDetailsOther.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/ContactDetailsOther.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/ContactDetailsOther.tsx index 49430b224..24e83f567 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/ContactDetailsOther.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/ContactDetailsOther.tsx @@ -139,6 +139,9 @@ export const ContactDetailsOther: React.FC = ({ + + {t('Time Zone')} + {timezone} From 6fdeaf776c053d0795dfe043e1f10215e1277dfb Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 19 Sep 2024 14:02:01 -0700 Subject: [PATCH 8/9] Unstar title and syntax changes --- .../ContactDetailsHeader.tsx | 7 +++++-- .../ContactDetailsTab.test.tsx | 14 ++++++++------ .../ContactDetailsTab/ContactDetailsTab.tsx | 2 +- .../EditContactOtherModal.tsx | 8 +++----- .../PersonModal/PersonName/PersonName.tsx | 19 +++++-------------- .../EditPartnershipInfoModal.tsx | 2 +- .../ContactTasksTab/ContactTasksTab.tsx | 2 +- .../ContactFlowRow/ContactFlowRow.test.tsx | 2 +- .../ContactFlowRow/ContactFlowRow.test.tsx | 2 +- .../StarredItemIcon/StarredItemIcon.tsx | 2 +- src/lib/data/languages.ts | 5 +---- 11 files changed, 28 insertions(+), 37 deletions(-) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx index cd068592e..fd3b66321 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx @@ -84,7 +84,7 @@ export const ContactDetailsHeader: React.FC = ({ }, [loading]); return ( - + @@ -109,7 +109,10 @@ export const ContactDetailsHeader: React.FC = ({ onClick={() => setEditPartnershipModalOpen(true)} aria-label={t('Edit Partnership Info')} > - + )} diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.test.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.test.tsx index 730e8c5d5..522d773b5 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.test.tsx @@ -307,14 +307,16 @@ describe('ContactDetailTab', () => { await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument()); }); - it('should open edit contact other details modal', async () => { - const { queryByText } = render(); + it('should open and close Edit Contact Other Details modal', async () => { + const { queryByText, getByTestId, getByText, getByLabelText } = render( + , + ); await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument()); - }); + userEvent.click(getByTestId('Edit Other')); + expect(getByText('Edit Contact Other Details')).toBeInTheDocument(); + + userEvent.click(getByLabelText('Close')); - it('should close edit contact other details modal', async () => { - const { queryByText } = render(); - await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument()); await waitFor(() => expect(queryByText('Edit Contact Other Details')).not.toBeInTheDocument(), ); diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx index 21573f70e..81b502122 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx @@ -131,7 +131,7 @@ export const ContactDetailsTab: React.FC = ({ aria-label={t('Edit')} style={{ marginLeft: 5 }} > - + diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx index 4bd3ea278..ed210be29 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx @@ -433,11 +433,9 @@ export const EditContactOtherModal: React.FC = ({ > {languages.map( (value) => - value?.value && ( - + value.id && + value.value && ( + {t(value.value)} ), diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName.tsx index 52f94e953..09aa9dfe5 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName.tsx @@ -1,13 +1,6 @@ import React, { useRef } from 'react'; import UploadIcon from '@mui/icons-material/Upload'; -import { - Avatar, - Box, - Grid, - IconButton, - TextField, - Typography, -} from '@mui/material'; +import { Avatar, Grid, IconButton, TextField, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import { FormikProps } from 'formik'; import { useTranslation } from 'react-i18next'; @@ -82,7 +75,7 @@ export const PersonName: React.FC = ({ return ( <> - {person ? ( + {person && ( @@ -102,13 +95,11 @@ export const PersonName: React.FC = ({ ref={fileRef} onChange={handleFileChange} /> - - {`${ - person.firstName || '' - } ${person.lastName || ''}`} + + {`${person.firstName || ''} ${person.lastName || ''}`} - ) : null} + )} diff --git a/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx b/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx index 880a375d1..6aff9ea04 100644 --- a/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx +++ b/src/components/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx @@ -233,7 +233,7 @@ export const EditPartnershipInfoModal: React.FC< = ({ }) } style={{ - height: `Max(calc(100vh - ${infiniteListRectTop}px), 500px)`, + height: `max(100vh - ${infiniteListRectTop}px, 500px)`, }} data-testid="virtuoso-item-list" /> diff --git a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx index 31b633ab5..b3d75af76 100644 --- a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx +++ b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.test.tsx @@ -45,7 +45,7 @@ describe('ContactFlowRow', () => { , ); expect(getByText('Test Name')).toBeInTheDocument(); - expect(getByTitle('Star')).toBeInTheDocument(); + expect(getByTitle('Unstar')).toBeInTheDocument(); }); it('should call contact selected function', () => { diff --git a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx index 1f9c41ccf..aa3b1ebfd 100644 --- a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx +++ b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx @@ -83,7 +83,7 @@ describe('ContactFlowRow', () => { />, ); expect(getByText(defaultContact.name)).toBeInTheDocument(); - expect(getByTitle('Star')).toBeInTheDocument(); + expect(getByTitle('Unstar')).toBeInTheDocument(); }); it('should call contact selected function', () => { diff --git a/src/components/common/StarredItemIcon/StarredItemIcon.tsx b/src/components/common/StarredItemIcon/StarredItemIcon.tsx index 4d11b14b4..f07464908 100644 --- a/src/components/common/StarredItemIcon/StarredItemIcon.tsx +++ b/src/components/common/StarredItemIcon/StarredItemIcon.tsx @@ -21,7 +21,7 @@ const StarOutline = styled(StarBorderOutlined)(({ theme }) => ({ export const StarredItemIcon: React.FC = ({ isStarred }) => { return isStarred ? ( - + ) : ( ); diff --git a/src/lib/data/languages.ts b/src/lib/data/languages.ts index 2ff9b9413..d28a79c2d 100644 --- a/src/lib/data/languages.ts +++ b/src/lib/data/languages.ts @@ -43,12 +43,9 @@ export const languages: IdValue[] = [ }, ]; -// type FormatLanguageProps = { id: string; value: string }[] | undefined; -type FormatLanguageProps = IdValue[] | undefined; - export const formatLanguage = ( language: string | undefined | null, - languagesList: FormatLanguageProps = languages, + languagesList: IdValue[] = languages, ): string => { const name = languagesList.find(({ id }) => id === language)?.value; return name ?? ''; From c1aa7764283aa76a762744e427bf129458022928 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 19 Sep 2024 14:28:59 -0700 Subject: [PATCH 9/9] Localize titleAccess --- .../ContactDetailsHeader/ContactDetailsHeader.tsx | 2 +- .../ContactDetailsMoreActions.tsx | 2 +- .../ContactHeaderSection/HandshakeIcon.tsx | 14 +++++++++----- .../ContactDetailsTab/ContactDetailsTab.tsx | 2 +- .../ContactDetailsTab/Tags/ContactTags.test.tsx | 2 +- .../ContactDetailsTab/Tags/ContactTags.tsx | 2 +- .../TaskCommentsButton/TaskCommentsButton.tsx | 4 +++- .../TaskCompleteButton/TaskCompleteButton.tsx | 4 +++- .../Layouts/Primary/NavBar/NavItem/NavItem.tsx | 6 ++++-- .../Primary/TopBar/Items/AddMenu/AddMenu.tsx | 3 ++- .../common/DeleteItemIcon/DeleteItemIcon.tsx | 4 +++- .../common/StarredItemIcon/StarredItemIcon.tsx | 6 ++++-- 12 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx index fd3b66321..b9fcd23d3 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx @@ -110,7 +110,7 @@ export const ContactDetailsHeader: React.FC = ({ aria-label={t('Edit Partnership Info')} > diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx index 67f42bd2b..b8aaa9045 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx @@ -265,7 +265,7 @@ export const ContactDetailsMoreAcitions: React.FC< aria-haspopup="true" onClick={(event) => setAnchorEl(event.currentTarget)} > - + ({ @@ -10,8 +11,11 @@ const SwapIconSvg = styled(SvgIcon)(({}) => ({ color: theme.palette.text.secondary, })); -export const HandshakeIcon = (): ReactElement => ( - - - -); +export const HandshakeIcon = (): ReactElement => { + const { t } = useTranslation(); + return ( + + + + ); +}; diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx index 81b502122..e7ddc310b 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx @@ -131,7 +131,7 @@ export const ContactDetailsTab: React.FC = ({ aria-label={t('Edit')} style={{ marginLeft: 5 }} > - + diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.test.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.test.tsx index b780f4b32..f038cea55 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.test.tsx @@ -156,7 +156,7 @@ describe('ContactTags', () => { , ); - const tag1DeleteIcon = getAllByTitle('Delete Icon')[0].querySelector( + const tag1DeleteIcon = getAllByTitle('Remove')[0].querySelector( '.MuiChip-deleteIcon', ); diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx index 98e6fcd55..bfced5220 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx @@ -146,7 +146,7 @@ export const ContactTags: React.FC = ({ label={tag} disabled={updating} onDelete={() => handleTagDelete(tag)} - title={t('Delete Icon')} + title={t('Remove')} /> ))} = ({ detailsPage, ...props }) => { + const { t } = useTranslation(); return ( - + {numberOfComments} diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx index 9041650bf..028630cb4 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx @@ -2,6 +2,7 @@ import React from 'react'; import Check from '@mui/icons-material/Check'; import { Button, ButtonProps } from '@mui/material'; import { styled } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; import theme from 'src/theme'; const ButtonWrap = styled(Button, { @@ -31,9 +32,10 @@ export const TaskCompleteButton: React.FC = ({ isComplete, ...props }) => { + const { t } = useTranslation(); return ( - + ); }; diff --git a/src/components/Layouts/Primary/NavBar/NavItem/NavItem.tsx b/src/components/Layouts/Primary/NavBar/NavItem/NavItem.tsx index 3ba1d2ac5..cb87c501a 100644 --- a/src/components/Layouts/Primary/NavBar/NavItem/NavItem.tsx +++ b/src/components/Layouts/Primary/NavBar/NavItem/NavItem.tsx @@ -5,6 +5,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import { Button, Collapse, ListItemButton, MenuItem } from '@mui/material'; import { styled, useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; import HandoffLink from 'src/components/HandoffLink'; import { LeafListItem, Title } from '../StyledComponents'; @@ -54,6 +55,7 @@ export const NavItem: FC = ({ }) => { const [open, setOpen] = useState(openProp ?? false); const theme = useTheme(); + const { t } = useTranslation(); const handleToggle = (): void => { setOpen((prevOpen) => !prevOpen); @@ -80,13 +82,13 @@ export const NavItem: FC = ({ ) : ( )} diff --git a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx index 8c454de29..9af66d0ce 100644 --- a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx @@ -189,6 +189,7 @@ const AddMenu = ({ isInDrawer = false }: AddMenuProps): ReactElement => { const [selectedMenuItem, changeSelectedMenuItem] = useState(null); const [dialogOpen, changeDialogOpen] = useState(false); + const { t } = useTranslation(); const addMenuContent = [ { @@ -254,7 +255,7 @@ const AddMenu = ({ isInDrawer = false }: AddMenuProps): ReactElement => { aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} > - + ({ width: '24px', @@ -9,5 +10,6 @@ const DeleteOutline = styled(DeleteOutlined)(({ theme }) => ({ })); export const DeletedItemIcon: React.FC = () => { - return ; + const { t } = useTranslation(); + return ; }; diff --git a/src/components/common/StarredItemIcon/StarredItemIcon.tsx b/src/components/common/StarredItemIcon/StarredItemIcon.tsx index f07464908..ae9552fac 100644 --- a/src/components/common/StarredItemIcon/StarredItemIcon.tsx +++ b/src/components/common/StarredItemIcon/StarredItemIcon.tsx @@ -2,6 +2,7 @@ import React from 'react'; import StarIcon from '@mui/icons-material/Star'; import StarBorderOutlined from '@mui/icons-material/StarBorderOutlined'; import { styled } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; interface Props { isStarred: boolean; @@ -20,9 +21,10 @@ const StarOutline = styled(StarBorderOutlined)(({ theme }) => ({ })); export const StarredItemIcon: React.FC = ({ isStarred }) => { + const { t } = useTranslation(); return isStarred ? ( - + ) : ( - + ); };