add step counter to VBA flow

[marcochavezf]

Details

A step counter is added in the VBA flow.

Fixed Issues

$ #5074
$ https://github.com/Expensify/Expensify/issues/177670

Tests

1. Connect to the local environment following these instructions.
2. Login with a test account.
3. Click on the "+" button -> "New workspace" -> "Get Started" or by entering /bank-account into the URL (more details here).
4. Follow the steps of the VBA flow and verify the step counter below the header of each step.

QA Steps

1. Click on the "+" button -> "New workspace" -> "Get Started" or by entering /bank-account into the URL (more details here).
2. Follow the steps of the VBA flow and verify the step counter below the header of each step (more details of adding a bank account in staging here.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[marcochavezf]

I have read the CLA Document and I hereby sign the CLA

[marcochavezf]

Update:
This is how it looks without the mt1:

with mt1:

[shawnborton]

I think I like it more without the mt1 - what do you think?

[marcochavezf]

I think I like it more without the mt1 - what do you think?

Yeap, it looks nicer to me without the mt1 👍🏽

[stitesExpensify]

Code looks good but there's a conflict

[marcochavezf]

Update: fixed merge conflict and removed step counter from the first part of add bank account step.

[marcochavezf]

Update: I removed the extra spaces I inserted unintentionally in ReimbursementAccountPage.js to avoid conflicts with main branch.

[marcochavezf]

hi @stitesExpensify 👋🏽 bumping this :) the props in ValidationStep were removed in main branch (https://github.com/Expensify/App/blob/main/src/pages/ReimbursementAccount/ReimbursementAccountPage.js#L216), also I removed some white spaces from ReimbursementAccountPage.js to avoid conflicts with the main branch.

[stitesExpensify]

LGTM!

[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 @stitesExpensify 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 ✅

[bondydaa]

looks like this PR might have caused some styling regressions #6297