make payment method preview non interactive

[Tushu17]

Details

Make payment method preview non interactive

Fixed Issues

$ #7972

Tests

• Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

• I verified the PR has a small number of commits behind main
• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I clearly indicated the environment tests should be run in (Staging vs Production)
• I wrote testing steps that cover success & fail scenarios (if applicable)
• I included screenshots or videos for tests on all platforms
• I ran the tests & veryfy they passed on:
  • iOS / native
  • Android / native
  • iOS / Safari
  • Android / Chrome
  • MacOS / Chrome
  • MacOS / Desktop
• I verified there are no console errors related to changes in this PR
• I followed proper code patterns (see Reviewing the code)
  • I added comments when the code was not self explanatory
  • I put all copy / text shown in the product in all src/languages/* files (if applicable)
  • I followed proper naming convention for platform-specific files (if applicable)
  • I followed style guidelines (in Styling.md) for all style edits I made
  • I followed the JSDocs style guidelines (in STYLE.md)
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I corroborated the UI performance was not affected (the performance is the same than main branch)
• If I created a new component I verified that a similar component doesn't exist in the codebase

QA Steps

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
6. Check if paypal preview is clickable

• Verify that no errors appear in the JS console

Screenshots

Web

web.mov

Mobile Web

Desktop

iOS

ios.mov

Android

[parasharrajat]

LGTM.

cc: @tgolen

PR Reviewer Checklist

• I verified the Author pulled main before submitting the PR
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the testing environment is mentioned in the test steps
• I verified testing steps cover success & fail scenarios (if applicable)
• I verified tests pass on all platforms & I tested again on all platforms
• I checked that screenshots or videos are included for tests on all platforms
• I verified there are no console errors related to changes in this PR
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified comments were added when the code was not self explanatory
  • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
  • I verified proper naming convention for platform-specific files was followed (if applicable)
  • I verified style guidelines were followed
• I verified that this PR follows the guidelines as stated in the Review Guidelines

🎀 👀 🎀 C+ reviewed

[tgolen]

LGTM but looks like there are still checklist items not checked off, so I cannot merge yet.

[Tushu17]

LGTM but looks like there are still checklist items not checked off, so I cannot merge yet.

I have checked all the applicable checkboxes now

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @tgolen in version: 1.1.42-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[chiragsalian]

Tested the PR on staging and it LGTM. The issue about deleting paypal is handled separately so i'm checking this issue off the checklist.

[OSBotify]

🚀 Deployed to production by @chiragsalian in version: 1.1.42-6 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅