Skip to content

Commit

Permalink
Merge pull request #14869 from abdulrahuman5196/payment-modal-dismiss
Browse files Browse the repository at this point in the history 
Removing payment method actions model when payment method is removed from another device
  • Loading branch information
@PauloGasparSv
PauloGasparSv authored Feb 9, 2023
2 parents 68d7b93 + 579a5ae commit b113107
Showing 1 changed file with 56 additions and 25 deletions.
81 changes: 56 additions & 25 deletions src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class BasePaymentsPage extends React.Component {
formattedSelectedPaymentMethod: {
title: '',
},
selectedPaymentMethodType: null,
anchorPositionTop: 0,
anchorPositionBottom: 0,
anchorPositionRight: 0,
Expand Down Expand Up @@ -87,6 +88,27 @@ class BasePaymentsPage extends React.Component {
this.debounceSetShouldShowLoadingSpinner();
}

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])) {
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) {
// Close corresponding selected payment method modals which are open
if (this.state.shouldShowDefaultDeleteMenu) {
this.hideDefaultDeleteMenu();
} else if (this.state.shouldShowPasswordPrompt) {
this.hidePasswordPrompt();
}
}
}

// previously online OR currently offline, skip fetch
if (!prevProps.network.isOffline || this.props.network.isOffline) {
return;
Expand Down Expand Up @@ -138,6 +160,23 @@ 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({
isSelectedPaymentMethodDefault: false,
selectedPaymentMethod: {},
formattedSelectedPaymentMethod: {
title: '',
},
methodID: null,
selectedPaymentMethodType: null,
});
});
}

/**
* Display the delete/default menu, or the add payment method menu
*
Expand Down Expand Up @@ -235,18 +274,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,
});
if (shouldClearSelectedData) {
this.resetSelectedPaymentMethodData();
}
});
}

hidePasswordPrompt() {
hidePasswordPrompt(shouldClearSelectedData = true) {
this.setState({shouldShowPasswordPrompt: false});
if (shouldClearSelectedData) {
this.resetSelectedPaymentMethodData();
}

// Due to iOS modal freeze issue, password modal freezes the app when closed.
// LayoutAnimation undoes the running animation.
Expand All @@ -267,6 +313,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() {
Expand All @@ -277,6 +324,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() {
Expand Down Expand Up @@ -439,30 +487,10 @@ class BasePaymentsPage extends React.Component {
) : (
<ConfirmContent
onConfirm={() => {
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')}
Expand All @@ -485,7 +513,7 @@ class BasePaymentsPage extends React.Component {
right: this.state.anchorPositionRight,
}}
onSubmit={(password) => {
this.hidePasswordPrompt();
this.hidePasswordPrompt(false);
this.makeDefaultPaymentMethod(password);
}}
submitButtonText={this.state.passwordButtonText}
Expand Down Expand Up @@ -521,6 +549,9 @@ export default compose(
walletTerms: {
key: ONYXKEYS.WALLET_TERMS,
},
payPalMeData: {
key: ONYXKEYS.PAYPAL,
},
isLoadingPaymentMethods: {
key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS,
},
Expand Down

0 comments on commit b113107

Please sign in to comment.