Merge branch 'main' into update-staging-from-main

Author: OSBotify

android/app/build.gradle

@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001010724
-        versionName "1.1.7-24"
+        versionCode 1001010725
+        versionName "1.1.7-25"
     }
     splits {
         abi {

fastlane/Fastfile

@@ -108,7 +108,10 @@ platform :ios do
 
     build_app(
         workspace: "./ios/NewExpensify.xcworkspace",
-        scheme: "NewExpensify"
+        scheme: "NewExpensify",
+        export_options: {
+            manageAppVersionAndBuildNumber: false
+        }
     )
 
     begin
@@ -150,7 +153,7 @@ platform :ios do
       api_key_path: "./ios/ios-fastlane-json-key.json",
 
       # Skip HTMl report verification
-      force: true, 
+      force: true,
 
       # VERSION will be set to the full build_number e.g. '1.0.92.0'
       build_number: ENV["VERSION"],

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.7.24</string>
+	<string>1.1.7.25</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.1.7.24</string>
+	<string>1.1.7.25</string>
 </dict>
 </plist>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.7-24",
+  "version": "1.1.7-25",
   "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.",

package.json

@@ -158,6 +158,7 @@ class AttachmentModal extends PureComponent {
                 <ConfirmModal
                     title={this.props.translate('attachmentPicker.attachmentTooLarge')}
                     onConfirm={this.closeConfirmModal}
+                    onCancel={this.closeConfirmModal}
                     isVisible={this.state.isConfirmModalOpen}
                     prompt={this.props.translate('attachmentPicker.sizeExceeded')}
                     confirmText={this.props.translate('common.close')}

src/components/AttachmentModal.js

@@ -14,23 +14,32 @@ const propTypes = {
 
     /** Should the input be styled for errors  */
     hasError: PropTypes.bool,
+
+    /** Should the input be disabled  */
+    disabled: PropTypes.bool,
 };
 
 const defaultProps = {
     hasError: false,
+    disabled: false,
 };
 
 const Checkbox = ({
     isChecked,
     onPress,
     hasError,
+    disabled,
 }) => (
-    <Pressable onPress={() => onPress(!isChecked)}>
+    <Pressable
+        disabled={disabled}
+        onPress={() => onPress(!isChecked)}
+    >
         <View
             style={[
                 styles.checkboxContainer,
                 isChecked && styles.checkedContainer,
                 hasError && styles.borderColorDanger,
+                disabled && styles.cursorDisabled,
             ]}
         >
             <Icon src={Checkmark} fill="white" height={14} width={14} />

src/components/Checkbox.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {View} from 'react-native';
+import Checkbox from '../Checkbox';
+import {propTypes, defaultProps} from './CheckboxWithTooltipPropTypes';
+import Growl from '../../libs/Growl';
+import withWindowDimensions from '../withWindowDimensions';
+
+class CheckboxWithTooltipForMobileWebAndNative extends React.Component {
+    constructor(props) {
+        super(props);
+        this.showGrowlOrTriggerOnPress = this.showGrowlOrTriggerOnPress.bind(this);
+    }
+
+    componentDidUpdate() {
+        if (this.props.toggleTooltip) {
+            Growl.show(this.props.text, this.props.growlType, 3000);
+        }
+    }
+
+    /**
+     * Show warning modal on mobile devices since tooltips are not supported when checkbox is disabled.
+     */
+    showGrowlOrTriggerOnPress() {
+        if (this.props.toggleTooltip) {
+            Growl.show(this.props.text, this.props.growlType, 3000);
+            return;
+        }
+        this.props.onPress();
+    }
+
+    render() {
+        return (
+            <View style={this.props.style}>
+                <Checkbox
+                    isChecked={this.props.isChecked}
+                    onPress={this.showGrowlOrTriggerOnPress}
+                />
+            </View>
+        );
+    }
+}
+
+CheckboxWithTooltipForMobileWebAndNative.propTypes = propTypes;
+CheckboxWithTooltipForMobileWebAndNative.defaultProps = defaultProps;
+
+export default withWindowDimensions(CheckboxWithTooltipForMobileWebAndNative);

src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../withWindowDimensions';
+import CONST from '../../CONST';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /** Whether the checkbox is checked */
+    isChecked: PropTypes.bool.isRequired,
+
+    /** Called when the checkbox or label is pressed */
+    onPress: PropTypes.func.isRequired,
+
+    /** Flag to determine to toggle or not the tooltip */
+    toggleTooltip: PropTypes.bool,
+
+    /** The text to display in the tooltip. */
+    text: PropTypes.string.isRequired,
+
+    /** Type of the growl to be displayed in case of mobile devices  */
+    growlType: PropTypes.string,
+
+    /** Container styles */
+    style: stylePropTypes,
+
+    /** Props inherited from withWindowDimensions */
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    style: [],
+    disabled: false,
+    toggleTooltip: true,
+    growlType: CONST.GROWL.WARNING,
+};
+
+export {
+    propTypes,
+    defaultProps,
+};

src/components/CheckboxWithTooltip/CheckboxWithTooltipPropTypes.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {View} from 'react-native';
+import CheckboxWithTooltipForMobileWebAndNative from './CheckboxWithTooltipForMobileWebAndNative';
+import Checkbox from '../Checkbox';
+import {propTypes, defaultProps} from './CheckboxWithTooltipPropTypes';
+import Tooltip from '../Tooltip';
+import withWindowDimensions from '../withWindowDimensions';
+
+const CheckboxWithTooltip = (props) => {
+    if (props.isSmallScreenWidth || props.isMediumScreenWidth) {
+        return (
+            <CheckboxWithTooltipForMobileWebAndNative
+                style={props.style}
+                isChecked={props.isChecked}
+                onPress={props.onPress}
+                text={props.text}
+                toggleTooltip={props.toggleTooltip}
+            />
+        );
+    }
+    const checkbox = (
+        <Checkbox
+            isChecked={props.isChecked}
+            onPress={props.onPress}
+            disabled={props.toggleTooltip}
+        />
+    );
+    return (
+        <View style={props.style}>
+            {props.toggleTooltip
+                ? (
+                    <Tooltip text={props.text}>
+                        {checkbox}
+                    </Tooltip>
+                )
+                : checkbox}
+        </View>
+    );
+};
+
+CheckboxWithTooltip.propTypes = propTypes;
+CheckboxWithTooltip.defaultProps = defaultProps;
+CheckboxWithTooltip.displayName = 'CheckboxWithTooltip';
+
+export default withWindowDimensions(CheckboxWithTooltip);

src/components/CheckboxWithTooltip/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {propTypes, defaultProps} from './CheckboxWithTooltipPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+import CheckboxWithTooltipForMobileWebAndNative from './CheckboxWithTooltipForMobileWebAndNative';
+
+const CheckboxWithTooltip = props => (
+    <CheckboxWithTooltipForMobileWebAndNative
+        style={props.style}
+        isChecked={props.isChecked}
+        onPress={props.onPress}
+        text={props.text}
+        toggleTooltip={props.toggleTooltip}
+    />
+);
+
+CheckboxWithTooltip.propTypes = propTypes;
+CheckboxWithTooltip.defaultProps = defaultProps;
+CheckboxWithTooltip.displayName = 'CheckboxWithTooltip';
+
+export default withWindowDimensions(CheckboxWithTooltip);

src/components/CheckboxWithTooltip/index.native.js

@@ -55,7 +55,7 @@ class BaseExpensiTextInput extends Component {
 
             if (this.props.value) {
                 this.activateLabel();
-            } else {
+            } else if (!this.state.isFocused) {
                 this.deactivateLabel();
             }
         }
@@ -166,7 +166,6 @@ class BaseExpensiTextInput extends Component {
                         <View
                             style={[
                                 styles.expensiTextInputContainer,
-                                !hasLabel && styles.pv0,
                                 this.state.isFocused && styles.borderColorFocus,
                                 (hasError || errorText) && styles.borderColorDanger,
                             ]}
@@ -194,7 +193,7 @@ class BaseExpensiTextInput extends Component {
                                 placeholder={(this.state.isFocused || !label) ? placeholder : null}
                                 placeholderTextColor={themeColors.placeholderText}
                                 underlineColorAndroid="transparent"
-                                style={inputStyle}
+                                style={[inputStyle, !hasLabel && styles.pv0]}
                                 multiline={multiline}
                                 onFocus={this.onFocus}
                                 onBlur={this.onBlur}

src/components/ExpensiTextInput/BaseExpensiTextInput.js

@@ -19,6 +19,7 @@ const ExpensiTextInputLabel = ({
                 labelScale,
             ),
         ]}
+        pointerEvents="none"
     >
         {label}
     </Animated.Text>

src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js

@@ -10,6 +10,7 @@ import Button from './Button';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import TextLink from './TextLink';
 import Text from './Text';
+import RenderHTML from './RenderHTML';
 
 const propTypes = {
     /** Whether to show the alert text */
@@ -27,11 +28,15 @@ const propTypes = {
     /** Error message to display above button */
     message: PropTypes.string,
 
+    /** Whether message is in html format */
+    isMessageHtml: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     message: '',
+    isMessageHtml: false,
 };
 
 const FormAlertWithSubmitButton = ({
@@ -41,6 +46,7 @@ const FormAlertWithSubmitButton = ({
     translate,
     onFixTheErrorsLinkPressed,
     message,
+    isMessageHtml,
 }) => {
     /**
      * @returns {React.Component}
@@ -49,9 +55,15 @@ const FormAlertWithSubmitButton = ({
         let error = '';
 
         if (!_.isEmpty(message)) {
-            error = (
-                <Text style={styles.mutedTextLabel}>{message}</Text>
-            );
+            if (isMessageHtml) {
+                error = (
+                    <RenderHTML html={`<muted-text>${message}</muted-text>`} />
+                );
+            } else {
+                error = (
+                    <Text style={styles.mutedTextLabel}>{message}</Text>
+                );
+            }
         } else {
             error = (
                 <>