Setup "Connect bank account" workspace flow #5703

marcaaron · 2021-10-06T21:05:50Z

Details

There's a lot of cleanup that needs to happen here (translation / style issues) + still waiting for assets but mostly done.

Fixed Issues

$ #5697
$ #5168
$ #5707

Tests

Sign out of both New and Old Expensify
Create a new account + workspace
Navigate to the workspace
Tap "Connect bank account"
Verify you see this view
Select "Connect manually"
Close the view by pressing the x here
Navigate to the workspace again
Tap "Connect bank account"
Verify you land on the "Connect manually" screen
Verify the account add method memory also works for the "Connect online with Plaid" option
Connect with Plaid using the test credentials bank: chase, user: user_good, pass: pass_good
Select Plaid savings account from the drop down
Begin filling out the form so that you end up with an OPEN bank account
Stop after the "Company Information" step and close out the flow
Reopen and verify you see this screen
Press "Continue with setup" and verify you are brought back to the next step you need to complete ("Personal Information")
Continue forward and complete the "Personal Information" step and exit the flow again
Reopen the flow again and press "Continue with setup" - verify you are brought back to the next step you need to complete ("Additional Information")
Fill out the "Additional information" step and continue
Verify you see this screen
Verify that tapping "Chat with Concierge" opens up the chat with Concierge
Add a secondary login with a non public domain + enable Expensify cards
Return to the "Connect bank account" flow
Verify you now see this view

Repeat flow with new account and test VERIFYING account

Complete the flow and stop after the company info step
Close the modal
Reopen and verify "Continue with setup" screen appears
Verify you are brought back to the "Personal Information" step
Fill out this step
Verify Onfido step appears and close the modal
Verify that when the flow is reopened we are still on the "Personal Information" step
Pass Onfido flow by entering information and submitting
Once on the "Additional Information" step close out of the flow
Reopen and verify you are brought back to the "Additional Information" step
Go through this step and verify you see this screen
Tap "Yes, let's chat" and verify you are brought to the Concierge chat
Have ops verify this account and get the 3 validation amounts to input
Return to the flow again and enter the 3 amounts
Verify you end up on this screen (or possibly the variant with cards? I won't be trying to get the cards provisioned on dev rn sorry - if this was with a non public domain it should have auto-provisioned)

QA Steps

Internal QA

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

…nd none exists

src/pages/ReimbursementAccount/EnableStep.js

marcaaron · 2021-10-06T21:14:15Z

src/pages/workspace/WorkspaceBankAccountPage.js

+};
+
+const WorkspaceBankAccountPage = (props) => {
+    // If we have no bank account in setup then we will immediately redirect the user to /bank-account to begin setup


Maybe worth noting that I am not trying to fetch the bank account here. If it doesn't exist in Onyx we'll just fetch it when we redirect instead of showing you this "Almost done" page. IMO this is fine because if you were setting up the account and are still logged in should still be in Onyx.

The reason I'm doing it this way is because fetching the bank account will trigger an immediate redirect to the step. And in this case we don't want to redirect we just need to know if the account exists.

Another alternative would be to just fetch the bank account twice but add a param to not redirect.

And yet another would be to just check if this user has a expensify_freePlanBankAccountID NVP without fetching the rest of the data we need.

…count2

marcaaron · 2021-10-07T18:11:10Z

src/libs/actions/BankAccounts.js

@@ -64,7 +64,7 @@ function goToWithdrawalAccountSetupStep(stepID, achData) {
    if (!newACHData.useOnfido && stepID === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
        delete newACHData.questions;
        delete newACHData.answers;
-        if (lodashHas(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.EXTERNAL_API_RESPONSES)) {
+        if (lodashHas(newACHData, CONST.BANK_ACCOUNT.VERIFICATIONS.EXTERNAL_API_RESPONSES)) {


I changed this because it was breaking on the next line and preventing the redirect logic I added. I don't think this should matter since we aren't using the questions and answers from expectID yet. Maybe @ctkochan22 can double check I'm not doing anything dumb here.

marcaaron · 2021-10-07T18:15:17Z

@tgolen taking this out of draft so we can start the reviews

src/pages/ReimbursementAccount/EnableStep.js

src/pages/workspace/WorkspaceBankAccountPage.js

…al in EnableStep

MonilBhavsar · 2021-10-08T13:40:17Z

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -167,21 +169,32 @@ class BankAccountStep extends React.Component {
        return (
            <View style={[styles.flex1, styles.justifyContentBetween]}>
                <HeaderWithCloseButton
-                    title={this.props.translate('bankAccount.addBankAccount')}
+                    title={this.props.translate('workspace.common.bankAccount')}
                    stepCounter={subStep && {step: 1, total: 5}}


This is showing error when subStep is null

propTypes warning maybe? probably we should be passing either undefined or an Object. I don't think it will affect the code, but should be cleaned up.

App/src/components/HeaderWithCloseButton.js

Lines 43 to 47 in a860c59

/** Data to display a step counter in the header */

stepCounter: PropTypes.shape({

step: PropTypes.number,

total: PropTypes.number,

}),

stepCounter={subStep ? {step: 1, total: 5} : undefined}

Yeah, I cleaned this up already.

marcaaron · 2021-10-08T15:35:07Z

Just to follow up here. I did some testing on iOS and Android and things seem to be working well. However, one thing to watch out for is the transition from the /bank-account page to "Continue with setup" screen. When swiping to the right on iOS the transition is a little awkward since the underlying screen is blank. We can also briefly see the blank screen when pressing "<".

Ultimately, I couldn't come up with a perfect solution here but there is logic that will detect the screen getting focus and we'll go back one more screen if it's blank otherwise show the "Continue with setup" content.

In an earlier solution, I tried popping the screen from the stack before navigating to the /bank-account but while testing noticed this created some inconsistencies in the browser urls. Not really sure why, but guessing that navigation.pop() getting called very close to our custom navigate() method caused the weirdness.

OSBotify · 2021-10-15T06:41:28Z

🚀 Deployed to staging by @tgolen in version: 1.1.7-25 🚀

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

isagoico · 2021-10-16T00:59:49Z

We're testing the first flow on all environments but for the Repeat flow with new account and test VERIFYING account we can only execute this flow until step 13 - Have ops verify this account and get the 3 validation amounts to input
This verifying flow is usually tested internally because we don't have access to the 3 amounts that are needed to validate the account. Please let us know if someone can take care of the Verifying flow internally 🙇

Edit: ignore this, I missed that this was internal QA before. My apologies🤦

isagoico · 2021-10-16T01:43:44Z

This was my bad, I missed the Internal QA under QA 🤦 On the good side, we tested the first flow on iOS Web and Android and it was a pass

Edit: forgot to mention that we also tested the 3 amount verification part here https://expensify.slack.com/archives/C9YU7BX5M/p1634347327277400?thread_ts=1634329844.247700&cid=C9YU7BX5M

ogumen · 2021-10-22T18:06:14Z

The step 1 of 5 of Connect Bank Account flow has color contrast issues of green and blue text over white background. The green text (approx. #0DD682) against white background (#FFFFFF) has a color contrast ratio of 1.91:1, while blue text (approx. #2395FF) against same white background has a contrast ratio of 3.08:1. The minimum contrast requirements are at least 4.50:1 (WCAG SC 1.4.3)
The instructions about the location (and number of digits) for routing and account numbers is implemented as image of text instead of plain text. The instructions are not conveyed by screen reader, therefore the screen reader users will not get the same instructions as sighted users get. (WCAG SC 1.4.5, 3.3.2)
The checkbox "I accept the Expensify Terms of service" is not implemented correctly, similar to the checkbox described in [high] JAWS+Chrome: Many Pages: Checkbox announced without role, state and label #5648 (WCAG SC 4.1.2). Also, the link "Expensify Terms of service" is identified using color alone failing WCAG SC 1.4.1, similar to [med] Color: Many Pages: Only color is used to distinguish links on the page #5447 The issue is applicable to all similar checkboxes on further screens in the flow.
The button "Save & continue" does not announce any role (similar to [med] JAWS+Chrome: Many Pages: Multiple elements announced without button role #5446 ) - WCAG SC 4.1.2. The issue is applicable to all similar buttons on further screens in the flow.
The focus outline for "Save & continue" button fails minimum contrast requirements of 3.00:1 (similar to [low] Color Contrast: Change Password: The focus outline does not meet the contrast ratio of 3:1 #5646 ) - WCAG SC 1.4.11. The issue is applicable to all similar buttons on further screens in the flow.
The loading animation between steps is not announced by screen reader (similar to [crit] JAWS+Chrome: Chat: Updates to chat window (messages, typing status) are not announced #5681 ), also it fails minimum contrast requirements of 3.00:1 (grey animation approx. #ADB5B8 against white background #FFFFFF has a color contrast of 2.08:1).
The step 2 of 5 of the flow has multiple elements announcing no label (Tax ID number, Company name, Incorporation date, Incorporation state) - WCAG SC 1.3.1, 4.1.2 (similar to [med] HTML Validator: Many Pages: Multiple text fields are not associated with their labels #5451 [high] JAWS+Chrome: Profile: Dropdown "Preferred Pronouns" does not announce its label #5649 ) Additionally, the light grey borders of the controls (text fields and checkboxes) fail contrast requirements - similar to [med] Color Contrast: Many Pages: Input controls grey border against adjacent white fails contrast #5521 , and the placeholder text fails color contrast requirements - similar to [med] Color Contrast: Many Pages: Input field light grey placeholder text on white fails contrast #5520 The color contrast part is applicable to all similar controls on next steps of the flow.
The company address suggestions as well as error messages upon submitting the empty form are not conveyed by screen reader - WCAG SC 4.1.3, similar to [med] JAWS+Chrome: Email verification: Confirmation message 'link has been resent' not announced #5465 [high] JAWS+Chrome: Many Pages: Error toast messages are not announced #5678
The "Tax ID number" and "Phone number" fields convey the acceptable format using placeholder text only. Once user starts typing anything into the field, the placeholder (the format instructions) disappears and no longer available to the users - WCAG 3.3.2.
The required fields and dropdowns are not visually or programmatically marked as required - WCAG 3.3.2, similar to [med] JAWS+Chrome: Many Pages: The required fields are not marked as required #5463 It is applicable to multiple required fields and dropdowns throughout the flow.
No error messages or correction suggestions are provided when no option is selected in the "Company type" and "Incorporation state" dropdowns - WCAG 3.3.1, 3.3.3, similar to [med] Error: Set password: Error messages are not provided when trying to submit the form with empty fields #5528
Several links cannot be focused with Tab key: "Onfido's Facial Scan Policy and Release", "Privacy policy" and Terms of service". It fails WCAG SC 2.1.1, similar to [high] Keyboard Navigation: About: 'Terms of service' and 'Privacy policy' links are not focusable #5656
The focus is not trapped in Connect Bank Account overlay, and the background page elements can be focused - the issue is seen throughout the entire flow, fails WCAG SC 2.4.3, similar to [med] Keyboard Navigation: Many Pages: Focus not moved/trapped within the opened dialog #5516
The grey Back and Close buttons (#C6C9CA) on white background (#FFFFFF) have a color contrast of 1.91:1 failing the minimum contrast requirements of 3.00:1.

OSBotify · 2021-10-23T00:43:50Z

🚀 Deployed to production by @roryabraham in version: 1.1.8-9 🚀

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

marcaaron added 3 commits October 6, 2021 08:48

Move bank-account flow into workspace flow

73ff6ab

adding the basically done thing page but bank icons need a bankName a…

a7727f4

…nd none exists

Create interstitial page to redirect or show continue button

16a458e

marcaaron self-assigned this Oct 6, 2021

marcaaron commented Oct 6, 2021

View reviewed changes

src/pages/ReimbursementAccount/EnableStep.js Outdated Show resolved Hide resolved

marcaaron commented Oct 6, 2021

View reviewed changes

src/pages/ReimbursementAccount/EnableStep.js Show resolved Hide resolved

marcaaron commented Oct 6, 2021

View reviewed changes

marcaaron added 21 commits October 6, 2021 11:27

fix subStep logic so that we remember the option selected;

9e03ec0

Fix bankName stuff

8519ad3

add initial english translations

74e4a55

clean up getPaymentMethods

235b3d9

use initWithStoredValues

93e9d35

Remove add work email and replace with Concierge

d87cfc8

Add noop onPress

1038edf

dont show the continue setup screen if we are in an open state

72fb8d7

fix weird bug that silently breaks navigating to a new step

8db44a0

pop the WorkspaceBankAccountPage before navigating to /bank-account

cd2d639

remove unneeded link out to olddot

10e27c7

Navigate to correct next step

62a5191

add missing propTypes

183903a

add translations

81dea7f

add translations and assets

ac85502

Merge branch 'tgolen-workspace-settings' into marcaaron-connectBankAc…

665da6d

…count2

remove unneeded import

18b05d3

update copy

6dce153

change icon

89a326f

remove assets

198a064

remove unused things

c06423f

marcaaron commented Oct 7, 2021

View reviewed changes

marcaaron changed the title ~~[WIP] Setup "Connect bank account" workspace flow~~ Setup "Connect bank account" workspace flow Oct 7, 2021

marcaaron requested a review from a team as a code owner October 7, 2021 18:13

MelvinBot requested review from MonilBhavsar and removed request for a team October 7, 2021 18:13

marcaaron requested review from stitesExpensify and a team and removed request for a team October 7, 2021 18:13

MelvinBot requested a review from Luke9389 October 7, 2021 18:14

tgolen requested changes Oct 7, 2021

View reviewed changes

src/pages/ReimbursementAccount/EnableStep.js Show resolved Hide resolved

src/pages/workspace/WorkspaceBankAccountPage.js Outdated Show resolved Hide resolved

marcaaron added 3 commits October 7, 2021 08:48

fix conflicts

87271a8

update route

78da1f0

move loading false so ACHContractStep does not reshow

50ab411

tgolen mentioned this pull request Oct 7, 2021

Implement new workspace navigator and new workspace pages #5689

Closed

18 tasks

marcaaron added 4 commits October 7, 2021 10:58

add workaround for navigation

075fc07

fix conflicts

d8a9be7

remove pop

d68da52

Remove extra dismissModal as it is no longer needed. Add a dismissMod…

a409a59

…al in EnableStep

tgolen approved these changes Oct 8, 2021

View reviewed changes

tgolen merged commit 67ec342 into tgolen-workspace-settings Oct 8, 2021

tgolen deleted the marcaaron-connectBankAccount2 branch October 8, 2021 13:39

MonilBhavsar reviewed Oct 8, 2021

View reviewed changes

OSBotify mentioned this pull request Oct 15, 2021

Deploy Checklist: New Expensify 2021-10-15 #5879

Closed

This was referenced Oct 22, 2021

Only deactivate label if field isn't focused #5789

Merged

[CP-stag] Get CompanyAddress field to autofill and show errors #5800

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup "Connect bank account" workspace flow #5703

Setup "Connect bank account" workspace flow #5703

marcaaron commented Oct 6, 2021 •

edited

Loading

marcaaron Oct 6, 2021

marcaaron Oct 6, 2021

marcaaron Oct 6, 2021 •

edited

Loading

marcaaron Oct 7, 2021

marcaaron commented Oct 7, 2021

MonilBhavsar Oct 8, 2021

marcaaron Oct 8, 2021

marcaaron Oct 8, 2021

marcaaron Oct 8, 2021

tgolen Oct 8, 2021

marcaaron commented Oct 8, 2021 •

edited

Loading

OSBotify commented Oct 15, 2021

isagoico commented Oct 16, 2021 •

edited

Loading

isagoico commented Oct 16, 2021 •

edited

Loading

ogumen commented Oct 22, 2021 •

edited

Loading

OSBotify commented Oct 23, 2021

	/** Data to display a step counter in the header */
	stepCounter: PropTypes.shape({
	step: PropTypes.number,
	total: PropTypes.number,
	}),

Setup "Connect bank account" workspace flow #5703

Setup "Connect bank account" workspace flow #5703

Conversation

marcaaron commented Oct 6, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcaaron Oct 6, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcaaron commented Oct 7, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcaaron commented Oct 8, 2021 • edited Loading

OSBotify commented Oct 15, 2021

isagoico commented Oct 16, 2021 • edited Loading

isagoico commented Oct 16, 2021 • edited Loading

ogumen commented Oct 22, 2021 • edited Loading

OSBotify commented Oct 23, 2021

marcaaron commented Oct 6, 2021 •

edited

Loading

marcaaron Oct 6, 2021 •

edited

Loading

marcaaron commented Oct 8, 2021 •

edited

Loading

isagoico commented Oct 16, 2021 •

edited

Loading

isagoico commented Oct 16, 2021 •

edited

Loading

ogumen commented Oct 22, 2021 •

edited

Loading