[TS migration] Migrate 'SettingsWalletDetails' page to TypeScript

src/CONST.ts

@@ -1354,7 +1354,9 @@ const CONST = {
             CLOSED: 6,
             STATE_SUSPENDED: 7,
         },
-        ACTIVE_STATES: [2, 3, 4, 7],
+        get ACTIVE_STATES() {
+            return [2, 3, 4, 7];
+        },
     },
     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/index.js

@@ -2,13 +2,15 @@ import React from 'react';
 import BaseKYCWall from './BaseKYCWall';
 import {defaultProps, propTypes} from './kycWallPropTypes';
 
-function KYCWall(props) {
+function KYCWall({children, ...props}) {
     return (
         <BaseKYCWall
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             shouldListenForResize
-        />
+        >
+            {children}
+        </BaseKYCWall>
     );
 }
 

src/components/Modal/index.android.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {AppState} from 'react-native';
-import withWindowDimensions from '@components/withWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
@@ -28,4 +27,4 @@ function Modal({useNativeDriver = true, ...rest}: BaseModalProps) {
 }
 
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default Modal;

src/components/Modal/index.ios.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import withWindowDimensions from '@components/withWindowDimensions';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
 
@@ -15,4 +14,4 @@ function Modal({children, ...rest}: BaseModalProps) {
 }
 
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default Modal;

src/components/Modal/index.tsx

@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import withWindowDimensions from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import StatusBar from '@libs/StatusBar';
@@ -55,4 +54,4 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
 }
 
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default Modal;

src/components/Modal/types.ts

@@ -1,7 +1,6 @@
 import type {ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
 import type {ValueOf} from 'type-fest';
-import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import type CONST from '@src/CONST';
 
 type PopoverAnchorPosition = {
@@ -11,57 +10,56 @@ type PopoverAnchorPosition = {
     left?: number;
 };
 
-type BaseModalProps = WindowDimensionsProps &
-    Partial<ModalProps> & {
-        /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
-        fullscreen?: boolean;
+type BaseModalProps = Partial<ModalProps> & {
+    /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
+    fullscreen?: boolean;
 
-        /** Should we close modal on outside click */
-        shouldCloseOnOutsideClick?: boolean;
+    /** Should we close modal on outside click */
+    shouldCloseOnOutsideClick?: boolean;
 
-        /** Should we announce the Modal visibility changes? */
-        shouldSetModalVisibility?: boolean;
+    /** Should we announce the Modal visibility changes? */
+    shouldSetModalVisibility?: boolean;
 
-        /** Callback method fired when the user requests to close the modal */
-        onClose: (ref?: React.RefObject<HTMLElement>) => void;
+    /** Callback method fired when the user requests to close the modal */
+    onClose: (ref?: React.RefObject<HTMLElement>) => void;
 
-        /** State that determines whether to display the modal or not */
-        isVisible: boolean;
+    /** State that determines whether to display the modal or not */
+    isVisible: boolean;
 
-        /** Callback method fired when the user requests to submit the modal content. */
-        onSubmit?: () => void;
+    /** Callback method fired when the user requests to submit the modal content. */
+    onSubmit?: () => void;
 
-        /** Callback method fired when the modal is hidden */
-        onModalHide?: () => void;
+    /** Callback method fired when the modal is hidden */
+    onModalHide?: () => void;
 
-        /** Callback method fired when the modal is shown */
-        onModalShow?: () => void;
+    /** Callback method fired when the modal is shown */
+    onModalShow?: () => void;
 
-        /** Style of modal to display */
-        type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
+    /** Style of modal to display */
+    type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
 
-        /** The anchor position of a popover modal. Has no effect on other modal types. */
-        popoverAnchorPosition?: PopoverAnchorPosition;
+    /** The anchor position of a popover modal. Has no effect on other modal types. */
+    popoverAnchorPosition?: PopoverAnchorPosition;
 
-        outerStyle?: ViewStyle;
+    outerStyle?: ViewStyle;
 
-        /** Whether the modal should go under the system statusbar */
-        statusBarTranslucent?: boolean;
+    /** Whether the modal should go under the system statusbar */
+    statusBarTranslucent?: boolean;
 
-        /** Whether the modal should avoid the keyboard */
-        avoidKeyboard?: boolean;
+    /** Whether the modal should avoid the keyboard */
+    avoidKeyboard?: boolean;
 
-        /** Modal container styles  */
-        innerContainerStyle?: ViewStyle;
+    /** Modal container styles  */
+    innerContainerStyle?: ViewStyle;
 
-        /**
-         * Whether the modal should hide its content while animating. On iOS, set to true
-         * if `useNativeDriver` is also true, to avoid flashes in the UI.
-         *
-         * See: https://github.com/react-native-modal/react-native-modal/pull/116
-         * */
-        hideModalContentWhileAnimating?: boolean;
-    };
+    /**
+     * Whether the modal should hide its content while animating. On iOS, set to true
+     * if `useNativeDriver` is also true, to avoid flashes in the UI.
+     *
+     * See: https://github.com/react-native-modal/react-native-modal/pull/116
+     * */
+    hideModalContentWhileAnimating?: boolean;
+};
 
 export default BaseModalProps;
 export type {PopoverAnchorPosition};

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

@@ -1,7 +1,6 @@
 import type {ValueOf} from 'type-fest';
 import type {PopoverAnchorPosition} from '@components/Modal/types';
 import type BaseModalProps from '@components/Modal/types';
-import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import type CONST from '@src/CONST';
 
 type AnchorAlignment = {
@@ -22,16 +21,16 @@ type PopoverProps = BaseModalProps & {
     anchorPosition?: PopoverAnchorPosition;
 
     /** The anchor alignment of the popover */
-    anchorAlignment: AnchorAlignment;
+    anchorAlignment?: AnchorAlignment;
 
     /** The anchor ref of the popover */
-    anchorRef: React.RefObject<HTMLElement>;
+    anchorRef?: React.RefObject<HTMLElement>;
 
     /** Whether disable the animations */
-    disableAnimation: boolean;
+    disableAnimation?: boolean;
 
     /** Whether we don't want to show overlay */
-    withoutOverlay: boolean;
+    withoutOverlay?: boolean;
 
     /** The dimensions of the popover */
     popoverDimensions?: PopoverDimensions;
@@ -46,6 +45,4 @@ type PopoverProps = BaseModalProps & {
     children: React.ReactNode;
 };
 
-type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
-
-export type {PopoverProps, PopoverWithWindowDimensionsProps, AnchorAlignment};
+export type {PopoverProps, AnchorAlignment};

src/components/PopoverProvider/types.ts

@@ -12,7 +12,7 @@ type PopoverContextValue = {
 type AnchorRef = {
     ref: React.RefObject<HTMLElement>;
     close: (anchorRef?: React.RefObject<HTMLElement>) => void;
-    anchorRef: React.RefObject<HTMLElement>;
+    anchorRef?: React.RefObject<HTMLElement>;
     onOpenCallback?: () => void;
     onCloseCallback?: () => void;
 };

src/components/PopoverWithoutOverlay/types.ts

@@ -13,7 +13,7 @@ type PopoverWithoutOverlayProps = ChildrenProps &
         };
 
         /** The anchor ref of the popover */
-        anchorRef: React.RefObject<HTMLElement>;
+        anchorRef?: React.RefObject<HTMLElement>;
 
         /** A react-native-animatable animation timing for the modal display animation */
         animationInTiming?: number;

src/libs/CardUtils.ts

@@ -29,7 +29,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;
@@ -49,7 +52,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/BankAccounts.ts

@@ -50,7 +50,7 @@ function setPlaidEvent(eventName: string) {
 /**
  * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished.
  */
-function openPersonalBankAccountSetupView(exitReportID: string) {
+function openPersonalBankAccountSetupView(exitReportID?: string) {
     clearPlaid().then(() => {
         if (exitReportID) {
             Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID});