[HOLD for payment 2022-03-22] Payment method preview is clickable for bottom docked modal - reported by @Tushu17

[mvtglobally]

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:

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

Expected Result:

Text shouldn't be clickable as it doesn't perform any function.

Actual Result:

It is clickable in small screen and in desktop small screen, cursor is shown as pointer over it.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.41-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

WhatsApp.Video.2022-02-17.at.4.29.50.PM.mp4

screen-rec3.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1645098315409679

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Tushu17]

Proposal

We need to pass disabled and interactive={false} to MenuItem below -

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

Lines 294 to 299 in 5dab0ff

	{isPopoverBottomMount && (
	<MenuItem
	title={this.state.formattedSelectedPaymentMethod.title}
	icon={this.state.formattedSelectedPaymentMethod.icon}
	description={this.state.formattedSelectedPaymentMethod.description}
	wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}

   <MenuItem
       title={this.state.formattedSelectedPaymentMethod.title}
       icon={this.state.formattedSelectedPaymentMethod.icon}
       description={this.state.formattedSelectedPaymentMethod.description}
       wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+      disabled
+      interactive={false}
   />

[laurenreidexpensify]

https://www.upwork.com/jobs/~01a5afd1f614dd5d18

[MelvinBot]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[laurenreidexpensify]

@tgolen sorry I jumped the gun here before confirming it was external. I might have confused the order, but can you please add external label too? Thanks

[MelvinBot]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[tgolen]

OK, labeled! The proposal looks fine to me too, so 🟢 on hiring them on Upwork.

[parasharrajat]

Yup, @Tushu17 's proposal looks good.
🎀 👀 🎀 C+ reviewed

[laurenreidexpensify]

Wow that was quick! :)

[MelvinBot]

📣 @Tushu17 You have been assigned to this job by @laurenreidexpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.42-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• make payment method preview non interactive #8025

If no regressions arise, payment will be issued on 2022-03-22. 🎊

[laurenreidexpensify]

@Tushu17 sorry I missed this, but as soon as you accept offer I will issue payment in Upwork for $500 for reporting and implementing solution

[Tushu17]

@laurenreidexpensify ok done, I've accepted the offer.

[laurenreidexpensify]

All C and C+ payments have been issued in Upwork 👍🏽