From 7f9ad6ac905ec887e9b513a92b8539c04ee9dd96 Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Wed, 16 Nov 2022 17:54:17 +0700
Subject: [PATCH 1/2] Fix: Add payment method blink after interacting with
 buttons

---
 .../Payments/PaymentsPage/BasePaymentsPage.js | 115 +++++++++---------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index f9c36bd873fe..55f5b81bcdd9 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -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';
@@ -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) {
@@ -41,7 +41,6 @@ class BasePaymentsPage extends React.Component {
             shouldShowAddPaymentMenu: false,
             shouldShowDefaultDeleteMenu: false,
             shouldShowPasswordPrompt: false,
-            shouldShowConfirmPopover: false,
             isSelectedPaymentMethodDefault: false,
             selectedPaymentMethod: {},
             formattedSelectedPaymentMethod: {
@@ -52,6 +51,7 @@ class BasePaymentsPage extends React.Component {
             anchorPositionRight: 0,
             addPaymentMethodButton: null,
             methodID: null,
+            showConfirmDeleteContent: false,
         };
 
         this.paymentMethodPressed = this.paymentMethodPressed.bind(this);
@@ -214,7 +214,7 @@ class BasePaymentsPage extends React.Component {
      * Hide the default / delete modal
      */
     hideDefaultDeleteMenu() {
-        this.setState({shouldShowDefaultDeleteMenu: false});
+        this.setState({shouldShowDefaultDeleteMenu: false, showConfirmDeleteContent: false});
     }
 
     hidePasswordPrompt() {
@@ -319,10 +319,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()
                                 : ''}
                         />
@@ -345,13 +345,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}
@@ -360,8 +361,8 @@ class BasePaymentsPage extends React.Component {
                                 disabled
                                 interactive={false}
                             />
-                        )}
-                        {shouldShowMakeDefaultButton && (
+                            )}
+                            {shouldShowMakeDefaultButton && (
                             <TouchableOpacity
                                 onPress={() => {
                                     this.setState({
@@ -384,31 +385,54 @@ 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,
+                                    showConfirmDeleteContent: false,
                                 });
-                                InteractionManager.runAfterInteractions(() => {
-                                    this.setState({
-                                        shouldShowConfirmPopover: true,
-                                    });
+                                this.deletePaymentMethod();
+                            }}
+                            onCancel={() => {
+                                this.setState({
+                                    shouldShowDefaultDeleteMenu: false,
+                                    showConfirmDeleteContent: false,
                                 });
                             }}
-                            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>
+                            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}
@@ -424,29 +448,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>
         );
     }

From 22d5dcd444f23948de4e4cebd057ac83a8519ba5 Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Fri, 18 Nov 2022 16:04:45 +0700
Subject: [PATCH 2/2] Add InteractionManager to handle modal content

---
 .../Payments/PaymentsPage/BasePaymentsPage.js | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 55f5b81bcdd9..a0df14a8d856 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -214,7 +214,12 @@ class BasePaymentsPage extends React.Component {
      * Hide the default / delete modal
      */
     hideDefaultDeleteMenu() {
-        this.setState({shouldShowDefaultDeleteMenu: false, showConfirmDeleteContent: false});
+        this.setState({shouldShowDefaultDeleteMenu: false});
+        InteractionManager.runAfterInteractions(() => {
+            this.setState({
+                showConfirmDeleteContent: false,
+            });
+        });
     }
 
     hidePasswordPrompt() {
@@ -410,15 +415,27 @@ class BasePaymentsPage extends React.Component {
                             onConfirm={() => {
                                 this.setState({
                                     shouldShowDefaultDeleteMenu: false,
-                                    showConfirmDeleteContent: false,
+                                });
+                                InteractionManager.runAfterInteractions(() => {
+                                    this.setState({
+                                        showConfirmDeleteContent: false,
+                                    });
                                 });
                                 this.deletePaymentMethod();
                             }}
                             onCancel={() => {
                                 this.setState({
                                     shouldShowDefaultDeleteMenu: false,
-                                    showConfirmDeleteContent: false,
                                 });
+                                InteractionManager.runAfterInteractions(
+                                    () => {
+                                        this.setState(
+                                            {
+                                                showConfirmDeleteContent: false,
+                                            },
+                                        );
+                                    },
+                                );
                             }}
                             contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
                             title={this.props.translate('paymentsPage.deleteAccount')}