translate invite member to room

src/languages/en.ts

@@ -1537,6 +1537,12 @@ export default {
             invitePeople: 'Invite new members',
             genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.',
             pleaseEnterValidLogin: `Please ensure the email or phone number is valid (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
+            user: 'user',
+            users: 'users',
+            invited: 'invited',
+            removed: 'removed',
+            to: 'to',
+            from: 'from',
         },
         inviteMessage: {
             inviteMessageTitle: 'Add message',

src/languages/es.ts

@@ -1559,6 +1559,12 @@ export default {
             invitePeople: 'Invitar nuevos miembros',
             genericFailureMessage: 'Se produjo un error al invitar al usuario al espacio de trabajo. Vuelva a intentarlo..',
             pleaseEnterValidLogin: `Asegúrese de que el correo electrónico o el número de teléfono sean válidos (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
+            user: 'usuario',
+            users: 'usuarias',
+            invited: 'invitada',
+            removed: 'eliminado',
+            to: 'a',
+            from: 'de',
         },
         inviteMessage: {
             inviteMessageTitle: 'Añadir un mensaje',

src/libs/ReportActionsUtils.ts

@@ -5,21 +5,47 @@ import OnyxUtils from 'react-native-onyx/lib/utils';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {ActionName} from '@src/types/onyx/OriginalMessage';
+import {ActionName, ChangeLogOriginalMessage} from '@src/types/onyx/OriginalMessage';
 import Report from '@src/types/onyx/Report';
-import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
+import ReportAction, {Message, ReportActions} from '@src/types/onyx/ReportAction';
 import {EmptyObject, isEmptyObject} from '@src/types/utils/EmptyObject';
 import * as CollectionUtils from './CollectionUtils';
 import * as Environment from './Environment/Environment';
 import isReportMessageAttachment from './isReportMessageAttachment';
+import * as LocalePhoneNumber from './LocalePhoneNumber';
+import * as Localize from './Localize';
 import Log from './Log';
+import * as PersonalDetailsUtils from './PersonalDetailsUtils';
 
 type LastVisibleMessage = {
     lastMessageTranslationKey?: string;
     lastMessageText: string;
     lastMessageHtml?: string;
 };
 
+type MemberChangeMessageElementBase = {
+    readonly kind: string;
+    readonly content: string;
+};
+
+type MemberChangeMessageTextElement = {
+    readonly kind: 'text';
+    readonly content: string;
+};
+
+type MemberChangeMessageUserMentionElement = {
+    readonly kind: 'userMention';
+    readonly accountID: number;
+} & MemberChangeMessageElementBase;
+
+type MemberChangeMessageRoomReferenceElement = {
+    readonly kind: 'roomReference';
+    readonly roomName: string;
+    readonly roomID: number;
+} & MemberChangeMessageElementBase;
+
+type MemberChangeMessageElement = MemberChangeMessageTextElement | MemberChangeMessageUserMentionElement | MemberChangeMessageRoomReferenceElement;
+
 const allReports: OnyxCollection<Report> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
@@ -100,7 +126,7 @@ function isReimbursementQueuedAction(reportAction: OnyxEntry<ReportAction>) {
     return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTQUEUED;
 }
 
-function isChannelLogMemberAction(reportAction: OnyxEntry<ReportAction>) {
+function isMemberChangeAction(reportAction: OnyxEntry<ReportAction>) {
     return (
         reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM ||
         reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.REMOVE_FROM_ROOM ||
@@ -109,6 +135,10 @@ function isChannelLogMemberAction(reportAction: OnyxEntry<ReportAction>) {
     );
 }
 
+function isInviteMemberAction(reportAction: OnyxEntry<ReportAction>) {
+    return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM;
+}
+
 /**
  * Returns whether the comment is a thread parent message/the first message in a thread
  */
@@ -635,6 +665,145 @@ function isNotifiableReportAction(reportAction: OnyxEntry<ReportAction>): boolea
     return actions.includes(reportAction.actionName);
 }
 
+function getMemberChangeMessageElements(reportAction: OnyxEntry<ReportAction>): MemberChangeMessageElement[] {
+    const messageElements: MemberChangeMessageElement[] = [];
+    const isInviteAction = isInviteMemberAction(reportAction);
+
+    const verb = isInviteAction ? Localize.translateLocal('workspace.invite.invited') : Localize.translateLocal('workspace.invite.removed');
+
+    messageElements.push({
+        kind: 'text',
+        content: `${verb} `,
+    });
+
+    const originalMessage = reportAction?.originalMessage as ChangeLogOriginalMessage;
+    const targetAccountIDs: number[] = originalMessage?.targetAccountIDs ?? [];
+    const personalDetails = PersonalDetailsUtils.getPersonalDetailsByIDs(targetAccountIDs, 0);
+
+    const mentions = targetAccountIDs.map((accountID) => {
+        const personalDetail = personalDetails.find((personal) => personal.accountID === accountID);
+
+        if (personalDetail) {
+            const displayNameOrLogin =
+                LocalePhoneNumber.formatPhoneNumber(personalDetail.login ?? '') || (personalDetail?.displayName ? personalDetail?.displayName : Localize.translateLocal('common.hidden'));
+            return {content: `@${displayNameOrLogin}`, accountID};
+        }
+        return {content: `@${Localize.translateLocal('common.hidden')}`, accountID};
+    });
+
+    const lastMention = mentions.pop();
+    if (!lastMention) {
+        return [];
+    }
+
+    if (mentions.length === 0) {
+        messageElements.push({
+            kind: 'userMention',
+            content: lastMention.content,
+            accountID: lastMention.accountID,
+        });
+    } else if (mentions.length === 1) {
+        messageElements.push(
+            {
+                kind: 'userMention',
+                content: mentions[0].content,
+                accountID: mentions[0].accountID,
+            },
+            {
+                kind: 'text',
+                content: ` ${Localize.translateLocal('common.and')} `,
+            },
+            {
+                kind: 'userMention',
+                content: lastMention.content,
+                accountID: lastMention.accountID,
+            },
+        );
+    } else {
+        mentions.forEach((mention) => {
+            messageElements.push(
+                {
+                    kind: 'userMention',
+                    accountID: mention.accountID,
+                    content: `${mention.content}`,
+                },
+                {
+                    kind: 'text',
+                    content: `, `,
+                },
+            );
+        });
+
+        messageElements.push(
+            {
+                kind: 'text',
+                content: `${Localize.translateLocal('common.and')} `,
+            },
+            {
+                kind: 'userMention',
+                content: lastMention.content,
+                accountID: lastMention.accountID,
+            },
+        );
+    }
+
+    const roomName = originalMessage?.roomName;
+    if (roomName) {
+        const preposition = isInviteAction ? ` ${Localize.translateLocal('workspace.invite.to')} ` : ` ${Localize.translateLocal('workspace.invite.from')} `;
+
+        if (originalMessage.reportID) {
+            messageElements.push(
+                {
+                    kind: 'text',
+                    content: preposition,
+                },
+                {
+                    kind: 'roomReference',
+                    roomName,
+                    roomID: originalMessage.reportID,
+                    content: roomName,
+                },
+            );
+        }
+    }
+
+    return messageElements;
+}
+
+function getMemberChangeMessageFragment(reportAction: OnyxEntry<ReportAction>): Message {
+    const messageElements: MemberChangeMessageElement[] = getMemberChangeMessageElements(reportAction);
+    const html = messageElements
+        .map((messageElement) => {
+            switch (messageElement.kind) {
+                case 'userMention':
+                    return `<mention-user accountID=${messageElement.accountID}></mention-user>`;
+                case 'roomReference':
+                    return `<a href="${environmentURL}/r/${messageElement.roomID}" target="_blank">${messageElement.roomName}</a>`;
+                default:
+                    return messageElement.content;
+            }
+        })
+        .join('');
+
+    return {
+        html: `<muted-text>${html}</muted-text>`,
+        text: reportAction?.message ? reportAction?.message[0].text : '',
+        type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
+    };
+}
+
+/**
+ * Return room channel log message
+ *
+ * @param {Object} reportAction
+ * @returns {String}
+ */
+
+function getMemberChangeMessagePlainText(reportAction: OnyxEntry<ReportAction>): string {
+    const messageElements = getMemberChangeMessageElements(reportAction);
+    return messageElements.map((element) => element.content).join('');
+}
+
 /**
  * Helper method to determine if the provided accountID has made a request on the specified report.
  *
@@ -697,7 +866,9 @@ export {
     shouldReportActionBeVisibleAsLastAction,
     hasRequestFromCurrentAccount,
     getFirstVisibleReportActionID,
-    isChannelLogMemberAction,
+    isMemberChangeAction,
+    getMemberChangeMessageFragment,
+    getMemberChangeMessagePlainText,
 };
 
 export type {LastVisibleMessage};

src/libs/ReportUtils.ts

@@ -16,7 +16,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Transaction} from '@src/types/onyx';
 import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
-import {ChangeLog, IOUMessage, OriginalMessageActionName} from '@src/types/onyx/OriginalMessage';
+import {IOUMessage, OriginalMessageActionName} from '@src/types/onyx/OriginalMessage';
 import {Message, ReportActions} from '@src/types/onyx/ReportAction';
 import {Receipt, WaypointCollection} from '@src/types/onyx/Transaction';
 import DeepValueOf from '@src/types/utils/DeepValueOf';
@@ -4138,44 +4138,6 @@ function isReportDraft(report: OnyxEntry<Report>): boolean {
     return isExpenseReport(report) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS.OPEN;
 }
 
-/**
- * Return room channel log display message
- */
-function getChannelLogMemberMessage(reportAction: OnyxEntry<ReportAction>): string {
-    const verb =
-        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
-            ? 'invited'
-            : 'removed';
-
-    const mentions = (reportAction?.originalMessage as ChangeLog)?.targetAccountIDs?.map(() => {
-        const personalDetail = allPersonalDetails?.accountID;
-        const displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? '') || (personalDetail?.displayName ?? '') || Localize.translateLocal('common.hidden');
-        return `@${displayNameOrLogin}`;
-    });
-
-    const lastMention = mentions?.pop();
-    let message = '';
-
-    if (mentions?.length === 0) {
-        message = `${verb} ${lastMention}`;
-    } else if (mentions?.length === 1) {
-        message = `${verb} ${mentions?.[0]} and ${lastMention}`;
-    } else {
-        message = `${verb} ${mentions?.join(', ')}, and ${lastMention}`;
-    }
-
-    const roomName = (reportAction?.originalMessage as ChangeLog)?.roomName ?? '';
-    if (roomName) {
-        const preposition =
-            reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
-                ? ' to'
-                : ' from';
-        message += `${preposition} ${roomName}`;
-    }
-
-    return message;
-}
-
 /**
  * Checks if a report is a group chat.
  *
@@ -4377,7 +4339,6 @@ export {
     parseReportRouteParams,
     getReimbursementQueuedActionMessage,
     getPersonalDetailsForAccountID,
-    getChannelLogMemberMessage,
     getRoom,
     shouldDisableWelcomeMessage,
     canEditWriteCapability,

src/libs/SidebarUtils.ts

@@ -375,17 +375,17 @@ function getOptionData(
             const targetAccountIDs = lastAction?.originalMessage?.targetAccountIDs ?? [];
             const verb =
                 lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
-                    ? 'invited'
-                    : 'removed';
-            const users = targetAccountIDs.length > 1 ? 'users' : 'user';
+                    ? Localize.translate(preferredLocale, 'workspace.invite.invited')
+                    : Localize.translate(preferredLocale, 'workspace.invite.removed');
+            const users = Localize.translate(preferredLocale, targetAccountIDs.length > 1 ? 'workspace.invite.users' : 'workspace.invite.user');
             result.alternateText = `${verb} ${targetAccountIDs.length} ${users}`;
 
             const roomName = lastAction?.originalMessage?.roomName ?? '';
             if (roomName) {
                 const preposition =
                     lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
-                        ? ' to'
-                        : ' from';
+                        ? ` ${Localize.translate(preferredLocale, 'workspace.invite.to')}`
+                        : ` ${Localize.translate(preferredLocale, 'workspace.invite.from')}`;
                 result.alternateText += `${preposition} ${roomName}`;
             }
         } else if (lastAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lastActorDisplayName && lastMessageTextFromReport) {

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -281,8 +281,8 @@ export default [
                 } else if (ReportActionsUtils.isMoneyRequestAction(reportAction)) {
                     const displayMessage = ReportUtils.getIOUReportActionDisplayMessage(reportAction);
                     Clipboard.setString(displayMessage);
-                } else if (ReportActionsUtils.isChannelLogMemberAction(reportAction)) {
-                    const logMessage = ReportUtils.getChannelLogMemberMessage(reportAction);
+                } else if (ReportActionsUtils.isMemberChangeAction(reportAction)) {
+                    const logMessage = ReportActionsUtils.getMemberChangeMessagePlainText(reportAction);
                     Clipboard.setString(logMessage);
                 } else if (content) {
                     const parser = new ExpensiMark();

src/pages/home/report/ReportActionItemMessage.js

@@ -8,6 +8,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import TextCommentFragment from './comment/TextCommentFragment';
 import ReportActionItemFragment from './ReportActionItemFragment';
 import reportActionPropTypes from './reportActionPropTypes';
 
@@ -40,6 +41,20 @@ function ReportActionItemMessage(props) {
     const styles = useThemeStyles();
     const fragments = _.compact(props.action.previousMessage || props.action.message);
     const isIOUReport = ReportActionsUtils.isMoneyRequestAction(props.action);
+    if (ReportActionsUtils.isMemberChangeAction(props.action)) {
+        const fragment = ReportActionsUtils.getMemberChangeMessageFragment(props.action);
+
+        return (
+            <TextCommentFragment
+                fragment={fragment}
+                displayAsGroup={props.displayAsGroup}
+                style={props.style}
+                source=""
+                styleAsDeleted={false}
+            />
+        );
+    }
+
     let iouMessage;
     if (isIOUReport) {
         const iouReportID = lodashGet(props.action, 'originalMessage.IOUReportID');