diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index a3405a4ad919..2de828d4ef2e 100644 --- a/src/components/AvatarWithIndicator.js +++ b/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 ( @@ -59,7 +65,7 @@ const AvatarWithIndicator = (props) => { source={props.source} size={props.size} /> - {(hasPolicyMemberError || hasPaymentMethodError) && ( + {(hasPolicyMemberError || hasPaymentMethodError || hasWalletError) && ( )} @@ -81,4 +87,7 @@ export default withOnyx({ cardList: { key: ONYXKEYS.CARD_LIST, }, + userWallet: { + key: ONYXKEYS.USER_WALLET, + }, })(AvatarWithIndicator); diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js index 007199e33d32..d2d5933fbc73 100644 --- a/src/components/KYCWall/kycWallPropTypes.js +++ b/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, diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 46dc2a38a81f..9d648b489815 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/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, }; diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js index 0df8e2e38c4d..746afd43c7c3 100644 --- a/src/pages/EnablePayments/ActivateStep.js +++ b/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 = { diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js index f0a27c232888..0e15b668da6c 100644 --- a/src/pages/EnablePayments/EnablePaymentsPage.js +++ b/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: {}, }; diff --git a/src/pages/EnablePayments/userWalletPropTypes.js b/src/pages/EnablePayments/userWalletPropTypes.js index d134f9db3461..46bd33085890 100644 --- a/src/pages/EnablePayments/userWalletPropTypes.js +++ b/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, +}); diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index e2d105f5d2e1..785e00322716 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/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', diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 1d0dadc698de..148f27fa8672 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/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 /> + PaymentMethods.clearWalletError()} errors={this.props.userWallet.errors} errorRowStyles={[styles.ph6, styles.pv2]} /> ); } diff --git a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js index 8783a0e47249..53dca3d790c9 100644 --- a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js +++ b/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, diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 7cc1d6bc5e4f..7f97bb1ffb89 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/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({