'Settled' and 'cancelled' events should display in IOUDetails Modal

src/pages/iou/IOUDetailsModal.js

@@ -14,7 +14,6 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import {payIOUReport} from '../../libs/actions/IOU';
 import {fetchIOUReportByID} from '../../libs/actions/Report';
 import ReportActionItemIOUPreview from '../../components/ReportActionItemIOUPreview';
-import iouTransactionPropTypes from './iouTransactionPropTypes';
 import IOUTransactions from './IOUTransactions';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
@@ -53,9 +52,6 @@ const propTypes = {
         /** Owner is the person who is owed money */
         ownerEmail: PropTypes.string,
 
-        /** The IOU transactions */
-        transactions: PropTypes.arrayOf(PropTypes.shape(iouTransactionPropTypes)),
-
         /** Does the report have an outstanding IOU that needs to be paid? */
         hasOutstandingIOU: PropTypes.bool,
     }).isRequired,
@@ -116,7 +112,6 @@ class IOUDetailsModal extends Component {
                             <IOUTransactions
                                 chatReportID={Number(this.props.route.params.chatReportID)}
                                 iouReportID={Number(this.props.route.params.iouReportID)}
-                                transactions={this.props.iouReport.transactions}
                                 hasOutstandingIOU={this.props.iouReport.hasOutstandingIOU}
                             />
                         </ScrollView>

src/pages/iou/IOUTransactions.js

@@ -1,12 +1,11 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import ReportActionPropTypes from '../home/report/ReportActionPropTypes';
-import iouTransactionPropTypes from './iouTransactionPropTypes';
 import ReportTransaction from '../../components/ReportTransaction';
 
 const propTypes = {
@@ -18,65 +17,36 @@ const propTypes = {
 
     /** ReportID for the associated IOU report */
     iouReportID: PropTypes.number.isRequired,
-
-    /** Transactions for this IOU report */
-    transactions: PropTypes.arrayOf(PropTypes.shape(iouTransactionPropTypes)),
 };
 
 const defaultProps = {
     reportActions: {},
-    transactions: [],
 };
 
-class IOUTransactions extends Component {
-    constructor(props) {
-        super(props);
-
-        this.getActionForTransaction = this.getActionForTransaction.bind(this);
-    }
-
-    /**
-     * Given a transaction from an IOU Report, returns the chatReport action with a matching transactionID. Unless
-     * something has gone wrong with our storing logic, there should always exist an action for each transaction.
-     *
-     * @param {Object} transaction
-     * @returns {Object} action
-     */
-    getActionForTransaction(transaction) {
-        const matchedAction = _.find(this.props.reportActions, (action) => {
-            // iouReport.transaction.transactionID is returned as a String, but the originalMessage value is Number
-            if (action && action.originalMessage && action.originalMessage.IOUTransactionID
-                && action.originalMessage.IOUTransactionID.toString() === transaction.transactionID) {
-                return action;
+const IOUTransactions = ({
+    reportActions,
+    chatReportID,
+    iouReportID,
+}) => (
+    <View style={[styles.mt3]}>
+        {_.map(reportActions, (reportAction) => {
+            if (reportAction.actionName === 'IOU'
+                && reportAction.originalMessage.IOUReportID === iouReportID) {
+                // Cancelled/declined actions reuse the original transactionID, so we must make the key unique
+                const transactionKey = `${reportAction.originalMessage.IOUTransactionID}-
+                ${reportAction.originalMessage.type}`;
+                return (
+                    <ReportTransaction
+                        chatReportID={chatReportID}
+                        iouReportID={iouReportID}
+                        action={reportAction}
+                        key={transactionKey}
+                    />
+                );
             }
-            return false;
-        });
-        if (!matchedAction) {
-            throw new Error(`Unable to locate a matching report action for transaction ${transaction.transactionID}!`);
-        }
-
-        return matchedAction;
-    }
-
-    render() {
-        return (
-            <View style={[styles.mt3]}>
-                {/* For each IOU transaction, get the matching report action */}
-                {_.map(this.props.transactions, (transaction) => {
-                    const action = this.getActionForTransaction(transaction);
-                    return (
-                        <ReportTransaction
-                            chatReportID={this.props.chatReportID}
-                            iouReportID={this.props.iouReportID}
-                            action={action}
-                            key={action.originalMessage.IOUTransactionID}
-                        />
-                    );
-                })}
-            </View>
-        );
-    }
-}
+        })}
+    </View>
+);
 
 IOUTransactions.defaultProps = defaultProps;
 IOUTransactions.propTypes = propTypes;