When bank account is pending a "Test transactions" heading displayed incorrectly

[mvtglobally]

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. Open app
2. Go through the VBA flow to trigger pending account

Expected Result:

"Test transactions" should display only for the page with the transactions CTA

Actual Result:

"Test transactions" displayed when user still has steps to complete verification
Potentially related to #6477

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.23-0
Reproducible in staging?: Y
Reproducible in production?:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @marcaaron
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1640291627075700

View all open jobs on GitHub

[MelvinBot]

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

[PrashantMangukiya]

Proposed Solution:

At present title is static so it shows same title all time. So we have to make title dynamic. We can set title (line 166) based on the isVerifying (line 161) variable, because isVerifying is controlling ui content that we concern. i.e. when isVerifying true it shows Let's Finish in Chat section, otherwise showing test transaction input form.

App/src/pages/ReimbursementAccount/ValidationStep.js

Lines 160 to 172 in bf65263

	const maxAttemptsReached = lodashGet(this.props, 'reimbursementAccount.maxAttemptsReached');
	const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
	return (
	<View style={[styles.flex1, styles.justifyContentBetween]}>
	<HeaderWithCloseButton
	title={this.props.translate('workspace.common.testTransactions')}
	stepCounter={{step: 5, total: 5}}
	onCloseButtonPress={Navigation.dismissModal}
	onBackButtonPress={() => Navigation.goBack()}
	shouldShowBackButton
	shouldShowStepCounter={!isVerifying}
	/>

We have add/update code as shown below, It will make title dynamic as per need.

  // **** Add below code ***
  let titleText = this.props.translate('workspace.common.testTransactions');
  if (isVerifying) {
      titleText = this.props.translate('workspace.common.bankAccount');
  }

 <HeaderWithCloseButton
      title={titleText}      // *** Update this line 
      stepCounter={{step: 5, total: 5}}
      onCloseButtonPress={Navigation.dismissModal}
      onBackButtonPress={() => Navigation.goBack()}
      shouldShowBackButton
      shouldShowStepCounter={!isVerifying}
  />

Below is the screenshot once code updated:

[marcaaron]

@PrashantMangukiya Please wait for the Help Wanted label to be applied before proposing a solution. Thanks!

[alex-mechler]

This can be dne by a contributor! Adding the label

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[PrashantMangukiya]

@marcaaron Should I submit proposal now? I am wandering that External label applied but Help Wanted label not applied.

[MelvinBot]

@laurenreidexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!