Merge remote-tracking branch 'expensify/main' into upgrade-react-nati…

…ve-web

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001039600
-        versionName "1.3.96-0"
+        versionCode 1001039602
+        versionName "1.3.96-2"
     }
 
     flavorDimensions "default"

babel.config.js

@@ -17,16 +17,8 @@ const defaultPlugins = [
 ];
 
 const webpack = {
-    env: {
-        production: {
-            presets: defaultPresets,
-            plugins: [...defaultPlugins, 'transform-remove-console'],
-        },
-        development: {
-            presets: defaultPresets,
-            plugins: defaultPlugins,
-        },
-    },
+    presets: defaultPresets,
+    plugins: defaultPlugins,
 };
 
 const metro = {
@@ -78,6 +70,11 @@ const metro = {
             },
         ],
     ],
+    env: {
+        production: {
+            plugins: ['transform-remove-console', {exclude: ['error', 'warn']}],
+        },
+    },
 };
 
 /*
@@ -102,11 +99,19 @@ if (process.env.CAPTURE_METRICS === 'true') {
     ]);
 }
 
-module.exports = ({caller}) => {
+module.exports = (api) => {
+    console.debug('babel.config.js');
+    console.debug('  - api.version:', api.version);
+    console.debug('  - api.env:', api.env());
+    console.debug('  - process.env.NODE_ENV:', process.env.NODE_ENV);
+    console.debug('  - process.env.BABEL_ENV:', process.env.BABEL_ENV);
+
     // For `react-native` (iOS/Android) caller will be "metro"
     // For `webpack` (Web) caller will be "@babel-loader"
     // For jest, it will be babel-jest
     // For `storybook` there won't be any config at all so we must give default argument of an empty object
-    const runningIn = caller((args = {}) => args.name);
+    const runningIn = api.caller((args = {}) => args.name);
+    console.debug('  - running in: ', runningIn);
+
     return ['metro', 'babel-jest'].includes(runningIn) ? metro : webpack;
 };

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.96.0</string>
+	<string>1.3.96.2</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.3.96.0</string>
+	<string>1.3.96.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.96-0",
+  "version": "1.3.96-2",
   "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/ROUTES.ts

@@ -2,14 +2,11 @@ import {ValueOf} from 'type-fest';
 import CONST from './CONST';
 
 /**
- * This is a file containing constants for all of the routes we want to be able to go to
+ * This is a file containing constants for all the routes we want to be able to go to
  */
 
 /**
- * This is a file containing constants for all of the routes we want to be able to go to
- * Returns the URL with an encoded URI component for the backTo param which can be added to the end of URLs
- * @param backTo
- * @returns
+ * Builds a URL with an encoded URI component for the `backTo` param which can be added to the end of URLs
  */
 function getUrlWithBackToParam(url: string, backTo?: string): string {
     const backToParam = backTo ? `${url.includes('?') ? '&' : '?'}backTo=${encodeURIComponent(backTo)}` : '';
@@ -111,7 +108,10 @@ export default {
         route: 'settings/profile/personal-details/address/country',
         getRoute: (country: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/personal-details/address/country?country=${country}`, backTo),
     },
-    SETTINGS_CONTACT_METHODS: 'settings/profile/contact-methods',
+    SETTINGS_CONTACT_METHODS: {
+        route: 'settings/profile/contact-methods',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods', backTo),
+    },
     SETTINGS_CONTACT_METHOD_DETAILS: {
         route: 'settings/profile/contact-methods/:contactMethod/details',
         getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`,

src/components/ConnectBankAccountButton.js

@@ -30,7 +30,7 @@ const defaultProps = {
 };
 
 function ConnectBankAccountButton(props) {
-    const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, '');
+    const activeRoute = Navigation.getActiveRouteWithoutParams();
     return props.network.isOffline ? (
         <View style={props.style}>
             <Text>{`${props.translate('common.youAppearToBeOffline')} ${props.translate('common.thisFeatureRequiresInternet')}`}</Text>

src/components/CountrySelector.js

@@ -53,7 +53,7 @@ function CountrySelector({errorText, value: countryCode, onInputChange, forwarde
                 descriptionTextStyle={countryTitleDescStyle}
                 description={translate('common.country')}
                 onPress={() => {
-                    const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, '');
+                    const activeRoute = Navigation.getActiveRouteWithoutParams();
                     Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode, activeRoute));
                 }}
             />

src/components/Image/index.js

@@ -69,4 +69,5 @@ const ImageWithOnyx = React.memo(
     imagePropsAreEqual,
 );
 ImageWithOnyx.resizeMode = RESIZE_MODES;
+
 export default ImageWithOnyx;

src/components/Image/index.native.js

@@ -59,4 +59,5 @@ const ImageWithOnyx = withOnyx({
 })(Image);
 ImageWithOnyx.resizeMode = RESIZE_MODES;
 ImageWithOnyx.resolveDimensions = resolveDimensions;
+
 export default ImageWithOnyx;

src/components/ImageWithSizeCalculation.js → src/components/ImageWithSizeCalculation.tsx

@@ -1,66 +1,58 @@
-import PropTypes from 'prop-types';
+import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import {OnLoadEvent} from 'react-native-fast-image';
 import Log from '@libs/Log';
 import styles from '@styles/styles';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Image from './Image';
+import RESIZE_MODES from './Image/resizeModes';
 
-const propTypes = {
+type OnMeasure = (args: {width: number; height: number}) => void;
+
+type ImageWithSizeCalculationProps = {
     /** Url for image to display */
-    url: PropTypes.string.isRequired,
+    url: string;
 
     /** Any additional styles to apply */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
+    style?: StyleProp<ViewStyle>;
 
     /** Callback fired when the image has been measured. */
-    onMeasure: PropTypes.func,
+    onMeasure: OnMeasure;
 
     /** Whether the image requires an authToken */
-    isAuthTokenRequired: PropTypes.bool,
-};
-
-const defaultProps = {
-    style: {},
-    onMeasure: () => {},
-    isAuthTokenRequired: false,
+    isAuthTokenRequired: boolean;
 };
 
 /**
  * Preloads an image by getting the size and passing dimensions via callback.
  * Image size must be provided by parent via width and height props. Useful for
  * performing some calculation on a network image after fetching dimensions so
  * it can be appropriately resized.
- *
- * @param {Object} props
- * @returns {React.Component}
- *
  */
-function ImageWithSizeCalculation(props) {
-    const isLoadedRef = useRef(null);
+function ImageWithSizeCalculation({url, style, onMeasure, isAuthTokenRequired}: ImageWithSizeCalculationProps) {
+    const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
 
     const onError = () => {
-        Log.hmmm('Unable to fetch image to calculate size', {url: props.url});
+        Log.hmmm('Unable to fetch image to calculate size', {url});
     };
 
-    const imageLoadedSuccessfully = (event) => {
+    const imageLoadedSuccessfully = (event: OnLoadEvent) => {
         isLoadedRef.current = true;
-        props.onMeasure({
+        onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
         });
     };
 
     /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */
     useEffect(() => {
-        if (isLoadedRef.current || !isLoading) {
+        if (isLoadedRef.current ?? !isLoading) {
             return;
         }
-        const timeout = _.delay(() => {
+        const timeout = delay(() => {
             if (!isLoading || isLoadedRef.current) {
                 return;
             }
@@ -70,14 +62,14 @@ function ImageWithSizeCalculation(props) {
     }, [isLoading]);
 
     return (
-        <View style={[styles.w100, styles.h100, props.style]}>
+        <View style={[styles.w100, styles.h100, style]}>
             <Image
                 style={[styles.w100, styles.h100]}
-                source={{uri: props.url}}
-                isAuthTokenRequired={props.isAuthTokenRequired}
-                resizeMode={Image.resizeMode.cover}
+                source={{uri: url}}
+                isAuthTokenRequired={isAuthTokenRequired}
+                resizeMode={RESIZE_MODES.cover}
                 onLoadStart={() => {
-                    if (isLoadedRef.current || isLoading) {
+                    if (isLoadedRef.current ?? isLoading) {
                         return;
                     }
                     setIsLoading(true);
@@ -94,7 +86,5 @@ function ImageWithSizeCalculation(props) {
     );
 }
 
-ImageWithSizeCalculation.propTypes = propTypes;
-ImageWithSizeCalculation.defaultProps = defaultProps;
 ImageWithSizeCalculation.displayName = 'ImageWithSizeCalculation';
 export default React.memo(ImageWithSizeCalculation);

src/components/LHNOptionsList/LHNOptionsList.js

@@ -144,15 +144,15 @@ function LHNOptionsList({
                 '',
             )}`;
             const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || '';
-            const participantPersonalDetailList = _.values(OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails));
+            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);
             return (
                 <OptionRowLHNData
                     reportID={reportID}
                     fullReport={itemFullReport}
                     reportActions={itemReportActions}
                     parentReportActions={itemParentReportActions}
                     policy={itemPolicy}
-                    personalDetails={participantPersonalDetailList}
+                    personalDetails={participantsPersonalDetails}
                     transaction={itemTransaction}
                     receiptTransactions={transactions}
                     viewMode={optionMode}

src/components/LHNOptionsList/OptionRowLHNData.js

@@ -16,7 +16,7 @@ const propTypes = {
     isFocused: PropTypes.bool,
 
     /** List of users' personal details */
-    personalDetails: PropTypes.arrayOf(participantPropTypes),
+    personalDetails: PropTypes.objectOf(participantPropTypes),
 
     /** The preferred language for the app */
     preferredLocale: PropTypes.string,

src/components/MoneyRequestConfirmationList.js

@@ -436,7 +436,7 @@ function MoneyRequestConfirmationList(props) {
      */
     const navigateToReportOrUserDetail = (option) => {
         if (option.accountID) {
-            const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, '');
+            const activeRoute = Navigation.getActiveRouteWithoutParams();
 
             Navigation.navigate(ROUTES.PROFILE.getRoute(option.accountID, activeRoute));
         } else if (option.reportID) {