Skip to content

Commit

Permalink
Merge pull request #12824 from hungvu193/fix-12438-update
Browse files Browse the repository at this point in the history 
Fix: Add payment method blink after interacting with buttons
  • Loading branch information
@marcochavezf
marcochavezf authored Nov 21, 2022
2 parents e1111bc + 22d5dcd commit e480519
Showing 1 changed file with 71 additions and 53 deletions.
124 changes: 71 additions & 53 deletions src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import withWindowDimensions from '../../../../components/withWindowDimensions';
import CurrentWalletBalance from '../../../../components/CurrentWalletBalance';
import ONYXKEYS from '../../../../ONYXKEYS';
import Permissions from '../../../../libs/Permissions';
import ConfirmPopover from '../../../../components/ConfirmPopover';
import AddPaymentMethodMenu from '../../../../components/AddPaymentMethodMenu';
import CONST from '../../../../CONST';
import * as Expensicons from '../../../../components/Icon/Expensicons';
Expand All @@ -32,6 +31,7 @@ import {propTypes, defaultProps} from './paymentsPagePropTypes';
import {withNetwork} from '../../../../components/OnyxProvider';
import * as PaymentUtils from '../../../../libs/PaymentUtils';
import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
import ConfirmContent from '../../../../components/ConfirmContent';

class BasePaymentsPage extends React.Component {
constructor(props) {
Expand All @@ -41,7 +41,6 @@ class BasePaymentsPage extends React.Component {
shouldShowAddPaymentMenu: false,
shouldShowDefaultDeleteMenu: false,
shouldShowPasswordPrompt: false,
shouldShowConfirmPopover: false,
isSelectedPaymentMethodDefault: false,
selectedPaymentMethod: {},
formattedSelectedPaymentMethod: {
Expand All @@ -52,6 +51,7 @@ class BasePaymentsPage extends React.Component {
anchorPositionRight: 0,
addPaymentMethodButton: null,
methodID: null,
showConfirmDeleteContent: false,
};

this.paymentMethodPressed = this.paymentMethodPressed.bind(this);
Expand Down Expand Up @@ -215,6 +215,11 @@ class BasePaymentsPage extends React.Component {
*/
hideDefaultDeleteMenu() {
this.setState({shouldShowDefaultDeleteMenu: false});
InteractionManager.runAfterInteractions(() => {
this.setState({
showConfirmDeleteContent: false,
});
});
}

hidePasswordPrompt() {
Expand Down Expand Up @@ -319,10 +324,10 @@ class BasePaymentsPage extends React.Component {
onPress={this.paymentMethodPressed}
style={[styles.flex4]}
isAddPaymentMenuActive={this.state.shouldShowAddPaymentMenu}
actionPaymentMethodType={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
actionPaymentMethodType={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt
? this.state.selectedPaymentMethodType
: ''}
activePaymentMethodID={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
activePaymentMethodID={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt
? this.getSelectedPaymentMethodID()
: ''}
/>
Expand All @@ -345,13 +350,14 @@ class BasePaymentsPage extends React.Component {
right: this.state.anchorPositionRight,
}}
>
<View
style={[
styles.m5,
!this.props.isSmallScreenWidth ? styles.sidebarPopover : '',
]}
>
{isPopoverBottomMount && (
{!this.state.showConfirmDeleteContent ? (
<View
style={[
styles.m5,
!this.props.isSmallScreenWidth ? styles.sidebarPopover : '',
]}
>
{isPopoverBottomMount && (
<MenuItem
title={this.state.formattedSelectedPaymentMethod.title || ''}
icon={this.state.formattedSelectedPaymentMethod.icon}
Expand All @@ -360,8 +366,8 @@ class BasePaymentsPage extends React.Component {
disabled
interactive={false}
/>
)}
{shouldShowMakeDefaultButton && (
)}
{shouldShowMakeDefaultButton && (
<TouchableOpacity
onPress={() => {
this.setState({
Expand All @@ -384,31 +390,66 @@ class BasePaymentsPage extends React.Component {
{this.props.translate('paymentsPage.setDefaultConfirmation')}
</Text>
</TouchableOpacity>
)}
<TouchableOpacity
onPress={() => {
)}
<TouchableOpacity
onPress={() => {
this.setState({
showConfirmDeleteContent: true,
});
}}
style={[
styles.button,
styles.buttonDanger,
shouldShowMakeDefaultButton && styles.mt4,
styles.alignSelfCenter,
styles.w100,
]}
>
<Text style={[styles.buttonText, styles.textWhite]}>
{this.props.translate('common.delete')}
</Text>
</TouchableOpacity>
</View>
) : (
<ConfirmContent
onConfirm={() => {
this.setState({
shouldShowDefaultDeleteMenu: false,
});
InteractionManager.runAfterInteractions(() => {
this.setState({
shouldShowConfirmPopover: true,
showConfirmDeleteContent: false,
});
});
this.deletePaymentMethod();
}}
style={[
styles.button,
styles.buttonDanger,
shouldShowMakeDefaultButton && styles.mt4,
styles.alignSelfCenter,
styles.w100,
]}
>
<Text style={[styles.buttonText, styles.textWhite]}>
{this.props.translate('common.delete')}
</Text>
</TouchableOpacity>
</View>
onCancel={() => {
this.setState({
shouldShowDefaultDeleteMenu: false,
});
InteractionManager.runAfterInteractions(
() => {
this.setState(
{
showConfirmDeleteContent: false,
},
);
},
);
}}
contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
title={this.props.translate('paymentsPage.deleteAccount')}
prompt={this.props.translate('paymentsPage.deleteConfirmation')}
confirmText={this.props.translate('common.delete')}
cancelText={this.props.translate('common.cancel')}
anchorPosition={{
top: this.state.anchorPositionTop,
right: this.state.anchorPositionRight,
}}
shouldShowCancelButton
danger
/>
)}
</Popover>
<PasswordPopover
isVisible={this.state.shouldShowPasswordPrompt}
Expand All @@ -424,29 +465,6 @@ class BasePaymentsPage extends React.Component {
submitButtonText={this.state.passwordButtonText}
isDangerousAction
/>
<ConfirmPopover
contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
isVisible={this.state.shouldShowConfirmPopover}
title={this.props.translate('paymentsPage.deleteAccount')}
prompt={this.props.translate('paymentsPage.deleteConfirmation')}
confirmText={this.props.translate('common.delete')}
cancelText={this.props.translate('common.cancel')}
anchorPosition={{
top: this.state.anchorPositionTop,
right: this.state.anchorPositionRight,
}}
onConfirm={() => {
this.setState({
shouldShowConfirmPopover: false,
});
this.deletePaymentMethod();
}}
onCancel={() => {
this.setState({shouldShowConfirmPopover: false});
}}
shouldShowCancelButton
danger
/>
</ScreenWrapper>
);
}
Expand Down

0 comments on commit e480519

Please sign in to comment.