Pull latest changes

android/app/build.gradle

@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001010804
-        versionName "1.1.8-4"
+        versionCode 1001010805
+        versionName "1.1.8-5"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.8.4</string>
+	<string>1.1.8.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.1.8.4</string>
+	<string>1.1.8.5</string>
 </dict>
 </plist>

package.json

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

src/CONST.js

@@ -213,6 +213,7 @@ const CONST = {
         SIDEBAR_LOADED: 'sidebar_loaded',
         COLD: 'cold',
         REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500,
+        TOOLTIP_SENSE: 1000,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',

src/components/AttachmentView.js

@@ -64,11 +64,11 @@ const AttachmentView = (props) => {
             </View>
             <Text style={[styles.textStrong]}>{props.file && props.file.name}</Text>
             {props.shouldShowDownloadIcon && (
-                <Tooltip text={props.translate('common.download')}>
-                    <View style={styles.ml2}>
+                <View style={styles.ml2}>
+                    <Tooltip text={props.translate('common.download')}>
                         <Icon src={Download} />
-                    </View>
-                </Tooltip>
+                    </Tooltip>
+                </View>
             )}
         </View>
     );

src/components/AvatarWithImagePicker.js

@@ -17,6 +17,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import variables from '../styles/variables';
 import CONST from '../CONST';
 import SpinningIndicatorAnimation from '../styles/animation/SpinningIndicatorAnimation';
+import Tooltip from './Tooltip';
 import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
@@ -175,14 +176,16 @@ class AvatarWithImagePicker extends React.Component {
                                             )
                                             : (
                                                 <>
-                                                    <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
-                                                        <Icon
-                                                            src={Camera}
-                                                            width={variables.iconSizeSmall}
-                                                            height={variables.iconSizeSmall}
-                                                            fill={themeColors.iconReversed}
-                                                        />
-                                                    </View>
+                                                    <Tooltip absolute text={this.props.translate('avatarWithImagePicker.editImage')}>
+                                                        <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
+                                                            <Icon
+                                                                src={Camera}
+                                                                width={variables.iconSizeSmall}
+                                                                height={variables.iconSizeSmall}
+                                                                fill={themeColors.iconReversed}
+                                                            />
+                                                        </View>
+                                                    </Tooltip>
                                                     <PopoverMenu
                                                         isVisible={this.state.isMenuVisible}
                                                         onClose={() => this.setState({isMenuVisible: false})}

src/components/FAB/FAB.js

@@ -7,6 +7,8 @@ import {Plus} from '../Icon/Expensicons';
 import styles, {getAnimatedFABStyle} from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import fabPropTypes from './fabPropTypes';
+import Tooltip from '../Tooltip';
+import withLocalize from '../withLocalize';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 AnimatedIcon.displayName = 'AnimatedIcon';
@@ -58,20 +60,22 @@ class FAB extends PureComponent {
         });
 
         return (
-            <AnimatedPressable
-                accessibilityLabel={this.props.accessibilityLabel}
-                accessibilityRole={this.props.accessibilityRole}
-                onPress={this.props.onPress}
-                style={[
-                    styles.floatingActionButton,
-                    getAnimatedFABStyle(rotate, backgroundColor),
-                ]}
-            >
-                <AnimatedIcon src={Plus} fill={fill} />
-            </AnimatedPressable>
+            <Tooltip absolute text={this.props.translate('common.new')}>
+                <AnimatedPressable
+                    accessibilityLabel={this.props.accessibilityLabel}
+                    accessibilityRole={this.props.accessibilityRole}
+                    onPress={this.props.onPress}
+                    style={[
+                        styles.floatingActionButton,
+                        getAnimatedFABStyle(rotate, backgroundColor),
+                    ]}
+                >
+                    <AnimatedIcon src={Plus} fill={fill} />
+                </AnimatedPressable>
+            </Tooltip>
         );
     }
 }
 
 FAB.propTypes = fabPropTypes;
-export default FAB;
+export default withLocalize(FAB);

src/components/FormAlertWithSubmitButton.js

@@ -16,6 +16,9 @@ const propTypes = {
     /** Whether to show the alert text */
     isAlertVisible: PropTypes.bool.isRequired,
 
+    /** Whether the button is disabled */
+    isDisabled: PropTypes.bool,
+
     /** Submit function */
     onSubmit: PropTypes.func.isRequired,
 
@@ -31,22 +34,29 @@ const propTypes = {
     /** Whether message is in html format */
     isMessageHtml: PropTypes.bool,
 
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     message: '',
+    isDisabled: false,
     isMessageHtml: false,
+    containerStyles: [],
 };
 
 const FormAlertWithSubmitButton = ({
     isAlertVisible,
+    isDisabled,
     onSubmit,
     buttonText,
     translate,
     onFixTheErrorsLinkPressed,
     message,
     isMessageHtml,
+    containerStyles,
 }) => {
     /**
      * @returns {React.Component}
@@ -91,7 +101,7 @@ const FormAlertWithSubmitButton = ({
     }
 
     return (
-        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
+        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...containerStyles]}>
             {isAlertVisible && (
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                     <Icon src={Exclamation} fill={colors.red} />
@@ -100,9 +110,10 @@ const FormAlertWithSubmitButton = ({
             )}
             <Button
                 success
+                pressOnEnter
                 text={buttonText}
                 onPress={onSubmit}
-                pressOnEnter
+                isDisabled={isDisabled}
             />
         </View>
     );

src/components/Tooltip/TooltipSense.js

@@ -0,0 +1,30 @@
+import _ from 'underscore';
+import CONST from '../../CONST';
+
+let active = false;
+
+/**
+ * Debounced function to deactive the TooltipSense after a specific time
+*/
+const debouncedDeactivate = _.debounce(() => {
+    active = false;
+}, CONST.TIMING.TOOLTIP_SENSE);
+
+function activate() {
+    active = true;
+    debouncedDeactivate.cancel();
+}
+
+function deactivate() {
+    return debouncedDeactivate();
+}
+
+function isActive() {
+    return active === true;
+}
+
+export default {
+    activate,
+    deactivate,
+    isActive,
+};

src/components/Tooltip/index.js

@@ -5,6 +5,7 @@ import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody';
 import Hoverable from '../Hoverable';
 import withWindowDimensions from '../withWindowDimensions';
 import {propTypes, defaultProps} from './TooltipPropTypes';
+import TooltipSense from './TooltipSense';
 
 class Tooltip extends PureComponent {
     constructor(props) {
@@ -36,6 +37,9 @@ class Tooltip extends PureComponent {
         this.tooltip = null;
 
         this.isComponentMounted = false;
+
+        // Whether the tooltip is first tooltip to activate the TooltipSense
+        this.isTooltipSenseInitiator = false;
         this.shouldStartShowAnimation = false;
         this.animation = new Animated.Value(0);
 
@@ -131,12 +135,19 @@ class Tooltip extends PureComponent {
                 // We may need this check due to the reason that the animation start will fire async
                 // and hideTooltip could fire before it thus keeping the Tooltip visible
                 if (this.shouldStartShowAnimation) {
-                    Animated.timing(this.animation, {
-                        toValue: 1,
-                        duration: 140,
-                        delay: 500,
-                        useNativeDriver: false,
-                    }).start();
+                    // When TooltipSense is active, immediately show the tooltip
+                    if (TooltipSense.isActive()) {
+                        this.animation.setValue(1);
+                    } else {
+                        this.isTooltipSenseInitiator = true;
+                        Animated.timing(this.animation, {
+                            toValue: 1,
+                            duration: 140,
+                            delay: 500,
+                            useNativeDriver: false,
+                        }).start();
+                    }
+                    TooltipSense.activate();
                 }
             });
     }
@@ -147,11 +158,18 @@ class Tooltip extends PureComponent {
     hideTooltip() {
         this.animation.stopAnimation();
         this.shouldStartShowAnimation = false;
-        Animated.timing(this.animation, {
-            toValue: 0,
-            duration: 140,
-            useNativeDriver: false,
-        }).start();
+        if (TooltipSense.isActive() && !this.isTooltipSenseInitiator) {
+            this.animation.setValue(0);
+        } else {
+            // Hide the first tooltip which initiated the TooltipSense with animation
+            this.isTooltipSenseInitiator = false;
+            Animated.timing(this.animation, {
+                toValue: 0,
+                duration: 140,
+                useNativeDriver: false,
+            }).start();
+        }
+        TooltipSense.deactivate();
     }
 
     render() {

src/languages/en.js

@@ -8,7 +8,7 @@ export default {
         attachment: 'Attachment',
         to: 'To',
         optional: 'Optional',
-        new: 'NEW',
+        new: 'New',
         search: 'Search',
         next: 'Next',
         goBack: 'Go back',
@@ -272,7 +272,7 @@ export default {
         changingYourPasswordPrompt: 'Changing your password will update your password for both your Expensify.com\nand New Expensify accounts.',
         currentPassword: 'Current password',
         newPassword: 'New password',
-        newPasswordPrompt: 'New password must be different than your old password, have at least 8 characters,\n1 capital letter, 1 lowercase letter, 1 number.',
+        newPasswordPrompt: 'New password must be different than your old password, have at least 8 characters,\n1 capital letter, 1 lowercase letter, and 1 number.',
         confirmNewPassword: 'Confirm new password',
     },
     addPayPalMePage: {
@@ -399,7 +399,7 @@ export default {
         confirmNewPassword: 'Confirm the password',
         setPassword: 'Set password',
         passwordsDontMatch: 'Passwords must match',
-        newPasswordPrompt: 'Your password must have at least 8 characters,\n1 capital letter, 1 lowercase letter, 1 number.',
+        newPasswordPrompt: 'Your password must have at least 8 characters,\n1 capital letter, 1 lowercase letter, and 1 number.',
         passwordFormTitle: 'Welcome back to the New Expensify! Please set your password.',
         passwordNotSet: 'We were unable to set your new password correctly.',
         accountNotValidated: 'We were unable to validate your account. The validation code may have expired.',
@@ -702,14 +702,9 @@ export default {
         },
         invite: {
             invitePeople: 'Invite new members',
-            invitePeoplePrompt: 'Invite new members to your workspace.',
             personalMessagePrompt: 'Add a personal message (optional)',
-            enterEmailOrPhone: 'Emails or phone numbers',
-            EmailOrPhonePlaceholder: 'Enter comma-separated list of emails or phone numbers',
-            pleaseEnterValidLogin: 'Please ensure the email or phone number is valid (e.g. +15005550006).',
-            pleaseEnterUniqueLogin: 'That user is already a member of this workspace.',
+            pleaseSelectUser: 'Please select a user from contacts.',
             genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.',
-            systemUserError: ({email}) => `Sorry, you cannot invite ${email} to a workspace.`,
             welcomeNote: ({workspaceName}) => `You have been invited to ${workspaceName}! Download the Expensify mobile app to start tracking your expenses.`,
         },
         editor: {

src/languages/es.js

@@ -8,7 +8,7 @@ export default {
         attachment: 'Archivo adjunto',
         to: 'A',
         optional: 'Opcional',
-        new: 'NUEVO',
+        new: 'Nuevo',
         search: 'Buscar',
         next: 'Siguiente',
         goBack: 'Regresar',
@@ -272,7 +272,7 @@ export default {
         changingYourPasswordPrompt: 'El cambio de contraseña va a afectar tanto a la cuenta de Expensify.com\ncomo la de Nuevo Expensify.',
         currentPassword: 'Contraseña actual',
         newPassword: 'Nueva contraseña',
-        newPasswordPrompt: 'La nueva contraseña tiene que ser diferente de la antigua, tener al menos 8 letras,\n1 letra mayúscula, 1 letra minúscula y 1 número.',
+        newPasswordPrompt: 'La nueva contraseña debe ser diferente de la antigua, tener al menos 8 caracteres,\n1 letra mayúscula, 1 letra minúscula y 1 número.',
         confirmNewPassword: 'Confirma la nueva contraseña',
     },
     addPayPalMePage: {
@@ -399,7 +399,7 @@ export default {
         confirmNewPassword: 'Confirma la contraseña',
         setPassword: 'Configura tu contraseña',
         passwordsDontMatch: 'Las contraseñas deben coincidir',
-        newPasswordPrompt: 'Su contraseña debe tener al menos 8 caracteres, \n1 letra mayúscula, 1 letra minúscula, 1 número.',
+        newPasswordPrompt: 'La contraseña debe tener al menos 8 caracteres, \n1 letra mayúscula, 1 letra minúscula y 1 número.',
         passwordFormTitle: '¡Bienvenido de vuelta al Nuevo Expensify! Por favor, elige una contraseña.',
         passwordNotSet: 'No pudimos establecer to contaseña correctamente.',
         accountNotValidated: 'No pudimos validar tu cuenta. Es posible que el enlace de validación haya caducado.',
@@ -704,14 +704,9 @@ export default {
         },
         invite: {
             invitePeople: 'Invitar nuevos miembros',
-            invitePeoplePrompt: 'Invita nuevos miembros a tu espacio de trabajo.',
             personalMessagePrompt: 'Agregar un mensaje personal (Opcional)',
-            enterEmailOrPhone: 'Correos electrónicos o números de teléfono',
-            EmailOrPhonePlaceholder: 'Introduce una lista de correos electrónicos o números de teléfono separado por comas',
-            pleaseEnterValidLogin: 'Asegúrese de que el correo electrónico o el número de teléfono sean válidos (e.g. +15005550006).',
-            pleaseEnterUniqueLogin: 'Ese usuario ya es miembro de este espacio de trabajo.',
+            pleaseSelectUser: 'Asegúrese de que el correo electrónico o el número de teléfono sean válidos (e.g. +15005550006).',
             genericFailureMessage: 'Se produjo un error al invitar al usuario al espacio de trabajo. Vuelva a intentarlo..',
-            systemUserError: ({email}) => `Lo sentimos, no puedes invitar a ${email} a un espacio de trabajo.`,
             welcomeNote: ({workspaceName}) => `¡Has sido invitado a ${workspaceName}! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`,
         },
         editor: {

src/libs/Navigation/CustomActions.js

@@ -88,5 +88,5 @@ function pushDrawerRoute(screenName, params, navigationRef) {
 
 export default {
     pushDrawerRoute,
-    navigateBackToDrawer: navigateBackToRootDrawer,
+    navigateBackToRootDrawer,
 };