Merge pull request #12475 from Expensify/update-staging-from-main

Update version to 1.2.24-0 on staging

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001022309
-        versionName "1.2.23-9"
+        versionCode 1001022400
+        versionName "1.2.24-0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.23</string>
+	<string>1.2.24</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.23.9</string>
+	<string>1.2.24.0</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.2.23</string>
+	<string>1.2.24</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.23.9</string>
+	<string>1.2.24.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.23-9",
+  "version": "1.2.24-0",
   "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.",
@@ -140,7 +140,7 @@
     "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/react": "^6.5.9",
     "@storybook/theming": "^6.5.9",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.0.0",
     "@testing-library/jest-native": "^3.4.2",
     "@testing-library/react-native": "^7.0.2",
     "@vercel/ncc": "^0.27.0",
@@ -178,7 +178,7 @@
     "react-native-clean-project": "^4.0.0-alpha4.0",
     "react-native-flipper": "https://gitpkg.now.sh/facebook/flipper/react-native/react-native-flipper?9cacc9b59402550eae866e0e81e5f0c2f8203e6b",
     "react-native-performance-flipper-reporter": "^2.0.0",
-    "react-native-svg-transformer": "^0.14.3",
+    "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.1.0",
     "semver": "^7.3.4",
     "speed-measure-webpack-plugin": "^1.5.0",

src/components/CheckboxWithLabel.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View, TouchableOpacity} from 'react-native';
-import _ from 'underscore';
 import styles from '../styles/styles';
 import Checkbox from './Checkbox';
 import Text from './Text';
-import InlineErrorText from './InlineErrorText';
+import FormHelpMessage from './FormHelpMessage';
 
 const requiredPropsCheck = (props) => {
     if (!props.label && !props.LabelComponent) {
@@ -77,8 +76,6 @@ class CheckboxWithLabel extends React.Component {
 
         this.isChecked = props.value || props.defaultValue || props.isChecked;
         this.LabelComponent = props.LabelComponent;
-        this.defaultStyles = [styles.flexRow, styles.alignItemsCenter];
-        this.wrapperStyles = _.isArray(props.style) ? [...this.defaultStyles, ...props.style] : [...this.defaultStyles, props.style];
 
         this.toggleCheckbox = this.toggleCheckbox.bind(this);
     }
@@ -90,8 +87,8 @@ class CheckboxWithLabel extends React.Component {
 
     render() {
         return (
-            <>
-                <View style={this.wrapperStyles}>
+            <View style={this.props.style}>
+                <View style={[styles.flexRow, styles.alignItemsCenter]}>
                     <Checkbox
                         isChecked={this.isChecked}
                         onPress={this.toggleCheckbox}
@@ -121,10 +118,8 @@ class CheckboxWithLabel extends React.Component {
                         {this.LabelComponent && (<this.LabelComponent />)}
                     </TouchableOpacity>
                 </View>
-                <InlineErrorText styles={[styles.ml8]}>
-                    {this.props.errorText}
-                </InlineErrorText>
-            </>
+                <FormHelpMessage message={this.props.errorText} />
+            </View>
         );
     }
 }

src/components/FormAlertWrapper.js

@@ -3,16 +3,14 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {withNetwork} from './OnyxProvider';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
 import RenderHTML from './RenderHTML';
-import TextLink from './TextLink';
 import Text from './Text';
-import colors from '../styles/colors';
+import TextLink from './TextLink';
 import compose from '../libs/compose';
 import networkPropTypes from './networkPropTypes';
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import FormHelpMessage from './FormHelpMessage';
 
 const propTypes = {
     /** Wrapped child components */
@@ -52,38 +50,35 @@ const defaultProps = {
 //
 // This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
 // and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
-const FormAlertWrapper = props => (
-    <View style={props.containerStyles}>
-        {props.isAlertVisible && (
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                    {!_.isEmpty(props.message) && props.isMessageHtml && <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />}
-
-                    {!_.isEmpty(props.message) && !props.isMessageHtml && <Text style={styles.mutedTextLabel}>{props.message}</Text>}
-
-                    {_.isEmpty(props.message) && (
-                        <>
-                            <Text style={styles.mutedTextLabel}>
-                                {`${props.translate('common.please')} `}
-                            </Text>
-                            <TextLink
-                                style={styles.label}
-                                onPress={props.onFixTheErrorsLinkPressed}
-                            >
-                                {props.translate('common.fixTheErrors')}
-                            </TextLink>
-                            <Text style={styles.mutedTextLabel}>
-                                {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-                            </Text>
-                        </>
-                    )}
-                </View>
-            </View>
-        )}
-        {props.children(props.network.isOffline)}
-    </View>
-);
+const FormAlertWrapper = (props) => {
+    let children;
+    if (_.isEmpty(props.message)) {
+        children = (
+            <Text style={[styles.formError, styles.mb0]}>
+                {`${props.translate('common.please')} `}
+                <TextLink
+                    style={styles.label}
+                    onPress={props.onFixTheErrorsLinkPressed}
+                >
+                    {props.translate('common.fixTheErrors')}
+                </TextLink>
+                {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
+            </Text>
+        );
+    } else if (props.isMessageHtml) {
+        children = <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />;
+    }
+    return (
+        <View style={props.containerStyles}>
+            {props.isAlertVisible && (
+                <FormHelpMessage message={props.message} style={[styles.mb3]}>
+                    {children}
+                </FormHelpMessage>
+            )}
+            {props.children(props.network.isOffline)}
+        </View>
+    );
+};
 
 FormAlertWrapper.propTypes = propTypes;
 FormAlertWrapper.defaultProps = defaultProps;

src/components/FormHelpMessage.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+import colors from '../styles/colors';
+import styles from '../styles/styles';
+import stylePropTypes from '../styles/stylePropTypes';
+
+const propTypes = {
+    /** Error or hint text. Ignored when children is not empty */
+    message: PropTypes.string,
+
+    /** Children to render next to dot indicator */
+    children: PropTypes.node,
+
+    /** Indicates whether to show error or hint */
+    isError: PropTypes.bool,
+
+    /** Container style props */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    message: '',
+    children: null,
+    isError: true,
+    style: [],
+};
+
+const FormHelpMessage = (props) => {
+    if (_.isEmpty(props.message) && _.isEmpty(props.children)) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, ...props.style]}>
+            {props.isError && <Icon src={Expensicons.DotIndicator} fill={colors.red} />}
+            <View style={[styles.flex1, styles.ml2]}>
+                {props.children || (
+                    <Text style={[props.isError ? styles.formError : styles.formHelp, styles.mb0]}>
+                        {props.message}
+                    </Text>
+                )}
+            </View>
+        </View>
+    );
+};
+
+FormHelpMessage.propTypes = propTypes;
+FormHelpMessage.defaultProps = defaultProps;
+FormHelpMessage.displayName = 'FormHelpMessage';
+
+export default FormHelpMessage;

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -29,7 +29,7 @@ const customHTMLElementModels = {
     }),
     'muted-text': defaultHTMLElementModels.div.extend({
         tagName: 'muted-text',
-        mixedUAStyles: styles.mutedTextLabel,
+        mixedUAStyles: {...styles.formError, ...styles.mb0},
     }),
     comment: defaultHTMLElementModels.div.extend({
         tagName: 'comment',

src/components/Picker/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import BasePicker from './BasePicker';
 import Text from '../Text';
 import styles from '../../styles/styles';
-import InlineErrorText from '../InlineErrorText';
+import FormHelpMessage from '../FormHelpMessage';
 
 const propTypes = {
     /** Picker label */
@@ -95,9 +95,7 @@ class Picker extends PureComponent {
                         onInputChange={this.onInputChange}
                     />
                 </View>
-                <InlineErrorText styles={[styles.mh3]}>
-                    {this.props.errorText}
-                </InlineErrorText>
+                <FormHelpMessage message={this.props.errorText} />
             </>
         );
     }

src/components/RadioButtonWithLabel.js

@@ -5,7 +5,7 @@ import _ from 'underscore';
 import styles from '../styles/styles';
 import RadioButton from './RadioButton';
 import Text from './Text';
-import InlineErrorText from './InlineErrorText';
+import FormHelpMessage from './FormHelpMessage';
 
 const propTypes = {
     /** Whether the radioButton is checked */
@@ -75,9 +75,7 @@ const RadioButtonWithLabel = (props) => {
                     {LabelComponent && (<LabelComponent />)}
                 </TouchableOpacity>
             </View>
-            <InlineErrorText>
-                {props.errorText}
-            </InlineErrorText>
+            <FormHelpMessage message={props.errorText} />
         </>
     );
 };

src/components/ReportWelcomeText.js

@@ -91,7 +91,7 @@ const ReportWelcomeText = (props) => {
                         {roomWelcomeMessage.phrase1}
                     </Text>
                     <Text style={[styles.textStrong]} onPress={() => Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))}>
-                        {ReportUtils.getReportName(props.report, props.personalDetails, props.policies)}
+                        {ReportUtils.getReportName(props.report, props.policies)}
                     </Text>
                     <Text>
                         {roomWelcomeMessage.phrase2}

src/components/TextInput/BaseTextInput.js

@@ -18,6 +18,7 @@ import variables from '../../styles/variables';
 import Checkbox from '../Checkbox';
 import getSecureEntryKeyboardType from '../../libs/getSecureEntryKeyboardType';
 import CONST from '../../CONST';
+import FormHelpMessage from '../FormHelpMessage';
 
 class BaseTextInput extends Component {
     constructor(props) {
@@ -198,7 +199,6 @@ class BaseTextInput extends Component {
         const inputProps = _.omit(this.props, _.keys(baseTextInputPropTypes.propTypes));
         const hasLabel = Boolean(this.props.label.length);
         const inputHelpText = this.props.errorText || this.props.hint;
-        const formHelpStyles = this.props.errorText ? styles.formError : styles.formHelp;
         const placeholder = (this.props.prefixCharacter || this.state.isFocused || !hasLabel || (hasLabel && this.props.forceActiveLabel)) ? this.props.placeholder : null;
         const textInputContainerStyles = _.reduce([
             styles.textInputContainer,
@@ -305,9 +305,7 @@ class BaseTextInput extends Component {
                         </TouchableWithoutFeedback>
                     </View>
                     {!_.isEmpty(inputHelpText) && (
-                        <Text style={[formHelpStyles, styles.mt1, styles.ph3]}>
-                            {inputHelpText}
-                        </Text>
+                        <FormHelpMessage isError={!_.isEmpty(this.props.errorText)} message={inputHelpText} />
                     )}
                 </View>
                 {/*

src/components/TextLink.js

@@ -32,20 +32,37 @@ const defaultProps = {
 
 const TextLink = (props) => {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
+
+    /**
+     * @param {Event} event
+     */
+    const openLink = (event) => {
+        event.preventDefault();
+        if (props.onPress) {
+            props.onPress();
+            return;
+        }
+
+        Linking.openURL(props.href);
+    };
+
+    /**
+     * @param {Event} event
+     */
+    const openLinkIfEnterKeyPressed = (event) => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        openLink(event);
+    };
+
     return (
         <Text
             style={[styles.link, ...additionalStyles]}
             accessibilityRole="link"
             href={props.href}
-            onPress={(e) => {
-                e.preventDefault();
-                if (props.onPress) {
-                    props.onPress();
-                    return;
-                }
-
-                Linking.openURL(props.href);
-            }}
+            onPress={openLink}
+            onKeyDown={openLinkIfEnterKeyPressed}
         >
             {props.children}
         </Text>