[CP Stg] Wrap AddPersonalBankAccount with KeyboardAvoidingView

[nickmurray47]

Details

Keyboard being hidden when attempting to add a personal bank account from

Fixed Issues

$ GH_LINK

Tests / QA Steps

1. Launch the app and login
2. Navigate to Settings > Payments > Add payment method and select "Bank account"
3. Verify the Plaid modal is presented and login with Chase test credentials.
4. Select an account from the list
5. Enter incorrect or correct password
6. Verify the "Save and continue" button displayed above the keyboard or scrollable to the keyboard

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[github-actions]

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

[nickmurray47]

My XCode environment stopped working yesterday (I think related to Flipper) so if someone has a spare cycle to quickly run through the QA steps and screenshot/confirm the steps work, that would be amazing (maybe @parasharrajat if you can)

[parasharrajat]

Unfortunately, I can't run VBA flow. Don't have access to Chase test credentials

[marcaaron]

I'll do a run through @nickmurray47

[nickmurray47]

Thanks Marc!

[marcaaron]

@parasharrajat for future reference the Chase credentials should work when testing against the staging "secure API" (where the Plaid sandbox is running and all the bank account logic goes through a separate endpoint, but this would need to be set up in the .env file).

The credentials are the same ones recommended by Plaid and described in this doc.

Login: user_good
Password: pass_good

[parasharrajat]

Thanks, @marcaaron, I will keep this as a reference.

[marcaaron]

Passes QA steps for Personal Bank Account flow.

I am a little curious if we can try to make this a feature of the ReimbursementAccountForm instead of having to add it to AddPlaidBankAccount which is used by both VBA and PBA flow. VBA already has a KeyboardAvoidingView here:

https://github.com/Expensify/App/blob/main/src/pages/ReimbursementAccount/ReimbursementAccountPage.js#L209

But the presence of two of them doesn't seem to cause any issues for the VBA flow so it's NAB for me.

[nickmurray47]

I am a little curious if we can try to make this a feature of the ReimbursementAccountForm instead of having to add it to AddPlaidBankAccount which is used by both VBA and PBA flow. VBA already has a KeyboardAvoidingView here:

Good point, happy to go for the refactor as soon as I get my environment working again.

[OSBotify]

🚀 Deployed to staging by @marcaaron in version: 1.1.19-5 🚀

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

[OSBotify]

🚀 Deployed to production by @Julesssss in version: 1.1.21-1 🚀

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