[TS migration] Migrate SettingsWallet page to TypeScript

src/ONYXKEYS.ts

@@ -425,7 +425,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM]: FormTypes.IKnowTeacherForm;
     [ONYXKEYS.FORMS.INTRO_SCHOOL_PRINCIPAL_FORM]: FormTypes.IntroSchoolPrincipalForm;
     [ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD]: FormTypes.Form;
-    [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: FormTypes.RequestPhysicalCardForm;
     [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: FormTypes.GetPhysicalCardForm;
     [ONYXKEYS.FORMS.REPORT_FIELD_EDIT_FORM]: FormTypes.ReportFieldEditForm;
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM]: FormTypes.ReimbursementAccountForm;

src/components/AddressSearch/index.tsx

@@ -398,7 +398,7 @@ function AddressSearch(
                                 if (inputID) {
                                     onInputChange?.(text);
                                 } else {
-                                    onInputChange({street: text});
+                                    onInputChange?.({street: text});
                                 }
                                 // If the text is empty and we have no predefined places, we set displayListViewBorder to false to prevent UI flickering
                                 if (!text && !predefinedPlaces.length) {

src/components/AddressSearch/types.ts

@@ -59,7 +59,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 | RenamedInputKeysProps | StreetValue, key?: string) => void;
 
     /** A callback function when an address has been auto-selected */
     onPress?: (props: OnPressProps) => void;
@@ -77,7 +77,7 @@ type AddressSearchProps = {
     predefinedPlaces?: Place[];
 
     /** A map of inputID key names */
-    renamedInputKeys: RenamedInputKeysProps;
+    renamedInputKeys?: RenamedInputKeysProps;
 
     /** Maximum number of characters allowed in search input */
     maxInputLength?: number;

src/components/MagicCodeInput.tsx

@@ -430,3 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
+export type {MagicCodeInputHandle};

src/languages/types.ts

@@ -157,7 +157,7 @@ type EnterMagicCodeParams = {contactMethod: string};
 
 type TransferParams = {amount: string};
 
-type InstantSummaryParams = {rate: number; minAmount: number};
+type InstantSummaryParams = {rate: string; minAmount: string};
 
 type NotYouParams = {user: string};
 

src/libs/API/parameters/index.ts

@@ -35,7 +35,6 @@ export type {default as OpenPublicProfilePageParams} from './OpenPublicProfilePa
 export type {default as OpenReimbursementAccountPageParams} from './OpenReimbursementAccountPageParams';
 export type {default as OpenReportParams} from './OpenReportParams';
 export type {default as OpenRoomMembersPageParams} from './OpenRoomMembersPageParams';
-export type {default as PaymentCardParams} from './PaymentCardParams';
 export type {default as ReconnectAppParams} from './ReconnectAppParams';
 export type {default as ReferTeachersUniteVolunteerParams} from './ReferTeachersUniteVolunteerParams';
 export type {default as ReportVirtualExpensifyCardFraudParams} from './ReportVirtualExpensifyCardFraudParams';

src/libs/Navigation/types.ts

@@ -467,6 +467,7 @@ type PublicScreensParamList = {
         shortLivedAuthToken?: string;
         shortLivedToken?: string;
         exitTo?: Routes | HybridAppRoute;
+        domain?: Routes;
     };
     [SCREENS.VALIDATE_LOGIN]: {
         accountID: string;

src/libs/actions/Card.ts

@@ -178,3 +178,4 @@ function revealVirtualCardDetails(cardID: number): Promise<Response> {
 }
 
 export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, reportVirtualExpensifyCardFraud, revealVirtualCardDetails};
+export type {ReplacementReason};

src/libs/actions/PaymentMethods.ts

@@ -4,14 +4,15 @@ import type {GestureResponderEvent} from 'react-native';
 import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
-import type {AddPaymentCardParams, DeletePaymentCardParams, MakeDefaultPaymentMethodParams, PaymentCardParams, TransferWalletBalanceParams} from '@libs/API/parameters';
+import type {AddPaymentCardParams, DeletePaymentCardParams, MakeDefaultPaymentMethodParams, TransferWalletBalanceParams} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as CardUtils from '@libs/CardUtils';
 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 {AddDebitCardForm} from '@src/types/form';
 import type {BankAccountList, FundList} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type PaymentMethod from '@src/types/onyx/PaymentMethod';
@@ -152,17 +153,17 @@ function makeDefaultPaymentMethod(bankAccountID: number, fundID: number, previou
  * Calls the API to add a new card.
  *
  */
-function addPaymentCard(params: PaymentCardParams) {
-    const cardMonth = CardUtils.getMonthFromExpirationDateString(params.expirationDate);
-    const cardYear = CardUtils.getYearFromExpirationDateString(params.expirationDate);
+function addPaymentCard(params: AddDebitCardForm) {
+    const cardMonth = CardUtils.getMonthFromExpirationDateString(params.expirationDate ?? '');
+    const cardYear = CardUtils.getYearFromExpirationDateString(params.expirationDate ?? '');
 
     const parameters: AddPaymentCardParams = {
-        cardNumber: params.cardNumber,
+        cardNumber: params.cardNumber ?? '',
         cardYear,
         cardMonth,
-        cardCVV: params.securityCode,
-        addressName: params.nameOnCard,
-        addressZip: params.addressZipCode,
+        cardCVV: params.securityCode ?? '',
+        addressName: params.nameOnCard ?? '',
+        addressZip: params.addressZipCode ?? '',
         currency: CONST.CURRENCY.USD,
         isP2PDebitCard: true,
     };

src/pages/settings/Wallet/ActivatePhysicalCardPage.js → src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx

@@ -1,14 +1,14 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import BigNumberPad from '@components/BigNumberPad';
 import Button from '@components/Button';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MagicCodeInput from '@components/MagicCodeInput';
+import type {MagicCodeInputHandle} from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -19,42 +19,32 @@ import * as CardUtils from '@libs/CardUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as CardSettings from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
-import assignedCardPropTypes from './assignedCardPropTypes';
+import type {Card} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-const propTypes = {
-    /* Onyx Props */
-
-    /** The details about the Expensify cards */
-    cardList: PropTypes.objectOf(assignedCardPropTypes),
-
-    /** Navigation route context info provided by react navigation */
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            /** domain passed via route /settings/wallet/card/:domain */
-            domain: PropTypes.string,
-        }),
-    }).isRequired,
+type ActivatePhysicalCardPageOnyxProps = {
+    /** Card list propTypes */
+    cardList: OnyxEntry<Record<string, Card>>;
 };
 
-const defaultProps = {
-    cardList: {},
-};
+type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;
 
 const LAST_FOUR_DIGITS_LENGTH = 4;
 const MAGIC_INPUT_MIN_HEIGHT = 86;
 
 function ActivatePhysicalCardPage({
-    cardList,
+    cardList = {},
     route: {
-        params: {domain},
+        params: {domain = ''},
     },
-}) {
+}: ActivatePhysicalCardPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isExtraSmallScreenHeight} = useWindowDimensions();
@@ -65,23 +55,24 @@ function ActivatePhysicalCardPage({
     const [lastFourDigits, setLastFourDigits] = useState('');
     const [lastPressedDigit, setLastPressedDigit] = useState('');
 
-    const domainCards = CardUtils.getDomainCards(cardList)[domain];
-    const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
-    const cardID = lodashGet(physicalCard, 'cardID', 0);
-    const cardError = ErrorUtils.getLatestErrorMessage(physicalCard);
+    const domainCards = CardUtils.getDomainCards(cardList ?? {})[domain];
+    const physicalCard = domainCards.find((card) => !card.isVirtual);
+    const cardID = physicalCard?.cardID ?? 0;
+    const cardError = ErrorUtils.getLatestErrorMessage(physicalCard ?? {});
 
-    const activateCardCodeInputRef = useRef(null);
+    const activateCardCodeInputRef = useRef<MagicCodeInputHandle>(null);
 
     /**
      * If state of the card is CONST.EXPENSIFY_CARD.STATE.OPEN, navigate to card details screen.
      */
     useEffect(() => {
-        if (physicalCard.isLoading || lodashGet(cardList, `${cardID}.state`, 0) !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (physicalCard?.isLoading || cardList?.[cardID]?.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
             return;
         }
 
         Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
-    }, [cardID, cardList, domain, physicalCard.isLoading]);
+    }, [cardID, cardList, domain, physicalCard?.isLoading]);
 
     useEffect(
         () => () => {
@@ -95,17 +86,13 @@ function ActivatePhysicalCardPage({
      *
      * NOTE: If the same digit is pressed twice in a row, append it to the end of the string
      * so that useEffect inside MagicCodeInput will be triggered by artificial change of the value.
-     *
-     * @param {String} key
      */
-    const updateLastPressedDigit = useCallback((key) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);
+    const updateLastPressedDigit = useCallback((key: string) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);
 
     /**
      * Handle card activation code input
-     *
-     * @param {String} text
      */
-    const onCodeInput = (text) => {
+    const onCodeInput = (text: string) => {
         setFormError('');
 
         if (cardError) {
@@ -116,7 +103,7 @@ function ActivatePhysicalCardPage({
     };
 
     const submitAndNavigateToNextPage = useCallback(() => {
-        activateCardCodeInputRef.current.blur();
+        activateCardCodeInputRef.current?.blur();
 
         if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) {
             setFormError('activateCardPage.error.thatDidntMatch');
@@ -126,7 +113,7 @@ function ActivatePhysicalCardPage({
         CardSettings.activatePhysicalExpensifyCard(lastFourDigits, cardID);
     }, [lastFourDigits, cardID]);
 
-    if (_.isEmpty(physicalCard)) {
+    if (isEmptyObject(physicalCard)) {
         return <NotFoundPage />;
     }
 
@@ -161,7 +148,7 @@ function ActivatePhysicalCardPage({
             <Button
                 success
                 isDisabled={isOffline}
-                isLoading={physicalCard.isLoading}
+                isLoading={physicalCard?.isLoading}
                 medium={isExtraSmallScreenHeight}
                 style={[styles.w100, styles.p5, styles.mtAuto]}
                 onPress={submitAndNavigateToNextPage}
@@ -172,11 +159,9 @@ function ActivatePhysicalCardPage({
     );
 }
 
-ActivatePhysicalCardPage.propTypes = propTypes;
-ActivatePhysicalCardPage.defaultProps = defaultProps;
 ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage';
 
-export default withOnyx({
+export default withOnyx<ActivatePhysicalCardPageProps, ActivatePhysicalCardPageOnyxProps>({
     cardList: {
         key: ONYXKEYS.CARD_LIST,
     },

src/pages/settings/Wallet/AddDebitCardPage.js → src/pages/settings/Wallet/AddDebitCardPage.tsx

@@ -1,12 +1,14 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import AddressSearch from '@components/AddressSearch';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import StatePicker from '@components/StatePicker';
 import Text from '@components/Text';
@@ -20,26 +22,31 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {AddDebitCardForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/AddDebitCardForm';
 
-const propTypes = {
-    /* Onyx Props */
-    formData: PropTypes.shape({
-        setupComplete: PropTypes.bool,
-    }),
+type DebitCardPageOnyxProps = {
+    /** Form data propTypes */
+    formData: OnyxEntry<AddDebitCardForm>;
 };
 
-const defaultProps = {
-    formData: {
-        setupComplete: false,
-    },
-};
+type DebitCardPageProps = DebitCardPageOnyxProps;
+
+const REQUIRED_FIELDS = [
+    INPUT_IDS.NAME_ON_CARD,
+    INPUT_IDS.CARD_NUMBER,
+    INPUT_IDS.EXPIRATION_DATE,
+    INPUT_IDS.SECURITY_CODE,
+    INPUT_IDS.ADDRESS_STREET,
+    INPUT_IDS.ADDRESS_ZIP_CODE,
+    INPUT_IDS.ADDRESS_STATE,
+];
 
-function DebitCardPage(props) {
+function DebitCardPage({formData}: DebitCardPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const prevFormDataSetupComplete = usePrevious(props.formData.setupComplete);
-    const nameOnCardRef = useRef(null);
+    const prevFormDataSetupComplete = usePrevious(!!formData?.setupComplete);
+    const nameOnCardRef = useRef<AnimatedTextInputRef>(null);
 
     /**
      * Reset the form values on the mount and unmount so that old errors don't show when this form is displayed again.
@@ -53,20 +60,18 @@ function DebitCardPage(props) {
     }, []);
 
     useEffect(() => {
-        if (prevFormDataSetupComplete || !props.formData.setupComplete) {
+        if (prevFormDataSetupComplete || !formData?.setupComplete) {
             return;
         }
 
         PaymentMethods.continueSetup();
-    }, [prevFormDataSetupComplete, props.formData.setupComplete]);
+    }, [prevFormDataSetupComplete, formData?.setupComplete]);
 
     /**
-     * @param {Object} values - form input values passed by the Form component
-     * @returns {Boolean}
+     * @param values - form input values passed by the Form component
      */
-    const validate = (values) => {
-        const requiredFields = ['nameOnCard', 'cardNumber', 'expirationDate', 'securityCode', 'addressStreet', 'addressZipCode', 'addressState'];
-        const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM> => {
+        const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
 
         if (values.nameOnCard && !ValidationUtils.isValidLegalName(values.nameOnCard)) {
             errors.nameOnCard = 'addDebitCardPage.error.invalidName';
@@ -101,7 +106,7 @@ function DebitCardPage(props) {
 
     return (
         <ScreenWrapper
-            onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
+            onEntryTransitionEnd={() => nameOnCardRef.current?.focus()}
             includeSafeAreaPaddingBottom={false}
             testID={DebitCardPage.displayName}
         >
@@ -206,11 +211,9 @@ function DebitCardPage(props) {
     );
 }
 
-DebitCardPage.propTypes = propTypes;
-DebitCardPage.defaultProps = defaultProps;
 DebitCardPage.displayName = 'DebitCardPage';
 
-export default withOnyx({
+export default withOnyx<DebitCardPageProps, DebitCardPageOnyxProps>({
     formData: {
         key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM,
     },