Merge pull request #38990 from ruben-rebelo/ts-migration/withFullTran…

…sactionOrNotFound-hoc

[TS migration] Migrate withFullTransactionOrNotFound HOC to TypeScript

src/pages/iou/MoneyRequestWaypointPage.tsx

@@ -15,7 +15,6 @@ type MoneyRequestWaypointPageProps = StackScreenProps<MoneyRequestNavigatorParam
 // 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}: MoneyRequestWaypointPageProps) {
     return (
-        // @ts-expect-error TODO: Remove this once withFullTransactionOrNotFound(https://github.com/Expensify/App/issues/36123) 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.

src/pages/iou/request/step/IOURequestStepWaypoint.tsx

@@ -233,31 +233,29 @@ function IOURequestStepWaypoint({
 
 IOURequestStepWaypoint.displayName = 'IOURequestStepWaypoint';
 
-// eslint-disable-next-line rulesdir/no-negated-variables
-const IOURequestStepWaypointWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepWaypoint);
-// eslint-disable-next-line rulesdir/no-negated-variables
-const IOURequestStepWaypointWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepWaypointWithWritableReportOrNotFound);
+export default withWritableReportOrNotFound(
+    withFullTransactionOrNotFound(
+        withOnyx<IOURequestStepWaypointProps, IOURequestStepWaypointOnyxProps>({
+            userLocation: {
+                key: ONYXKEYS.USER_LOCATION,
+            },
+            recentWaypoints: {
+                key: ONYXKEYS.NVP_RECENT_WAYPOINTS,
 
-export default withOnyx<IOURequestStepWaypointProps, IOURequestStepWaypointOnyxProps>({
-    userLocation: {
-        key: ONYXKEYS.USER_LOCATION,
-    },
-    recentWaypoints: {
-        key: ONYXKEYS.NVP_RECENT_WAYPOINTS,
-
-        // Only grab the most recent 5 waypoints because that's all that is shown in the UI. This also puts them into the format of data
-        // that the google autocomplete component expects for it's "predefined places" feature.
-        selector: (waypoints) =>
-            (waypoints ? waypoints.slice(0, 5) : []).map((waypoint) => ({
-                name: waypoint.name,
-                description: waypoint.address ?? '',
-                geometry: {
-                    location: {
-                        lat: waypoint.lat ?? 0,
-                        lng: waypoint.lng ?? 0,
-                    },
-                },
-            })),
-    },
-    // @ts-expect-error TODO: Remove this once withFullTransactionOrNotFound (https://github.com/Expensify/App/issues/36123) is migrated to TypeScript.
-})(IOURequestStepWaypointWithFullTransactionOrNotFound);
+                // Only grab the most recent 5 waypoints because that's all that is shown in the UI. This also puts them into the format of data
+                // that the google autocomplete component expects for it's "predefined places" feature.
+                selector: (waypoints) =>
+                    (waypoints ? waypoints.slice(0, 5) : []).map((waypoint) => ({
+                        name: waypoint.name,
+                        description: waypoint.address ?? '',
+                        geometry: {
+                            location: {
+                                lat: waypoint.lat ?? 0,
+                                lng: waypoint.lng ?? 0,
+                            },
+                        },
+                    })),
+            },
+        })(IOURequestStepWaypoint),
+    ),
+);

src/pages/iou/request/step/withFullTransactionOrNotFound.tsx

@@ -0,0 +1,64 @@
+import type {RouteProp} from '@react-navigation/native';
+import {useIsFocused} from '@react-navigation/native';
+import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import React, {forwardRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type {Transaction} from '@src/types/onyx';
+
+type WithFullTransactionOrNotFoundOnyxProps = {
+    /** Indicates whether the report data is loading */
+    transaction: OnyxEntry<Transaction>;
+};
+
+type Route = RouteProp<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT>;
+
+type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & {route: Route};
+
+export default function <TProps extends WithFullTransactionOrNotFoundProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
+    // eslint-disable-next-line rulesdir/no-negated-variables
+    function WithFullTransactionOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
+        const transactionID = props.transaction?.transactionID;
+
+        const isFocused = useIsFocused();
+
+        // If the transaction does not have a transactionID, then the transaction no longer exists in Onyx as a full transaction and the not-found page should be shown.
+        // In addition, the not-found page should be shown only if the component screen's route is active (i.e. is focused).
+        // This is to prevent it from showing when the modal is being dismissed while navigating to a different route (e.g. on requesting money).
+        if (!transactionID) {
+            return <FullPageNotFoundView shouldShow={isFocused} />;
+        }
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={ref}
+            />
+        );
+    }
+
+    WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
+
+    return withOnyx<TProps & RefAttributes<TRef>, WithFullTransactionOrNotFoundOnyxProps>({
+        transaction: {
+            key: ({route}) => {
+                const transactionID = route.params.transactionID ?? 0;
+                const userAction = route.params.action ?? CONST.IOU.ACTION.CREATE;
+
+                if (userAction === CONST.IOU.ACTION.CREATE) {
+                    return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`;
+                }
+                return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
+            },
+        },
+    })(forwardRef(WithFullTransactionOrNotFound));
+}
+
+export type {WithFullTransactionOrNotFoundProps};