Merge pull request #5254 from Santhosh-Sellavel/iou_participants_search_validation_message

IOU Participant page search validation

Author: marcaaron

src/libs/OptionsListUtils.js

@@ -721,7 +721,9 @@ function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, ma
         return translate(preferredLocale, 'messages.noPhoneNumber');
     }
 
-    if (!hasSelectableOptions && !hasUserToInvite) {
+    // Without a search value, it would be very confusing to see a search validation message.
+    // Therefore, this skips the validation when there is no search value.
+    if (searchValue && !hasSelectableOptions && !hasUserToInvite) {
         if (/^\d+$/.test(searchValue)) {
             return translate(preferredLocale, 'messages.noPhoneNumber');
         }

src/pages/NewChatPage.js

@@ -123,7 +123,7 @@ class NewChatPage extends Component {
     render() {
         const sections = this.getSections();
         const headerMessage = getHeaderMessage(
-            this.state.personalDetails.length !== 0,
+            this.state.personalDetails.length + this.state.recentReports.length !== 0,
             Boolean(this.state.userToInvite),
             this.state.searchValue,
         );

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import {getNewChatOptions, isCurrentUser} from '../../../../libs/OptionsListUtils';
+import {getHeaderMessage, getNewChatOptions, isCurrentUser} from '../../../../libs/OptionsListUtils';
 import OptionsSelector from '../../../../components/OptionsSelector';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
@@ -115,6 +115,11 @@ class IOUParticipantsRequest extends Component {
 
     render() {
         const sections = this.getSections();
+        const headerMessage = getHeaderMessage(
+            this.state.personalDetails.length + this.state.recentReports.length !== 0,
+            Boolean(this.state.userToInvite),
+            this.state.searchValue,
+        );
         return (
             <OptionsSelector
                 sections={sections}
@@ -139,6 +144,7 @@ class IOUParticipantsRequest extends Component {
                         personalDetails,
                     });
                 }}
+                headerMessage={headerMessage}
                 disableArrowKeysActions
                 hideAdditionalOptionStates
                 forceTextUnreadStyle

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js

@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import styles from '../../../../styles/styles';
 import OptionsSelector from '../../../../components/OptionsSelector';
-import {getNewGroupOptions, isCurrentUser} from '../../../../libs/OptionsListUtils';
+import {getHeaderMessage, getNewGroupOptions, isCurrentUser} from '../../../../libs/OptionsListUtils';
 import CONST, {EXCLUDED_IOU_EMAILS} from '../../../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import compose from '../../../../libs/compose';
@@ -198,6 +198,11 @@ class IOUParticipantsSplit extends Component {
     render() {
         const maxParticipantsReached = this.props.participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
         const sections = this.getSections(maxParticipantsReached);
+        const headerMessage = !maxParticipantsReached ? getHeaderMessage(
+            this.state.personalDetails.length + this.state.recentReports.length !== 0,
+            Boolean(this.state.userToInvite),
+            this.state.searchValue,
+        ) : '';
         return (
             <>
                 <View style={[styles.flex1, styles.w100]}>
@@ -230,6 +235,7 @@ class IOUParticipantsSplit extends Component {
                                 personalDetails,
                             });
                         }}
+                        headerMessage={headerMessage}
                         disableArrowKeysActions
                         hideAdditionalOptionStates
                         forceTextUnreadStyle