Merge branch 'main' into 21345-upgrade-electron

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001033505
-        versionName "1.3.35-5"
+        versionCode 1001033601
+        versionName "1.3.36-1"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.35</string>
+	<string>1.3.36</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -32,7 +32,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.35.5</string>
+	<string>1.3.36.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.35</string>
+	<string>1.3.36</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.35.5</string>
+	<string>1.3.36.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.35-5",
+  "version": "1.3.36-1",
   "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/KYCWall/BaseKYCWall.js

@@ -69,7 +69,7 @@ class KYCWall extends React.Component {
         }
 
         return {
-            anchorPositionVertical: domRect.top - 150,
+            anchorPositionVertical: domRect.top - 8,
             anchorPositionHorizontal: domRect.left,
         };
     }

src/languages/en.js

@@ -706,6 +706,7 @@ export default {
         enterAuthenticatorCode: 'Please enter your authenticator code',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         requestNewCode: 'Request a new code in ',
+        requestNewCodeAfterErrorOccurred: 'Request a new code',
         error: {
             pleaseFillMagicCode: 'Please enter your magic code',
             incorrectMagicCode: 'Incorrect magic code.',

src/languages/es.js

@@ -708,6 +708,7 @@ export default {
         enterAuthenticatorCode: 'Por favor, introduce el código de autenticador',
         requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado',
         requestNewCode: 'Pedir un código nuevo en ',
+        requestNewCodeAfterErrorOccurred: 'Solicitar un nuevo código',
         error: {
             pleaseFillMagicCode: 'Por favor, introduce el código mágico',
             incorrectMagicCode: 'Código mágico incorrecto.',

src/libs/actions/App.js

@@ -31,18 +31,6 @@ Onyx.connect({
     initWithStoredValues: false,
 });
 
-let myPersonalDetails;
-Onyx.connect({
-    key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    callback: (val) => {
-        if (!val || !currentUserAccountID) {
-            return;
-        }
-
-        myPersonalDetails = val[currentUserAccountID];
-    },
-});
-
 let allPolicies = [];
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
@@ -267,8 +255,8 @@ function setUpPoliciesAndNavigate(session) {
     }
 }
 
-function openProfile() {
-    const oldTimezoneData = myPersonalDetails.timezone || {};
+function openProfile(personalDetails) {
+    const oldTimezoneData = personalDetails.timezone || {};
     let newTimezoneData = oldTimezoneData;
 
     if (lodashGet(oldTimezoneData, 'automatic', true)) {
@@ -308,8 +296,6 @@ function openProfile() {
             ],
         },
     );
-
-    Navigation.navigate(ROUTES.SETTINGS_PROFILE);
 }
 
 export {setLocale, setLocaleAndNavigate, setSidebarLoaded, setUpPoliciesAndNavigate, openProfile, openApp, reconnectApp, confirmReadyToOpenApp};

src/libs/actions/Report.js

@@ -1316,6 +1316,8 @@ function deleteReport(reportID) {
  * @param {String} reportID The reportID of the policy report (workspace room)
  */
 function navigateToConciergeChatAndDeleteReport(reportID) {
+    // Dismiss the current report screen and replace it with Concierge Chat
+    Navigation.goBack();
     navigateToConciergeChat();
     deleteReport(reportID);
 }

src/pages/settings/InitialSettingsPage.js

@@ -21,7 +21,6 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import compose from '../../libs/compose';
 import CONST from '../../CONST';
 import Permissions from '../../libs/Permissions';
-import * as App from '../../libs/actions/App';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
 import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import bankAccountPropTypes from '../../components/bankAccountPropTypes';
@@ -200,7 +199,7 @@ class InitialSettingsPage extends React.Component {
                 translationKey: 'common.profile',
                 icon: Expensicons.Profile,
                 action: () => {
-                    App.openProfile();
+                    Navigation.navigate(ROUTES.SETTINGS_PROFILE);
                 },
                 brickRoadIndicator: profileBrickRoadIndicator,
             },

src/pages/settings/Profile/ProfilePage.js

@@ -1,5 +1,5 @@
 import lodashGet from 'lodash/get';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -23,6 +23,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import ONYXKEYS from '../../../ONYXKEYS';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import userPropTypes from '../userPropTypes';
+import * as App from '../../../libs/actions/App';
 
 const propTypes = {
     /* Onyx Props */
@@ -84,6 +85,10 @@ function ProfilePage(props) {
         },
     ];
 
+    useEffect(() => {
+        App.openProfile(props.currentUserPersonalDetails);
+    }, [props.currentUserPersonalDetails]);
+
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithBackButton

src/pages/settings/Report/ReportSettingsPage.js

@@ -119,6 +119,7 @@ class ReportSettingsPage extends Component {
                             <OfflineWithFeedback
                                 pendingAction={lodashGet(this.props.report, 'pendingFields.reportName', null)}
                                 errors={lodashGet(this.props.report, 'errorFields.reportName', null)}
+                                errorRowStyles={[styles.ph5]}
                                 onClose={() => Report.clearPolicyRoomNameErrors(this.props.report.reportID)}
                             >
                                 {shouldDisableRename ? (

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

@@ -46,6 +46,12 @@ const propTypes = {
         login: PropTypes.string,
     }),
 
+    /** Session of currently logged in user */
+    session: PropTypes.shape({
+        /** Currently logged in user authToken */
+        authToken: PropTypes.string,
+    }),
+
     /** Indicates which locale the user currently has selected */
     preferredLocale: PropTypes.string,
 
@@ -62,6 +68,9 @@ const propTypes = {
 const defaultProps = {
     account: {},
     credentials: {},
+    session: {
+        authToken: null,
+    },
     preferredLocale: CONST.LOCALES.DEFAULT,
 };
 
@@ -79,6 +88,15 @@ function BaseValidateCodeForm(props) {
     const input2FARef = useRef();
     const timerRef = useRef();
 
+    const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors);
+
+    useEffect(() => {
+        if (!(inputValidateCodeRef.current && ((hasError && props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED) || props.account.isLoading))) {
+            return;
+        }
+        inputValidateCodeRef.current.blur();
+    }, [props.account.isLoading, props.session.autoAuthState, hasError]);
+
     useEffect(() => {
         if (!inputValidateCodeRef.current || prevIsVisible || !props.isVisible || !canFocusInputOnScreenFocus()) {
             return;
@@ -219,8 +237,6 @@ function BaseValidateCodeForm(props) {
         }
     }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]);
 
-    const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors);
-
     return (
         <>
             {/* At this point, if we know the account requires 2FA we already successfully authenticated */}
@@ -273,7 +289,9 @@ function BaseValidateCodeForm(props) {
                                 accessibilityRole="button"
                                 accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                             >
-                                <Text style={[StyleUtils.getDisabledLinkStyles(props.network.isOffline)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                                <Text style={[StyleUtils.getDisabledLinkStyles(props.network.isOffline)]}>
+                                    {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')}
+                                </Text>
                             </PressableWithFeedback>
                         )}
                     </View>
@@ -309,6 +327,7 @@ export default compose(
         account: {key: ONYXKEYS.ACCOUNT},
         credentials: {key: ONYXKEYS.CREDENTIALS},
         preferredLocale: {key: ONYXKEYS.NVP_PREFERRED_LOCALE},
+        session: {key: ONYXKEYS.SESSION},
     }),
     withToggleVisibilityView,
     withNetwork(),

src/pages/workspace/WorkspaceInitialPage.js

@@ -201,7 +201,7 @@ function WorkspaceInitialPage(props) {
                             pendingAction={policy.pendingAction}
                             onClose={() => dismissError(policy.id)}
                             errors={policy.errors}
-                            errorRowStyles={[styles.ph6, styles.pv2]}
+                            errorRowStyles={[styles.ph5, styles.pv2]}
                         >
                             <View style={[styles.flex1]}>
                                 <View style={styles.avatarSectionWrapper}>

src/pages/workspace/WorkspaceInvitePage.js

@@ -93,10 +93,7 @@ class WorkspaceInvitePage extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (!_.isEqual(prevProps.personalDetails, this.props.personalDetails)) {
-            this.updateOptionsWithSearchTerm(this.props.searchTerm);
-        }
-        if (!_.isEqual(prevProps.policyMembers, this.props.policyMembers)) {
+        if (!_.isEqual(prevProps.personalDetails, this.props.personalDetails) || !_.isEqual(prevProps.policyMembers, this.props.policyMembers)) {
             this.updateOptionsWithSearchTerm(this.state.searchTerm);
         }
 
@@ -176,10 +173,23 @@ class WorkspaceInvitePage extends React.Component {
 
     updateOptionsWithSearchTerm(searchTerm = '') {
         const {personalDetails, userToInvite} = OptionsListUtils.getMemberInviteOptions(this.props.personalDetails, this.props.betas, searchTerm, this.getExcludedUsers());
+
+        // Update selectedOptions with the latest personalDetails and policyMembers information
+        const detailsMap = {};
+        _.forEach(personalDetails, (detail) => (detailsMap[detail.login] = detail));
+        const selectedOptions = [];
+        _.forEach(this.state.selectedOptions, (option) => {
+            if (!_.has(detailsMap, option.login)) {
+                return;
+            }
+            selectedOptions.push(detailsMap[option.login]);
+        });
+
         this.setState({
             searchTerm,
             userToInvite,
             personalDetails,
+            selectedOptions,
         });
     }
 

src/pages/workspace/WorkspacesListPage.js

@@ -156,7 +156,7 @@ class WorkspacesListPage extends Component {
             <OfflineWithFeedback
                 key={`${keyTitle}_${index}`}
                 pendingAction={item.pendingAction}
-                errorRowStyles={styles.offlineFeedback.menuItemErrorPadding}
+                errorRowStyles={styles.ph5}
                 onClose={item.dismissError}
                 errors={item.errors}
             >

src/styles/styles.js

@@ -2842,10 +2842,6 @@ const styles = {
         errorDot: {
             marginRight: 12,
         },
-        menuItemErrorPadding: {
-            paddingLeft: 44,
-            paddingRight: 20,
-        },
     },
 
     dotIndicatorMessage: {

tests/utils/LHNTestUtils.js

@@ -168,37 +168,21 @@ function getAdvancedFakeReport(isArchived, isUserCreatedPolicyRoom, hasAddWorksp
  * @param {String} [currentReportID]
  */
 function getDefaultRenderedSidebarLinks(currentReportID = '') {
-    // An ErrorBoundary needs to be added to the rendering so that any errors that happen while the component
-    // renders are logged to the console. Without an error boundary, Jest only reports the error like "The above error
-    // occurred in your component", except, there is no "above error". It's just swallowed up by Jest somewhere.
-    // With the ErrorBoundary, those errors are caught and logged to the console so you can find exactly which error
-    // might be causing a rendering issue when developing tests.
-    class ErrorBoundary extends React.Component {
-        // Error boundaries have to implement this method. It's for providing a fallback UI, but
-        // we don't need that for unit testing, so this is basically a no-op.
-        static getDerivedStateFromError(error) {
-            return {error};
-        }
+    // A try-catch block needs to be added to the rendering so that any errors that happen while the component
+    // renders are caught and logged to the console. Without the try-catch block, Jest might only report the error
+    // as "The above error occurred in your component", without providing specific details. By using a try-catch block,
+    // any errors are caught and logged, allowing you to identify the exact error that might be causing a rendering issue
+    // when developing tests.
 
-        componentDidCatch(error, errorInfo) {
-            console.error(error, errorInfo);
-        }
-
-        render() {
-            // eslint-disable-next-line react/prop-types
-            return this.props.children;
-        }
+    try {
+        // Wrap the SideBarLinks inside of LocaleContextProvider so that all the locale props
+        // are passed to the component. If this is not done, then all the locale props are missing
+        // and there are a lot of render warnings. It needs to be done like this because normally in
+        // our app (App.js) is when the react application is wrapped in the context providers
+        render(<MockedSidebarLinks currentReportID={currentReportID} />);
+    } catch (error) {
+        console.error(error);
     }
-
-    // Wrap the SideBarLinks inside of LocaleContextProvider so that all the locale props
-    // are passed to the component. If this is not done, then all the locale props are missing
-    // and there are a lot of render warnings. It needs to be done like this because normally in
-    // our app (App.js) is when the react application is wrapped in the context providers
-    render(
-        <ErrorBoundary>
-            <MockedSidebarLinks currentReportID={currentReportID} />
-        </ErrorBoundary>,
-    );
 }
 
 /**