Merge pull request #10322 from Expensify/maria-make-default-payment-m…

…ethod

Handling display of errors when MakeDefaultPaymentMethod fails

src/components/AvatarWithIndicator.js

@@ -10,6 +10,7 @@ import ONYXKEYS from '../ONYXKEYS';
 import policyMemberPropType from '../pages/policyMemberPropType';
 import bankAccountPropTypes from './bankAccountPropTypes';
 import cardPropTypes from './cardPropTypes';
+import userWalletPropTypes from '../pages/EnablePayments/userWalletPropTypes';
 import * as Policy from '../libs/actions/Policy';
 import * as PaymentMethods from '../libs/actions/PaymentMethods';
 
@@ -31,6 +32,9 @@ const propTypes = {
 
     /** List of cards */
     cardList: PropTypes.objectOf(cardPropTypes),
+
+    /** The user's wallet (coming from Onyx) */
+    userWallet: PropTypes.objectOf(userWalletPropTypes),
 };
 
 const defaultProps = {
@@ -39,6 +43,7 @@ const defaultProps = {
     policiesMemberList: {},
     bankAccountList: {},
     cardList: {},
+    userWallet: {},
 };
 
 const AvatarWithIndicator = (props) => {
@@ -51,6 +56,7 @@ const AvatarWithIndicator = (props) => {
 
     const hasPolicyMemberError = _.some(props.policiesMemberList, policyMembers => Policy.hasPolicyMemberError(policyMembers));
     const hasPaymentMethodError = PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList);
+    const hasWalletError = !_.isEmpty(props.userWallet.errors);
     return (
         <View style={[isLarge ? styles.avatarLarge : styles.sidebarAvatar]}>
             <Tooltip text={props.tooltipText}>
@@ -59,7 +65,7 @@ const AvatarWithIndicator = (props) => {
                     source={props.source}
                     size={props.size}
                 />
-                {(hasPolicyMemberError || hasPaymentMethodError) && (
+                {(hasPolicyMemberError || hasPaymentMethodError || hasWalletError) && (
                     <View style={StyleSheet.flatten(indicatorStyles)} />
                 )}
             </Tooltip>
@@ -81,4 +87,7 @@ export default withOnyx({
     cardList: {
         key: ONYXKEYS.CARD_LIST,
     },
+    userWallet: {
+        key: ONYXKEYS.USER_WALLET,
+    },
 })(AvatarWithIndicator);

src/components/KYCWall/kycWallPropTypes.js

@@ -20,11 +20,11 @@ const propTypes = {
     /** Wrapped components should be disabled, and not in spinner/loading state */
     isDisabled: PropTypes.bool,
 
-    ...userWalletPropTypes,
+    /** The user's wallet */
+    userWallet: PropTypes.objectOf(userWalletPropTypes),
 };
 
 const defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
     userWallet: {},
     popoverPlacement: 'top',
     shouldListenForResize: false,

src/libs/actions/PaymentMethods.js

@@ -133,6 +133,7 @@ function makeDefaultPaymentMethod(password, bankAccountID, fundID, previousPayme
                 value: {
                     walletLinkedAccountID: bankAccountID || fundID,
                     walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD,
+                    errors: null,
                 },
             },
         ],
@@ -313,6 +314,13 @@ function clearAddPaymentMethodError(paymentListKey, paymentMethodID) {
     });
 }
 
+/**
+ * Clear any error(s) related to the user's wallet
+ */
+function clearWalletError() {
+    Onyx.merge(ONYXKEYS.USER_WALLET, {errors: null});
+}
+
 function deletePaymentCard(fundID) {
     API.write('DeletePaymentCard', {
         fundID,
@@ -346,4 +354,5 @@ export {
     hasPaymentMethodError,
     clearDeletePaymentMethodError,
     clearAddPaymentMethodError,
+    clearWalletError,
 };

src/pages/EnablePayments/ActivateStep.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -11,7 +12,9 @@ import Text from '../../components/Text';
 
 const propTypes = {
     ...withLocalizePropTypes,
-    ...userWalletPropTypes,
+
+    /** The user's wallet */
+    userWallet: PropTypes.objectOf(userWalletPropTypes),
 };
 
 const defaultProps = {

src/pages/EnablePayments/EnablePaymentsPage.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -20,17 +21,19 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import FailedKYC from './FailedKYC';
 import compose from '../../libs/compose';
-import withLocalize from '../../components/withLocalize';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 
 const propTypes = {
     /** Information about the network from Onyx */
     network: networkPropTypes.isRequired,
 
-    ...userWalletPropTypes,
+    /** The user's wallet */
+    userWallet: PropTypes.objectOf(userWalletPropTypes),
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
-    // eslint-disable-next-line react/default-props-match-prop-types
     userWallet: {},
 };
 

src/pages/EnablePayments/userWalletPropTypes.js

@@ -1,15 +1,22 @@
 import PropTypes from 'prop-types';
 
-export default {
-    /** User's wallet information */
-    userWallet: PropTypes.shape({
-        /** What step in the activation flow are we on? */
-        currentStep: PropTypes.string,
-
-        /** Status of wallet - e.g. SILVER or GOLD */
-        tierName: PropTypes.string,
-
-        /** Error code returned by the server */
-        errorCode: PropTypes.string,
-    }),
-};
+/** User's wallet information */
+export default PropTypes.shape({
+    /** The user's available wallet balance */
+    availableBalance: PropTypes.number,
+
+    /** The user's current wallet balance */
+    currentBalance: PropTypes.number,
+
+    /** What step in the activation flow are we on? */
+    currentStep: PropTypes.string,
+
+    /** Error code returned by the server */
+    errorCode: PropTypes.string,
+
+    /** If we should show the FailedKYC view after the user submitted their info with a non fixable error */
+    shouldShowFailedKYC: PropTypes.bool,
+
+    /** Status of wallet - e.g. SILVER or GOLD */
+    tierName: PropTypes.string,
+});

src/pages/settings/InitialSettingsPage.js

@@ -120,7 +120,7 @@ const InitialSettingsPage = (props) => {
             translationKey: 'common.payments',
             icon: Expensicons.Wallet,
             action: () => { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); },
-            brickRoadIndicator: PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList) ? 'error' : null,
+            brickRoadIndicator: PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList) || !_.isEmpty(props.userWallet.errors) ? 'error' : null,
         },
         {
             translationKey: 'initialSettingsPage.about',

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

@@ -32,6 +32,7 @@ import KYCWall from '../../../../components/KYCWall';
 import {propTypes, defaultProps} from './paymentsPagePropTypes';
 import {withNetwork} from '../../../../components/OnyxProvider';
 import * as PaymentUtils from '../../../../libs/PaymentUtils';
+import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
@@ -433,6 +434,7 @@ class BasePaymentsPage extends React.Component {
                     shouldShowCancelButton
                     danger
                 />
+                <OfflineWithFeedback onClose={() => PaymentMethods.clearWalletError()} errors={this.props.userWallet.errors} errorRowStyles={[styles.ph6, styles.pv2]} />
             </ScreenWrapper>
         );
     }

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

@@ -5,6 +5,7 @@ import {windowDimensionsPropTypes} from '../../../../components/withWindowDimens
 import networkPropTypes from '../../../../components/networkPropTypes';
 import bankAccountPropTypes from '../../../../components/bankAccountPropTypes';
 import cardPropTypes from '../../../../components/cardPropTypes';
+import userWalletPropTypes from '../../../EnablePayments/userWalletPropTypes';
 
 const propTypes = {
     /** Wallet balance transfer props */
@@ -20,10 +21,7 @@ const propTypes = {
     shouldListenForResize: PropTypes.bool,
 
     /** The user's wallet account */
-    userWallet: PropTypes.shape({
-        /** The user's current wallet balance */
-        currentBalance: PropTypes.number,
-    }),
+    userWallet: PropTypes.objectOf(userWalletPropTypes),
 
     /** Information about the network */
     network: networkPropTypes.isRequired,

src/pages/settings/Payments/TransferBalancePage.js

@@ -32,7 +32,7 @@ import {withNetwork} from '../../../components/OnyxProvider';
 
 const propTypes = {
     /** User's wallet information */
-    userWallet: userWalletPropTypes.userWallet,
+    userWallet: PropTypes.objectOf(userWalletPropTypes),
 
     /** List of bank accounts */
     bankAccountList: PropTypes.objectOf(PropTypes.shape({