Refactor RejectTransaction to CancelIOUTransaction

src/CONST.js

@@ -661,6 +661,8 @@ const CONST = {
             PAY: 'pay',
             CREATE: 'create',
             SPLIT: 'split',
+            DECLINE: 'decline',
+            CANCEL: 'cancel',
         },
         AMOUNT_MAX_LENGTH: 10,
     },

src/components/KYCWall/kycWallPropTypes.js

@@ -24,15 +24,15 @@ const propTypes = {
     userWallet: userWalletPropTypes,
 
     /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
-    chatReportID: PropTypes.number,
+    chatReportID: PropTypes.string,
 };
 
 const defaultProps = {
     userWallet: {},
     popoverPlacement: 'top',
     shouldListenForResize: false,
     isDisabled: false,
-    chatReportID: 0,
+    chatReportID: '',
 };
 
 export {propTypes, defaultProps};

src/components/ReportTransaction.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
+import CONST from '../CONST';
 import * as IOU from '../libs/actions/IOU';
+import * as ReportActions from '../libs/actions/ReportActions';
 import reportActionPropTypes from '../pages/home/report/reportActionPropTypes';
 import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import OfflineWithFeedback from './OfflineWithFeedback';
 import Text from './Text';
 import Button from './Button';
 
@@ -27,17 +27,10 @@ const propTypes = {
     /** Can this transaction be rejected? */
     canBeRejected: PropTypes.bool,
 
-    /** Text label for the reject transaction button */
-    rejectButtonLabelText: PropTypes.string.isRequired,
+    /** Type of the reject transaction button */
+    rejectButtonType: PropTypes.oneOf([CONST.IOU.REPORT_ACTION_TYPE.DECLINE, CONST.IOU.REPORT_ACTION_TYPE.CANCEL]).isRequired,
 
-    /* Onyx Props */
-
-    /** List of transactionIDs in process of rejection */
-    /* eslint-disable-next-line react/no-unused-prop-types, react/require-default-props */
-    transactionsBeingRejected: PropTypes.shape({
-        /** IOUTransactionID that's being rejected */
-        transactionID: PropTypes.bool,
-    }),
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -48,62 +41,57 @@ class ReportTransaction extends Component {
     constructor(props) {
         super(props);
 
-        this.rejectTransaction = this.rejectTransaction.bind(this);
-    }
-
-    rejectTransaction() {
-        IOU.rejectTransaction({
-            reportID: this.props.iouReportID,
-            chatReportID: this.props.chatReportID,
-            transactionID: this.props.action.originalMessage.IOUTransactionID,
-            comment: '',
-        });
+        this.cancelMoneyRequest = this.cancelMoneyRequest.bind(this);
     }
 
-    /**
-     * Checks if current IOUTransactionID is being rejected.
-     * @returns {boolean} Returns `true` if current IOUtransactionID is being rejected, else `false`.
-     */
-    isBeingRejected() {
-        const IOUTransactionID = lodashGet(this.props.action, 'originalMessage.IOUTransactionID', '');
-        const transactionsBeingRejected = lodashGet(this.props, 'transactionsBeingRejected', {});
-        if (_.isEmpty(transactionsBeingRejected)) {
-            return false;
-        }
-        return _.has(transactionsBeingRejected, IOUTransactionID);
+    cancelMoneyRequest() {
+        IOU.cancelMoneyRequest(
+            this.props.chatReportID,
+            this.props.iouReportID,
+            this.props.rejectButtonType,
+            this.props.action,
+        );
     }
 
     render() {
         return (
-            <View styles={[styles.mb5]}>
-                <ReportActionItemSingle
-                    action={this.props.action}
-                    wrapperStyles={[styles.reportTransactionWrapper]}
-                >
-                    <Text style={[styles.chatItemMessage]}>
-                        {this.props.action.message[0].text}
-                    </Text>
-                </ReportActionItemSingle>
-                {this.props.canBeRejected && (
-                    <View style={[styles.flexRow, styles.justifyContentStart]}>
-                        <Button
-                            small
-                            text={this.props.rejectButtonLabelText}
-                            style={[styles.mb3, styles.chatItemComposeSecondaryRowOffset]}
-                            onPress={this.rejectTransaction}
-                            isLoading={this.isBeingRejected()}
-                        />
-                    </View>
-                )}
-            </View>
+            <OfflineWithFeedback
+                onClose={() => {
+                    if (this.props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
+                        ReportActions.deleteOptimisticReportAction(this.props.chatReportID, this.props.action.sequenceNumber);
+                    } else {
+                        ReportActions.clearReportActionErrors(this.props.chatReportID, this.props.action.sequenceNumber);
+                    }
+                }}
+                pendingAction={this.props.action.pendingAction}
+                errors={this.props.action.errors}
+                errorRowStyles={[styles.ml10, styles.mr2]}
+            >
+                <View styles={[styles.mb5]}>
+                    <ReportActionItemSingle
+                        action={this.props.action}
+                        wrapperStyles={[styles.reportTransactionWrapper]}
+                    >
+                        <Text style={[styles.chatItemMessage]}>
+                            {this.props.action.message[0].text}
+                        </Text>
+                    </ReportActionItemSingle>
+                    {this.props.canBeRejected && (
+                        <View style={[styles.flexRow, styles.justifyContentStart]}>
+                            <Button
+                                small
+                                text={this.props.translate(`common.${this.props.rejectButtonType}`)}
+                                style={[styles.mb3, styles.chatItemComposeSecondaryRowOffset]}
+                                onPress={this.cancelMoneyRequest}
+                            />
+                        </View>
+                    )}
+                </View>
+            </OfflineWithFeedback>
         );
     }
 }
 
 ReportTransaction.defaultProps = defaultProps;
 ReportTransaction.propTypes = propTypes;
-export default withOnyx({
-    transactionsBeingRejected: {
-        key: ONYXKEYS.TRANSACTIONS_BEING_REJECTED,
-    },
-})(ReportTransaction);
+export default withLocalize(ReportTransaction);

src/components/SettlementButton.js

@@ -28,15 +28,15 @@ const propTypes = {
     network: networkPropTypes.isRequired,
 
     /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
-    chatReportID: PropTypes.number,
+    chatReportID: PropTypes.string,
 
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     currency: CONST.CURRENCY.USD,
     shouldShowPaypal: false,
-    chatReportID: 0,
+    chatReportID: '',
 };
 
 class SettlementButton extends React.Component {

src/languages/en.js

@@ -262,6 +262,7 @@ export default {
             invalidSplit: 'Split amounts do not equal total amount',
             other: 'Unexpected error, please try again later',
             genericCreateFailureMessage: 'Unexpected error requesting money, please try again later',
+            genericCancelFailureMessage: ({type}) => `Unexpected error ${type === 'decline' ? 'declining' : 'cancelling'} the money request, please try again later`,
         },
     },
     notificationPreferences: {

src/languages/es.js

@@ -262,6 +262,8 @@ export default {
             invalidSplit: 'La suma de las partes no equivale al monto total',
             other: 'Error inesperado, por favor inténtalo más tarde',
             genericCreateFailureMessage: 'Error inesperado solicitando dinero, por favor inténtalo más tarde',
+            genericCancelFailureMessage: ({type}) => `Error inesperado al ${type === 'decline' ? 'rechazar' : 'cancelar'} la solicitud de dinero, por favor inténtalo más tarde`,
+
         },
     },
     notificationPreferences: {

src/libs/ReportUtils.js

@@ -702,18 +702,27 @@ function buildOptimisticIOUReport(ownerEmail, userEmail, total, chatReportID, cu
  */
 function getIOUReportActionMessage(type, total, participants, comment, currency) {
     const amount = NumberFormatUtils.format(preferredLocale, total / 100, {style: 'currency', currency});
-    const displayNames = _.map(participants, participant => getDisplayNameForParticipant(participant.login, true) || participant.login);
-    const from = displayNames.length < 3
+    const displayNames = _.map(participants, participant => getDisplayNameForParticipant(participant.login, true));
+    const who = displayNames.length < 3
         ? displayNames.join(' and ')
         : `${displayNames.slice(0, -1).join(', ')}, and ${_.last(displayNames)}`;
 
     let iouMessage;
     switch (type) {
         case CONST.IOU.REPORT_ACTION_TYPE.CREATE:
-            iouMessage = `Requested ${amount} from ${from}${comment && ` for ${comment}`}`;
+            iouMessage = `Requested ${amount} from ${who}${comment && ` for ${comment}`}`;
             break;
         case CONST.IOU.REPORT_ACTION_TYPE.SPLIT:
-            iouMessage = `Split ${amount} with ${from}${comment && ` for ${comment}`}`;
+            iouMessage = `Split ${amount} with ${who}${comment && ` for ${comment}`}`;
+            break;
+        case CONST.IOU.REPORT_ACTION_TYPE.CANCEL:
+            iouMessage = `Cancelled the ${amount} request${comment && ` for ${comment}`}`;
+            break;
+        case CONST.IOU.REPORT_ACTION_TYPE.DECLINE:
+            iouMessage = `Declined the ${amount} request${comment && ` for ${comment}`}`;
+            break;
+        case CONST.IOU.REPORT_ACTION_TYPE.PAY:
+            iouMessage = `Paid ${amount} to ${who}${comment && ` for ${comment}`}`;
             break;
         default:
             break;
@@ -733,7 +742,7 @@ function getIOUReportActionMessage(type, total, participants, comment, currency)
  * @param {Number} sequenceNumber - Caller is responsible for providing a best guess at what the next sequenceNumber will be.
  * @param {String} type - IOUReportAction type. Can be oneOf(create, decline, cancel, pay, split).
  * @param {Number} amount - IOU amount in cents.
- * @param {String} currency - IOU currency.
+ * @param {String} currency
  * @param {String} comment - User comment for the IOU.
  * @param {Array}  participants - An array with participants details.
  * @param {String} paymentType - Only required if the IOUReportAction type is 'pay'. Can be oneOf(elsewhere, payPal, Expensify).