fix: merge main

src/components/Modal/BaseModal.js

@@ -16,11 +16,15 @@ const propTypes = {
 
     /** The ref to the modal container */
     forwardedRef: PropTypes.func,
+
+    /** Ensure that callback and trap deactivation are in the same loop on the web platform */
+    shouldUseOnDismiss: PropTypes.bool,
 };
 
 const defaultProps = {
     ...modalDefaultProps,
     forwardedRef: () => {},
+    shouldUseOnDismiss: false,
 };
 
 class BaseModal extends PureComponent {
@@ -98,7 +102,8 @@ class BaseModal extends PureComponent {
                     this.props.onModalShow();
                 }}
                 propagateSwipe={this.props.propagateSwipe}
-                onModalHide={this.hideModal}
+                onDismiss={this.props.shouldUseOnDismiss ? this.hideModal : () => {}}
+                onModalHide={!this.props.shouldUseOnDismiss ? this.hideModal : () => {}}
                 onSwipeComplete={this.props.onClose}
                 swipeDirection={swipeDirection}
                 isVisible={this.props.isVisible}

src/components/Modal/index.web.js

@@ -29,6 +29,7 @@ const Modal = (props) => {
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            shouldUseOnDismiss={props.fullscreen}
             onModalHide={hideModal}
             onModalShow={showModal}
         >

src/components/ScreenWrapper/index.js

@@ -1,4 +1,4 @@
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -17,6 +17,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../OnyxProvider';
 import {propTypes, defaultProps} from './propTypes';
 import SafeAreaConsumer from '../SafeAreaConsumer';
+import withKeyboardState from '../withKeyboardState';
 
 class ScreenWrapper extends React.Component {
     constructor(props) {
@@ -51,6 +52,18 @@ class ScreenWrapper extends React.Component {
             this.setState({didScreenTransitionEnd: true});
             this.props.onEntryTransitionEnd();
         });
+
+        // We need to have this prop to remove keyboard before going away from the screen, to avoid previous screen look weird for a brief moment,
+        // also we need to have generic control in future - to prevent closing keyboard for some rare cases in which beforeRemove has limitations
+        // described here https://reactnavigation.org/docs/preventing-going-back/#limitations
+        if (this.props.shouldDismissKeyboardBeforeClose) {
+            this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
+                if (!this.props.isKeyboardShown) {
+                    return;
+                }
+                Keyboard.dismiss();
+            });
+        }
     }
 
     /**
@@ -75,6 +88,9 @@ class ScreenWrapper extends React.Component {
         if (this.unsubscribeTransitionStart) {
             this.unsubscribeTransitionStart();
         }
+        if (this.beforeRemoveSubscription) {
+            this.beforeRemoveSubscription();
+        }
     }
 
     render() {
@@ -131,6 +147,7 @@ ScreenWrapper.defaultProps = defaultProps;
 export default compose(
     withNavigation,
     withWindowDimensions,
+    withKeyboardState,
     withOnyx({
         modal: {
             key: ONYXKEYS.MODAL,

src/components/ScreenWrapper/propTypes.js

@@ -28,11 +28,15 @@ const propTypes = {
         /** Indicates when an Alert modal is about to be visible */
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
+
+    /** Whether to dismiss keyboard before leaving a screen */
+    shouldDismissKeyboardBeforeClose: PropTypes.bool,
 };
 
 const defaultProps = {
     style: [],
     includeSafeAreaPaddingBottom: true,
+    shouldDismissKeyboardBeforeClose: true,
     includePaddingTop: true,
     onEntryTransitionEnd: () => {},
     modal: {},

src/libs/ValidationUtils.js

@@ -215,16 +215,16 @@ function meetsAgeRequirements(date) {
  * @returns {String}
  */
 function getAgeRequirementError(date, minimumAge, maximumAge) {
-    const recentDate = moment().subtract(minimumAge, 'years');
-    const longAgoDate = moment().subtract(maximumAge, 'years');
+    const recentDate = moment().startOf('day').subtract(minimumAge, 'years');
+    const longAgoDate = moment().startOf('day').subtract(maximumAge, 'years');
     const testDate = moment(date);
     if (!testDate.isValid()) {
         return Localize.translateLocal('common.error.dateInvalid');
     }
     if (testDate.isBetween(longAgoDate, recentDate)) {
         return '';
     }
-    if (testDate.isAfter(recentDate)) {
+    if (testDate.isSameOrAfter(recentDate)) {
         return Localize.translateLocal('privatePersonalDetails.error.dateShouldBeBefore', {dateString: recentDate.format(CONST.DATE.MOMENT_FORMAT_STRING)});
     }
     return Localize.translateLocal('privatePersonalDetails.error.dateShouldBeAfter', {dateString: longAgoDate.format(CONST.DATE.MOMENT_FORMAT_STRING)});

src/pages/signin/ChangeExpensifyLoginLink.js

@@ -35,9 +35,7 @@ const ChangeExpensifyLoginLink = props => (
             <Text>
                 {props.translate('common.not')}
                 &nbsp;
-                {Str.isSMSLogin(props.credentials.login || '')
-                    ? props.toLocalPhone(Str.removeSMSDomain(props.credentials.login || ''))
-                    : Str.removeSMSDomain(props.credentials.login || '')}
+                {Str.removeSMSDomain(props.credentials.login)}
                 {'? '}
             </Text>
         )}

src/pages/signin/SignInPage.js

@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import Str from 'expensify-common/lib/str';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import compose from '../../libs/compose';
@@ -91,9 +92,10 @@ class SignInPage extends Component {
                 // We will only know this after a user signs in successfully, without their 2FA code
                 welcomeText = this.props.translate('validateCodeForm.enterAuthenticatorCode');
             } else {
+                const userLogin = Str.removeSMSDomain(this.props.credentials.login);
                 welcomeText = this.props.account.validated
-                    ? this.props.translate('welcomeText.welcomeBackEnterMagicCode', {login: this.props.credentials.login})
-                    : this.props.translate('welcomeText.welcomeEnterMagicCode', {login: this.props.credentials.login});
+                    ? this.props.translate('welcomeText.welcomeBackEnterMagicCode', {login: userLogin})
+                    : this.props.translate('welcomeText.welcomeEnterMagicCode', {login: userLogin});
             }
         } else if (showPasswordForm) {
             welcomeText = this.props.translate('welcomeText.welcomeBack');

src/pages/workspace/WorkspaceMembersPage.js

@@ -97,12 +97,10 @@ class WorkspaceMembersPage extends React.Component {
      */
     getWorkspaceMembers() {
         /**
-         * clientMemberEmails should be filtered to only pass valid members, failure to do so
-         * will remove all non-existing members that should be displayed (e.g. non-existing members that should display an error).
-         * This is due to how calling `Onyx::merge` on array fields overwrites the array.
-         * see https://github.com/Expensify/App/issues/12265#issuecomment-1307889721 for more context
+         * We filter clientMemberEmails to only pass members without errors
+         * Otherwise, the members with errors would immediately be removed before the user has a chance to read the error
          */
-        const clientMemberEmails = _.keys(_.pick(this.props.policyMemberList, member => member.role));
+        const clientMemberEmails = _.keys(_.pick(this.props.policyMemberList, member => _.isEmpty(member.errors)));
         Policy.openWorkspaceMembersPage(this.props.route.params.policyID, clientMemberEmails);
     }