[TS migration] Migrate withFullTransactionOrNotFound HOC

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

@@ -0,0 +1,56 @@
+import {useIsFocused} from '@react-navigation/native';
+import type {StackScreenProps} from '@react-navigation/stack';
+import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import React, {forwardRef} from 'react';
+import type {OnyxCollection, 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 = {
+    /** Indicated whether the report data is loading */
+    transaction: OnyxCollection<Transaction>;
+};
+
+type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & StackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.STEP_DATE>;
+
+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.route.params.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;
+                return `${userAction === CONST.IOU.ACTION.CREATE ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
+            },
+        },
+    })(forwardRef(WithFullTransactionOrNotFound));
+}