Display the message for last requests with foreign currency that are created in offline mode

src/components/ReportActionItem/MoneyRequestAction.js

@@ -34,9 +34,6 @@ const propTypes = {
     /** The ID of the associated request report */
     requestReportID: PropTypes.string.isRequired,
 
-    /** Is this IOUACTION the most recent? */
-    isMostRecentIOUReportAction: PropTypes.bool.isRequired,
-
     /** Popover context menu anchor, used for showing context menu */
     contextMenuAnchor: refPropTypes,
 
@@ -81,7 +78,6 @@ function MoneyRequestAction({
     action,
     chatReportID,
     requestReportID,
-    isMostRecentIOUReportAction,
     contextMenuAnchor,
     checkIfContextMenuActive,
     chatReport,
@@ -119,15 +115,8 @@ function MoneyRequestAction({
     let shouldShowPendingConversionMessage = false;
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action);
     const isReversedTransaction = ReportActionsUtils.isReversedTransaction(action);
-    if (
-        !_.isEmpty(iouReport) &&
-        !_.isEmpty(reportActions) &&
-        chatReport.iouReportID &&
-        isMostRecentIOUReportAction &&
-        action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD &&
-        network.isOffline
-    ) {
-        shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(iouReport);
+    if (!_.isEmpty(iouReport) && !_.isEmpty(reportActions) && chatReport.iouReportID && action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && network.isOffline) {
+        shouldShowPendingConversionMessage = IOUUtils.isTransactionPendingCurrencyConversion(iouReport, (action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0);
     }
 
     return isDeletedParentAction || isReversedTransaction ? (

src/libs/IOUUtils.ts

@@ -110,12 +110,14 @@ function updateIOUOwnerAndTotal(iouReport: OnyxEntry<Report>, actorAccountID: nu
 }
 
 /**
- * Returns whether or not an IOU report contains money requests in a different currency
+ * Returns whether or not a transaction of IOU report contains money requests in a different currency
  * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet
  */
-function isIOUReportPendingCurrencyConversion(iouReport: Report): boolean {
+function isTransactionPendingCurrencyConversion(iouReport: Report, transactionID: string): boolean {
     const reportTransactions: Transaction[] = TransactionUtils.getAllReportTransactions(iouReport.reportID);
-    const pendingRequestsInDifferentCurrency = reportTransactions.filter((transaction) => transaction.pendingAction && TransactionUtils.getCurrency(transaction) !== iouReport.currency);
+    const pendingRequestsInDifferentCurrency = reportTransactions.filter(
+        (transaction) => transaction.pendingAction && transaction.transactionID === transactionID && TransactionUtils.getCurrency(transaction) !== iouReport.currency,
+    );
     return pendingRequestsInDifferentCurrency.length > 0;
 }
 
@@ -127,4 +129,4 @@ function isValidMoneyRequestType(iouType: string): boolean {
     return moneyRequestType.includes(iouType);
 }
 
-export {calculateAmount, updateIOUOwnerAndTotal, isIOUReportPendingCurrencyConversion, isValidMoneyRequestType, navigateToStartMoneyRequestStep, navigateToStartStepIfScanFileCannotBeRead};
+export {calculateAmount, updateIOUOwnerAndTotal, isTransactionPendingCurrencyConversion, isValidMoneyRequestType, navigateToStartMoneyRequestStep, navigateToStartStepIfScanFileCannotBeRead};

src/pages/home/report/ReportActionItem.js

@@ -89,9 +89,6 @@ const propTypes = {
     /** Should the comment have the appearance of being grouped with the previous comment? */
     displayAsGroup: PropTypes.bool.isRequired,
 
-    /** Is this the most recent IOU Action? */
-    isMostRecentIOUReportAction: PropTypes.bool.isRequired,
-
     /** Should we display the new marker on top of the comment? */
     shouldDisplayNewMarker: PropTypes.bool.isRequired,
 
@@ -346,10 +343,9 @@ function ReportActionItem(props) {
             const iouReportID = originalMessage.IOUReportID ? originalMessage.IOUReportID.toString() : '0';
             children = (
                 <MoneyRequestAction
-                    chatReportID={props.report.reportID}
+                    chatReportID={originalMessage.IOUReportID ? props.report.chatReportID : props.report.reportID}
                     requestReportID={iouReportID}
                     action={props.action}
-                    isMostRecentIOUReportAction={props.isMostRecentIOUReportAction}
                     isHovered={hovered}
                     contextMenuAnchor={popoverAnchorRef}
                     checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
@@ -815,7 +811,6 @@ export default compose(
         (prevProps, nextProps) =>
             prevProps.displayAsGroup === nextProps.displayAsGroup &&
             prevProps.draftMessage === nextProps.draftMessage &&
-            prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction &&
             prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker &&
             _.isEqual(prevProps.emojiReactions, nextProps.emojiReactions) &&
             _.isEqual(prevProps.action, nextProps.action) &&

src/pages/home/report/ReportActionItemParentAction.js

@@ -73,7 +73,6 @@ function ReportActionItemParentAction(props) {
                         report={props.report}
                         action={parentReportAction}
                         displayAsGroup={false}
-                        isMostRecentIOUReportAction={false}
                         shouldDisplayNewMarker={props.shouldDisplayNewMarker}
                         index={props.index}
                     />

src/pages/home/report/ReportActionsList.js

@@ -34,9 +34,6 @@ const propTypes = {
     /** Sorted actions prepared for display */
     sortedReportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)).isRequired,
 
-    /** The ID of the most recent IOU report action connected with the shown report */
-    mostRecentIOUReportActionID: PropTypes.string,
-
     /** The report metadata loading states */
     isLoadingInitialReportActions: PropTypes.bool,
 
@@ -73,7 +70,6 @@ const propTypes = {
 
 const defaultProps = {
     onScroll: () => {},
-    mostRecentIOUReportActionID: '',
     isLoadingInitialReportActions: false,
     isLoadingOlderReportActions: false,
     isLoadingNewerReportActions: false,
@@ -128,7 +124,6 @@ function ReportActionsList({
     sortedReportActions,
     windowHeight,
     onScroll,
-    mostRecentIOUReportActionID,
     isSmallScreenWidth,
     personalDetailsList,
     currentUserPersonalDetails,
@@ -414,12 +409,11 @@ function ReportActionsList({
                 report={report}
                 linkedReportActionID={linkedReportActionID}
                 displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(sortedReportActions, index)}
-                mostRecentIOUReportActionID={mostRecentIOUReportActionID}
                 shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                 shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)}
             />
         ),
-        [report, linkedReportActionID, sortedReportActions, mostRecentIOUReportActionID, shouldHideThreadDividerLine, shouldDisplayNewMarker],
+        [report, linkedReportActionID, sortedReportActions, shouldHideThreadDividerLine, shouldDisplayNewMarker],
     );
 
     // Native mobile does not render updates flatlist the changes even though component did update called.

src/pages/home/report/ReportActionsListItemRenderer.js

@@ -22,9 +22,6 @@ const propTypes = {
     /** Should the comment have the appearance of being grouped with the previous comment? */
     displayAsGroup: PropTypes.bool.isRequired,
 
-    /** The ID of the most recent IOU report action connected with the shown report */
-    mostRecentIOUReportActionID: PropTypes.string,
-
     /** If the thread divider line should be hidden */
     shouldHideThreadDividerLine: PropTypes.bool.isRequired,
 
@@ -36,20 +33,10 @@ const propTypes = {
 };
 
 const defaultProps = {
-    mostRecentIOUReportActionID: '',
     linkedReportActionID: '',
 };
 
-function ReportActionsListItemRenderer({
-    reportAction,
-    index,
-    report,
-    displayAsGroup,
-    mostRecentIOUReportActionID,
-    shouldHideThreadDividerLine,
-    shouldDisplayNewMarker,
-    linkedReportActionID,
-}) {
+function ReportActionsListItemRenderer({reportAction, index, report, displayAsGroup, shouldHideThreadDividerLine, shouldDisplayNewMarker, linkedReportActionID}) {
     const shouldDisplayParentAction =
         reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
         ReportUtils.isChatThread(report) &&
@@ -78,7 +65,6 @@ function ReportActionsListItemRenderer({
                     reportAction.actionName,
                 )
             }
-            isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
             index={index}
         />
     );

src/pages/home/report/ReportActionsView.js

@@ -14,7 +14,6 @@ import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
 import getIsReportFullyVisible from '@libs/getIsReportFullyVisible';
 import Performance from '@libs/Performance';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import {isUserCreatedPolicyRoom} from '@libs/ReportUtils';
 import {didUserLogInDuringSession} from '@libs/SessionUtils';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
@@ -87,8 +86,6 @@ function ReportActionsView(props) {
     const didSubscribeToReportTypingEvents = useRef(false);
     const isFirstRender = useRef(true);
     const hasCachedActions = useInitialValue(() => _.size(props.reportActions) > 0);
-    const mostRecentIOUReportActionID = useInitialValue(() => ReportActionsUtils.getMostRecentIOURequestActionID(props.reportActions));
-
     const prevNetworkRef = useRef(props.network);
     const prevAuthTokenType = usePrevious(props.session.authTokenType);
 
@@ -257,7 +254,6 @@ function ReportActionsView(props) {
                 report={props.report}
                 onLayout={recordTimeToMeasureItemLayout}
                 sortedReportActions={props.reportActions}
-                mostRecentIOUReportActionID={mostRecentIOUReportActionID}
                 loadOlderChats={loadOlderChats}
                 loadNewerChats={loadNewerChats}
                 isLoadingInitialReportActions={props.isLoadingInitialReportActions}

tests/unit/IOUUtilsTest.js

@@ -17,7 +17,7 @@ function initCurrencyList() {
 }
 
 describe('IOUUtils', () => {
-    describe('isIOUReportPendingCurrencyConversion', () => {
+    describe('isTransactionPendingCurrencyConversion', () => {
         beforeAll(() => {
             Onyx.init({
                 keys: ONYXKEYS,
@@ -34,7 +34,7 @@ describe('IOUUtils', () => {
                 [`${ONYXKEYS.COLLECTION.TRANSACTION}${aedPendingTransaction.transactionID}`]: aedPendingTransaction,
             }).then(() => {
                 // We requested money offline in a different currency, we don't know the total of the iouReport until we're back online
-                expect(IOUUtils.isIOUReportPendingCurrencyConversion(iouReport)).toBe(true);
+                expect(IOUUtils.isTransactionPendingCurrencyConversion(iouReport, aedPendingTransaction.transactionID)).toBe(true);
             });
         });
 
@@ -54,7 +54,7 @@ describe('IOUUtils', () => {
                 },
             }).then(() => {
                 // We requested money online in a different currency, we know the iouReport total and there's no need to show the pending conversion message
-                expect(IOUUtils.isIOUReportPendingCurrencyConversion(iouReport)).toBe(false);
+                expect(IOUUtils.isTransactionPendingCurrencyConversion(iouReport, aedPendingTransaction.transactionID)).toBe(false);
             });
         });
     });