[TS migration] Migrate 'IOUWaypoint' page to TypeScript

src/ROUTES.ts

@@ -494,4 +494,4 @@ type RouteIsPlainString = IsEqual<AllRoutes, string>;
  */
 type Route = RouteIsPlainString extends true ? never : AllRoutes;
 
-export type {Route};
+export type {Route, AllRoutes};

src/hooks/useLocationBias.ts

@@ -1,9 +1,12 @@
 import {useMemo} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Location} from '@pages/iou/request/step/IOURequestStepWaypoint';
+import type {UserLocation} from '@src/types/onyx';
 
 /**
  * Construct the rectangular boundary based on user location and waypoints
  */
-export default function useLocationBias(allWaypoints: Record<string, {lng?: number; lat?: number}>, userLocation?: {latitude: number; longitude: number}) {
+export default function useLocationBias(allWaypoints: Record<string, Location>, userLocation?: OnyxEntry<UserLocation>) {
     return useMemo(() => {
         const hasFilledWaypointCount = Object.values(allWaypoints).some((waypoint) => Object.keys(waypoint).length > 0);
         // If there are no filled wayPoints and if user's current location cannot be retrieved,
@@ -29,8 +32,8 @@ export default function useLocationBias(allWaypoints: Record<string, {lng?: numb
         // When no filled waypoints are available but the current location of the user is available,
         // let us consider the current user's location to construct a rectangular bound
         if (!hasFilledWaypointCount && userLocation !== undefined) {
-            longitudes.push(userLocation.longitude);
-            latitudes.push(userLocation.latitude);
+            longitudes.push(userLocation?.longitude ?? 0);
+            latitudes.push(userLocation?.latitude ?? 0);
         }
 
         // Extend the rectangular bound by 0.5 degree (roughly around 25-30 miles in US)

src/libs/ErrorUtils.ts

@@ -120,3 +120,4 @@ function addErrorMessage<TKey extends TranslationPaths>(errors: ErrorsList, inpu
 }
 
 export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getMicroSecondOnyxErrorObject, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage};
+export type {ErrorsList};

src/libs/Navigation/types.ts

@@ -227,6 +227,13 @@ type MoneyRequestNavigatorParamList = {
         reportID: string;
         backTo: string;
     };
+    [SCREENS.MONEY_REQUEST.STEP_WAYPOINT]: {
+        iouType: ValueOf<typeof CONST.IOU.TYPE>;
+        reportID: string;
+        backTo: Routes | undefined;
+        action: ValueOf<typeof CONST.IOU.ACTION>;
+        pageIndex: string;
+    };
     [SCREENS.MONEY_REQUEST.MERCHANT]: {
         iouType: string;
         reportID: string;

src/libs/actions/Transaction.ts

@@ -1,6 +1,7 @@
 import {isEqual} from 'lodash';
 import lodashClone from 'lodash/clone';
 import lodashHas from 'lodash/has';
+import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
 import * as CollectionUtils from '@libs/CollectionUtils';
@@ -100,7 +101,10 @@ function saveWaypoint(transactionID: string, index: string, waypoint: RecentWayp
     }
 }
 
-function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft: boolean) {
+function removeWaypoint(transaction: OnyxEntry<Transaction>, currentIndex: string, isDraft?: boolean) {
+    if (!transaction) {
+        return;
+    }
     // Index comes from the route params and is a string
     const index = Number(currentIndex);
     const existingWaypoints = transaction?.comment?.waypoints ?? {};
@@ -128,9 +132,10 @@ function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft:
     // to remove nested keys while also preserving other object keys
     // Doing a deep clone of the transaction to avoid mutating the original object and running into a cache issue when using Onyx.set
     let newTransaction: Transaction = {
+        // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
         ...transaction,
         comment: {
-            ...transaction.comment,
+            ...transaction?.comment,
             waypoints: reIndexedWaypoints,
         },
         amount: CONST.IOU.DEFAULT_AMOUNT,
@@ -155,10 +160,10 @@ function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft:
         };
     }
     if (isDraft) {
-        Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction.transactionID}`, newTransaction);
+        Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction?.transactionID}`, newTransaction);
         return;
     }
-    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`, newTransaction);
+    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transaction?.transactionID}`, newTransaction);
 }
 
 function getOnyxDataForRouteRequest(transactionID: string, isDraft = false): OnyxData {

src/pages/iou/MoneyRequestWaypointPage.js → src/pages/iou/MoneyRequestWaypointPage.tsx

@@ -1,39 +1,21 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
 import IOURequestStepWaypoint from './request/step/IOURequestStepWaypoint';
 
-const propTypes = {
-    /** The transactionID of this request */
-    transactionID: PropTypes.string,
-
-    /** Route params */
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            /** IOU type */
-            iouType: PropTypes.string,
-
-            /** Index of the waypoint being edited */
-            waypointIndex: PropTypes.string,
-        }),
-    }),
-};
-
-const defaultProps = {
-    transactionID: '',
-    route: {
-        params: {
-            iouType: '',
-            waypointIndex: '',
-        },
-    },
+type MoneyRequestWaypointPageOnyxProps = {
+    transactionID: string | undefined;
 };
+type MoneyRequestWaypointPageProps = StackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT> & MoneyRequestWaypointPageOnyxProps;
 
 // This component is responsible for grabbing the transactionID from the IOU key
 // You can't use Onyx props in the withOnyx mapping, so we need to set up and access the transactionID here, and then pass it down so that WaypointEditor can subscribe to the transaction.
-function MoneyRequestWaypointPage({transactionID, route}) {
+function MoneyRequestWaypointPage({transactionID = '', route}: MoneyRequestWaypointPageProps) {
     return (
+        // @ts-expect-error TODO: Remove this once withFullTransactionOrNotFound  is migrated to TypeScript.
         <IOURequestStepWaypoint
             // Put the transactionID into the route params so that WaypointEdit behaves the same when creating a new waypoint
             // or editing an existing waypoint.
@@ -48,8 +30,7 @@ function MoneyRequestWaypointPage({transactionID, route}) {
 }
 
 MoneyRequestWaypointPage.displayName = 'MoneyRequestWaypointPage';
-MoneyRequestWaypointPage.propTypes = propTypes;
-MoneyRequestWaypointPage.defaultProps = defaultProps;
-export default withOnyx({
-    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => iou && iou.transactionID},
+
+export default withOnyx<MoneyRequestWaypointPageProps, MoneyRequestWaypointPageOnyxProps>({
+    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => iou?.transactionID},
 })(MoneyRequestWaypointPage);