Merge pull request #3498 from rushatgabhane/decline-IOU-feedback

Decline/cancel IOU feedback.
Expensify · Jun 17, 2021 · fedf555 · fedf555
2 parents 5394fc8 + beb9ebc
commit fedf555
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
@@ -90,6 +90,9 @@ export default {
     // Indicates which locale should be used
     PREFERRED_LOCALE: 'preferredLocale',
 
+    // List of transactionIDs in process of rejection
+    TRANSACTIONS_BEING_REJECTED: 'transactionsBeingRejected',
+
     // User's Expensify Wallet
     USER_WALLET: 'userWallet',
 

diff --git a/src/components/ReportTransaction.js b/src/components/ReportTransaction.js
@@ -1,7 +1,14 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Text, View, Pressable} from 'react-native';
+import lodashGet from 'lodash/get';
+import {
+    Text, View, Pressable, ActivityIndicator,
+} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
 import {rejectTransaction} from '../libs/actions/IOU';
 import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
 import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle';
@@ -23,6 +30,15 @@ const propTypes = {
 
     /** Text label for the reject transaction button */
     rejectButtonLabelText: PropTypes.string.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,
+    }),
 };
 
 const defaultProps = {
@@ -45,6 +61,19 @@ class ReportTransaction extends Component {
         });
     }
 
+    /**
+     * 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);
+    }
+
     render() {
         return (
             <View styles={[styles.mb5]}>
@@ -63,10 +92,24 @@ class ReportTransaction extends Component {
                                 styles.buttonSmall,
                                 styles.chatItemComposeSecondaryRowOffset,
                                 styles.mb3,
+                                styles.w20,
                             ]}
                             onPress={this.rejectTransaction}
                         >
-                            <Text style={[styles.buttonSmallText]}>{this.props.rejectButtonLabelText}</Text>
+                            {
+                            this.isBeingRejected()
+                                ? (
+                                    <ActivityIndicator
+                                        color={themeColors.text}
+                                        style={[styles.flex1]}
+                                    />
+                                )
+                                : (
+                                    <Text style={[styles.buttonSmallText]}>
+                                        {this.props.rejectButtonLabelText}
+                                    </Text>
+                                )
+                            }
                         </Pressable>
                     </View>
                 )}
@@ -78,4 +121,8 @@ class ReportTransaction extends Component {
 ReportTransaction.displayName = 'ReportTransaction';
 ReportTransaction.defaultProps = defaultProps;
 ReportTransaction.propTypes = propTypes;
-export default ReportTransaction;
+export default withOnyx({
+    transactionsBeingRejected: {
+        key: ONYXKEYS.TRANSACTIONS_BEING_REJECTED,
+    },
+})(ReportTransaction);
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
@@ -123,6 +123,9 @@ function createIOUSplit(params) {
 function rejectTransaction({
     reportID, chatReportID, transactionID, comment,
 }) {
+    Onyx.merge(ONYXKEYS.TRANSACTIONS_BEING_REJECTED, {
+        [transactionID]: true,
+    });
     API.RejectTransaction({
         reportID,
         transactionID,
@@ -141,7 +144,13 @@ function rejectTransaction({
             // we should also sync the chatReport after fetching the iouReport.
             fetchIOUReportByIDAndUpdateChatReport(reportID, chatReportID);
         })
-        .catch(error => console.error(`Error rejecting transaction: ${error}`));
+        .catch(error => console.error(`Error rejecting transaction: ${error}`))
+        .finally(() => {
+            // setting as null deletes the tranactionID
+            Onyx.merge(ONYXKEYS.TRANSACTIONS_BEING_REJECTED, {
+                [transactionID]: null,
+            });
+        });
 }
 
 /**

diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js
@@ -16,6 +16,10 @@ export default {
         width: '50%',
     },
 
+    w20: {
+        width: '20%',
+    },
+
     mwn: {
         maxWidth: 'auto',
     },