Merge branch 'main' into pac-guerreiro/refactor/migrate-workspacenewr…

…oompage-to-typescript

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001044307
-        versionName "1.4.43-7"
+        versionCode 1001044311
+        versionName "1.4.43-11"
     }
 
     flavorDimensions "default"

docs/redirects.csv

@@ -54,3 +54,4 @@ https://help.expensify.com/articles/expensify-classic/getting-started/Employees,
 https://help.expensify.com/articles/expensify-classic/getting-started/Using-The-App,https://help.expensify.com/articles/expensify-classic/getting-started/Join-your-company's-workspace
 https://help.expensify.com/articles/expensify-classic/getting-started/support/Expensify-Support,https://use.expensify.com/support
 https://help.expensify.com/articles/expensify-classic/getting-started/Plan-Types,https://use.expensify.com/
+https://help.expensify.com/articles/new-expensify/payments/Referral-Program,https://help.expensify.com/articles/expensify-classic/get-paid-back/Referral-Program

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.43.7</string>
+	<string>1.4.43.11</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

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

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.4.43</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.43.7</string>
+	<string>1.4.43.11</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

jest.config.js

@@ -8,7 +8,7 @@ module.exports = {
         `<rootDir>/?(*.)+(spec|test).${testFileExtension}`,
     ],
     transform: {
-        '^.+\\.jsx?$': 'babel-jest',
+        '^.+\\.[jt]sx?$': 'babel-jest',
         '^.+\\.svg?$': 'jest-transformer-svg',
     },
     transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-native)/'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.43-7",
+  "version": "1.4.43-11",
   "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.",
@@ -86,6 +86,7 @@
     "@react-native-picker/picker": "2.5.1",
     "@react-navigation/material-top-tabs": "^6.6.3",
     "@react-navigation/native": "6.1.8",
+    "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.1.11",

patches/@react-navigation+native-stack+6.9.17.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/@react-navigation/native-stack/src/types.tsx b/node_modules/@react-navigation/native-stack/src/types.tsx
+index 206fb0b..7a34a8e 100644
+--- a/node_modules/@react-navigation/native-stack/src/types.tsx
++++ b/node_modules/@react-navigation/native-stack/src/types.tsx
+@@ -490,6 +490,14 @@ export type NativeStackNavigationOptions = {
+    * Only supported on iOS and Android.
+    */
+   freezeOnBlur?: boolean;
++  // partial changes from https://github.com/react-navigation/react-navigation/commit/90cfbf23bcc5259f3262691a9eec6c5b906e5262
++  // patch can be removed when new version of `native-stack` will be released
++  /**
++   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
++   *
++   * Only supported on iOS
++   */
++  keyboardHandlingEnabled?: boolean;
+ };
+
+ export type NativeStackNavigatorProps = DefaultNavigatorOptions<
+diff --git a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
+index a005c43..03d8b50 100644
+--- a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
++++ b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
+@@ -161,6 +161,7 @@ const SceneView = ({
+     statusBarTranslucent,
+     statusBarColor,
+     freezeOnBlur,
++    keyboardHandlingEnabled,
+   } = options;
+
+   let {
+@@ -289,6 +290,7 @@ const SceneView = ({
+       onNativeDismissCancelled={onNativeDismissCancelled}
+       // this prop is available since rn-screens 3.16
+       freezeOnBlur={freezeOnBlur}
++      hideKeyboardOnSwipe={keyboardHandlingEnabled}
+     >
+       <NavigationContext.Provider value={navigation}>
+         <NavigationRouteContext.Provider value={route}>

src/ROUTES.ts

@@ -84,28 +84,28 @@ const ROUTES = {
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
     SETTINGS_WALLET_DOMAINCARD: {
-        route: '/settings/wallet/card/:domain',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}` as const,
+        route: 'settings/wallet/card/:domain',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}` as const,
     },
     SETTINGS_REPORT_FRAUD: {
-        route: '/settings/wallet/card/:domain/report-virtual-fraud',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-virtual-fraud` as const,
+        route: 'settings/wallet/card/:domain/report-virtual-fraud',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/report-virtual-fraud` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_NAME: {
-        route: '/settings/wallet/card/:domain/get-physical/name',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/name` as const,
+        route: 'settings/wallet/card/:domain/get-physical/name',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/get-physical/name` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_PHONE: {
-        route: '/settings/wallet/card/:domain/get-physical/phone',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/phone` as const,
+        route: 'settings/wallet/card/:domain/get-physical/phone',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/get-physical/phone` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_ADDRESS: {
-        route: '/settings/wallet/card/:domain/get-physical/address',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/address` as const,
+        route: 'settings/wallet/card/:domain/get-physical/address',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/get-physical/address` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_CONFIRM: {
-        route: '/settings/wallet/card/:domain/get-physical/confirm',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/confirm` as const,
+        route: 'settings/wallet/card/:domain/get-physical/confirm',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/get-physical/confirm` as const,
     },
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
@@ -117,8 +117,8 @@ const ROUTES = {
     SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance',
     SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account',
     SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: {
-        route: '/settings/wallet/card/:domain/report-card-lost-or-damaged',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-card-lost-or-damaged` as const,
+        route: 'settings/wallet/card/:domain/report-card-lost-or-damaged',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/report-card-lost-or-damaged` as const,
     },
     SETTINGS_WALLET_CARD_ACTIVATE: {
         route: 'settings/wallet/card/:domain/activate',
@@ -219,6 +219,10 @@ const ROUTES = {
         route: 'r/:reportID/settings/who-can-post',
         getRoute: (reportID: string) => `r/${reportID}/settings/who-can-post` as const,
     },
+    REPORT_SETTINGS_VISIBILITY: {
+        route: 'r/:reportID/settings/visibility',
+        getRoute: (reportID: string) => `r/${reportID}/settings/visibility` as const,
+    },
     SPLIT_BILL_DETAILS: {
         route: 'r/:reportID/split/:reportActionID',
         getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}` as const,

src/SCREENS.ts

@@ -167,6 +167,7 @@ const SCREENS = {
         ROOM_NAME: 'Report_Settings_Room_Name',
         NOTIFICATION_PREFERENCES: 'Report_Settings_Notification_Preferences',
         WRITE_CAPABILITY: 'Report_Settings_Write_Capability',
+        VISIBILITY: 'Report_Settings_Visibility',
     },
 
     NEW_TASK: {

src/components/CountrySelector.tsx

@@ -1,4 +1,5 @@
-import React, {forwardRef, useEffect} from 'react';
+import {useIsFocused} from '@react-navigation/native';
+import React, {forwardRef, useEffect, useRef} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
@@ -23,15 +24,28 @@ type CountrySelectorProps = {
     /** inputID used by the Form component */
     // eslint-disable-next-line react/no-unused-prop-types
     inputID: string;
+
+    /** Callback to call when the picker modal is dismissed */
+    onBlur?: () => void;
 };
 
-function CountrySelector({errorText = '', value: countryCode, onInputChange}: CountrySelectorProps, ref: ForwardedRef<View>) {
+function CountrySelector({errorText = '', value: countryCode, onInputChange, onBlur}: CountrySelectorProps, ref: ForwardedRef<View>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const title = countryCode ? translate(`allCountries.${countryCode}`) : '';
     const countryTitleDescStyle = title.length === 0 ? styles.textNormal : null;
 
+    const didOpenContrySelector = useRef(false);
+    const isFocused = useIsFocused();
+    useEffect(() => {
+        if (!isFocused || !didOpenContrySelector.current) {
+            return;
+        }
+        didOpenContrySelector.current = false;
+        onBlur?.();
+    }, [isFocused, onBlur]);
+
     useEffect(() => {
         // This will cause the form to revalidate and remove any error related to country name
         onInputChange(countryCode);
@@ -48,6 +62,7 @@ function CountrySelector({errorText = '', value: countryCode, onInputChange}: Co
                 description={translate('common.country')}
                 onPress={() => {
                     const activeRoute = Navigation.getActiveRouteWithoutParams();
+                    didOpenContrySelector.current = true;
                     Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute));
                 }}
             />

src/components/Image/index.js

@@ -3,12 +3,15 @@ import React, {useEffect, useMemo} from 'react';
 import {Image as RNImage} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useNetwork from '@hooks/useNetwork';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, imagePropTypes} from './imagePropTypes';
 import RESIZE_MODES from './resizeModes';
 
 function Image(props) {
     const {source: propsSource, isAuthTokenRequired, onLoad, session} = props;
+    const {isOffline} = useNetwork();
+
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
      * to the source.
@@ -39,7 +42,7 @@ function Image(props) {
         RNImage.getSize(source.uri, (width, height) => {
             onLoad({nativeEvent: {width, height}});
         });
-    }, [onLoad, source]);
+    }, [onLoad, source, isOffline]);
 
     // Omit the props which the underlying RNImage won't use
     const forwardedProps = _.omit(props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']);

src/components/ImageWithSizeCalculation.tsx

@@ -2,6 +2,7 @@ import delay from 'lodash/delay';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
@@ -44,16 +45,27 @@ function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthT
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
+    const {isOffline} = useNetwork();
 
     const source = useMemo(() => ({uri: url}), [url]);
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url});
         onLoadFailure?.();
+        if (isLoadedRef.current) {
+            isLoadedRef.current = false;
+            setIsImageCached(false);
+        }
+        if (isOffline) {
+            return;
+        }
+        setIsLoading(false);
     };
 
     const imageLoadedSuccessfully = (event: OnLoadNativeEvent) => {
         isLoadedRef.current = true;
+        setIsLoading(false);
+        setIsImageCached(true);
         onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
@@ -87,10 +99,6 @@ function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthT
                     }
                     setIsLoading(true);
                 }}
-                onLoadEnd={() => {
-                    setIsLoading(false);
-                    setIsImageCached(true);
-                }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
             />

src/components/LocaleContextProvider.tsx

@@ -45,7 +45,7 @@ type LocaleContextProps = {
 
     /** Returns a locally converted phone number for numbers from the same region
      * and an internationally converted phone number with the country code for numbers from other regions */
-    formatPhoneNumber: (phoneNumber: string | undefined) => string;
+    formatPhoneNumber: (phoneNumber: string) => string;
 
     /** Gets the locale digit corresponding to a standard digit */
     toLocaleDigit: (digit: string) => string;

src/components/MagicCodeInput.tsx

@@ -430,3 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
+export type {MagicCodeInputHandle};