-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[HOLD for payment 2023-10-16] [$500] Add payment method popover has wrong position #26070
Comments
Triggered auto assignment to @alexpensify ( |
Bug0 Triage Checklist (Main S/O)
|
ProposalPlease state again the problem we are trying to solve in this issue.Add payment method popover has wrong position. What is the cause of this issue?We does not pass App/src/components/SettlementButton.js Line 173 in 08c2f5d
App/src/components/KYCWall/BaseKYCWall.js Line 137 in 08c2f5d
And after redesign money request report, calculating anchor position in getAnchorPosition does not updated.App/src/components/KYCWall/BaseKYCWall.js Lines 64 to 76 in 08c2f5d
What changes do you think we should make to solve the problem?First, we should pass
<KYCWall
...
+ anchorAlignment={this.props.anchorAlignment}
>
<AddPaymentMethodMenu
...
+ anchorAlignment={this.props.anchorAlignment}
>
<PopoverMenu
...
+ anchorAlignment={this.props.anchorAlignment}
> Second, we should update anchor position calculating in getAnchorPosition(domRect) {
return {
anchorPositionVertical: this.props.anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP
? domRect.top + domRect.height + CONST.MODAL.POPOVER_MENU_PADDING
: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
anchorPositionHorizontal: domRect.left + domRect.width,
};
} What alternative solutions have you investigated? (Optional)None. |
@alexpensify as a bug reporter, I'd like to review this as C+ as I already have context while reviewing another PR |
I'm catching up from being OOO, I will test soon. |
Job added to Upwork: https://www.upwork.com/jobs/~01a94242021f694c9e |
Current assignee @alexpensify is eligible for the External assigner, not assigning anyone new. |
Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new. |
@aimane-chnaif - let's solve this bug! I've assigned the issue to you. |
@alexpensify, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
ProposalPlease re-state the problem that we are trying to solve in this issue.Add payment method popover has wrong position in money report header. What is the root cause of that problem?
Due to which, the default prop is always used which is to anchor at bottom i.e. show the menu at top of the button - App/src/components/PopoverMenu/index.js Lines 41 to 44 in f77a5a5
This combined with the wrong calculation below shows wrong result, I added the correct calculation in this PR - App/src/components/KYCWall/BaseKYCWall.js Lines 64 to 76 in f77a5a5
What changes do you think we should make in order to solve the problem?We need to add In Then, in anchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
}} This prop will be passed down like Other than this, we just need to fix the method to calculate the getAnchorPosition(domRect) {
if (this.props.anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
return {
anchorPositionVertical: domRect.top + (domRect.height + CONST.MODAL.POPOVER_MENU_PADDING),
anchorPositionHorizontal: domRect.left + 20,
};
}
return {
anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
anchorPositionHorizontal: domRect.left,
};
}
popoverPlacement and started passing down anchorAlignment to KYCWall in SettlementButton , we also need to do the following changes to prevent regression - |
@aimane-chnaif - When you get a chance, can you look at the proposals to identify if one will fix this issue? Thanks! |
@aimane-chnaif - any update here? |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
@Nikhil-Vats does your proposal have any meaningful difference from @StevenKKC's proposal? |
And let's try to find out all popovers throughout the app where similar issue happens. |
Yes @aimane-chnaif, I know they appear similar at first but I only added a proposal here as I know the working of Firstly, they haven't even specified what value needs to be passed as prop for I wouldn't have added a proposal if the existing proposal solved everything without regression. |
Yes @aimane-chnaif, it would solve the related issue as well, that is a dupe - Screen.Recording.2023-09-07.at.10.01.15.PM.mov |
@aimane-chnaif I forgot to specify one of the key difference in my proposal, there is an existing prop |
ProposalPlease re-state the problem that we are trying to solve in this issue.KYCWall ButtonWithDropdownMenu Popovers open in the incorrect places What is the root cause of that problem?Default vertical App/src/components/KYCWall/BaseKYCWall.js Lines 137 to 145 in 57b7606
What changes do you think we should make in order to solve the problem?
Based on this
App/src/components/KYCWall/BaseKYCWall.js Lines 137 to 145 in 57b7606
Screen.Recording.2023-09-08.at.11.41.23.mp4 |
📣 @aimane-chnaif 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app! |
📣 @Nikhil-Vats 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
📣 @aimane-chnaif 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app! |
I have started working on the PR and it will be ready for review tonight. |
Awesome, looks like the PR is ready for review. |
🎯 ⚡️ Woah @aimane-chnaif / @Nikhil-Vats, great job pushing this forwards! ⚡️ The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉
On to the next one 🚀 |
|
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.79-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2023-10-16. 🎊 After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.
For reference, here are some details about the assignees on this issue:
As a reminder, here are the bonuses/penalties that should be applied for any External issue:
|
BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:
|
I will work on the payment process today |
Here is the payment summary:
Upwork Job: https://www.upwork.com/jobs/~01a94242021f694c9e *If applicable, the bonuses will be applied on the final payment Extra Notes regarding payment:
|
@aimane-chnaif - I need you to accept the remaining payment for C+ in Upwork. Also, please complete the checklist so we can close this GH. Thanks! |
Alright, @aimane-chnaif you've been paid via Upwork for reporting and C+. Please complete the checklist, thanks! I want to close this GH asap. |
|
Thanks! Closing this GH since all actions have been completed here. |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Action Performed:
Expected Result:
Popover should show below button
Actual Result:
Popover overlaps with button
Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.57-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Screen.Recording.2023-08-18.at.1.51.28.PM.mov
Recording.2998.mp4
Expensify/Expensify Issue URL:
Issue reported by: @aimane-chnaif
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692363288571469
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: