[TS-migration] Migrate 'AddPaymentMethodMenu.tsx' to TypeScript

src/components/AddPaymentMethodMenu.js → src/components/AddPaymentMethodMenu.tsx

@@ -1,78 +1,55 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {RefObject} from 'react';
 import React from 'react';
+import type {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import iouReportPropTypes from '@pages/iouReportPropTypes';
+import type {AnchorPosition} from '@styles/index';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report, Session} from '@src/types/onyx';
+import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import * as Expensicons from './Icon/Expensicons';
 import PopoverMenu from './PopoverMenu';
-import refPropTypes from './refPropTypes';
 
-const propTypes = {
-    /** Should the component be visible? */
-    isVisible: PropTypes.bool.isRequired,
-
-    /** Callback to execute when the component closes. */
-    onClose: PropTypes.func.isRequired,
-
-    /** Callback to execute when the payment method is selected. */
-    onItemSelected: PropTypes.func.isRequired,
-
-    /** The IOU/Expense report we are paying */
-    iouReport: iouReportPropTypes,
-
-    /** Anchor position for the AddPaymentMenu. */
-    anchorPosition: PropTypes.shape({
-        horizontal: PropTypes.number,
-        vertical: PropTypes.number,
-    }),
-
-    /** Where the popover should be positioned relative to the anchor points. */
-    anchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
-
-    /** Popover anchor ref */
-    anchorRef: refPropTypes,
-
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user accountID */
-        accountID: PropTypes.number,
-    }),
-
-    /** Whether the personal bank account option should be shown */
-    shouldShowPersonalBankAccountOption: PropTypes.bool,
+type AddPaymentMethodMenuOnyxProps = {
+    session: OnyxEntry<Session>;
 };
 
-const defaultProps = {
-    iouReport: {},
-    anchorPosition: {},
-    anchorAlignment: {
-        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-    },
-    anchorRef: () => {},
-    session: {},
-    shouldShowPersonalBankAccountOption: false,
+type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & {
+    isVisible: boolean;
+    onClose: () => void;
+    onItemSelected: (paymentMethod: ValueOf<typeof CONST.PAYMENT_METHODS>) => void;
+    iouReport?: OnyxEntry<Report>;
+    anchorPosition: AnchorPosition;
+    anchorAlignment?: AnchorAlignment;
+    anchorRef: RefObject<View | HTMLDivElement>;
+    shouldShowPersonalBankAccountOption?: boolean;
 };
 
-function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, shouldShowPersonalBankAccountOption}) {
+function AddPaymentMethodMenu({
+    isVisible,
+    onClose,
+    anchorPosition,
+    anchorAlignment,
+    anchorRef,
+    iouReport,
+    onItemSelected,
+    session,
+    shouldShowPersonalBankAccountOption = false,
+}: AddPaymentMethodMenuProps) {
     const {translate} = useLocalize();
 
     // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
     // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee.
+    const isIOUReport = ReportUtils.isIOUReport(iouReport ?? {});
     const canUseBusinessBankAccount =
-        ReportUtils.isExpenseReport(iouReport) ||
-        (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0)));
+        ReportUtils.isExpenseReport(iouReport ?? {}) || (isIOUReport && !ReportActionsUtils.hasRequestFromCurrentAccount(iouReport?.reportID ?? '', session?.accountID ?? 0));
 
-    const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || ReportUtils.isIOUReport(iouReport);
+    const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || isIOUReport;
 
     return (
         <PopoverMenu
@@ -116,11 +93,9 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
     );
 }
 
-AddPaymentMethodMenu.propTypes = propTypes;
-AddPaymentMethodMenu.defaultProps = defaultProps;
 AddPaymentMethodMenu.displayName = 'AddPaymentMethodMenu';
 
-export default withOnyx({
+export default withOnyx<AddPaymentMethodMenuProps, AddPaymentMethodMenuOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },

src/components/KYCWall/BaseKYCWall.tsx

@@ -18,6 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import viewRef from '@src/types/utils/viewRef';
 import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types';
 
@@ -246,7 +247,7 @@ function KYCWall({
         <>
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
-                iouReport={iouReport}
+                iouReport={isEmptyObject(iouReport) ? undefined : iouReport}
                 onClose={() => setShouldShowAddPaymentMenu(false)}
                 anchorRef={anchorRef}
                 anchorPosition={{