From 3775beaea70c26013f1d235904dbadea646248e0 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Mon, 14 Oct 2024 17:35:35 +0700
Subject: [PATCH 1/2] fix: error when changing website value and undo it

---
 src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
index 814db3536973..ee68d339c289 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
@@ -11,6 +11,7 @@ import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import getInitialSubstepForBusinessInfo from '@pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo';
 import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
 import * as BankAccounts from '@userActions/BankAccounts';
@@ -80,6 +81,7 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
                     ...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,
                 },
                 policyID,
                 isConfirmPage,

From f80c46f4af04ccf8c47b3232b29b2dcbec7d5b9e Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Mon, 14 Oct 2024 17:54:38 +0700
Subject: [PATCH 2/2] migrate to useOnyx

---
 .../BusinessInfo/BusinessInfo.tsx             | 29 ++++---------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
index ee68d339c289..7aadcfc56b95 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
@@ -1,8 +1,7 @@
 import lodashPick from 'lodash/pick';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -17,9 +16,7 @@ import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
 import AddressBusiness from './substeps/AddressBusiness';
 import ConfirmationBusiness from './substeps/ConfirmationBusiness';
 import IncorporationDateBusiness from './substeps/IncorporationDateBusiness';
@@ -30,15 +27,7 @@ import TaxIdBusiness from './substeps/TaxIdBusiness';
 import TypeBusiness from './substeps/TypeBusiness/TypeBusiness';
 import WebsiteBusiness from './substeps/WebsiteBusiness';
 
-type BusinessInfoOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-
-type BusinessInfoProps = BusinessInfoOnyxProps & {
+type BusinessInfoProps = {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
 };
@@ -57,9 +46,11 @@ const bodyContent: Array<React.ComponentType<SubStepProps>> = [
     ConfirmationBusiness,
 ];
 
-function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress}: BusinessInfoProps) {
+function BusinessInfo({onBackButtonPress}: BusinessInfoProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const getBankAccountFields = useCallback(
         (fieldNames: string[]) => ({
@@ -144,12 +135,4 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
 
 BusinessInfo.displayName = 'BusinessInfo';
 
-export default withOnyx<BusinessInfoProps, BusinessInfoOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(BusinessInfo);
+export default BusinessInfo;