[TS migration] Migrate 'AddPersonalBankAccount' page

src/ONYXKEYS.ts

@@ -360,6 +360,8 @@ const ONYXKEYS = {
         POLICY_REPORT_FIELD_EDIT_FORM_DRAFT: 'policyReportFieldEditFormDraft',
         REIMBURSEMENT_ACCOUNT_FORM: 'reimbursementAccount',
         REIMBURSEMENT_ACCOUNT_FORM_DRAFT: 'reimbursementAccountDraft',
+        PERSONAL_BANK_ACCOUNT: 'personalBankAccountForm',
+        PERSONAL_BANK_ACCOUNT_DRAFT: 'personalBankAccountFormDraft',
     },
 } as const;
 
@@ -545,6 +547,8 @@ type OnyxValues = {
     // @ts-expect-error Different values are defined under the same key: ReimbursementAccount and ReimbursementAccountForm
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
+    [ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_DRAFT]: OnyxTypes.PersonalBankAccount;
 };
 
 type OnyxKeyValue<TOnyxKey extends (OnyxKey | OnyxCollectionKey) & keyof OnyxValues> = OnyxEntry<OnyxValues[TOnyxKey]>;

src/libs/actions/BankAccounts.ts

@@ -21,6 +21,7 @@ import * as PlaidDataProps from '@pages/ReimbursementAccount/plaidDataPropTypes'
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
 import type PlaidBankAccount from '@src/types/onyx/PlaidBankAccount';
 import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
 import type {OnfidoData} from '@src/types/onyx/ReimbursementAccountDraft';
@@ -75,7 +76,7 @@ function openPersonalBankAccountSetupView(exitReportID?: string) {
 /**
  * Whether after adding a bank account we should continue with the KYC flow. If so, we must specify the fallback route.
  */
-function setPersonalBankAccountContinueKYCOnSuccess(onSuccessFallbackRoute: string) {
+function setPersonalBankAccountContinueKYCOnSuccess(onSuccessFallbackRoute: Route) {
     Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {onSuccessFallbackRoute});
 }
 

src/libs/actions/PaymentMethods.ts

@@ -12,6 +12,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
 import type {BankAccountList, FundList} from '@src/types/onyx';
 import type PaymentMethod from '@src/types/onyx/PaymentMethod';
 import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
@@ -28,7 +29,7 @@ const kycWallRef: MutableRefObject<KYCWallRef | null> = createRef<KYCWallRef>();
 /**
  * When we successfully add a payment method or pass the KYC checks we will continue with our setup action if we have one set.
  */
-function continueSetup(fallbackRoute = ROUTES.HOME) {
+function continueSetup(fallbackRoute: Route = ROUTES.HOME) {
     if (!kycWallRef.current?.continueAction) {
         Navigation.goBack(fallbackRoute);
         return;

src/pages/AddPersonalBankAccountPage.js → src/pages/AddPersonalBankAccountPage.tsx

@@ -1,8 +1,6 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
 import AddPlaidBankAccount from '@components/AddPlaidBankAccount';
 import ConfirmationPage from '@components/ConfirmationPage';
 import FormProvider from '@components/Form/FormProvider';
@@ -16,69 +14,37 @@ import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import * as PlaidDataProps from './ReimbursementAccount/plaidDataPropTypes';
+import type {PersonalBankAccount, PlaidData} from '@src/types/onyx';
 
-const propTypes = {
+type AddPersonalBankAccountPageWithOnyxProps = {
     /** Contains plaid data */
-    plaidData: PlaidDataProps.plaidDataPropTypes,
+    plaidData: OnyxEntry<PlaidData>;
 
     /** The details about the Personal bank account we are adding saved in Onyx */
-    personalBankAccount: PropTypes.shape({
-        /** An error message to display to the user */
-        error: PropTypes.string,
-
-        /** Whether we should show the view that the bank account was successfully added */
-        shouldShowSuccess: PropTypes.bool,
-
-        /** Any reportID we should redirect to at the end of the flow */
-        exitReportID: PropTypes.string,
-
-        /** Whether we should continue with KYC at the end of the flow  */
-        shouldContinueKYCOnSuccess: PropTypes.bool,
-
-        /** Whether the form is loading */
-        isLoading: PropTypes.bool,
-
-        /** The account ID of the selected bank account from Plaid */
-        plaidAccountID: PropTypes.string,
-    }),
+    personalBankAccount: OnyxEntry<PersonalBankAccount>;
 };
 
-const defaultProps = {
-    plaidData: PlaidDataProps.plaidDataDefaultProps,
-    personalBankAccount: {
-        error: '',
-        shouldShowSuccess: false,
-        isLoading: false,
-        plaidAccountID: '',
-        exitReportID: '',
-        shouldContinueKYCOnSuccess: false,
-    },
-};
-
-function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
+function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersonalBankAccountPageWithOnyxProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [selectedPlaidAccountId, setSelectedPlaidAccountId] = useState('');
-    const shouldShowSuccess = lodashGet(personalBankAccount, 'shouldShowSuccess', false);
+    const shouldShowSuccess = personalBankAccount?.shouldShowSuccess ?? false;
 
-    /**
-     * @returns {Object}
-     */
     const validateBankAccountForm = () => ({});
 
     const submitBankAccountForm = useCallback(() => {
-        const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), {
-            plaidAccountID: selectedPlaidAccountId,
-        });
+        const bankAccounts = plaidData?.bankAccounts ?? [];
+        const selectedPlaidBankAccount = bankAccounts.find((bankAccount) => bankAccount.plaidAccountID === selectedPlaidAccountId);
 
-        BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount);
+        if (selectedPlaidBankAccount) {
+            BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount);
+        }
     }, [plaidData, selectedPlaidAccountId]);
 
     const exitFlow = useCallback(
         (shouldContinue = false) => {
-            const exitReportID = lodashGet(personalBankAccount, 'exitReportID');
-            const onSuccessFallbackRoute = lodashGet(personalBankAccount, 'onSuccessFallbackRoute', '');
+            const exitReportID = personalBankAccount?.exitReportID;
+            const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? '';
 
             if (exitReportID) {
                 Navigation.dismissModal(exitReportID);
@@ -114,7 +80,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
                 />
             ) : (
                 <FormProvider
-                    formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
+                    formID={ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountId)}
                     submitButtonText={translate('common.saveAndContinue')}
                     scrollContextEnabled
@@ -135,11 +101,8 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
     );
 }
 AddPersonalBankAccountPage.displayName = 'AddPersonalBankAccountPage';
-AddPersonalBankAccountPage.propTypes = propTypes;
-AddPersonalBankAccountPage.defaultProps = defaultProps;
-AddPersonalBankAccountPage.displayName = 'AddPersonalBankAccountPage';
 
-export default withOnyx({
+export default withOnyx<AddPersonalBankAccountPageWithOnyxProps, AddPersonalBankAccountPageWithOnyxProps>({
     personalBankAccount: {
         key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
     },

src/types/onyx/Form.ts

@@ -1,6 +1,7 @@
 import type * as OnyxCommon from './OnyxCommon';
+import type PersonalBankAccount from './PersonalBankAccount';
 
-type FormValueType = string | boolean | Date;
+type FormValueType = string | boolean | Date | OnyxCommon.Errors;
 
 type BaseForm = {
     /** Controls the loading state of the form */
@@ -54,6 +55,19 @@ type PrivateNotesForm = Form<{
     privateNotes: string;
 }>;
 
+type PersonalBankAccountForm = Form<PersonalBankAccount>;
+
 export default Form;
 
-export type {AddDebitCardForm, DateOfBirthForm, PrivateNotesForm, DisplayNameForm, FormValueType, NewRoomForm, BaseForm, IKnowATeacherForm, IntroSchoolPrincipalForm};
+export type {
+    AddDebitCardForm,
+    DateOfBirthForm,
+    PrivateNotesForm,
+    DisplayNameForm,
+    FormValueType,
+    NewRoomForm,
+    BaseForm,
+    IKnowATeacherForm,
+    IntroSchoolPrincipalForm,
+    PersonalBankAccountForm,
+};

src/types/onyx/PersonalBankAccount.ts

@@ -1,3 +1,4 @@
+import type {Route} from '@src/ROUTES';
 import type * as OnyxCommon from './OnyxCommon';
 
 type PersonalBankAccount = {
@@ -17,7 +18,7 @@ type PersonalBankAccount = {
     exitReportID?: string;
 
     /** If set, continue with the KYC flow after adding a PBA. This specifies the fallback route to use. */
-    onSuccessFallbackRoute?: string;
+    onSuccessFallbackRoute?: Route;
 };
 
 export default PersonalBankAccount;