show display name for approver field on tag settings page

src/pages/workspace/tags/TagSettingsPage.tsx

@@ -18,6 +18,7 @@ import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -52,6 +53,12 @@ function TagSettingsPage({route, navigation}: TagSettingsPageProps) {
         navigation.setParams({tagName: currentPolicyTag?.name});
     }, [tagName, currentPolicyTag, navigation]);
 
+    const approverText = useMemo(() => {
+        const tagApprover = PolicyUtils.getTagApproverRule(policyID, route.params?.tagName)?.approver ?? '';
+        const approver = PersonalDetailsUtils.getPersonalDetailByEmail(tagApprover);
+        return approver?.displayName ?? tagApprover;
+    }, [policyID, route.params?.tagName, policy?.rules?.approvalRules]);
+
     if (!currentPolicyTag) {
         return <NotFoundPage />;
     }
@@ -104,7 +111,6 @@ function TagSettingsPage({route, navigation}: TagSettingsPageProps) {
 
     const isThereAnyAccountingConnection = Object.keys(policy?.connections ?? {}).length !== 0;
     const isMultiLevelTags = PolicyUtils.isMultiLevelTags(policyTags);
-    const tagApprover = PolicyUtils.getTagApproverRule(policyID, route.params.tagName)?.approver;
 
     const shouldShowDeleteMenuItem = !isThereAnyAccountingConnection && !isMultiLevelTags;
     const workflowApprovalsUnavailable = PolicyUtils.getWorkflowApprovalsUnavailable(policy);
@@ -180,7 +186,7 @@ function TagSettingsPage({route, navigation}: TagSettingsPageProps) {
                                 <Text style={[styles.textNormal, styles.textStrong, styles.mv3]}>{translate('workspace.tags.tagRules')}</Text>
                             </View>
                             <MenuItemWithTopDescription
-                                title={tagApprover ?? ''}
+                                title={approverText}
                                 description={translate(`workspace.tags.approverDescription`)}
                                 onPress={navigateToEditTagApprover}
                                 shouldShowRightIcon