[TS migration] Migrate SettingsWallet page to TypeScript

src/ONYXKEYS.ts

@@ -526,8 +526,8 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form | undefined;
+    [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: OnyxTypes.GetPhysicalCardForm;
+    [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.GetPhysicalCardForm | undefined;
 };
 
 type OnyxKeyValue<TOnyxKey extends (OnyxKey | OnyxCollectionKey) & keyof OnyxValues> = OnyxEntry<OnyxValues[TOnyxKey]>;

src/components/BigNumberPad.tsx

@@ -17,7 +17,7 @@ type BigNumberPadProps = {
     id?: string;
 
     /** Whether long press is disabled */
-    isLongPressDisabled: boolean;
+    isLongPressDisabled?: boolean;
 };
 
 const padNumbers = [

src/languages/types.ts

@@ -155,7 +155,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/GetPhysicalCardUtils.ts

@@ -5,22 +5,22 @@ import * as PersonalDetailsUtils from './PersonalDetailsUtils';
 import * as UserUtils from './UserUtils';
 
 type DraftValues = {
-    addressLine1: string;
-    addressLine2: string;
-    city: string;
-    country: string;
-    legalFirstName: string;
-    legalLastName: string;
-    phoneNumber: string;
-    state: string;
-    zipPostCode: string;
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    country?: string;
+    legalFirstName?: string;
+    legalLastName?: string;
+    phoneNumber?: string;
+    state?: string;
+    zipPostCode?: string;
 };
 
 type PrivatePersonalDetails = {
-    address: {street: string; city: string; state: string; country: string; zip: string};
-    legalFirstName: string;
-    legalLastName: string;
-    phoneNumber: string;
+    address?: {street: string; city: string; state: string; country: string; zip: string};
+    legalFirstName?: string;
+    legalLastName?: string;
+    phoneNumber?: string;
 };
 
 type LoginList = Record<string, Login>;
@@ -33,12 +33,7 @@ type LoginList = Record<string, Login>;
  * @returns
  */
 function getCurrentRoute(domain: string, privatePersonalDetails: PrivatePersonalDetails, loginList: LoginList) {
-    const {
-        address: {street, city, state, country, zip},
-        legalFirstName,
-        legalLastName,
-        phoneNumber,
-    } = privatePersonalDetails;
+    const {address: {city, country, state, street, zip} = {}, legalFirstName, legalLastName, phoneNumber} = privatePersonalDetails;
 
     if (!legalFirstName && !legalLastName) {
         return ROUTES.SETTINGS_WALLET_CARD_GET_PHYSICAL_NAME.getRoute(domain);
@@ -91,23 +86,18 @@ function setCurrentRoute(currentRoute: string, domain: string, privatePersonalDe
  * @returns
  */
 function getUpdatedDraftValues(draftValues: DraftValues, privatePersonalDetails: PrivatePersonalDetails, loginList: LoginList) {
-    const {
-        address: {city, country, state, street = '', zip},
-        legalFirstName,
-        legalLastName,
-        phoneNumber,
-    } = privatePersonalDetails;
+    const {address: {city, country, state, street, zip} = {}, legalFirstName, legalLastName, phoneNumber} = privatePersonalDetails;
 
     return {
-        legalFirstName: draftValues.legalFirstName || legalFirstName,
-        legalLastName: draftValues.legalLastName || legalLastName,
-        addressLine1: draftValues.addressLine1 || street.split('\n')[0],
-        addressLine2: draftValues.addressLine2 || street.split('\n')[1] || '',
-        city: draftValues.city || city,
-        country: draftValues.country || country,
-        phoneNumber: draftValues.phoneNumber || (phoneNumber ?? UserUtils.getSecondaryPhoneLogin(loginList) ?? ''),
-        state: draftValues.state || state,
-        zipPostCode: draftValues.zipPostCode || zip,
+        legalFirstName: draftValues.legalFirstName ?? legalFirstName,
+        legalLastName: draftValues.legalLastName ?? legalLastName,
+        addressLine1: draftValues.addressLine1 ?? street?.split('\n')[0] ?? '',
+        addressLine2: draftValues.addressLine2 ?? street?.split('\n')[1] ?? '',
+        city: draftValues.city ?? city,
+        country: draftValues.country ?? country,
+        phoneNumber: draftValues.phoneNumber ?? phoneNumber ?? UserUtils.getSecondaryPhoneLogin(loginList) ?? '',
+        state: draftValues.state ?? state,
+        zipPostCode: draftValues.zipPostCode ?? zip,
     };
 }
 
@@ -117,7 +107,7 @@ function getUpdatedDraftValues(draftValues: DraftValues, privatePersonalDetails:
  * @returns
  */
 function getUpdatedPrivatePersonalDetails(draftValues: DraftValues): PrivatePersonalDetails {
-    const {addressLine1, addressLine2, city, country, legalFirstName, legalLastName, phoneNumber, state, zipPostCode} = draftValues;
+    const {addressLine1, addressLine2, city = '', country = '', legalFirstName, legalLastName, phoneNumber, state = '', zipPostCode = ''} = draftValues;
     return {
         legalFirstName,
         legalLastName,

src/libs/Navigation/types.ts

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

src/libs/actions/Card.ts

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

src/libs/actions/Wallet.ts

@@ -286,12 +286,7 @@ function answerQuestionsForWallet(answers: WalletQuestionAnswer[], idNumber: str
 }
 
 function requestPhysicalExpensifyCard(cardID: number, authToken: string, privatePersonalDetails: PrivatePersonalDetails) {
-    const {
-        legalFirstName,
-        legalLastName,
-        phoneNumber,
-        address: {city, country, state, street, zip},
-    } = privatePersonalDetails;
+    const {legalFirstName = '', legalLastName = '', phoneNumber = '', address: {city = '', country = '', state = '', street = '', zip = ''} = {}} = privatePersonalDetails;
 
     type RequestPhysicalExpensifyCardParams = {
         authToken: string;

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

@@ -1,9 +1,8 @@
-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';
@@ -19,42 +18,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 +54,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);
 
     /**
      * 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 && 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 +85,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 +102,8 @@ function ActivatePhysicalCardPage({
     };
 
     const submitAndNavigateToNextPage = useCallback(() => {
-        activateCardCodeInputRef.current.blur();
+        // @ts-expect-error TODO: Remove this once MagicCodeInput (https://github.com/Expensify/App/issues/25078) is migrated to TypeScript.
+        activateCardCodeInputRef.current?.blur();
 
         if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) {
             setFormError(translate('activateCardPage.error.thatDidntMatch'));
@@ -126,7 +113,7 @@ function ActivatePhysicalCardPage({
         CardSettings.activatePhysicalExpensifyCard(lastFourDigits, cardID);
     }, [lastFourDigits, cardID, translate]);
 
-    if (_.isEmpty(physicalCard)) {
+    if (isEmptyObject(physicalCard)) {
         return <NotFoundPage />;
     }
 
@@ -142,6 +129,7 @@ function ActivatePhysicalCardPage({
             <Text style={[styles.mh5, styles.textHeadline]}>{translate('activateCardPage.pleaseEnterLastFour')}</Text>
             <View style={[styles.mh5, {minHeight: MAGIC_INPUT_MIN_HEIGHT}]}>
                 <MagicCodeInput
+                    // @ts-expect-error TODO: Remove this once MagicCodeInput (https://github.com/Expensify/App/issues/25078) is migrated to TypeScript.
                     isDisableKeyboard
                     autoComplete="off"
                     maxLength={LAST_FOUR_DIGITS_LENGTH}
@@ -160,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}
@@ -171,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,
     },