From cfc058f5f0818cbab00973d4761386284459db46 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Sat, 4 Nov 2023 11:35:21 +0530
Subject: [PATCH 01/12] Add popover with overlay to confirm Bank Account
 deletion

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 2387f5f23e6c..5d89f8a6943c 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import Button from '@components/Button';
-import ConfirmContent from '@components/ConfirmContent';
 import CurrentWalletBalance from '@components/CurrentWalletBalance';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -37,6 +36,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './walletPagePropTypes';
+import ConfirmModal from '@components/ConfirmModal';
 
 function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymentMethods, network, shouldListenForResize, userWallet, walletTerms}) {
     const {translate} = useLocalize();
@@ -513,7 +513,8 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                 />
                             </View>
                         ) : (
-                            <ConfirmContent
+                            <ConfirmModal
+                                isVisible
                                 onConfirm={() => {
                                     deletePaymentMethod();
                                     hideDefaultDeleteMenu();

From c098335efbcd8855489501cad4cea03e5e36993e Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 6 Nov 2023 23:17:49 +0530
Subject: [PATCH 02/12] lint fix

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 5d89f8a6943c..1b6e70b5e807 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import CurrentWalletBalance from '@components/CurrentWalletBalance';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -36,7 +37,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './walletPagePropTypes';
-import ConfirmModal from '@components/ConfirmModal';
 
 function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymentMethods, network, shouldListenForResize, userWallet, walletTerms}) {
     const {translate} = useLocalize();

From 9f464234cb9ef4a702311b214e7d248b726457da Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 16 Nov 2023 17:24:05 +0530
Subject: [PATCH 03/12] Move onModalHide to ConfirmModal prop

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 1b6e70b5e807..35ce5dd5158e 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -481,7 +481,6 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         }}
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
-                        onModalHide={resetSelectedPaymentMethodData}
                     >
                         {!showConfirmDeleteContent ? (
                             <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
@@ -531,6 +530,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                 }}
                                 shouldShowCancelButton
                                 danger
+                                onModalHide={resetSelectedPaymentMethodData}
                             />
                         )}
                     </Popover>

From 146570deef4aa0db98d4fe45990cdfcad01e9642 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 16 Nov 2023 17:35:05 +0530
Subject: [PATCH 04/12] Improve Confirm Modal Visibility logic

---
 .../settings/Wallet/WalletPage/WalletPage.js  | 80 +++++++++----------
 1 file changed, 36 insertions(+), 44 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 35ce5dd5158e..780c6d767c12 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -482,60 +482,52 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
                     >
-                        {!showConfirmDeleteContent ? (
-                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                                {isPopoverBottomMount && (
-                                    <MenuItem
-                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                        interactive={false}
-                                    />
-                                )}
-                                {shouldShowMakeDefaultButton && (
-                                    <Button
-                                        onPress={() => {
-                                            makeDefaultPaymentMethod();
-                                            setShouldShowDefaultDeleteMenu(false);
-                                        }}
-                                        text={translate('walletPage.setDefaultConfirmation')}
-                                    />
-                                )}
+                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                            {isPopoverBottomMount && (
+                                <MenuItem
+                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                    interactive={false}
+                                />
+                            )}
+                            {shouldShowMakeDefaultButton && (
                                 <Button
                                     onPress={() => {
-                                        setShowConfirmDeleteContent(true);
+                                        makeDefaultPaymentMethod();
+                                        setShouldShowDefaultDeleteMenu(false);
                                     }}
-                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                    text={translate('common.delete')}
-                                    danger
+                                    text={translate('walletPage.setDefaultConfirmation')}
                                 />
-                            </View>
-                        ) : (
-                            <ConfirmModal
-                                isVisible
-                                onConfirm={() => {
-                                    deletePaymentMethod();
-                                    hideDefaultDeleteMenu();
-                                }}
-                                onCancel={hideDefaultDeleteMenu}
-                                contentStyles={!isSmallScreenWidth ? [styles.sidebarPopover, styles.willChangeTransform] : undefined}
-                                title={translate('walletPage.deleteAccount')}
-                                prompt={translate('walletPage.deleteConfirmation')}
-                                confirmText={translate('common.delete')}
-                                cancelText={translate('common.cancel')}
-                                anchorPosition={{
-                                    top: anchorPosition.anchorPositionTop,
-                                    right: anchorPosition.anchorPositionRight,
+                            )}
+                            <Button
+                                onPress={() => {
+                                    setShowConfirmDeleteContent(true);
                                 }}
-                                shouldShowCancelButton
+                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                text={translate('common.delete')}
                                 danger
-                                onModalHide={resetSelectedPaymentMethodData}
                             />
-                        )}
+                        </View>
                     </Popover>
                 </ScreenWrapper>
             )}
+            <ConfirmModal
+                isVisible={showConfirmDeleteContent}
+                onConfirm={() => {
+                    deletePaymentMethod();
+                    hideDefaultDeleteMenu();
+                }}
+                onCancel={hideDefaultDeleteMenu}
+                title={translate('walletPage.deleteAccount')}
+                prompt={translate('walletPage.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                shouldShowCancelButton
+                danger
+                onModalHide={resetSelectedPaymentMethodData}
+            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From 07ea059f274bf87080d939200f36b89aab6df19e Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 16 Nov 2023 17:48:21 +0530
Subject: [PATCH 05/12] Improve State Variable name

We change showConfirmDeleteContent to showConfirmDeleteModal to better reflect its purpose
---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 780c6d767c12..ee75842b61c3 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -61,7 +61,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
         anchorPositionTop: 0,
         anchorPositionRight: 0,
     });
-    const [showConfirmDeleteContent, setShowConfirmDeleteContent] = useState(false);
+    const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
 
     const hasBankAccount = !_.isEmpty(bankAccountList) || !_.isEmpty(fundList);
     const hasWallet = !_.isEmpty(userWallet);
@@ -215,9 +215,9 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
         InteractionManager.runAfterInteractions(() => {
-            setShowConfirmDeleteContent(false);
+            setShowConfirmDeleteModal(false);
         });
-    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteContent]);
+    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -503,7 +503,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                             )}
                             <Button
                                 onPress={() => {
-                                    setShowConfirmDeleteContent(true);
+                                    setShowConfirmDeleteModal(true);
                                 }}
                                 style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
                                 text={translate('common.delete')}
@@ -514,7 +514,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                 </ScreenWrapper>
             )}
             <ConfirmModal
-                isVisible={showConfirmDeleteContent}
+                isVisible={showConfirmDeleteModal}
                 onConfirm={() => {
                     deletePaymentMethod();
                     hideDefaultDeleteMenu();

From d7ead9f51fb4409c5a0c99c0721db27e45d2a588 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 27 Nov 2023 03:57:26 +0530
Subject: [PATCH 06/12] Move ConfirmModal inside Popover

---
 .../settings/Wallet/WalletPage/WalletPage.js  | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 3a6af1be51dc..5f11fd853745 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -489,53 +489,56 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         }}
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
+                        onModalHide={resetSelectedPaymentMethodData}
                     >
-                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                            {isPopoverBottomMount && (
-                                <MenuItem
-                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                    interactive={false}
-                                />
-                            )}
-                            {shouldShowMakeDefaultButton && (
+                        {!showConfirmDeleteModal ? (
+                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                                {isPopoverBottomMount && (
+                                    <MenuItem
+                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                        interactive={false}
+                                    />
+                                )}
+                                {shouldShowMakeDefaultButton && (
+                                    <Button
+                                        onPress={() => {
+                                            makeDefaultPaymentMethod();
+                                            setShouldShowDefaultDeleteMenu(false);
+                                        }}
+                                        text={translate('walletPage.setDefaultConfirmation')}
+                                    />
+                                )}
                                 <Button
                                     onPress={() => {
-                                        makeDefaultPaymentMethod();
-                                        setShouldShowDefaultDeleteMenu(false);
+                                        setShowConfirmDeleteModal(true);
                                     }}
-                                    text={translate('walletPage.setDefaultConfirmation')}
+                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                    text={translate('common.delete')}
+                                    danger
                                 />
-                            )}
-                            <Button
-                                onPress={() => {
-                                    setShowConfirmDeleteModal(true);
+                            </View> 
+                        ) : (
+                            <ConfirmModal
+                                isVisible
+                                onConfirm={() => {
+                                    deletePaymentMethod();
+                                    hideDefaultDeleteMenu();
                                 }}
-                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                text={translate('common.delete')}
+                                onCancel={hideDefaultDeleteMenu}
+                                title={translate('walletPage.deleteAccount')}
+                                prompt={translate('walletPage.deleteConfirmation')}
+                                confirmText={translate('common.delete')}
+                                cancelText={translate('common.cancel')}
+                                shouldShowCancelButton
                                 danger
                             />
-                        </View>
+                        )}
                     </Popover>
                 </ScreenWrapper>
             )}
-            <ConfirmModal
-                isVisible={showConfirmDeleteModal}
-                onConfirm={() => {
-                    deletePaymentMethod();
-                    hideDefaultDeleteMenu();
-                }}
-                onCancel={hideDefaultDeleteMenu}
-                title={translate('walletPage.deleteAccount')}
-                prompt={translate('walletPage.deleteConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                shouldShowCancelButton
-                danger
-                onModalHide={resetSelectedPaymentMethodData}
-            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From fe6f5a9377b88479f6e9463f73c2159c186854da Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 27 Nov 2023 05:35:27 +0530
Subject: [PATCH 07/12] Revert "Move ConfirmModal inside Popover"

This reverts commit d7ead9f51fb4409c5a0c99c0721db27e45d2a588.
---
 .../settings/Wallet/WalletPage/WalletPage.js  | 75 +++++++++----------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 5f11fd853745..3a6af1be51dc 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -489,56 +489,53 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         }}
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
-                        onModalHide={resetSelectedPaymentMethodData}
                     >
-                        {!showConfirmDeleteModal ? (
-                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                                {isPopoverBottomMount && (
-                                    <MenuItem
-                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                        interactive={false}
-                                    />
-                                )}
-                                {shouldShowMakeDefaultButton && (
-                                    <Button
-                                        onPress={() => {
-                                            makeDefaultPaymentMethod();
-                                            setShouldShowDefaultDeleteMenu(false);
-                                        }}
-                                        text={translate('walletPage.setDefaultConfirmation')}
-                                    />
-                                )}
+                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                            {isPopoverBottomMount && (
+                                <MenuItem
+                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                    interactive={false}
+                                />
+                            )}
+                            {shouldShowMakeDefaultButton && (
                                 <Button
                                     onPress={() => {
-                                        setShowConfirmDeleteModal(true);
+                                        makeDefaultPaymentMethod();
+                                        setShouldShowDefaultDeleteMenu(false);
                                     }}
-                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                    text={translate('common.delete')}
-                                    danger
+                                    text={translate('walletPage.setDefaultConfirmation')}
                                 />
-                            </View> 
-                        ) : (
-                            <ConfirmModal
-                                isVisible
-                                onConfirm={() => {
-                                    deletePaymentMethod();
-                                    hideDefaultDeleteMenu();
+                            )}
+                            <Button
+                                onPress={() => {
+                                    setShowConfirmDeleteModal(true);
                                 }}
-                                onCancel={hideDefaultDeleteMenu}
-                                title={translate('walletPage.deleteAccount')}
-                                prompt={translate('walletPage.deleteConfirmation')}
-                                confirmText={translate('common.delete')}
-                                cancelText={translate('common.cancel')}
-                                shouldShowCancelButton
+                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                text={translate('common.delete')}
                                 danger
                             />
-                        )}
+                        </View>
                     </Popover>
                 </ScreenWrapper>
             )}
+            <ConfirmModal
+                isVisible={showConfirmDeleteModal}
+                onConfirm={() => {
+                    deletePaymentMethod();
+                    hideDefaultDeleteMenu();
+                }}
+                onCancel={hideDefaultDeleteMenu}
+                title={translate('walletPage.deleteAccount')}
+                prompt={translate('walletPage.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                shouldShowCancelButton
+                danger
+                onModalHide={resetSelectedPaymentMethodData}
+            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From b80cbc76fc864c34ef3a626a2d9163cb5940b1ee Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 27 Nov 2023 06:43:22 +0530
Subject: [PATCH 08/12] Move Confirmation Modal component

This moves ConfirmModal as child of Popover while preserving its visibility logic
---
 .../settings/Wallet/WalletPage/WalletPage.js  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 3a6af1be51dc..f7d6cfbaffdc 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -518,24 +518,24 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                 danger
                             />
                         </View>
+                        <ConfirmModal
+                            isVisible={showConfirmDeleteModal}
+                            onConfirm={() => {
+                                deletePaymentMethod();
+                                hideDefaultDeleteMenu();
+                            }}
+                            onCancel={hideDefaultDeleteMenu}
+                            title={translate('walletPage.deleteAccount')}
+                            prompt={translate('walletPage.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            shouldShowCancelButton
+                            danger
+                            onModalHide={resetSelectedPaymentMethodData}
+                        />
                     </Popover>
                 </ScreenWrapper>
             )}
-            <ConfirmModal
-                isVisible={showConfirmDeleteModal}
-                onConfirm={() => {
-                    deletePaymentMethod();
-                    hideDefaultDeleteMenu();
-                }}
-                onCancel={hideDefaultDeleteMenu}
-                title={translate('walletPage.deleteAccount')}
-                prompt={translate('walletPage.deleteConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                shouldShowCancelButton
-                danger
-                onModalHide={resetSelectedPaymentMethodData}
-            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From 228b349c224b4f288d87f7c1fcda72ae2c7bba21 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Wed, 29 Nov 2023 22:12:35 +0530
Subject: [PATCH 09/12] Seperate closing logic for Popover and Confirm Modal

---
 .../settings/Wallet/WalletPage/WalletPage.js  | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 981331559333..a5b20f30946e 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {ActivityIndicator, InteractionManager, ScrollView, View} from 'react-native';
+import {ActivityIndicator, ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
@@ -215,10 +215,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
      */
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
-        InteractionManager.runAfterInteractions(() => {
-            setShowConfirmDeleteModal(false);
-        });
-    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
+    }, [setShouldShowDefaultDeleteMenu]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -510,6 +507,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             )}
                             <Button
                                 onPress={() => {
+                                    setShouldShowDefaultDeleteMenu(false);
                                     setShowConfirmDeleteModal(true);
                                 }}
                                 style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
@@ -517,24 +515,24 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                 danger
                             />
                         </View>
-                        <ConfirmModal
-                            isVisible={showConfirmDeleteModal}
-                            onConfirm={() => {
-                                deletePaymentMethod();
-                                hideDefaultDeleteMenu();
-                            }}
-                            onCancel={hideDefaultDeleteMenu}
-                            title={translate('walletPage.deleteAccount')}
-                            prompt={translate('walletPage.deleteConfirmation')}
-                            confirmText={translate('common.delete')}
-                            cancelText={translate('common.cancel')}
-                            shouldShowCancelButton
-                            danger
-                            onModalHide={resetSelectedPaymentMethodData}
-                        />
                     </Popover>
                 </ScreenWrapper>
             )}
+            <ConfirmModal
+                isVisible={showConfirmDeleteModal}
+                onConfirm={() => {
+                    deletePaymentMethod();
+                    setShowConfirmDeleteModal(false);
+                }}
+                onCancel={() => setShowConfirmDeleteModal(false)}
+                title={translate('walletPage.deleteAccount')}
+                prompt={translate('walletPage.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                shouldShowCancelButton
+                danger
+                onModalHide={resetSelectedPaymentMethodData}
+            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From 1aa5fe09474d56c570c7767f71bc05d606e54a0a Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 4 Dec 2023 19:26:15 +0530
Subject: [PATCH 10/12] Speed up Modal Visibility Time

We use a check to hide the delete menu View when the Confirm Modal is visible.
---
 .../settings/Wallet/WalletPage/WalletPage.js  | 87 ++++++++++---------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index a5b20f30946e..659b7b2c9d9c 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -215,7 +215,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
      */
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
-    }, [setShouldShowDefaultDeleteMenu]);
+        setShowConfirmDeleteModal(false);
+    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -483,56 +484,60 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             top: anchorPosition.anchorPositionTop,
                             right: anchorPosition.anchorPositionRight,
                         }}
-                        withoutOverlay
                         anchorRef={paymentMethodButtonRef}
                     >
-                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                            {isPopoverBottomMount && (
-                                <MenuItem
-                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                    interactive={false}
-                                />
-                            )}
-                            {shouldShowMakeDefaultButton && (
+                        {!showConfirmDeleteModal && (
+                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                                {isPopoverBottomMount && (
+                                    <MenuItem
+                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                        interactive={false}
+                                    />
+                                )}
+                                {shouldShowMakeDefaultButton && (
+                                    <Button
+                                        onPress={() => {
+                                            makeDefaultPaymentMethod();
+                                            setShouldShowDefaultDeleteMenu(false);
+                                        }}
+                                        text={translate('walletPage.setDefaultConfirmation')}
+                                    />
+                                )}
                                 <Button
                                     onPress={() => {
-                                        makeDefaultPaymentMethod();
                                         setShouldShowDefaultDeleteMenu(false);
+                                        setShowConfirmDeleteModal(true);
                                     }}
-                                    text={translate('walletPage.setDefaultConfirmation')}
+                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                    text={translate('common.delete')}
+                                    danger
                                 />
-                            )}
-                            <Button
-                                onPress={() => {
-                                    setShouldShowDefaultDeleteMenu(false);
-                                    setShowConfirmDeleteModal(true);
-                                }}
-                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                text={translate('common.delete')}
-                                danger
-                            />
-                        </View>
+                            </View>
+                        )}
+                        <ConfirmModal
+                            isVisible={showConfirmDeleteModal}
+                            onConfirm={() => {
+                                deletePaymentMethod();
+                                hideDefaultDeleteMenu();
+                            }}
+                            onCancel={hideDefaultDeleteMenu}
+                            title={translate('walletPage.deleteAccount')}
+                            prompt={translate('walletPage.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            shouldShowCancelButton
+                            danger
+                            onModalHide={() => {
+                                hideDefaultDeleteMenu();
+                                resetSelectedPaymentMethodData();
+                            }}
+                        />
                     </Popover>
                 </ScreenWrapper>
             )}
-            <ConfirmModal
-                isVisible={showConfirmDeleteModal}
-                onConfirm={() => {
-                    deletePaymentMethod();
-                    setShowConfirmDeleteModal(false);
-                }}
-                onCancel={() => setShowConfirmDeleteModal(false)}
-                title={translate('walletPage.deleteAccount')}
-                prompt={translate('walletPage.deleteConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                shouldShowCancelButton
-                danger
-                onModalHide={resetSelectedPaymentMethodData}
-            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From de41c2e7c41ef1b823796ebe2ec5da4a33416da4 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 4 Dec 2023 19:39:05 +0530
Subject: [PATCH 11/12] Fix Button onPress action

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 659b7b2c9d9c..912392531cef 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -507,10 +507,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                     />
                                 )}
                                 <Button
-                                    onPress={() => {
-                                        setShouldShowDefaultDeleteMenu(false);
-                                        setShowConfirmDeleteModal(true);
-                                    }}
+                                    onPress={() => setShowConfirmDeleteModal(true)}
                                     style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
                                     text={translate('common.delete')}
                                     danger

From 34bf1da893c07a75c82c79cf5060d99d2026b27d Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Wed, 6 Dec 2023 00:47:22 +0530
Subject: [PATCH 12/12] Remove redundant state change.

This removes the redundant call to hide DefaultDeleteMenu from Confirm Modal's onModalHide prop.
---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 912392531cef..941d74799170 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -527,10 +527,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             cancelText={translate('common.cancel')}
                             shouldShowCancelButton
                             danger
-                            onModalHide={() => {
-                                hideDefaultDeleteMenu();
-                                resetSelectedPaymentMethodData();
-                            }}
+                            onModalHide={resetSelectedPaymentMethodData}
                         />
                     </Popover>
                 </ScreenWrapper>