format phone number in MemberListItemHeader

Author: s77rt

src/components/SelectionList/Search/MemberListItemHeader.tsx

@@ -5,7 +5,10 @@ import Checkbox from '@components/Checkbox';
 import type {ListItem, TransactionMemberGroupListItemType} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
+import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
 
 type MemberListItemHeaderProps<TItem extends ListItem> = {
@@ -24,10 +27,12 @@ type MemberListItemHeaderProps<TItem extends ListItem> = {
 
 function MemberListItemHeader<TItem extends ListItem>({member: memberItem, onCheckboxPress, isDisabled, canSelectMultiple}: MemberListItemHeaderProps<TItem>) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
 
-    // s77rt add total cell, action cell and collapse/expand button
+    const formattedDisplayName = formatPhoneNumber(getDisplayNameOrDefault(memberItem));
+    const formattedLogin = formatPhoneNumber(memberItem.login ?? '');
 
-    // s77rt remove sms domain
+    // s77rt add total cell, action cell and collapse/expand button
 
     return (
         <View>
@@ -38,7 +43,7 @@ function MemberListItemHeader<TItem extends ListItem>({member: memberItem, onChe
                             onPress={() => onCheckboxPress?.(memberItem as unknown as TItem)}
                             isChecked={memberItem.isSelected}
                             disabled={!!isDisabled || memberItem.isDisabledCheckbox}
-                            accessibilityLabel={memberItem.text ?? ''}
+                            accessibilityLabel={translate('common.select')}
                         />
                     )}
                     <View style={[styles.flexRow, styles.gap3]}>
@@ -47,18 +52,18 @@ function MemberListItemHeader<TItem extends ListItem>({member: memberItem, onChe
                                 <Avatar
                                     source={memberItem.avatar}
                                     type={CONST.ICON_TYPE_AVATAR}
-                                    name={memberItem.displayName ?? memberItem.login}
+                                    name={formattedDisplayName}
                                     avatarID={memberItem.accountID}
                                 />
                             </View>
                         </UserDetailsTooltip>
                         <View style={[styles.gapHalf]}>
                             <TextWithTooltip
-                                text={memberItem.displayName ?? memberItem.login ?? ''}
+                                text={formattedDisplayName}
                                 style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]}
                             />
                             <TextWithTooltip
-                                text={memberItem.login ?? ''}
+                                text={formattedLogin || formattedDisplayName}
                                 style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />
                         </View>