Merge branch 'main' into delay-focus-for-android-only

src/CONST.js

@@ -208,6 +208,7 @@ const CONST = {
     CURRENCY: {
         USD: 'USD',
     },
+    EXAMPLE_PHONE_NUMBER: '+15005550006',
     CONCIERGE_CHAT_NAME: 'Concierge',
     CLOUDFRONT_URL,
     USE_EXPENSIFY_URL,
@@ -477,6 +478,7 @@ const CONST = {
     EMOJI_PICKER_ITEM_HEIGHT: 40,
     EMOJI_PICKER_HEADER_HEIGHT: 38,
     COMPOSER_MAX_HEIGHT: 125,
+    CHAT_FOOTER_MIN_HEIGHT: 65,
     CHAT_SKELETON_VIEW: {
         AVERAGE_ROW_HEIGHT: 80,
         HEIGHT_FOR_ROW_COUNT: {

src/components/ScreenWrapper/BaseScreenWrapper.js

@@ -0,0 +1,115 @@
+import {KeyboardAvoidingView, View} from 'react-native';
+import React from 'react';
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import CONST from '../../CONST';
+import KeyboardShortcut from '../../libs/KeyboardShortcut';
+import Navigation from '../../libs/Navigation/Navigation';
+import onScreenTransitionEnd from '../../libs/onScreenTransitionEnd';
+import * as StyleUtils from '../../styles/StyleUtils';
+import styles from '../../styles/styles';
+import HeaderGap from '../HeaderGap';
+import KeyboardShortcutsModal from '../KeyboardShortcutsModal';
+import OfflineIndicator from '../OfflineIndicator';
+import compose from '../../libs/compose';
+import withNavigation from '../withNavigation';
+import withWindowDimensions from '../withWindowDimensions';
+import ONYXKEYS from '../../ONYXKEYS';
+import {withNetwork} from '../OnyxProvider';
+import {propTypes, defaultProps} from './propTypes';
+
+class BaseScreenWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            didScreenTransitionEnd: false,
+        };
+    }
+
+    componentDidMount() {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
+        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            if (this.props.modal.willAlertModalBecomeVisible) {
+                return;
+            }
+
+            Navigation.dismissModal();
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
+
+        this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
+            this.setState({didScreenTransitionEnd: true});
+            this.props.onTransitionEnd();
+        });
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeEscapeKey) {
+            this.unsubscribeEscapeKey();
+        }
+        if (this.unsubscribeTransitionEnd) {
+            this.unsubscribeTransitionEnd();
+        }
+    }
+
+    render() {
+        return (
+            <SafeAreaInsetsContext.Consumer>
+                {(insets) => {
+                    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+                    const paddingStyle = {};
+
+                    if (this.props.includePaddingTop) {
+                        paddingStyle.paddingTop = paddingTop;
+                    }
+
+                    // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
+                    if (this.props.includePaddingBottom || this.props.network.isOffline) {
+                        paddingStyle.paddingBottom = paddingBottom;
+                    }
+
+                    return (
+                        <View
+                            style={[
+                                ...this.props.style,
+                                styles.flex1,
+                                paddingStyle,
+                            ]}
+                        >
+                            <KeyboardAvoidingView style={[styles.w100, styles.h100]} behavior={this.props.keyboardAvoidingViewBehavior}>
+                                <HeaderGap />
+                                {// If props.children is a function, call it to provide the insets to the children.
+                                    _.isFunction(this.props.children)
+                                        ? this.props.children({
+                                            insets,
+                                            didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                        })
+                                        : this.props.children
+                                }
+                                <KeyboardShortcutsModal />
+                                {this.props.isSmallScreenWidth && (
+                                    <OfflineIndicator />
+                                )}
+                            </KeyboardAvoidingView>
+                        </View>
+                    );
+                }}
+            </SafeAreaInsetsContext.Consumer>
+        );
+    }
+}
+
+BaseScreenWrapper.propTypes = propTypes;
+BaseScreenWrapper.defaultProps = defaultProps;
+
+export default compose(
+    withNavigation,
+    withWindowDimensions,
+    withOnyx({
+        modal: {
+            key: ONYXKEYS.MODAL,
+        },
+    }),
+    withNetwork(),
+)(BaseScreenWrapper);

src/components/ScreenWrapper/index.android.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import BaseScreenWrapper from './BaseScreenWrapper';
+import {defaultProps, propTypes} from './propTypes';
+
+const ScreenWrapper = props => (
+    <BaseScreenWrapper
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        keyboardAvoidingViewBehavior="height"
+    >
+        {props.children}
+    </BaseScreenWrapper>
+);
+ScreenWrapper.propTypes = propTypes;
+ScreenWrapper.defaultProps = defaultProps;
+
+export default ScreenWrapper;

src/components/ScreenWrapper/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import BaseScreenWrapper from './BaseScreenWrapper';
+import {defaultProps, propTypes} from './propTypes';
+
+const ScreenWrapper = props => (
+    <BaseScreenWrapper
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </BaseScreenWrapper>
+);
+ScreenWrapper.propTypes = propTypes;
+ScreenWrapper.defaultProps = defaultProps;
+
+export default ScreenWrapper;

src/components/ScreenWrapper/propTypes.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Array of additional styles to add */
+    style: PropTypes.arrayOf(PropTypes.object),
+
+    /** Returns a function as a child to pass insets to or a node to render without insets */
+    children: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.func,
+    ]).isRequired,
+
+    /** Whether to include padding bottom */
+    includePaddingBottom: PropTypes.bool,
+
+    /** Whether to include padding top */
+    includePaddingTop: PropTypes.bool,
+
+    // Called when navigated Screen's transition is finished.
+    onTransitionEnd: PropTypes.func,
+
+    /** The behavior to pass to the KeyboardAvoidingView, requires some trial and error depending on the layout/devices used.
+     *  Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */
+    keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']),
+
+    /** Details about any modals being used */
+    modal: PropTypes.shape({
+        /** Indicates when an Alert modal is about to be visible */
+        willAlertModalBecomeVisible: PropTypes.bool,
+    }),
+};
+
+const defaultProps = {
+    style: [],
+    includePaddingBottom: true,
+    includePaddingTop: true,
+    onTransitionEnd: () => {},
+    modal: {},
+    keyboardAvoidingViewBehavior: 'padding',
+};
+
+export {propTypes, defaultProps};

src/languages/en.js

@@ -81,7 +81,7 @@ export default {
         error: {
             invalidAmount: 'Invalid amount',
             acceptedTerms: 'You must accept the Terms of Service to continue',
-            phoneNumber: 'Please enter a valid phone number, with the country code (e.g. +1234567890)',
+            phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
         },
         please: 'Please',
         contactUs: 'contact us',
@@ -586,7 +586,7 @@ export default {
         callMeByMyName: 'Call me by my name',
     },
     messages: {
-        errorMessageInvalidPhone: 'Please enter a valid phone number without brackets or dashes. If you\'re outside the US please include your country code, eg. +447782339811',
+        errorMessageInvalidPhone: `Please enter a valid phone number without brackets or dashes. If you're outside the US please include your country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
     },
     onfidoStep: {
         acceptTerms: 'By continuing with the request to activate your Expensify wallet, you confirm that you have read, understand and accept ',
@@ -860,10 +860,9 @@ export default {
         invite: {
             invitePeople: 'Invite new members',
             personalMessagePrompt: 'Add a personal message (optional)',
-            pleaseSelectUser: 'Please select a user from contacts.',
             genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.',
             welcomeNote: ({workspaceName}) => `You have been invited to ${workspaceName || 'a workspace'}! Download the Expensify mobile app at use.expensify.com/download to start tracking your expenses.`,
-            pleaseEnterValidLogin: 'Please ensure the email or phone number is valid (e.g. +15005550006).',
+            pleaseEnterValidLogin: `Please ensure the email or phone number is valid (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
         },
         editor: {
             nameInputLabel: 'Name',