Merge branch 'Expensify:main' into knip-audit-export-1

Author: shubham1206agra

src/components/Hoverable/ActiveHoverable.tsx

@@ -1,7 +1,7 @@
 import {cloneElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {DeviceEventEmitter} from 'react-native';
+import getReturnValue from '@libs/getReturnValue';
 import mergeRefs from '@libs/mergeRefs';
-import {getReturnValue} from '@libs/ValueUtils';
 import CONST from '@src/CONST';
 import type HoverableProps from './types';
 

src/components/Hoverable/index.tsx

@@ -1,7 +1,7 @@
 import React, {cloneElement} from 'react';
 import {hasHoverSupport} from '@libs/DeviceCapabilities';
+import getReturnValue from '@libs/getReturnValue';
 import mergeRefs from '@libs/mergeRefs';
-import {getReturnValue} from '@libs/ValueUtils';
 import ActiveHoverable from './ActiveHoverable';
 import type HoverableProps from './types';
 

src/components/ReportActionItem/TripRoomPreview.tsx

@@ -206,7 +206,8 @@ function TripRoomPreview({
                         {reservationsData.length > 0 && (
                             <FlatList
                                 data={reservationsData}
-                                style={[styles.gap4, styles.border, styles.borderRadiusComponentLarge, styles.p4]}
+                                style={[styles.border, styles.borderRadiusComponentLarge, styles.p4, styles.flexGrow0]}
+                                contentContainerStyle={styles.gap4}
                                 renderItem={renderItem}
                             />
                         )}

src/hooks/useBeforeRemove.tsx

@@ -3,16 +3,13 @@ import type {EventListenerCallback, EventMapCore, NavigationState} from '@react-
 import {useEffect} from 'react';
 
 // beforeRemove have some limitations. When the react-navigation is upgraded to 7.x, update this to use usePreventRemove hook.
-const useBeforeRemove = (onBeforeRemove: EventListenerCallback<EventMapCore<NavigationState>, 'beforeRemove'>, isEnabled = true) => {
+const useBeforeRemove = (onBeforeRemove: EventListenerCallback<EventMapCore<NavigationState>, 'beforeRemove'>) => {
     const navigation = useNavigation();
 
     useEffect(() => {
-        if (!isEnabled) {
-            return undefined;
-        }
         const unsubscribe = navigation.addListener('beforeRemove', onBeforeRemove);
         return unsubscribe;
-    }, [navigation, onBeforeRemove, isEnabled]);
+    }, [navigation, onBeforeRemove]);
 };
 
 export default useBeforeRemove;

src/hooks/useDiscardChangesConfirmation/index.native.ts

@@ -1,20 +1,20 @@
 import type {NavigationAction} from '@react-navigation/native';
-import {useIsFocused, usePreventRemove} from '@react-navigation/native';
+import {usePreventRemove} from '@react-navigation/native';
 import {useCallback, useRef, useState} from 'react';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useLocalize from '@hooks/useLocalize';
+import Log from '@libs/Log';
 import navigationRef from '@libs/Navigation/navigationRef';
 import type UseDiscardChangesConfirmationOptions from './types';
 
-function useDiscardChangesConfirmation({getHasUnsavedChanges, onVisibilityChange, isEnabled = true}: UseDiscardChangesConfirmationOptions) {
+function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibilityChange, onConfirm}: UseDiscardChangesConfirmationOptions) {
     const {translate} = useLocalize();
-    const isFocused = useIsFocused();
     const {showConfirmModal} = useConfirmModal();
     const [shouldAllowNavigation, setShouldAllowNavigation] = useState(false);
     const blockedNavigationAction = useRef<NavigationAction | undefined>(undefined);
 
-    const shouldPrevent = isEnabled && isFocused && !shouldAllowNavigation;
+    const shouldPrevent = !shouldAllowNavigation;
 
     usePreventRemove(
         shouldPrevent,
@@ -36,18 +36,28 @@ function useDiscardChangesConfirmation({getHasUnsavedChanges, onVisibilityChange
                 }).then((result) => {
                     onVisibilityChange?.(false);
                     if (result.action !== ModalActions.CONFIRM) {
+                        onCancel?.();
                         return;
                     }
-                    setShouldAllowNavigation(true);
-                    if (blockedNavigationAction.current) {
-                        navigationRef.current?.dispatch(blockedNavigationAction.current);
-                        blockedNavigationAction.current = undefined;
-                    } else {
-                        navigationRef.current?.goBack();
-                    }
+                    const confirmNavigation = () => {
+                        setShouldAllowNavigation(true);
+                        if (blockedNavigationAction.current) {
+                            navigationRef.current?.dispatch(blockedNavigationAction.current);
+                            blockedNavigationAction.current = undefined;
+                        } else {
+                            navigationRef.current?.goBack();
+                        }
+                    };
+                    Promise.resolve()
+                        .then(() => onConfirm?.())
+                        .then(confirmNavigation)
+                        .catch((error: unknown) => {
+                            Log.warn('[useDiscardChangesConfirmation] Failed to run onConfirm callback', {error});
+                            blockedNavigationAction.current = undefined;
+                        });
                 });
             },
-            [getHasUnsavedChanges, onVisibilityChange, showConfirmModal, translate],
+            [getHasUnsavedChanges, onCancel, onVisibilityChange, onConfirm, showConfirmModal, translate],
         ),
     );
 }

src/hooks/useDiscardChangesConfirmation/index.ts

@@ -1,25 +1,24 @@
 import type {NavigationAction} from '@react-navigation/native';
-import {useIsFocused, useNavigation} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
 import {useCallback, useEffect, useRef} from 'react';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import useBeforeRemove from '@hooks/useBeforeRemove';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useLocalize from '@hooks/useLocalize';
+import Log from '@libs/Log';
 import setNavigationActionToMicrotaskQueue from '@libs/Navigation/helpers/setNavigationActionToMicrotaskQueue';
 import navigateAfterInteraction from '@libs/Navigation/navigateAfterInteraction';
 import navigationRef from '@libs/Navigation/navigationRef';
 import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {RootNavigatorParamList} from '@libs/Navigation/types';
 import type UseDiscardChangesConfirmationOptions from './types';
 
-function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibilityChange, isEnabled = true}: UseDiscardChangesConfirmationOptions) {
+function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibilityChange, onConfirm}: UseDiscardChangesConfirmationOptions) {
     const navigation = useNavigation<PlatformStackNavigationProp<RootNavigatorParamList>>();
-    const isFocused = useIsFocused();
     const {translate} = useLocalize();
-    const {showConfirmModal, closeModal} = useConfirmModal();
+    const {showConfirmModal} = useConfirmModal();
     const blockedNavigationAction = useRef<NavigationAction>(undefined);
     const shouldNavigateBack = useRef(false);
-    const isDiscardModalOpenRef = useRef(false);
 
     const navigateBack = useCallback(() => {
         if (blockedNavigationAction.current) {
@@ -34,7 +33,6 @@ function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibi
 
     const showDiscardModal = useCallback(() => {
         onVisibilityChange?.(true);
-        isDiscardModalOpenRef.current = true;
         showConfirmModal({
             title: translate('discardChangesConfirmation.title'),
             prompt: translate('discardChangesConfirmation.body'),
@@ -43,43 +41,41 @@ function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibi
             cancelText: translate('common.cancel'),
             shouldIgnoreBackHandlerDuringTransition: true,
         }).then((result) => {
-            isDiscardModalOpenRef.current = false;
             onVisibilityChange?.(false);
             if (result.action === ModalActions.CONFIRM) {
-                setNavigationActionToMicrotaskQueue(navigateBack);
+                Promise.resolve()
+                    .then(() => onConfirm?.())
+                    .then(() => {
+                        setNavigationActionToMicrotaskQueue(navigateBack);
+                    })
+                    .catch((error: unknown) => {
+                        Log.warn('[useDiscardChangesConfirmation] Failed to run onConfirm callback', {error});
+                        blockedNavigationAction.current = undefined;
+                        shouldNavigateBack.current = false;
+                    });
             } else {
                 blockedNavigationAction.current = undefined;
                 shouldNavigateBack.current = false;
                 onCancel?.();
             }
         });
-    }, [showConfirmModal, translate, navigateBack, onCancel, onVisibilityChange]);
+    }, [showConfirmModal, translate, navigateBack, onCancel, onConfirm, onVisibilityChange]);
 
-    useBeforeRemove(
-        useCallback(
-            (e) => {
-                if (!isEnabled || !isFocused || !getHasUnsavedChanges() || shouldNavigateBack.current) {
-                    return;
-                }
-
-                e.preventDefault();
-                blockedNavigationAction.current = e.data.action;
-                navigateAfterInteraction(showDiscardModal);
-            },
-            [getHasUnsavedChanges, isFocused, isEnabled, showDiscardModal],
-        ),
-        isEnabled && isFocused,
-    );
+    useBeforeRemove((e) => {
+        if (!getHasUnsavedChanges() || shouldNavigateBack.current) {
+            return;
+        }
+        e.preventDefault();
+        blockedNavigationAction.current = e.data.action;
+        navigateAfterInteraction(showDiscardModal);
+    });
 
     /**
      * We cannot programmatically stop the browser's back navigation like react-navigation's beforeRemove.
      * Events like popstate and transitionStart are triggered AFTER the back navigation has already completed.
      * So we need to go forward to get back to the current page.
      */
     useEffect(() => {
-        if (!isEnabled || !isFocused) {
-            return undefined;
-        }
         const unsubscribe = navigation.addListener('transitionStart', ({data: {closing}}) => {
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
             if (!getHasUnsavedChanges()) {
@@ -95,20 +91,7 @@ function useDiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onVisibi
         });
 
         return unsubscribe;
-    }, [navigation, getHasUnsavedChanges, isFocused, isEnabled, showDiscardModal]);
-
-    /**
-     * When the screen loses focus (or is disabled) while the discard modal is open,
-     * close the modal and reset refs so we don't leave the modal visible or stale state.
-     */
-    useEffect(() => {
-        if ((isFocused && isEnabled) || !isDiscardModalOpenRef.current) {
-            return;
-        }
-        closeModal();
-        blockedNavigationAction.current = undefined;
-        shouldNavigateBack.current = false;
-    }, [isFocused, isEnabled, closeModal]);
+    }, [navigation, getHasUnsavedChanges, showDiscardModal]);
 }
 
 export default useDiscardChangesConfirmation;

src/hooks/useDiscardChangesConfirmation/types.ts

@@ -2,7 +2,7 @@ type UseDiscardChangesConfirmationOptions = {
     getHasUnsavedChanges: () => boolean;
     onCancel?: () => void;
     onVisibilityChange?: (visible: boolean) => void;
-    isEnabled?: boolean;
+    onConfirm?: () => void | Promise<void>;
 };
 
 export default UseDiscardChangesConfirmationOptions;

src/hooks/useResetIOUType.ts

@@ -0,0 +1,135 @@
+import {useFocusEffect} from '@react-navigation/native';
+import {hasOnlyPersonalPoliciesSelector} from '@selectors/Policy';
+import {validTransactionDraftIDsSelector} from '@selectors/TransactionDraft';
+import {useRef} from 'react';
+import {Keyboard} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {IOURequestType} from '@userActions/IOU';
+import {initMoneyRequest} from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy, Report, Transaction} from '@src/types/onyx';
+import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
+import useOnyx from './useOnyx';
+import usePersonalPolicy from './usePersonalPolicy';
+import usePrevious from './usePrevious';
+
+type UseResetIOUTypeParams = {
+    /** The report ID from the route params */
+    reportID: string;
+
+    /** The current report object */
+    report: OnyxEntry<Report>;
+
+    /** The current draft transaction */
+    transaction: OnyxEntry<Transaction>;
+
+    /** Whether the transaction data is still loading */
+    isLoadingTransaction?: boolean;
+
+    /** Whether the selected tab data is still loading */
+    isLoadingSelectedTab?: boolean;
+
+    /** The current transaction request type derived from tab/transaction state */
+    transactionRequestType: IOURequestType | undefined;
+
+    /** The policy resolved for this transaction */
+    policy?: OnyxEntry<Policy>;
+
+    /** Whether this is a track distance expense */
+    isTrackDistanceExpense?: boolean;
+
+    /** Whether to skip keyboard dismiss for per diem tab */
+    skipKeyboardDismissForPerDiem?: boolean;
+};
+
+/**
+ * Shared hook that encapsulates the tab-reset logic duplicated between
+ * `IOURequestStartPage` and `DistanceRequestStartPage`.
+ */
+function useResetIOUType({
+    reportID,
+    report,
+    transaction,
+    isLoadingTransaction = false,
+    isLoadingSelectedTab = false,
+    transactionRequestType,
+    policy,
+    isTrackDistanceExpense = false,
+    skipKeyboardDismissForPerDiem = false,
+}: UseResetIOUTypeParams): (newIOUType: IOURequestType) => void {
+    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
+    const [hasOnlyPersonalPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: hasOnlyPersonalPoliciesSelector});
+    const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES);
+    const [currentDate] = useOnyx(ONYXKEYS.CURRENT_DATE);
+    const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});
+
+    const personalPolicy = usePersonalPolicy();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+
+    const resetIOUTypeIfChanged = (newIOUType: IOURequestType) => {
+        if (!(skipKeyboardDismissForPerDiem && newIOUType === CONST.IOU.REQUEST_TYPE.PER_DIEM)) {
+            Keyboard.dismiss();
+        }
+
+        if (transaction?.iouRequestType === newIOUType) {
+            return;
+        }
+
+        const isFromGlobalCreate = !report?.reportID;
+
+        initMoneyRequest({
+            reportID,
+            policy,
+            personalPolicy,
+            isFromGlobalCreate,
+            isTrackDistanceExpense,
+            isFromFloatingActionButton: transaction?.isFromFloatingActionButton ?? transaction?.isFromGlobalCreate ?? isFromGlobalCreate,
+            currentIouRequestType: transaction?.iouRequestType,
+            newIouRequestType: newIOUType,
+            report,
+            parentReport,
+            currentDate,
+            lastSelectedDistanceRates,
+            currentUserPersonalDetails,
+            hasOnlyPersonalPolicies: hasOnlyPersonalPolicies ?? true,
+            draftTransactionIDs,
+        });
+    };
+
+    const tabSelectedTypeRef = useRef<IOURequestType | null>(null);
+
+    const onTabSelected = (newIouType: IOURequestType) => {
+        tabSelectedTypeRef.current = newIouType;
+        resetIOUTypeIfChanged(newIouType);
+    };
+
+    const prevTransactionReportID = usePrevious(transaction?.reportID);
+    const personalPolicyID = personalPolicy?.id;
+
+    // Clear out the temporary expense if the reportID in the URL has changed from the transaction's reportID.
+    useFocusEffect(() => {
+        // Skip until transactionRequestType catches up with the tab onTabSelected already set.
+        if (tabSelectedTypeRef.current && transactionRequestType !== tabSelectedTypeRef.current) {
+            return;
+        }
+        tabSelectedTypeRef.current = null;
+
+        // The test transaction can change the reportID of the transaction on the flow so we should prevent the reportID from being reverted again.
+        if (
+            transaction?.reportID === reportID ||
+            isLoadingTransaction ||
+            isLoadingSelectedTab ||
+            !transactionRequestType ||
+            prevTransactionReportID !== transaction?.reportID ||
+            !personalPolicyID
+        ) {
+            return;
+        }
+        resetIOUTypeIfChanged(transactionRequestType);
+    });
+
+    return onTabSelected;
+}
+
+export default useResetIOUType;