disable go to profile page for optimistic user

Author: dukenv0307

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';
@@ -164,9 +165,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,
             });

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/OptionsListUtils.js

@@ -920,6 +920,7 @@ function getIOUConfirmationOptionsFromParticipants(participants, amountText) {
     return _.map(participants, (participant) => ({
         ...participant,
         descriptiveText: amountText,
+        isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),
     }));
 }
 

src/libs/ReportUtils.js

@@ -403,6 +403,15 @@ 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;
+}
+
 /**
  * Checks if a report is a task report from a policy expense chat.
  *
@@ -2841,6 +2850,7 @@ export {
     getAllPolicyReports,
     getIOUReportActionMessage,
     getDisplayNameForParticipant,
+    isOptimisticPersonalDetail,
     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 isOptimisticDetail = !isMultipleParticipant && ReportUtils.isOptimisticPersonalDetail(participants[0]) && !props.report.parentReportID;
 
     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)) || isOptimisticDetail}
                             accessibilityLabel={title}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >