Merge branch 'main' of https://github.com/wildan-m/App into wildan/fi…

…x/33916-loading-indicator-bootsplash
Expensify · Jan 24, 2024 · 4c40929 · 4c40929
2 parents f6217a3 + 6cfdd6f
commit 4c40929
Show file tree

Hide file tree

Showing 59 changed files with 867 additions and 504 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001043101
-        versionName "1.4.31-1"
+        versionCode 1001043102
+        versionName "1.4.31-2"
     }
 
     flavorDimensions "default"

diff --git a/assets/animations/Update.lottie b/assets/animations/Update.lottie
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.31.1</string>
+	<string>1.4.31.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.31.1</string>
+	<string>1.4.31.2</string>
 </dict>
 </plist>
diff --git a/ios/NotificationServiceExtension/Info.plist b/ios/NotificationServiceExtension/Info.plist
@@ -5,7 +5,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.4.31</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.31.1</string>
+	<string>1.4.31.2</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.31-1",
+  "version": "1.4.31-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.",

diff --git a/src/CONST.ts b/src/CONST.ts
@@ -788,7 +788,6 @@ const CONST = {
         EXP_ERROR: 666,
         MANY_WRITES_ERROR: 665,
         UNABLE_TO_RETRY: 'unableToRetry',
-        UPDATE_REQUIRED: 426,
     },
     HTTP_STATUS: {
         // When Cloudflare throttles
@@ -819,9 +818,6 @@ const CONST = {
         GATEWAY_TIMEOUT: 'Gateway Timeout',
         EXPENSIFY_SERVICE_INTERRUPTED: 'Expensify service interrupted',
         DUPLICATE_RECORD: 'A record already exists with this ID',
-
-        // The "Upgrade" is intentional as the 426 HTTP code means "Upgrade Required" and sent by the API. We use the "Update" language everywhere else in the front end when this gets returned.
-        UPDATE_REQUIRED: 'Upgrade Required',
     },
     ERROR_TYPE: {
         SOCKET: 'Expensify\\Auth\\Error\\Socket',

diff --git a/src/Expensify.js b/src/Expensify.js
@@ -13,7 +13,6 @@ import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import SplashScreenHider from './components/SplashScreenHider';
 import UpdateAppModal from './components/UpdateAppModal';
 import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
-import CONST from './CONST';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import * as Report from './libs/actions/Report';
 import * as User from './libs/actions/User';
@@ -80,9 +79,6 @@ const propTypes = {
     /** Whether the app is waiting for the server's response to determine if a room is public */
     isCheckingPublicRoom: PropTypes.bool,
 
-    /** True when the user must update to the latest minimum version of the app */
-    updateRequired: PropTypes.bool,
-
     /** Whether we should display the notification alerting the user that focus mode has been auto-enabled */
     focusModeNotification: PropTypes.bool,
 
@@ -99,7 +95,6 @@ const defaultProps = {
     isBootSplashAutoHide: true,
     screenShareRequest: null,
     isCheckingPublicRoom: true,
-    updateRequired: false,
     focusModeNotification: false,
 };
 
@@ -213,10 +208,6 @@ function Expensify(props) {
         return null;
     }
 
-    if (props.updateRequired) {
-        throw new Error(CONST.ERROR.UPDATE_REQUIRED);
-    }
-
     return (
         <DeeplinkWrapper
             isAuthenticated={isAuthenticated}
@@ -228,8 +219,7 @@ function Expensify(props) {
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
-                    {/* If the update is required we won't show this option since a full screen update view will be displayed instead. */}
-                    {props.updateAvailable && !props.updateRequired ? <UpdateAppModal /> : null}
+                    {props.updateAvailable ? <UpdateAppModal /> : null}
                     {props.screenShareRequest ? (
                         <ConfirmModal
                             title={props.translate('guides.screenShare')}
@@ -285,10 +275,6 @@ export default compose(
         screenShareRequest: {
             key: ONYXKEYS.SCREEN_SHARE_REQUEST,
         },
-        updateRequired: {
-            key: ONYXKEYS.UPDATE_REQUIRED,
-            initWithStoredValues: false,
-        },
         focusModeNotification: {
             key: ONYXKEYS.FOCUS_MODE_NOTIFICATION,
             initWithStoredValues: false,

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -249,9 +249,6 @@ const ONYXKEYS = {
     // Max width supported for HTML <canvas> element
     MAX_CANVAS_WIDTH: 'maxCanvasWidth',
 
-    /** Indicates whether an forced upgrade is required */
-    UPDATE_REQUIRED: 'updateRequired',
-
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -449,7 +446,6 @@ type OnyxValues = {
     [ONYXKEYS.MAX_CANVAS_AREA]: number;
     [ONYXKEYS.MAX_CANVAS_HEIGHT]: number;
     [ONYXKEYS.MAX_CANVAS_WIDTH]: number;
-    [ONYXKEYS.UPDATE_REQUIRED]: boolean;
 
     // Collections
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;

diff --git a/src/components/Composer/index.android.tsx b/src/components/Composer/index.android.tsx
@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import RNTextInput from '@components/RNTextInput';
+import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -28,6 +29,7 @@ function Composer(
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<TextInput | null>(null);
+    const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
 
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -89,6 +91,12 @@ function Composer(
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
             readOnly={isDisabled}
+            onBlur={(e) => {
+                if (!isFocused) {
+                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
+                }
+                props?.onBlur?.(e);
+            }}
         />
     );
 }

diff --git a/src/components/Composer/index.ios.tsx b/src/components/Composer/index.ios.tsx
@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import RNTextInput from '@components/RNTextInput';
+import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -28,7 +29,7 @@ function Composer(
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<TextInput | null>(null);
-
+    const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const styles = useThemeStyles();
     const theme = useTheme();
 
@@ -84,6 +85,12 @@ function Composer(
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
             readOnly={isDisabled}
+            onBlur={(e) => {
+                if (!isFocused) {
+                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
+                }
+                props?.onBlur?.(e);
+            }}
         />
     );
 }

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.tsx b/src/components/ErrorBoundary/BaseErrorBoundary.tsx
@@ -1,9 +1,7 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {ErrorBoundary} from 'react-error-boundary';
 import BootSplash from '@libs/BootSplash';
 import GenericErrorPage from '@pages/ErrorPage/GenericErrorPage';
-import UpdateRequiredView from '@pages/ErrorPage/UpdateRequiredView';
-import CONST from '@src/CONST';
 import type {BaseErrorBoundaryProps, LogError} from './types';
 
 /**
@@ -13,19 +11,15 @@ import type {BaseErrorBoundaryProps, LogError} from './types';
  */
 
 function BaseErrorBoundary({logError = () => {}, errorMessage, children}: BaseErrorBoundaryProps) {
-    const [errorContent, setErrorContent] = useState('');
-    const catchError = (errorObject: Error, errorInfo: React.ErrorInfo) => {
-        logError(errorMessage, errorObject, JSON.stringify(errorInfo));
+    const catchError = (error: Error, errorInfo: React.ErrorInfo) => {
+        logError(errorMessage, error, JSON.stringify(errorInfo));
         // We hide the splash screen since the error might happened during app init
         BootSplash.hide();
-        setErrorContent(errorObject.message);
     };
 
-    const updateRequired = errorContent === CONST.ERROR.UPDATE_REQUIRED;
-
     return (
         <ErrorBoundary
-            fallback={updateRequired ? <UpdateRequiredView /> : <GenericErrorPage />}
+            fallback={<GenericErrorPage />}
             onError={catchError}
         >
             {children}

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -57,18 +57,17 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
         return null;
     }
 
+    const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const textStyle = isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
-    const textUnreadStyle = optionItem?.isUnread ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
+    const textUnreadStyle = optionItem?.isUnread && optionItem.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.MUTE ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
     const displayNameStyle = [styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, textUnreadStyle, style];
-    const alternateTextStyle =
-        viewMode === CONST.OPTION_MODE.COMPACT
-            ? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2, style]
-            : [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, style];
+    const alternateTextStyle = isInFocusMode
+        ? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2, style]
+        : [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, style];
 
-    const contentContainerStyles =
-        viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];
+    const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
-        viewMode === CONST.OPTION_MODE.COMPACT
+        isInFocusMode
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
             : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
     );
@@ -175,13 +174,13 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                             backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
                                             mainAvatar={optionItem.icons?.[0]}
                                             secondaryAvatar={optionItem.icons?.[1]}
-                                            size={viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                            size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     ) : (
                                         <MultipleAvatars
                                             icons={optionItem.icons ?? []}
-                                            isFocusMode={viewMode === CONST.OPTION_MODE.COMPACT}
-                                            size={viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                            isFocusMode={isInFocusMode}
+                                            size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
                                                 isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
@@ -1,4 +1,3 @@
-import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
 
 const DotLottieAnimations: Record<string, DotLottieAnimation> = {
@@ -52,11 +51,6 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         w: 853,
         h: 480,
     },
-    Update: {
-        file: require('@assets/animations/Update.lottie'),
-        w: variables.updateAnimationW,
-        h: variables.updateAnimationH,
-    },
     Coin: {
         file: require('@assets/animations/Coin.lottie'),
         w: 375,

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -61,6 +61,9 @@ const propTypes = {
 
     /** Last pressed digit on BigDigitPad */
     lastPressedDigit: PropTypes.string,
+
+    /** TestID for test */
+    testID: PropTypes.string,
 };
 
 const defaultProps = {
@@ -77,6 +80,7 @@ const defaultProps = {
     maxLength: CONST.MAGIC_CODE_LENGTH,
     isDisableKeyboard: false,
     lastPressedDigit: '',
+    testID: '',
 };
 
 /**
@@ -394,6 +398,7 @@ function MagicCodeInput(props) {
                             role={CONST.ACCESSIBILITY_ROLE.TEXT}
                             style={[styles.inputTransparent]}
                             textInputContainerStyles={[styles.borderNone]}
+                            testID={props.testID}
                         />
                     </View>
                 </GestureDetector>