Merge pull request #21246 from Expensify/revert-21240-revert-20738-yu…

…wen-copilot Show the Copilot details if a delegate is set in a report action
Expensify · Jun 29, 2023 · 76a8a98 · 76a8a98
2 parents 3ee1200 + f34e94d
commit 76a8a98
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 21 deletions.
diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js
@@ -9,33 +9,49 @@ import Tooltip from '../Tooltip';
 import {propTypes, defaultProps} from './userDetailsTooltipPropTypes';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
+import withLocalize from '../withLocalize';
+import compose from '../../libs/compose';
 import * as UserUtils from '../../libs/UserUtils';
 
 function UserDetailsTooltip(props) {
     const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails);
+    let userDisplayName = userDetails.displayName ? userDetails.displayName.trim() : '';
+    let userLogin = (userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : '';
+    let userAvatar = userDetails.avatar;
+    let userAccountID = props.accountID;
+
+    // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
+    // the Copilot feature is implemented.
+    if (props.delegateAccountID) {
+        const delegateUserDetails = lodashGet(props.personalDetailsList, props.delegateAccountID, {});
+        const delegateUserDisplayName = delegateUserDetails.displayName ? delegateUserDetails.displayName.trim() : '';
+        userDisplayName = `${delegateUserDisplayName} (${props.translate('reportAction.asCopilot')} ${userDisplayName})`;
+        userLogin = delegateUserDetails.login;
+        userAvatar = delegateUserDetails.avatar;
+        userAccountID = props.delegateAccountID;
+    }
+
     const renderTooltipContent = useCallback(
         () => (
             <View style={[styles.alignItemsCenter, styles.ph2, styles.pv2]}>
                 <View style={styles.emptyAvatar}>
                     <Avatar
                         containerStyles={[styles.actionAvatar]}
-                        source={UserUtils.getAvatar(userDetails.avatar, userDetails.accountID)}
+                        source={UserUtils.getAvatar(userAvatar, userAccountID)}
                     />
                 </View>
 
-                <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>
-                    {String(userDetails.displayName).trim() ? userDetails.displayName : ''}
-                </Text>
+                <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{userDisplayName}</Text>
 
                 <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>
-                    {String(userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : ''}
+                    {(userLogin || '').trim() && !_.isEqual(userLogin, userDisplayName) ? Str.removeSMSDomain(userLogin) : ''}
                 </Text>
             </View>
         ),
-        [userDetails.avatar, userDetails.displayName, userDetails.login, userDetails.accountID],
+        [userAvatar, userDisplayName, userLogin, userAccountID],
     );
 
-    if (!userDetails.displayName && !userDetails.login) {
+    if (!userDisplayName && !userLogin) {
         return props.children;
     }
 
@@ -46,8 +62,11 @@ UserDetailsTooltip.propTypes = propTypes;
 UserDetailsTooltip.defaultProps = defaultProps;
 UserDetailsTooltip.displayName = 'UserDetailsTooltip';
 
-export default withOnyx({
-    personalDetailsList: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-})(UserDetailsTooltip);
+export default compose(
+    withLocalize,
+    withOnyx({
+        personalDetailsList: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+    }),
+)(UserDetailsTooltip);
diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import personalDetailsPropType from '../../pages/personalDetailsPropType';
+import {withLocalizePropTypes} from '../withLocalize';
 
 const propTypes = {
     /** User's Account ID */
@@ -17,12 +18,19 @@ const propTypes = {
     children: PropTypes.node.isRequired,
     /** List of personalDetails (keyed by accountID)  */
     personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
+
+    /** The accountID of the copilot who took this action on behalf of the user */
+    delegateAccountID: PropTypes.number,
+
+    /** Localization props */
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     accountID: '',
     fallbackUserDetails: {displayName: '', login: '', avatar: ''},
     personalDetailsList: {},
+    delegateAccountID: 0,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -297,6 +297,9 @@ export default {
         sayHello: 'Say hello!',
         usePlusButton: '\n\nYou can also use the + button below to send or request money!',
     },
+    reportAction: {
+        asCopilot: 'as copilot for',
+    },
     mentionSuggestions: {
         hereAlternateText: 'Notify everyone online in this room',
     },

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -296,6 +296,9 @@ export default {
         sayHello: '¡Saluda!',
         usePlusButton: '\n\n¡También puedes usar el botón + de abajo para enviar o pedir dinero!',
     },
+    reportAction: {
+        asCopilot: 'como copiloto de',
+    },
     mentionSuggestions: {
         hereAlternateText: 'Notificar a todos los que estén en linea de esta sala',
     },

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -57,6 +57,9 @@ const propTypes = {
     // Additional styles to add after local styles
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
+    /** The accountID of the copilot who took this action on behalf of the user */
+    delegateAccountID: PropTypes.number,
+
     ...windowDimensionsPropTypes,
 
     /** localization props */
@@ -75,6 +78,7 @@ const defaultProps = {
     isSingleLine: false,
     source: '',
     style: [],
+    delegateAccountID: 0,
 };
 
 function ReportActionItemFragment(props) {
@@ -145,7 +149,10 @@ function ReportActionItemFragment(props) {
         }
         case 'TEXT':
             return (
-                <UserDetailsTooltip accountID={props.accountID}>
+                <UserDetailsTooltip
+                    accountID={props.accountID}
+                    delegateAccountID={props.delegateAccountID}
+                >
                     <Text
                         numberOfLines={props.isSingleLine ? 1 : undefined}
                         style={[styles.chatItemMessageHeaderSender, props.isSingleLine ? styles.pre : styles.preWrap]}

diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
@@ -72,12 +72,25 @@ const showWorkspaceDetails = (reportID) => {
 
 function ReportActionItemSingle(props) {
     const actorAccountID = props.action.actorAccountID;
+    let {displayName} = props.personalDetailsList[actorAccountID] || {};
+    const {avatar, pendingFields} = props.personalDetailsList[actorAccountID] || {};
+    let actorHint = lodashGet(props.action, 'actorEmail', '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(props.report) && !actorAccountID;
-    const actorDetails = props.personalDetailsList[actorAccountID] || {};
-    const displayName = isWorkspaceActor ? ReportUtils.getPolicyName(props.report) : actorDetails.displayName;
-    const actorHint = isWorkspaceActor ? displayName : lodashGet(props.action, 'actorEmail', '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
-    const pendingFields = isWorkspaceActor ? {} : actorDetails.pendingFields;
-    const avatarSource = isWorkspaceActor ? ReportUtils.getWorkspaceAvatar(props.report) : UserUtils.getAvatar(actorDetails.avatar, actorAccountID);
+    let avatarSource = UserUtils.getAvatar(avatar, actorAccountID);
+
+    if (isWorkspaceActor) {
+        displayName = ReportUtils.getPolicyName(props.report);
+        actorHint = displayName;
+        avatarSource = ReportUtils.getWorkspaceAvatar(props.report);
+    } else if (props.action.delegateAccountID) {
+        // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
+        // the Copilot feature is implemented.
+        const delegateDetails = props.personalDetailsList[props.action.delegateAccountID];
+        const delegateDisplayName = delegateDetails.displayName;
+        actorHint = `${delegateDisplayName} (${props.translate('reportAction.asCopilot')} ${displayName})`;
+        displayName = actorHint;
+        avatarSource = UserUtils.getAvatar(delegateDetails.avatar, props.action.delegateAccountID);
+    }
 
     // Since the display name for a report action message is delivered with the report history as an array of fragments
     // we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
@@ -95,9 +108,9 @@ function ReportActionItemSingle(props) {
         if (isWorkspaceActor) {
             showWorkspaceDetails(props.report.reportID);
         } else {
-            showUserDetails(actorAccountID);
+            showUserDetails(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID);
         }
-    }, [isWorkspaceActor, props.report.reportID, actorAccountID]);
+    }, [isWorkspaceActor, props.report.reportID, actorAccountID, props.action.delegateAccountID]);
 
     return (
         <View style={props.wrapperStyles}>
@@ -119,7 +132,10 @@ function ReportActionItemSingle(props) {
                             noMargin
                         />
                     ) : (
-                        <UserDetailsTooltip accountID={actorAccountID}>
+                        <UserDetailsTooltip
+                            accountID={actorAccountID}
+                            delegateAccountID={props.action.delegateAccountID}
+                        >
                             <View>
                                 <Avatar
                                     containerStyles={[styles.actionAvatar]}
@@ -148,6 +164,7 @@ function ReportActionItemSingle(props) {
                                     fragment={fragment}
                                     isAttachment={props.action.isAttachment}
                                     isLoading={props.action.isLoading}
+                                    delegateAccountID={props.action.delegateAccountID}
                                     isSingleLine
                                 />
                             ))}