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

Issue Owner

Current Issue Owner: @ishpaul777

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