sync with main

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030801
-        versionName "1.3.8-1"
+        versionCode 1001030808
+        versionName "1.3.8-8"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.8.1</string>
+	<string>1.3.8.8</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.8.1</string>
+	<string>1.3.8.8</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.8-1",
+  "version": "1.3.8-8",
   "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/CONST.js

@@ -675,6 +675,9 @@ const CONST = {
         EMAIL: 'email',
     },
 
+    MAGIC_CODE_LENGTH: 6,
+    MAGIC_CODE_EMPTY_CHAR: ' ',
+
     KEYBOARD_TYPE: {
         PHONE_PAD: 'phone-pad',
         NUMBER_PAD: 'number-pad',
@@ -908,8 +911,9 @@ const CONST = {
 
     LOCALES: {
         EN: 'en',
-        ES_ES: 'es-ES',
         ES: 'es',
+        ES_ES: 'es-ES',
+        ES_ES_ONFIDO: 'es_ES',
 
         DEFAULT: 'en',
     },

src/ONYXKEYS.js

@@ -105,6 +105,7 @@ export default {
         DOWNLOAD: 'download_',
         POLICY: 'policy_',
         POLICY_MEMBER_LIST: 'policyMemberList_',
+        WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         REPORT: 'report_',
         REPORT_ACTIONS: 'reportActions_',
         REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_',
@@ -187,6 +188,7 @@ export default {
         PROFILE_SETTINGS_FORM: 'profileSettingsForm',
         DISPLAY_NAME_FORM: 'displayNameForm',
         LEGAL_NAME_FORM: 'legalNameForm',
+        WORKSPACE_INVITE_MESSAGE_FORM: 'workspaceInviteMessageForm',
         DATE_OF_BIRTH_FORM: 'dateOfBirthForm',
         HOME_ADDRESS_FORM: 'homeAddressForm',
         NEW_ROOM_FORM: 'newRoomForm',

src/ROUTES.js

@@ -122,6 +122,7 @@ export default {
     WORKSPACE_NEW: 'workspace/new',
     WORKSPACE_INITIAL: 'workspace/:policyID',
     WORKSPACE_INVITE: 'workspace/:policyID/invite',
+    WORKSPACE_INVITE_MESSAGE: 'workspace/:policyID/invite-message',
     WORKSPACE_SETTINGS: 'workspace/:policyID/settings',
     WORKSPACE_CARD: 'workspace/:policyID/card',
     WORKSPACE_REIMBURSE: 'workspace/:policyID/reimburse',
@@ -132,6 +133,7 @@ export default {
     WORKSPACE_NEW_ROOM: 'workspace/new-room',
     getWorkspaceInitialRoute: policyID => `workspace/${policyID}`,
     getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
+    getWorkspaceInviteMessageRoute: policyID => `workspace/${policyID}/invite-message`,
     getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`,
     getWorkspaceCardRoute: policyID => `workspace/${policyID}/card`,
     getWorkspaceReimburseRoute: policyID => `workspace/${policyID}/reimburse`,

src/components/AnchorForAttachmentsOnly/index.native.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
+import * as StyleUtils from '../../styles/StyleUtils';
 import styles from '../../styles/styles';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const AnchorForAttachmentsOnly = props => <BaseAnchorForAttachmentsOnly {...props} style={styles.mw100} />;
+const AnchorForAttachmentsOnly = props => <BaseAnchorForAttachmentsOnly {...props} style={[...StyleUtils.parseStyleAsArray(props.style), styles.mw100]} />;
 
 AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
 AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;

src/components/Form.js

@@ -71,6 +71,9 @@ const propTypes = {
     /** Container styles */
     style: stylePropTypes,
 
+    /** Custom content to display in the footer after submit button */
+    footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
     ...withLocalizePropTypes,
 };
 
@@ -84,6 +87,7 @@ const defaultProps = {
     enabledWhenOffline: false,
     isSubmitActionDangerous: false,
     scrollContextEnabled: false,
+    footerContent: null,
     style: [],
 };
 
@@ -332,6 +336,7 @@ class Form extends React.Component {
                     isLoading={this.props.formState.isLoading}
                     message={_.isEmpty(this.props.formState.errorFields) ? this.getErrorMessage() : null}
                     onSubmit={this.submit}
+                    footerContent={this.props.footerContent}
                     onFixTheErrorsLinkPressed={() => {
                         const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
                         const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));

src/components/FormAlertWithSubmitButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {View} from 'react-native';
 import styles from '../styles/styles';
 import Button from './Button';
 import FormAlertWrapper from './FormAlertWrapper';
@@ -41,6 +42,9 @@ const propTypes = {
 
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous: PropTypes.bool,
+
+    /** Custom content to display in the footer after submit button */
+    footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };
 
 const defaultProps = {
@@ -53,6 +57,7 @@ const defaultProps = {
     enabledWhenOffline: false,
     disablePressOnEnter: false,
     isSubmitActionDangerous: false,
+    footerContent: null,
 };
 
 const FormAlertWithSubmitButton = props => (
@@ -63,25 +68,30 @@ const FormAlertWithSubmitButton = props => (
         message={props.message}
         onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
     >
-        {isOffline => ((isOffline && !props.enabledWhenOffline) ? (
-            <Button
-                success
-                isDisabled
-                text={props.buttonText}
-                style={[styles.mb3]}
-                danger={props.isSubmitActionDangerous}
-            />
-        ) : (
-            <Button
-                success
-                pressOnEnter={!props.disablePressOnEnter}
-                text={props.buttonText}
-                onPress={props.onSubmit}
-                isDisabled={props.isDisabled}
-                isLoading={props.isLoading}
-                danger={props.isSubmitActionDangerous}
-            />
-        ))}
+        {isOffline => (
+            <View>
+                {(isOffline && !props.enabledWhenOffline) ? (
+                    <Button
+                        success
+                        isDisabled
+                        text={props.buttonText}
+                        style={[styles.mb3]}
+                        danger={props.isSubmitActionDangerous}
+                    />
+                ) : (
+                    <Button
+                        success
+                        pressOnEnter={!props.disablePressOnEnter}
+                        text={props.buttonText}
+                        onPress={props.onSubmit}
+                        isDisabled={props.isDisabled}
+                        isLoading={props.isLoading}
+                        danger={props.isSubmitActionDangerous}
+                    />
+                )}
+                {props.footerContent}
+            </View>
+        )}
     </FormAlertWrapper>
 );
 

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -10,6 +10,7 @@ import htmlRenderers from './HTMLRenderers';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import styles from '../../styles/styles';
 import fontFamily from '../../styles/fontFamily';
+import defaultViewProps from './defaultViewProps';
 
 const propTypes = {
     /** Whether text elements should be selectable */
@@ -50,8 +51,6 @@ const customHTMLElementModels = {
     }),
 };
 
-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
-
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

@@ -80,6 +80,7 @@ const AnchorRenderer = (props) => {
     if (isAttachment) {
         return (
             <AnchorForAttachmentsOnly
+                style={styles.alignItemsStart}
                 source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
             />

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -66,7 +66,7 @@ const ImageRenderer = (props) => {
                 >
                     {({show}) => (
                         <PressableWithoutFocus
-                            style={styles.noOutline}
+                            styles={[styles.noOutline, styles.alignItemsStart]}
                             onPress={show}
                             onLongPress={event => showContextMenuForReport(event, anchor, reportID, action, checkIfContextMenuActive)}
                         >

src/components/HTMLEngineProvider/defaultViewProps/index.native.js

@@ -0,0 +1,5 @@
+import styles from '../../../styles/styles';
+
+export default {
+    style: [styles.dFlex, styles.userSelectText],
+};

src/components/HTMLEngineProvider/defaultViewProps/index.web.js

@@ -0,0 +1,9 @@
+import styles from '../../../styles/styles';
+
+export default {
+    // For web platform default to block display. Using flex on root view will force all
+    // child elements to be block elements even when they have display inline added to them.
+    // This will affect elements like <a> which are inline by default.
+    style: [styles.dBlock, styles.userSelectText],
+};
+

src/components/LHNOptionsList/OptionRowLHN.js

@@ -96,6 +96,7 @@ const OptionRowLHN = (props) => {
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(optionItem.displayNamesWithTooltips, 'tooltip') : undefined;
+    const shouldShowGreenDotIndicator = optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner);
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
 
@@ -207,8 +208,8 @@ const OptionRowLHN = (props) => {
                                         <Icon
                                             src={Expensicons.DotIndicator}
                                             fill={colors.red}
-                                            height={variables.iconSizeSmall}
-                                            width={variables.iconSizeSmall}
+                                            height={variables.iconSizeNormal}
+                                            width={variables.iconSizeNormal}
                                         />
                                     </View>
                                 )}
@@ -218,6 +219,15 @@ const OptionRowLHN = (props) => {
                             style={[styles.flexRow, styles.alignItemsCenter]}
                             accessible={false}
                         >
+                            {!hasBrickError
+                                && shouldShowGreenDotIndicator && (
+                                <Icon
+                                    height={variables.iconSizeNormal}
+                                    width={variables.iconSizeNormal}
+                                    src={Expensicons.DotIndicator}
+                                    fill={colors.green}
+                                />
+                            )}
                             {optionItem.hasDraftComment && (
                                 <View
                                     style={styles.ml2}
@@ -226,8 +236,6 @@ const OptionRowLHN = (props) => {
                                     <Icon src={Expensicons.Pencil} height={16} width={16} />
                                 </View>
                             )}
-                            {!hasBrickError
-                                && optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner && <Icon src={Expensicons.DotIndicator} fill={colors.green} />}
                             {optionItem.isPinned && (
                                 <View
                                     style={styles.ml2}