Fix company's website step is skipped

src/components/Form/FormProvider.tsx

@@ -17,7 +17,7 @@
 import type {RegisterInput} from './FormContext';
 import FormContext from './FormContext';
 import FormWrapper from './FormWrapper';
-import type {FormInputErrors, FormOnyxValues, FormProps, FormRef, InputComponentBaseProps, InputRefs, ValueTypeKey} from './types';
+import type {FormInputErrors, FormOnyxValues, FormProps, FormRef, FormValue, InputComponentBaseProps, InputRefs, ValueTypeKey} from './types';
 
 // In order to prevent Checkbox focus loss when the user are focusing a TextInput and proceeds to toggle a CheckBox in web and mobile web.
 // 200ms delay was chosen as a result of empirical testing.
@@ -40,6 +40,10 @@
     }
 }
 
+function isEmptyValue(value: FormValue) {
+    return value === undefined || value === '';
+};
+
 type FormProviderOnyxProps = {
     /** Contains the form state that must be accessed outside the component */
     formState: OnyxEntry<Form>;
@@ -249,7 +253,7 @@
             } 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) {
+            } else if (isEmptyValue(inputValues[inputID])) {
                 // We want to initialize the input value if it's undefined
                 inputValues[inputID] = inputProps.defaultValue ?? getInitialValueByType(inputProps.valueType);
             }

src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts

@@ -2,7 +2,7 @@
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
 import {WRITE_COMMANDS} from '@libs/API/types';
 import {getDefaultCompanyWebsite} from '@libs/BankAccountUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -18,7 +18,7 @@
 /**
  * Reset user's reimbursement account. This will delete the bank account.
  */
 function resetFreePlanBankAccount(bankAccountID: number | undefined, session: OnyxEntry<OnyxTypes.Session>, policyID: string, user: OnyxEntry<OnyxTypes.User>) {
     if (!bankAccountID) {
         throw new Error('Missing bankAccountID when attempting to reset free plan bank account');
     }
@@ -98,7 +98,7 @@
                         [INPUT_IDS.BUSINESS_INFO_STEP.STATE]: '',
                         [INPUT_IDS.BUSINESS_INFO_STEP.ZIP_CODE]: '',
                         [INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_PHONE]: '',
-                        [INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_WEBSITE]: getDefaultCompanyWebsite(session, user),
+                        [INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_WEBSITE]: '',
                         [INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_TAX_ID]: '',
                         [INPUT_IDS.BUSINESS_INFO_STEP.INCORPORATION_TYPE]: '',
                         [INPUT_IDS.BUSINESS_INFO_STEP.INCORPORATION_DATE]: '',

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

@@ -1,4 +1,4 @@
 import React, {useCallback, useEffect, useMemo} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
@@ -12,7 +12,7 @@
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDefaultCompanyWebsite} from '@libs/BankAccountUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -39,7 +39,7 @@
     const styles = useThemeStyles();
 
     const defaultWebsiteExample = useMemo(() => getDefaultCompanyWebsite(session, user), [session, user]);
-    const defaultCompanyWebsite = reimbursementAccount?.achData?.website ?? defaultWebsiteExample;
+    const defaultCompanyWebsite = reimbursementAccount?.achData?.website || defaultWebsiteExample;
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
@@ -59,10 +59,6 @@
         shouldSaveDraft: isEditing,
     });
 
-    useEffect(() => {
-        BankAccounts.addBusinessWebsiteForDraft(defaultCompanyWebsite);
-    }, [defaultCompanyWebsite]);
-
     return (
         <FormProvider
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}

src/pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo.ts

@@ -1,3 +1,4 @@
+import * as ValidationUtils from '@libs/ValidationUtils';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
 import type {CompanyStepProps} from '@src/types/form/ReimbursementAccountForm';
 
@@ -15,7 +16,7 @@ function getInitialSubstepForBusinessInfo(data: CompanyStepProps): number {
         return 1;
     }
 
-    if (data[businessInfoStepKeys.COMPANY_WEBSITE] === '') {
+    if (data[businessInfoStepKeys.COMPANY_WEBSITE] === '' || !ValidationUtils.isValidWebsite(data[businessInfoStepKeys.COMPANY_WEBSITE])) {
         return 2;
     }