Unstar title and syntax changes

CruGlobal · Sep 19, 2024 · 6fdeaf7 · 6fdeaf7
1 parent b4f573d
commit 6fdeaf7
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 37 deletions.
diff --git 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<Props> = ({
   }, [loading]);
 
   return (
-    <Box sx={{ paddingY: 2, paddingX: 2, backgroundColor: 'transparent' }}>
+    <Box sx={{ padding: 2, backgroundColor: 'transparent' }}>
       <HeaderBar>
         <ContactAvatar alt={data?.contact.name} src={data?.contact.avatar} />
         <HeaderBarContactWrap>
@@ -109,7 +109,10 @@ export const ContactDetailsHeader: React.FC<Props> = ({
                 onClick={() => setEditPartnershipModalOpen(true)}
                 aria-label={t('Edit Partnership Info')}
               >
-                <EditIcon titleAccess="Edit Partnership Info" />
+                <EditIcon
+                  titleAccess="Edit Partnership Info"
+                  sx={{ width: '24px', height: '24px' }}
+                />
               </IconButton>
             </>
           )}

diff --git 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(<TestComponent />);
+  it('should open and close Edit Contact Other Details modal', async () => {
+    const { queryByText, getByTestId, getByText, getByLabelText } = render(
+      <TestComponent />,
+    );
     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(<TestComponent />);
-    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
@@ -131,7 +131,7 @@ export const ContactDetailsTab: React.FC<ContactDetailTabProps> = ({
                 aria-label={t('Edit')}
                 style={{ marginLeft: 5 }}
               >
-                <EditIcon titleAccess="Edit" />
+                <EditIcon titleAccess="Edit" data-testid="Edit Other" />
               </IconButton>
             </ContactDetailHeadingText>
           </ContactDetailHeadingContainer>

diff --git a/...ts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx b/...ts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx
@@ -433,11 +433,9 @@ export const EditContactOtherModal: React.FC<EditContactOtherModalProps> = ({
                         >
                           {languages.map(
                             (value) =>
-                              value?.value && (
-                                <MenuItem
-                                  key={value.id}
-                                  value={value.id || undefined}
-                                >
+                              value.id &&
+                              value.value && (
+                                <MenuItem key={value.id} value={value.id}>
                                   {t(value.value)}
                                 </MenuItem>
                               ),

diff --git a/...tacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName.tsx b/...tacts/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<PersonNameProps> = ({
 
   return (
     <>
-      {person ? (
+      {person && (
         <ModalSectionContainer>
           <StyledIconButton onClick={handleFileClick}>
             <StyledAvatarIcon>
@@ -102,13 +95,11 @@ export const PersonName: React.FC<PersonNameProps> = ({
             ref={fileRef}
             onChange={handleFileChange}
           />
-          <Typography>
-            <Box component="span" fontWeight="bold">{`${
-              person.firstName || ''
-            } ${person.lastName || ''}`}</Box>
+          <Typography component="span" fontWeight="bold">
+            {`${person.firstName || ''} ${person.lastName || ''}`}
           </Typography>
         </ModalSectionContainer>
-      ) : null}
+      )}
       <ModalSectionContainer>
         <Grid container spacing={3}>
           <Grid item xs={12} sm={6}>

diff --git a/...ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx b/...ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx
@@ -233,7 +233,7 @@ export const EditPartnershipInfoModal: React.FC<
                   <ContactInputWrapper>
                     <TextField
                       name="name"
-                      label={t('Contact')}
+                      label={t('Contact Name')}
                       value={name}
                       onChange={handleChange}
                       onBlur={handleBlur}

diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx
@@ -252,7 +252,7 @@ export const ContactTasksTab: React.FC<ContactTasksTabProps> = ({
             })
           }
           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
@@ -45,7 +45,7 @@ describe('ContactFlowRow', () => {
       </DndProvider>,
     );
     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
@@ -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
@@ -21,7 +21,7 @@ const StarOutline = styled(StarBorderOutlined)(({ theme }) => ({
 
 export const StarredItemIcon: React.FC<Props> = ({ isStarred }) => {
   return isStarred ? (
-    <StarFilled titleAccess="Star" data-testid="Filled Star Icon" />
+    <StarFilled titleAccess="Unstar" data-testid="Filled Star Icon" />
   ) : (
     <StarOutline titleAccess="Star" data-testid="Outline Star Icon" />
   );

diff --git 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 ?? '';