[HOLD for payment 2024-03-05] [$250] [MEDIUM] Bank account - Green box for completed part is clickable but nothing happens when clicking on it

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

---

Version Number: v1.4.41-2
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > any workspace > Bank account.
3. Click Connect manually.
4. Finish Bank info and proceed to Personal info.
5. Click on the green box with checkmark.

Expected Result:

Since the green box is clickable (with hand cursor), clicking on it should navigate to the first section.

Actual Result:

The green box is clickable, but nothing happens when clicking on it.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6379352_1707915973512.bandicam_2024-02-14_14-18-52-879.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d715a5163129c0d4
• Upwork Job ID: 1757783603020046336
• Last Price Increase: 2024-02-14
• Automatic offers:
• akinwale | Reviewer | 0
• paultsimura | Contributor | 0

[github-actions]

👋 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 @tgolen (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related #wave5-free-submitters
CC @dylanexpensify

[mountiny]

Minor styling issue, not a blocker.

The buttons are disabled to click on them so we should update the cursor to not suggest they are clickable

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01d715a5163129c0d4

[melvin-bot]

Current assignee @akinwale is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Upwork job price has been updated to $250

[paultsimura]

@mountiny based on this code, are we confident it shouldn't be clickable?

App/src/components/InteractiveStepSubHeader.tsx

Line 82 in c03a1a2

onPress={moveToStep}

App/src/components/InteractiveStepSubHeader.tsx

Lines 62 to 68 in c03a1a2

	const moveToStep = () => {
	if (isLockedStep || !onStepSelected) {
	return;
	}
	setCurrentStep(index);
	onStepSelected(stepNames[index]);
	};

Or is it non-clickable just for the BA flow?

[mountiny]

@paultsimura yep there are cases when we want to lock the steps https://github.com/Expensify/App/pull/36472/files#diff-50cbf33e1a4add301c4c85b2d37735fa79094c511c6fc0fe0003940870ec4a1dR81

[paultsimura]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The cursor on steps is "pointer" even if they are not clickable. After https://github.com/Expensify/App/pull/36472/files#diff-50cbf33e1a4add301c4c85b2d37735fa79094c511c6fc0fe0003940870ec4a1dR81, the cursor will always be "disabled" instead of the "pointer".

What is the root cause of that problem?

The steps are pressable, but they shouldn't be if there's no onStepSelected passed as discussed in #36506 (comment).

What changes do you think we should make in order to solve the problem?

Use !onStepSelected && styles.cursorDefault, to not modify the cursor at all and use the default one if the steps are not meant to be clickable:

App/src/components/InteractiveStepSubHeader.tsx

Lines 76 to 80 in c03a1a2

	style={[
	styles.interactiveStepHeaderStepButton,
	isLockedStep && styles.interactiveStepHeaderLockedStepButton,
	isCompletedStep && styles.interactiveStepHeaderCompletedStepButton,
	]}

What alternative solutions did you explore? (Optional)

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bank account - Green box for completed part is clickable but nothing happens when clicking on it

What is the root cause of that problem?

We are allowing the cursor pointer for index less than current index

App/src/components/InteractiveStepSubHeader.tsx

Lines 58 to 59 in f438cb7

	const isLockedStep = currentStep < index;
	const isLockedLine = currentStep < index + 1;

What changes do you think we should make in order to solve the problem?

We should change to the same condition here

App/src/components/InteractiveStepSubHeader.tsx

Lines 63 to 64 in f438cb7

	if (isLockedStep || !onStepSelected) {
	return;

App/src/components/InteractiveStepSubHeader.tsx

Lines 81 to 82 in f438cb7

	disabled={isLockedStep}
	onPress={moveToStep}

                            disabled={isLockedStep || !onStepSelected}

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bank account - Green box for completed part is clickable but nothing happens when clicking on it

What is the root cause of that problem?

As mentioned above, there are cases when we disabled the boxes in InteractiveStepSubHeader and we also have style for that interactiveStepHeaderLockedStepButton

App/src/components/InteractiveStepSubHeader.tsx

Lines 62 to 68 in c03a1a2

	const moveToStep = () => {
	if (isLockedStep || !onStepSelected) {
	return;
	}
	setCurrentStep(index);
	onStepSelected(stepNames[index]);
	};

What changes do you think we should make in order to solve the problem?

We just need to add more styles in interactiveStepHeaderLockedStepButton , as suggested by design team. We can changes styles of cursor and decrease the opacity as well.

Need to update styles here:

App/src/styles/index.ts

Line 4368 in 2e3840f

interactiveStepHeaderLockedStepButton: {

Result

[akinwale]

After reviewing, we can move forward with @FitseTLT's proposal, since it was the first to arrive at the correct solution based on the observe timestamps.

@paultsimura In the future, please follow the guidelines by creating an Updated proposal post after making edits to your proposal.

🎀👀🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @nkuoch, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[paultsimura]

@akinwale with all due respect, please note the following:

1. The solution by @FitseTLT is already in main – that's what @mountiny referred in the linked PR, and I mentioned it in my proposal – so if you choose that proposal, we will just do nothing here. But as I mentioned in my proposal, with this approach, the cursor will always show "forbidden" and it's not the best UX:

After https://github.com/Expensify/App/pull/36472/files#diff-50cbf33e1a4add301c4c85b2d37735fa79094c511c6fc0fe0003940870ec4a1dR81, the cursor will always be "disabled" instead of the "pointer".

Code in main:

App/src/components/InteractiveStepSubHeader.tsx

Line 81 in f386740

disabled={isLockedStep || !onStepSelected}

2. My changes (after other proposals were posted) were mostly cosmetic/formatting – I do post the Updated Proposal if I change some useful content in the proposal and there are others. IMO, here it was not needed. Especially because all other proposals suggest different solutions.

I still think there isn't a better proposal than mine, and I'll just repost it so you can re-check ignoring the editing timestamps.

[paultsimura]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The cursor on steps is "forbidden" even if they are not clickable by design.

What is the root cause of that problem?

The steps are pressable but disabled, which results in the "forbidden" cursor being displayed. They shouldn't be treated as pressable at all if there's no onStepSelected passed as discussed in #36506 (comment).

What changes do you think we should make in order to solve the problem?

Use !onStepSelected && styles.cursorDefault, to not modify the cursor at all and use the default one if the steps are not meant to be clickable:

style={[
    styles.interactiveStepHeaderStepButton,
    isLockedStep && styles.interactiveStepHeaderLockedStepButton,
    isCompletedStep && styles.interactiveStepHeaderCompletedStepButton,
+   !onStepSelected && styles.cursorDefault,
]}

App/src/components/InteractiveStepSubHeader.tsx

Lines 76 to 80 in c03a1a2

	style={[
	styles.interactiveStepHeaderStepButton,
	isLockedStep && styles.interactiveStepHeaderLockedStepButton,
	isCompletedStep && styles.interactiveStepHeaderCompletedStepButton,
	]}

What alternative solutions did you explore? (Optional)

[akinwale]

@paultsimura Thanks for the clarification. Could you update your proposal with what the updated style code would look like?

[FitseTLT]

By the way the code change in main was made after my proposal so in my opinion we ain't need any change as if we don't have nothing to do on pressing (early returning with that condition) we should make it disabled with same condition

[paultsimura]

@paultsimura Thanks for the clarification. Could you update your proposal with what the updated style code would look like?

Updated #36506 (comment)

Also, here are the before/after screenshots:

[akinwale]

After a second review, since the only change required for this issue is the cursor style update, we can move forward with @paultsimura's proposal.

cc @nkuoch

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @paultsimura 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mountiny]

@paultsimura can you raise a PR please?

[paultsimura]

@paultsimura can you raise a PR please?

Sure, on it now

[paultsimura]

Thanks. The PR is ready for review: #36573

[paultsimura]

Deployed to prod: #36573 (comment)

[mountiny]

Payment for @akinwale will be handled here #22901 (comment)

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[bfitzexpensify]

Payment for @paultsimura complete, closing this out.