NewChatFix

src/CONST.js

@@ -59,7 +59,7 @@ const CONST = {
     },
     MESSAGES: {
         // eslint-disable-next-line max-len
-        NO_CONTACTS_FOUND: 'Don\'t see who you\'re looking for? Type their email or phone number to invite them to chat.',
+        NO_PHONE_NUMBER: 'Please enter a phone number including the country code e.g +447814266907',
         MAXIMUM_PARTICIPANTS_REACHED: 'You\'ve reached the maximum number of participants for a group chat.',
     },
     PRIORITY_MODE: {
@@ -81,7 +81,7 @@ const CONST = {
         PRIORITY_MODE: 'priorityMode',
         TIMEZONE: 'timeZone',
     },
-    DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
+    DEFAULT_TIME_ZONE: { automatic: true, selected: 'America/Los_Angeles' },
     PRONOUNS: {
         THEY_THEM_THEIRS: 'They/them/theirs',
         SHE_HER_HERS: 'She/her/hers',
@@ -100,4 +100,4 @@ const CONST = {
     PASSWORD_COMPLEXITY_REGEX_STRING: '^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{8,}$',
 };
 
-export default CONST;
+export default CONST;

src/libs/OptionsListUtils.js

@@ -4,10 +4,10 @@ import Onyx from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import lodashOrderBy from 'lodash/orderBy';
 import Str from 'expensify-common/lib/str';
-import {getDefaultAvatar} from './actions/PersonalDetails';
+import { getDefaultAvatar } from './actions/PersonalDetails';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
-import {getReportParticipantsTitle} from './reportUtils';
+import { getReportParticipantsTitle } from './reportUtils';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -78,15 +78,15 @@ function getSearchText(report, personalDetailList) {
  * @param {Boolean} showChatPreviewLine
  * @returns {Object}
  */
-function createOption(personalDetailList, report, draftComments, activeReportID, {showChatPreviewLine = false}) {
+function createOption(personalDetailList, report, draftComments, activeReportID, { showChatPreviewLine = false }) {
     const hasMultipleParticipants = personalDetailList.length > 1;
     const personalDetail = personalDetailList[0];
     const hasDraftComment = report
         && (report.reportID !== activeReportID)
         && draftComments
         && lodashGet(draftComments, `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${report.reportID}`, '').length > 0;
 
-    const lastActorDetails = report ? _.find(personalDetailList, {login: report.lastActorEmail}) : null;
+    const lastActorDetails = report ? _.find(personalDetailList, { login: report.lastActorEmail }) : null;
     const lastMessageText = report
         ? (hasMultipleParticipants && lastActorDetails
             ? `${lastActorDetails.displayName}: `
@@ -213,7 +213,7 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
     ));
 
     // Always exclude already selected options and the currently logged in user
-    const loginOptionsToExclude = [...selectedOptions, {login: currentUserLogin}];
+    const loginOptionsToExclude = [...selectedOptions, { login: currentUserLogin }];
     if (includeRecentReports) {
         for (let i = 0; i < allReportOptions.length; i++) {
             // Stop adding options to the recentReports array when we reach the maxRecentReportsToShow value
@@ -248,7 +248,7 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
 
             // Add this login to the exclude list so it won't appear when we process the personal details
             if (reportOption.login) {
-                loginOptionsToExclude.push({login: reportOption.login});
+                loginOptionsToExclude.push({ login: reportOption.login });
             }
         }
     }
@@ -263,8 +263,8 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
         // Next loop over all personal details removing any that are selectedUsers or recentChats
         _.each(allPersonalDetailsOptions, (personalDetailOption) => {
             if (_.some(loginOptionsToExclude, loginOptionToExclude => (
-                loginOptionToExclude.login === personalDetailOption.login
-            ))) {
+                    loginOptionToExclude.login === personalDetailOption.login
+                ))) {
                 return;
             }
 
@@ -407,16 +407,21 @@ function getSidebarOptions(reports, personalDetails, draftComments, activeReport
  *
  * @param {Boolean} hasSelectableOptions
  * @param {Boolean} hasUserToInvite
+ * @param {String} searchValue
  * @param {Boolean} [maxParticipantsReached]
  * @return {String}
  */
-function getHeaderMessage(hasSelectableOptions, hasUserToInvite, maxParticipantsReached = false) {
+function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, maxParticipantsReached = false) {
     if (maxParticipantsReached) {
         return CONST.MESSAGES.MAXIMUM_PARTICIPANTS_REACHED;
     }
 
     if (!hasSelectableOptions && !hasUserToInvite) {
-        return CONST.MESSAGES.NO_CONTACTS_FOUND;
+        if (/^\d+$/.test(searchValue)) {
+            return CONST.MESSAGES.NO_PHONE_NUMBER;
+        }
+
+        return searchValue;
     }
 
     return '';
@@ -429,4 +434,4 @@ export {
     getSidebarOptions,
     getHeaderMessage,
     getPersonalDetailsForLogins,
-};
+};

src/pages/NewChatPage.js

@@ -1,14 +1,14 @@
-import React, {Component} from 'react';
-import {View} from 'react-native';
+import React, { Component } from 'react';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
+import { withOnyx } from 'react-native-onyx';
 import OptionsSelector from '../components/OptionsSelector';
-import {getNewChatOptions, getHeaderMessage} from '../libs/OptionsListUtils';
+import { getNewChatOptions, getHeaderMessage } from '../libs/OptionsListUtils';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
-import {fetchOrCreateChatReport} from '../libs/actions/Report';
+import { fetchOrCreateChatReport } from '../libs/actions/Report';
 import KeyboardSpacer from '../components/KeyboardSpacer';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
+import withWindowDimensions, { windowDimensionsPropTypes } from '../components/withWindowDimensions';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import ScreenWrapper from '../components/ScreenWrapper';
@@ -77,7 +77,7 @@ class NewChatPage extends Component {
             title: 'CONTACTS',
             data: this.state.personalDetails,
             shouldShow: this.state.personalDetails.length > 0,
-            indexOffset: sections.reduce((prev, {data}) => prev + data.length, 0),
+            indexOffset: sections.reduce((prev, { data }) => prev + data.length, 0),
         });
 
         if (this.state.userToInvite) {
@@ -108,6 +108,7 @@ class NewChatPage extends Component {
         const headerMessage = getHeaderMessage(
             this.state.personalDetails.length !== 0,
             Boolean(this.state.userToInvite),
+            this.state.searchValue
         );
 
         return (
@@ -119,24 +120,24 @@ class NewChatPage extends Component {
                 <View style={[styles.flex1, styles.w100]}>
                     <OptionsSelector
                         sections={sections}
-                        value={this.state.searchValue}
-                        onSelectRow={this.createNewChat}
+            value = { this.state.searchValue }
+            onSelectRow = { this.createNewChat }
                         onChangeText={(searchValue = '') => {
-                            const {
-                                personalDetails,
-                                userToInvite,
-                            } = getNewChatOptions(
-                                this.props.reports,
-                                this.props.personalDetails,
-                                searchValue,
-                            );
-                            this.setState({
-                                searchValue,
-                                userToInvite,
-                                personalDetails,
-                            });
+                    const {
+                        personalDetails,
+                        userToInvite,
+                    } = getNewChatOptions(
+                        this.props.reports,
+                        this.props.personalDetails,
+                        searchValue,
+                    );
+                    this.setState({
+                        searchValue,
+                        userToInvite,
+                        personalDetails,
+                    });
                         }}
-                        headerMessage={headerMessage}
+            headerMessage = { headerMessage }
                         hideSectionHeaders
                         disableArrowKeysActions
                         hideAdditionalOptionStates
@@ -161,4 +162,4 @@ export default withWindowDimensions(withOnyx({
     session: {
         key: ONYXKEYS.SESSION,
     },
-})(NewChatPage));
+})(NewChatPage));