Merge branch 'Expensify:main' into fix/request-map-cut-off

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001037102
-        versionName "1.3.71-2"
+        versionCode 1001037105
+        versionName "1.3.71-5"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.71.2</string>
+	<string>1.3.71.5</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.71.2</string>
+	<string>1.3.71.5</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.71-2",
+  "version": "1.3.71-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.",
@@ -112,6 +112,7 @@
     "react-content-loader": "^6.1.0",
     "react-dom": "18.1.0",
     "react-map-gl": "^7.1.3",
+    "react-error-boundary": "^4.0.11",
     "react-native": "0.72.3",
     "react-native-blob-util": "^0.17.3",
     "react-native-collapsible": "^1.6.0",

src/components/AvatarWithImagePicker.js

@@ -23,6 +23,8 @@ import getImageResolution from '../libs/fileDownload/getImageResolution';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import * as Browser from '../libs/Browser';
+import withNavigationFocus, {withNavigationFocusPropTypes} from './withNavigationFocus';
+import compose from '../libs/compose';
 
 const propTypes = {
     /** Avatar source to display */
@@ -80,6 +82,7 @@ const propTypes = {
     errors: PropTypes.object,
 
     ...withLocalizePropTypes,
+    ...withNavigationFocusPropTypes,
 };
 
 const defaultProps = {
@@ -129,6 +132,9 @@ class AvatarWithImagePicker extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
+        if (!prevProps.isFocused && this.props.isFocused) {
+            this.setError(null, {});
+        }
         if (!prevProps.isUploading && this.props.isUploading) {
             this.animation.start();
         } else if (prevProps.isUploading && !this.props.isUploading) {
@@ -350,4 +356,4 @@ class AvatarWithImagePicker extends React.Component {
 AvatarWithImagePicker.propTypes = propTypes;
 AvatarWithImagePicker.defaultProps = defaultProps;
 
-export default withLocalize(AvatarWithImagePicker);
+export default compose(withLocalize, withNavigationFocus)(AvatarWithImagePicker);

src/components/ErrorBoundary/BaseErrorBoundary.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {ErrorBoundary} from 'react-error-boundary';
 import BootSplash from '../../libs/BootSplash';
 import GenericErrorPage from '../../pages/ErrorPage/GenericErrorPage';
 
@@ -22,40 +23,27 @@ const defaultProps = {
  * This component captures an error in the child component tree and logs it to the server
  * It can be used to wrap the entire app as well as to wrap specific parts for more granularity
  * @see {@link https://reactjs.org/docs/error-boundaries.html#where-to-place-error-boundaries}
+ * @return {React.Component}
  */
-class BaseErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {hasError: false};
-        this.clearError = this.clearError.bind(this);
-    }
-
-    static getDerivedStateFromError() {
-        // Update state so the next render will show the fallback UI.
-        return {hasError: true};
-    }
-
-    componentDidCatch(error, errorInfo) {
-        this.props.logError(this.props.errorMessage, error, JSON.stringify(errorInfo));
-
+function BaseErrorBoundary({logError, errorMessage, children}) {
+    const catchError = (error, errorInfo) => {
+        logError(errorMessage, error, JSON.stringify(errorInfo));
         // We hide the splash screen since the error might happened during app init
         BootSplash.hide();
-    }
-
-    clearError() {
-        this.setState({hasError: false});
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return <GenericErrorPage onRefresh={this.clearError} />;
-        }
-
-        return this.props.children;
-    }
+    };
+
+    return (
+        <ErrorBoundary
+            fallback={<GenericErrorPage />}
+            onError={catchError}
+        >
+            {children}
+        </ErrorBoundary>
+    );
 }
 
 BaseErrorBoundary.propTypes = propTypes;
 BaseErrorBoundary.defaultProps = defaultProps;
+BaseErrorBoundary.displayName = 'BaseErrorBoundary';
 
 export default BaseErrorBoundary;

src/components/MoneyRequestConfirmationList.js

@@ -5,6 +5,7 @@ import {format} from 'date-fns';
 import _ from 'underscore';
 import {View} from 'react-native';
 import lodashGet from 'lodash/get';
+import Text from './Text';
 import styles from '../styles/styles';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
@@ -30,6 +31,7 @@ import Image from './Image';
 import useLocalize from '../hooks/useLocalize';
 import * as ReceiptUtils from '../libs/ReceiptUtils';
 import categoryPropTypes from './categoryPropTypes';
+import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import transactionPropTypes from './transactionPropTypes';
@@ -531,6 +533,16 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
+                    {canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true) && (
+                        <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+                            <Text color={!props.iouIsBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
+                            <Switch
+                                accessibilityLabel={translate('common.billable')}
+                                isOn={props.iouIsBillable}
+                                onToggle={props.onToggleBillable}
+                            />
+                        </View>
+                    )}
                 </>
             )}
         </OptionsSelector>
@@ -562,5 +574,8 @@ export default compose(
         transaction: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         },
+        policy: {
+            key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+        },
     }),
 )(MoneyRequestConfirmationList);

src/components/ReportActionItem/TaskPreview.js

@@ -72,6 +72,11 @@ function TaskPreview(props) {
     const assigneeDisplayName = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], '');
     const taskAssignee = assigneeLogin || assigneeDisplayName;
     const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;
+    const isDeletedParentAction = ReportUtils.isCanceledTaskReport(props.taskReport, props.action);
+
+    if (isDeletedParentAction) {
+        return <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />;
+    }
 
     return (
         <View style={[styles.chatItemMessage]}>

src/languages/en.ts

@@ -244,6 +244,7 @@ export default {
         showMore: 'Show more',
         merchant: 'Merchant',
         category: 'Category',
+        billable: 'Billable',
         tag: 'Tag',
         receipt: 'Receipt',
         replace: 'Replace',
@@ -1524,7 +1525,7 @@ export default {
         completed: 'Completed',
         messages: {
             completed: 'completed task',
-            canceled: 'canceled task',
+            canceled: 'deleted task',
             reopened: 'reopened task',
             error: 'You do not have the permission to do the requested action.',
         },
@@ -1696,6 +1697,7 @@ export default {
     parentReportAction: {
         deletedMessage: '[Deleted message]',
         deletedRequest: '[Deleted request]',
+        deletedTask: '[Deleted task]',
         hiddenMessage: '[Hidden message]',
     },
     threads: {

src/languages/es.ts

@@ -234,6 +234,7 @@ export default {
         showMore: 'Mostrar más',
         merchant: 'Comerciante',
         category: 'Categoría',
+        billable: 'Facturable',
         tag: 'Etiqueta',
         receipt: 'Recibo',
         replace: 'Sustituir',
@@ -1546,7 +1547,7 @@ export default {
         completed: 'Completada',
         messages: {
             completed: 'tarea completada',
-            canceled: 'tarea cancelada',
+            canceled: 'tarea eliminado',
             reopened: 'tarea reabrir',
             error: 'No tiene permiso para realizar la acción solicitada.',
         },
@@ -2178,6 +2179,7 @@ export default {
     parentReportAction: {
         deletedMessage: '[Mensaje eliminado]',
         deletedRequest: '[Pedido eliminado]',
+        deletedTask: '[Tarea eliminado]',
         hiddenMessage: '[Mensaje oculto]',
     },
     threads: {

src/libs/LocalePhoneNumber.js → src/libs/LocalePhoneNumber.ts

@@ -3,20 +3,17 @@ import Str from 'expensify-common/lib/str';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import ONYXKEYS from '../ONYXKEYS';
 
-let countryCodeByIP;
+let countryCodeByIP: number;
 Onyx.connect({
     key: ONYXKEYS.COUNTRY_CODE,
-    callback: (val) => (countryCodeByIP = val || 1),
+    callback: (val) => (countryCodeByIP = val ?? 1),
 });
 
 /**
  * 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
- *
- * @param {String} number
- * @returns {String}
  */
-function formatPhoneNumber(number) {
+function formatPhoneNumber(number: string): string {
     if (!number) {
         return '';
     }
@@ -26,7 +23,7 @@ function formatPhoneNumber(number) {
 
     // return the string untouched if it's not a phone number
     if (!parsedPhoneNumber.valid) {
-        if (parsedPhoneNumber.number && parsedPhoneNumber.number.international) {
+        if (parsedPhoneNumber.number?.international) {
             return parsedPhoneNumber.number.international;
         }
         return numberWithoutSMSDomain;