[HOLD for payment 2023-07-26] Connect Bank - Connect bank account step counter disappeared

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Login
2. Go to setting => workspace => your workspace
3. Bank account => Connect Manually
4. Observe that "Step 1 of 5" that appears not appears in the header like the production

Expected Result:

In manually connecting we should have a Step counter

Actual Result:

In manually connecting Step counter is missed from the header

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.42-8
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-18.at.8.23.19.AM.mov

Recording.3724.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ahmdshrif
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689660526773759

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @luacmartins (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[kbecciv]

Proposal

by : @ahmdshrif

Problem Restatement:

The problem we are addressing is that the steps counter is not appearing in the header of the manual connect to the bank feature.

Root Cause:

The root cause of this issue is the refactoring of the HeaderWithBackButton component from a class component to a function component. During this refactoring, the default value of shouldShowStepCounter was changed. Previously, the default value was true, as shown in this code: link. However, when the component was converted to a function component, the default value of shouldShowStepCounter was mistakenly set to false, as seen in this code: link. As a result, any component that did not explicitly pass the shouldShowStepCounter prop would take the default value of false, causing the steps counter to be hidden.

Proposed Solution:

To resolve the problem, we recommend reverting the aforementioned change and setting the default value of shouldShowStepCounter back to true. By doing so, the steps counter will be correctly displayed in the header.
an additional issue related to the connect with Plaid in production. Once the initial issue is addressed, the steps counter should not be displayed during the Plaid integration. We have proposed a solution for this in the following Slack thread: https://expensify.slack.com/archives/C049HHMV9SM/p1689660306598649?thread_ts=1689660228.939159&cid=C049HHMV9SM

Alternative Solution Explored:

An alternative solution that has been explored is to keep the default value of shouldShowStepCounter as false and explicitly pass this prop to all the places where the steps counter needs to appear like BankAccountManualStep.js