Refactor SetWalletLinkedAccount

src/components/cardPropTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** The name of the institution (bank of america, etc) */
+    cardName: PropTypes.string,
+
+    /** The masked credit card number */
+    cardNumber: PropTypes.string,
+
+    /** The ID of the card in the cards DB */
+    cardID: PropTypes.number,
+});

src/libs/actions/PaymentMethods.js

@@ -4,6 +4,7 @@ import lodashGet from 'lodash/get';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as DeprecatedAPI from '../deprecatedAPI';
+import * as API from '../API';
 import CONST from '../../CONST';
 import Growl from '../Growl';
 import * as Localize from '../Localize';
@@ -109,41 +110,37 @@ function getPaymentMethods() {
  * @param {String} password
  * @param {Number} bankAccountID
  * @param {Number} fundID
+ * @param {Number} previousPaymentMethodID
+ * @param {String} previousPaymentMethodType
  *
- * @returns {Promise}
  */
-function setWalletLinkedAccount(password, bankAccountID, fundID) {
-    return DeprecatedAPI.SetWalletLinkedAccount({
+function makeDefaultPaymentMethod(password, bankAccountID, fundID, previousPaymentMethodID, previousPaymentMethodType) {
+    API.write('MakeDefaultPaymentMethod', {
         password,
         bankAccountID,
         fundID,
-    })
-        .then((response) => {
-            if (response.jsonCode === 200) {
-                Onyx.merge(ONYXKEYS.USER_WALLET, {
-                    walletLinkedAccountID: bankAccountID || fundID, walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD,
-                });
-                Growl.show(Localize.translateLocal('paymentsPage.setDefaultSuccess'), CONST.GROWL.SUCCESS, 5000);
-                return;
-            }
-
-            // Make sure to show user more specific errors which will help support identify the problem faster.
-            switch (response.message) {
-                case CONST.WALLET.ERROR.INVALID_WALLET:
-                case CONST.WALLET.ERROR.NOT_OWNER_OF_BANK_ACCOUNT:
-                    Growl.show(`${Localize.translateLocal('paymentsPage.error.notOwnerOfBankAccount')} ${Localize.translateLocal('common.conciergeHelp')}`, CONST.GROWL.ERROR, 5000);
-                    return;
-                case CONST.WALLET.ERROR.NOT_OWNER_OF_FUND:
-                case CONST.WALLET.ERROR.INVALID_FUND:
-                    Growl.show(`${Localize.translateLocal('paymentsPage.error.notOwnerOfFund')} ${Localize.translateLocal('common.conciergeHelp')}`, CONST.GROWL.ERROR, 5000);
-                    return;
-                case CONST.WALLET.ERROR.INVALID_BANK_ACCOUNT:
-                    Growl.show(`${Localize.translateLocal('paymentsPage.error.invalidBankAccount')} ${Localize.translateLocal('common.conciergeHelp')}`, CONST.GROWL.ERROR, 5000);
-                    return;
-                default:
-                    Growl.show(Localize.translateLocal('paymentsPage.error.setDefaultFailure'), CONST.GROWL.ERROR, 5000);
-            }
-        });
+    }, {
+        optimisticData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.USER_WALLET,
+                value: {
+                    walletLinkedAccountID: bankAccountID || fundID,
+                    walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD,
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.USER_WALLET,
+                value: {
+                    walletLinkedAccountID: previousPaymentMethodID,
+                    walletLinkedAccountType: previousPaymentMethodType,
+                },
+            },
+        ],
+    });
 }
 
 /**
@@ -277,7 +274,7 @@ export {
     deleteDebitCard,
     deletePayPalMe,
     getPaymentMethods,
-    setWalletLinkedAccount,
+    makeDefaultPaymentMethod,
     addBillingCard,
     kycWallRef,
     continueSetup,

src/libs/deprecatedAPI.js

@@ -377,19 +377,6 @@ function SetPassword(parameters) {
     return Network.post(commandName, parameters);
 }
 
-/**
- * @param {Object} parameters
- * @param {String} parameters.password
- * @param {String|null} parameters.bankAccountID
- * @param {String|null} parameters.fundID
- * @returns {Promise}
- */
-function SetWalletLinkedAccount(parameters) {
-    const commandName = 'SetWalletLinkedAccount';
-    requireParameters(['password'], parameters, commandName);
-    return Network.post(commandName, parameters);
-}
-
 /**
  * @param {Object} parameters
  * @param {String} parameters.message
@@ -880,7 +867,6 @@ export {
     ResetPassword,
     SetNameValuePair,
     SetPassword,
-    SetWalletLinkedAccount,
     UpdatePolicy,
     User_SignUp,
     User_Delete,

src/pages/settings/Payments/PaymentMethodList.js

@@ -14,6 +14,7 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import CONST from '../../../CONST';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
+import cardPropTypes from '../../../components/cardPropTypes';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
 import FormAlertWrapper from '../../../components/FormAlertWrapper';
 
@@ -31,16 +32,7 @@ const propTypes = {
     bankAccountList: PropTypes.objectOf(bankAccountPropTypes),
 
     /** List of cards */
-    cardList: PropTypes.objectOf(PropTypes.shape({
-        /** The name of the institution (bank of america, etc */
-        cardName: PropTypes.string,
-
-        /** The masked credit card number */
-        cardNumber: PropTypes.string,
-
-        /** The ID of the card in the cards DB */
-        cardID: PropTypes.number,
-    })),
+    cardList: PropTypes.objectOf(cardPropTypes),
 
     /** Whether the add Payment button be shown on the list */
     shouldShowAddPaymentMethodButton: PropTypes.bool,

src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

@@ -3,6 +3,8 @@ import {
     View, TouchableOpacity, Dimensions, InteractionManager, LayoutAnimation,
 } from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import PaymentMethodList from '../PaymentMethodList';
 import ROUTES from '../../../../ROUTES';
 import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
@@ -31,6 +33,7 @@ import ConfirmModal from '../../../../components/ConfirmModal';
 import KYCWall from '../../../../components/KYCWall';
 import {propTypes, defaultProps} from './paymentsPagePropTypes';
 import {withNetwork} from '../../../../components/OnyxProvider';
+import * as PaymentUtils from '../../../../libs/PaymentUtils';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
@@ -224,10 +227,20 @@ class BasePaymentsPage extends React.Component {
     }
 
     makeDefaultPaymentMethod(password) {
+        // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors
+        const paymentMethods = PaymentUtils.formatPaymentMethods(
+            this.props.bankAccountList,
+            this.props.cardList,
+            '',
+            this.props.userWallet,
+        );
+        const previousPaymentMethod = _.find(paymentMethods, method => method.isDefault);
+        const previousPaymentMethodID = lodashGet(previousPaymentMethod, 'methodID');
+        const previousPaymentMethodType = lodashGet(previousPaymentMethod, 'accountType');
         if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
-            PaymentMethods.setWalletLinkedAccount(password, this.state.selectedPaymentMethod.bankAccountID, null);
+            PaymentMethods.makeDefaultPaymentMethod(password, this.state.selectedPaymentMethod.bankAccountID, null, previousPaymentMethodID, previousPaymentMethodType);
         } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            PaymentMethods.setWalletLinkedAccount(password, null, this.state.selectedPaymentMethod.fundID);
+            PaymentMethods.makeDefaultPaymentMethod(password, null, this.state.selectedPaymentMethod.fundID, previousPaymentMethodID, previousPaymentMethodType);
         }
     }
 
@@ -458,5 +471,11 @@ export default compose(
         userWallet: {
             key: ONYXKEYS.USER_WALLET,
         },
+        bankAccountList: {
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+        },
+        cardList: {
+            key: ONYXKEYS.CARD_LIST,
+        },
     }),
 )(BasePaymentsPage);

src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js

@@ -3,6 +3,8 @@ import walletTransferPropTypes from '../walletTransferPropTypes';
 import {withLocalizePropTypes} from '../../../../components/withLocalize';
 import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 import networkPropTypes from '../../../../components/networkPropTypes';
+import bankAccountPropTypes from '../../../../components/bankAccountPropTypes';
+import cardPropTypes from '../../../../components/cardPropTypes';
 
 const propTypes = {
     /** Wallet balance transfer props */
@@ -26,6 +28,12 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** List of bank accounts */
+    bankAccountList: PropTypes.objectOf(bankAccountPropTypes),
+
+    /** List of cards */
+    cardList: PropTypes.objectOf(cardPropTypes),
+
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
@@ -39,6 +47,8 @@ const defaultProps = {
     isLoadingPaymentMethods: true,
     shouldListenForResize: false,
     userWallet: {},
+    bankAccountList: {},
+    cardList: {},
 };
 
 export {propTypes, defaultProps};

src/pages/settings/Payments/TransferBalancePage.js

@@ -22,6 +22,7 @@ import CurrentWalletBalance from '../../../components/CurrentWalletBalance';
 import walletTransferPropTypes from './walletTransferPropTypes';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
+import cardPropTypes from '../../../components/cardPropTypes';
 import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
 import ROUTES from '../../../ROUTES';
 
@@ -45,16 +46,7 @@ const propTypes = {
     })),
 
     /** List of card objects */
-    cardList: PropTypes.objectOf(PropTypes.shape({
-        /** The name of the institution (bank of america, etc) */
-        cardName: PropTypes.string,
-
-        /** The masked credit card number */
-        cardNumber: PropTypes.string,
-
-        /** The ID of the card in the cards DB */
-        cardID: PropTypes.number,
-    })),
+    cardList: PropTypes.objectOf(cardPropTypes),
 
     /** Wallet balance transfer props */
     walletTransfer: walletTransferPropTypes,