Add Red Brick Road Offline Handling to Payments List

src/components/MenuItem.js

@@ -121,7 +121,7 @@ const MenuItem = props => (
                     </View>
                 </View>
                 <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
-                    {props.badgeText && <Badge text={props.badgeText} badgeStyles={[styles.alignSelfCenter]} />}
+                    {props.badgeText && <Badge text={props.badgeText} badgeStyles={[styles.alignSelfCenter, (props.brickRoadIndicator ? styles.mr2 : undefined)]} />}
                     {/* Since subtitle can be of type number, we should allow 0 to be shown */}
                     {(props.subtitle || props.subtitle === 0) && (
                         <View style={[styles.justifyContentCenter, styles.mr1]}>

src/components/OfflineWithFeedback.js

@@ -38,18 +38,25 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
-    /** Additional styles to add after local styles. Applied to Pressable portion of button */
+    /** Additional styles to add after local styles. Applied to the parent container */
     style: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.object),
         PropTypes.object,
     ]),
+
+    /** Additional styles to add after local styles.  Applied to the error text portion */
+    errorStyle: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.object,
+    ]),
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     pendingAction: null,
     errors: null,
     style: [],
+    errorStyle: [],
 };
 
 /**
@@ -97,7 +104,7 @@ const OfflineWithFeedback = (props) => {
                 </View>
             )}
             {hasErrors && (
-                <View style={styles.offlineFeedback.error}>
+                <View style={[styles.offlineFeedback.error, props.errorStyle]}>
                     <View style={styles.offlineFeedback.errorDot}>
                         <Icon src={Expensicons.DotIndicator} fill={colors.red} height={variables.iconSizeSmall} width={variables.iconSizeSmall} />
                     </View>

src/libs/PaymentUtils.js

@@ -58,6 +58,8 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '',
             accountType: CONST.PAYMENT_METHODS.BANK_ACCOUNT,
             accountData: _.extend({}, bankAccount, {icon}),
             isDefault,
+            errors: bankAccount.errors || null,
+            pendingAction: bankAccount.pendingAction || null,
         });
     });
 

src/libs/actions/PaymentMethods.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import {createRef} from 'react';
 import lodashGet from 'lodash/get';
+import lodashMerge from 'lodash/merge';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as DeprecatedAPI from '../deprecatedAPI';
@@ -311,6 +312,42 @@ function dismissSuccessfulTransferBalancePage() {
     Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
 }
 
+/**
+ * Looks through each payment method to see if there is an existing error
+ * @param {Object} bankList
+ * @param {Object} cardList
+ * @returns {Boolean}
+ */
+function hasPaymentMethodError(bankList, cardList) {
+    const combinedPaymentMethods = lodashMerge(bankList, cardList);
+    return _.some(combinedPaymentMethods, item => !_.isEmpty(item.errors));
+}
+
+/**
+ * Clears the error for the specified payment item
+ * @param {String} paymentList The onyx key for the provided payment method
+ * @param {String} paymentMethodID
+ */
+function clearDeletePaymentMethodError(paymentList, paymentMethodID) {
+    Onyx.merge(paymentList, {
+        [paymentMethodID]: {
+            pendingAction: null,
+            errors: null,
+        },
+    });
+}
+
+/**
+ * If there was a failure adding a payment method, clearing it removes the payment method from the list entirely
+ * @param {String} paymentList The onyx key for the provided payment method
+ * @param {String} paymentMethodID
+ */
+function clearAddPaymentMethodError(paymentList, paymentMethodID) {
+    Onyx.merge(paymentList, {
+        [paymentMethodID]: null,
+    });
+}
+
 export {
     deleteDebitCard,
     deletePayPalMe,
@@ -327,4 +364,7 @@ export {
     saveWalletTransferAccountTypeAndID,
     saveWalletTransferMethodType,
     cleanLocalReimbursementData,
+    hasPaymentMethodError,
+    clearDeletePaymentMethodError,
+    clearAddPaymentMethodError,
 };

src/pages/settings/InitialSettingsPage.js

@@ -26,6 +26,9 @@ import * as App from '../../libs/actions/App';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
 import * as Policy from '../../libs/actions/Policy';
 import policyMemberPropType from '../policyMemberPropType';
+import * as PaymentMethods from '../../libs/actions/PaymentMethods';
+import bankAccountPropTypes from '../../components/bankAccountPropTypes';
+import cardPropTypes from '../../components/cardPropTypes';
 
 const propTypes = {
     /* Onyx Props */
@@ -60,6 +63,12 @@ const propTypes = {
         currentBalance: PropTypes.number,
     }),
 
+    /** List of bank accounts */
+    bankAccountList: PropTypes.objectOf(bankAccountPropTypes),
+
+    /** List of cards */
+    cardList: PropTypes.objectOf(cardPropTypes),
+
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -78,39 +87,6 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const defaultMenuItems = [
-    {
-        translationKey: 'common.profile',
-        icon: Expensicons.Profile,
-        action: () => { App.openProfile(); },
-    },
-    {
-        translationKey: 'common.preferences',
-        icon: Expensicons.Gear,
-        action: () => { Navigation.navigate(ROUTES.SETTINGS_PREFERENCES); },
-    },
-    {
-        translationKey: 'initialSettingsPage.security',
-        icon: Expensicons.Lock,
-        action: () => { Navigation.navigate(ROUTES.SETTINGS_SECURITY); },
-    },
-    {
-        translationKey: 'common.payments',
-        icon: Expensicons.Wallet,
-        action: () => { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); },
-    },
-    {
-        translationKey: 'initialSettingsPage.about',
-        icon: Expensicons.Info,
-        action: () => { Navigation.navigate(ROUTES.SETTINGS_ABOUT); },
-    },
-    {
-        translationKey: 'initialSettingsPage.signOut',
-        icon: Expensicons.Exit,
-        action: Session.signOutAndRedirectToSignIn,
-    },
-];
-
 const InitialSettingsPage = (props) => {
     const walletBalance = props.numberFormat(
         props.userWallet.currentBalance / 100, // Divide by 100 because balance is in cents
@@ -124,6 +100,40 @@ const InitialSettingsPage = (props) => {
         return null;
     }
 
+    const defaultMenuItems = [
+        {
+            translationKey: 'common.profile',
+            icon: Expensicons.Profile,
+            action: () => { App.openProfile(); },
+        },
+        {
+            translationKey: 'common.preferences',
+            icon: Expensicons.Gear,
+            action: () => { Navigation.navigate(ROUTES.SETTINGS_PREFERENCES); },
+        },
+        {
+            translationKey: 'initialSettingsPage.security',
+            icon: Expensicons.Lock,
+            action: () => { Navigation.navigate(ROUTES.SETTINGS_SECURITY); },
+        },
+        {
+            translationKey: 'common.payments',
+            icon: Expensicons.Wallet,
+            action: () => { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); },
+            brickRoadIndicator: PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList) ? 'error' : null,
+        },
+        {
+            translationKey: 'initialSettingsPage.about',
+            icon: Expensicons.Info,
+            action: () => { Navigation.navigate(ROUTES.SETTINGS_ABOUT); },
+        },
+        {
+            translationKey: 'initialSettingsPage.signOut',
+            icon: Expensicons.Exit,
+            action: Session.signOutAndRedirectToSignIn,
+        },
+    ];
+
     // Add free policies (workspaces) to the list of menu items
     const menuItems = _.chain(props.policies)
         .filter(policy => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN)
@@ -225,5 +235,11 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        bankAccountList: {
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+        },
+        cardList: {
+            key: ONYXKEYS.CARD_LIST,
+        },
     }),
 )(InitialSettingsPage);

src/pages/settings/Payments/PaymentMethodList.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {FlatList} from 'react-native';
+import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
@@ -17,6 +18,8 @@ import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
 import cardPropTypes from '../../../components/cardPropTypes';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
 import FormAlertWrapper from '../../../components/FormAlertWrapper';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
+import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 
 const MENU_ITEM = 'menuItem';
 const BUTTON = 'button';
@@ -164,6 +167,20 @@ class PaymentMethodList extends Component {
         return combinedPaymentMethods;
     }
 
+    /**
+     * Dismisses the error on the payment method
+     * @param {*} item
+     */
+    dismissError(item) {
+        const paymentList = item.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.CARD_LIST;
+        const paymentID = item.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? lodashGet(item, ['accountData', 'bankAccountID']) : lodashGet(item, ['accountData', 'cardID']);
+        if (item.pendingAction === 'delete') {
+            PaymentMethods.clearDeletePaymentMethodError(paymentList, paymentID);
+        } else {
+            PaymentMethods.clearAddPaymentMethodError(paymentList, paymentID);
+        }
+    }
+
     /**
      * @param {Object} paymentMethod
      * @param {String|Number} paymentMethod.methodID
@@ -185,20 +202,22 @@ class PaymentMethodList extends Component {
     renderItem({item}) {
         if (item.type === MENU_ITEM) {
             return (
-                <MenuItem
-                    onPress={item.onPress}
-                    title={item.title}
-                    description={item.description}
-                    icon={item.icon}
-                    disabled={item.disabled}
-                    iconFill={item.iconFill}
-                    iconHeight={item.iconSize}
-                    iconWidth={item.iconSize}
-                    badgeText={this.getDefaultBadgeText(item.isDefault)}
-                    wrapperStyle={item.wrapperStyle}
-                    shouldShowSelectedState={this.props.shouldShowSelectedState}
-                    isSelected={this.props.selectedMethodID === item.methodID}
-                />
+                <OfflineWithFeedback onClose={() => this.dismissError(item)} pendingAction={item.pendingAction} errors={item.errors} errorStyle={styles.ph6}>
+                    <MenuItem
+                        onPress={item.onPress}
+                        title={item.title}
+                        description={item.description}
+                        icon={item.icon}
+                        disabled={item.disabled}
+                        iconFill={item.iconFill}
+                        iconHeight={item.iconSize}
+                        iconWidth={item.iconSize}
+                        badgeText={this.getDefaultBadgeText(item.isDefault)}
+                        wrapperStyle={item.wrapperStyle}
+                        shouldShowSelectedState={this.props.shouldShowSelectedState}
+                        isSelected={this.props.selectedMethodID === item.methodID}
+                    />
+                </OfflineWithFeedback>
             );
         }
         if (item.type === BUTTON) {