Merge branch 'main' into patch-13

android/app/build.gradle

@@ -110,8 +110,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009007802
-        versionName "9.0.78-2"
+        versionCode 1009007805
+        versionName "9.0.78-5"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.0.78.2</string>
+	<string>9.0.78.5</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.78.2</string>
+	<string>9.0.78.5</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.0.78</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.78.2</string>
+	<string>9.0.78.5</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.0.78-2",
+  "version": "9.0.78-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/EmptySelectionListContent.tsx

@@ -48,7 +48,7 @@ function EmptySelectionListContent({contentType}: EmptySelectionListContentProps
     );
 
     return (
-        <ScrollView>
+        <ScrollView contentContainerStyle={[styles.flexGrow1]}>
             <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}>
                 <BlockingView
                     icon={Illustrations.ToddWithPhones}

src/components/ScreenWrapper.tsx

@@ -7,7 +7,6 @@ import {PickerAvoidingView} from 'react-native-picker-select';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
-import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useTackInputFocus from '@hooks/useTackInputFocus';
@@ -158,7 +157,6 @@ function ScreenWrapper(
     const {initialHeight} = useInitialDimensions();
     const styles = useThemeStyles();
     const {isDevelopment} = useEnvironment();
-    const {isOffline} = useNetwork();
     const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
     const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
     const minHeight = shouldEnableMinHeight && !Browser.isSafari() ? initialHeight : undefined;
@@ -244,18 +242,17 @@ function ScreenWrapper(
     }
 
     // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
-    const isSafeAreaBottomPaddingApplied = includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator);
-    if (isSafeAreaBottomPaddingApplied) {
+    if (includeSafeAreaPaddingBottom) {
         paddingStyle.paddingBottom = paddingBottom;
     }
-    if (isSafeAreaBottomPaddingApplied && ignoreInsetsConsumption) {
+    if (includeSafeAreaPaddingBottom && ignoreInsetsConsumption) {
         paddingStyle.paddingBottom = unmodifiedPaddings.bottom;
     }
 
     const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit());
     const contextValue = useMemo(
-        () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied}),
-        [didScreenTransitionEnd, isSafeAreaBottomPaddingApplied, isSafeAreaTopPaddingApplied],
+        () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied: includeSafeAreaPaddingBottom}),
+        [didScreenTransitionEnd, includeSafeAreaPaddingBottom, isSafeAreaTopPaddingApplied],
     );
 
     return (
@@ -297,7 +294,14 @@ function ScreenWrapper(
                                 }
                                 {isSmallScreenWidth && shouldShowOfflineIndicator && (
                                     <>
-                                        <OfflineIndicator style={offlineIndicatorStyle} />
+                                        <OfflineIndicator
+                                            style={[offlineIndicatorStyle]}
+                                            containerStyles={
+                                                includeSafeAreaPaddingBottom
+                                                    ? [styles.offlineIndicatorMobile]
+                                                    : [styles.offlineIndicatorMobile, {paddingBottom: paddingBottom + styles.offlineIndicatorMobile.paddingBottom}]
+                                            }
+                                        />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
                                         <ImportedStateIndicator />
                                     </>

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -1,4 +1,4 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import lodashSortBy from 'lodash/sortBy';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
@@ -23,7 +23,6 @@ import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useAutoTurnSelectionModeOffWhenHasNoActiveOption from '@hooks/useAutoTurnSelectionModeOffWhenHasNoActiveOption';
-import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -71,6 +70,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
     const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>({});
     const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false);
     const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false);
+    const isFocused = useIsFocused();
     const {environmentURL} = useEnvironment();
     const policyId = route.params.policyID;
     const backTo = route.params?.backTo;
@@ -98,8 +98,12 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
         }, [fetchCategories]),
     );
 
-    const cleanupSelectedOption = useCallback(() => setSelectedCategories({}), []);
-    useCleanupSelectedOptions(cleanupSelectedOption);
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedCategories({});
+    }, [isFocused]);
 
     const categoryList = useMemo<PolicyOption[]>(
         () =>
@@ -147,10 +151,6 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
     };
 
     const navigateToCategorySettings = (category: PolicyOption) => {
-        if (isSmallScreenWidth && selectionMode?.isEnabled) {
-            toggleCategory(category);
-            return;
-        }
         Navigation.navigate(
             isQuickSettingsFlow
                 ? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(policyId, category.keyForList, backTo)

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -1,6 +1,6 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import lodashSortBy from 'lodash/sortBy';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -22,7 +22,6 @@ import CustomListHeader from '@components/SelectionListWithModal/CustomListHeade
 import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
-import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -66,6 +65,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
     const [isDeleteTagsConfirmModalVisible, setIsDeleteTagsConfirmModalVisible] = useState(false);
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const policyID = route.params.policyID;
+    const isFocused = useIsFocused();
     const backTo = route.params.backTo;
     const policy = usePolicy(policyID);
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
@@ -87,8 +87,12 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
 
     useFocusEffect(fetchTags);
 
-    const cleanupSelectedOption = useCallback(() => setSelectedTags({}), []);
-    useCleanupSelectedOptions(cleanupSelectedOption);
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedTags({});
+    }, [isFocused]);
 
     const getPendingAction = (policyTagList: PolicyTagList): PendingAction | undefined => {
         if (!policyTagList) {
@@ -172,10 +176,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
     };
 
     const navigateToTagSettings = (tag: TagListItem) => {
-        if (isSmallScreenWidth && selectionMode?.isEnabled) {
-            toggleTag(tag);
-            return;
-        }
         if (tag.orderWeight !== undefined) {
             Navigation.navigate(
                 isQuickSettingsFlow ? ROUTES.SETTINGS_TAG_LIST_VIEW.getRoute(policyID, tag.orderWeight, backTo) : ROUTES.WORKSPACE_TAG_LIST_VIEW.getRoute(policyID, tag.orderWeight),

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -1,5 +1,5 @@
-import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useState} from 'react';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -17,7 +17,6 @@ import SelectionListWithModal from '@components/SelectionListWithModal';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
-import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -52,8 +51,7 @@ function WorkspaceTaxesPage({
         params: {policyID},
     },
 }: WorkspaceTaxesPageProps) {
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -63,6 +61,7 @@ function WorkspaceTaxesPage({
     const {selectionMode} = useMobileSelectionMode();
     const defaultExternalID = policy?.taxRates?.defaultExternalID;
     const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault;
+    const isFocused = useIsFocused();
     const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy);
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
     const isSyncInProgress = isConnectionInProgress(connectionSyncProgress, policy);
@@ -87,8 +86,12 @@ function WorkspaceTaxesPage({
         }, [fetchTaxes]),
     );
 
-    const cleanupSelectedOption = useCallback(() => setSelectedTaxesIDs([]), []);
-    useCleanupSelectedOptions(cleanupSelectedOption);
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedTaxesIDs([]);
+    }, [isFocused]);
 
     const textForDefault = useCallback(
         (taxID: string, taxRate: TaxRate): string => {
@@ -189,10 +192,6 @@ function WorkspaceTaxesPage({
         if (!taxRate.keyForList) {
             return;
         }
-        if (isSmallScreenWidth && selectionMode?.isEnabled) {
-            toggleTax(taxRate);
-            return;
-        }
         Navigation.navigate(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID, taxRate.keyForList));
     };