From 1f847702d8c3ae1dca5ee34938310e0adc3393f0 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Tue, 4 Oct 2022 13:24:44 -0700 Subject: [PATCH 01/47] Add loading indicator --- .../settings/Payments/PaymentMethodList.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index f924e5a7ee8d..0c084523545a 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {FlatList} from 'react-native'; +import {ActivityIndicator, FlatList} from 'react-native'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; @@ -22,6 +22,7 @@ import FormAlertWrapper from '../../../components/FormAlertWrapper'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import * as PaymentMethods from '../../../libs/actions/PaymentMethods'; import Log from '../../../libs/Log'; +import themeColors from '../../../styles/themes/default'; const propTypes = { /** What to do when a menu item is pressed */ @@ -210,12 +211,16 @@ class PaymentMethodList extends Component { render() { return ( <> - item.key} - ListEmptyComponent={this.renderListEmptyComponent()} - /> + {this.props.isLoadingPaymentMethods ? ( + + ) : ( + item.key} + ListEmptyComponent={this.renderListEmptyComponent()} + /> + )} { this.props.shouldShowAddPaymentMethodButton && ( @@ -256,6 +261,9 @@ export default compose( cardList: { key: ONYXKEYS.CARD_LIST, }, + isLoadingPaymentMethods: { + key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, + }, payPalMeData: { key: ONYXKEYS.PAYPAL, }, From af531b996de0bf226da5233491fed9d91c36d4a5 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Tue, 4 Oct 2022 13:54:59 -0700 Subject: [PATCH 02/47] avoid offline --- src/pages/settings/Payments/PaymentMethodList.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 0c084523545a..fa5740256d0a 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -13,6 +13,7 @@ import compose from '../../../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import ONYXKEYS from '../../../ONYXKEYS'; import CONST from '../../../CONST'; +import {withNetwork} from '../../../components/OnyxProvider'; import * as Expensicons from '../../../components/Icon/Expensicons'; import bankAccountPropTypes from '../../../components/bankAccountPropTypes'; import paypalMeDataPropTypes from '../../../components/paypalMeDataPropTypes'; @@ -211,7 +212,7 @@ class PaymentMethodList extends Component { render() { return ( <> - {this.props.isLoadingPaymentMethods ? ( + {this.props.isLoadingPaymentMethods && !this.props.network.isOffline ? ( ) : ( Date: Mon, 21 Nov 2022 16:36:57 -0800 Subject: [PATCH 03/47] use view to push button down --- src/pages/settings/Payments/PaymentMethodList.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 2747139f06fd..2fd0d8f08647 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {ActivityIndicator, FlatList} from 'react-native'; +import {ActivityIndicator, FlatList, ScrollView} from 'react-native'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; @@ -213,7 +213,9 @@ class PaymentMethodList extends Component { return ( <> {this.props.isLoadingPaymentMethods && !this.props.network.isOffline ? ( - + + + ) : ( Date: Tue, 22 Nov 2022 16:37:32 -0800 Subject: [PATCH 04/47] add default --- .../settings/Payments/PaymentMethodList.js | 41 ++++++++----------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 2fd0d8f08647..e021df45a0e7 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -41,6 +41,9 @@ const propTypes = { /** Whether the add Payment button be shown on the list */ shouldShowAddPaymentMethodButton: PropTypes.bool, + /** Are we loading payment methods? */ + isLoadingPaymentMethods: PropTypes.bool, + /** Type to filter the payment Method list */ filterType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']), @@ -73,6 +76,7 @@ const defaultProps = { walletLinkedAccountID: 0, walletLinkedAccountType: '', }, + isLoadingPaymentMethods: true, shouldShowAddPaymentMethodButton: true, filterType: '', actionPaymentMethodType: '', @@ -224,29 +228,20 @@ class PaymentMethodList extends Component { ListEmptyComponent={this.renderListEmptyComponent()} /> )} - { - this.props.shouldShowAddPaymentMethodButton - && ( - - { - isOffline => ( -