fix: Drop domain name in mentions if chat members are on the same domain

src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js

@@ -1,3 +1,4 @@
+import {cloneDeep} from 'lodash';
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
@@ -16,6 +17,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import CONST from '@src/CONST';
+import * as LoginUtils from '@src/libs/LoginUtils';
 import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
@@ -37,15 +39,28 @@ function MentionUserRenderer(props) {
     let accountID;
     let displayNameOrLogin;
     let navigationRoute;
+    const tnode = cloneDeep(props.tnode);
+    const getMentionDisplayText = (displayText, accountId, userLogin = '') => {
+        if (accountId && userLogin !== displayText) {
+            return displayText;
+        }
+        if (!LoginUtils.areEmailsFromSamePrivateDomain(displayText, props.currentUserPersonalDetails.login)) {
+            return displayText;
+        }
+
+        return displayText.split('@')[0];
+    };
 
     if (!_.isEmpty(htmlAttribAccountID)) {
         const user = lodashGet(personalDetails, htmlAttribAccountID);
         accountID = parseInt(htmlAttribAccountID, 10);
         displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(lodashGet(user, 'login', '')) || lodashGet(user, 'displayName', '') || translate('common.hidden');
+        displayNameOrLogin = getMentionDisplayText(displayNameOrLogin, htmlAttribAccountID, lodashGet(user, 'login', ''));
         navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID);
-    } else if (!_.isEmpty(props.tnode.data)) {
+    } else if (!_.isEmpty(tnode.data)) {
         // We need to remove the LTR unicode and leading @ from data as it is not part of the login
-        displayNameOrLogin = props.tnode.data.replace(CONST.UNICODE.LTR, '').slice(1);
+        displayNameOrLogin = tnode.data.replace(CONST.UNICODE.LTR, '').slice(1);
+        tnode.data = tnode.data.replace(displayNameOrLogin, getMentionDisplayText(displayNameOrLogin, htmlAttribAccountID));
 
         accountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins([displayNameOrLogin]));
         navigationRoute = ROUTES.DETAILS.getRoute(displayNameOrLogin);
@@ -83,7 +98,7 @@ function MentionUserRenderer(props) {
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...defaultRendererProps}
                         >
-                            {!_.isEmpty(htmlAttribAccountID) ? `@${displayNameOrLogin}` : <TNodeChildrenRenderer tnode={props.tnode} />}
+                            {!_.isEmpty(htmlAttribAccountID) ? `@${displayNameOrLogin}` : <TNodeChildrenRenderer tnode={tnode} />}
                         </Text>
                     </UserDetailsTooltip>
                 </Text>

src/libs/LoginUtils.ts

@@ -59,4 +59,16 @@ function getPhoneLogin(partnerUserID: string): string {
     return appendCountryCode(getPhoneNumberWithoutSpecialChars(partnerUserID));
 }
 
-export {getPhoneNumberWithoutSpecialChars, appendCountryCode, isEmailPublicDomain, validateNumber, getPhoneLogin};
+/**
+ * Check whether 2 emails have the same private domain
+ */
+function areEmailsFromSamePrivateDomain(email1: string, email2: string): boolean {
+    if (isEmailPublicDomain(email1) || isEmailPublicDomain(email2)) {
+        return false;
+    }
+    const emailDomain1 = Str.extractEmailDomain(email1).toLowerCase();
+    const emailDomain2 = Str.extractEmailDomain(email2).toLowerCase();
+    return emailDomain1 === emailDomain2;
+}
+
+export {getPhoneNumberWithoutSpecialChars, appendCountryCode, isEmailPublicDomain, validateNumber, getPhoneLogin, areEmailsFromSamePrivateDomain};