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

@anmurali

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:

Log in to an account
Create a workspace > Enable Workflow > Connect bank account > Connect online with plaid
Continues the flow until you reached "Company website" page
Write invalid email
Click "next"
After the error is show, clear the invalid email and go back.
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:

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

@anmurali

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.

@anmurali

@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

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

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);
            }
        };
    }, []);

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

@ishpaul777

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

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

@anmurali

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

only pending payment

@anmurali

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

@ishpaul777

@ishpaul777 is paid
@mkzie2 - your offer is here

@mkzie2

@mkzie2 - your offer is here

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

@anmurali

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

not overdue on me

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

What alternative solutions did you explore? (Optional 2)

What alternative solutions did you explore? (Optional 3)

Result

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

27 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	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],
	);
	}

	} else {
	prevScreen();
	}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 2, 2024

IuliiaHerets commented on Oct 2, 2024

Krishna2323 commented on Oct 2, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

What alternative solutions did you explore? (Optional 2)

What alternative solutions did you explore? (Optional 3)

Result

mkzie2 commented on Oct 3, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Oct 5, 2024

melvin-bot commented on Oct 5, 2024

27 remaining items

ishpaul777 commented on Oct 30, 2024

ishpaul777 commented on Oct 31, 2024

melvin-bot commented on Nov 1, 2024

ishpaul777 commented on Nov 1, 2024

melvin-bot commented on Nov 5, 2024

anmurali commented on Nov 6, 2024

mkzie2 commented on Nov 7, 2024

melvin-bot commented on Nov 11, 2024

ishpaul777 commented on Nov 11, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Proposal 

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