From 7b3468598b7d1fbb246b684fc7f6799d17ff1016 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 17 Aug 2023 01:42:28 +0530
Subject: [PATCH 1/8] fix non-toggle popover to toggle

---
 src/components/ButtonWithDropdownMenu.js                     | 2 +-
 src/components/ThreeDotsMenu/index.js                        | 4 ++++
 src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 5c1a95b8755..0246b93ea03 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -104,7 +104,7 @@ function ButtonWithDropdownMenu(props) {
                         success
                         isDisabled={props.isDisabled}
                         style={[styles.pl0]}
-                        onPress={() => setIsMenuVisible(true)}
+                        onPress={() => setIsMenuVisible(!isMenuVisible)}
                         shouldRemoveLeftBorderRadius
                     >
                         <Icon
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index c6006014409..1e6f6705bce 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -88,6 +88,10 @@ class ThreeDotsMenu extends Component {
                     <Tooltip text={this.props.translate(this.props.iconTooltip)}>
                         <PressableWithoutFeedback
                             onPress={() => {
+                                if (this.state.isPopupMenuVisible) {
+                                    this.hidePopoverMenu();
+                                    return;
+                                }
                                 this.showPopoverMenu();
                                 if (this.props.onIconPress) {
                                     this.props.onIconPress();
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 359809dda0f..5b82ce24ab8 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -128,6 +128,11 @@ function BasePaymentsPage(props) {
      * @param {String|Number} methodID
      */
     const paymentMethodPressed = (nativeEvent, accountType, account, isDefault, methodID) => {
+        if (shouldShowAddPaymentMenu) {
+            setShouldShowAddPaymentMenu(false);
+            return;
+        }
+
         paymentMethodButtonRef.current = nativeEvent.currentTarget;
 
         // The delete/default menu

From 1f0d557b80a91b8cdb49ffd3cff43d7039b63691 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 17 Aug 2023 20:47:29 +0530
Subject: [PATCH 2/8] fix toggle for addpayment method in BaseKycwall

---
 src/components/KYCWall/BaseKYCWall.js                | 12 +++++++++---
 .../Payments/PaymentsPage/BasePaymentsPage.js        |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index 534f00b7f74..f483ef18205 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -95,6 +95,9 @@ class KYCWall extends React.Component {
      * @param {String} iouPaymentType
      */
     continue(event, iouPaymentType) {
+        if (this.state.shouldShowAddPaymentMenu) {
+            return;
+        }
         this.setState({transferBalanceButton: event.nativeEvent.target});
         const isExpenseReport = ReportUtils.isExpenseReport(this.props.iouReport);
         const paymentCardList = this.props.fundList || this.props.cardList || {};
@@ -113,7 +116,6 @@ class KYCWall extends React.Component {
             });
             return;
         }
-
         if (!isExpenseReport) {
             // Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks
             const hasGoldWallet = this.props.userWallet.tierName && this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
@@ -123,7 +125,6 @@ class KYCWall extends React.Component {
                 return;
             }
         }
-
         Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them');
         this.props.onSuccessfulKYC(iouPaymentType);
     }
@@ -133,7 +134,12 @@ class KYCWall extends React.Component {
             <>
                 <AddPaymentMethodMenu
                     isVisible={this.state.shouldShowAddPaymentMenu}
-                    onClose={() => this.setState({shouldShowAddPaymentMenu: false})}
+                    onClose={() => {
+                        /* a small delay will schedule this to run after the continue method preventing rerendering of the menu when clicking the menu item */
+                        setTimeout(() => {
+                            this.setState({shouldShowAddPaymentMenu: false});
+                        }, 10);
+                    }}
                     anchorPosition={{
                         vertical: this.state.anchorPositionVertical,
                         horizontal: this.state.anchorPositionHorizontal,
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 5b82ce24ab8..258818a18e3 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -292,7 +292,7 @@ function BasePaymentsPage(props) {
                                 </OfflineWithFeedback>
                             )}
                         </View>
-                        {props.userWallet.currentBalance > 0 && (
+                        {props.userWallet.currentBalance === 0 && (
                             <View style={styles.mb3}>
                                 <KYCWall
                                     onSuccessfulKYC={navigateToTransferBalancePage}

From 6a48e4959f2f797dc690c3e718a2649e3ef63ffe Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 17 Aug 2023 23:21:11 +0530
Subject: [PATCH 3/8] code formatting

---
 src/components/ThreeDotsMenu/index.js                       | 6 +++---
 .../settings/Payments/PaymentsPage/BasePaymentsPage.js      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index 8cb1bc91aa4..abed05b4438 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -78,9 +78,9 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                 <Tooltip text={translate(iconTooltip)}>
                     <PressableWithoutFeedback
                         onPress={() => {
-                           if (isPopupMenuVisible) {
-                               hidePopoverMenu();
-                               return;
+                            if (isPopupMenuVisible) {
+                                hidePopoverMenu();
+                                return;
                             }
                             showPopoverMenu();
                             if (onIconPress) {
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 258818a18e3..5b82ce24ab8 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -292,7 +292,7 @@ function BasePaymentsPage(props) {
                                 </OfflineWithFeedback>
                             )}
                         </View>
-                        {props.userWallet.currentBalance === 0 && (
+                        {props.userWallet.currentBalance > 0 && (
                             <View style={styles.mb3}>
                                 <KYCWall
                                     onSuccessfulKYC={navigateToTransferBalancePage}

From a1e10e182105109d31885b375c1f75005b5f7f9e Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Fri, 18 Aug 2023 18:37:44 +0530
Subject: [PATCH 4/8] resolve merge conflicts and requested changes

---
 src/components/ButtonWithDropdownMenu.js               | 3 +++
 src/components/KYCWall/BaseKYCWall.js                  | 5 ++++-
 src/components/SettlementButton.js                     | 3 ++-
 src/components/ThreeDotsMenu/index.js                  | 2 ++
 src/pages/settings/Wallet/WalletPage/BaseWalletPage.js | 3 ++-
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 0246b93ea03..c1959c41e70 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -45,6 +45,7 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+    buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 const defaultProps = {
@@ -56,6 +57,7 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    buttonRef: () => {},
 };
 
 function ButtonWithDropdownMenu(props) {
@@ -90,6 +92,7 @@ function ButtonWithDropdownMenu(props) {
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, ...props.style]}>
                     <Button
                         success
+                        ref={props.buttonRef}
                         onPress={(event) => props.onPress(event, selectedItem.value)}
                         text={selectedItem.text}
                         isDisabled={props.isDisabled}
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index 03781c70ae2..fffca164aa6 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -23,6 +23,7 @@ class KYCWall extends React.Component {
 
         this.continue = this.continue.bind(this);
         this.setMenuPosition = this.setMenuPosition.bind(this);
+        this.anchorRef = React.createRef(null);
 
         this.state = {
             shouldShowAddPaymentMenu: false,
@@ -95,7 +96,8 @@ class KYCWall extends React.Component {
      * @param {String} iouPaymentType
      */
     continue(event, iouPaymentType) {
-        if (this.state.shouldShowAddPaymentMenu) {
+       if (this.state.shouldShowAddPaymentMenu) {
+            this.setState({shouldShowAddPaymentMenu: false});
             return;
         }
         this.setState({transferBalanceButton: event.nativeEvent.target});
@@ -140,6 +142,7 @@ class KYCWall extends React.Component {
                             this.setState({shouldShowAddPaymentMenu: false});
                         }, 10);
                     }}
+                    anchorRef={this.anchorRef}
                     anchorPosition={{
                         vertical: this.state.anchorPositionVertical,
                         horizontal: this.state.anchorPositionHorizontal,
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 628fb868100..b80b5f67ea8 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -174,8 +174,9 @@ class SettlementButton extends React.Component {
                 chatReportID={this.props.chatReportID}
                 iouReport={this.props.iouReport}
             >
-                {(triggerKYCFlow) => (
+                {(triggerKYCFlow, buttonRef) => (
                     <ButtonWithDropdownMenu
+                        buttonRef={buttonRef}
                         isDisabled={this.props.isDisabled}
                         isLoading={this.props.isLoading}
                         onPress={(event, iouPaymentType) => {
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index abed05b4438..b5637a4f387 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -106,6 +106,8 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                 anchorAlignment={anchorAlignment}
                 onItemSelected={hidePopoverMenu}
                 menuItems={menuItems}
+                withoutOverlay
+                anchorRef={buttonRef}
             />
         </>
     );
diff --git a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
index 13dc6e490b7..72e31ec7215 100644
--- a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
@@ -299,8 +299,9 @@ function BaseWalletPage(props) {
                                     addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
                                     popoverPlacement="bottom"
                                 >
-                                    {(triggerKYCFlow) => (
+                                    {(triggerKYCFlow, buttonRef) => (
                                         <MenuItem
+                                            ref={buttonRef}
                                             title={translate('common.transferBalance')}
                                             icon={Expensicons.Transfer}
                                             onPress={triggerKYCFlow}

From 498f3ee92c3fc5b4d361ed90a56885d00facd531 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Fri, 18 Aug 2023 18:39:18 +0530
Subject: [PATCH 5/8] code formatting

---
 src/components/KYCWall/BaseKYCWall.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index fffca164aa6..3973b12aa94 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -96,7 +96,7 @@ class KYCWall extends React.Component {
      * @param {String} iouPaymentType
      */
     continue(event, iouPaymentType) {
-       if (this.state.shouldShowAddPaymentMenu) {
+        if (this.state.shouldShowAddPaymentMenu) {
             this.setState({shouldShowAddPaymentMenu: false});
             return;
         }

From e499934d4b954622929c4cab2062cf1309ee196d Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Fri, 18 Aug 2023 18:47:39 +0530
Subject: [PATCH 6/8] remove time oute

---
 src/components/KYCWall/BaseKYCWall.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index 3973b12aa94..68e5f3f8e24 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -136,12 +136,7 @@ class KYCWall extends React.Component {
             <>
                 <AddPaymentMethodMenu
                     isVisible={this.state.shouldShowAddPaymentMenu}
-                    onClose={() => {
-                        /* a small delay will schedule this to run after the continue method preventing rerendering of the menu when clicking the menu item */
-                        setTimeout(() => {
-                            this.setState({shouldShowAddPaymentMenu: false});
-                        }, 10);
-                    }}
+                    onClose={() => this.setState({shouldShowAddPaymentMenu: false})}
                     anchorRef={this.anchorRef}
                     anchorPosition={{
                         vertical: this.state.anchorPositionVertical,

From a59b4194832e7c5ce2559d6a3d2b5240173dc372 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Fri, 18 Aug 2023 19:05:18 +0530
Subject: [PATCH 7/8] resolve error with passing argument to children

---
 src/components/KYCWall/BaseKYCWall.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index 68e5f3f8e24..4684901e47b 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -152,7 +152,7 @@ class KYCWall extends React.Component {
                         }
                     }}
                 />
-                {this.props.children(this.continue)}
+                {this.props.children(this.continue, this.anchorRef)}
             </>
         );
     }

From 79c5816a80d8e122cdb386c505f79c78f9e6ad54 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Fri, 18 Aug 2023 19:24:13 +0530
Subject: [PATCH 8/8] add comment in proptypes

---
 src/components/ButtonWithDropdownMenu.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index c1959c41e70..764061d3cd1 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -45,6 +45,8 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /* ref for the button */
     buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };