Localize phone number and email locations

CruGlobal · Nov 14, 2024 · 38cb8f9 · 38cb8f9
1 parent 00c4ac0
commit 38cb8f9
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 42 deletions.
diff --git a/...ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmailItem.tsx b/...ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmailItem.tsx
@@ -17,6 +17,7 @@ import {
   PersonEmailAddressInput,
   PersonUpdateInput,
 } from 'src/graphql/types.generated';
+import { useEmailLocations } from 'src/hooks/useEmailLocations';
 import { isEditableSource } from 'src/utils/sourceHelper';
 import { ModalSectionContainer } from '../ModalSectionContainer/ModalSectionContainer';
 import { ModalSectionDeleteIcon } from '../ModalSectionDeleteIcon/ModalSectionDeleteIcon';
@@ -68,6 +69,8 @@ export const PersonEmailItem: React.FC<Props> = ({
   const [isEmailPrimaryChecked, setIsEmailPrimaryChecked] =
     React.useState(false);
 
+  const locations = useEmailLocations();
+
   const source = sources?.find((email) => email.id === emailAddress.id)?.source;
 
   const locked = !isEditableSource(source);
@@ -134,17 +137,13 @@ export const PersonEmailItem: React.FC<Props> = ({
               fullWidth
             >
               <MenuItem selected value="">
-                None
-              </MenuItem>
-              <MenuItem value="work" aria-label={t('Work')}>
-                {t('Work')}
-              </MenuItem>
-              <MenuItem value="personal" aria-label={t('Personal')}>
-                {t('Personal')}
-              </MenuItem>
-              <MenuItem value="other" aria-label={t('Other')}>
-                {t('Other')}
+                {t('None')}
               </MenuItem>
+              {Object.entries(locations).map(([value, label]) => (
+                <MenuItem value={value} key={value}>
+                  {label}
+                </MenuItem>
+              ))}
             </EmailSelect>
           </FormControl>
         </Grid>

diff --git a/...ls/ContactDetailsTab/People/Items/PersonModal/PersonPhoneNumber/PersonPhoneNumberItem.tsx b/...ls/ContactDetailsTab/People/Items/PersonModal/PersonPhoneNumber/PersonPhoneNumberItem.tsx
@@ -17,6 +17,7 @@ import {
   PersonPhoneNumberInput,
   PersonUpdateInput,
 } from 'src/graphql/types.generated';
+import { usePhoneLocations } from 'src/hooks/usePhoneLocations';
 import { isEditableSource } from 'src/utils/sourceHelper';
 import { ModalSectionContainer } from '../ModalSectionContainer/ModalSectionContainer';
 import { ModalSectionDeleteIcon } from '../ModalSectionDeleteIcon/ModalSectionDeleteIcon';
@@ -67,6 +68,8 @@ export const PersonPhoneNumberItem: React.FC<Props> = ({
 
   const [isPrimaryChecked, setIsPrimaryChecked] = React.useState(false);
 
+  const locations = usePhoneLocations();
+
   const source = sources?.find(
     (number) => number.id === phoneNumber.id,
   )?.source;
@@ -136,20 +139,13 @@ export const PersonPhoneNumberItem: React.FC<Props> = ({
               fullWidth
             >
               <MenuItem selected value="">
-                None
-              </MenuItem>
-              <MenuItem value="mobile" aria-label={t('Mobile')}>
-                {t('Mobile')}
-              </MenuItem>
-              <MenuItem value="home" aria-label={t('Home')}>
-                {t('Home')}
-              </MenuItem>
-              <MenuItem value="work" aria-label={t('Work')}>
-                {t('Work')}
-              </MenuItem>
-              <MenuItem value="other" aria-label={t('Other')}>
-                {t('Other')}
+                {t('None')}
               </MenuItem>
+              {Object.entries(locations).map(([value, label]) => (
+                <MenuItem value={value} key={value}>
+                  {label}
+                </MenuItem>
+              ))}
             </PhoneNumberSelect>
           </FormControl>
         </Grid>

diff --git a/src/components/Shared/CollapsibleContactInfo/CollapsibleEmailList.tsx b/src/components/Shared/CollapsibleContactInfo/CollapsibleEmailList.tsx
@@ -1,20 +1,30 @@
 import { Link, Typography } from '@mui/material';
 import { EmailAddress } from 'src/graphql/types.generated';
+import { useEmailLocations } from 'src/hooks/useEmailLocations';
 import { CollapsibleList } from './CollapsibleList';
 import { ContactInfoText } from './StyledComponents';
 
 interface EmailProps {
   email: Partial<EmailAddress>;
 }
 
-const Email: React.FC<EmailProps> = ({ email }) => (
-  <ContactInfoText data-testid="EmailAddress">
-    <Link href={`mailto:${email.email}`} underline="hover">
-      {email.email}
-    </Link>
-    {email.location && <span> - {email.location}</span>}
-  </ContactInfoText>
-);
+const Email: React.FC<EmailProps> = ({ email }) => {
+  const locations = useEmailLocations();
+
+  return (
+    <ContactInfoText data-testid="EmailAddress">
+      <Link href={`mailto:${email.email}`} underline="hover">
+        {email.email}
+      </Link>
+      {email.location && (
+        <span>
+          {' - '}
+          {locations[email.location.toLowerCase()] ?? email.location}
+        </span>
+      )}
+    </ContactInfoText>
+  );
+};
 
 interface CollapsibleEmailListProps {
   emails: Array<Partial<EmailAddress>>;

diff --git a/src/components/Shared/CollapsibleContactInfo/CollapsiblePhoneList.tsx b/src/components/Shared/CollapsibleContactInfo/CollapsiblePhoneList.tsx
@@ -1,20 +1,30 @@
 import { Link, Typography } from '@mui/material';
 import { PhoneNumber } from 'src/graphql/types.generated';
+import { usePhoneLocations } from 'src/hooks/usePhoneLocations';
 import { CollapsibleList } from './CollapsibleList';
 import { ContactInfoText } from './StyledComponents';
 
 interface PhoneProps {
   phone: Pick<PhoneNumber, 'number' | 'location'>;
 }
 
-const Phone: React.FC<PhoneProps> = ({ phone }) => (
-  <ContactInfoText data-testid="PhoneNumber">
-    <Link href={`tel:${phone.number}`} underline="hover">
-      {phone.number}
-    </Link>
-    {phone.location && <span> - {phone.location}</span>}
-  </ContactInfoText>
-);
+const Phone: React.FC<PhoneProps> = ({ phone }) => {
+  const locations = usePhoneLocations();
+
+  return (
+    <ContactInfoText data-testid="PhoneNumber">
+      <Link href={`tel:${phone.number}`} underline="hover">
+        {phone.number}
+      </Link>
+      {phone.location && (
+        <span>
+          {' - '}
+          {locations[phone.location.toLowerCase()] ?? phone.location}
+        </span>
+      )}
+    </ContactInfoText>
+  );
+};
 
 interface CollapsiblePhoneListProps {
   phones: Array<Partial<PhoneNumber>>;

diff --git a/src/components/Shared/CollapsibleContactInfo/StyledComponents.ts b/src/components/Shared/CollapsibleContactInfo/StyledComponents.ts
@@ -2,7 +2,4 @@ import { styled } from '@mui/material/styles';
 
 export const ContactInfoText = styled('span')({
   overflow: 'hidden',
-  '& span': {
-    textTransform: 'capitalize',
-  },
 });
diff --git a/src/hooks/useEmailLocations.ts b/src/hooks/useEmailLocations.ts
@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+// Return an object where the keys are email address locations and the values are the localized labels
+export const useEmailLocations = (): Record<string, string> => {
+  const { t } = useTranslation();
+
+  const locations = useMemo(
+    () => ({
+      work: t('Work'),
+      personal: t('Personal'),
+      other: t('Other'),
+    }),
+    [t],
+  );
+
+  return locations;
+};
diff --git a/src/hooks/usePhoneLocations.ts b/src/hooks/usePhoneLocations.ts
@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+// Return an object where the keys are phone number locations and the values are the localized labels
+export const usePhoneLocations = (): Record<string, string> => {
+  const { t } = useTranslation();
+
+  const locations = useMemo(
+    () => ({
+      mobile: t('Mobile'),
+      home: t('Home'),
+      work: t('Work'),
+      other: t('Other'),
+    }),
+    [t],
+  );
+
+  return locations;
+};