[P2P Statements] Add Wallet Statements Page + Modal

[nickmurray47]

Details

Add a new community package react-native-webview to render the Wallet Statements page in-app on mobile. For web/desktop, have the new Wallet Statements page open link to oldDot.

Fixed Issues

$ GH_LINK

Tests

1. Run in console npm i to install the node_module.
2. Comment out this line https://github.com/Expensify/Expensidev/blob/main/config/www/nginx.www.conf#L24 and restart nginx from the vm sudo systemctl restart nginx
3. Replace the IOU_BILL onSelected property in SidebarScreen.js so that we can test navigating to the statements page by clicking on Split Bill from the global menu.

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

4. Login to an account with Wallet transactions
5. Click on Split Bill, verify you are taken to the Statements page rendering in a new modal.
6. [On web/mWeb] Go to http://localhost:8080/statements/202201 and verify you also see the modal.
7. Logout and log in to an account with no statements and verify you see this screen.

QA Steps

1. Can probably only QA on web for right now and would need to use an account that has wallet transactions, feel free to ping me and I can test on my end.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Desktop

iOS

Android

[nickmurray47]

Just to put down where we are with progress right now, I discovered that the original plan of using react-native-webview would work on basically every platform except for Web.

After chatting briefly with @thienlnam, we said that an acceptable solution would be to use our current Linking.openURL method to open the oldDot statements page in a new tab on web and use the webview to display it on iOS/android/desktop.

[botify]

Hey, I noticed you changed some webpack configuration files. This can break production builds. Did you remember to run a production build locally to verify they still work?

[nickmurray47]

Need to add screenshots + QA steps then this PR is ready to go!

[thienlnam]

Looking good so far, a few comments

[thienlnam]

It would also be good to add testing steps for web and mobile web to just visit http://localhost:8080/statements/202201

[marcochavezf]

Followed the test steps and working fine on web:

But on Android I'm getting this error:

And this message in the logs:

 WARN  Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -2, "description": "net::ERR_NAME_NOT_RESOLVED", "loading": false, "target": 7557, "title": "", "url": "https://www.expensify.com.dev/statement.php?period=202112"}

Not sure if missing something for Android 🤔

[marcochavezf]

It would also be good to add testing steps for web and mobile web to just visit http://localhost:8080/statements/202201

Oh I didn't see this message, maybe that's why I'm getting the error on Android

[nickmurray47]

But on Android I'm getting this error

@marcochavezf This looks related to the nginx config I mentioned in step two? Have you tried testing on iOS as well? I think one step I might've missed out on was running npm i before the react-native-link step. I just added that step in and re-tested Android and works fine for me.

[thienlnam]

Talked to Nick about this 1:1 but this also isn't being used yet so we can test the configuration stuff on staging. Although it would be good to make sure this works in the future on dev so other developers can test it

[nickmurray47]

Although it would be good to make sure this works in the future on dev so other developers can test it

Will open up a PR for this!

[MelvinBot]

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

[botify]

@marcochavezf looks like this was merged without passing tests. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

[marcochavezf]

Hmm this is weird, the tests already passed, I'm going to remove the Emergency label because this is not the case I think 🤔

[nickmurray47]

Another one of these, yeah should not be a problem

[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.

[deetergp]

That's weird. Why was I auto-assigned (not assigned as a reviewer) to a pull request? Especially one that was merged already?!

[OSBotify]

🚀 Deployed to staging by @marcochavezf in version: 1.1.40-0 🚀

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

[nickmurray47]

@deetergp I believe you were auto-assigned as the QA-er since this PR is marked as internal QA. However, I think we'd actually need to test this on Prod and not Staging.

[OSBotify]

🚀 Deployed to production by @yuwenmemon in version: 1.1.40-2 🚀

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