Fix blank screen when showing the WorkspaceResetBankAccount modal by MariaHCD · Pull Request #14726 · Expensify/App

MariaHCD · 2023-02-01T09:36:36Z

Details

Because we return the WorkspaceResentBankAccountModal here, we're inadvertently hiding the Continue with setup form leading to a blank screen. Similarly, we hide the EnableStep and ValidationStep components.

This PR ensure that the ContinueBankAccountSetup, EnableStep and ValidationStep are still visible when the WorkspaceResetBankAccount modal is shown.

Fixed Issues

$ #14692
$ #14566
PROPOSAL: NA

Tests

Bank account in setup

Navigate to Workspace > Connect bank account
Start the process of adding a VBA
Exit the flow midway
Navigate to Workspace > Connect bank account again
Once you see Continue with setup, click Start over
Verify the modal is shown and Continue with step is still shown in the background

Verify that clicking Cancel or the confirm button in the modal works as expected

Verifying bank account

Follow this SO to create a VERIFYING bank account. If you don't have access to the StackOverflow use the following details:

Select "Manually enter account details" and enter Routing number 011401533 and Account number 1111222233331111
Company Info - enter random info but complete all fields. You will fail once and get asked to double check information. Select "Save & Continue" again
Personal Info - use any test data. For last 4 SSN use 3333.
Onfido - add a test ID
Beneficial Owners:
- Toggle terms and conditions
- Toggle confirmation that the information provided is true and accurate

Verify you see the ValidationStep
Click No, start over and verify that the confirm modal is shown along with the ValidationStep in the background

Verify that clicking Cancel or the confirm button in the modal works as expected

Open bank account

Follow this SO to create an OPEN bank account. If you do not have access to the StackOverflow, follow the below steps:

Click "Log into your bank"
- Plaid modal - Choose Wells Fargo (use Bank of America if Wells Fargo is not available)
- Plaid modal - User Id: user_good
- Plaid modal - Password: pass_good
- Plaid modal - Submit
- Plaid modal - If they request a verification code via mobile sms, enter: credential_good when required
- Choose the Saving account: Plaid Saving11122XXXXXX111
- Save & Continue

Company Information (Enter the info below, and anything in non-specified fields):
- Legal Business Name: Alberta Bobbeth Charleson
- Company website: Enter any valid formatted website
- Tax ID number: 123456789
- Confirm company is not on list of restricted businesses

Requestor Information (Enter the info below, and anything in non-specified fields)
- First name: Alberta
- Second name: Charleson
- Toggle confirmation you are authorized to use company bank account
- Save & Continue (Note: You will receive an error asking to "Please verify you name and date of birth". Hit "Save & Continue" again without changing any inputs.)

Beneficial Owners
- Toggle terms and conditions
- Toggle confirmation that the information provided is true and accurate

Verify that you see the EnableStep
Click Disconnect bank account and verify that the confirm modal is shown along with the EnableStep in the background

Verify that clicking Cancel or the confirm button in the modal works as expected

Offline tests

Go offline on the Continue with setup page
Verify that clicking Start over shows the confirmation modal and the background screen does not go blank
Verify that clicking cancel dismisses the confirmation modal
Verify that confirming the modal leads you to the BankAccount step

QA Steps

Same as test steps

PR Author Checklist

Screenshots/Videos

Web

Open.bank.account.webm

Verifying.bank.account.webm

Bank.account.in.setup.webm

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

…Step

…account-reset-fix # Conflicts: # src/pages/ReimbursementAccount/ValidationStep.js

melvin-bot · 2023-02-02T10:31:32Z

@rushatgabhane @ctkochan22 One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

nkuoch · 2023-02-02T20:10:11Z

+                            BankAccounts.requestResetFreePlanBankAccount();
+                        }}
+                    />
+                    {this.props.reimbursementAccount.shouldShowResetModal && (


thoughts about putting this direcly within ContinueBankAccountSetup?

nkuoch · 2023-02-02T20:11:53Z

 };

+const defaultProps = {
+    onConfirm: null,


or you can default to () => {} and then no need for if (props.onConfirm) { below

MariaHCD · 2023-02-03T09:02:58Z

Updated!

One thing I noticed when testing (and I'm not sure what the cause is) but if you click start over and then quickly click Connect with Plaid or Connect manually, it takes you to the next page but then quickly reverts back to the previous page with the options:

1.New.Expensify.webm

MariaHCD · 2023-02-03T09:21:26Z

Ah, I think the above error is because the subStep is being overridden and set to null when resetFreePlanBankAccount completes

MariaHCD · 2023-02-03T10:05:21Z

Fixed it by adding isLoading to the Onyx data for RestartBankAccountSetup so we have a loading screen until the API command is complete:

1.New.Expensify.1.webm

nkuoch · 2023-02-03T10:11:25Z

+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {isLoading: false},
+                },
+            ]


Missing comma

rushatgabhane · 2023-02-03T21:27:40Z

@MariaHCD
@ctkochan22 is it just me or

Bug: iOS - blank screen

Steps

On WEB - enter bank details manually and reach step 3 (personal info).
Close the bank setup
On iOS - go to connect bank account page
You might see a blank screen here
In case you don't see a blank screen, go back until you reach connect bank page.
You'll see a blank screen here

Screen.Recording.2023-02-04.at.2.53.39.AM.mov

MariaHCD · 2023-02-06T09:57:26Z

Thanks for testing @rushatgabhane! Let me see if I can reproduce the issue.

MariaHCD · 2023-02-06T13:22:10Z

Okay, I can reproduce it too:

Looking into it but appreciate any ideas/suggestions for why this might be happening! Strange that it only happens on iOS. Let me also try Android native.

MariaHCD · 2023-02-06T15:02:23Z

Okay, I thought might've been due to the routing but both are the same on web and iOS:

Route on web:

{
    "key": "ReimbursementAccount-y-7304S1Zt9qyPemSVhr_",
    "name": "ReimbursementAccount",
    "path": "/bank-account/",
    "params": {
        "stepToOpen": "BankAccountStep"
    }
}

Route on iOS:

{
   "key":"ReimbursementAccount-5pIjiTW7wxxB8i2NwmGUP",
   "name":"ReimbursementAccount",
   "params":{
      "stepToOpen":"BankAccountStep"
   },
   "path":"/bank-account/"
}

But for some reason, the ContinueBankAccountSetup isn't showing on iOS. Will investigate further.

rushatgabhane · 2023-02-07T17:24:20Z

ohh, investigating

…account-reset-fix

MariaHCD · 2023-02-09T11:34:08Z

Okay, I'm not sure why but the blank screen on iOS was due to wrapping ContinueBankAccountSetup in <View>:

Removed the tags, re-tested and now it looks better:

Simulator.Screen.Recording.-.iPhone.14.-.2023-02-09.at.15.29.16.mp4

ctkochan22

hmm strange. The view must have been a remnant when there were more components in there.

@rushatgabhane if you can test today that would be amazing!

rushatgabhane

@ctkochan22 LGTM #14726 (review)

MariaHCD · 2023-02-13T13:10:50Z

Thanks, @rushatgabhane!

OSBotify · 2023-02-13T13:14:19Z

✋ 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 · 2023-02-13T18:30:30Z

🚀 Deployed to staging by https://github.com/MariaHCD in version: 1.2.71-0 🚀

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

OSBotify · 2023-02-15T17:47:35Z

🚀 Deployed to production by https://github.com/francoisl in version: 1.2.71-1 🚀

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

MariaHCD · 2023-03-09T08:16:01Z

+                {
+                    onyxMethod: CONST.ONYX.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {isLoading: true},


As a note for myself and reviewers, adding isLoading here caused this side effect: #15114

#15114 (comment)

MariaHCD added 4 commits February 1, 2023 12:54

Display continue setup even when the reset modal is shown

b21b39a

Add onConfirm callback when resetting workspace bank account

ba9bd35

Make onConfirm an optional callback

63be74c

Show workspace bank account reset modal in the Enable and Validation …

68132de

…Step

MariaHCD self-assigned this Feb 1, 2023

MariaHCD added 2 commits February 1, 2023 13:49

Fix missing import

eca45cf

Fix lint errors

4c9dd1f

MariaHCD added the Ready To Build label Feb 1, 2023

MariaHCD mentioned this pull request Feb 1, 2023

[HOLD for payment 2023-02-22] Blank screen appears tapping Start Over to continue to manual step #14692

Closed

1 task

MariaHCD added 2 commits February 2, 2023 13:45

Remove unnecessary condition

68ce2bf

Merge remote-tracking branch 'origin/main' into maria-workspace-bank-…

46dec4a

…account-reset-fix # Conflicts: # src/pages/ReimbursementAccount/ValidationStep.js

MariaHCD marked this pull request as ready for review February 2, 2023 10:30

MariaHCD requested a review from a team as a code owner February 2, 2023 10:30

MariaHCD requested a review from nkuoch February 2, 2023 10:30

melvin-bot Bot requested review from ctkochan22 and rushatgabhane and removed request for a team February 2, 2023 10:31

nkuoch reviewed Feb 2, 2023

View reviewed changes

MariaHCD added 4 commits February 3, 2023 12:46

Include WorkspaceResetBankAccountModal in ContinueBankAccountSetp

593668a

Remove unnecessary props

7ae96ea

Update default for func prop

eaf6f6c

Remove unnecessary if statement

982b971

Add isLoading to resetFreePlanBankAccount

875d452

MariaHCD requested a review from nkuoch February 3, 2023 10:05

nkuoch reviewed Feb 3, 2023

View reviewed changes

MariaHCD added 3 commits February 9, 2023 15:25

Remove View to fix issue with blank screen on iOS

e936a7c

Merge remote-tracking branch 'origin/main' into maria-workspace-bank-…

ce95ec9

…account-reset-fix

Use ScreenWrapper component to avoid header being cut off on iOS

bfc75e8

MariaHCD dismissed stale reviews from ctkochan22 and nkuoch via bfc75e8 February 9, 2023 11:31

Fix lint error

c3c505f

MariaHCD requested review from ctkochan22, nkuoch and rushatgabhane February 9, 2023 11:42

nkuoch approved these changes Feb 9, 2023

View reviewed changes

ctkochan22 approved these changes Feb 9, 2023

View reviewed changes

rushatgabhane approved these changes Feb 13, 2023

View reviewed changes

MariaHCD merged commit 8dffdf8 into main Feb 13, 2023

MariaHCD deleted the maria-workspace-bank-account-reset-fix branch February 13, 2023 13:10

OSBotify mentioned this pull request Feb 13, 2023

Deploy Checklist: New Expensify 2023-02-13 #15094

Closed

8 tasks

Santhosh-Sellavel mentioned this pull request Feb 13, 2023

[$1000] iOS - Connect Bank Account - After manual VBA flow, menu is overlapping with Device borders on iPhone XR #14519

Closed

1 task

kbecciv mentioned this pull request Feb 14, 2023

[HOLD for payment 2023-03-16] Workspace- Offline mode Start over does not lead to the next step of add the bank account #15114

Closed

6 tasks

MariaHCD mentioned this pull request Feb 15, 2023

[Offline] Restarting workspace bank account setup should show the BankAccountStep #15161

Merged

52 tasks

MelvinBot mentioned this pull request Feb 15, 2023

[HOLD for payment 2023-02-22] Connect Bank Account - If user clicks disconnect bank account, the background modal goes blank #14566

Closed

2 tasks

MariaHCD commented Mar 9, 2023

View reviewed changes

Conversation

MariaHCD commented Feb 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Bank account in setup

Verifying bank account

Open bank account

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Feb 2, 2023

Uh oh!

nkuoch Feb 2, 2023

Choose a reason for hiding this comment

Uh oh!

nkuoch Feb 2, 2023

Choose a reason for hiding this comment

Uh oh!

MariaHCD commented Feb 3, 2023

Uh oh!

MariaHCD commented Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MariaHCD commented Feb 3, 2023

Uh oh!

nkuoch Feb 3, 2023

Choose a reason for hiding this comment

Uh oh!

rushatgabhane commented Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MariaHCD commented Feb 6, 2023

Uh oh!

MariaHCD commented Feb 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MariaHCD commented Feb 6, 2023

Uh oh!

rushatgabhane commented Feb 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MariaHCD commented Feb 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ctkochan22 left a comment

Choose a reason for hiding this comment

Uh oh!

rushatgabhane left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MariaHCD commented Feb 13, 2023

Uh oh!

OSBotify commented Feb 13, 2023

Uh oh!

OSBotify commented Feb 13, 2023

Uh oh!

OSBotify commented Feb 15, 2023

Uh oh!

MariaHCD Mar 9, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MariaHCD commented Feb 1, 2023 •

edited

Loading

MariaHCD commented Feb 3, 2023 •

edited

Loading

rushatgabhane commented Feb 3, 2023 •

edited

Loading

MariaHCD commented Feb 6, 2023 •

edited

Loading

rushatgabhane commented Feb 7, 2023 •

edited

Loading

MariaHCD commented Feb 9, 2023 •

edited

Loading

rushatgabhane left a comment •

edited

Loading