Payment - Preview is not shown when deleting paypal.me payment method

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Issue was found when executing #8025

Action Performed:

Open app in mobile/ use expensify in desktop web and decrease the screen size
Go to Settings -> Payment
Add paypal account in add payment method
Select Paypal.me
Click on Paypal.me above delete button

Expected Result:

I can see Payment preview

Actual Result:

I do not see Payment preview

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web

Version Number: 1.1.42-3

Reproducible in staging?: Y

Reproducible in production?: Y (New feature)

Email or phone of affected tester (no customers): andreylazutkinutest+qqq@gmail.com / w323052760We

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub
Issue was found when executing #8025

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

@madmax330

Triggered auto assignment to @madmax330 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

@phivh

Except of the issue which is already linked (which I am not sure if is causing this problem), there is also this PR which made changes to this:

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Line 228 in d05c56e

    
           const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth;

so it might be causing the anchorPositionTop to not be zero on desktop if there is only the paypal me option (I see in the Pr that the tests were usually with more options). cc @phivh would you be able to have a look whether you see any link between these?

Also not sure if this needs to be deployblocker if it also occurs in Production. Can users use Paypal.me now in N6? They cant use IOU yet.

@mountiny

@mountiny the changes that I did only kept the position of the menu while the window resize on the desktop which was the same logic to set position before. Nothing changed in the menu UI or show/hide logic.

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Lines 93 to 105 in d05c56e

    
               /** 
        
                * Set position of the payment menu 
        
                * 
        
                * @param {Object} position 
        
                */ 
        
               setPositionAddPaymentMenu(position) { 
        
                   this.setState({ 
        
                       anchorPositionTop: position.bottom, 
        
                       // We want the position to be 13px to the right of the left border 
        
                       anchorPositionLeft: position.left + 13, 
        
                   }); 
        
               }

I thought the payment preview was only shown for the mobile site because the delete button on the desktop is right under the Paypal payment item.
Thus, I am quite sure that the change in the PR is not linked to this issue.

@phivh

@phivh Thank you very much for looking into this 🙇

@bfitzexpensify

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

Upwork post here

@Santhosh-Sellavel

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

@marcaaron

Triggered auto assignment to @marcaaron (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

Proposal

We show the preview if isPopoverBottomMount is true, if we wanna show the payment preview in all the cases then we can just remove this check

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Lines 305 to 309 in 3696074

    
           {isPopoverBottomMount && ( 
        
               <MenuItem 
        
                   title={this.state.formattedSelectedPaymentMethod.title} 
        
                   icon={this.state.formattedSelectedPaymentMethod.icon} 
        
                   description={this.state.formattedSelectedPaymentMethod.description}

also we aren't using isPopoverBottomMount anywhere else so I think we can also remove it from here -

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Line 228 in 3696074

    
           const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth;

@marcaaron

@marcaaron
Showing preview would look redundant, as the popup is close to the selected payment method.

Can you confirm on this do we need this change?

@marcaaron

@marcaaron
If we need this change we are good to go with @thesahindia proposal #8097 (comment)

🎀👀🎀 C+ reviewed

I don't really get this issue at all or understand why we need a preview for this. Seems extremely low value to me.

@madmax330

@madmax330 says

we should fix the preview once we determine how it should be.

I think it should be exactly how it is now. If anyone disagrees feel free to reopen.

Navigation Menu

Repository navigation

Payment - Preview is not shown when deleting paypal.me payment method #8097

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

3 remaining items

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	/**
	* Set position of the payment menu
	*
	* @param {Object} position
	*/
	setPositionAddPaymentMenu(position) {
	this.setState({
	anchorPositionTop: position.bottom,

	// We want the position to be 13px to the right of the left border
	anchorPositionLeft: position.left + 13,
	});
	}

	{isPopoverBottomMount && (
	<MenuItem
	title={this.state.formattedSelectedPaymentMethod.title}
	icon={this.state.formattedSelectedPaymentMethod.icon}
	description={this.state.formattedSelectedPaymentMethod.description}

Payment - Preview is not shown when deleting paypal.me payment method #8097

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

OSBotify commented on Mar 11, 2022

MelvinBot commented on Mar 11, 2022

mountiny commented on Mar 11, 2022

phivh commented on Mar 13, 2022

mountiny commented on Mar 13, 2022

MelvinBot commented on Mar 14, 2022

3 remaining items

bfitzexpensify commented on Mar 15, 2022

MelvinBot commented on Mar 15, 2022

MelvinBot commented on Mar 15, 2022

thesahindia commented on Mar 15, 2022

Proposal

Santhosh-Sellavel commented on Mar 15, 2022

Santhosh-Sellavel commented on Mar 15, 2022

marcaaron commented on Mar 18, 2022

marcaaron commented on Mar 18, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions