Fix - Phone contact added as approver is displayed as number@expensify.sms

Author: dmkt9

src/components/ApprovalWorkflowSection.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
@@ -38,7 +39,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
         }
 
         return sortAlphabetically(approvalWorkflow.members, 'displayName')
-            .map((m) => m.displayName)
+            .map((m) => Str.removeSMSDomain(m.displayName))
             .join(', ');
     }, [approvalWorkflow.isDefault, approvalWorkflow.members, translate]);
 
@@ -90,7 +91,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
                             style={styles.p0}
                             titleStyle={styles.textLabelSupportingNormal}
                             descriptionTextStyle={[styles.textNormalThemeText, styles.lineHeightXLarge]}
-                            description={approver.displayName}
+                            description={Str.removeSMSDomain(approver.displayName)}
                             icon={Expensicons.UserCheck}
                             iconHeight={20}
                             iconWidth={20}

src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
@@ -67,7 +68,7 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
         }
 
         return sortAlphabetically(approvalWorkflow.members, 'displayName')
-            .map((m) => m.displayName)
+            .map((m) => Str.removeSMSDomain(m.displayName))
             .join(', ');
     }, [approvalWorkflow.isDefault, approvalWorkflow.members, translate]);
 
@@ -85,8 +86,8 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
                     return;
                 }
                 return translate('workflowsPage.approverCircularReference', {
-                    name1: approver.displayName,
-                    name2: previousApprover.displayName,
+                    name1: Str.removeSMSDomain(approver.displayName),
+                    name2: Str.removeSMSDomain(previousApprover.displayName),
                 });
             }
 
@@ -156,7 +157,7 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
                             pendingAction={getApprovalPendingAction(approverIndex)}
                         >
                             <MenuItemWithTopDescription
-                                title={approver?.displayName}
+                                title={Str.removeSMSDomain(approver?.displayName ?? '')}
                                 titleStyle={styles.textNormalThemeText}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                                 description={approverDescription(approverIndex)}

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import type {SectionListData} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -78,12 +79,12 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
                 const isAdmin = policy?.employeeList?.[member.email]?.role === CONST.REPORT.ROLE.ADMIN;
 
                 return {
-                    text: member.displayName,
+                    text: Str.removeSMSDomain(member.displayName),
                     alternateText: member.email,
                     keyForList: member.email,
                     isSelected: true,
                     login: member.email,
-                    icons: [{source: member.avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: member.displayName, id: accountID}],
+                    icons: [{source: member.avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: Str.removeSMSDomain(member.displayName), id: accountID}],
                     rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
                 };
             }),
@@ -102,12 +103,12 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
                     const accountID = Number(policyMemberEmailsToAccountIDs[member.email] ?? '');
 
                     return {
-                        text: member.displayName,
+                        text: Str.removeSMSDomain(member.displayName),
                         alternateText: member.email,
                         keyForList: member.email,
                         isSelected: false,
                         login: member.email,
-                        icons: [{source: member.avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: member.displayName, id: accountID}],
+                        icons: [{source: member.avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: Str.removeSMSDomain(member.displayName), id: accountID}],
                         rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
                     };
                 })