Merge branch 'main' into jakubkalinski0/Odometer_blob_url_loss_detection

Author: jakubkalinski0

contributingGuides/SETUP_ANDROID.md

@@ -73,7 +73,8 @@ If you haven't done any intentional edits outside of `src/` (like adding new dep
 - Changes applied to Javascript will be applied automatically, any changes to native code will require a recompile
 
 ### Expensify Employees
-If you are an Expensify employee and want to point the emulator to your local VM, follow [this](https://stackoverflow.com/c/expensify/questions/7699)
+- To point the **Development Emulator** at your local VM, follow [these steps](https://stackoverflow.com/c/expensify/questions/7699).
+- You must configure the local dev email account; follow [these instructions](https://stackoverflowteams.com/c/expensify/questions/23537/23538#23538).
 
 ## Enabling Prebuilt React Native Artifacts
 

contributingGuides/SETUP_IOS.md

@@ -80,7 +80,8 @@ For an M1 Mac, read this [Stack Overflow post](https://stackoverflow.com/questio
 If you want to run the app on an actual physical iOS device, please follow the instructions [here](https://github.com/Expensify/App/blob/main/contributingGuides/HOW_TO_BUILD_APP_ON_PHYSICAL_IOS_DEVICE.md).
 
 ### Expensify Employees
-If you are an Expensify employee and want to point the emulator to your local VM, follow [this](https://stackoverflow.com/c/expensify/questions/7699)
+- To point the **Development Simulator** at your local VM, follow [these steps](https://stackoverflow.com/c/expensify/questions/7699).
+- You must configure the local dev email account; follow [these instructions](https://stackoverflowteams.com/c/expensify/questions/23537/23538#23538).
 
 ## Push Notifications Setup
 

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/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -810,12 +810,14 @@ function MoneyRequestReportTransactionList({
                         </View>
                     )}
 
-                    <MoneyRequestReportTotalSpend
-                        isEmptyTransactions={isEmptyTransactions}
-                        totalDisplaySpend={totalDisplaySpend}
-                        report={report}
-                        hasPendingAction={hasPendingAction}
-                    />
+                    <OfflineWithFeedback pendingAction={report?.pendingFields?.total}>
+                        <MoneyRequestReportTotalSpend
+                            isEmptyTransactions={isEmptyTransactions}
+                            totalDisplaySpend={totalDisplaySpend}
+                            report={report}
+                            hasPendingAction={hasPendingAction}
+                        />
+                    </OfflineWithFeedback>
                 </View>
             </View>
             <Modal

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;