Handle iframe/webview navigation in-app

[luacmartins]

Details

We want to handle iframe navigation in NewDot. This PR makes the Statement page communicate events to its parent if it's being rendered as an iframe.

cc @thienlnam

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/200657

Tests

Before you start:

1. To test it in web/desktop, you'll need to change the urls here, here and here from https://new.expensify.com to localhost:8080.
2. To test in mobile, you'll need to:
   a. Change this url to https://www.expensify.com/statement.php?period=202112
   b. Grab a production authToken for your account and hardcode it here

Steps

1. Pull the changes from this Web-E PR
2. Change this event handler to the one below:

onSelected: () => Navigation.navigate(ROUTES.getWalletStatementWithDateRoute(202112)),

1. On an account without Wallet transactions, navigate to + > Split bills
2. Click any of the links: Request money, Send money, Split bill.
3. Verify that you are navigate to the corresponding page in-app.

• Verify that no errors appear in the JS console

QA Steps

As of now, this can only be tested on Web.

1. Login to your account on NewDot and navigate to /statement/202112.
2. Verify that clicking any of the links will redirect you to the appropriate page in-app, i.e. the new page is not rendered within the iframe.

• 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 & verified 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

PR Reviewer Checklist

• I verified the PR has a small number of commits behind main
• 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 checked that screenshots or videos are included for tests on all platforms
• I verified tests pass on all platforms & I tested again 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 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 the JSDocs style guidelines (in STYLE.md) were followed
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified the UI performance was not affected (the performance is the same than main branch)
• If a new component is created I verified that a similar component doesn't exist in the codebase

Screenshots

Web

web.mov

Mobile Web

I couldn't find a way to test this on mWeb because of the conflicting cross origin restrictions. Web needs to access local host, but the device itself blocks non-secure connections and thus needs the prod API.

Desktop

desktop.mov

iOS

ios.mov

Android

android.mov

[luacmartins]

Updated with message type!

[PauloGasparSv]

LGTM!

[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 @PauloGasparSv in version: 1.1.46-0 🚀

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

[melvin-bot]

Triggered auto assignment to @AndrewGable (InternalQA), see https://stackoverflow.com/c/expensify/questions/5042 for more details.

[luacmartins]

This should be tested in prod!

[OSBotify]

🚀 Deployed to production by @timszot in version: 1.1.46-3 🚀

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