From ea015aaec425a1e074237b3f14f3bd27fd295bf6 Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Fri, 3 Feb 2023 22:55:30 +0530 Subject: [PATCH 1/7] Adding test proposal code to verify working fix --- .../Payments/PaymentsPage/BasePaymentsPage.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 9a480454eaf3..48f72ee48418 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -87,6 +87,27 @@ class BasePaymentsPage extends React.Component { this.debounceSetShouldShowLoadingSpinner(); } + if (this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt) { + // We can create 3 auxillary variables as requested but seems overkill here + let shouldResetPaymentMethodData = false; + if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT && _.isEmpty(this.props.bankAccountList[this.state.methodID])) { + shouldResetPaymentMethodData = true; + } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD && _.isEmpty(this.props.cardList[this.state.methodID])) { + shouldResetPaymentMethodData = true; + } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PAYPAL && this.props.payPalMeData !== prevProps.payPalMeData && _.isEmpty(this.props.payPalMeData)) { + shouldResetPaymentMethodData = true; + } + if (shouldResetPaymentMethodData) { + if (this.state.shouldShowDefaultDeleteMenu) { + this.hideDefaultDeleteMenu(); + } + if (this.state.shouldShowPasswordPrompt) { + this.hidePasswordPrompt(); + } + this.resetSelectedPaymentMethodData(); + } + } + // previously online OR currently offline, skip fetch if (!prevProps.network.isOffline || this.props.network.isOffline) { return; @@ -138,6 +159,21 @@ class BasePaymentsPage extends React.Component { }); } + resetSelectedPaymentMethodData() { + InteractionManager.runAfterInteractions(() => { + // Reset to same values as in the constructor + this.setState({ + isSelectedPaymentMethodDefault: false, + selectedPaymentMethod: {}, + formattedSelectedPaymentMethod: { + title: '', + }, + methodID: null, + selectedPaymentMethodType: null, + }); + }); + } + /** * Display the delete/default menu, or the add payment method menu * @@ -242,11 +278,13 @@ class BasePaymentsPage extends React.Component { this.setState({ showConfirmDeleteContent: false, }); + this.resetSelectedPaymentMethodData(); }); } hidePasswordPrompt() { this.setState({shouldShowPasswordPrompt: false}); + this.resetSelectedPaymentMethodData(); // Due to iOS modal freeze issue, password modal freezes the app when closed. // LayoutAnimation undoes the running animation. @@ -521,6 +559,9 @@ export default compose( walletTerms: { key: ONYXKEYS.WALLET_TERMS, }, + payPalMeData: { + key: ONYXKEYS.PAYPAL, + }, isLoadingPaymentMethods: { key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, }, From 8667467b61086084627c0f7b9748b2f08cc21ce6 Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Mon, 6 Feb 2023 20:28:44 +0530 Subject: [PATCH 2/7] Removing old comment --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 48f72ee48418..c6f81e2c4424 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -88,7 +88,6 @@ class BasePaymentsPage extends React.Component { } if (this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt) { - // We can create 3 auxillary variables as requested but seems overkill here let shouldResetPaymentMethodData = false; if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT && _.isEmpty(this.props.bankAccountList[this.state.methodID])) { shouldResetPaymentMethodData = true; From 2f43a94cca3c0f3944fdd2329bece496cd4b0150 Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Wed, 8 Feb 2023 10:49:54 +0530 Subject: [PATCH 3/7] Adding comments as requested by PR review --- .../settings/Payments/PaymentsPage/BasePaymentsPage.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index c6f81e2c4424..638e1a4ed246 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -49,6 +49,7 @@ class BasePaymentsPage extends React.Component { formattedSelectedPaymentMethod: { title: '', }, + selectedPaymentMethodType: null, anchorPositionTop: 0, anchorPositionBottom: 0, anchorPositionRight: 0, @@ -88,15 +89,21 @@ class BasePaymentsPage extends React.Component { } if (this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt) { + // We should reset selected payment method state values and close corresponding modals if the selected payment method is deleted let shouldResetPaymentMethodData = false; + if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT && _.isEmpty(this.props.bankAccountList[this.state.methodID])) { + // If the selected payment method is bank account and it has been deleted, reset the selected payment method data and close corresponding modals shouldResetPaymentMethodData = true; } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD && _.isEmpty(this.props.cardList[this.state.methodID])) { + // If the selected payment method is card and it has been deleted, reset the selected payment method data and close corresponding modals shouldResetPaymentMethodData = true; } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PAYPAL && this.props.payPalMeData !== prevProps.payPalMeData && _.isEmpty(this.props.payPalMeData)) { + // If the selected payment method is paypal and it has been deleted, reset the selected payment method data and close corresponding modals shouldResetPaymentMethodData = true; } if (shouldResetPaymentMethodData) { + // Close corresponding selected payment method modals which are open if (this.state.shouldShowDefaultDeleteMenu) { this.hideDefaultDeleteMenu(); } @@ -159,6 +166,8 @@ class BasePaymentsPage extends React.Component { } resetSelectedPaymentMethodData() { + // The below state values are used by payment method modals and we reset them while closing the modals. + // We should only reset the values when the modal animation is completed and so using InteractionManager.runAfterInteractions which fires after all animaitons are complete InteractionManager.runAfterInteractions(() => { // Reset to same values as in the constructor this.setState({ From a4f841c7c7d4db1026cc84b11eb5ddfd93eb426c Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Wed, 8 Feb 2023 12:36:06 +0530 Subject: [PATCH 4/7] Updating the clearing of selected payment method logic --- .../Payments/PaymentsPage/BasePaymentsPage.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 638e1a4ed246..0c230f4e5d8c 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -279,20 +279,25 @@ class BasePaymentsPage extends React.Component { /** * Hide the default / delete modal + * @param {boolean} shouldClearSelectedData - Clear selected payment method data if true */ - hideDefaultDeleteMenu() { + hideDefaultDeleteMenu(shouldClearSelectedData = true) { this.setState({shouldShowDefaultDeleteMenu: false}); InteractionManager.runAfterInteractions(() => { this.setState({ showConfirmDeleteContent: false, }); - this.resetSelectedPaymentMethodData(); + if (shouldClearSelectedData) { + this.resetSelectedPaymentMethodData(); + } }); } - hidePasswordPrompt() { + hidePasswordPrompt(shouldClearSelectedData = true) { this.setState({shouldShowPasswordPrompt: false}); - this.resetSelectedPaymentMethodData(); + if (shouldClearSelectedData) { + this.resetSelectedPaymentMethodData(); + } // Due to iOS modal freeze issue, password modal freezes the app when closed. // LayoutAnimation undoes the running animation. @@ -313,6 +318,7 @@ class BasePaymentsPage extends React.Component { } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) { PaymentMethods.makeDefaultPaymentMethod(password, null, this.state.selectedPaymentMethod.fundID, previousPaymentMethod, currentPaymentMethod); } + this.resetSelectedPaymentMethodData(); } deletePaymentMethod() { @@ -531,7 +537,7 @@ class BasePaymentsPage extends React.Component { right: this.state.anchorPositionRight, }} onSubmit={(password) => { - this.hidePasswordPrompt(); + this.hidePasswordPrompt(false); this.makeDefaultPaymentMethod(password); }} submitButtonText={this.state.passwordButtonText} From aec6f4b1d0ec0c0681bc97e3747fcbe7f4d4d2c8 Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Wed, 8 Feb 2023 13:02:16 +0530 Subject: [PATCH 5/7] update to use common method --- .../Payments/PaymentsPage/BasePaymentsPage.js | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 0c230f4e5d8c..68843f32bc9f 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -329,6 +329,7 @@ class BasePaymentsPage extends React.Component { } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) { PaymentMethods.deletePaymentCard(this.state.selectedPaymentMethod.fundID); } + this.resetSelectedPaymentMethodData(); } navigateToTransferBalancePage() { @@ -491,30 +492,10 @@ class BasePaymentsPage extends React.Component { ) : ( { - this.setState({ - shouldShowDefaultDeleteMenu: false, - }); - InteractionManager.runAfterInteractions(() => { - this.setState({ - showConfirmDeleteContent: false, - }); - }); + this.hideDefaultDeleteMenu(false); this.deletePaymentMethod(); }} - onCancel={() => { - this.setState({ - shouldShowDefaultDeleteMenu: false, - }); - InteractionManager.runAfterInteractions( - () => { - this.setState( - { - showConfirmDeleteContent: false, - }, - ); - }, - ); - }} + onCancel={this.hideDefaultDeleteMenu} contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined} title={this.props.translate('paymentsPage.deleteAccount')} prompt={this.props.translate('paymentsPage.deleteConfirmation')} From ecc829e45f94b0123fbfebadc3777a54efe62a25 Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Wed, 8 Feb 2023 13:34:13 +0530 Subject: [PATCH 6/7] updating removal if condition as requested --- .../settings/Payments/PaymentsPage/BasePaymentsPage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 68843f32bc9f..8fc271c458ae 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -106,11 +106,11 @@ class BasePaymentsPage extends React.Component { // Close corresponding selected payment method modals which are open if (this.state.shouldShowDefaultDeleteMenu) { this.hideDefaultDeleteMenu(); - } - if (this.state.shouldShowPasswordPrompt) { + } else if (this.state.shouldShowPasswordPrompt) { this.hidePasswordPrompt(); + } else { + this.resetSelectedPaymentMethodData(); } - this.resetSelectedPaymentMethodData(); } } From 579a5aeaf387289a022f684c0dbb35cb64a276bd Mon Sep 17 00:00:00 2001 From: Abdul Rahuman Date: Thu, 9 Feb 2023 05:50:20 +0530 Subject: [PATCH 7/7] removing comment and unreachable code --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 8fc271c458ae..afc47c160ba4 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -93,13 +93,10 @@ class BasePaymentsPage extends React.Component { let shouldResetPaymentMethodData = false; if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT && _.isEmpty(this.props.bankAccountList[this.state.methodID])) { - // If the selected payment method is bank account and it has been deleted, reset the selected payment method data and close corresponding modals shouldResetPaymentMethodData = true; } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD && _.isEmpty(this.props.cardList[this.state.methodID])) { - // If the selected payment method is card and it has been deleted, reset the selected payment method data and close corresponding modals shouldResetPaymentMethodData = true; } else if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PAYPAL && this.props.payPalMeData !== prevProps.payPalMeData && _.isEmpty(this.props.payPalMeData)) { - // If the selected payment method is paypal and it has been deleted, reset the selected payment method data and close corresponding modals shouldResetPaymentMethodData = true; } if (shouldResetPaymentMethodData) { @@ -108,8 +105,6 @@ class BasePaymentsPage extends React.Component { this.hideDefaultDeleteMenu(); } else if (this.state.shouldShowPasswordPrompt) { this.hidePasswordPrompt(); - } else { - this.resetSelectedPaymentMethodData(); } } }