Display report preview using new reportAction data source

src/CONST.js

@@ -469,6 +469,7 @@ const CONST = {
                 CHRONOSOOOLIST: 'CHRONOSOOOLIST',
                 TASKCOMPLETED: 'TASKCOMPLETED',
                 TASKREOPENED: 'TASKREOPENED',
+                REPORTPREVIEW: 'REPORTPREVIEW',
                 POLICYCHANGELOG: {
                     ADD_APPROVER_RULE: 'POLICYCHANGELOG_ADD_APPROVER_RULE',
                     ADD_CATEGORY: 'POLICYCHANGELOG_ADD_CATEGORY',

src/components/Pressable/PressableWithFeedback.js

@@ -46,10 +46,9 @@ const PressableWithFeedback = forwardRef((props, ref) => {
                         setDisabled(props.disabled);
                         return;
                     }
-                    onPress
-                        .finally(() => {
-                            setDisabled(props.disabled);
-                        });
+                    onPress.finally(() => {
+                        setDisabled(props.disabled);
+                    });
                 });
             }}
         >

src/components/ReportActionItem/IOUPreview.js

@@ -224,7 +224,6 @@ const IOUPreview = (props) => {
                             </View>
                         )}
                     </View>
-
                     <View style={[styles.flexRow]}>
                         <View style={[styles.flex1]}>
                             {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (

src/components/ReportActionItem/MoneyRequestAction.js

@@ -7,7 +7,6 @@ import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import {withNetwork} from '../OnyxProvider';
 import compose from '../../libs/compose';
-import ReportPreview from './ReportPreview';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import networkPropTypes from '../networkPropTypes';
 import iouReportPropTypes from '../../pages/iouReportPropTypes';
@@ -149,17 +148,6 @@ const MoneyRequestAction = (props) => {
                 containerStyles={[styles.cursorPointer, props.isHovered ? styles.iouPreviewBoxHover : undefined]}
                 isHovered={props.isHovered}
             />
-            {props.isMostRecentIOUReportAction && !hasMultipleParticipants && (
-                <ReportPreview
-                    action={props.action}
-                    chatReportID={props.chatReportID}
-                    iouReportID={props.requestReportID}
-                    contextMenuAnchor={props.contextMenuAnchor}
-                    onViewDetailsPressed={onIOUPreviewPressed}
-                    checkIfContextMenuActive={props.checkIfContextMenuActive}
-                    isHovered={props.isHovered}
-                />
-            )}
         </>
     );
 };

src/components/ReportActionItem/ReportPreview.js

@@ -12,18 +12,18 @@ import styles from '../../styles/styles';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
 import ControlSelection from '../../libs/ControlSelection';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import {showContextMenuForReport} from '../ShowContextMenuContext';
 import * as StyleUtils from '../../styles/StyleUtils';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import Button from '../Button';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import themeColors from '../../styles/themes/default';
 import getButtonState from '../../libs/getButtonState';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import ONYXKEYS from '../../ONYXKEYS';
 
 const propTypes = {
     /** All the data of the action */
@@ -36,6 +36,7 @@ const propTypes = {
     // eslint-disable-next-line react/no-unused-prop-types
     iouReportID: PropTypes.string.isRequired,
 
+    /* Onyx Props */
     /** chatReport associated with iouReport */
     chatReport: PropTypes.shape({
         /** The participants of this report */
@@ -72,9 +73,6 @@ const propTypes = {
     /** Popover context menu anchor, used for showing context menu */
     contextMenuAnchor: PropTypes.shape({current: PropTypes.elementType}),
 
-    /** Callback invoked when View Details is pressed */
-    onViewDetailsPressed: PropTypes.func,
-
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive: PropTypes.func,
 
@@ -89,7 +87,6 @@ const defaultProps = {
     isHovered: false,
     chatReport: {},
     iouReport: {},
-    onViewDetailsPressed: () => {},
     checkIfContextMenuActive: () => {},
     session: {
         email: null,
@@ -106,7 +103,9 @@ const ReportPreview = (props) => {
             {_.map(props.action.message, (index) => (
                 <Pressable
                     key={`ReportPreview-${props.action.reportActionID}-${index}`}
-                    onPress={props.onViewDetailsPressed}
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.getReportRoute(props.iouReportID));
+                    }}
                     onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={() => ControlSelection.unblock()}
                     onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}

src/libs/ReportActionsUtils.js

@@ -100,6 +100,10 @@ function getSortedReportActions(reportActions, shouldSortInDescendingOrder = fal
             if ((first.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED || second.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) && first.actionName !== second.actionName) {
                 return (first.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED ? -1 : 1) * invertedMultiplier;
             }
+            // Ensure that `REPORTPREVIEW` actions always come after if they have the same timestamp as another action type
+            if ((first.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW || second.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW) && first.actionName !== second.actionName) {
+                return (first.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW ? 1 : -1) * invertedMultiplier;
+            }
 
             // Then fallback on reportActionID as the final sorting criteria. It is a random number,
             // but using this will ensure that the order of reportActions with the same created time and action type
@@ -333,6 +337,18 @@ function getLinkedTransactionID(reportID, reportActionID) {
     return reportAction.originalMessage.IOUTransactionID;
 }
 
+/**
+ * @param {*} chatReportID
+ * @param {*} iouReportID
+ * @returns {Object} The report preview action or `null` if one couldn't be found
+ */
+function getReportPreviewAction(chatReportID, iouReportID) {
+    return _.find(
+        allReportActions[chatReportID],
+        (reportAction) => reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lodashGet(reportAction, 'originalMessage.linkedReportID') === iouReportID,
+    );
+}
+
 function isCreatedTaskReportAction(reportAction) {
     return reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && _.has(reportAction.originalMessage, 'taskReportID');
 }
@@ -351,6 +367,7 @@ export {
     getLatestReportActionFromOnyxData,
     isMoneyRequestAction,
     getLinkedTransactionID,
+    getReportPreviewAction,
     isCreatedTaskReportAction,
     getParentReportAction,
     isTransactionThread,

src/libs/ReportUtils.js

@@ -1427,6 +1427,29 @@ function buildOptimisticIOUReportAction(type, amount, currency, comment, partici
     };
 }
 
+function buildOptimisticReportPreview(reportID, iouReportID, payeeAccountID) {
+    return {
+        reportActionID: NumberUtils.rand64(),
+        reportID,
+        created: DateUtils.getDBTime(),
+        actionName: CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW,
+        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+        accountID: payeeAccountID,
+        message: [
+            {
+                html: '',
+                text: '',
+                isEdited: false,
+                type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
+            },
+        ],
+        originalMessage: {
+            linkedReportID: iouReportID,
+        },
+        actorEmail: currentUserEmail,
+    };
+}
+
 function buildOptimisticTaskReportAction(taskReportID, actionName, message = '') {
     const originalMessage = {
         taskReportID,
@@ -2219,6 +2242,7 @@ export {
     buildOptimisticIOUReport,
     buildOptimisticExpenseReport,
     buildOptimisticIOUReportAction,
+    buildOptimisticReportPreview,
     buildOptimisticTaskReportAction,
     buildOptimisticAddCommentReportAction,
     buildOptimisticTaskCommentReportAction,