Disable go to profile page for optimistic user

src/components/MoneyRequestConfirmationList.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import styles from '../styles/styles';
+import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import OptionsSelector from './OptionsSelector';
 import ONYXKEYS from '../ONYXKEYS';
@@ -140,7 +141,14 @@ function MoneyRequestConfirmationList(props) {
         const unselectedParticipants = _.filter(props.selectedParticipants, (participant) => !participant.selected);
         if (props.hasMultipleParticipants) {
             const formattedSelectedParticipants = getParticipantsWithAmount(selectedParticipants);
-            const formattedParticipantsList = _.union(formattedSelectedParticipants, unselectedParticipants);
+            let formattedParticipantsList = _.union(formattedSelectedParticipants, unselectedParticipants);
+
+            if (!canModifyParticipants) {
+                formattedParticipantsList = _.map(formattedParticipantsList, (participant) => ({
+                    ...participant,
+                    isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),
+                }));
+            }
 
             const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, props.iouAmount, true);
             const formattedPayeeOption = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(
@@ -164,9 +172,13 @@ function MoneyRequestConfirmationList(props) {
                 },
             );
         } else {
+            const formattedSelectedParticipants = _.map(props.selectedParticipants, (participant) => ({
+                ...participant,
+                isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),
+            }));
             sections.push({
                 title: translate('common.to'),
-                data: props.selectedParticipants,
+                data: formattedSelectedParticipants,
                 shouldShow: true,
                 indexOffset: 0,
             });
@@ -182,6 +194,7 @@ function MoneyRequestConfirmationList(props) {
         payeePersonalDetails,
         translate,
         shouldDisablePaidBySection,
+        canModifyParticipants,
     ]);
 
     const selectedOptions = useMemo(() => {

src/components/OptionsList/BaseOptionsList.js

@@ -160,7 +160,7 @@ class BaseOptionsList extends Component {
      * @return {Component}
      */
     renderItem({item, index, section}) {
-        const isDisabled = this.props.isDisabled || section.isDisabled;
+        const isDisabled = this.props.isDisabled || section.isDisabled || !!item.isDisabled;
         return (
             <OptionRow
                 option={item}

src/components/ReportWelcomeText.js

@@ -99,12 +99,16 @@ function ReportWelcomeText(props) {
                         {_.map(displayNamesWithTooltips, ({displayName, pronouns, accountID}, index) => (
                             <Text key={`${displayName}${pronouns}${index}`}>
                                 <UserDetailsTooltip accountID={accountID}>
-                                    <Text
-                                        style={[styles.textStrong]}
-                                        onPress={() => Navigation.navigate(ROUTES.getProfileRoute(accountID))}
-                                    >
-                                        {displayName}
-                                    </Text>
+                                    {ReportUtils.isOptimisticPersonalDetail(accountID) ? (
+                                        <Text style={[styles.textStrong]}>{displayName}</Text>
+                                    ) : (
+                                        <Text
+                                            style={[styles.textStrong]}
+                                            onPress={() => Navigation.navigate(ROUTES.getProfileRoute(accountID))}
+                                        >
+                                            {displayName}
+                                        </Text>
+                                    )}
                                 </UserDetailsTooltip>
                                 {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
                                 {index === displayNamesWithTooltips.length - 1 && <Text>.</Text>}

src/libs/ReportUtils.js

@@ -396,6 +396,26 @@ function getBankAccountRoute(report) {
     return isPolicyExpenseChat(report) ? ROUTES.getBankAccountRoute('', report.policyID) : ROUTES.SETTINGS_ADD_BANK_ACCOUNT;
 }
 
+/**
+ * Check if personal detail of accountID is empty or optimistic data
+ * @param {String} accountID user accountID
+ * @returns {Boolean}
+ */
+function isOptimisticPersonalDetail(accountID) {
+    return _.isEmpty(allPersonalDetails[accountID]) || !!allPersonalDetails[accountID].isOptimisticPersonalDetail;
+}
+
+/**
+ * Check if report is a DM and personal detail of participant is optimistic data
+ * @param {String} report
+ * @returns {Boolean}
+ */
+function shouldDisableDetailPage(report) {
+    const participants = lodashGet(report, 'participantAccountIDs', []);
+    const isMultipleParticipant = participants.length > 1;
+    return !isMultipleParticipant && isOptimisticPersonalDetail(participants[0]) && !report.parentReportID;
+}
+
 /**
  * Checks if a report is a task report from a policy expense chat.
  *
@@ -2879,6 +2899,8 @@ export {
     getAllPolicyReports,
     getIOUReportActionMessage,
     getDisplayNameForParticipant,
+    isOptimisticPersonalDetail,
+    shouldDisableDetailPage,
     isChatReport,
     isCurrentUserSubmitter,
     isExpenseReport,

src/libs/actions/Report.js

@@ -475,6 +475,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p
                 accountID,
                 avatar: UserUtils.getDefaultAvatarURL(accountID),
                 displayName: login,
+                isOptimisticPersonalDetail: true,
             };
 
             failurePersonalDetails[accountID] = allPersonalDetails[accountID] || null;

src/pages/ReportParticipantsPage.js

@@ -86,7 +86,10 @@ const getAllParticipants = (report, personalDetails, translate) => {
 };
 
 function ReportParticipantsPage(props) {
-    const participants = getAllParticipants(props.report, props.personalDetails, props.translate);
+    const participants = _.map(getAllParticipants(props.report, props.personalDetails, props.translate), (participant) => ({
+        ...participant,
+        isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),
+    }));
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>

src/pages/home/HeaderView.js

@@ -134,6 +134,7 @@ function HeaderView(props) {
     const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
     const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
+    const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
     return (
         <View
@@ -164,7 +165,7 @@ function HeaderView(props) {
                         <PressableWithoutFeedback
                             onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
                             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
-                            disabled={isTaskReport && !ReportUtils.isOpenTaskReport(props.report)}
+                            disabled={(isTaskReport && !ReportUtils.isOpenTaskReport(props.report)) || shouldDisableDetailPage}
                             accessibilityLabel={title}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >

src/pages/home/report/ReportActionItemCreated.js

@@ -53,6 +53,7 @@ function ReportActionItemCreated(props) {
     }
 
     const icons = ReportUtils.getIcons(props.report, props.personalDetails);
+    const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
     return (
         <OfflineWithFeedback
@@ -77,6 +78,7 @@ function ReportActionItemCreated(props) {
                         style={[styles.mh5, styles.mb3, styles.alignSelfStart]}
                         accessibilityLabel={props.translate('common.details')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        disabled={shouldDisableDetailPage}
                     >
                         <MultipleAvatars
                             icons={icons}

src/pages/home/report/ReportActionItemSingle.js

@@ -1,5 +1,5 @@
 import lodashGet from 'lodash/get';
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -113,13 +113,19 @@ function ReportActionItemSingle(props) {
         }
     }, [isWorkspaceActor, props.report.reportID, actorAccountID, props.action.delegateAccountID]);
 
+    const shouldDisableDetailPage = useMemo(
+        () => !isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID),
+        [props.action, isWorkspaceActor, actorAccountID],
+    );
+
     return (
         <View style={props.wrapperStyles}>
             <PressableWithoutFeedback
                 style={[styles.alignSelfStart, styles.mr3]}
                 onPressIn={ControlSelection.block}
                 onPressOut={ControlSelection.unblock}
                 onPress={showActorDetails}
+                disabled={shouldDisableDetailPage}
                 accessibilityLabel={actorHint}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >
@@ -158,6 +164,7 @@ function ReportActionItemSingle(props) {
                             onPressIn={ControlSelection.block}
                             onPressOut={ControlSelection.unblock}
                             onPress={showActorDetails}
+                            disabled={shouldDisableDetailPage}
                             accessibilityLabel={actorHint}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >