[HOLD for payment 2024-10-30] [$250] Bank Account - "Please provide a valid website" error is shown

[IuliiaHerets]

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: v9.0.43-2
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #49957
Email or phone of affected tester (no customers): gibethlehem@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Log in to an account
2. Create a workspace > Enable Workflow > Connect bank account > Connect online with plaid
3. Continues the flow until you reached "Company website" page
4. Write invalid email
5. Click "next"
6. After the error is show, clear the invalid email and go back.
7. Return to "Company website" page

Expected Result:

"Please provide a valid website" error is not shown

Actual Result:

"Please provide a valid website" error is shown and it is not dismissed even after navigating back

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6622461_1727894084530.Screen_Recording_2024-10-02_at_3.21.18_in_the_afternoon.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021842647294027107619
• Upwork Job ID: 1842647294027107619
• Last Price Increase: 2024-10-05
• Automatic offers:
• ishpaul777 | Reviewer | 104403869

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

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

[IuliiaHerets]

@anmurali 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

[Krishna2323]

Proposal


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

Bank Account - "Please provide a valid website" error is shown

What is the root cause of that problem?

• When sub step is changed the error is not cleared and the previous page error is shown.

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

Line 22 in 3b15d84

function WebsiteBusiness({onNext, isEditing}: SubStepProps) {

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


• In WebsiteBusiness, we need to clear the errors when the screen index is changed.

    const formRef = useRef<FormRef | null>(null);
    const prevScreenIndex = usePrevious(screenIndex);
    useEffect(() => {
        if (prevScreenIndex <= screenIndex) {
            return;
        }
        formRef.current?. resetError();
    }, [screenIndex, prevScreenIndex]);

What alternative solutions did you explore? (Optional)

• We can run a cleanup funciton to clear the message.
• We might need to do this in multiple sub steps.

What alternative solutions did you explore? (Optional 2)

We can call FormActions.clearErrorFields(formId); & FormActions.clearErrors(formId); in useStepFormSubmit or useReimbursementAccountStepFormSubmit.

App/src/hooks/useStepFormSubmit.ts

Lines 23 to 41 in 3b15d84

	export default function useStepFormSubmit<T extends keyof OnyxFormValuesMapping>({formId, onNext, fieldIds, shouldSaveDraft}: UseStepFormSubmitParams<T>) {
	return useCallback(
	(values: FormOnyxValues<T>) => {
	if (shouldSaveDraft) {
	const stepValues = fieldIds.reduce((acc, key) => {
	acc[key] = values[key];
	return acc;
	}, {} as Record<TupleToUnion<typeof fieldIds>, OnyxValues[T][Exclude<keyof OnyxValues[T], keyof BaseForm>]>);
	FormActions.setDraftValues(formId, stepValues);
	onNext(stepValues);
	return;
	}
	onNext();
	},
	[onNext, formId, fieldIds, shouldSaveDraft],
	);
	}

What alternative solutions did you explore? (Optional 3)

• We can call FormActions.clearErrorFields(formId); & FormActions.clearErrors(formId); inside BusinessInfo when calling prevScreen()
  

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

  Lines 111 to 113 in 3b15d84

  	} else {
  	prevScreen();
  	}

Result

[mkzie2]

Proposal

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

• "Please provide a valid website" error is shown and it is not dismissed even after navigating back

What is the root cause of that problem?

• The company website is a step that occurs after the company tax step.

• When starting the bank account setup and reaching the company tax page, clicking the "Next" button triggers the UpdateCompanyInformationForBankAccount function, passing the website data as "". No error is returned by the backend here.

• Next, it redirects to the company website page. If you input something like "https://123" and then reset it to "https://", the system saves website: "https://" in the reimbursementAccountDraft.

• When navigating back to the company tax page, clicking the "Next" button again triggers UpdateCompanyInformationForBankAccount with the website data as "https://", which is an invalid value. As a result, the backend returns an Onyx error:

{
    "onyxMethod": "merge",
    "key": "reimbursementAccount",
    "value": {
        "errors": {
            "1727918521418387": "Please provide a valid Website"
        }
    }
}

• So the "Please provide a valid Website" error message is shown.

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

• When we are in company website page and go back, we need to clear the reimbursementAccountDraft.website if its value is https://.

• So in here we introduce a ref const websiteRef = useRef() to keep track the company website input. Then add onChangeText={(t) => (websiteRef.current = t)} to InputWrapper.

• Finally, add cleanup function:

    useEffect(() => {
        return () => {
            if (defaultWebsiteExample === websiteRef.current) {
                BankAccounts.addBusinessWebsiteForDraft(null);
            }
        };
    }, []);

What alternative solutions did you explore? (Optional)

• The above useEffect can be:

    useEffect(() => {
        return () => {
            if (!ValidationUtils.isValidWebsite(values.website)) {
                BankAccounts.addBusinessWebsiteForDraft(null);
            }
        };
    }, []);

[melvin-bot]

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

[melvin-bot]

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

[Gajendra-Gupta]

Proposal

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

Bank Account - "Please provide a valid website" error is shown

What is the root cause of that problem?

Error is not clearing at the time of previous page.

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

Lines 111 to 113 in 3b15d84

	} else {
	prevScreen();
	}

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

Code should be like this

 } else {
 FormActions.clearErrorFields(formId);
 FormActions.clearErrors(formId); 
     prevScreen(); 
 }

What alternative solutions did you explore? (Optional)

[ishpaul777]

i'll expect to have more availability tomorrow to review proposals

[ishpaul777]

on my radar will review in 2-3 hours tomorrow for sure

[ishpaul777]

@mkzie2 Root cause is correct and for solution instead of cleanup function i suggest we should add a validation check for webiste here:

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

Lines 80 to 83 in e4969b2

	...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
	companyTaxID: values.companyTaxID?.replace(CONST.REGEX.NON_NUMERIC, ''),
	companyPhone: parsePhoneNumber(values.companyPhone ?? '', {regionCode: CONST.COUNTRY.US}).number?.significant,
	},

            website: ValidationUtils.isValidWebsite(values.website) ? values.website : undefined,

we can assign @mkzie2 as the solution is built up on their RCA
🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @ishpaul777 🎉 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]

📣 @mkzie2 You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[techievivek]

Not overdue, issue is assigned to @mkzie2

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.52-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: error when changing website value and reset it #50715

If no regressions arise, payment will be issued on 2024-10-30. 🎊

For reference, here are some details about the assignees on this issue:

• @ishpaul777 requires payment automatic offer (Reviewer)
• @mkzie2 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [@ishpaul777] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@ishpaul777] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@ishpaul777] Determine if we should create a regression test for this bug.
• [@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@anmurali] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[ishpaul777]

will fillout checklist soon...

[ishpaul777]

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:Business Info Page #30924
• [@ishpaul777] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/30924/files#r1825261213
• [@ishpaul777] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: Not required
• [@ishpaul777] Determine if we should create a regression test for this bug. No this was a one time small bug now its fixed.
• [@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. N/A

[melvin-bot]

@anmurali, @techievivek, @ishpaul777, @mkzie2 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ishpaul777]

only pending payment

[melvin-bot]

@anmurali, @techievivek, @ishpaul777, @mkzie2 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[anmurali]

@ishpaul777 is paid
@mkzie2 - your offer is here

[mkzie2]

@mkzie2 - your offer is here

@anmurali I accepted, it can be paid out and closed

[melvin-bot]

@anmurali, @techievivek, @ishpaul777, @mkzie2 Huh... This is 4 days overdue. Who can take care of this?

[ishpaul777]

not overdue on me