[$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 [email protected] 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)

[melvin-bot]

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

[suneox]

I'll checking proposal today

[suneox]

@bernhardoj Thanks for your proposal. It makes sense to me that the defaultCompanyWebsite should be set when the page is initialized instead of being set by default, as this will break the logic of getInitialSubstepForBusinessInfo. So I think we can go with this proposal

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[suneox]

I found another issue on this proposal when submit invalid website and go to previous step after resubmit data from previous step the company's website step is skipped, so we're still looking for another solution

[bernhardoj]

I don't think that's an issue with my proposal. That's an existing issue on our App. We only check whether the value is filled or not.

You can see that I can skip the address step even though the zip code is invalid.

web.mp4

I guess we need to take the validation logic on each substep and use it in getInitialSubstepForBusinessInfo? (maybe we can just start with website for this issue)

[suneox]

I don't think that's an issue with my proposal. That's an existing issue on our App. We only check whether the value is filled or not.

@bernhardoj I agree with you, but currently, we’re working on the step to check the website. Therefore, I believe we should also handle invalid websites in this issue

I guess we need to take the validation logic on each substep and use it in getInitialSubstepForBusinessInfo? (maybe we can just start with website for this issue)

Nice, can you update your proposal to include the validation logic for the business website?

[bernhardoj]

Updated proposal.

[melvin-bot]

@suneox, @sonialiap, @neil-marcellini Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 @suneox 🎉 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

[neil-marcellini]

Woops, Idk what happened here. I approved it a while ago but somehow failed to assign the contributor.

[neil-marcellini]

@bernhardoj please start on a PR.

[bernhardoj]

PR is ready

cc: @suneox

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[neil-marcellini]

Head's up, I'll be working 50% for the rest of this week and next 🌲

[melvin-bot]

Triggered auto assignment to @puneetlath (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.

[sonialiap]

@puneetlath I'm OOO Aug 19-30, adding BZ leave buddy.
Status: PR in progress

[neil-marcellini]

This has been done for a while AFAIK. There was a regression that was fixed, but I think we still need to pay 50% or whatever.

[puneetlath]

@suneox @bernhardoj is that correct? Mind confirming which PR was for this issue and for the regression?

[suneox]

@suneox @bernhardoj is that correct? Mind confirming which PR was for this issue and for the regression?

@puneetlath I’d like to confirm the PR from this issue has caused regression #47227 and that was fixed

[puneetlath]

Great, thanks for confirming. So in that case, I believe these payouts are correct:

C - $250 - @bernhardoj - to be paid via NewDot
C+ - $125 - @suneox - paid via Upwork

Thanks everyone!

[JmillsExpensify]

$250 approved for @bernhardoj