From ab5627212dc271f1c836b44bfc620cc3a9b861ff Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Wed, 29 Jan 2020 10:00:00 +0200
Subject: [PATCH] Add ability to invite contact by phone number

---
 .../add-people-dialog/web/AddPeopleDialog.js  | 57 ++++++++++++++-----
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
index 5333691e3..93d06f73c 100644
--- a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
+++ b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
@@ -271,6 +271,21 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
 
     _parseQueryResults: (?Array<Object>) => Array<Object>;
 
+    /**
+     * Returns the avatar component for a user.
+     *
+     * @param {Object} user - The user
+     * @param {string} className - The CSS class for the avatar component
+     * @private
+     * @returns {ReactElement}
+     */
+    _getAvatar(user, className = 'avatar-small') {
+        return (<Avatar
+            className = { className }
+            status = { user.status }
+            url = { user.avatar } />);
+    }
+
     /**
      * Processes results from requesting available numbers and people by munging
      * each result into a format {@code MultiSelectAutocomplete} can use for
@@ -283,24 +298,40 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
      * search autocomplete.
      */
     _parseQueryResults(response = []) {
-        const { t } = this.props;
+        const { t, _dialOutEnabled } = this.props;
         const users = response.filter(item => item.type !== 'phone');
-        const userDisplayItems = users.map(user => {
-            return {
-                content: user.name,
-                elemBefore: <Avatar
-                    className = { 'avatar-small' }
-                    status = { user.status }
-                    url = { user.avatar } />,
+        const userDisplayItems = [];
+
+        users.forEach(user => {
+            const { name, phone } = user;
+            const tagAvatar = this._getAvatar(user, 'avatar-xsmall');
+            const elemAvatar = this._getAvatar(user);
+
+            userDisplayItems.push({
+                content: name,
+                elemBefore: elemAvatar,
                 item: user,
                 tag: {
-                    elemBefore: <Avatar
-                        className = { 'avatar-xsmall' }
-                        status = { user.status }
-                        url = { user.avatar } />
+                    elemBefore: tagAvatar
                 },
                 value: user.id || user.user_id
-            };
+            });
+
+            if (phone && _dialOutEnabled) {
+                userDisplayItems.push({
+                    filterValues: [ name, phone ],
+                    content: `${phone} (${name})`,
+                    elemBefore: elemAvatar,
+                    item: {
+                        type: 'phone',
+                        number: phone
+                    },
+                    tag: {
+                        elemBefore: tagAvatar
+                    },
+                    value: phone
+                });
+            }
         });
 
         const numbers = response.filter(item => item.type === 'phone');