[$250] Bank account - Company's website step is skipped and causes error on confirmation page

[lanitochka17]

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: 9.0.6-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• User is logged in with Gmail account.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Workflows
3. Click Connect bank account > Connect manually
4. Proceed to Step 4 - Enter Company's Tax ID page
5. Enter Tax ID > Next
6. Note that the next step (company's website) is skipped
7. Enter phone number > Next
8. Note that it shows the error "Please provide a valid Website" on the confirmation page
9. Click back button on confirmation page twice
10. Note that now the Company's website step is revealed

Expected Result:

In Step 5, after Company's Tax ID step, app will proceed to Company's website step

Actual Result:

In Step 5, after Company's Tax ID step, Company's website step is skipped, and it proceeds to Phone number step
As a result, it shows the error "Please provide a valid Website" on the confirmation page (Step 8)

It only reveals Company's website step when clicking back button twice from the confirmation page (Step 10)

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

Bug6538961_1720703484253.20240711_210608.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a9b660d62d255c15
• Upwork Job ID: 1813125485795996724
• Last Price Increase: 2024-07-16
• Automatic offers:
• suneox | Reviewer | 103421382

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[bernhardoj]

Proposal

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

Website step is skipped when setting up bank account.

What is the root cause of that problem?

We call getInitialSubstepForBusinessInfo to get the initial sub-step of the form.

App/src/pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo.ts

Lines 9 to 25 in c53bd5c

	function getInitialSubstepForBusinessInfo(data: CompanyStepProps): number {
	if (data[businessInfoStepKeys.COMPANY_NAME] === '') {
	return 0;
	}
	if (data[businessInfoStepKeys.COMPANY_TAX_ID] === '') {
	return 1;
	}
	if (data[businessInfoStepKeys.COMPANY_WEBSITE] === '') {
	return 2;
	}
	if (data[businessInfoStepKeys.COMPANY_PHONE] === '') {
	return 3;
	}

getInitialSubstepForBusinessInfo will return the sub-step where the value is still empty. In our case, we set a default draft value to website.

App/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts

Line 101 in c53bd5c

[INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_WEBSITE]: getDefaultCompanyWebsite(session, user),

It's from this PR which fixes #38585. But the issue hasn't happened yet. This issue happens after #37680 where we save each sub-step. getInitialSubstepForBusinessInfo is supposed to being used as the initial sub-step, however, everytime we save the sub-step, the loader view shows, which unmount and remount the business info parent step, so getInitialSubstepForBusinessInfo is recalculated and it will skip the website sub-step because there is already a default draft value.

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

The loader view issue will be handled here. That will fix this issue too, but not completely. We can still skip the company step by filling all step before the website step, then refresh the page. To solve the issue completely, we shouldn't save the default website to the draft yet. The default website should be shown as the default value of the input and will be saved once the user save it.

Steps:

1. Revert this back to empty string.
   

   App/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts

   Line 101 in c53bd5c

   [INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_WEBSITE]: getDefaultCompanyWebsite(session, user),

2. Remove below useEffect that saves the default value to the draft
   

   App/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx

   Lines 62 to 64 in c53bd5c

   	useEffect(() => {
   	BankAccounts.addBusinessWebsiteForDraft(defaultCompanyWebsite);
   	}, [defaultCompanyWebsite]);

3. Just to be safe, because website is a stirng, use || instead of ??
   

   App/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx

   Line 42 in c53bd5c

   const defaultCompanyWebsite = reimbursementAccount?.achData?.website ?? defaultWebsiteExample;

Now, we need to refix #38585. The issue there is that, the defaultValue prop of the input is ignored.

App/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx

Line 84 in c53bd5c

defaultValue={defaultCompanyWebsite}

It's because the inputValues of website is an empty string and we only use defaultValue if inputValues and draft value is undefined.

App/src/components/Form/FormProvider.tsx

Lines 244 to 255 in c53bd5c

	if (inputProps.value !== undefined) {
	// eslint-disable-next-line react-compiler/react-compiler
	inputValues[inputID] = inputProps.value;
	} else if (inputProps.shouldSaveDraft && draftValues?.[inputID] !== undefined && inputValues[inputID] === undefined) {
	inputValues[inputID] = draftValues[inputID];
	} else if (inputProps.shouldUseDefaultValue && inputProps.defaultValue !== undefined && inputValues[inputID] === undefined) {
	// We force the form to set the input value from the defaultValue props if there is a saved valid value
	inputValues[inputID] = inputProps.defaultValue;
	} else if (inputValues[inputID] === undefined) {
	// We want to initialize the input value if it's undefined
	inputValues[inputID] = inputProps.defaultValue ?? getInitialValueByType(inputProps.valueType);
	}

To fix this, we should check if it's an empty string too. We can create a function so it's reusable.

const isEmptyValue = (value) => {
    return value === undefined || value === '';
}
...

} else if (isEmptyValue(inputValues[inputID])) {

Last, to make sure we don't skip an invalid website, we can improve the initial sub step condition for website by adding the website validation logic to it.

App/src/pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo.ts

Lines 18 to 20 in b10580f

	if (data[businessInfoStepKeys.COMPANY_WEBSITE] === '') {
	return 2;
	}

if (data[businessInfoStepKeys.COMPANY_WEBSITE] === '' || !ValidationUtils.isValidWebsite(data[businessInfoStepKeys.COMPANY_WEBSITE])) {
    return 2;
}

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)