Merge pull request #39539 from Expensify/revert-38990-ts-migration/wi…

…thFullTransactionOrNotFound-hoc

Revert "[TS migration] Migrate withFullTransactionOrNotFound HOC to TypeScript"

src/pages/iou/MoneyRequestWaypointPage.tsx

@@ -15,6 +15,7 @@ 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,29 +233,31 @@ function IOURequestStepWaypoint({
 
 IOURequestStepWaypoint.displayName = 'IOURequestStepWaypoint';
 
-export default withWritableReportOrNotFound(
-    withFullTransactionOrNotFound(
-        withOnyx<IOURequestStepWaypointProps, IOURequestStepWaypointOnyxProps>({
-            userLocation: {
-                key: ONYXKEYS.USER_LOCATION,
-            },
-            recentWaypoints: {
-                key: ONYXKEYS.NVP_RECENT_WAYPOINTS,
+// eslint-disable-next-line rulesdir/no-negated-variables
+const IOURequestStepWaypointWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepWaypoint);
+// eslint-disable-next-line rulesdir/no-negated-variables
+const IOURequestStepWaypointWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepWaypointWithWritableReportOrNotFound);
 
-                // 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),
-    ),
-);
+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);

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

@@ -0,0 +1,78 @@
+import {useIsFocused} from '@react-navigation/native';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import transactionPropTypes from '@components/transactionPropTypes';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
+
+const propTypes = {
+    /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component.
+     * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */
+    forwardedRef: PropTypes.func,
+
+    /** The report corresponding to the reportID in the route params */
+    transaction: transactionPropTypes,
+
+    route: IOURequestStepRoutePropTypes.isRequired,
+};
+
+const defaultProps = {
+    forwardedRef: () => {},
+    transaction: {},
+};
+
+export default function (WrappedComponent) {
+    // eslint-disable-next-line rulesdir/no-negated-variables
+    function WithFullTransactionOrNotFound({forwardedRef, ...props}) {
+        const {
+            transaction: {transactionID},
+        } = props;
+
+        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={forwardedRef}
+            />
+        );
+    }
+
+    WithFullTransactionOrNotFound.propTypes = propTypes;
+    WithFullTransactionOrNotFound.defaultProps = defaultProps;
+    WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
+
+    // eslint-disable-next-line rulesdir/no-negated-variables
+    const WithFullTransactionOrNotFoundWithRef = React.forwardRef((props, ref) => (
+        <WithFullTransactionOrNotFound
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            forwardedRef={ref}
+        />
+    ));
+
+    WithFullTransactionOrNotFoundWithRef.displayName = 'WithFullTransactionOrNotFoundWithRef';
+
+    return withOnyx({
+        transaction: {
+            key: ({route}) => {
+                const transactionID = lodashGet(route, 'params.transactionID', 0);
+                const userAction = lodashGet(route, 'params.action', CONST.IOU.ACTION.CREATE);
+                return `${userAction === CONST.IOU.ACTION.CREATE ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
+            },
+        },
+    })(WithFullTransactionOrNotFoundWithRef);
+}