Merge pull request #37214 from kubabutkiewicz/ts-migration/Reimbursem…

…entAccount/page

[TS migration] Migrate 'ReimbursementAccount' page to TypeScript

src/components/AddressForm.tsx

@@ -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}

src/components/AddressSearch/index.tsx

@@ -20,9 +20,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
@@ -213,7 +214,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;
                 }

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 type {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};

src/components/StateSelector.tsx

@@ -105,3 +105,5 @@ function StateSelector(
 StateSelector.displayName = 'StateSelector';
 
 export default React.forwardRef(StateSelector);
+
+export type {State};

src/libs/Navigation/types.ts

@@ -488,8 +488,9 @@ type AddPersonalBankAccountNavigatorParamList = {
 
 type ReimbursementAccountNavigatorParamList = {
     [SCREENS.REIMBURSEMENT_ACCOUNT_ROOT]: {
-        stepToOpen: string;
-        policyID: string;
+        stepToOpen?: string;
+        backTo?: Routes;
+        policyID?: string;
     };
 };
 

src/libs/actions/BankAccounts.ts

@@ -1,3 +1,4 @@
+import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import type {OnfidoDataWithApplicantID} from '@components/Onfido/types';
@@ -70,7 +71,7 @@ function openPlaidView() {
     clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID));
 }
 
-function setPlaidEvent(eventName: string) {
+function setPlaidEvent(eventName: OnyxEntry<string>) {
     Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, eventName);
 }
 
@@ -463,11 +464,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,
     };
 

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');
     }

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
                     />

src/pages/ReimbursementAccount/ACHContractStep.js → src/pages/ReimbursementAccount/ACHContractStep.tsx

@@ -1,16 +1,15 @@
-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;