From fb5605f859581a1b40f79c5675bc64fc60dc4905 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Wed, 15 Jun 2022 13:06:49 +0530 Subject: [PATCH 1/9] Solved overlapping of payment method options --- src/libs/getClickedTargetLocation/index.js | 11 +++++++++++ .../getClickedTargetLocation/index.native.js | 13 +++++++++++++ .../Payments/PaymentsPage/BasePaymentsPage.js | 17 ++++++++++++----- 3 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 src/libs/getClickedTargetLocation/index.js create mode 100644 src/libs/getClickedTargetLocation/index.native.js diff --git a/src/libs/getClickedTargetLocation/index.js b/src/libs/getClickedTargetLocation/index.js new file mode 100644 index 000000000000..fac03005fa02 --- /dev/null +++ b/src/libs/getClickedTargetLocation/index.js @@ -0,0 +1,11 @@ +/** + * Returns the Bounding Rectangle for the passed native event's target. + * + * @param {Object} target + * @returns {Object} + */ +function getClickedTargetLocation(target) { + return target.getBoundingClientRect(); +} + +export default getClickedTargetLocation; diff --git a/src/libs/getClickedTargetLocation/index.native.js b/src/libs/getClickedTargetLocation/index.native.js new file mode 100644 index 000000000000..6d490643d916 --- /dev/null +++ b/src/libs/getClickedTargetLocation/index.native.js @@ -0,0 +1,13 @@ +/** + * We don't need to get the position of the element on native platforms because the popover will be bottom mounted + * + * @returns {Object} + */ +function getClickedTargetLocation() { + return { + bottom: 0, + left: 0, + }; +} + +export default getClickedTargetLocation; diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index e0b6b61d4668..43023f305be5 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -18,7 +18,7 @@ import Popover from '../../../../components/Popover'; import MenuItem from '../../../../components/MenuItem'; import Text from '../../../../components/Text'; import * as PaymentMethods from '../../../../libs/actions/PaymentMethods'; -import getClickedElementLocation from '../../../../libs/getClickedElementLocation'; +import getClickedTargetLocation from '../../../../libs/getClickedTargetLocation'; import withWindowDimensions from '../../../../components/withWindowDimensions'; import CurrentWalletBalance from '../../../../components/CurrentWalletBalance'; import ONYXKEYS from '../../../../ONYXKEYS'; @@ -47,6 +47,7 @@ class BasePaymentsPage extends React.Component { anchorPositionTop: 0, anchorPositionLeft: 0, addPaymentMethodButton: null, + addPaymentMethodNativeEventCurrentTarget: null, }; this.paymentMethodPressed = this.paymentMethodPressed.bind(this); @@ -83,10 +84,10 @@ class BasePaymentsPage extends React.Component { } setMenuPosition() { - if (!this.state.addPaymentMethodButton) { + if (!this.state.addPaymentMethodNativeEventCurrentTarget) { return; } - const buttonPosition = getClickedElementLocation(this.state.addPaymentMethodButton); + const buttonPosition = getClickedTargetLocation(this.state.addPaymentMethodNativeEventCurrentTarget); this.setPositionAddPaymentMenu(buttonPosition); } @@ -125,10 +126,13 @@ class BasePaymentsPage extends React.Component { * @param {Boolean} isDefault */ paymentMethodPressed(nativeEvent, accountType, account, isDefault) { - const position = getClickedElementLocation(nativeEvent); + const position = getClickedTargetLocation(nativeEvent.currentTarget); + this.setState({ + addPaymentMethodNativeEventCurrentTarget: nativeEvent.currentTarget, addPaymentMethodButton: nativeEvent, }); + if (accountType) { let formattedSelectedPaymentMethod; if (accountType === CONST.PAYMENT_METHODS.PAYPAL) { @@ -203,7 +207,10 @@ class BasePaymentsPage extends React.Component { * Hide the add payment modal */ hideAddPaymentMenu() { - this.setState({shouldShowAddPaymentMenu: false}); + this.setState({ + addPaymentMethodNativeEventCurrentTarget: null, + shouldShowAddPaymentMenu: false + }); } /** From 0fb60bb4d52b0f38b96ae3776bd9481c6692faa0 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Fri, 24 Jun 2022 00:57:47 +0530 Subject: [PATCH 2/9] Reused variables --- .../Payments/PaymentsPage/BasePaymentsPage.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 43023f305be5..ec47470647d0 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -47,7 +47,6 @@ class BasePaymentsPage extends React.Component { anchorPositionTop: 0, anchorPositionLeft: 0, addPaymentMethodButton: null, - addPaymentMethodNativeEventCurrentTarget: null, }; this.paymentMethodPressed = this.paymentMethodPressed.bind(this); @@ -84,10 +83,11 @@ class BasePaymentsPage extends React.Component { } setMenuPosition() { - if (!this.state.addPaymentMethodNativeEventCurrentTarget) { + if (!this.state.addPaymentMethodButton) { return; } - const buttonPosition = getClickedTargetLocation(this.state.addPaymentMethodNativeEventCurrentTarget); + + const buttonPosition = getClickedTargetLocation(this.state.addPaymentMethodButton); this.setPositionAddPaymentMenu(buttonPosition); } @@ -129,8 +129,7 @@ class BasePaymentsPage extends React.Component { const position = getClickedTargetLocation(nativeEvent.currentTarget); this.setState({ - addPaymentMethodNativeEventCurrentTarget: nativeEvent.currentTarget, - addPaymentMethodButton: nativeEvent, + addPaymentMethodButton: nativeEvent.currentTarget, }); if (accountType) { @@ -208,7 +207,7 @@ class BasePaymentsPage extends React.Component { */ hideAddPaymentMenu() { this.setState({ - addPaymentMethodNativeEventCurrentTarget: null, + addPaymentMethodButton: null, shouldShowAddPaymentMenu: false }); } From c074518d732163a1d7b856c45436c8aa649e9899 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Fri, 24 Jun 2022 01:38:48 +0530 Subject: [PATCH 3/9] resolved lint error --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index ec47470647d0..3847125c3a90 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -208,7 +208,7 @@ class BasePaymentsPage extends React.Component { hideAddPaymentMenu() { this.setState({ addPaymentMethodButton: null, - shouldShowAddPaymentMenu: false + shouldShowAddPaymentMenu: false, }); } From e7a74a57539f3c1ad823d430809f98c24034c38b Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Tue, 28 Jun 2022 13:45:58 +0530 Subject: [PATCH 4/9] Update src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js Co-authored-by: Manan --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 3847125c3a90..3179b0a983dd 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -86,7 +86,6 @@ class BasePaymentsPage extends React.Component { if (!this.state.addPaymentMethodButton) { return; } - const buttonPosition = getClickedTargetLocation(this.state.addPaymentMethodButton); this.setPositionAddPaymentMenu(buttonPosition); } From 95d8d9fd6000c2727420fecc7b43438e346960f8 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Tue, 5 Jul 2022 18:09:14 +0530 Subject: [PATCH 5/9] Using getClickedTargetLocation in KYCWall and removing getClickedElementLocation --- src/components/KYCWall/BaseKYCWall.js | 8 ++++---- src/libs/getClickedElementLocation/index.js | 11 ----------- src/libs/getClickedElementLocation/index.native.js | 13 ------------- 3 files changed, 4 insertions(+), 28 deletions(-) delete mode 100644 src/libs/getClickedElementLocation/index.js delete mode 100644 src/libs/getClickedElementLocation/index.native.js diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js index 1f81b5268137..9f9b67304bfb 100644 --- a/src/components/KYCWall/BaseKYCWall.js +++ b/src/components/KYCWall/BaseKYCWall.js @@ -5,7 +5,7 @@ import themeColors from '../../styles/themes/default'; import CONST from '../../CONST'; import Navigation from '../../libs/Navigation/Navigation'; import AddPaymentMethodMenu from '../AddPaymentMethodMenu'; -import getClickedElementLocation from '../../libs/getClickedElementLocation'; +import getClickedTargetLocation from '../../libs/getClickedTargetLocation'; import * as PaymentUtils from '../../libs/PaymentUtils'; import * as PaymentMethods from '../../libs/actions/PaymentMethods'; import ONYXKEYS from '../../ONYXKEYS'; @@ -49,7 +49,7 @@ class KYCWall extends React.Component { if (!this.state.transferBalanceButton) { return; } - const buttonPosition = getClickedElementLocation(this.state.transferBalanceButton); + const buttonPosition = getClickedTargetLocation(this.state.transferBalanceButton); const position = this.getAnchorPosition(buttonPosition); this.setPositionAddPaymentMenu(position); } @@ -93,13 +93,13 @@ class KYCWall extends React.Component { */ continue(event) { this.setState({ - transferBalanceButton: event.nativeEvent, + transferBalanceButton: event.nativeEvent.target, }); // Check to see if user has a valid payment method on file and display the add payment popover if they don't if (!PaymentUtils.hasExpensifyPaymentMethod(this.props.cardList, this.props.bankAccountList)) { Log.info('[KYC Wallet] User does not have valid payment method'); - const clickedElementLocation = getClickedElementLocation(event.nativeEvent); + const clickedElementLocation = getClickedTargetLocation(event.nativeEvent.target); const position = this.getAnchorPosition(clickedElementLocation); this.setPositionAddPaymentMenu(position); this.setState({ diff --git a/src/libs/getClickedElementLocation/index.js b/src/libs/getClickedElementLocation/index.js deleted file mode 100644 index f29a57ebf5c0..000000000000 --- a/src/libs/getClickedElementLocation/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * We don't need to get the position of the element on native platforms because the popover will be bottom mounted - * - * @param {Object} nativeEvent - * @returns {Object} - */ -function getClickedElementLocation(nativeEvent) { - return nativeEvent.target.getBoundingClientRect(); -} - -export default getClickedElementLocation; diff --git a/src/libs/getClickedElementLocation/index.native.js b/src/libs/getClickedElementLocation/index.native.js deleted file mode 100644 index e6ed6a720435..000000000000 --- a/src/libs/getClickedElementLocation/index.native.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * We don't need to get the position of the element on native platforms because the popover will be bottom mounted - * - * @returns {Object} - */ -function getClickedElementLocation() { - return { - bottom: 0, - left: 0, - }; -} - -export default getClickedElementLocation; From 44f369540c5cbe170a5e6586c737ef7509d20b3a Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Sat, 16 Jul 2022 10:26:36 +0530 Subject: [PATCH 6/9] removed 'addPaymentMethodButton: null' call --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 3179b0a983dd..f7ca289cb2bf 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -206,7 +206,6 @@ class BasePaymentsPage extends React.Component { */ hideAddPaymentMenu() { this.setState({ - addPaymentMethodButton: null, shouldShowAddPaymentMenu: false, }); } From 52e99ba109ff029e08e076ddd7384ac764494e43 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Sat, 27 Aug 2022 13:51:35 +0530 Subject: [PATCH 7/9] Update src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js Co-authored-by: Marc Glasser --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index f7ca289cb2bf..a9c6daccfad8 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -205,9 +205,7 @@ class BasePaymentsPage extends React.Component { * Hide the add payment modal */ hideAddPaymentMenu() { - this.setState({ - shouldShowAddPaymentMenu: false, - }); + this.setState({shouldShowAddPaymentMenu: false}); } /** From 7990e9f99257e8e60bf3634b3e50c38bc5fe48e5 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Sat, 27 Aug 2022 13:51:56 +0530 Subject: [PATCH 8/9] Update src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js Co-authored-by: Marc Glasser --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index a9c6daccfad8..50283b113003 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -126,7 +126,6 @@ class BasePaymentsPage extends React.Component { */ paymentMethodPressed(nativeEvent, accountType, account, isDefault) { const position = getClickedTargetLocation(nativeEvent.currentTarget); - this.setState({ addPaymentMethodButton: nativeEvent.currentTarget, }); From 151e27bc751231bd6723e5238a2efe3428b11d3c Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Sat, 27 Aug 2022 13:52:04 +0530 Subject: [PATCH 9/9] Update src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js Co-authored-by: Marc Glasser --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 50283b113003..90cea0e7a622 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -129,7 +129,6 @@ class BasePaymentsPage extends React.Component { this.setState({ addPaymentMethodButton: nativeEvent.currentTarget, }); - if (accountType) { let formattedSelectedPaymentMethod; if (accountType === CONST.PAYMENT_METHODS.PAYPAL) {