Store account validated state and display error early on VBA flow

[robertjchen]

Thanks for the review! In addition to API-level preventions, we need to add a friendly message early on in the VBA flow to inform users that they must validate their account in order to proceed. Let's add the message to the Add bank account menu and disable the options there 👍

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/178698
Ref https://github.com/Expensify/Expensify/issues/177017

Tests / QA

1. Sign up with new account on OldDot
2. Select "Get Started" in WelcomeUser inbox task
3. Get directed to NewDot
4. Click "Get Started" in the new workspace modal and the "Add bank account" modal will pop up
5. Witness that both options are disabled and an error message is shown
6. Validate the account email and go through the steps again to ensure that the options are enabled and the error message is no longer shown.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[shawnborton]

For accessibility purposes, do we need to do more than just change the color of the label? Perhaps we need to consider the cursor, or some way to denote that this "button" is disabled in the code?

[robertjchen]

@shawnborton Ah, great point! Looks like they added "aria-disabled" support for Pressable components in React Native back in February (which we use for our MenuItems). Updated the PR with the accessibility tweak 👍

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

[luacmartins]

LGTM and tests well!

[OSBotify]

🚀 Cherry-picked to staging by @luacmartins in version: 1.1.2-7 🚀

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

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

[isagoico]

@robertjchen hello! We're cureently blocked from testing this PR. Our domain accounts already have the Expensify card so we're not able to access the Get Started button in workspace.

[robertjchen]

@isagoico We were able to test this flow ourselves after it went out, so I think we can check this off the deploy checklist 👍

[OSBotify]

🚀 Deployed to production by @timszot in version: 1.1.2-7 🚀

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

[OSBotify]

🚀 Deployed to staging by @luacmartins in version: 1.1.2-9 🚀

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

[OSBotify]

🚀 Deployed to production by @timszot in version: 1.1.3-1 🚀

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

[eVoloshchak]

👋 I'm not sure if this was true at the time of creation of this PR, but this might have caused an issue in #18156
This is an edge case, which can be reproduced only if you clear cookies and site data and then sign in again

Before the API call to get user info is completed,this.props.user.validated is undefined, which causes validateAccountError to display for a split second while API call is in progress
We resolved this by displaying a loading indicator while the API call is in progress, but that didn't exist when this PR was created, so {this.props.user.validated === false && ( would have avoided this

[robertjchen]

wow, great catch and that makes sense 🤯