From 8fb16bcb56fe480983b032e4cf1375b48e22c18b Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 23 Feb 2024 10:52:30 +0100
Subject: [PATCH 01/33] ref: migrate AddressForm to TS

---
 src/components/AddressSearch/types.ts         |   2 +-
 src/components/Form/InputWrapper.tsx          |   3 +-
 src/pages/ReimbursementAccount/AddressForm.js | 163 ------------------
 .../ReimbursementAccount/AddressForm.tsx      | 128 ++++++++++++++
 4 files changed, 131 insertions(+), 165 deletions(-)
 delete mode 100644 src/pages/ReimbursementAccount/AddressForm.js
 create mode 100644 src/pages/ReimbursementAccount/AddressForm.tsx

diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index 9b4254a9bc45..25e8187d1542 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -94,4 +94,4 @@ type AddressSearchProps = {
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>) => boolean;
 
-export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType};
+export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType, StreetValue};
diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx
index 4d55de008516..0f8152f6cb89 100644
--- a/src/components/Form/InputWrapper.tsx
+++ b/src/components/Form/InputWrapper.tsx
@@ -4,6 +4,7 @@ import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import RoomNameInput from '@components/RoomNameInput';
 import TextInput from '@components/TextInput';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import type {State} from '@libs/Navigation/types';
 import FormContext from './FormContext';
 import type {InputComponentBaseProps, InputComponentValueProps, ValidInputs, ValueTypeKey} from './types';
 
@@ -57,7 +58,7 @@ function computeComponentSpecificRegistrationParams({
 type InputWrapperProps<TInput extends ValidInputs, TValue extends ValueTypeKey = ValueTypeKey> = ComponentPropsWithoutRef<TInput> &
     InputComponentValueProps<TValue> & {
         InputComponent: TInput;
-        inputID: string;
+        inputID: string | State;
         isFocused?: boolean;
 
         /**
diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
deleted file mode 100644
index dc95d62b6afa..000000000000
--- a/src/pages/ReimbursementAccount/AddressForm.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import AddressSearch from '@components/AddressSearch';
-import InputWrapper from '@components/Form/InputWrapper';
-import StatePicker from '@components/StatePicker';
-import TextInput from '@components/TextInput';
-import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
-
-const propTypes = {
-    /** Translate key for Street name */
-    streetTranslationKey: PropTypes.string.isRequired,
-
-    /** Callback fired when a field changes. Passes args as {[fieldName]: val} */
-    onFieldChange: PropTypes.func,
-
-    /** Default values */
-    defaultValues: PropTypes.shape({
-        /** Address street field */
-        street: PropTypes.string,
-
-        /** Address city field */
-        city: PropTypes.string,
-
-        /** Address state field */
-        state: PropTypes.string,
-
-        /** Address zip code field */
-        zipCode: PropTypes.string,
-    }),
-
-    /** Form values */
-    values: PropTypes.shape({
-        /** Address street field */
-        street: PropTypes.string,
-
-        /** Address city field */
-        city: PropTypes.string,
-
-        /** Address state field */
-        state: PropTypes.string,
-
-        /** Address zip code field */
-        zipCode: PropTypes.string,
-    }),
-
-    /** Any errors that can arise from form validation */
-    errors: PropTypes.shape({
-        street: PropTypes.bool,
-        city: PropTypes.bool,
-        state: PropTypes.bool,
-        zipCode: PropTypes.bool,
-    }),
-
-    /** The map for inputID of the inputs */
-    inputKeys: PropTypes.shape({
-        street: PropTypes.string,
-        city: PropTypes.string,
-        state: PropTypes.string,
-        zipCode: PropTypes.string,
-    }),
-
-    /** Saves a draft of the input value when used in a form */
-    shouldSaveDraft: PropTypes.bool,
-
-    /** Returns translated string for given locale and phrase */
-    translate: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-    values: {
-        street: undefined,
-        city: undefined,
-        state: undefined,
-        zipCode: undefined,
-    },
-    defaultValues: {
-        street: undefined,
-        city: undefined,
-        state: undefined,
-        zipCode: undefined,
-    },
-    errors: {},
-    inputKeys: {
-        street: '',
-        city: '',
-        state: '',
-        zipCode: '',
-    },
-    shouldSaveDraft: false,
-    onFieldChange: () => {},
-};
-
-function AddressForm(props) {
-    const styles = useThemeStyles();
-    return (
-        <>
-            <View>
-                <InputWrapper
-                    InputComponent={AddressSearch}
-                    inputID={props.inputKeys.street}
-                    shouldSaveDraft={props.shouldSaveDraft}
-                    label={props.translate(props.streetTranslationKey)}
-                    containerStyles={[styles.mt6]}
-                    value={props.values.street}
-                    defaultValue={props.defaultValues.street}
-                    onInputChange={props.onFieldChange}
-                    errorText={props.errors.street ? 'bankAccount.error.addressStreet' : ''}
-                    renamedInputKeys={props.inputKeys}
-                    maxInputLength={CONST.FORM_CHARACTER_LIMIT}
-                    isLimitedToUSA
-                />
-            </View>
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={props.inputKeys.city}
-                shouldSaveDraft={props.shouldSaveDraft}
-                label={props.translate('common.city')}
-                accessibilityLabel={props.translate('common.city')}
-                role={CONST.ROLE.PRESENTATION}
-                value={props.values.city}
-                defaultValue={props.defaultValues.city}
-                onChangeText={(value) => props.onFieldChange({city: value})}
-                errorText={props.errors.city ? 'bankAccount.error.addressCity' : ''}
-                containerStyles={[styles.mt6]}
-            />
-
-            <View style={[styles.mt3, styles.mhn5]}>
-                <InputWrapper
-                    InputComponent={StatePicker}
-                    inputID={props.inputKeys.state}
-                    shouldSaveDraft={props.shouldSaveDraft}
-                    value={props.values.state}
-                    defaultValue={props.defaultValues.state || ''}
-                    onInputChange={(value) => props.onFieldChange({state: value})}
-                    errorText={props.errors.state ? 'bankAccount.error.addressState' : ''}
-                />
-            </View>
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={props.inputKeys.zipCode}
-                shouldSaveDraft={props.shouldSaveDraft}
-                label={props.translate('common.zip')}
-                accessibilityLabel={props.translate('common.zip')}
-                role={CONST.ROLE.PRESENTATION}
-                inputMode={CONST.INPUT_MODE.NUMERIC}
-                value={props.values.zipCode}
-                defaultValue={props.defaultValues.zipCode}
-                onChangeText={(value) => props.onFieldChange({zipCode: value})}
-                errorText={props.errors.zipCode ? 'bankAccount.error.zipCode' : ''}
-                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
-                hint={['common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}]}
-                containerStyles={[styles.mt3]}
-            />
-        </>
-    );
-}
-
-AddressForm.propTypes = propTypes;
-AddressForm.defaultProps = defaultProps;
-AddressForm.displayName = 'AddressForm';
-export default AddressForm;
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
new file mode 100644
index 000000000000..dfadaa3d55b9
--- /dev/null
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import {View} from 'react-native';
+import AddressSearch from '@components/AddressSearch';
+import InputWrapper from '@components/Form/InputWrapper';
+import StatePicker from '@components/StatePicker';
+import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {State} from '@libs/Navigation/types';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+
+type Address = {
+    /** Address street field */
+    street: string;
+
+    /** Address city field */
+    city: string;
+
+    /** Address state field */
+    state: State;
+
+    /** Address zip code field */
+    zipCode: string;
+
+    /** Address street2 field */
+    street2: string;
+
+    /** Address latitude field */
+    lat: string;
+
+    /** Address longitude field */
+    lng: string;
+};
+
+type AddressError = Record<keyof Address, boolean>;
+
+type AddressFormProps = {
+    /** Translate key for Street name */
+    streetTranslationKey: TranslationPaths;
+
+    /** Callback fired when a field changes. Passes args as {[fieldName]: val} */
+    onFieldChange?: <T>(value: T) => void;
+
+    /** Default values */
+    defaultValues?: Address;
+
+    /** Form values */
+    values?: Address;
+
+    /** Any errors that can arise from form validation */
+    errors?: AddressError;
+
+    /** The map for inputID of the inputs */
+    inputKeys?: Address;
+
+    /** Saves a draft of the input value when used in a form */
+    shouldSaveDraft?: boolean;
+};
+
+function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, inputKeys, onFieldChange = () => {}, streetTranslationKey}: AddressFormProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    return (
+        <>
+            <View>
+                <InputWrapper
+                    InputComponent={AddressSearch}
+                    inputID={inputKeys?.street ?? 'streetInput'}
+                    shouldSaveDraft={shouldSaveDraft}
+                    label={translate(streetTranslationKey)}
+                    containerStyles={[styles.mt6]}
+                    value={values?.street}
+                    defaultValue={defaultValues?.street}
+                    onInputChange={onFieldChange}
+                    errorText={errors?.street ? 'bankAccount.error.addressStreet' : ''}
+                    renamedInputKeys={inputKeys}
+                    maxInputLength={CONST.FORM_CHARACTER_LIMIT}
+                    isLimitedToUSA
+                />
+            </View>
+            <InputWrapper
+                InputComponent={TextInput}
+                inputID={inputKeys?.city ?? 'cityInput'}
+                shouldSaveDraft={shouldSaveDraft}
+                label={translate('common.city')}
+                accessibilityLabel={translate('common.city')}
+                role={CONST.ROLE.PRESENTATION}
+                value={values?.city}
+                defaultValue={defaultValues?.city}
+                onChangeText={(value) => onFieldChange({city: value})}
+                errorText={errors?.city ? 'bankAccount.error.addressCity' : ''}
+                containerStyles={[styles.mt6]}
+            />
+
+            <View style={[styles.mt3, styles.mhn5]}>
+                <InputWrapper
+                    InputComponent={StatePicker}
+                    inputID={inputKeys?.state ?? 'stateInput'}
+                    shouldSaveDraft={shouldSaveDraft}
+                    value={values?.state ?? ''}
+                    defaultValue={defaultValues?.state ?? ''}
+                    onInputChange={(value) => onFieldChange({state: value})}
+                    errorText={errors?.state ? 'bankAccount.error.addressState' : ''}
+                />
+            </View>
+            <InputWrapper
+                InputComponent={TextInput}
+                inputID={inputKeys?.zipCode ?? 'zipCodeInput'}
+                shouldSaveDraft={shouldSaveDraft}
+                label={translate('common.zip')}
+                accessibilityLabel={translate('common.zip')}
+                role={CONST.ROLE.PRESENTATION}
+                inputMode={CONST.INPUT_MODE.NUMERIC}
+                value={values?.zipCode}
+                defaultValue={defaultValues?.zipCode}
+                onChangeText={(value) => onFieldChange({zipCode: value})}
+                errorText={errors?.zipCode ? 'bankAccount.error.zipCode' : ''}
+                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+                hint={['common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}]}
+                containerStyles={[styles.mt3]}
+            />
+        </>
+    );
+}
+
+AddressForm.displayName = 'AddressForm';
+export default AddressForm;

From 06d3b9a6221c7848e8eff858b243a51ff3b1bc2f Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 23 Feb 2024 17:07:08 +0100
Subject: [PATCH 02/33] ref: move WorkspaceResetBanAccountModal to TS, fixes
 for AddressForm

---
 src/components/AddressSearch/index.tsx        |  2 +-
 src/components/AddressSearch/types.ts         |  5 +--
 src/components/Form/types.ts                  |  4 ++-
 .../ReimbursementAccount/AddressForm.tsx      |  4 +--
 ....js => WorkspaceResetBankAccountModal.tsx} | 35 +++++++++----------
 5 files changed, 25 insertions(+), 25 deletions(-)
 rename src/pages/workspace/{WorkspaceResetBankAccountModal.js => WorkspaceResetBankAccountModal.tsx} (68%)

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index 89e87eeebe54..5b24fb3fa847 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -48,7 +48,7 @@ function AddressSearch(
             street: 'addressStreet',
             street2: 'addressStreet2',
             city: 'addressCity',
-            state: 'addressState',
+            state: 'addressState' as State,
             zipCode: 'addressZipCode',
             lat: 'addressLat',
             lng: 'addressLng',
diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index 25e8187d1542..d459f97d0d2e 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -2,6 +2,7 @@ import type {RefObject} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
 import type {MaybePhraseKey} from '@libs/Localize';
+import {State} from '@libs/Navigation/types';
 import type Locale from '@src/types/onyx/Locale';
 
 type CurrentLocationButtonProps = {
@@ -16,7 +17,7 @@ type RenamedInputKeysProps = {
     street: string;
     street2: string;
     city: string;
-    state: string;
+    state: State;
     lat: string;
     lng: string;
     zipCode: string;
@@ -77,7 +78,7 @@ type AddressSearchProps = {
     predefinedPlaces?: Place[];
 
     /** A map of inputID key names */
-    renamedInputKeys: RenamedInputKeysProps;
+    renamedInputKeys?: RenamedInputKeysProps;
 
     /** Maximum number of characters allowed in search input */
     maxInputLength?: number;
diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
index ae98978ffcad..5360da93d6fe 100644
--- a/src/components/Form/types.ts
+++ b/src/components/Form/types.ts
@@ -11,6 +11,7 @@ import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import type StatePicker from '@components/StatePicker';
 import type TextInput from '@components/TextInput';
 import type ValuePicker from '@components/ValuePicker';
+import type {State} from '@libs/Navigation/types';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
 import type {TranslationPaths} from '@src/languages/types';
 import type {OnyxFormKey, OnyxValues} from '@src/ONYXKEYS';
@@ -36,11 +37,12 @@ type ValidInputs =
     | typeof StatePicker
     | typeof ValuePicker;
 
-type ValueTypeKey = 'string' | 'boolean' | 'date';
+type ValueTypeKey = 'string' | 'boolean' | 'date' | 'state';
 type ValueTypeMap = {
     string: string;
     boolean: boolean;
     date: Date;
+    state: State;
 };
 type FormValue = ValueOf<ValueTypeMap>;
 
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index dfadaa3d55b9..4f618982c737 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -98,8 +98,8 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                     InputComponent={StatePicker}
                     inputID={inputKeys?.state ?? 'stateInput'}
                     shouldSaveDraft={shouldSaveDraft}
-                    value={values?.state ?? ''}
-                    defaultValue={defaultValues?.state ?? ''}
+                    value={values?.state}
+                    defaultValue={defaultValues?.state}
                     onInputChange={(value) => onFieldChange({state: value})}
                     errorText={errors?.state ? 'bankAccount.error.addressState' : ''}
                 />
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
similarity index 68%
rename from src/pages/workspace/WorkspaceResetBankAccountModal.js
rename to src/pages/workspace/WorkspaceResetBankAccountModal.tsx
index f98077a546ca..19428408c609 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.js
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
@@ -1,34 +1,32 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
-import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type * as OnyxTypes from '@src/types/onyx';
 
-const propTypes = {
-    /** Reimbursement account data */
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
-
+type WorkspaceResetBankAccountModalOnyxProps = {
     /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user email */
-        email: PropTypes.string,
-    }).isRequired,
+    session: OnyxEntry<OnyxTypes.Session>;
+};
+
+type WorkspaceResetBankAccountModalProps = WorkspaceResetBankAccountModalOnyxProps & {
+    /** Reimbursement account data */
+    reimbursementAccount: OnyxTypes.ReimbursementAccount;
 };
 
-function WorkspaceResetBankAccountModal({reimbursementAccount, session}) {
+function WorkspaceResetBankAccountModal({reimbursementAccount, session}: WorkspaceResetBankAccountModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const achData = lodashGet(reimbursementAccount, 'achData') || {};
-    const isInOpenState = achData.state === BankAccount.STATE.OPEN;
-    const bankAccountID = achData.bankAccountID;
-    const bankShortName = `${achData.addressName || ''} ${(achData.accountNumber || '').slice(-4)}`;
+    const achData = reimbursementAccount?.achData;
+    const isInOpenState = achData?.state === BankAccount.STATE.OPEN;
+    const bankAccountID = achData?.bankAccountID;
+    const bankShortName = `${achData?.addressName ?? ''} ${(achData?.accountNumber ?? '').slice(-4)}`;
 
     return (
         <ConfirmModal
@@ -48,7 +46,7 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, session}) {
             }
             danger
             onCancel={BankAccounts.cancelResetFreePlanBankAccount}
-            onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID, session, achData.policyID)}
+            onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID ?? -1, session ?? {}, achData?.policyID ?? '')}
             shouldShowCancelButton
             isVisible
         />
@@ -56,9 +54,8 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, session}) {
 }
 
 WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal';
-WorkspaceResetBankAccountModal.propTypes = propTypes;
 
-export default withOnyx({
+export default withOnyx<WorkspaceResetBankAccountModalProps, WorkspaceResetBankAccountModalOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },

From 9f40e79ff1daa83355ca3689f7b6b6d320813cd8 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 23 Feb 2024 17:11:11 +0100
Subject: [PATCH 03/33] ref: move RequestorStep to TS

---
 .../PersonalInfo/PersonalInfo.tsx              |  3 ++-
 .../{RequestorStep.js => RequestorStep.tsx}    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)
 rename src/pages/ReimbursementAccount/{RequestorStep.js => RequestorStep.tsx} (56%)

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
index ce37cd4aa4e2..b259a4ee7e3c 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
@@ -1,3 +1,4 @@
+import type {RefAttributes} from 'react';
 import React, {forwardRef, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -95,7 +96,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
 
 PersonalInfo.displayName = 'PersonalInfo';
 
-export default withOnyx<PersonalInfoProps, PersonalInfoOnyxProps>({
+export default withOnyx<RefAttributes<View> & PersonalInfoProps, PersonalInfoOnyxProps>({
     // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
     reimbursementAccount: {
         key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.tsx
similarity index 56%
rename from src/pages/ReimbursementAccount/RequestorStep.js
rename to src/pages/ReimbursementAccount/RequestorStep.tsx
index a8060cb1ae90..ef2901b1370a 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.tsx
@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import type {ForwardedRef} from 'react';
+import React, {forwardRef} from 'react';
+import type {View} from 'react-native';
 import PersonalInfo from './PersonalInfo/PersonalInfo';
 import VerifyIdentity from './VerifyIdentity/VerifyIdentity';
 
-const propTypes = {
+type RequestorStepProps = {
     /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
+    onBackButtonPress: () => void;
 
     /** If we should show Onfido flow */
-    shouldShowOnfido: PropTypes.bool.isRequired,
+    shouldShowOnfido: boolean;
 };
 
-const RequestorStep = React.forwardRef(({shouldShowOnfido, onBackButtonPress}, ref) => {
+function RequestorStep({shouldShowOnfido, onBackButtonPress}: RequestorStepProps, ref: ForwardedRef<View>) {
     if (shouldShowOnfido) {
         return <VerifyIdentity onBackButtonPress={onBackButtonPress} />;
     }
@@ -22,9 +23,8 @@ const RequestorStep = React.forwardRef(({shouldShowOnfido, onBackButtonPress}, r
             onBackButtonPress={onBackButtonPress}
         />
     );
-});
+}
 
-RequestorStep.propTypes = propTypes;
 RequestorStep.displayName = 'RequestorStep';
 
-export default RequestorStep;
+export default forwardRef(RequestorStep);

From 3125cbe5f54a4f6708f78aa2a6b5e8cf102db7df Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 23 Feb 2024 17:35:11 +0100
Subject: [PATCH 04/33] ref: remove RequestorOnfidoStep because its not used
 anywhere

---
 .../RequestorOnfidoStep.js                    | 103 ------------------
 1 file changed, 103 deletions(-)
 delete mode 100644 src/pages/ReimbursementAccount/RequestorOnfidoStep.js

diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
deleted file mode 100644
index 8cca56779059..000000000000
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {ScrollView} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Onfido from '@components/Onfido';
-import ScreenWrapper from '@components/ScreenWrapper';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import Growl from '@libs/Growl';
-import * as BankAccounts from '@userActions/BankAccounts';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
-
-const propTypes = {
-    /** The bank account currently in setup */
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
-
-    /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
-
-    /** The token required to initialize the Onfido SDK */
-    onfidoToken: PropTypes.string,
-
-    /** The application ID for our Onfido instance */
-    onfidoApplicantID: PropTypes.string,
-};
-
-const defaultProps = {
-    onfidoToken: null,
-    onfidoApplicantID: null,
-};
-
-const HEADER_STEP_COUNTER = {step: 3, total: 5};
-const ONFIDO_ERROR_DISPLAY_DURATION = 10000;
-
-function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoToken, onfidoApplicantID}) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-
-    const submitOnfidoData = (onfidoData) => {
-        BankAccounts.verifyIdentityForBankAccount(lodashGet(reimbursementAccount, 'achData.bankAccountID', 0), {
-            ...onfidoData,
-            applicantID: onfidoApplicantID,
-        });
-        BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true});
-    };
-
-    const handleOnfidoError = () => {
-        // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again.
-        Growl.error(translate('onfidoStep.genericError'), ONFIDO_ERROR_DISPLAY_DURATION);
-        BankAccounts.clearOnfidoToken();
-        BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
-    };
-
-    const handleOnfidoUserExit = () => {
-        BankAccounts.clearOnfidoToken();
-        BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
-    };
-
-    return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldShowOfflineIndicator={false}
-            testID={RequestorOnfidoStep.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('requestorStep.headerTitle')}
-                stepCounter={HEADER_STEP_COUNTER}
-                shouldShowGetAssistanceButton
-                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                onBackButtonPress={onBackButtonPress}
-            />
-            <FullPageOfflineBlockingView>
-                <ScrollView contentContainerStyle={styles.flex1}>
-                    <Onfido
-                        sdkToken={onfidoToken}
-                        onUserExit={handleOnfidoUserExit}
-                        onError={handleOnfidoError}
-                        onSuccess={submitOnfidoData}
-                    />
-                </ScrollView>
-            </FullPageOfflineBlockingView>
-        </ScreenWrapper>
-    );
-}
-
-RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
-RequestorOnfidoStep.propTypes = propTypes;
-RequestorOnfidoStep.defaultProps = defaultProps;
-RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
-
-export default withOnyx({
-    onfidoToken: {
-        key: ONYXKEYS.ONFIDO_TOKEN,
-    },
-    onfidoApplicantID: {
-        key: ONYXKEYS.ONFIDO_APPLICANT_ID,
-    },
-})(RequestorOnfidoStep);

From 08a5d4e9bf532c22d540dde87984a1375596c951 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 23 Feb 2024 21:10:25 +0100
Subject: [PATCH 05/33] ref: move ReimbursementAccount page and did few
 adjustments

---
 src/components/AddressSearch/index.tsx        |   2 +-
 src/libs/Navigation/types.ts                  |   4 +-
 src/libs/actions/BankAccounts.ts              |   2 +-
 ...ntPage.js => ReimbursementAccountPage.tsx} | 263 +++++++++---------
 src/types/onyx/ReimbursementAccount.ts        |   2 +
 5 files changed, 137 insertions(+), 136 deletions(-)
 rename src/pages/ReimbursementAccount/{ReimbursementAccountPage.js => ReimbursementAccountPage.tsx} (74%)

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index 5b24fb3fa847..89e87eeebe54 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -48,7 +48,7 @@ function AddressSearch(
             street: 'addressStreet',
             street2: 'addressStreet2',
             city: 'addressCity',
-            state: 'addressState' as State,
+            state: 'addressState',
             zipCode: 'addressZipCode',
             lat: 'addressLat',
             lng: 'addressLng',
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 4fd218d4fd42..bf3dfc573845 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -365,8 +365,8 @@ type AddPersonalBankAccountNavigatorParamList = {
 
 type ReimbursementAccountNavigatorParamList = {
     [SCREENS.REIMBURSEMENT_ACCOUNT_ROOT]: {
-        stepToOpen: string;
-        policyID: string;
+        stepToOpen?: string;
+        policyID?: string;
     };
 };
 
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
index 30dd03b6e780..e162ce9c30ed 100644
--- a/src/libs/actions/BankAccounts.ts
+++ b/src/libs/actions/BankAccounts.ts
@@ -66,7 +66,7 @@ function openPlaidView() {
     clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID));
 }
 
-function setPlaidEvent(eventName: string) {
+function setPlaidEvent(eventName: string | null) {
     Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, eventName);
 }
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
similarity index 74%
rename from src/pages/ReimbursementAccount/ReimbursementAccountPage.js
rename to src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index cc416a5cfbdd..978c70ef6af7 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -1,10 +1,12 @@
+import {RouteProp} from '@react-navigation/native';
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
+import lodashPick from 'lodash/pick';
 import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {ValueOf} from 'type-fest';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ReimbursementAccountLoadingIndicator from '@components/ReimbursementAccountLoadingIndicator';
@@ -18,13 +20,19 @@ import compose from '@libs/compose';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import BankAccount from '@libs/models/BankAccount';
 import Navigation from '@libs/Navigation/Navigation';
+import {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import shouldReopenOnfido from '@libs/shouldReopenOnfido';
-import withPolicy from '@pages/workspace/withPolicy';
+import withPolicy, {WithPolicyProps} from '@pages/workspace/withPolicy';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+import type * as OnyxTypes from '@src/types/onyx';
+import {ACHData} from '@src/types/onyx/ReimbursementAccount';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ACHContractStep from './ACHContractStep';
 import BankAccountStep from './BankAccountStep';
 import BeneficialOwnersStep from './BeneficialOwnersStep';
@@ -36,73 +44,78 @@ import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropT
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
 import RequestorStep from './RequestorStep';
 
-const propTypes = {
+type ReimbursementAccountDraft = {
+    bankAccountID: number;
+
+    /** Props needed for BankAccountStep */
+    accountNumber: string;
+    routingNumber: string;
+    acceptTerms: boolean;
+    plaidAccountID: string;
+    mask: string;
+
+    /** Props needed for CompanyStep */
+    companyName: string;
+    addressStreet: string;
+    addressCity: string;
+    addressState: string;
+    addressZipCode: string;
+    companyPhone: string;
+    website: string;
+    companyTaxID: string;
+    incorporationType: string;
+    incorporationDate: string | Date;
+    incorporationState: string;
+    hasNoConnectionToCannabis: boolean;
+
+    /** Props needed for RequestorStep */
+    firstName: string;
+    lastName: string;
+    requestorAddressStreet: string;
+    requestorAddressCity: string;
+    requestorAddressState: string;
+    requestorAddressZipCode: string;
+    dob: string | Date;
+    ssnLast4: string;
+    isOnfidoSetupComplete: boolean;
+
+    /** Props needed for ACHContractStep */
+    ownsMoreThan25Percent: boolean;
+    hasOtherBeneficialOwners: boolean;
+    acceptTermsAndConditions: boolean;
+    certifyTrueInformation: boolean;
+    beneficialOwners: string;
+    beneficialOwnerKeys: string[];
+};
+
+type ReimbursementAccountOnyxProps = {
     /** Plaid SDK token to use to initialize the widget */
-    plaidLinkToken: PropTypes.string,
+    plaidLinkToken?: OnyxEntry<string>;
 
     /** Plaid SDK current event */
-    plaidCurrentEvent: PropTypes.string,
-
-    /** ACH data for the withdrawal account actively being set up */
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes,
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: reimbursementAccountDraftPropTypes,
-
-    /** The token required to initialize the Onfido SDK */
-    onfidoToken: PropTypes.string,
-
-    /** Policy values needed in the component */
-    policy: PropTypes.shape({
-        name: PropTypes.string,
-    }),
+    plaidCurrentEvent?: OnyxEntry<string>;
 
     /** Indicated whether the app is loading */
-    isLoadingApp: PropTypes.bool,
+    isLoadingApp: OnyxEntry<boolean>;
 
     /** Holds information about the users account that is logging in */
-    account: PropTypes.shape({
-        /** Whether a sign on form is loading (being submitted) */
-        isLoading: PropTypes.bool,
-    }),
+    account: OnyxEntry<OnyxTypes.Account>;
 
     /** Current session for the user */
-    session: PropTypes.shape({
-        /** User login */
-        email: PropTypes.string,
-    }),
-
-    /** Route object from navigation */
-    route: PropTypes.shape({
-        /** Params that are passed into the route */
-        params: PropTypes.shape({
-            /** A step to navigate to if we need to drop the user into a specific point in the flow */
-            stepToOpen: PropTypes.string,
-            policyID: PropTypes.string,
-        }),
-    }),
-};
+    session: OnyxEntry<OnyxTypes.Session>;
 
-const defaultProps = {
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps,
-    reimbursementAccountDraft: {},
-    onfidoToken: '',
-    policy: {},
-    plaidLinkToken: '',
-    plaidCurrentEvent: '',
-    isLoadingApp: false,
-    account: {},
-    session: {
-        email: null,
-    },
-    route: {
-        params: {
-            stepToOpen: '',
-            policyID: '',
-        },
-    },
+    /** ACH data for the withdrawal account actively being set up */
+    reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
+
+    /** The draft values of the bank account being setup */
+    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountDraft>;
+
+    /** The token required to initialize the Onfido SDK */
+    onfidoToken: OnyxEntry<string>;
 };
 
+type ReimbursementAccountPageProps = WithPolicyProps & ReimbursementAccountOnyxProps & RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
+
 const ROUTE_NAMES = {
     COMPANY: 'company',
     PERSONAL_INFORMATION: 'personal-information',
@@ -116,11 +129,9 @@ const ROUTE_NAMES = {
 /**
  * We can pass stepToOpen in the URL to force which step to show.
  * Mainly needed when user finished the flow in verifying state, and Ops ask them to modify some fields from a specific step.
- * @param {Object} route
- * @returns {String}
  */
-function getStepToOpenFromRouteParams(route) {
-    switch (lodashGet(route, ['params', 'stepToOpen'], '')) {
+function getStepToOpenFromRouteParams(route: RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>): ValueOf<typeof CONST.BANK_ACCOUNT.STEP> | '' {
+    switch (route.params.stepToOpen ?? '') {
         case ROUTE_NAMES.NEW:
             return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
         case ROUTE_NAMES.COMPANY:
@@ -140,11 +151,7 @@ function getStepToOpenFromRouteParams(route) {
     }
 }
 
-/**
- * @param {String} currentStep
- * @returns {String}
- */
-function getRouteForCurrentStep(currentStep) {
+function getRouteForCurrentStep(currentStep: ValueOf<typeof CONST.BANK_ACCOUNT.STEP>): ValueOf<typeof ROUTE_NAMES> {
     switch (currentStep) {
         case CONST.BANK_ACCOUNT.STEP.COMPANY:
             return ROUTE_NAMES.COMPANY;
@@ -164,7 +171,18 @@ function getRouteForCurrentStep(currentStep) {
     }
 }
 
-function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, policy, account, isLoadingApp, session, plaidLinkToken, plaidCurrentEvent, reimbursementAccountDraft}) {
+function ReimbursementAccountPage({
+    reimbursementAccount,
+    route,
+    onfidoToken = '',
+    policy,
+    account,
+    isLoadingApp = false,
+    session,
+    plaidLinkToken = '',
+    plaidCurrentEvent = '',
+    reimbursementAccountDraft,
+}: ReimbursementAccountPageProps) {
     /**
         The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
         user left off. This view will refer to the achData as the single source of truth to determine which route to
@@ -172,26 +190,19 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
         mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical
         next step.
     */
-    const achData = lodashGet(reimbursementAccount, 'achData', {});
+    const achData = reimbursementAccount?.achData;
 
-    /**
-     * @param {Array} fieldNames
-     *
-     * @returns {Object}
-     */
-    function getBankAccountFields(fieldNames) {
+    function getBankAccountFields<T extends keyof ACHData>(fieldNames: T[]): Pick<ACHData, T> {
+        // @ts-expect-error -- Pick<ACHData, T> is more acurate type in this case because lodashPick returns Partial<ACHData>
         return {
-            ..._.pick(lodashGet(reimbursementAccount, 'achData'), ...fieldNames),
+            ...lodashPick(reimbursementAccount?.achData, ...fieldNames),
         };
     }
 
     /**
      * Returns selected bank account fields based on field names provided.
-     *
-     * @param {string} step
-     * @returns {Array<string>}
      */
-    function getFieldsForStep(step) {
+    function getFieldsForStep(step: string): string[] {
         switch (step) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
                 return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings'];
@@ -218,21 +229,21 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
 
     /**
      * Returns true if a VBBA exists in any state other than OPEN or LOCKED
-     * @returns {Boolean}
+
      */
-    function hasInProgressVBBA() {
-        return achData.bankAccountID && achData.state !== BankAccount.STATE.OPEN && achData.state !== BankAccount.STATE.LOCKED;
+    function hasInProgressVBBA(): boolean {
+        return !!achData?.bankAccountID && achData?.state !== BankAccount.STATE.OPEN && achData?.state !== BankAccount.STATE.LOCKED;
     }
     /*
      * Calculates the state used to show the "Continue with setup" view. If a bank account setup is already in progress and
      * no specific further step was passed in the url we'll show the workspace bank account reset modal if the user wishes to start over
      */
-    function getShouldShowContinueSetupButtonInitialValue() {
+    function getShouldShowContinueSetupButtonInitialValue(): boolean {
         if (!hasInProgressVBBA()) {
             // Since there is no VBBA in progress, we won't need to show the component ContinueBankAccountSetup
             return false;
         }
-        return achData.state === BankAccount.STATE.PENDING || _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''], getStepToOpenFromRouteParams(route));
+        return achData?.state === BankAccount.STATE.PENDING || [CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''].includes(getStepToOpenFromRouteParams(route));
     }
 
     /**
@@ -244,14 +255,14 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
         which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes.
      */
     const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(
-        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && _.has(reimbursementAccount, 'achData.currentStep'),
+        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount.achData && 'currentStep' in reimbursementAccount.achData,
     );
 
     const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false);
 
-    const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-    const policyName = lodashGet(policy, 'name', '');
-    const policyID = lodashGet(route.params, 'policyID', '');
+    const currentStep = achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+    const policyName = policy?.name ?? '';
+    const policyID = route.params.policyID ?? '';
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -261,17 +272,17 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
 
     /**
      * Retrieve verified business bank account currently being set up.
-     * @param {boolean} ignoreLocalCurrentStep Pass true if you want the last "updated" view (from db), not the last "viewed" view (from onyx).
+     * @param ignoreLocalCurrentStep Pass true if you want the last "updated" view (from db), not the last "viewed" view (from onyx).
      */
-    function fetchData(ignoreLocalCurrentStep) {
+    function fetchData(ignoreLocalCurrentStep?: boolean) {
         // Show loader right away, as optimisticData might be set only later in case multiple calls are in the queue
         BankAccounts.setReimbursementAccountLoading(true);
 
         // We can specify a step to navigate to by using route params when the component mounts.
         // We want to use the same stepToOpen variable when the network state changes because we can be redirected to a different step when the account refreshes.
         const stepToOpen = getStepToOpenFromRouteParams(route);
-        const subStep = achData.subStep || '';
-        const localCurrentStep = achData.currentStep || '';
+        const subStep = achData?.subStep ?? '';
+        const localCurrentStep = achData?.currentStep ?? '';
         BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyID);
     }
 
@@ -304,7 +315,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
             if (
                 prevReimbursementAccount &&
                 prevReimbursementAccount.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
-                reimbursementAccount.pendingAction !== prevReimbursementAccount.pendingAction
+                reimbursementAccount?.pendingAction !== prevReimbursementAccount.pendingAction
             ) {
                 setShouldShowContinueSetupButton(hasInProgressVBBA());
             }
@@ -316,7 +327,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
             const currentStepRouteParam = getStepToOpenFromRouteParams(route);
             if (currentStepRouteParam === currentStep) {
                 // If the user is connecting online with plaid, reset any bank account errors so we don't persist old data from a potential previous connection
-                if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && achData.subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
+                if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && achData?.subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
                     BankAccounts.hideBankAccountErrors();
                 }
 
@@ -325,7 +336,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
             }
 
             // Update the data that is returned from back-end to draft value
-            const draftStep = reimbursementAccount.draftStep;
+            const draftStep = reimbursementAccount?.draftStep;
             if (draftStep) {
                 BankAccounts.updateReimbursementAccountDraft(getBankAccountFields(getFieldsForStep(draftStep)));
             }
@@ -337,9 +348,9 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
                 BankAccounts.hideBankAccountErrors();
             }
 
-            const backTo = lodashGet(route.params, 'backTo');
+            const backTo = route.params.backTo;
             // eslint-disable-next-line no-shadow
-            const policyID = lodashGet(route.params, 'policyID');
+            const policyID = route.params.policyID;
 
             Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
         },
@@ -354,17 +365,11 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
         fetchData(true);
     };
 
-    /**
-     * @param {String} fieldName
-     * @param {String} defaultValue
-     *
-     * @returns {String}
-     */
-    const getDefaultStateForField = (fieldName, defaultValue = '') => lodashGet(reimbursementAccount, ['achData', fieldName], defaultValue);
+    const getDefaultStateForField = (fieldName: keyof ACHData, defaultValue = ''): string | number | boolean | string[] => reimbursementAccount?.achData?.[fieldName] ?? defaultValue;
 
     const goBack = () => {
-        const subStep = achData.subStep;
-        const shouldShowOnfido = onfidoToken && !achData.isOnfidoSetupComplete;
+        const subStep = achData?.subStep;
+        const shouldShowOnfido = onfidoToken && !achData?.isOnfidoSetupComplete;
 
         switch (currentStep) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
@@ -401,9 +406,9 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
                 break;
 
             case CONST.BANK_ACCOUNT.STEP.VALIDATION:
-                if (_.contains([BankAccount.STATE.VERIFYING, BankAccount.STATE.SETUP], achData.state)) {
+                if ([BankAccount.STATE.VERIFYING, BankAccount.STATE.SETUP].some((value) => value === achData?.state)) {
                     BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT);
-                } else if (!isOffline && achData.state === BankAccount.STATE.PENDING) {
+                } else if (!isOffline && achData?.state === BankAccount.STATE.PENDING) {
                     setShouldShowContinueSetupButton(true);
                 } else {
                     Navigation.goBack();
@@ -415,19 +420,16 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
         }
     };
 
-    const isLoading = (isLoadingApp || account.isLoading || reimbursementAccount.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
+    const isLoading = (!!isLoadingApp || !!account?.isLoading || reimbursementAccount?.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
     const shouldShowOfflineLoader = !(
         isOffline &&
-        _.contains(
-            [
-                CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT,
-                CONST.BANK_ACCOUNT.STEP.COMPANY,
-                CONST.BANK_ACCOUNT.STEP.REQUESTOR,
-                CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS,
-                CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT,
-            ],
-            currentStep,
-        )
+        [
+            CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT,
+            CONST.BANK_ACCOUNT.STEP.COMPANY,
+            CONST.BANK_ACCOUNT.STEP.REQUESTOR,
+            CONST.BANK_ACCOUNT.STEP.BENEFICIAL_OWNERS,
+            CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT,
+        ].some((value) => value === currentStep)
     );
 
     // Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server
@@ -443,16 +445,16 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
                 <FullPageNotFoundView
                     shouldShow
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
-                    subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'}
+                    subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
                 />
             </ScreenWrapper>
         );
     }
 
     let errorText;
-    const userHasPhonePrimaryEmail = Str.endsWith(session.email, CONST.SMS.DOMAIN);
-    const throttledDate = lodashGet(reimbursementAccount, 'throttledDate', '');
-    const hasUnsupportedCurrency = lodashGet(policy, 'outputCurrency', '') !== CONST.CURRENCY.USD;
+    const userHasPhonePrimaryEmail = Str.endsWith(session?.email ?? '', CONST.SMS.DOMAIN);
+    const throttledDate = reimbursementAccount?.throttledDate ?? '';
+    const hasUnsupportedCurrency = (policy?.outputCurrency ?? '') !== CONST.CURRENCY.USD;
 
     if (userHasPhonePrimaryEmail) {
         errorText = translate('bankAccount.hasPhoneLoginError');
@@ -510,7 +512,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
     }
 
     if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
-        const shouldShowOnfido = onfidoToken && !achData.isOnfidoSetupComplete;
+        const shouldShowOnfido = onfidoToken && !achData?.isOnfidoSetupComplete;
         return (
             <RequestorStep
                 ref={requestorStepRef}
@@ -542,12 +544,10 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
     }
 }
 
-ReimbursementAccountPage.propTypes = propTypes;
-ReimbursementAccountPage.defaultProps = defaultProps;
 ReimbursementAccountPage.displayName = 'ReimbursementAccountPage';
 
-export default compose(
-    withOnyx({
+export default withPolicy(
+    withOnyx<ReimbursementAccountPageProps, ReimbursementAccountOnyxProps>({
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
@@ -572,6 +572,5 @@ export default compose(
         account: {
             key: ONYXKEYS.ACCOUNT,
         },
-    }),
-    withPolicy,
-)(ReimbursementAccountPage);
+    })(ReimbursementAccountPage),
+);
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
index 173200ba681a..db56aa027b13 100644
--- a/src/types/onyx/ReimbursementAccount.ts
+++ b/src/types/onyx/ReimbursementAccount.ts
@@ -38,6 +38,8 @@ type ACHData = BeneficialOwnersStepProps &
 
         /** Policy ID of the workspace the bank account is being set up on */
         policyID?: string;
+
+        isOnfidoSetupComplete?: boolean;
     };
 
 type ReimbursementAccount = {

From 8c181882037f6dad85f7443fec2ca655e489190d Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Mon, 26 Feb 2024 11:55:21 +0100
Subject: [PATCH 06/33] ref: move ACHContractStep to TS

---
 .../{ACHContractStep.js => ACHContractStep.tsx}           | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)
 rename src/pages/ReimbursementAccount/{ACHContractStep.js => ACHContractStep.tsx} (61%)

diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.tsx
similarity index 61%
rename from src/pages/ReimbursementAccount/ACHContractStep.js
rename to src/pages/ReimbursementAccount/ACHContractStep.tsx
index f2c2e5af85de..bf6013840db1 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.tsx
@@ -1,16 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import CompleteVerification from './CompleteVerification/CompleteVerification';
 
-const propTypes = {
+type ACHContractStepProps = {
     /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
+    onBackButtonPress: () => void;
 };
 
-function ACHContractStep({onBackButtonPress}) {
+function ACHContractStep({onBackButtonPress}: ACHContractStepProps) {
     return <CompleteVerification onBackButtonPress={onBackButtonPress} />;
 }
 
-ACHContractStep.propTypes = propTypes;
 ACHContractStep.displayName = 'ACHContractStep';
 export default ACHContractStep;

From 1ca6fb0e7458d9bba69e5493434e57a37b21137b Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Mon, 26 Feb 2024 12:27:51 +0100
Subject: [PATCH 07/33] ref: move BankAccountStep to TS

---
 src/libs/Navigation/types.ts                  |   1 +
 src/libs/getPlaidDesktopMessage/types.ts      |   4 +-
 ...BankAccountStep.js => BankAccountStep.tsx} | 146 +++++++++---------
 .../BankInfo/BankInfo.tsx                     |   3 +-
 .../EnableBankAccount/EnableBankAccount.tsx   |   2 +-
 .../ReimbursementAccountPage.tsx              |  36 ++---
 .../WorkspaceResetBankAccountModal.tsx        |   2 +-
 7 files changed, 90 insertions(+), 104 deletions(-)
 rename src/pages/ReimbursementAccount/{BankAccountStep.js => BankAccountStep.tsx} (65%)

diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index bf3dfc573845..ea7934637697 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -367,6 +367,7 @@ type ReimbursementAccountNavigatorParamList = {
     [SCREENS.REIMBURSEMENT_ACCOUNT_ROOT]: {
         stepToOpen?: string;
         policyID?: string;
+        backTo?: Routes;
     };
 };
 
diff --git a/src/libs/getPlaidDesktopMessage/types.ts b/src/libs/getPlaidDesktopMessage/types.ts
index 12a13737339c..95a6254e997b 100644
--- a/src/libs/getPlaidDesktopMessage/types.ts
+++ b/src/libs/getPlaidDesktopMessage/types.ts
@@ -1,3 +1,5 @@
-type GetPlaidDesktopMessage = () => string | undefined;
+import type {TranslationPaths} from '@src/languages/types';
+
+type GetPlaidDesktopMessage = () => TranslationPaths | undefined;
 
 export default GetPlaidDesktopMessage;
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.tsx
similarity index 65%
rename from src/pages/ReimbursementAccount/BankAccountStep.js
rename to src/pages/ReimbursementAccount/BankAccountStep.tsx
index 75ae02587486..a2d836e59be6 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -1,7 +1,6 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {ScrollView, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -14,10 +13,9 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
-import withLocalize from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
@@ -29,59 +27,59 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
+import type * as OnyxTypes from '@src/types/onyx';
 import BankInfo from './BankInfo/BankInfo';
-import StepPropTypes from './StepPropTypes';
 
-const propTypes = {
-    ...StepPropTypes,
+type BankAccountStepOnyxProps = {
+    /** Object with various information about the user */
+    user: OnyxEntry<OnyxTypes.User>;
 
+    /** If the plaid button has been disabled */
+    isPlaidDisabled: OnyxEntry<boolean>;
+};
+
+type BankAccountStepProps = BankAccountStepOnyxProps & {
     /** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */
-    receivedRedirectURI: PropTypes.string,
+    receivedRedirectURI?: string | null;
 
     /** During the OAuth flow we need to use the plaidLink token that we initially connected with */
-    plaidLinkOAuthToken: PropTypes.string,
-
-    /** Object with various information about the user */
-    user: PropTypes.shape({
-        /** Is the user account validated? */
-        validated: PropTypes.bool,
-    }),
-
-    /** If the plaid button has been disabled */
-    isPlaidDisabled: PropTypes.bool,
+    plaidLinkOAuthToken?: OnyxEntry<string>;
 
     /* The workspace name */
-    policyName: PropTypes.string,
+    policyName?: string;
 
     /* The workspace ID */
-    policyID: PropTypes.string,
-};
+    policyID?: string;
+
+    /** The bank account currently in setup */
+    reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
 
-const defaultProps = {
-    receivedRedirectURI: null,
-    plaidLinkOAuthToken: '',
-    user: {},
-    isPlaidDisabled: false,
-    policyName: '',
-    policyID: '',
+    /** Goes to the previous step */
+    onBackButtonPress: () => void;
 };
 
 const bankInfoStepKeys = INPUT_IDS.BANK_INFO_STEP;
 
-function BankAccountStep(props) {
+function BankAccountStep({
+    plaidLinkOAuthToken = '',
+    policyID = '',
+    policyName = '',
+    user,
+    receivedRedirectURI,
+    reimbursementAccount,
+    onBackButtonPress,
+    isPlaidDisabled,
+}: BankAccountStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    let subStep = lodashGet(props.reimbursementAccount, 'achData.subStep', '');
-    const shouldReinitializePlaidLink = props.plaidLinkOAuthToken && props.receivedRedirectURI && subStep !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
+    const {translate} = useLocalize();
+    let subStep = reimbursementAccount?.achData?.subStep ?? '';
+    const shouldReinitializePlaidLink = plaidLinkOAuthToken && receivedRedirectURI && subStep !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
     if (shouldReinitializePlaidLink) {
         subStep = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
     }
     const plaidDesktopMessage = getPlaidDesktopMessage();
-    const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(
-        'new',
-        props.policyID,
-        ROUTES.WORKSPACE_INITIAL.getRoute(props.policyID),
-    )}`;
+    const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
 
     const removeExistingBankAccountDetails = () => {
         const bankAccountData = {
@@ -99,8 +97,8 @@ function BankAccountStep(props) {
     if (subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID || subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
         return (
             <BankInfo
-                onBackButtonPress={props.onBackButtonPress}
-                policyID={props.policyID}
+                onBackButtonPress={onBackButtonPress}
+                policyID={policyID}
             />
         );
     }
@@ -112,49 +110,48 @@ function BankAccountStep(props) {
         >
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithBackButton
-                    title={props.translate('workspace.common.connectBankAccount')}
-                    subtitle={props.policyName}
+                    title={translate('workspace.common.connectBankAccount')}
+                    subtitle={policyName}
                     stepCounter={subStep ? {step: 1, total: 5} : undefined}
-                    onBackButtonPress={props.onBackButtonPress}
+                    onBackButtonPress={onBackButtonPress}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
                 />
-                <ScrollView style={[styles.flex1]}>
+                <ScrollView style={styles.flex1}>
                     <Section
                         icon={Illustrations.MoneyWings}
-                        title={props.translate('workspace.bankAccount.streamlinePayments')}
+                        title={translate('workspace.bankAccount.streamlinePayments')}
                     >
-                        <View style={[styles.mv3]}>
-                            <Text>{props.translate('bankAccount.toGetStarted')}</Text>
+                        <View style={styles.mv3}>
+                            <Text>{translate('bankAccount.toGetStarted')}</Text>
                         </View>
-                        {Boolean(plaidDesktopMessage) && (
+                        {!!plaidDesktopMessage && (
                             <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
-                                <TextLink href={bankAccountRoute}>{props.translate(plaidDesktopMessage)}</TextLink>
+                                <TextLink href={bankAccountRoute}>{translate(plaidDesktopMessage)}</TextLink>
                             </View>
                         )}
                         <Button
                             icon={Expensicons.Bank}
-                            text={props.translate('bankAccount.connectOnlineWithPlaid')}
+                            text={translate('bankAccount.connectOnlineWithPlaid')}
                             onPress={() => {
-                                if (props.isPlaidDisabled || !props.user.validated) {
+                                if (!!isPlaidDisabled || !user?.validated) {
                                     return;
                                 }
                                 removeExistingBankAccountDetails();
                                 BankAccounts.openPlaidView();
                             }}
-                            isDisabled={props.isPlaidDisabled || !props.user.validated}
-                            style={[styles.mt4]}
-                            iconStyles={[styles.buttonCTAIcon]}
+                            isDisabled={!!isPlaidDisabled || !user?.validated}
+                            style={styles.mt4}
+                            iconStyles={styles.buttonCTAIcon}
                             shouldShowRightIcon
                             success
                             large
                         />
-                        {Boolean(props.error) && <Text style={[styles.formError, styles.mh5]}>{props.error}</Text>}
-                        <View style={[styles.mv3]}>
+                        <View style={styles.mv3}>
                             <MenuItem
                                 icon={Expensicons.Connect}
-                                title={props.translate('bankAccount.connectManually')}
-                                disabled={!props.user.validated}
+                                title={translate('bankAccount.connectManually')}
+                                disabled={!user?.validated}
                                 onPress={() => {
                                     removeExistingBankAccountDetails();
                                     BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
@@ -164,7 +161,7 @@ function BankAccountStep(props) {
                             />
                         </View>
                     </Section>
-                    {!props.user.validated && (
+                    {!user?.validated && (
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
                             <Icon
                                 src={Expensicons.Exclamation}
@@ -172,28 +169,28 @@ function BankAccountStep(props) {
                             />
 
                             <Text style={[styles.mutedTextLabel, styles.ml4, styles.flex1]}>
-                                {props.translate('bankAccount.validateAccountError.phrase1')}
+                                {translate('bankAccount.validateAccountError.phrase1')}
                                 <TextLink
                                     fontSize={variables.fontSizeLabel}
-                                    onPress={Session.signOutAndRedirectToSignIn}
+                                    onPress={() => Session.signOutAndRedirectToSignIn()}
                                 >
-                                    {props.translate('bankAccount.validateAccountError.phrase2')}
+                                    {translate('bankAccount.validateAccountError.phrase2')}
                                 </TextLink>
                                 .
                             </Text>
                         </View>
                     )}
                     <View style={[styles.mv0, styles.mh5, styles.flexRow, styles.justifyContentBetween]}>
-                        <TextLink href="https://use.expensify.com/privacy">{props.translate('common.privacy')}</TextLink>
+                        <TextLink href="https://use.expensify.com/privacy">{translate('common.privacy')}</TextLink>
                         <PressableWithoutFeedback
                             onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/')}
                             style={[styles.flexRow, styles.alignItemsCenter]}
-                            accessibilityLabel={props.translate('bankAccount.yourDataIsSecure')}
+                            accessibilityLabel={translate('bankAccount.yourDataIsSecure')}
                         >
                             <TextLink href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/">
-                                {props.translate('bankAccount.yourDataIsSecure')}
+                                {translate('bankAccount.yourDataIsSecure')}
                             </TextLink>
-                            <View style={[styles.ml1]}>
+                            <View style={styles.ml1}>
                                 <Icon
                                     src={Expensicons.Lock}
                                     fill={theme.link}
@@ -207,18 +204,13 @@ function BankAccountStep(props) {
     );
 }
 
-BankAccountStep.propTypes = propTypes;
-BankAccountStep.defaultProps = defaultProps;
 BankAccountStep.displayName = 'BankAccountStep';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        user: {
-            key: ONYXKEYS.USER,
-        },
-        isPlaidDisabled: {
-            key: ONYXKEYS.IS_PLAID_DISABLED,
-        },
-    }),
-)(BankAccountStep);
+export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
+    user: {
+        key: ONYXKEYS.USER,
+    },
+    isPlaidDisabled: {
+        key: ONYXKEYS.IS_PLAID_DISABLED,
+    },
+})(BankAccountStep);
diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
index bb352acd4732..12ba39744eb2 100644
--- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
@@ -31,13 +31,12 @@ type BankInfoOnyxProps = {
 
     /** The draft values of the bank account being setup */
     reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-
-    policyID: string;
 };
 
 type BankInfoProps = BankInfoOnyxProps & {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
+    policyID: string;
 };
 
 const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP;
diff --git a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx
index fd2f05493098..d14b00afe5f1 100644
--- a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx
+++ b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx
@@ -29,7 +29,7 @@ type EnableBankAccountOnyxProps = {
 
 type EnableBankAccountProps = EnableBankAccountOnyxProps & {
     /** Bank account currently in setup */
-    reimbursementAccount: ReimbursementAccount;
+    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
 
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress: () => void;
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 978c70ef6af7..72059b2fe8d3 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -1,10 +1,9 @@
-import {RouteProp} from '@react-navigation/native';
+import type {RouteProp} from '@react-navigation/native';
 import Str from 'expensify-common/lib/str';
 import lodashPick from 'lodash/pick';
-import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -16,22 +15,21 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import BankAccount from '@libs/models/BankAccount';
 import Navigation from '@libs/Navigation/Navigation';
-import {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types';
+import type {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import shouldReopenOnfido from '@libs/shouldReopenOnfido';
-import withPolicy, {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import withPolicy from '@pages/workspace/withPolicy';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
+import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
-import {ACHData} from '@src/types/onyx/ReimbursementAccount';
+import type {ACHData} from '@src/types/onyx/ReimbursementAccount';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ACHContractStep from './ACHContractStep';
 import BankAccountStep from './BankAccountStep';
@@ -40,7 +38,6 @@ import CompanyStep from './CompanyStep';
 import ConnectBankAccount from './ConnectBankAccount/ConnectBankAccount';
 import ContinueBankAccountSetup from './ContinueBankAccountSetup';
 import EnableBankAccount from './EnableBankAccount/EnableBankAccount';
-import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropTypes';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
 import RequestorStep from './RequestorStep';
 
@@ -181,7 +178,6 @@ function ReimbursementAccountPage({
     session,
     plaidLinkToken = '',
     plaidCurrentEvent = '',
-    reimbursementAccountDraft,
 }: ReimbursementAccountPageProps) {
     /**
         The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
@@ -255,14 +251,14 @@ function ReimbursementAccountPage({
         which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes.
      */
     const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(
-        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount.achData && 'currentStep' in reimbursementAccount.achData,
+        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.achData && 'currentStep' in reimbursementAccount?.achData,
     );
 
     const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false);
 
     const currentStep = achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
     const policyName = policy?.name ?? '';
-    const policyID = route.params.policyID ?? '';
+    const policyID = route.params?.policyID ?? '';
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -305,7 +301,7 @@ function ReimbursementAccountPage({
             }
 
             if (!hasACHDataBeenLoaded) {
-                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount.isLoading === false) {
+                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.isLoading === false) {
                     setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue());
                     setHasACHDataBeenLoaded(true);
                 }
@@ -348,9 +344,7 @@ function ReimbursementAccountPage({
                 BankAccounts.hideBankAccountErrors();
             }
 
-            const backTo = route.params.backTo;
-            // eslint-disable-next-line no-shadow
-            const policyID = route.params.policyID;
+            const backTo = route.params?.backTo;
 
             Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
         },
@@ -365,8 +359,6 @@ function ReimbursementAccountPage({
         fetchData(true);
     };
 
-    const getDefaultStateForField = (fieldName: keyof ACHData, defaultValue = ''): string | number | boolean | string[] => reimbursementAccount?.achData?.[fieldName] ?? defaultValue;
-
     const goBack = () => {
         const subStep = achData?.subStep;
         const shouldShowOnfido = onfidoToken && !achData?.isOnfidoSetupComplete;
@@ -439,7 +431,7 @@ function ReimbursementAccountPage({
         return <ReimbursementAccountLoadingIndicator onBackButtonPress={goBack} />;
     }
 
-    if (!isLoading && (_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy))) {
+    if (!isLoading && (isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy))) {
         return (
             <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
                 <FullPageNotFoundView
@@ -496,11 +488,9 @@ function ReimbursementAccountPage({
         return (
             <BankAccountStep
                 reimbursementAccount={reimbursementAccount}
-                reimbursementAccountDraft={reimbursementAccountDraft}
                 onBackButtonPress={goBack}
                 receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
                 plaidLinkOAuthToken={plaidLinkToken}
-                getDefaultStateForField={getDefaultStateForField}
                 policyName={policyName}
                 policyID={policyID}
             />
@@ -574,3 +564,5 @@ export default withPolicy(
         },
     })(ReimbursementAccountPage),
 );
+
+export type {ReimbursementAccountDraft};
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
index 19428408c609..d471b89ece7a 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
@@ -17,7 +17,7 @@ type WorkspaceResetBankAccountModalOnyxProps = {
 
 type WorkspaceResetBankAccountModalProps = WorkspaceResetBankAccountModalOnyxProps & {
     /** Reimbursement account data */
-    reimbursementAccount: OnyxTypes.ReimbursementAccount;
+    reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
 };
 
 function WorkspaceResetBankAccountModal({reimbursementAccount, session}: WorkspaceResetBankAccountModalProps) {

From ceb9fab5def5d62d3e380beb7f95d0819608d527 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Mon, 26 Feb 2024 12:29:10 +0100
Subject: [PATCH 08/33] ref: move CompanyStep to TS

---
 .../{CompanyStep.js => CompanyStep.tsx}                  | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)
 rename src/pages/ReimbursementAccount/{CompanyStep.js => CompanyStep.tsx} (58%)

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.tsx
similarity index 58%
rename from src/pages/ReimbursementAccount/CompanyStep.js
rename to src/pages/ReimbursementAccount/CompanyStep.tsx
index ea814ff37943..4c9af53938b3 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.tsx
@@ -1,17 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import BusinessInfo from './BusinessInfo/BusinessInfo';
 
-const propTypes = {
+type CompanyStepProps = {
     /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
+    onBackButtonPress: () => void;
 };
-
-function CompanyStep({onBackButtonPress}) {
+function CompanyStep({onBackButtonPress}: CompanyStepProps) {
     return <BusinessInfo onBackButtonPress={onBackButtonPress} />;
 }
 
-CompanyStep.propTypes = propTypes;
 CompanyStep.displayName = 'CompanyStep';
 
 export default CompanyStep;

From 646a2e51028986b76d141d7158f8b045252d3dd2 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Mon, 26 Feb 2024 13:47:52 +0100
Subject: [PATCH 09/33] ref: move ContinueBankAccountStep, ExampleCheck to TS,
 started working on IdentityForm migration

---
 ...tSetup.js => ContinueBankAccountSetup.tsx} |  62 +++---
 .../{ExampleCheck.js => ExampleCheck.tsx}     |   0
 .../ReimbursementAccount/IdentityForm.js      | 209 ------------------
 .../ReimbursementAccount/IdentityForm.tsx     | 112 ++++++++++
 .../ReimbursementAccountPage.tsx              |   2 +-
 5 files changed, 141 insertions(+), 244 deletions(-)
 rename src/pages/ReimbursementAccount/{ContinueBankAccountSetup.js => ContinueBankAccountSetup.tsx} (57%)
 rename src/pages/ReimbursementAccount/{ExampleCheck.js => ExampleCheck.tsx} (100%)
 delete mode 100644 src/pages/ReimbursementAccount/IdentityForm.js
 create mode 100644 src/pages/ReimbursementAccount/IdentityForm.tsx

diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
similarity index 57%
rename from src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
rename to src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
index d1ac0989ae38..8b410a52789c 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
@@ -1,8 +1,6 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {ScrollView} from 'react-native';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -12,88 +10,84 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
-import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
+import type * as OnyxTypes from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-const propTypes = {
+type ContinueBankAccountStepProps = {
     /** Bank account currently in setup */
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
+    reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
 
     /** Callback to continue to the next step of the setup */
-    continue: PropTypes.func.isRequired,
+    continueFunction: () => void;
 
     /* The workspace name */
-    policyName: PropTypes.string,
+    policyName?: string;
 
     /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
-
-    ...withLocalizePropTypes,
+    onBackButtonPress: () => void;
 };
 
-const defaultProps = {policyName: ''};
-
-function ContinueBankAccountSetup(props) {
+function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimbursementAccount, continueFunction}: ContinueBankAccountStepProps) {
     const styles = useThemeStyles();
-    const errors = lodashGet(props.reimbursementAccount, 'errors', {});
-    const pendingAction = lodashGet(props.reimbursementAccount, 'pendingAction', null);
+    const {translate} = useLocalize();
+    const errors = reimbursementAccount?.errors ?? {};
+    const pendingAction = reimbursementAccount?.pendingAction ?? null;
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             testID={ContinueBankAccountSetup.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('workspace.common.connectBankAccount')}
-                subtitle={props.policyName}
+                title={translate('workspace.common.connectBankAccount')}
+                subtitle={policyName}
                 shouldShowGetAssistanceButton
-                onBackButtonPress={props.onBackButtonPress}
+                onBackButtonPress={onBackButtonPress}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
             />
             <ScrollView style={styles.flex1}>
                 <Section
-                    title={props.translate('workspace.bankAccount.almostDone')}
+                    title={translate('workspace.bankAccount.almostDone')}
                     icon={Illustrations.BankArrow}
                 >
                     <OfflineWithFeedback
                         errors={errors}
-                        shouldShowErrorMessage
+                        shouldShowErrorMessages
                         onClose={BankAccounts.resetReimbursementAccount}
                     >
-                        <Text>{props.translate('workspace.bankAccount.youreAlmostDone')}</Text>
+                        <Text>{translate('workspace.bankAccount.youreAlmostDone')}</Text>
                         <Button
-                            text={props.translate('workspace.bankAccount.continueWithSetup')}
-                            onPress={props.continue}
+                            text={translate('workspace.bankAccount.continueWithSetup')}
+                            onPress={continueFunction}
                             icon={Expensicons.Bank}
-                            style={[styles.mv4]}
-                            iconStyles={[styles.buttonCTAIcon]}
+                            style={styles.mv4}
+                            iconStyles={styles.buttonCTAIcon}
                             shouldShowRightIcon
                             large
                             success
-                            isDisabled={Boolean(pendingAction) || !_.isEmpty(errors)}
+                            isDisabled={Boolean(pendingAction) || !isEmptyObject(errors)}
                         />
                         <MenuItem
-                            title={props.translate('workspace.bankAccount.startOver')}
+                            title={translate('workspace.bankAccount.startOver')}
                             icon={Expensicons.RotateLeft}
                             onPress={() => BankAccounts.requestResetFreePlanBankAccount()}
                             shouldShowRightIcon
                             wrapperStyle={[styles.cardMenuItem]}
-                            disabled={Boolean(pendingAction) || !_.isEmpty(errors)}
+                            disabled={Boolean(pendingAction) || !isEmptyObject(errors)}
                         />
                     </OfflineWithFeedback>
                 </Section>
             </ScrollView>
 
-            {props.reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={props.reimbursementAccount} />}
+            {reimbursementAccount?.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={reimbursementAccount} />}
         </ScreenWrapper>
     );
 }
 
-ContinueBankAccountSetup.propTypes = propTypes;
-ContinueBankAccountSetup.defaultProps = defaultProps;
 ContinueBankAccountSetup.displayName = 'ContinueBankAccountSetup';
 
-export default withLocalize(ContinueBankAccountSetup);
+export default ContinueBankAccountSetup;
diff --git a/src/pages/ReimbursementAccount/ExampleCheck.js b/src/pages/ReimbursementAccount/ExampleCheck.tsx
similarity index 100%
rename from src/pages/ReimbursementAccount/ExampleCheck.js
rename to src/pages/ReimbursementAccount/ExampleCheck.tsx
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
deleted file mode 100644
index 1c53511723af..000000000000
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import {subYears} from 'date-fns';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import DatePicker from '@components/DatePicker';
-import InputWrapper from '@components/Form/InputWrapper';
-import TextInput from '@components/TextInput';
-import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
-import AddressForm from './AddressForm';
-
-const propTypes = {
-    /** Style for wrapping View */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    /** Form values */
-    values: PropTypes.shape({
-        /** First name field */
-        firstName: PropTypes.string,
-
-        /** Last name field */
-        lastName: PropTypes.string,
-
-        /** Address street field */
-        street: PropTypes.string,
-
-        /** Address city field */
-        city: PropTypes.string,
-
-        /** Address state field */
-        state: PropTypes.string,
-
-        /** Address zip code field */
-        zipCode: PropTypes.string,
-
-        /** Date of birth field */
-        dob: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-
-        /** Last 4 digits of SSN */
-        ssnLast4: PropTypes.string,
-    }),
-
-    /** Default values */
-    defaultValues: PropTypes.shape({
-        /** First name field */
-        firstName: PropTypes.string,
-
-        /** Last name field */
-        lastName: PropTypes.string,
-
-        /** Address street field */
-        street: PropTypes.string,
-
-        /** Address city field */
-        city: PropTypes.string,
-
-        /** Address state field */
-        state: PropTypes.string,
-
-        /** Address zip code field */
-        zipCode: PropTypes.string,
-
-        /** Date of birth field */
-        dob: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-
-        /** Last 4 digits of SSN */
-        ssnLast4: PropTypes.string,
-    }),
-
-    /** Any errors that can arise from form validation */
-    errors: PropTypes.objectOf(PropTypes.bool),
-
-    /** The map for inputID of the inputs */
-    inputKeys: PropTypes.shape({
-        firstName: PropTypes.string,
-        lastName: PropTypes.string,
-        dob: PropTypes.string,
-        ssnLast4: PropTypes.string,
-        street: PropTypes.string,
-        city: PropTypes.string,
-        state: PropTypes.string,
-        zipCode: PropTypes.string,
-    }),
-
-    /** Saves a draft of the input value when used in a form */
-    shouldSaveDraft: PropTypes.bool,
-
-    /** Returns translated string for given locale and phrase */
-    translate: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-    style: {},
-    values: {
-        firstName: undefined,
-        lastName: undefined,
-        street: undefined,
-        city: undefined,
-        state: undefined,
-        zipCode: undefined,
-        dob: undefined,
-        ssnLast4: undefined,
-    },
-    defaultValues: {
-        firstName: undefined,
-        lastName: undefined,
-        street: undefined,
-        city: undefined,
-        state: undefined,
-        zipCode: undefined,
-        dob: undefined,
-        ssnLast4: undefined,
-    },
-    errors: {},
-    inputKeys: {
-        firstName: '',
-        lastName: '',
-        street: '',
-        city: '',
-        state: '',
-        zipCode: '',
-        dob: '',
-        ssnLast4: '',
-    },
-    shouldSaveDraft: false,
-};
-
-function IdentityForm(props) {
-    const styles = useThemeStyles();
-    // dob field has multiple validations/errors, we are handling it temporarily like this.
-    const dobErrorText = (props.errors.dob ? 'bankAccount.error.dob' : '') || (props.errors.dobAge ? 'bankAccount.error.age' : '');
-    const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
-
-    const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
-    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
-
-    return (
-        <View style={props.style}>
-            <View style={[styles.flexRow]}>
-                <View style={[styles.flex2, styles.mr2]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={props.inputKeys.firstName}
-                        shouldSaveDraft={props.shouldSaveDraft}
-                        label={`${props.translate('common.firstName')}`}
-                        aria-label={props.translate('common.firstName')}
-                        role={CONST.ROLE.PRESENTATION}
-                        value={props.values.firstName}
-                        defaultValue={props.defaultValues.firstName}
-                        errorText={props.errors.firstName ? 'bankAccount.error.firstName' : ''}
-                    />
-                </View>
-                <View style={[styles.flex2]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={props.inputKeys.lastName}
-                        shouldSaveDraft={props.shouldSaveDraft}
-                        label={`${props.translate('common.lastName')}`}
-                        aria-label={props.translate('common.lastName')}
-                        role={CONST.ROLE.PRESENTATION}
-                        value={props.values.lastName}
-                        defaultValue={props.defaultValues.lastName}
-                        errorText={props.errors.lastName ? 'bankAccount.error.lastName' : ''}
-                    />
-                </View>
-            </View>
-            <InputWrapper
-                InputComponent={DatePicker}
-                inputID={props.inputKeys.dob}
-                shouldSaveDraft={props.shouldSaveDraft}
-                label={`${props.translate('common.dob')}`}
-                containerStyles={[styles.mt4]}
-                placeholder={props.translate('common.dateFormat')}
-                defaultValue={props.values.dob || props.defaultValues.dob}
-                errorText={dobErrorText}
-                minDate={minDate}
-                maxDate={maxDate}
-            />
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={props.inputKeys.ssnLast4}
-                shouldSaveDraft={props.shouldSaveDraft}
-                label={`${props.translate('common.ssnLast4')}`}
-                aria-label={props.translate('common.ssnLast4')}
-                role={CONST.ROLE.PRESENTATION}
-                containerStyles={[styles.mt4]}
-                inputMode={CONST.INPUT_MODE.NUMERIC}
-                defaultValue={props.defaultValues.ssnLast4}
-                errorText={props.errors.ssnLast4 ? 'bankAccount.error.ssnLast4' : ''}
-                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
-            />
-            <AddressForm
-                inputKeys={_.omit(props.inputKeys, identityFormInputKeys)}
-                shouldSaveDraft={props.shouldSaveDraft}
-                translate={props.translate}
-                streetTranslationKey="common.personalAddress"
-                values={_.omit(props.values, identityFormInputKeys)}
-                defaultValues={_.omit(props.defaultValues, identityFormInputKeys)}
-                errors={props.errors}
-            />
-        </View>
-    );
-}
-
-IdentityForm.propTypes = propTypes;
-IdentityForm.defaultProps = defaultProps;
-IdentityForm.displayName = 'IdentityForm';
-export default IdentityForm;
diff --git a/src/pages/ReimbursementAccount/IdentityForm.tsx b/src/pages/ReimbursementAccount/IdentityForm.tsx
new file mode 100644
index 000000000000..16560f363400
--- /dev/null
+++ b/src/pages/ReimbursementAccount/IdentityForm.tsx
@@ -0,0 +1,112 @@
+import {subYears} from 'date-fns';
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import DatePicker from '@components/DatePicker';
+import InputWrapper from '@components/Form/InputWrapper';
+import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import AddressForm from './AddressForm';
+
+type IdentityFormProps = {
+    /** Style for wrapping View */
+    style?: StyleProp<ViewStyle>;
+
+    /** Form values */
+    values: any;
+
+    /** Default values */
+    defaultValues: any;
+
+    /** Any errors that can arise from form validation */
+    errors: Record<string, string>;
+
+    /** The map for inputID of the inputs */
+    inputKeys: any;
+
+    /** Saves a draft of the input value when used in a form */
+    shouldSaveDraft?: boolean;
+};
+
+function IdentityForm({shouldSaveDraft = false, errors, values, inputKeys, defaultValues, style}: IdentityFormProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    // dob field has multiple validations/errors, we are handling it temporarily like this.
+    const dobErrorText = (errors?.dob ? 'bankAccount.error.dob' : '') || (errors?.dobAge ? 'bankAccount.error.age' : '');
+    const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
+
+    const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
+    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
+
+    return (
+        <View style={style}>
+            <View style={[styles.flexRow]}>
+                <View style={[styles.flex2, styles.mr2]}>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={inputKeys.firstName}
+                        shouldSaveDraft={shouldSaveDraft}
+                        label={`${translate('common.firstName')}`}
+                        aria-label={translate('common.firstName')}
+                        role={CONST.ROLE.PRESENTATION}
+                        value={values.firstName}
+                        defaultValue={defaultValues.firstName}
+                        errorText={errors.firstName ? 'bankAccount.error.firstName' : ''}
+                    />
+                </View>
+                <View style={[styles.flex2]}>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={inputKeys.lastName}
+                        shouldSaveDraft={shouldSaveDraft}
+                        label={`${translate('common.lastName')}`}
+                        aria-label={translate('common.lastName')}
+                        role={CONST.ROLE.PRESENTATION}
+                        value={values.lastName}
+                        defaultValue={defaultValues.lastName}
+                        errorText={errors.lastName ? 'bankAccount.error.lastName' : ''}
+                    />
+                </View>
+            </View>
+            <InputWrapper
+                InputComponent={DatePicker}
+                inputID={inputKeys.dob}
+                shouldSaveDraft={shouldSaveDraft}
+                label={`${translate('common.dob')}`}
+                containerStyles={[styles.mt4]}
+                placeholder={translate('common.dateFormat')}
+                defaultValue={values.dob || defaultValues.dob}
+                errorText={dobErrorText}
+                minDate={minDate}
+                maxDate={maxDate}
+            />
+            <InputWrapper
+                InputComponent={TextInput}
+                inputID={inputKeys.ssnLast4}
+                shouldSaveDraft={shouldSaveDraft}
+                label={`${translate('common.ssnLast4')}`}
+                aria-label={translate('common.ssnLast4')}
+                role={CONST.ROLE.PRESENTATION}
+                containerStyles={[styles.mt4]}
+                inputMode={CONST.INPUT_MODE.NUMERIC}
+                defaultValue={defaultValues.ssnLast4}
+                errorText={errors.ssnLast4 ? 'bankAccount.error.ssnLast4' : ''}
+                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
+            />
+            <AddressForm
+                inputKeys={_.omit(inputKeys, identityFormInputKeys)}
+                shouldSaveDraft={shouldSaveDraft}
+                translate={translate}
+                streetTranslationKey="common.personalAddress"
+                values={_.omit(values, identityFormInputKeys)}
+                defaultValues={_.omit(defaultValues, identityFormInputKeys)}
+                errors={errors}
+            />
+        </View>
+    );
+}
+
+IdentityForm.displayName = 'IdentityForm';
+export default IdentityForm;
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 72059b2fe8d3..8a53d5ca729f 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -475,7 +475,7 @@ function ReimbursementAccountPage({
         return (
             <ContinueBankAccountSetup
                 reimbursementAccount={reimbursementAccount}
-                continue={continueFunction}
+                continueFunction={continueFunction}
                 policyName={policyName}
                 onBackButtonPress={() => {
                     Navigation.goBack();

From 67f3da477942708cbee08b3c0aff463fe9f3fdf7 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 27 Feb 2024 08:55:40 +0100
Subject: [PATCH 10/33] fix: typecheck

---
 src/components/AddressSearch/index.tsx        |   3 +-
 src/components/AddressSearch/types.ts         |   2 +-
 src/components/Form/types.ts                  |   2 +-
 src/libs/Navigation/types.ts                  |   2 +-
 .../ReimbursementAccount/AddressForm.tsx      |   2 +-
 .../ReimbursementAccount/IdentityForm.tsx     | 112 ------------------
 .../ReimbursementAccountDraftPropTypes.js     |  45 -------
 .../ReimbursementAccountPage.tsx              |  20 ++--
 .../ReimbursementAccount/StepPropTypes.js     |  20 ----
 9 files changed, 13 insertions(+), 195 deletions(-)
 delete mode 100644 src/pages/ReimbursementAccount/IdentityForm.tsx
 delete mode 100644 src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js
 delete mode 100644 src/pages/ReimbursementAccount/StepPropTypes.js

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index 8ad26e5a7c46..0b9498e34aa2 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -6,6 +6,7 @@ import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'
 import type {GooglePlaceData, GooglePlaceDetail} from 'react-native-google-places-autocomplete';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import LocationErrorMessage from '@components/LocationErrorMessage';
+import type {State} from '@components/StatePicker/StateSelectorModal';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
@@ -48,7 +49,7 @@ function AddressSearch(
             street: 'addressStreet',
             street2: 'addressStreet2',
             city: 'addressCity',
-            state: 'addressState',
+            state: 'addressState' as State,
             zipCode: 'addressZipCode',
             lat: 'addressLat',
             lng: 'addressLng',
diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index c08191dd2489..0d3f8c1a972e 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -1,8 +1,8 @@
 import type {RefObject} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
+import type {State} from '@components/StatePicker/StateSelectorModal';
 import type {MaybePhraseKey} from '@libs/Localize';
-import {State} from '@libs/Navigation/types';
 import type Locale from '@src/types/onyx/Locale';
 
 type CurrentLocationButtonProps = {
diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
index b509f89e0414..40b4fcece482 100644
--- a/src/components/Form/types.ts
+++ b/src/components/Form/types.ts
@@ -10,9 +10,9 @@ import type Picker from '@components/Picker';
 import type RadioButtons from '@components/RadioButtons';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import type StatePicker from '@components/StatePicker';
+import type {State} from '@components/StatePicker/StateSelectorModal';
 import type TextInput from '@components/TextInput';
 import type ValuePicker from '@components/ValuePicker';
-import type {State} from '@libs/Navigation/types';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
 import type {TranslationPaths} from '@src/languages/types';
 import type {OnyxFormKey, OnyxValues} from '@src/ONYXKEYS';
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 9be03966e214..939a386751a5 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -392,8 +392,8 @@ type AddPersonalBankAccountNavigatorParamList = {
 type ReimbursementAccountNavigatorParamList = {
     [SCREENS.REIMBURSEMENT_ACCOUNT_ROOT]: {
         stepToOpen?: string;
-        policyID?: string;
         backTo?: Routes;
+        policyID?: string;
     };
 };
 
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index 4f618982c737..77019a5536e2 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -3,10 +3,10 @@ import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
 import InputWrapper from '@components/Form/InputWrapper';
 import StatePicker from '@components/StatePicker';
+import type {State} from '@components/StatePicker/StateSelectorModal';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {State} from '@libs/Navigation/types';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 
diff --git a/src/pages/ReimbursementAccount/IdentityForm.tsx b/src/pages/ReimbursementAccount/IdentityForm.tsx
deleted file mode 100644
index 16560f363400..000000000000
--- a/src/pages/ReimbursementAccount/IdentityForm.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import {subYears} from 'date-fns';
-import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
-import {View} from 'react-native';
-import DatePicker from '@components/DatePicker';
-import InputWrapper from '@components/Form/InputWrapper';
-import TextInput from '@components/TextInput';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
-import AddressForm from './AddressForm';
-
-type IdentityFormProps = {
-    /** Style for wrapping View */
-    style?: StyleProp<ViewStyle>;
-
-    /** Form values */
-    values: any;
-
-    /** Default values */
-    defaultValues: any;
-
-    /** Any errors that can arise from form validation */
-    errors: Record<string, string>;
-
-    /** The map for inputID of the inputs */
-    inputKeys: any;
-
-    /** Saves a draft of the input value when used in a form */
-    shouldSaveDraft?: boolean;
-};
-
-function IdentityForm({shouldSaveDraft = false, errors, values, inputKeys, defaultValues, style}: IdentityFormProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    // dob field has multiple validations/errors, we are handling it temporarily like this.
-    const dobErrorText = (errors?.dob ? 'bankAccount.error.dob' : '') || (errors?.dobAge ? 'bankAccount.error.age' : '');
-    const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
-
-    const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
-    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
-
-    return (
-        <View style={style}>
-            <View style={[styles.flexRow]}>
-                <View style={[styles.flex2, styles.mr2]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={inputKeys.firstName}
-                        shouldSaveDraft={shouldSaveDraft}
-                        label={`${translate('common.firstName')}`}
-                        aria-label={translate('common.firstName')}
-                        role={CONST.ROLE.PRESENTATION}
-                        value={values.firstName}
-                        defaultValue={defaultValues.firstName}
-                        errorText={errors.firstName ? 'bankAccount.error.firstName' : ''}
-                    />
-                </View>
-                <View style={[styles.flex2]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={inputKeys.lastName}
-                        shouldSaveDraft={shouldSaveDraft}
-                        label={`${translate('common.lastName')}`}
-                        aria-label={translate('common.lastName')}
-                        role={CONST.ROLE.PRESENTATION}
-                        value={values.lastName}
-                        defaultValue={defaultValues.lastName}
-                        errorText={errors.lastName ? 'bankAccount.error.lastName' : ''}
-                    />
-                </View>
-            </View>
-            <InputWrapper
-                InputComponent={DatePicker}
-                inputID={inputKeys.dob}
-                shouldSaveDraft={shouldSaveDraft}
-                label={`${translate('common.dob')}`}
-                containerStyles={[styles.mt4]}
-                placeholder={translate('common.dateFormat')}
-                defaultValue={values.dob || defaultValues.dob}
-                errorText={dobErrorText}
-                minDate={minDate}
-                maxDate={maxDate}
-            />
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={inputKeys.ssnLast4}
-                shouldSaveDraft={shouldSaveDraft}
-                label={`${translate('common.ssnLast4')}`}
-                aria-label={translate('common.ssnLast4')}
-                role={CONST.ROLE.PRESENTATION}
-                containerStyles={[styles.mt4]}
-                inputMode={CONST.INPUT_MODE.NUMERIC}
-                defaultValue={defaultValues.ssnLast4}
-                errorText={errors.ssnLast4 ? 'bankAccount.error.ssnLast4' : ''}
-                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
-            />
-            <AddressForm
-                inputKeys={_.omit(inputKeys, identityFormInputKeys)}
-                shouldSaveDraft={shouldSaveDraft}
-                translate={translate}
-                streetTranslationKey="common.personalAddress"
-                values={_.omit(values, identityFormInputKeys)}
-                defaultValues={_.omit(defaultValues, identityFormInputKeys)}
-                errors={errors}
-            />
-        </View>
-    );
-}
-
-IdentityForm.displayName = 'IdentityForm';
-export default IdentityForm;
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js b/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js
deleted file mode 100644
index 97bd1c508775..000000000000
--- a/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default PropTypes.shape({
-    bankAccountID: PropTypes.number,
-
-    /** Props needed for BankAccountStep */
-    accountNumber: PropTypes.string,
-    routingNumber: PropTypes.string,
-    acceptTerms: PropTypes.bool,
-    plaidAccountID: PropTypes.string,
-    mask: PropTypes.string,
-
-    /** Props needed for CompanyStep */
-    companyName: PropTypes.string,
-    addressStreet: PropTypes.string,
-    addressCity: PropTypes.string,
-    addressState: PropTypes.string,
-    addressZipCode: PropTypes.string,
-    companyPhone: PropTypes.string,
-    website: PropTypes.string,
-    companyTaxID: PropTypes.string,
-    incorporationType: PropTypes.string,
-    incorporationDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-    incorporationState: PropTypes.string,
-    hasNoConnectionToCannabis: PropTypes.bool,
-
-    /** Props needed for RequestorStep */
-    firstName: PropTypes.string,
-    lastName: PropTypes.string,
-    requestorAddressStreet: PropTypes.string,
-    requestorAddressCity: PropTypes.string,
-    requestorAddressState: PropTypes.string,
-    requestorAddressZipCode: PropTypes.string,
-    dob: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-    ssnLast4: PropTypes.string,
-    isOnfidoSetupComplete: PropTypes.bool,
-
-    /** Props needed for ACHContractStep */
-    ownsMoreThan25Percent: PropTypes.bool,
-    hasOtherBeneficialOwners: PropTypes.bool,
-    acceptTermsAndConditions: PropTypes.bool,
-    certifyTrueInformation: PropTypes.bool,
-    beneficialOwners: PropTypes.string,
-    beneficialOwnerKeys: PropTypes.arrayOf(PropTypes.string),
-});
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 289af249494b..a2de4d75f0a0 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -21,7 +21,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import shouldReopenOnfido from '@libs/shouldReopenOnfido';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyOnyxProps} from '@pages/workspace/withPolicy';
 import withPolicy from '@pages/workspace/withPolicy';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
@@ -29,7 +29,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {ACHData} from '@src/types/onyx/ReimbursementAccount';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ACHContractStep from './ACHContractStep';
 import BankAccountStep from './BankAccountStep';
@@ -87,10 +86,10 @@ type ReimbursementAccountDraft = {
 
 type ReimbursementAccountOnyxProps = {
     /** Plaid SDK token to use to initialize the widget */
-    plaidLinkToken?: OnyxEntry<string>;
+    plaidLinkToken: OnyxEntry<string>;
 
     /** Plaid SDK current event */
-    plaidCurrentEvent?: OnyxEntry<string>;
+    plaidCurrentEvent: OnyxEntry<string>;
 
     /** Indicated whether the app is loading */
     isLoadingApp: OnyxEntry<boolean>;
@@ -104,15 +103,12 @@ type ReimbursementAccountOnyxProps = {
     /** ACH data for the withdrawal account actively being set up */
     reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
 
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountDraft>;
-
     /** The token required to initialize the Onfido SDK */
     onfidoToken: OnyxEntry<string>;
 };
 
-type ReimbursementAccountPageProps = WithPolicyProps & ReimbursementAccountOnyxProps & RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
-
+type ReimbursementAccountPageProps = WithPolicyOnyxProps &
+    ReimbursementAccountOnyxProps & {route: RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>};
 const ROUTE_NAMES = {
     COMPANY: 'company',
     PERSONAL_INFORMATION: 'personal-information',
@@ -188,7 +184,7 @@ function ReimbursementAccountPage({
     */
     const achData = reimbursementAccount?.achData;
 
-    function getBankAccountFields<T extends keyof ACHData>(fieldNames: T[]): Pick<ACHData, T> {
+    function getBankAccountFields(fieldNames: string[]): string[] {
         // @ts-expect-error -- Pick<ACHData, T> is more acurate type in this case because lodashPick returns Partial<ACHData>
         return {
             ...lodashPick(reimbursementAccount?.achData, ...fieldNames),
@@ -539,12 +535,10 @@ ReimbursementAccountPage.displayName = 'ReimbursementAccountPage';
 
 export default withPolicy(
     withOnyx<ReimbursementAccountPageProps, ReimbursementAccountOnyxProps>({
+        // @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,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/src/pages/ReimbursementAccount/StepPropTypes.js b/src/pages/ReimbursementAccount/StepPropTypes.js
deleted file mode 100644
index 04399230a1ab..000000000000
--- a/src/pages/ReimbursementAccount/StepPropTypes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import {withLocalizePropTypes} from '@components/withLocalize';
-import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropTypes';
-import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
-
-export default {
-    /** The bank account currently in setup */
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: reimbursementAccountDraftPropTypes.isRequired,
-
-    /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
-
-    /** Get a field value from Onyx reimbursementAccountDraft or reimbursementAccount */
-    getDefaultStateForField: PropTypes.func.isRequired,
-
-    ...withLocalizePropTypes,
-};

From 093fe8f420301b119a3054099ed1e8135cd3af45 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 27 Feb 2024 09:38:59 +0100
Subject: [PATCH 11/33] fix: typecheck

---
 src/components/AddressSearch/types.ts             | 15 +++++++--------
 src/components/Form/types.ts                      |  4 +---
 src/pages/ReimbursementAccount/AddressForm.tsx    | 12 +++++++-----
 .../AddressUBO.tsx                                |  1 -
 .../BusinessInfo/substeps/AddressBusiness.tsx     |  1 -
 .../PersonalInfo/substeps/Address.tsx             |  1 -
 src/pages/workspace/withPolicy.tsx                |  6 +++---
 7 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index 0d3f8c1a972e..53a80a357702 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -1,7 +1,6 @@
 import type {RefObject} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
-import type {State} from '@components/StatePicker/StateSelectorModal';
 import type {MaybePhraseKey} from '@libs/Localize';
 import type Locale from '@src/types/onyx/Locale';
 
@@ -14,13 +13,13 @@ type CurrentLocationButtonProps = {
 };
 
 type RenamedInputKeysProps = {
-    street: string;
-    street2: string;
-    city: string;
-    state: State;
-    lat: string;
-    lng: string;
-    zipCode: string;
+    street?: string;
+    street2?: string;
+    city?: string;
+    state?: string;
+    lat?: string;
+    lng?: string;
+    zipCode?: string;
     address?: string;
     country?: string;
 };
diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
index 40b4fcece482..37d0f730c9e9 100644
--- a/src/components/Form/types.ts
+++ b/src/components/Form/types.ts
@@ -10,7 +10,6 @@ import type Picker from '@components/Picker';
 import type RadioButtons from '@components/RadioButtons';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import type StatePicker from '@components/StatePicker';
-import type {State} from '@components/StatePicker/StateSelectorModal';
 import type TextInput from '@components/TextInput';
 import type ValuePicker from '@components/ValuePicker';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
@@ -39,12 +38,11 @@ type ValidInputs =
     | typeof ValuePicker
     | typeof RadioButtons;
 
-type ValueTypeKey = 'string' | 'boolean' | 'date' | 'state';
+type ValueTypeKey = 'string' | 'boolean' | 'date';
 type ValueTypeMap = {
     string: string;
     boolean: boolean;
     date: Date;
-    state: State;
 };
 type FormValue = ValueOf<ValueTypeMap>;
 
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index 77019a5536e2..527824322fc8 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -24,13 +24,13 @@ type Address = {
     zipCode: string;
 
     /** Address street2 field */
-    street2: string;
+    street2?: string;
 
     /** Address latitude field */
-    lat: string;
+    lat?: string;
 
     /** Address longitude field */
-    lng: string;
+    lng?: string;
 };
 
 type AddressError = Record<keyof Address, boolean>;
@@ -43,7 +43,7 @@ type AddressFormProps = {
     onFieldChange?: <T>(value: T) => void;
 
     /** Default values */
-    defaultValues?: Address;
+    defaultValues?: Partial<Record<keyof Address, string>>;
 
     /** Form values */
     values?: Address;
@@ -52,7 +52,7 @@ type AddressFormProps = {
     errors?: AddressError;
 
     /** The map for inputID of the inputs */
-    inputKeys?: Address;
+    inputKeys?: Partial<Record<keyof Address, string>>;
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft?: boolean;
@@ -126,3 +126,5 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
 
 AddressForm.displayName = 'AddressForm';
 export default AddressForm;
+
+export type {Address};
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
index 999710310224..17344a72e7c2 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
@@ -77,7 +77,6 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
             <AddressForm
                 inputKeys={inputKeys}
                 shouldSaveDraft={!isEditing}
-                translate={translate}
                 defaultValues={defaultValues}
                 streetTranslationKey="common.streetAddress"
             />
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
index 354620f5e46a..f932a4e924aa 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
@@ -81,7 +81,6 @@ function AddressBusiness({reimbursementAccount, onNext, isEditing}: AddressBusin
             <AddressForm
                 inputKeys={INPUT_KEYS}
                 shouldSaveDraft={!isEditing}
-                translate={translate}
                 defaultValues={defaultValues}
                 streetTranslationKey="common.companyAddress"
             />
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
index 824ed950bd9f..ae842fbf4624 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
@@ -79,7 +79,6 @@ function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
                 <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
                 <AddressForm
                     inputKeys={INPUT_KEYS}
-                    translate={translate}
                     streetTranslationKey="common.streetAddress"
                     defaultValues={defaultValues}
                     shouldSaveDraft={!isEditing}
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 3b10b9fb209c..42165409a91e 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -7,7 +7,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import {translatableTextPropTypes} from '@libs/Localize';
-import type {BottomTabNavigatorParamList, CentralPaneNavigatorParamList, SettingsNavigatorParamList} from '@navigation/types';
+import type {BottomTabNavigatorParamList, CentralPaneNavigatorParamList, ReimbursementAccountNavigatorParamList, SettingsNavigatorParamList} from '@navigation/types';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
@@ -15,8 +15,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type WorkspaceParamList = BottomTabNavigatorParamList & CentralPaneNavigatorParamList & SettingsNavigatorParamList;
-type PolicyRoute = RouteProp<WorkspaceParamList, ValueOf<typeof SCREENS.WORKSPACE>>;
+type WorkspaceParamList = BottomTabNavigatorParamList & CentralPaneNavigatorParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList;
+type PolicyRoute = RouteProp<WorkspaceParamList, ValueOf<typeof SCREENS.WORKSPACE> | typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {
     return route?.params?.policyID ?? '';

From ee1949b83053a9ab41c6333af9c49a1651e8e0ec Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 27 Feb 2024 20:48:32 +0100
Subject: [PATCH 12/33] fix: small adjustment

---
 src/components/AddressSearch/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index 0b9498e34aa2..8ad26e5a7c46 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -6,7 +6,6 @@ import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'
 import type {GooglePlaceData, GooglePlaceDetail} from 'react-native-google-places-autocomplete';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import LocationErrorMessage from '@components/LocationErrorMessage';
-import type {State} from '@components/StatePicker/StateSelectorModal';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
@@ -49,7 +48,7 @@ function AddressSearch(
             street: 'addressStreet',
             street2: 'addressStreet2',
             city: 'addressCity',
-            state: 'addressState' as State,
+            state: 'addressState',
             zipCode: 'addressZipCode',
             lat: 'addressLat',
             lng: 'addressLng',

From a3dbead38f6cf4102592c327858a8dc931ae719f Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 28 Feb 2024 09:33:10 +0100
Subject: [PATCH 13/33] fix: lint

---
 .../ReimbursementAccountPage.tsx              | 108 ++++++++----------
 1 file changed, 50 insertions(+), 58 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index a2de4d75f0a0..0dae9b99ed11 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -278,75 +278,67 @@ function ReimbursementAccountPage({
         BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyID);
     }
 
-    useEffect(
-        () => {
-            fetchData();
-            return () => {
-                BankAccounts.clearReimbursementAccount();
-            };
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
-    ); // The empty dependency array ensures this runs only once after the component mounts.
-
-    useEffect(
-        () => {
-            // Check for network change from offline to online
-            if (prevIsOffline && !isOffline && prevReimbursementAccount && prevReimbursementAccount.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
-                fetchData();
-            }
+    useEffect(() => {
+        fetchData();
+        return () => {
+            BankAccounts.clearReimbursementAccount();
+        };
+    }, []); // The empty dependency array ensures this runs only once after the component mounts.
 
-            if (!hasACHDataBeenLoaded) {
-                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.isLoading === false) {
-                    setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue());
-                    setHasACHDataBeenLoaded(true);
-                }
-                return;
-            }
+    useEffect(() => {
+        // Check for network change from offline to online
+        if (prevIsOffline && !isOffline && prevReimbursementAccount && prevReimbursementAccount.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
+            fetchData();
+        }
 
-            if (
-                prevReimbursementAccount &&
-                prevReimbursementAccount.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
-                reimbursementAccount?.pendingAction !== prevReimbursementAccount.pendingAction
-            ) {
-                setShouldShowContinueSetupButton(hasInProgressVBBA());
+        if (!hasACHDataBeenLoaded) {
+            if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.isLoading === false) {
+                setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue());
+                setHasACHDataBeenLoaded(true);
             }
+            return;
+        }
 
-            if (shouldShowContinueSetupButton) {
-                return;
-            }
+        if (
+            prevReimbursementAccount &&
+            prevReimbursementAccount.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
+            reimbursementAccount?.pendingAction !== prevReimbursementAccount.pendingAction
+        ) {
+            setShouldShowContinueSetupButton(hasInProgressVBBA());
+        }
 
-            const currentStepRouteParam = getStepToOpenFromRouteParams(route);
-            if (currentStepRouteParam === currentStep) {
-                // If the user is connecting online with plaid, reset any bank account errors so we don't persist old data from a potential previous connection
-                if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && achData?.subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
-                    BankAccounts.hideBankAccountErrors();
-                }
+        if (shouldShowContinueSetupButton) {
+            return;
+        }
 
-                // The route is showing the correct step, no need to update the route param or clear errors.
-                return;
+        const currentStepRouteParam = getStepToOpenFromRouteParams(route);
+        if (currentStepRouteParam === currentStep) {
+            // If the user is connecting online with plaid, reset any bank account errors so we don't persist old data from a potential previous connection
+            if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && achData?.subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
+                BankAccounts.hideBankAccountErrors();
             }
 
-            // Update the data that is returned from back-end to draft value
-            const draftStep = reimbursementAccount?.draftStep;
-            if (draftStep) {
-                BankAccounts.updateReimbursementAccountDraft(getBankAccountFields(getFieldsForStep(draftStep)));
-            }
+            // The route is showing the correct step, no need to update the route param or clear errors.
+            return;
+        }
 
-            if (currentStepRouteParam !== '') {
-                // When we click "Connect bank account", we load the page without the current step param, if there
-                // was an error when we tried to disconnect or start over, we want the user to be able to see the error,
-                // so we don't clear it. We only want to clear the errors if we are moving between steps.
-                BankAccounts.hideBankAccountErrors();
-            }
+        // Update the data that is returned from back-end to draft value
+        const draftStep = reimbursementAccount?.draftStep;
+        if (draftStep) {
+            BankAccounts.updateReimbursementAccountDraft(getBankAccountFields(getFieldsForStep(draftStep)));
+        }
 
-            const backTo = route.params?.backTo;
+        if (currentStepRouteParam !== '') {
+            // When we click "Connect bank account", we load the page without the current step param, if there
+            // was an error when we tried to disconnect or start over, we want the user to be able to see the error,
+            // so we don't clear it. We only want to clear the errors if we are moving between steps.
+            BankAccounts.hideBankAccountErrors();
+        }
 
-            Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton],
-    );
+        const backTo = route.params?.backTo;
+
+        Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
+    }, [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton]);
 
     const continueFunction = () => {
         BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL).then(() => {

From 55630d67e86b9df471dd1ad03373703e96a55e80 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 28 Feb 2024 14:23:13 +0100
Subject: [PATCH 14/33] fix: lint

---
 src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 0dae9b99ed11..db3d2bb05481 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -247,7 +247,7 @@ function ReimbursementAccountPage({
         which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes.
      */
     const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(
-        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.achData && 'currentStep' in reimbursementAccount?.achData,
+        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.achData && 'currentStep' in reimbursementAccount.achData,
     );
 
     const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false);
@@ -283,6 +283,7 @@ function ReimbursementAccountPage({
         return () => {
             BankAccounts.clearReimbursementAccount();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // The empty dependency array ensures this runs only once after the component mounts.
 
     useEffect(() => {
@@ -338,6 +339,7 @@ function ReimbursementAccountPage({
         const backTo = route.params?.backTo;
 
         Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton]);
 
     const continueFunction = () => {

From bd533880c46d97445c0ed4c792c1757b4cd6da89 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 29 Feb 2024 12:30:37 +0100
Subject: [PATCH 15/33] fix: resolve comments

---
 .../ReimbursementAccount/AddressForm.tsx      | 32 +++----------------
 .../BankInfo/BankInfo.tsx                     |  2 ++
 .../ContinueBankAccountSetup.tsx              |  2 +-
 src/pages/workspace/withPolicy.tsx            |  4 +--
 src/types/onyx/PrivatePersonalDetails.ts      |  7 ++--
 src/types/onyx/ReimbursementAccount.ts        |  1 +
 6 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index 527824322fc8..ea2f7304aa1e 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -9,29 +9,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-
-type Address = {
-    /** Address street field */
-    street: string;
-
-    /** Address city field */
-    city: string;
-
-    /** Address state field */
-    state: State;
-
-    /** Address zip code field */
-    zipCode: string;
-
-    /** Address street2 field */
-    street2?: string;
-
-    /** Address latitude field */
-    lat?: string;
-
-    /** Address longitude field */
-    lng?: string;
-};
+import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
 type AddressError = Record<keyof Address, boolean>;
 
@@ -43,7 +21,7 @@ type AddressFormProps = {
     onFieldChange?: <T>(value: T) => void;
 
     /** Default values */
-    defaultValues?: Partial<Record<keyof Address, string>>;
+    defaultValues?: Address;
 
     /** Form values */
     values?: Address;
@@ -52,7 +30,7 @@ type AddressFormProps = {
     errors?: AddressError;
 
     /** The map for inputID of the inputs */
-    inputKeys?: Partial<Record<keyof Address, string>>;
+    inputKeys?: Address;
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft?: boolean;
@@ -69,7 +47,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                     inputID={inputKeys?.street ?? 'streetInput'}
                     shouldSaveDraft={shouldSaveDraft}
                     label={translate(streetTranslationKey)}
-                    containerStyles={[styles.mt6]}
+                    containerStyles={styles.mt6}
                     value={values?.street}
                     defaultValue={defaultValues?.street}
                     onInputChange={onFieldChange}
@@ -98,7 +76,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                     InputComponent={StatePicker}
                     inputID={inputKeys?.state ?? 'stateInput'}
                     shouldSaveDraft={shouldSaveDraft}
-                    value={values?.state}
+                    value={values?.state as State}
                     defaultValue={defaultValues?.state}
                     onInputChange={(value) => onFieldChange({state: value})}
                     errorText={errors?.state ? 'bankAccount.error.addressState' : ''}
diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
index a4c8fc727d23..04c9dab4a315 100644
--- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
@@ -36,6 +36,8 @@ type BankInfoOnyxProps = {
 type BankInfoProps = BankInfoOnyxProps & {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
+
+    /** Current Policy ID */
     policyID: string;
 };
 
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
index 8b410a52789c..d26eeec2f049 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
@@ -69,7 +69,7 @@ function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimburse
                             shouldShowRightIcon
                             large
                             success
-                            isDisabled={Boolean(pendingAction) || !isEmptyObject(errors)}
+                            isDisabled={!!pendingAction || !isEmptyObject(errors)}
                         />
                         <MenuItem
                             title={translate('workspace.bankAccount.startOver')}
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index a42dec2d94db..dd4e226efeae 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -16,8 +16,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type WorkspaceParamList = BottomTabNavigatorParamList & CentralPaneNavigatorParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList;
-type PolicyRoute = RouteProp<WorkspaceParamList, ValueOf<typeof SCREENS.WORKSPACE> | typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
+type NavigatorsParamList = BottomTabNavigatorParamList & CentralPaneNavigatorParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList;
+type PolicyRoute = RouteProp<NavigatorsParamList, ValueOf<typeof SCREENS.WORKSPACE> | typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {
     return route?.params?.policyID ?? '';
diff --git a/src/types/onyx/PrivatePersonalDetails.ts b/src/types/onyx/PrivatePersonalDetails.ts
index 780e3f71b61d..64805d30495d 100644
--- a/src/types/onyx/PrivatePersonalDetails.ts
+++ b/src/types/onyx/PrivatePersonalDetails.ts
@@ -3,8 +3,9 @@ type Address = {
     street2?: string;
     city: string;
     state: string;
-    zip: string;
-    country: string;
+    zip?: string;
+    country?: string;
+    zipCode?: string;
 };
 
 type PrivatePersonalDetails = {
@@ -21,3 +22,5 @@ type PrivatePersonalDetails = {
 };
 
 export default PrivatePersonalDetails;
+
+export type {Address};
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
index 2ec1aa57c437..224937d97bfa 100644
--- a/src/types/onyx/ReimbursementAccount.ts
+++ b/src/types/onyx/ReimbursementAccount.ts
@@ -36,6 +36,7 @@ type ACHData = Partial<BeneficialOwnersStepProps & CompanyStepProps & RequestorS
     /** Policy ID of the workspace the bank account is being set up on */
     policyID?: string;
 
+    /** Weather Onfido setup is complete */
     isOnfidoSetupComplete?: boolean;
 };
 

From 0148be1d4d213609668132756f7b580e3cf6b3b0 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 29 Feb 2024 13:13:02 +0100
Subject: [PATCH 16/33] fix: typecheck

---
 src/components/AddressSearch/index.tsx   |  5 +++--
 src/components/AddressSearch/types.ts    | 19 ++++---------------
 src/types/onyx/PrivatePersonalDetails.ts |  3 +++
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index 4f21f4aa1dc3..e2fe918de189 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -19,9 +19,10 @@ import type {GeolocationErrorCodeType} from '@libs/getCurrentPosition/getCurrent
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 import CurrentLocationButton from './CurrentLocationButton';
 import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer';
-import type {AddressSearchProps, RenamedInputKeysProps} from './types';
+import type {AddressSearchProps} from './types';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -212,7 +213,7 @@ function AddressSearch(
 
         if (inputID) {
             Object.entries(values).forEach(([key, inputValue]) => {
-                const inputKey = renamedInputKeys?.[key as keyof RenamedInputKeysProps] ?? key;
+                const inputKey = renamedInputKeys?.[key as keyof Address] ?? key;
                 if (!inputKey) {
                     return;
                 }
diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index 53a80a357702..ec7a2c61398b 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -3,6 +3,7 @@ import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, Vie
 import type {Place} from 'react-native-google-places-autocomplete';
 import type {MaybePhraseKey} from '@libs/Localize';
 import type Locale from '@src/types/onyx/Locale';
+import {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
 type CurrentLocationButtonProps = {
     /** Callback that is called when the button is clicked */
@@ -12,18 +13,6 @@ type CurrentLocationButtonProps = {
     isDisabled?: boolean;
 };
 
-type RenamedInputKeysProps = {
-    street?: string;
-    street2?: string;
-    city?: string;
-    state?: string;
-    lat?: string;
-    lng?: string;
-    zipCode?: string;
-    address?: string;
-    country?: string;
-};
-
 type OnPressProps = {
     address: string;
     lat: number;
@@ -61,7 +50,7 @@ type AddressSearchProps = {
     defaultValue?: string;
 
     /** A callback function when the value of this field has changed */
-    onInputChange?: (value: string | number | RenamedInputKeysProps | StreetValue, key?: string) => void;
+    onInputChange?: (value: string | number | Address | StreetValue, key?: string) => void;
 
     /** A callback function when an address has been auto-selected */
     onPress?: (props: OnPressProps) => void;
@@ -79,7 +68,7 @@ type AddressSearchProps = {
     predefinedPlaces?: Place[] | null;
 
     /** A map of inputID key names */
-    renamedInputKeys?: RenamedInputKeysProps;
+    renamedInputKeys?: Address;
 
     /** Maximum number of characters allowed in search input */
     maxInputLength?: number;
@@ -96,4 +85,4 @@ type AddressSearchProps = {
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>) => boolean;
 
-export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType, StreetValue};
+export type {CurrentLocationButtonProps, AddressSearchProps, IsCurrentTargetInsideContainerType, StreetValue};
diff --git a/src/types/onyx/PrivatePersonalDetails.ts b/src/types/onyx/PrivatePersonalDetails.ts
index 64805d30495d..b6f357237505 100644
--- a/src/types/onyx/PrivatePersonalDetails.ts
+++ b/src/types/onyx/PrivatePersonalDetails.ts
@@ -6,6 +6,9 @@ type Address = {
     zip?: string;
     country?: string;
     zipCode?: string;
+    address?: string;
+    lat?: string;
+    lng?: string;
 };
 
 type PrivatePersonalDetails = {

From 6b82c5d762305d82526426c6dd2da9df16741759 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 29 Feb 2024 14:15:05 +0100
Subject: [PATCH 17/33] fix: lint

---
 src/components/AddressSearch/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index ec7a2c61398b..bc7acf3f7e40 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -3,7 +3,7 @@ import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, Vie
 import type {Place} from 'react-native-google-places-autocomplete';
 import type {MaybePhraseKey} from '@libs/Localize';
 import type Locale from '@src/types/onyx/Locale';
-import {Address} from '@src/types/onyx/PrivatePersonalDetails';
+import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
 type CurrentLocationButtonProps = {
     /** Callback that is called when the button is clicked */

From 7f85aba23db53dd5e8c2e1d5e1b34d6975a38bbe Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 29 Feb 2024 14:55:05 +0100
Subject: [PATCH 18/33] fix: resolve comments

---
 .../ReimbursementAccountPage.tsx              | 65 ++++---------------
 src/types/form/ReimbursementAccountForm.ts    |  1 +
 src/types/onyx/ReimbursementAccount.ts        | 16 +++++
 3 files changed, 29 insertions(+), 53 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index ee650379fc6c..bb0a36887df0 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -1,4 +1,5 @@
 import type {RouteProp} from '@react-navigation/native';
+import type {StackScreenProps} from '@react-navigation/stack';
 import Str from 'expensify-common/lib/str';
 import lodashPick from 'lodash/pick';
 import React, {useEffect, useRef, useState} from 'react';
@@ -28,9 +29,12 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import type {InputID} from '@src/types/form/ReimbursementAccountForm';
 import type * as OnyxTypes from '@src/types/onyx';
+import type {ACHData, BankAccountStep as TBankAccountStep} from '@src/types/onyx/ReimbursementAccount';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ACHContractStep from './ACHContractStep';
+// eslint-disable-next-line @typescript-eslint/no-redeclare
 import BankAccountStep from './BankAccountStep';
 import BeneficialOwnersStep from './BeneficialOwnersStep';
 import CompanyStep from './CompanyStep';
@@ -40,50 +44,6 @@ import EnableBankAccount from './EnableBankAccount/EnableBankAccount';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
 import RequestorStep from './RequestorStep';
 
-type ReimbursementAccountDraft = {
-    bankAccountID: number;
-
-    /** Props needed for BankAccountStep */
-    accountNumber: string;
-    routingNumber: string;
-    acceptTerms: boolean;
-    plaidAccountID: string;
-    mask: string;
-
-    /** Props needed for CompanyStep */
-    companyName: string;
-    addressStreet: string;
-    addressCity: string;
-    addressState: string;
-    addressZipCode: string;
-    companyPhone: string;
-    website: string;
-    companyTaxID: string;
-    incorporationType: string;
-    incorporationDate: string | Date;
-    incorporationState: string;
-    hasNoConnectionToCannabis: boolean;
-
-    /** Props needed for RequestorStep */
-    firstName: string;
-    lastName: string;
-    requestorAddressStreet: string;
-    requestorAddressCity: string;
-    requestorAddressState: string;
-    requestorAddressZipCode: string;
-    dob: string | Date;
-    ssnLast4: string;
-    isOnfidoSetupComplete: boolean;
-
-    /** Props needed for ACHContractStep */
-    ownsMoreThan25Percent: boolean;
-    hasOtherBeneficialOwners: boolean;
-    acceptTermsAndConditions: boolean;
-    certifyTrueInformation: boolean;
-    beneficialOwners: string;
-    beneficialOwnerKeys: string[];
-};
-
 type ReimbursementAccountOnyxProps = {
     /** Plaid SDK token to use to initialize the widget */
     plaidLinkToken: OnyxEntry<string>;
@@ -108,7 +68,9 @@ type ReimbursementAccountOnyxProps = {
 };
 
 type ReimbursementAccountPageProps = WithPolicyOnyxProps &
-    ReimbursementAccountOnyxProps & {route: RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>};
+    ReimbursementAccountOnyxProps &
+    StackScreenProps<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
+
 const ROUTE_NAMES = {
     COMPANY: 'company',
     PERSONAL_INFORMATION: 'personal-information',
@@ -123,8 +85,8 @@ const ROUTE_NAMES = {
  * We can pass stepToOpen in the URL to force which step to show.
  * Mainly needed when user finished the flow in verifying state, and Ops ask them to modify some fields from a specific step.
  */
-function getStepToOpenFromRouteParams(route: RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>): ValueOf<typeof CONST.BANK_ACCOUNT.STEP> | '' {
-    switch (route.params.stepToOpen ?? '') {
+function getStepToOpenFromRouteParams(route: RouteProp<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>): TBankAccountStep | '' {
+    switch (route.params.stepToOpen) {
         case ROUTE_NAMES.NEW:
             return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
         case ROUTE_NAMES.COMPANY:
@@ -144,7 +106,7 @@ function getStepToOpenFromRouteParams(route: RouteProp<ReimbursementAccountNavig
     }
 }
 
-function getRouteForCurrentStep(currentStep: ValueOf<typeof CONST.BANK_ACCOUNT.STEP>): ValueOf<typeof ROUTE_NAMES> {
+function getRouteForCurrentStep(currentStep: TBankAccountStep): ValueOf<typeof ROUTE_NAMES> {
     switch (currentStep) {
         case CONST.BANK_ACCOUNT.STEP.COMPANY:
             return ROUTE_NAMES.COMPANY;
@@ -184,8 +146,7 @@ function ReimbursementAccountPage({
     */
     const achData = reimbursementAccount?.achData;
 
-    function getBankAccountFields(fieldNames: string[]): string[] {
-        // @ts-expect-error -- Pick<ACHData, T> is more acurate type in this case because lodashPick returns Partial<ACHData>
+    function getBankAccountFields<T extends InputID>(fieldNames: T[]): Pick<ACHData, T> {
         return {
             ...lodashPick(reimbursementAccount?.achData, ...fieldNames),
         };
@@ -194,7 +155,7 @@ function ReimbursementAccountPage({
     /**
      * Returns selected bank account fields based on field names provided.
      */
-    function getFieldsForStep(step: string): string[] {
+    function getFieldsForStep(step: TBankAccountStep): InputID[] {
         switch (step) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
                 return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings'];
@@ -553,5 +514,3 @@ export default withPolicy(
         },
     })(ReimbursementAccountPage),
 );
-
-export type {ReimbursementAccountDraft};
diff --git a/src/types/form/ReimbursementAccountForm.ts b/src/types/form/ReimbursementAccountForm.ts
index 7860d5a066f1..da6512b767f2 100644
--- a/src/types/form/ReimbursementAccountForm.ts
+++ b/src/types/form/ReimbursementAccountForm.ts
@@ -131,5 +131,6 @@ export type {
     BeneficialOwnersStepProps,
     ACHContractStepProps,
     ReimbursementAccountProps,
+    InputID,
 };
 export default INPUT_IDS;
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
index 224937d97bfa..ff704f856c1d 100644
--- a/src/types/onyx/ReimbursementAccount.ts
+++ b/src/types/onyx/ReimbursementAccount.ts
@@ -38,6 +38,22 @@ type ACHData = Partial<BeneficialOwnersStepProps & CompanyStepProps & RequestorS
 
     /** Weather Onfido setup is complete */
     isOnfidoSetupComplete?: boolean;
+
+    mask?: string;
+
+    isSavings?: string;
+
+    plaidAccountID?: string;
+
+    plaidAccessToken?: string;
+
+    selectedPlaidAccountID?: string;
+
+    amount1?: string;
+
+    amount2?: string;
+
+    amount3?: string;
 };
 
 type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{

From 3929cc87e54226cba73e39a2e243d91e60afecf3 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 29 Feb 2024 16:39:07 +0100
Subject: [PATCH 19/33] fix: resolve comments

---
 .../ContinueBankAccountSetup.tsx                 |  2 +-
 .../ReimbursementAccountPage.tsx                 |  1 -
 src/types/onyx/ReimbursementAccount.ts           | 16 ++--------------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
index d26eeec2f049..e43029b3d84f 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
@@ -77,7 +77,7 @@ function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimburse
                             onPress={() => BankAccounts.requestResetFreePlanBankAccount()}
                             shouldShowRightIcon
                             wrapperStyle={[styles.cardMenuItem]}
-                            disabled={Boolean(pendingAction) || !isEmptyObject(errors)}
+                            disabled={!!pendingAction || !isEmptyObject(errors)}
                         />
                     </OfflineWithFeedback>
                 </Section>
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index bb0a36887df0..c9f755f274e6 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -182,7 +182,6 @@ function ReimbursementAccountPage({
 
     /**
      * Returns true if a VBBA exists in any state other than OPEN or LOCKED
-
      */
     function hasInProgressVBBA(): boolean {
         return !!achData?.bankAccountID && achData?.state !== BankAccount.STATE.OPEN && achData?.state !== BankAccount.STATE.LOCKED;
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
index ff704f856c1d..b96c47729cd7 100644
--- a/src/types/onyx/ReimbursementAccount.ts
+++ b/src/types/onyx/ReimbursementAccount.ts
@@ -1,6 +1,6 @@
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
-import type {ACHContractStepProps, BeneficialOwnersStepProps, CompanyStepProps, RequestorStepProps} from '@src/types/form/ReimbursementAccountForm';
+import type {ACHContractStepProps, BeneficialOwnersStepProps, CompanyStepProps, ReimbursementAccountProps, RequestorStepProps} from '@src/types/form/ReimbursementAccountForm';
 import type {BankName} from './Bank';
 import type * as OnyxCommon from './OnyxCommon';
 
@@ -8,7 +8,7 @@ type BankAccountStep = ValueOf<typeof CONST.BANK_ACCOUNT.STEP>;
 
 type BankAccountSubStep = ValueOf<typeof CONST.BANK_ACCOUNT.SUBSTEP>;
 
-type ACHData = Partial<BeneficialOwnersStepProps & CompanyStepProps & RequestorStepProps & ACHContractStepProps> & {
+type ACHData = Partial<BeneficialOwnersStepProps & CompanyStepProps & RequestorStepProps & ACHContractStepProps & ReimbursementAccountProps> & {
     /** Step of the setup flow that we are on. Determines which view is presented. */
     currentStep?: BankAccountStep;
 
@@ -41,19 +41,7 @@ type ACHData = Partial<BeneficialOwnersStepProps & CompanyStepProps & RequestorS
 
     mask?: string;
 
-    isSavings?: string;
-
     plaidAccountID?: string;
-
-    plaidAccessToken?: string;
-
-    selectedPlaidAccountID?: string;
-
-    amount1?: string;
-
-    amount2?: string;
-
-    amount3?: string;
 };
 
 type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{

From 1bf48244a6a658a1eace6888b62833db174086c6 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 26 Mar 2024 17:11:30 +0100
Subject: [PATCH 20/33] fix: resolve typecheck

---
 src/components/AddressForm.tsx                |  2 +-
 .../EnablePayments/AdditionalDetailsStep.tsx  |  1 -
 .../ReimbursementAccount/BankAccountStep.tsx  | 10 +++--
 .../ReimbursementAccountPage.tsx              |  8 ++--
 ...orkspaceMemberDetailsRoleSelectionPage.tsx |  1 -
 src/pages/workspace/withPolicy.tsx            | 37 +++++++++++++++++--
 src/types/form/GetPhysicalCardForm.ts         |  2 +-
 src/types/onyx/PrivatePersonalDetails.ts      | 10 +++--
 8 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/components/AddressForm.tsx b/src/components/AddressForm.tsx
index 626da4cfd5d4..6a632bc94885 100644
--- a/src/components/AddressForm.tsx
+++ b/src/components/AddressForm.tsx
@@ -29,7 +29,7 @@ type AddressFormProps = {
     city?: string;
 
     /** Address country field */
-    country?: Country | '';
+    country?: Country | '' | 'country';
 
     /** Address state field */
     state?: string;
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.tsx b/src/pages/EnablePayments/AdditionalDetailsStep.tsx
index 57b9c7c6ade4..46e7191f222b 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.tsx
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.tsx
@@ -191,7 +191,6 @@ function AdditionalDetailsStep({walletAdditionalDetails = DEFAULT_WALLET_ADDITIO
                             state: 'addressState',
                             zipCode: 'addressZipCode',
                         }}
-                        translate={translate}
                         streetTranslationKey={fieldNameTranslationKeys.addressStreet}
                         shouldSaveDraft
                     />
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index fb76c3e2293f..a7d8f7f6c088 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -26,6 +27,7 @@ import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {ReimbursementAccountForm} from '@src/types/form/ReimbursementAccountForm';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
 import type * as OnyxTypes from '@src/types/onyx';
 import BankInfo from './BankInfo/BankInfo';
@@ -82,11 +84,11 @@ function BankAccountStep({
     const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
 
     const removeExistingBankAccountDetails = () => {
-        const bankAccountData = {
+        const bankAccountData: Partial<ReimbursementAccountForm> = {
             [bankInfoStepKeys.ROUTING_NUMBER]: '',
             [bankInfoStepKeys.ACCOUNT_NUMBER]: '',
             [bankInfoStepKeys.PLAID_MASK]: '',
-            [bankInfoStepKeys.IS_SAVINGS]: '',
+            [bankInfoStepKeys.IS_SAVINGS]: undefined,
             [bankInfoStepKeys.BANK_NAME]: '',
             [bankInfoStepKeys.PLAID_ACCOUNT_ID]: '',
             [bankInfoStepKeys.PLAID_ACCESS_TOKEN]: '',
@@ -141,7 +143,7 @@ function BankAccountStep({
                                 removeExistingBankAccountDetails();
                                 BankAccounts.openPlaidView();
                             }}
-                            isDisabled={!!isPlaidDisabled || !user.validated}
+                            isDisabled={!!isPlaidDisabled || !user?.validated}
                             style={[styles.mt4]}
                             shouldShowRightIcon
                             success
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 486630396eaa..6d9136e39048 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -254,7 +254,7 @@ function ReimbursementAccountPage({
             }
 
             if (!hasACHDataBeenLoaded) {
-                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount.isLoading === false) {
+                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.isLoading === false) {
                     setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue());
                     setHasACHDataBeenLoaded(true);
                 }
@@ -264,7 +264,7 @@ function ReimbursementAccountPage({
             if (
                 prevReimbursementAccount &&
                 prevReimbursementAccount.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
-                reimbursementAccount.pendingAction !== prevReimbursementAccount.pendingAction
+                reimbursementAccount?.pendingAction !== prevReimbursementAccount.pendingAction
             ) {
                 setShouldShowContinueSetupButton(hasInProgressVBBA());
             }
@@ -276,7 +276,7 @@ function ReimbursementAccountPage({
             const currentStepRouteParam = getStepToOpenFromRouteParams(route);
             if (currentStepRouteParam === currentStep) {
                 // If the user is connecting online with plaid, reset any bank account errors so we don't persist old data from a potential previous connection
-                if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && achData.subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
+                if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && achData?.subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
                     BankAccounts.hideBankAccountErrors();
                 }
 
@@ -285,7 +285,7 @@ function ReimbursementAccountPage({
             }
 
             // Update the data that is returned from back-end to draft value
-            const draftStep = reimbursementAccount.draftStep;
+            const draftStep = reimbursementAccount?.draftStep;
             if (draftStep) {
                 BankAccounts.updateReimbursementAccountDraft(getBankAccountFields(getFieldsForStep(draftStep)));
             }
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx
index ea8c6aaf144a..9bc76d715dd0 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx
@@ -30,7 +30,6 @@ type ListItemType = {
 function WorkspaceMemberDetailsRoleSelectionPage({policyMembers, route}: WorkspaceMemberDetailsPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-
     const accountID = Number(route.params.accountID) ?? 0;
     const policyID = route.params.policyID;
     const backTo = route.params.backTo ?? ('' as Route);
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 16af069fa0a2..981fc63b8c50 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -8,7 +8,14 @@ import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import taxPropTypes from '@components/taxPropTypes';
 import {translatableTextPropTypes} from '@libs/Localize';
-import type {CentralPaneNavigatorParamList, FullScreenNavigatorParamList, SettingsNavigatorParamList, WorkspacesCentralPaneNavigatorParamList} from '@navigation/types';
+import type {
+    BottomTabNavigatorParamList,
+    CentralPaneNavigatorParamList,
+    FullScreenNavigatorParamList,
+    ReimbursementAccountNavigatorParamList,
+    SettingsNavigatorParamList,
+    WorkspacesCentralPaneNavigatorParamList,
+} from '@navigation/types';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
@@ -16,8 +23,32 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type WorkspaceParamList = WorkspacesCentralPaneNavigatorParamList & FullScreenNavigatorParamList & CentralPaneNavigatorParamList & SettingsNavigatorParamList;
-type PolicyRoute = RouteProp<WorkspaceParamList, ValueOf<typeof SCREENS.WORKSPACE>>;
+type NavigatorsParamList = BottomTabNavigatorParamList &
+    CentralPaneNavigatorParamList &
+    SettingsNavigatorParamList &
+    ReimbursementAccountNavigatorParamList &
+    FullScreenNavigatorParamList &
+    WorkspacesCentralPaneNavigatorParamList;
+type PolicyRoute = RouteProp<
+    NavigatorsParamList,
+    | typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT
+    | typeof SCREENS.WORKSPACE.INITIAL
+    | typeof SCREENS.WORKSPACE.BILLS
+    | typeof SCREENS.WORKSPACE.MORE_FEATURES
+    | typeof SCREENS.WORKSPACE.MEMBERS
+    | typeof SCREENS.WORKSPACE.INVITE
+    | typeof SCREENS.WORKSPACE.INVITE_MESSAGE
+    | typeof SCREENS.WORKSPACE.WORKFLOWS_PAYER
+    | typeof SCREENS.WORKSPACE.WORKFLOWS
+    | typeof SCREENS.WORKSPACE.WORKFLOWS_APPROVER
+    | typeof SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET
+    | typeof SCREENS.WORKSPACE.TRAVEL
+    | typeof SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY
+    | typeof SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION
+    | typeof SCREENS.WORKSPACE.MEMBER_DETAILS
+    | typeof SCREENS.WORKSPACE.INVOICES
+    | typeof SCREENS.WORKSPACE.CARD
+>;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {
     return route?.params?.policyID ?? '';
diff --git a/src/types/form/GetPhysicalCardForm.ts b/src/types/form/GetPhysicalCardForm.ts
index 1fa7ea872620..583a06e7abb7 100644
--- a/src/types/form/GetPhysicalCardForm.ts
+++ b/src/types/form/GetPhysicalCardForm.ts
@@ -17,7 +17,7 @@ type GetPhysicalCardForm = Form<
     {
         [INPUT_IDS.ADDRESS_LINE_1]: string;
         [INPUT_IDS.ADDRESS_LINE_2]: string;
-        [INPUT_IDS.COUNTRY]: Country | '';
+        [INPUT_IDS.COUNTRY]: Country | '' | 'country';
         [INPUT_IDS.STATE]: string;
         [INPUT_IDS.CITY]: string;
         [INPUT_IDS.ZIP_POST_CODE]: string;
diff --git a/src/types/onyx/PrivatePersonalDetails.ts b/src/types/onyx/PrivatePersonalDetails.ts
index bb67cccb966e..30945e16aac5 100644
--- a/src/types/onyx/PrivatePersonalDetails.ts
+++ b/src/types/onyx/PrivatePersonalDetails.ts
@@ -3,15 +3,17 @@ import type {Country} from '@src/CONST';
 type Address = {
     street: string;
     street2?: string;
-    city: string;
-    state: string;
-    zip: string;
-    country: Country | '';
+    city?: string;
+    state?: string;
+    zip?: string;
+    country?: Country | '' | 'country';
     zipPostCode?: string;
     addressLine1?: string;
     addressLine2?: string;
     lat?: string;
     lng?: string;
+    zipCode?: string;
+    address?: string;
 };
 
 type PrivatePersonalDetails = {

From f569304ac519f9be30b9f8d43288852cc2ae2e5d Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 26 Mar 2024 18:31:37 +0100
Subject: [PATCH 21/33] feat: move RequestorOnfidoStep to TS

---
 src/components/AddressForm.tsx                |  6 +--
 src/libs/actions/BankAccounts.ts              |  4 +-
 ...rOnfidoStep.js => RequestorOnfidoStep.tsx} | 42 ++++++++-----------
 src/types/form/GetPhysicalCardForm.ts         |  2 +-
 src/types/onyx/PrivatePersonalDetails.ts      |  2 +-
 5 files changed, 25 insertions(+), 31 deletions(-)
 rename src/pages/ReimbursementAccount/{RequestorOnfidoStep.js => RequestorOnfidoStep.tsx} (76%)

diff --git a/src/components/AddressForm.tsx b/src/components/AddressForm.tsx
index 6a632bc94885..cee3914cdccb 100644
--- a/src/components/AddressForm.tsx
+++ b/src/components/AddressForm.tsx
@@ -29,7 +29,7 @@ type AddressFormProps = {
     city?: string;
 
     /** Address country field */
-    country?: Country | '' | 'country';
+    country?: Country | '';
 
     /** Address state field */
     state?: string;
@@ -47,7 +47,7 @@ type AddressFormProps = {
     onAddressChanged?: (value: unknown, key: unknown) => void;
 
     /** Callback which is executed when the user submits his address changes */
-    onSubmit: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM | typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) => void;
+    onSubmit: (values: FormOnyxValues<'homeAddressForm'>) => void;
 
     /** Whether or not should the form data should be saved as draft */
     shouldSaveDraft?: boolean;
@@ -159,7 +159,7 @@ function AddressForm({
                         city: INPUT_IDS.CITY,
                         state: INPUT_IDS.STATE,
                         zipCode: INPUT_IDS.ZIP_POST_CODE,
-                        country: INPUT_IDS.COUNTRY,
+                        country: INPUT_IDS.COUNTRY as Country,
                     }}
                     maxInputLength={CONST.FORM_CHARACTER_LIMIT}
                     shouldSaveDraft={shouldSaveDraft}
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
index 6f97511c93fb..32e9bc41dbb1 100644
--- a/src/libs/actions/BankAccounts.ts
+++ b/src/libs/actions/BankAccounts.ts
@@ -436,11 +436,11 @@ function connectBankAccountManually(bankAccountID: number, bankAccount: PlaidBan
 /**
  * Verify the user's identity via Onfido
  */
-function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoDataWithApplicantID, policyID: string) {
+function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoDataWithApplicantID, policyID?: string) {
     const parameters: VerifyIdentityForBankAccountParams = {
         bankAccountID,
         onfidoData: JSON.stringify(onfidoData),
-        policyID,
+        policyID: policyID ?? '',
         canUseNewVbbaFlow: true,
     };
 
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.tsx
similarity index 76%
rename from src/pages/ReimbursementAccount/RequestorOnfidoStep.js
rename to src/pages/ReimbursementAccount/RequestorOnfidoStep.tsx
index fac405090de7..da111380d751 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.tsx
@@ -1,10 +1,10 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Onfido from '@components/Onfido';
+import type {OnfidoData} from '@components/Onfido/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
@@ -13,38 +13,35 @@ import Growl from '@libs/Growl';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
-
-const propTypes = {
-    /** The bank account currently in setup */
-    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
-
-    /** Goes to the previous step */
-    onBackButtonPress: PropTypes.func.isRequired,
+import type {ReimbursementAccount} from '@src/types/onyx';
 
+type RequestorOnfidoStepOnyxProps = {
     /** The token required to initialize the Onfido SDK */
-    onfidoToken: PropTypes.string,
+    onfidoToken: OnyxEntry<string>;
 
     /** The application ID for our Onfido instance */
-    onfidoApplicantID: PropTypes.string,
+    onfidoApplicantID: OnyxEntry<string>;
 };
 
-const defaultProps = {
-    onfidoToken: null,
-    onfidoApplicantID: null,
+type RequestorOnfidoStepProps = RequestorOnfidoStepOnyxProps & {
+    /** The bank account currently in setup */
+    reimbursementAccount: ReimbursementAccount;
+
+    /** Goes to the previous step */
+    onBackButtonPress: () => void;
 };
 
 const HEADER_STEP_COUNTER = {step: 3, total: 5};
 const ONFIDO_ERROR_DISPLAY_DURATION = 10000;
 
-function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoToken, onfidoApplicantID}) {
+function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoToken, onfidoApplicantID}: RequestorOnfidoStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const submitOnfidoData = (onfidoData) => {
-        BankAccounts.verifyIdentityForBankAccount(lodashGet(reimbursementAccount, 'achData.bankAccountID', 0), {
+    const submitOnfidoData = (onfidoData: OnfidoData) => {
+        BankAccounts.verifyIdentityForBankAccount(reimbursementAccount.achData?.bankAccountID ?? 0, {
             ...onfidoData,
-            applicantID: onfidoApplicantID,
+            applicantID: onfidoApplicantID ?? '',
         });
         BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true});
     };
@@ -77,7 +74,7 @@ function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoTok
             <FullPageOfflineBlockingView>
                 <ScrollView contentContainerStyle={styles.flex1}>
                     <Onfido
-                        sdkToken={onfidoToken}
+                        sdkToken={onfidoToken ?? ''}
                         onUserExit={handleOnfidoUserExit}
                         onError={handleOnfidoError}
                         onSuccess={submitOnfidoData}
@@ -88,12 +85,9 @@ function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoTok
     );
 }
 
-RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
-RequestorOnfidoStep.propTypes = propTypes;
-RequestorOnfidoStep.defaultProps = defaultProps;
 RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
 
-export default withOnyx({
+export default withOnyx<RequestorOnfidoStepProps, RequestorOnfidoStepOnyxProps>({
     onfidoToken: {
         key: ONYXKEYS.ONFIDO_TOKEN,
     },
diff --git a/src/types/form/GetPhysicalCardForm.ts b/src/types/form/GetPhysicalCardForm.ts
index 583a06e7abb7..1fa7ea872620 100644
--- a/src/types/form/GetPhysicalCardForm.ts
+++ b/src/types/form/GetPhysicalCardForm.ts
@@ -17,7 +17,7 @@ type GetPhysicalCardForm = Form<
     {
         [INPUT_IDS.ADDRESS_LINE_1]: string;
         [INPUT_IDS.ADDRESS_LINE_2]: string;
-        [INPUT_IDS.COUNTRY]: Country | '' | 'country';
+        [INPUT_IDS.COUNTRY]: Country | '';
         [INPUT_IDS.STATE]: string;
         [INPUT_IDS.CITY]: string;
         [INPUT_IDS.ZIP_POST_CODE]: string;
diff --git a/src/types/onyx/PrivatePersonalDetails.ts b/src/types/onyx/PrivatePersonalDetails.ts
index 30945e16aac5..78c0375d00f2 100644
--- a/src/types/onyx/PrivatePersonalDetails.ts
+++ b/src/types/onyx/PrivatePersonalDetails.ts
@@ -6,7 +6,7 @@ type Address = {
     city?: string;
     state?: string;
     zip?: string;
-    country?: Country | '' | 'country';
+    country?: Country | '';
     zipPostCode?: string;
     addressLine1?: string;
     addressLine2?: string;

From 680c3e83e0e2c5cbdea2c04ba6657b3017b4cbca Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 27 Mar 2024 12:50:08 +0100
Subject: [PATCH 22/33] fix: lint and typecheck

---
 src/pages/workspace/withPolicy.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 981fc63b8c50..4c90c42deffe 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -5,7 +5,6 @@ import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {forwardRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import taxPropTypes from '@components/taxPropTypes';
 import {translatableTextPropTypes} from '@libs/Localize';
 import type {
@@ -29,6 +28,7 @@ type NavigatorsParamList = BottomTabNavigatorParamList &
     ReimbursementAccountNavigatorParamList &
     FullScreenNavigatorParamList &
     WorkspacesCentralPaneNavigatorParamList;
+
 type PolicyRoute = RouteProp<
     NavigatorsParamList,
     | typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT
@@ -48,6 +48,7 @@ type PolicyRoute = RouteProp<
     | typeof SCREENS.WORKSPACE.MEMBER_DETAILS
     | typeof SCREENS.WORKSPACE.INVOICES
     | typeof SCREENS.WORKSPACE.CARD
+    | typeof SCREENS.WORKSPACE.OWNER_CHANGE_CHECK
 >;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {

From 1d9571ac18edf8562eaf7a4e87d77e2c8098df1f Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 27 Mar 2024 13:03:50 +0100
Subject: [PATCH 23/33] fix: lint

---
 src/pages/workspace/withPolicy.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 4c90c42deffe..b6cf62c9725b 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -49,6 +49,7 @@ type PolicyRoute = RouteProp<
     | typeof SCREENS.WORKSPACE.INVOICES
     | typeof SCREENS.WORKSPACE.CARD
     | typeof SCREENS.WORKSPACE.OWNER_CHANGE_CHECK
+    | typeof SCREENS.WORKSPACE.TAX_EDIT
 >;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {

From 6dab98a5ef74208b561e41e32bafcfd75f6e6079 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 27 Mar 2024 16:00:47 +0100
Subject: [PATCH 24/33] fix: typecheck

---
 src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx   | 4 +++-
 .../members/WorkspaceMemberDetailsRoleSelectionPage.tsx      | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 4199bb5f432d..ae8d0bf45ec6 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -39,7 +39,9 @@ type WorkspacePolicyOnyxProps = {
     personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 
-type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & WorkspacePolicyOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS>;
+type WorkspaceMemberDetailsPageProps = Omit<WithPolicyAndFullscreenLoadingProps, 'route'> &
+    WorkspacePolicyOnyxProps &
+    StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS>;
 
 function WorkspaceMemberDetailsPage({personalDetails, policyMembers, policy, route}: WorkspaceMemberDetailsPageProps) {
     const styles = useThemeStyles();
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx
index 9bc76d715dd0..b309ef2927bb 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx
@@ -18,7 +18,8 @@ import CONST from '@src/CONST';
 import type {Route} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
-type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION>;
+type WorkspaceMemberDetailsPageProps = Omit<WithPolicyAndFullscreenLoadingProps, 'route'> &
+    StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION>;
 
 type ListItemType = {
     value: typeof CONST.POLICY.ROLE.ADMIN | typeof CONST.POLICY.ROLE.USER;
@@ -30,7 +31,7 @@ type ListItemType = {
 function WorkspaceMemberDetailsRoleSelectionPage({policyMembers, route}: WorkspaceMemberDetailsPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const accountID = Number(route.params.accountID) ?? 0;
+    const accountID: number = Number(route.params.accountID) ?? 0;
     const policyID = route.params.policyID;
     const backTo = route.params.backTo ?? ('' as Route);
     const member = policyMembers?.[accountID];

From ee0cff1aeaf3a67ac3cf3c2140618a420d24fcd4 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 27 Mar 2024 16:15:28 +0100
Subject: [PATCH 25/33] fix: resolve comments

---
 src/components/Form/InputWrapper.tsx            |  2 +-
 src/pages/ReimbursementAccount/AddressForm.tsx  | 17 ++++++++---------
 src/pages/ReimbursementAccount/CompanyStep.tsx  |  1 +
 .../ContinueBankAccountSetup.tsx                |  7 ++++---
 .../ReimbursementAccountPage.tsx                |  5 ++---
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx
index ea4d109202ad..f2fb9201d09b 100644
--- a/src/components/Form/InputWrapper.tsx
+++ b/src/components/Form/InputWrapper.tsx
@@ -62,7 +62,7 @@ function computeComponentSpecificRegistrationParams({
 type InputWrapperProps<TInput extends ValidInputs, TValue extends ValueTypeKey = ValueTypeKey> = ComponentPropsWithoutRef<TInput> &
     InputComponentValueProps<TValue> & {
         InputComponent: TInput;
-        inputID: string | State;
+        inputID: string;
         isFocused?: boolean;
 
         /**
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index ea2f7304aa1e..2f2c6a999124 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -11,7 +11,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
-type AddressError = Record<keyof Address, boolean>;
+type AddressErrors = Record<keyof Address, boolean>;
 
 type AddressFormProps = {
     /** Translate key for Street name */
@@ -27,10 +27,10 @@ type AddressFormProps = {
     values?: Address;
 
     /** Any errors that can arise from form validation */
-    errors?: AddressError;
+    errors?: AddressErrors;
 
     /** The map for inputID of the inputs */
-    inputKeys?: Address;
+    inputKeys: Address;
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft?: boolean;
@@ -39,6 +39,7 @@ type AddressFormProps = {
 function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, inputKeys, onFieldChange = () => {}, streetTranslationKey}: AddressFormProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+
     return (
         <>
             <View>
@@ -59,7 +60,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
             </View>
             <InputWrapper
                 InputComponent={TextInput}
-                inputID={inputKeys?.city ?? 'cityInput'}
+                inputID={inputKeys.city ?? 'cityInput'}
                 shouldSaveDraft={shouldSaveDraft}
                 label={translate('common.city')}
                 accessibilityLabel={translate('common.city')}
@@ -68,13 +69,13 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                 defaultValue={defaultValues?.city}
                 onChangeText={(value) => onFieldChange({city: value})}
                 errorText={errors?.city ? 'bankAccount.error.addressCity' : ''}
-                containerStyles={[styles.mt6]}
+                containerStyles={styles.mt6}
             />
 
             <View style={[styles.mt3, styles.mhn5]}>
                 <InputWrapper
                     InputComponent={StatePicker}
-                    inputID={inputKeys?.state ?? 'stateInput'}
+                    inputID={inputKeys.state ?? 'stateInput'}
                     shouldSaveDraft={shouldSaveDraft}
                     value={values?.state as State}
                     defaultValue={defaultValues?.state}
@@ -96,7 +97,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                 errorText={errors?.zipCode ? 'bankAccount.error.zipCode' : ''}
                 maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
                 hint={['common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}]}
-                containerStyles={[styles.mt3]}
+                containerStyles={styles.mt3}
             />
         </>
     );
@@ -104,5 +105,3 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
 
 AddressForm.displayName = 'AddressForm';
 export default AddressForm;
-
-export type {Address};
diff --git a/src/pages/ReimbursementAccount/CompanyStep.tsx b/src/pages/ReimbursementAccount/CompanyStep.tsx
index 4c9af53938b3..740fc7329d30 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.tsx
+++ b/src/pages/ReimbursementAccount/CompanyStep.tsx
@@ -5,6 +5,7 @@ type CompanyStepProps = {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
 };
+
 function CompanyStep({onBackButtonPress}: CompanyStepProps) {
     return <BusinessInfo onBackButtonPress={onBackButtonPress} />;
 }
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
index 7a10ae81256d..793c39b14782 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
@@ -23,7 +23,7 @@ type ContinueBankAccountStepProps = {
     reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
 
     /** Callback to continue to the next step of the setup */
-    continueFunction: () => void;
+    onContinue: () => void;
 
     /* The workspace name */
     policyName?: string;
@@ -32,11 +32,12 @@ type ContinueBankAccountStepProps = {
     onBackButtonPress: () => void;
 };
 
-function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimbursementAccount, continueFunction}: ContinueBankAccountStepProps) {
+function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimbursementAccount, onContinue}: ContinueBankAccountStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const errors = reimbursementAccount?.errors ?? {};
     const pendingAction = reimbursementAccount?.pendingAction ?? null;
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -63,7 +64,7 @@ function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimburse
                         <Button
                             iconStyles={[styles.customMarginButtonWithMenuItem]}
                             text={translate('workspace.bankAccount.continueWithSetup')}
-                            onPress={continueFunction}
+                            onPress={onContinue}
                             icon={Expensicons.Bank}
                             style={[styles.mv4]}
                             shouldShowRightIcon
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 6d9136e39048..93b8994df82d 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -34,7 +34,6 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {ACHData, BankAccountStep as TBankAccountStep} from '@src/types/onyx/ReimbursementAccount';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ACHContractStep from './ACHContractStep';
-// eslint-disable-next-line @typescript-eslint/no-redeclare
 import BankAccountStep from './BankAccountStep';
 import BeneficialOwnersStep from './BeneficialOwnersStep';
 import CompanyStep from './CompanyStep';
@@ -307,7 +306,7 @@ function ReimbursementAccountPage({
         [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton],
     );
 
-    const continueFunction = () => {
+    const setManualStep = () => {
         BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL).then(() => {
             setShouldShowContinueSetupButton(false);
         });
@@ -431,7 +430,7 @@ function ReimbursementAccountPage({
         return (
             <ContinueBankAccountSetup
                 reimbursementAccount={reimbursementAccount}
-                continueFunction={continueFunction}
+                onContinue={setManualStep}
                 policyName={policyName}
                 onBackButtonPress={Navigation.goBack}
             />

From 5cf516e56e9ef0e6b179591c72ec3c0fb639c53b Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 28 Mar 2024 13:30:33 +0100
Subject: [PATCH 26/33] fix: lint

---
 src/components/Form/InputWrapper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx
index f2fb9201d09b..b5535a2fe6c1 100644
--- a/src/components/Form/InputWrapper.tsx
+++ b/src/components/Form/InputWrapper.tsx
@@ -6,7 +6,6 @@ import type RoomNameInputProps from '@components/RoomNameInput/types';
 import TextInput from '@components/TextInput';
 import type {BaseTextInputProps} from '@components/TextInput/BaseTextInput/types';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
-import type {State} from '@libs/Navigation/types';
 import FormContext from './FormContext';
 import type {InputComponentBaseProps, InputComponentValueProps, ValidInputs, ValueTypeKey} from './types';
 

From 40251ddb26cf87de3030918536f5816457fa6d78 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 29 Mar 2024 15:12:35 +0100
Subject: [PATCH 27/33] fix: resolve comments

---
 src/components/AddressForm.tsx                      |  2 +-
 src/libs/actions/BankAccounts.ts                    |  3 ++-
 src/pages/ReimbursementAccount/ACHContractStep.tsx  |  1 +
 src/pages/ReimbursementAccount/AddressForm.tsx      | 13 +++++++------
 src/pages/ReimbursementAccount/BankAccountStep.tsx  |  2 +-
 .../ReimbursementAccountPage.tsx                    | 11 ++++++-----
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/AddressForm.tsx b/src/components/AddressForm.tsx
index cee3914cdccb..323bec63b7a8 100644
--- a/src/components/AddressForm.tsx
+++ b/src/components/AddressForm.tsx
@@ -47,7 +47,7 @@ type AddressFormProps = {
     onAddressChanged?: (value: unknown, key: unknown) => void;
 
     /** Callback which is executed when the user submits his address changes */
-    onSubmit: (values: FormOnyxValues<'homeAddressForm'>) => void;
+    onSubmit: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM | typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) => void;
 
     /** Whether or not should the form data should be saved as draft */
     shouldSaveDraft?: boolean;
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
index 32e9bc41dbb1..1dee38872f27 100644
--- a/src/libs/actions/BankAccounts.ts
+++ b/src/libs/actions/BankAccounts.ts
@@ -1,3 +1,4 @@
+import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {OnfidoDataWithApplicantID} from '@components/Onfido/types';
 import * as API from '@libs/API';
@@ -66,7 +67,7 @@ function openPlaidView() {
     clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID));
 }
 
-function setPlaidEvent(eventName: string | null) {
+function setPlaidEvent(eventName: OnyxEntry<string>) {
     Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, eventName);
 }
 
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.tsx b/src/pages/ReimbursementAccount/ACHContractStep.tsx
index bf6013840db1..d4ba013e27d9 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.tsx
+++ b/src/pages/ReimbursementAccount/ACHContractStep.tsx
@@ -11,4 +11,5 @@ function ACHContractStep({onBackButtonPress}: ACHContractStepProps) {
 }
 
 ACHContractStep.displayName = 'ACHContractStep';
+
 export default ACHContractStep;
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index 2f2c6a999124..1cf73748492f 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -36,7 +36,7 @@ type AddressFormProps = {
     shouldSaveDraft?: boolean;
 };
 
-function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, inputKeys, onFieldChange = () => {}, streetTranslationKey}: AddressFormProps) {
+function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, inputKeys, onFieldChange, streetTranslationKey}: AddressFormProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -45,7 +45,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
             <View>
                 <InputWrapper
                     InputComponent={AddressSearch}
-                    inputID={inputKeys?.street ?? 'streetInput'}
+                    inputID={inputKeys?.street}
                     shouldSaveDraft={shouldSaveDraft}
                     label={translate(streetTranslationKey)}
                     containerStyles={styles.mt6}
@@ -67,7 +67,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                 role={CONST.ROLE.PRESENTATION}
                 value={values?.city}
                 defaultValue={defaultValues?.city}
-                onChangeText={(value) => onFieldChange({city: value})}
+                onChangeText={(value) => onFieldChange?.({city: value})}
                 errorText={errors?.city ? 'bankAccount.error.addressCity' : ''}
                 containerStyles={styles.mt6}
             />
@@ -79,13 +79,13 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                     shouldSaveDraft={shouldSaveDraft}
                     value={values?.state as State}
                     defaultValue={defaultValues?.state}
-                    onInputChange={(value) => onFieldChange({state: value})}
+                    onInputChange={(value) => onFieldChange?.({state: value})}
                     errorText={errors?.state ? 'bankAccount.error.addressState' : ''}
                 />
             </View>
             <InputWrapper
                 InputComponent={TextInput}
-                inputID={inputKeys?.zipCode ?? 'zipCodeInput'}
+                inputID={inputKeys.zipCode ?? 'zipCodeInput'}
                 shouldSaveDraft={shouldSaveDraft}
                 label={translate('common.zip')}
                 accessibilityLabel={translate('common.zip')}
@@ -93,7 +93,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
                 inputMode={CONST.INPUT_MODE.NUMERIC}
                 value={values?.zipCode}
                 defaultValue={defaultValues?.zipCode}
-                onChangeText={(value) => onFieldChange({zipCode: value})}
+                onChangeText={(value) => onFieldChange?.({zipCode: value})}
                 errorText={errors?.zipCode ? 'bankAccount.error.zipCode' : ''}
                 maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
                 hint={['common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}]}
@@ -104,4 +104,5 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
 }
 
 AddressForm.displayName = 'AddressForm';
+
 export default AddressForm;
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index a7d8f7f6c088..d2fe7199a4c6 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -70,7 +70,7 @@ function BankAccountStep({
     receivedRedirectURI,
     reimbursementAccount,
     onBackButtonPress,
-    isPlaidDisabled,
+    isPlaidDisabled = false,
 }: BankAccountStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 93b8994df82d..0c8618e910e3 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -211,9 +211,10 @@ function ReimbursementAccountPage({
 
     const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false);
 
-    const currentStep = achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+    // eslint-disable-next-line  @typescript-eslint/prefer-nullish-coalescing
+    const currentStep = achData?.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
     const policyName = policy?.name ?? '';
-    const policyID = route.params?.policyID ?? '';
+    const policyIDParam = route.params?.policyID ?? '';
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -234,7 +235,7 @@ function ReimbursementAccountPage({
         const stepToOpen = getStepToOpenFromRouteParams(route);
         const subStep = achData?.subStep ?? '';
         const localCurrentStep = achData?.currentStep ?? '';
-        BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyID);
+        BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyIDParam);
     }
 
     useEffect(() => {
@@ -296,7 +297,6 @@ function ReimbursementAccountPage({
                 BankAccounts.hideBankAccountErrors();
             }
 
-            // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
             const policyID = route.params.policyID;
             const backTo = route.params.backTo;
 
@@ -367,6 +367,7 @@ function ReimbursementAccountPage({
     };
 
     const isLoading = (!!isLoadingApp || !!account?.isLoading || reimbursementAccount?.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
+
     const shouldShowOfflineLoader = !(
         isOffline &&
         [
@@ -445,7 +446,7 @@ function ReimbursementAccountPage({
                 receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
                 plaidLinkOAuthToken={plaidLinkToken}
                 policyName={policyName}
-                policyID={policyID}
+                policyID={policyIDParam}
             />
         );
     }

From 6c49728306444bb90a89970c51151243f7b9bd4f Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 3 Apr 2024 09:20:44 +0200
Subject: [PATCH 28/33] fix: resolve conflicts

---
 src/components/StateSelector.tsx               | 4 +++-
 src/pages/ReimbursementAccount/AddressForm.tsx | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/StateSelector.tsx b/src/components/StateSelector.tsx
index aa458834c8ad..89cd46f5274c 100644
--- a/src/components/StateSelector.tsx
+++ b/src/components/StateSelector.tsx
@@ -35,7 +35,7 @@ type StateSelectorProps = {
     onBlur?: () => void;
 
     /** object to get route details from */
-    stateSelectorRoute?: typeof ROUTES.SETTINGS_ADDRESS_STATE | typeof ROUTES.MONEY_REQUEST_STATE_SELECTOR;
+    stateSelectorRoute?: typeof ROUTES.SETTINGS_ADDRESS_STATE;
 };
 
 function StateSelector(
@@ -105,3 +105,5 @@ function StateSelector(
 StateSelector.displayName = 'StateSelector';
 
 export default React.forwardRef(StateSelector);
+
+export type {State};
diff --git a/src/pages/ReimbursementAccount/AddressForm.tsx b/src/pages/ReimbursementAccount/AddressForm.tsx
index 1cf73748492f..22829eed521f 100644
--- a/src/pages/ReimbursementAccount/AddressForm.tsx
+++ b/src/pages/ReimbursementAccount/AddressForm.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
 import InputWrapper from '@components/Form/InputWrapper';
-import StatePicker from '@components/StatePicker';
-import type {State} from '@components/StatePicker/StateSelectorModal';
+import type {State} from '@components/StateSelector';
+import StateSelector from '@components/StateSelector';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -74,7 +74,7 @@ function AddressForm({shouldSaveDraft = false, defaultValues, values, errors, in
 
             <View style={[styles.mt3, styles.mhn5]}>
                 <InputWrapper
-                    InputComponent={StatePicker}
+                    InputComponent={StateSelector}
                     inputID={inputKeys.state ?? 'stateInput'}
                     shouldSaveDraft={shouldSaveDraft}
                     value={values?.state as State}

From c1dd9b7ba3589b81b57047cad11258199889e2a0 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 3 Apr 2024 09:36:37 +0200
Subject: [PATCH 29/33] fix: typecheck

---
 src/components/StateSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StateSelector.tsx b/src/components/StateSelector.tsx
index 89cd46f5274c..18e6f45ed9e5 100644
--- a/src/components/StateSelector.tsx
+++ b/src/components/StateSelector.tsx
@@ -35,7 +35,7 @@ type StateSelectorProps = {
     onBlur?: () => void;
 
     /** object to get route details from */
-    stateSelectorRoute?: typeof ROUTES.SETTINGS_ADDRESS_STATE;
+    stateSelectorRoute?: typeof ROUTES.SETTINGS_ADDRESS_STATE | typeof ROUTES.MONEY_REQUEST_STATE_SELECTOR;
 };
 
 function StateSelector(

From c7076f3eaf004a3c8697cbe88e88229b4568da1b Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 3 Apr 2024 10:04:45 +0200
Subject: [PATCH 30/33] fix: resolve comments

---
 src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx | 6 +++---
 src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx | 2 +-
 src/types/onyx/ReimbursementAccount.ts                      | 2 ++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
index 793c39b14782..07142499f6c6 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.tsx
@@ -23,7 +23,7 @@ type ContinueBankAccountStepProps = {
     reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;
 
     /** Callback to continue to the next step of the setup */
-    onContinue: () => void;
+    onContinuePress: () => void;
 
     /* The workspace name */
     policyName?: string;
@@ -32,7 +32,7 @@ type ContinueBankAccountStepProps = {
     onBackButtonPress: () => void;
 };
 
-function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimbursementAccount, onContinue}: ContinueBankAccountStepProps) {
+function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimbursementAccount, onContinuePress}: ContinueBankAccountStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const errors = reimbursementAccount?.errors ?? {};
@@ -64,7 +64,7 @@ function ContinueBankAccountSetup({policyName = '', onBackButtonPress, reimburse
                         <Button
                             iconStyles={[styles.customMarginButtonWithMenuItem]}
                             text={translate('workspace.bankAccount.continueWithSetup')}
-                            onPress={onContinue}
+                            onPress={onContinuePress}
                             icon={Expensicons.Bank}
                             style={[styles.mv4]}
                             shouldShowRightIcon
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
index 0c8618e910e3..04254bbe1559 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
@@ -431,7 +431,7 @@ function ReimbursementAccountPage({
         return (
             <ContinueBankAccountSetup
                 reimbursementAccount={reimbursementAccount}
-                onContinue={setManualStep}
+                onContinuePress={setManualStep}
                 policyName={policyName}
                 onBackButtonPress={Navigation.goBack}
             />
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
index b96c47729cd7..f2565b29eaf3 100644
--- a/src/types/onyx/ReimbursementAccount.ts
+++ b/src/types/onyx/ReimbursementAccount.ts
@@ -39,8 +39,10 @@ type ACHData = Partial<BeneficialOwnersStepProps & CompanyStepProps & RequestorS
     /** Weather Onfido setup is complete */
     isOnfidoSetupComplete?: boolean;
 
+    /** Last 4 digits of the account number */
     mask?: string;
 
+    /** Unique identifier for this account in Plaid */
     plaidAccountID?: string;
 };
 

From 3bd3b3b132fbd21eaa26b13f31c0f096fa0582e9 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 5 Apr 2024 11:54:06 +0200
Subject: [PATCH 31/33] fix: resolve comments

---
 .../actions/ReimbursementAccount/resetFreePlanBankAccount.ts | 2 +-
 src/pages/workspace/WorkspaceResetBankAccountModal.tsx       | 2 +-
 src/stories/AddressSearch.stories.tsx                        | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts
index 4663fbb5bcc3..a1f0e070fcb3 100644
--- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts
+++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts
@@ -13,7 +13,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 /**
  * Reset user's reimbursement account. This will delete the bank account.
  */
-function resetFreePlanBankAccount(bankAccountID: number, session: OnyxEntry<OnyxTypes.Session>, policyID: string, user: OnyxEntry<OnyxTypes.User>) {
+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');
     }
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
index 75f082fd2082..e7a8ce307816 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.tsx
@@ -49,7 +49,7 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, session, user}: W
             }
             danger
             onCancel={BankAccounts.cancelResetFreePlanBankAccount}
-            onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID ?? -1, session, achData?.policyID ?? '', user)}
+            onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID, session, achData?.policyID ?? '', user)}
             shouldShowCancelButton
             isVisible
         />
diff --git a/src/stories/AddressSearch.stories.tsx b/src/stories/AddressSearch.stories.tsx
index 50e34cc5b061..d5756be3db92 100644
--- a/src/stories/AddressSearch.stories.tsx
+++ b/src/stories/AddressSearch.stories.tsx
@@ -2,7 +2,8 @@ import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import type {AddressSearchProps} from '@components/AddressSearch';
 import AddressSearch from '@components/AddressSearch';
-import type {RenamedInputKeysProps, StreetValue} from '@components/AddressSearch/types';
+import type {StreetValue} from '@components/AddressSearch/types';
+import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
 type AddressSearchStory = ComponentStory<typeof AddressSearch>;
 
@@ -21,7 +22,7 @@ const story: ComponentMeta<typeof AddressSearch> = {
 };
 
 function Template(props: AddressSearchProps) {
-    const [value, setValue] = useState<string | number | RenamedInputKeysProps | StreetValue>('');
+    const [value, setValue] = useState<string | number | Address | StreetValue>('');
     return (
         <AddressSearch
             value={value as string}

From dea796da2b1850b2ccf3abc6e96729f0da38b494 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 5 Apr 2024 16:39:10 +0200
Subject: [PATCH 32/33] fix: removed unused type

---
 src/components/AddressSearch/types.ts | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index be02ac70417f..bc7acf3f7e40 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -13,18 +13,6 @@ type CurrentLocationButtonProps = {
     isDisabled?: boolean;
 };
 
-type RenamedInputKeysProps = {
-    street: string;
-    street2: string;
-    city: string;
-    state: string;
-    lat?: string;
-    lng?: string;
-    zipCode: string;
-    address?: string;
-    country?: string;
-};
-
 type OnPressProps = {
     address: string;
     lat: number;
@@ -97,4 +85,4 @@ type AddressSearchProps = {
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>) => boolean;
 
-export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType, StreetValue};
+export type {CurrentLocationButtonProps, AddressSearchProps, IsCurrentTargetInsideContainerType, StreetValue};

From 7023d381fc1f8237f9da184c1bd69c68a75a85cc Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 9 Apr 2024 10:32:32 +0200
Subject: [PATCH 33/33] fix: typecheck

---
 src/pages/workspace/withPolicy.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index b6cf62c9725b..1b2cefdcb37c 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -44,7 +44,6 @@ type PolicyRoute = RouteProp<
     | typeof SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET
     | typeof SCREENS.WORKSPACE.TRAVEL
     | typeof SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY
-    | typeof SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION
     | typeof SCREENS.WORKSPACE.MEMBER_DETAILS
     | typeof SCREENS.WORKSPACE.INVOICES
     | typeof SCREENS.WORKSPACE.CARD
