Disable "Save and continue" for Requestor Info, Beneficial Owners, and Validate Steps until all mandatory fields have an entry

[luacmartins]

Details

The Save and Continue button for Requestor Info, Beneficial Owners and Validate Steps should be disabled until all required fields have an entry.

Fixed Issues

$ #4836

Tests

1. Login to New Expensify (make sure your account does not have the Expensify Card enabled nor withdrawal bank accounts setup)
2. Create a workspace
3. Select Get Started in Expensify Card tab of workspace
4. Go through VBA flow using SO credentials to add a PENDING account and note that in the three mentioned steps, Save and Continue is disabled until all required fields are filled out.

• Requestor Info Step (all fields)
  

• Beneficial owners (accept terms and certify information is accurate)
  

• Validate Step (all fields)
  

QA Steps

Steps above.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

web.mov

Mobile Web

mobile-web.mov

Desktop

desktop.mov

iOS

ios.mov

Android

android.mov

[shawnborton]

Hey @luacmartins - there are a couple of small things I'd love to squeeze into this PR if you don't mind.

First, there seems to be extra white padding on top of the fixed bottom button:

There shouldn't be any extra white space there, and that bottom area should start right at the top edge of the button.

Second, I think our disabled button styles are incorrect and they've been bugging me for a while. We currently have two different button styles (default = gray background, success = green background) and so I think we should also have two different styles for each. Basically the disabled green button should still appear somewhat green, like this:

Thoughts on making that quick change? Disabled style is pretty simple - it just makes the whole button at 50% opacity.

[luacmartins]

Hey @shawnborton! Yea, I don’t mind squeezing those in. I’m ooo until Tuesday, so I’ll make the changes then.

[Julesssss]

Hey @luacmartins, no rush in responding as you're OOO, but I'm not seeing the 'Get Started' option. Is this create card feature geoblocked by any chance or behind a beta?

[luacmartins]

@shawnborton I changed the disabled button style and removed the space/padding on top of the button. Can you confirm that these look correct?

[luacmartins]

@Julesssss This feature is behind the free plan beta and AFAIK it is not geoblocked. From your screenshot it seems that your test account already has the Expensify Card enabled or a withdrawal bank account setup for payment. If that's the case you won't be able to see the Get Started option and I would try testing with an account without Expensify Cards or withdrawal bank accounts. Let me know if you have any issues.

I updated the test steps to reflect those requirements.

[shawnborton]

Looks great, thanks Carlos!

…

On Tue, Aug 31, 2021 at 11:14 PM Carlos Martins ***@***.***> wrote: @Julesssss <https://github.com/Julesssss> This feature is behind the free plan beta and AFAIK it is not geoblocked. From your screenshot it seems that your test account already has the Expensify Card enabled or a withdrawal bank account setup for payment. If that's the case you won't be able to see the Get Started option and I would try testing with an account without Expensify Cards or withdrawal bank accounts. Let me know if you have any issues. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4842 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARWH5QMKY7TZYHTKPJHIX3T7VAZRANCNFSM5C2GQ5MQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[luacmartins]

Updated!

[Julesssss]

Tests well, I just have one code-style comment.

[luacmartins]

Updated!

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

[OSBotify]

🚀 Deployed to staging by @Julesssss in version: 1.0.91-1 🚀

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

[isagoico]

@luacmartins @Julesssss Hello! We're currently able to access the add bank account flow via the URL method bank-account/new. We will proceed to test this PR this way. Also, we're only able to test this on Web and mWeb since they are the only environments that we have access to the URL.

[Julesssss]

Thanks for reminding us. I'm tagging @kevinksullivan and @MitchExpensify to ensure we test this again ourselves once it's deployed.

[luacmartins]

@isagoico comment surfaces the fact that a user can navigate to any of the steps in the process via the URL, e.g. bank-account/requestor without having completed the previous steps. While the flow does not allow the user to advance, it might be a nice polish to redirect the user back to the actual step they are in.

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.0.92-0 🚀

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