Merge pull request #34257 from tienifr/fix/32001

[TS migration] Migrate 'SettingsWalletDetails' page to TypeScript

src/CONST.ts

@@ -37,6 +37,9 @@ const keyInputRightArrow = KeyCommand?.constants?.keyInputRightArrow ?? 'keyInpu
 // describes if a shortcut key can cause navigation
 const KEYBOARD_SHORTCUT_NAVIGATION_TYPE = 'NAVIGATION_SHORTCUT';
 
+// Explicit type annotation is required
+const cardActiveStates: number[] = [2, 3, 4, 7];
+
 const CONST = {
     ANDROID_PACKAGE_NAME,
     ANIMATED_TRANSITION: 300,
@@ -1441,7 +1444,7 @@ const CONST = {
             CLOSED: 6,
             STATE_SUSPENDED: 7,
         },
-        ACTIVE_STATES: [2, 3, 4, 7],
+        ACTIVE_STATES: cardActiveStates,
     },
     AVATAR_ROW_SIZE: {
         DEFAULT: 4,

src/components/AddPaymentMethodMenu.js

@@ -4,7 +4,6 @@ import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
-import compose from '@libs/compose';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
@@ -13,7 +12,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import * as Expensicons from './Icon/Expensicons';
 import PopoverMenu from './PopoverMenu';
 import refPropTypes from './refPropTypes';
-import withWindowDimensions from './withWindowDimensions';
 
 const propTypes = {
     /** Should the component be visible? */
@@ -122,11 +120,8 @@ AddPaymentMethodMenu.propTypes = propTypes;
 AddPaymentMethodMenu.defaultProps = defaultProps;
 AddPaymentMethodMenu.displayName = 'AddPaymentMethodMenu';
 
-export default compose(
-    withWindowDimensions,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(AddPaymentMethodMenu);
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(AddPaymentMethodMenu);

src/components/KYCWall/BaseKYCWall.tsx

@@ -245,7 +245,6 @@ function KYCWall({
     return (
         <>
             <AddPaymentMethodMenu
-                // @ts-expect-error TODO: Remove this once AddPaymentMethodMenu (https://github.com/Expensify/App/issues/25073) is migrated to TypeScript.
                 isVisible={shouldShowAddPaymentMenu}
                 iouReport={iouReport}
                 onClose={() => setShouldShowAddPaymentMenu(false)}

src/components/KYCWall/types.ts

@@ -63,7 +63,7 @@ type KYCWallProps = {
     onSuccessfulKYC: (iouPaymentType?: PaymentMethodType, currentSource?: Source) => void;
 
     /** Children to build the KYC */
-    children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method: PaymentMethodType) => void, anchorRef: RefObject<View>) => void;
+    children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method?: PaymentMethodType) => void, anchorRef: RefObject<View>) => void;
 };
 
-export type {AnchorPosition, KYCWallProps, PaymentMethod, DomRect};
+export type {AnchorPosition, KYCWallProps, PaymentMethod, DomRect, PaymentMethodType, Source};

src/components/Popover/index.tsx

@@ -3,32 +3,32 @@ import {createPortal} from 'react-dom';
 import Modal from '@components/Modal';
 import {PopoverContext} from '@components/PopoverProvider';
 import PopoverWithoutOverlay from '@components/PopoverWithoutOverlay';
-import withWindowDimensions from '@components/withWindowDimensions';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
-import type {PopoverWithWindowDimensionsProps} from './types';
+import type {PopoverProps} from './types';
 
 /*
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
 
-function Popover(props: PopoverWithWindowDimensionsProps) {
+function Popover(props: PopoverProps) {
     const {
         isVisible,
         onClose,
-        isSmallScreenWidth,
         fullscreen,
         animationInTiming = CONST.ANIMATED_TRANSITION,
         onLayout,
         animationOutTiming,
         disableAnimation = true,
-        withoutOverlay,
+        withoutOverlay = false,
         anchorPosition = {},
         anchorRef = () => {},
         animationIn = 'fadeIn',
         animationOut = 'fadeOut',
     } = props;
 
+    const {isSmallScreenWidth} = useWindowDimensions();
     const withoutOverlayRef = useRef(null);
     const {close, popover} = React.useContext(PopoverContext);
 
@@ -106,4 +106,4 @@ function Popover(props: PopoverWithWindowDimensionsProps) {
 
 Popover.displayName = 'Popover';
 
-export default withWindowDimensions(Popover);
+export default Popover;

src/components/Popover/types.ts

@@ -26,7 +26,7 @@ type PopoverProps = BaseModalProps &
         disableAnimation?: boolean;
 
         /** Whether we don't want to show overlay */
-        withoutOverlay: boolean;
+        withoutOverlay?: boolean;
 
         /** The dimensions of the popover */
         popoverDimensions?: PopoverDimensions;

src/libs/CardUtils.ts

@@ -30,7 +30,10 @@ function getMonthFromExpirationDateString(expirationDateString: string) {
  * @param cardID
  * @returns boolean
  */
-function isExpensifyCard(cardID: number) {
+function isExpensifyCard(cardID?: number) {
+    if (!cardID) {
+        return false;
+    }
     const card = allCards[cardID];
     if (!card) {
         return false;
@@ -50,7 +53,10 @@ function isCorporateCard(cardID: number) {
  * @param cardID
  * @returns string in format %<bank> - <lastFourPAN || Not Activated>%.
  */
-function getCardDescription(cardID: number) {
+function getCardDescription(cardID?: number) {
+    if (!cardID) {
+        return '';
+    }
     const card = allCards[cardID];
     if (!card) {
         return '';

src/libs/PaymentUtils.ts

@@ -40,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, styles: ThemeStyles): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund> | Fund[], styles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {

src/libs/actions/PaymentMethods.ts

@@ -77,8 +77,8 @@ function openWalletPage() {
 function getMakeDefaultPaymentOnyxData(
     bankAccountID: number,
     fundID: number,
-    previousPaymentMethod: PaymentMethod,
-    currentPaymentMethod: PaymentMethod,
+    previousPaymentMethod?: PaymentMethod,
+    currentPaymentMethod?: PaymentMethod,
     isOptimisticData = true,
 ): OnyxUpdate[] {
     const onyxData: OnyxUpdate[] = [
@@ -87,6 +87,7 @@ function getMakeDefaultPaymentOnyxData(
                   onyxMethod: Onyx.METHOD.MERGE,
                   key: ONYXKEYS.USER_WALLET,
                   value: {
+                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                       walletLinkedAccountID: bankAccountID || fundID,
                       walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD,
                       // Only clear the error if this is optimistic data. If this is failure data, we do not want to clear the error that came from the server.
@@ -97,6 +98,7 @@ function getMakeDefaultPaymentOnyxData(
                   onyxMethod: Onyx.METHOD.MERGE,
                   key: ONYXKEYS.USER_WALLET,
                   value: {
+                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                       walletLinkedAccountID: bankAccountID || fundID,
                       walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD,
                   },
@@ -134,7 +136,7 @@ function getMakeDefaultPaymentOnyxData(
  * Sets the default bank account or debit card for an Expensify Wallet
  *
  */
-function makeDefaultPaymentMethod(bankAccountID: number, fundID: number, previousPaymentMethod: PaymentMethod, currentPaymentMethod: PaymentMethod) {
+function makeDefaultPaymentMethod(bankAccountID: number, fundID: number, previousPaymentMethod?: PaymentMethod, currentPaymentMethod?: PaymentMethod) {
     const parameters: MakeDefaultPaymentMethodParams = {
         bankAccountID,
         fundID,
@@ -304,7 +306,7 @@ type PaymentListKey = typeof ONYXKEYS.BANK_ACCOUNT_LIST | typeof ONYXKEYS.FUND_L
  * @param paymentListKey The onyx key for the provided payment method
  * @param paymentMethodID
  */
-function clearDeletePaymentMethodError(paymentListKey: PaymentListKey, paymentMethodID: string) {
+function clearDeletePaymentMethodError(paymentListKey: PaymentListKey, paymentMethodID: number) {
     Onyx.merge(paymentListKey, {
         [paymentMethodID]: {
             pendingAction: null,
@@ -318,7 +320,7 @@ function clearDeletePaymentMethodError(paymentListKey: PaymentListKey, paymentMe
  * @param paymentListKey The onyx key for the provided payment method
  * @param paymentMethodID
  */
-function clearAddPaymentMethodError(paymentListKey: PaymentListKey, paymentMethodID: string) {
+function clearAddPaymentMethodError(paymentListKey: PaymentListKey, paymentMethodID: number) {
     Onyx.merge(paymentListKey, {
         [paymentMethodID]: null,
     });