From 27d990d0b51b5658d961cfa9b37507fb0ec3f60f Mon Sep 17 00:00:00 2001
From: Rafael Ferreira <rafaelblink@gmail.com>
Date: Mon, 21 Dec 2020 23:53:35 -0300
Subject: [PATCH 1/3] [FEATURE] Omnichannel / Directory - Contacts Tab (#19904)

* [FEATURE] Directory page starting contacts/visitors tab.

* [IMPROVE] Removing unused variable.

* [IMPROVE] Directory link tooltip to just "Directory" instead "Omnichannel Directory"

* Implementing improves in contact tab, routes, last chat column mock and new button aside filter

* Contextual bar and routes for info and new contacts

* Contact endpoints for omnichannel directory forms.

* "Last Chat" missing translation

* Omnichannel Directory - Create new contact form.

* view a specific contact and improves at contact form.

* "edit" contact form with same "create" component

* Show custom fields in Contact Info page.

* handling custom fields on edit/create contacts.

* Showing only "custom fields" that are visible and with "visitor" scope.

* CreatedAt data in Contact/Visitor and ContactInfo.

* Add LastChat data in Contact/Visitor.

* Show LastChat in Contact Info page and Grid

* Email validation improvement and asterisk on required field

* Starting "contact manager" on edit/create page.

* show contact manager user info

* closing contextbar when you click at cancel button, removing chat history button and fixing contact manager field.

* Change useEndpointDataExperimental to useEndpointData.

* Custom fields required with asterisk.

* just using the LivechatVisitors.findOneById method

* changing POST method to use existing method to save visitors/contacts, renaming contactManager data.

* PUT not accepted so we'll use POST to save and update contacts.

* Set last chat when create a new room.

* Changing place of updateLastChat method.

* Using correct translation aliases.

* Contact Manager Info to EE folder and renaming ContactForm.

* Moving EE contact manager input to proper path.

* verify if user has authorization to see contacts page.

* Fixing blank return useless.

* using callback to lastChat

* Add small improvements to the code.

Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>
---
 app/livechat/server/api/lib/visitors.js       |   1 +
 app/livechat/server/api/rest.js               |   1 +
 app/livechat/server/api/v1/contact.js         |  44 ++++
 app/livechat/server/api/v1/room.js            |   2 +
 .../server/hooks/saveContactLastChat.js       |  12 +
 app/livechat/server/index.js                  |   1 +
 app/livechat/server/lib/Livechat.js           |  37 ++-
 client/components/CustomFieldsForm.js         |  10 +-
 client/components/FilterByText.tsx            |  11 +-
 client/components/UserCard.js                 |   2 +-
 client/contexts/OmnichannelContext.ts         |   1 +
 client/omnichannel/directory/ContactForm.js   | 213 ++++++++++++++++++
 client/omnichannel/directory/ContactInfo.js   | 112 +++++++++
 client/omnichannel/directory/ContactTab.js    |  97 ++++++++
 .../directory/OmnichannelDirectoryPage.js     |  74 ++++++
 client/omnichannel/directory/Skeleton.js      |  11 +
 client/routes.js                              |  10 +
 client/sidebar/sections/Omnichannel.js        |   9 +-
 ee/client/omnichannel/ContactManager.js       |  27 +++
 .../additionalForms/ContactManager.js         |  18 ++
 .../omnichannel/additionalForms/register.js   |   1 +
 packages/rocketchat-i18n/i18n/en.i18n.json    |  24 ++
 packages/rocketchat-i18n/i18n/pt-BR.i18n.json |   3 +
 23 files changed, 706 insertions(+), 15 deletions(-)
 create mode 100644 app/livechat/server/api/v1/contact.js
 create mode 100644 app/livechat/server/hooks/saveContactLastChat.js
 create mode 100644 client/omnichannel/directory/ContactForm.js
 create mode 100644 client/omnichannel/directory/ContactInfo.js
 create mode 100644 client/omnichannel/directory/ContactTab.js
 create mode 100644 client/omnichannel/directory/OmnichannelDirectoryPage.js
 create mode 100644 client/omnichannel/directory/Skeleton.js
 create mode 100644 ee/client/omnichannel/ContactManager.js
 create mode 100644 ee/client/omnichannel/additionalForms/ContactManager.js

diff --git a/app/livechat/server/api/lib/visitors.js b/app/livechat/server/api/lib/visitors.js
index d8cf2763571d..c0366bf1ac69 100644
--- a/app/livechat/server/api/lib/visitors.js
+++ b/app/livechat/server/api/lib/visitors.js
@@ -144,6 +144,7 @@ export async function findVisitorsByEmailOrPhoneOrNameOrUsername({ userId, term,
 			phone: 1,
 			livechatData: 1,
 			visitorEmails: 1,
+			lastChat: 1,
 		},
 	});
 
diff --git a/app/livechat/server/api/rest.js b/app/livechat/server/api/rest.js
index a63794bf1db0..1991a9f2fce9 100644
--- a/app/livechat/server/api/rest.js
+++ b/app/livechat/server/api/rest.js
@@ -9,3 +9,4 @@ import './v1/customField.js';
 import './v1/room.js';
 import './v1/videoCall.js';
 import './v1/transfer.js';
+import './v1/contact.js';
diff --git a/app/livechat/server/api/v1/contact.js b/app/livechat/server/api/v1/contact.js
new file mode 100644
index 000000000000..4099fb49910a
--- /dev/null
+++ b/app/livechat/server/api/v1/contact.js
@@ -0,0 +1,44 @@
+import { Match, check } from 'meteor/check';
+
+import { API } from '../../../../api/server';
+import { Livechat } from '../../lib/Livechat';
+import {
+	LivechatVisitors,
+} from '../../../../models';
+
+const createToken = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+
+API.v1.addRoute('omnichannel/contact', { authRequired: true }, {
+	post() {
+		try {
+			check(this.bodyParams, {
+				_id: Match.Maybe(String),
+				name: String,
+				email: Match.Maybe(String),
+				phone: Match.Maybe(String),
+				livechatData: Match.Maybe(Object),
+				contactManager: Match.Maybe(Object),
+			});
+
+			const contactParams = this.bodyParams;
+			if (this.bodyParams.phone) {
+				contactParams.phone = { number: this.bodyParams.phone };
+			}
+
+			const data = Object.assign(contactParams, { token: createToken() });
+			const contact = Livechat.registerGuest(data);
+			return API.v1.success({ contact });
+		} catch (e) {
+			return API.v1.failure(e);
+		}
+	},
+	get() {
+		check(this.queryParams, {
+			contactId: String,
+		});
+
+		const contact = Promise.await(LivechatVisitors.findOneById(this.queryParams.contactId));
+
+		return API.v1.success({ contact });
+	},
+});
diff --git a/app/livechat/server/api/v1/room.js b/app/livechat/server/api/v1/room.js
index 3526bf2cd623..8ce9d42014af 100644
--- a/app/livechat/server/api/v1/room.js
+++ b/app/livechat/server/api/v1/room.js
@@ -11,6 +11,7 @@ import { Livechat } from '../../lib/Livechat';
 import { normalizeTransferredByData } from '../../lib/Helper';
 import { findVisitorInfo } from '../lib/visitors';
 
+
 API.v1.addRoute('livechat/room', {
 	get() {
 		const defaultCheckParams = {
@@ -40,6 +41,7 @@ API.v1.addRoute('livechat/room', {
 
 			const rid = roomId || Random.id();
 			const room = Promise.await(getRoom({ guest, rid, agent, extraParams }));
+
 			return API.v1.success(room);
 		} catch (e) {
 			return API.v1.failure(e);
diff --git a/app/livechat/server/hooks/saveContactLastChat.js b/app/livechat/server/hooks/saveContactLastChat.js
new file mode 100644
index 000000000000..91d560d65879
--- /dev/null
+++ b/app/livechat/server/hooks/saveContactLastChat.js
@@ -0,0 +1,12 @@
+import { callbacks } from '../../../callbacks';
+import { Livechat } from '../lib/Livechat';
+
+callbacks.add('livechat.newRoom', (room) => {
+	const { _id, v: { _id: guestId } } = room;
+
+	const lastChat = {
+		_id,
+		ts: new Date(),
+	};
+	Livechat.updateLastChat(guestId, lastChat);
+}, callbacks.priority.MEDIUM, 'livechat-save-last-chat');
diff --git a/app/livechat/server/index.js b/app/livechat/server/index.js
index ad8f2ca1c2d7..435627266cf4 100644
--- a/app/livechat/server/index.js
+++ b/app/livechat/server/index.js
@@ -19,6 +19,7 @@ import './hooks/processRoomAbandonment';
 import './hooks/saveLastVisitorMessageTs';
 import './hooks/markRoomNotResponded';
 import './hooks/sendTranscriptOnClose';
+import './hooks/saveContactLastChat';
 import './methods/addAgent';
 import './methods/addManager';
 import './methods/changeLivechatStatus';
diff --git a/app/livechat/server/lib/Livechat.js b/app/livechat/server/lib/Livechat.js
index d5fd07399ebf..dbd53debd3c0 100644
--- a/app/livechat/server/lib/Livechat.js
+++ b/app/livechat/server/lib/Livechat.js
@@ -149,7 +149,6 @@ export const Livechat = {
 		if (guest.name) {
 			message.alias = guest.name;
 		}
-		// return messages;
 		return _.extend(sendMessage(guest, message, room), { newRoom, showConnecting: this.showConnecting() });
 	},
 
@@ -193,7 +192,7 @@ export const Livechat = {
 		return true;
 	},
 
-	registerGuest({ token, name, email, department, phone, username, connectionData } = {}) {
+	registerGuest({ token, name, email, department, phone, username, livechatData, contactManager, connectionData } = {}) {
 		check(token, String);
 
 		let userId;
@@ -201,6 +200,7 @@ export const Livechat = {
 			$set: {
 				token,
 			},
+			$unset: { },
 		};
 
 		const user = LivechatVisitors.getVisitorByToken(token, { fields: { _id: 1 } });
@@ -219,6 +219,7 @@ export const Livechat = {
 			} else {
 				const userData = {
 					username,
+					ts: new Date(),
 				};
 
 				if (settings.get('Livechat_Allow_collect_and_store_HTTP_header_informations')) {
@@ -234,29 +235,45 @@ export const Livechat = {
 			}
 		}
 
+		if (name) {
+			updateUser.$set.name = name;
+		}
+
 		if (phone) {
 			updateUser.$set.phone = [
 				{ phoneNumber: phone.number },
 			];
+		} else {
+			updateUser.$unset.phone = 1;
 		}
 
 		if (email && email.trim() !== '') {
 			updateUser.$set.visitorEmails = [
 				{ address: email },
 			];
+		} else {
+			updateUser.$unset.visitorEmails = 1;
 		}
 
-		if (name) {
-			updateUser.$set.name = name;
+		if (livechatData) {
+			updateUser.$set.livechatData = livechatData;
+		} else {
+			updateUser.$unset.livechatData = 1;
+		}
+
+		if (contactManager) {
+			updateUser.$set.contactManager = contactManager;
+		} else {
+			updateUser.$unset.contactManager = 1;
 		}
 
 		if (!department) {
-			Object.assign(updateUser, { $unset: { department: 1 } });
+			updateUser.$unset.department = 1;
 		} else {
 			const dep = LivechatDepartment.findOneByIdOrName(department);
 			updateUser.$set.department = dep && dep._id;
 		}
-
+		if (_.isEmpty(updateUser.$unset)) { delete updateUser.$unset; }
 		LivechatVisitors.updateById(userId, updateUser);
 
 		return userId;
@@ -1155,6 +1172,14 @@ export const Livechat = {
 
 		return LivechatRooms.findOneById(roomId);
 	},
+	updateLastChat(contactId, lastChat) {
+		const updateUser = {
+			$set: {
+				lastChat,
+			},
+		};
+		LivechatVisitors.updateById(contactId, updateUser);
+	},
 };
 
 settings.get('Livechat_history_monitor_type', (key, value) => {
diff --git a/client/components/CustomFieldsForm.js b/client/components/CustomFieldsForm.js
index dd5958929007..9af38197c558 100644
--- a/client/components/CustomFieldsForm.js
+++ b/client/components/CustomFieldsForm.js
@@ -24,7 +24,7 @@ const CustomTextInput = ({ name, required, minLength, maxLength, setState, state
 	}, [state, required, minLength, t]);
 
 	return useMemo(() => <Field className={className}>
-		<Field.Label>{t(name)}</Field.Label>
+		<Field.Label>{t(name)}{required && '*'}</Field.Label>
 		<Field.Row>
 			<TextInput name={name} error={verify} maxLength={maxLength} flexGrow={1} value={state} required={required} onChange={(e) => setState(e.currentTarget.value)}/>
 		</Field.Row>
@@ -38,7 +38,7 @@ const CustomSelect = ({ name, required, options = {}, setState, state, className
 	const verify = useMemo(() => (!state.length && required ? t('Field_required') : ''), [required, state.length, t]);
 
 	return useMemo(() => <Field className={className}>
-		<Field.Label>{t(name)}</Field.Label>
+		<Field.Label>{t(name)}{required && '*'}</Field.Label>
 		<Field.Row>
 			<Select name={name} error={verify} flexGrow={1} value={state} options={mappedOptions} required={required} onChange={(val) => setState(val)}/>
 		</Field.Row>
@@ -66,12 +66,12 @@ const CustomFieldsAssembler = ({ formValues, formHandlers, customFields, ...prop
 	return null;
 });
 
-export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData, onLoadFields = () => {}, ...props }) {
-	const customFieldsJson = useSetting('Accounts_CustomFields');
+export default function CustomFieldsForm({ jsonCustomFields, customFieldsData, setCustomFieldsData, onLoadFields = () => {}, ...props }) {
+	const accountsCustomFieldsJson = useSetting('Accounts_CustomFields');
 
 	const [customFields] = useState(() => {
 		try {
-			return JSON.parse(customFieldsJson || '{}');
+			return jsonCustomFields || JSON.parse(accountsCustomFieldsJson || '{}');
 		} catch {
 			return {};
 		}
diff --git a/client/components/FilterByText.tsx b/client/components/FilterByText.tsx
index 54fa2113f33a..105789d22d62 100644
--- a/client/components/FilterByText.tsx
+++ b/client/components/FilterByText.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, TextInput } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Button } from '@rocket.chat/fuselage';
 import React, { FC, ChangeEvent, FormEvent, memo, useCallback, useEffect, useState } from 'react';
 
 import { useTranslation } from '../contexts/TranslationContext';
@@ -6,11 +6,17 @@ import { useTranslation } from '../contexts/TranslationContext';
 type FilterByTextProps = {
 	placeholder?: string;
 	onChange: (filter: { text: string }) => void;
+	displayButton: boolean;
+	textButton: string;
+	onButtonClick: () => void;
 };
 
 const FilterByText: FC<FilterByTextProps> = ({
 	placeholder,
 	onChange: setFilter,
+	displayButton: display = false,
+	textButton = '',
+	onButtonClick,
 	...props
 }) => {
 	const t = useTranslation();
@@ -29,8 +35,9 @@ const FilterByText: FC<FilterByTextProps> = ({
 		event.preventDefault();
 	}, []);
 
-	return <Box mb='x16' is='form' onSubmit={handleFormSubmit} display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={handleFormSubmit} display='flex' flexDirection='row' {...props}>
 		<TextInput placeholder={placeholder ?? t('Search')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleInputChange} value={text} />
+		<Button onClick={onButtonClick} display={display ? 'block' : 'none'} mis='x8' primary>{textButton}</Button>
 	</Box>;
 };
 
diff --git a/client/components/UserCard.js b/client/components/UserCard.js
index b6c153c81223..edbfdce3e78e 100644
--- a/client/components/UserCard.js
+++ b/client/components/UserCard.js
@@ -28,7 +28,7 @@ export const Info = (props) => (
 	/>
 );
 
-export const Username = ({ name, status = <Status.Offline/>, title }) => <Box display='flex' title={title} flexShrink={0} alignItems='center' fontScale='s2' color='default' withTruncatedText>
+export const Username = ({ name, status = <Status.Offline/>, title, ...props }) => <Box {...props} display='flex' title={title} flexShrink={0} alignItems='center' fontScale='s2' color='default' withTruncatedText>
 	{status} <Box mis='x8' flexGrow={1} withTruncatedText>{name}</Box>
 </Box>;
 
diff --git a/client/contexts/OmnichannelContext.ts b/client/contexts/OmnichannelContext.ts
index 47958ec9e7fb..18a985d75c58 100644
--- a/client/contexts/OmnichannelContext.ts
+++ b/client/contexts/OmnichannelContext.ts
@@ -23,4 +23,5 @@ export const useOmnichannelRouteConfig = (): OmichannelRoutingConfig | undefined
 export const useOmnichannelAgentAvailable = (): boolean => useOmnichannel().agentAvailable;
 export const useQueuedInquiries = (): Inquiries => useOmnichannel().inquiries;
 export const useOmnichannelQueueLink = (): string => '/livechat-queue';
+export const useOmnichannelDirectoryLink = (): string => '/omnichannel-directory';
 export const useOmnichannelEnabled = (): boolean => useOmnichannel().enabled;
diff --git a/client/omnichannel/directory/ContactForm.js b/client/omnichannel/directory/ContactForm.js
new file mode 100644
index 000000000000..79292727dbdb
--- /dev/null
+++ b/client/omnichannel/directory/ContactForm.js
@@ -0,0 +1,213 @@
+import React, { useState, useMemo } from 'react';
+import { Field, TextInput, Icon, ButtonGroup, Button, Box } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useSubscription } from 'use-subscription';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import VerticalBar from '../../components/VerticalBar';
+import { useForm } from '../../hooks/useForm';
+import { isEmail } from '../../../app/utils';
+import { useComponentDidUpdate } from '../../hooks/useComponentDidUpdate';
+import { useEndpointAction } from '../../hooks/useEndpointAction';
+import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import { FormSkeleton } from './Skeleton';
+import CustomFieldsForm from '../../components/CustomFieldsForm';
+import { hasAtLeastOnePermission } from '../../../app/authorization';
+import { AsyncStatePhase } from '../../hooks/useAsyncState';
+import { formsSubscription } from '../../views/omnichannel/additionalForms';
+
+const initialValues = {
+	name: '',
+	email: '',
+	phone: '',
+	username: '',
+};
+
+const getInitialValues = (data) => {
+	if (!data) {
+		return initialValues;
+	}
+
+	const { contact: { name, phone, visitorEmails, livechatData, contactManager } } = data;
+
+	return {
+		name: name ?? '',
+		email: visitorEmails ? visitorEmails[0].address : '',
+		phone: phone ? phone[0].phoneNumber : '',
+		livechatData: livechatData ?? '',
+		username: contactManager?.username ?? '',
+	};
+};
+
+export function ContactEditWithData({ id, reload, close }) {
+	const t = useTranslation();
+	const { value: data, phase: state, error } = useEndpointData(`omnichannel/contact?contactId=${ id }`);
+
+	if ([state].includes(AsyncStatePhase.LOADING)) {
+		return <FormSkeleton/>;
+	}
+
+	if (error || !data || !data.contact) {
+		return <Box mbs='x16'>{t('Contact_not_found')}</Box>;
+	}
+
+	return <ContactNewEdit id={id} data={data} reload={reload} close={close} />;
+}
+
+export function ContactNewEdit({ id, data, reload, close }) {
+	const t = useTranslation();
+
+	const canViewCustomFields = () => hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
+
+	const { values, handlers } = useForm(getInitialValues(data));
+	const eeForms = useSubscription(formsSubscription);
+
+	const {
+		useContactManager = () => {},
+	} = eeForms;
+
+	const ContactManager = useContactManager();
+
+	const {
+		handleName,
+		handleEmail,
+		handlePhone,
+		handleUsername,
+	} = handlers;
+	const {
+		name,
+		email,
+		phone,
+		username,
+	} = values;
+
+	const { values: valueCustom, handlers: handleValueCustom } = useForm({
+		livechatData: values.livechatData,
+	});
+
+	const { handleLivechatData } = handleValueCustom;
+	const { livechatData } = valueCustom;
+
+	const [nameError, setNameError] = useState();
+	const [emailError, setEmailError] = useState();
+	const [phoneError] = useState();
+
+	const { value: allCustomFields, phase: state } = useEndpointData('livechat/custom-fields');
+
+	const jsonConverterToValidFormat = (customFields) => {
+		const jsonObj = {};
+		// eslint-disable-next-line no-return-assign
+		customFields.map(({ _id, visibility, options, scope, defaultValue, required }) =>
+			(visibility === 'visible' & scope === 'visitor')
+			&& (jsonObj[_id] = {
+				type: options ? 'select' : 'text',
+				required,
+				defaultValue,
+				options: options && options.split(',').map((item) => item.trim()),
+			}));
+		return jsonObj;
+	};
+
+	const jsonCustomField = useMemo(() => (allCustomFields
+		&& allCustomFields.customFields
+		? jsonConverterToValidFormat(allCustomFields.customFields) : {}), [allCustomFields]);
+
+	const saveContact = useEndpointAction('POST', 'omnichannel/contact');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	useComponentDidUpdate(() => {
+		setNameError(!name ? t('The_field_is_required', t('Name')) : '');
+	}, [t, name]);
+	useComponentDidUpdate(() => {
+		setEmailError(email && !isEmail(email) ? t('Validate_email_address') : undefined);
+	}, [t, email]);
+
+	const handleSave = useMutableCallback(async (e) => {
+		e.preventDefault();
+		let error = false;
+		if (!name) {
+			setNameError(t('The_field_is_required', 'name'));
+			error = true;
+		}
+		if (email && !isEmail(email)) {
+			setEmailError(t('Validate_email_address'));
+			error = true;
+		}
+
+		if (error) {
+			return;
+		}
+
+		const payload = {
+			name,
+			email,
+			phone,
+		};
+
+		if (id) {
+			payload._id = id;
+		}
+
+		if (livechatData) { payload.livechatData = livechatData; }
+		if (username) { payload.contactManager = { username }; }
+
+		try {
+			await saveContact(payload);
+			dispatchToastMessage({ type: 'success', message: t('Saved') });
+			reload();
+			close();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const formIsValid = name && !emailError;
+
+
+	if ([state].includes(AsyncStatePhase.LOADING)) {
+		return <FormSkeleton/>;
+	}
+
+	return <>
+		<VerticalBar.ScrollableContent is='form'>
+			<Field>
+				<Field.Label>{t('Name')}*</Field.Label>
+				<Field.Row>
+					<TextInput error={nameError} flexGrow={1} value={name} onChange={handleName} placeholder={t('Insert_Contact_Name')} />
+				</Field.Row>
+				<Field.Error>
+					{nameError}
+				</Field.Error>
+			</Field>
+			<Field>
+				<Field.Label>{t('Email')}</Field.Label>
+				<Field.Row>
+					<TextInput error={emailError} flexGrow={1} value={email} onChange={handleEmail} placeholder='example@domain.com' addon={<Icon name='mail' size='x20'/>}/>
+				</Field.Row>
+				<Field.Error>
+					{t(emailError)}
+				</Field.Error>
+			</Field>
+			<Field>
+				<Field.Label>{t('Phone')}</Field.Label>
+				<Field.Row>
+					<TextInput error={phoneError} flexGrow={1} value={phone} onChange={handlePhone} />
+				</Field.Row>
+				<Field.Error>
+					{t(phoneError)}
+				</Field.Error>
+			</Field>
+			{ canViewCustomFields() && allCustomFields
+			&& <CustomFieldsForm jsonCustomFields={jsonCustomField} customFieldsData={livechatData} setCustomFieldsData={handleLivechatData} /> }
+			{ ContactManager && <ContactManager value={username} handler={handleUsername} /> }
+		</VerticalBar.ScrollableContent>
+		<VerticalBar.Footer>
+			<ButtonGroup stretch>
+				<Button flexGrow={1} onClick={close}>{t('Cancel')}</Button>
+				<Button mie='none' flexGrow={1} onClick={handleSave} disabled={!formIsValid} primary>{t('Save')}</Button>
+			</ButtonGroup>
+		</VerticalBar.Footer>
+	</>;
+}
diff --git a/client/omnichannel/directory/ContactInfo.js b/client/omnichannel/directory/ContactInfo.js
new file mode 100644
index 000000000000..4b12b5102538
--- /dev/null
+++ b/client/omnichannel/directory/ContactInfo.js
@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Margins, ButtonGroup, Button, Icon } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import VerticalBar from '../../components/VerticalBar';
+import UserCard from '../../components/UserCard';
+import { FormSkeleton } from './Skeleton';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useRoute } from '../../contexts/RouterContext';
+import { hasPermission } from '../../../app/authorization';
+import { useFormatDate } from '../../hooks/useFormatDate';
+import { AsyncStatePhase } from '../../hooks/useAsyncState';
+import { ContactManagerInfo } from '../../../ee/client/omnichannel/ContactManager';
+
+const wordBreak = css`
+	word-break: break-word;
+`;
+const Label = (props) => <Box fontScale='p2' color='default' {...props} />;
+const Info = ({ className, ...props }) => <UserCard.Info className={[className, wordBreak]} flexShrink={0} {...props}/>;
+
+export function ContactInfo({ id }) {
+	const t = useTranslation();
+	const directoryRoute = useRoute('omnichannel-directory');
+
+	const { value: allCustomFields, phase: stateCustomFields } = useEndpointData('livechat/custom-fields');
+
+	const [customFields, setCustomFields] = useState([]);
+
+	const formatDate = useFormatDate();
+
+
+	const canViewCustomFields = () => hasPermission('view-livechat-room-customfields');
+
+	const onEditButtonClick = useMutableCallback(() => directoryRoute.push({
+		tab: 'contacts',
+		context: 'edit',
+		id,
+	}));
+
+	useEffect(() => {
+		if (allCustomFields) {
+			const { customFields: customFieldsAPI } = allCustomFields;
+			setCustomFields(customFieldsAPI);
+		}
+	}, [allCustomFields, stateCustomFields]);
+
+	const { value: data, phase: state, error } = useEndpointData(`omnichannel/contact?contactId=${ id }`);
+	const { contact: { name, username, visitorEmails, phone, livechatData, ts, lastChat, contactManager } } = data || { contact: {} };
+	if (state === AsyncStatePhase.LOADING) {
+		return <FormSkeleton />;
+	}
+
+	if (error || !data || !data.contact) {
+		return <Box mbs='x16'>{t('Contact_not_found')}</Box>;
+	}
+
+	const checkIsVisibleAndScopeVisitor = (key) => {
+		const field = customFields.find(({ _id }) => _id === key);
+		if (field && field.visibility === 'visible' && field.scope === 'visitor') { return true; }
+		return false;
+	};
+
+	return <>
+		<VerticalBar.ScrollableContent p='x24'>
+			<Margins block='x4'>
+				{username && username !== name && <>
+					<Label>{t('Name/Username')}</Label>
+					<Info>{`${ name }/${ username }`}</Info>
+				</>}
+				{visitorEmails && visitorEmails.length && <>
+					<Label>{t('Email')}</Label>
+					<Info>{visitorEmails[0].address}</Info>
+				</>}
+				{phone && phone.length && <>
+					<Label>{t('Phone')}</Label>
+					<Info>{phone[0].phoneNumber}</Info>
+				</>}
+				{ts && <>
+					<Label>{t('Created_at')}</Label>
+					<Info>{formatDate(ts)}</Info>
+				</>}
+
+				{lastChat && <>
+					<Label>{t('Last_Chat')}</Label>
+					<Info>{formatDate(lastChat.ts)}</Info>
+				</>}
+				{canViewCustomFields() && livechatData && Object.keys(livechatData).map((key) => <Box key={key}>
+					{ checkIsVisibleAndScopeVisitor(key) && livechatData[key]
+					&& <>
+						<Label>{key}</Label>
+						<Info>{livechatData[key]}</Info>
+					</>
+					}
+				</Box>)
+				}
+				{ contactManager && <>
+					<Label>{t('Contact_Manager')}</Label>
+					<ContactManagerInfo username={contactManager.username} />
+				</>
+				}
+			</Margins>
+		</VerticalBar.ScrollableContent>
+		<VerticalBar.Footer>
+			<ButtonGroup stretch>
+				{/* <Button><Icon name='history' size='x20'/> {t('Chat_History')}</Button> */}
+				<Button onClick={onEditButtonClick}><Icon name='pencil' size='x20'/> {t('Edit')}</Button>
+			</ButtonGroup>
+		</VerticalBar.Footer>
+	</>;
+}
diff --git a/client/omnichannel/directory/ContactTab.js b/client/omnichannel/directory/ContactTab.js
new file mode 100644
index 000000000000..3feade6ea733
--- /dev/null
+++ b/client/omnichannel/directory/ContactTab.js
@@ -0,0 +1,97 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { Table } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import GenericTable from '../../components/GenericTable';
+import FilterByText from '../../components/FilterByText';
+import { useRoute } from '../../contexts/RouterContext';
+import { useFormatDate } from '../../hooks/useFormatDate';
+import { usePermission } from '../../contexts/AuthorizationContext';
+import { NotAuthorizedPage } from '../../components/NotAuthorizedPage';
+
+
+const useQuery = ({ text, itemsPerPage, current }, [column, direction]) => useMemo(() => ({
+	term: text,
+	sort: JSON.stringify({ [column]: direction === 'asc' ? 1 : -1 }),
+	...itemsPerPage && { count: itemsPerPage },
+	...current && { offset: current },
+}), [column, current, direction, itemsPerPage, text]);
+
+function ContactTable({ setContactReload }) {
+	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
+	const [sort, setSort] = useState(['username', 'asc']);
+	const t = useTranslation();
+
+	const debouncedParams = useDebouncedValue(params, 500);
+	const debouncedSort = useDebouncedValue(sort, 500);
+	const query = useQuery(debouncedParams, debouncedSort);
+	const directoryRoute = useRoute('omnichannel-directory');
+	const formatDate = useFormatDate();
+
+	const onHeaderClick = useMutableCallback((id) => {
+		const [sortBy, sortDirection] = sort;
+
+		if (sortBy === id) {
+			return setSort([id, sortDirection === 'asc' ? 'desc' : 'asc']);
+		}
+		setSort([id, 'asc']);
+	});
+
+	const onButtonNewClick = useMutableCallback(() => directoryRoute.push({
+		tab: 'contacts',
+		context: 'new',
+	}));
+
+
+	const onRowClick = useMutableCallback((id) => () => directoryRoute.push({
+		tab: 'contacts',
+		context: 'info',
+		id,
+	}));
+
+	const { value: data, reload } = useEndpointData('livechat/visitors.search', query) || {};
+
+	useEffect(() => {
+		setContactReload(() => reload);
+	}, [reload, setContactReload]);
+
+
+	const header = useMemo(() => [
+		<GenericTable.HeaderCell key={'username'} direction={sort[1]} active={sort[0] === 'username'} onClick={onHeaderClick} sort='username'>{t('Username')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name'>{t('Name')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'phone'} direction={sort[1]} active={sort[0] === 'phone'} onClick={onHeaderClick} sort='phone'>{t('Phone')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'email'} direction={sort[1]} active={sort[0] === 'visitorEmails.address'} onClick={onHeaderClick} sort='visitorEmails.address'>{t('Email')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'lastchat'} direction={sort[1]} active={sort[0] === 'lastchat'} onClick={onHeaderClick} sort='visitorEmails.address'>{t('Last_Chat')}</GenericTable.HeaderCell>,
+	].filter(Boolean), [sort, onHeaderClick, t]);
+
+
+	const renderRow = useCallback(({ _id, username, name, visitorEmails, phone, lastChat }) => <Table.Row key={_id} tabIndex={0} role='link' onClick={onRowClick(_id)} action qa-user-id={_id}>
+		<Table.Cell withTruncatedText>{username}</Table.Cell>
+		<Table.Cell withTruncatedText>{name}</Table.Cell>
+		<Table.Cell withTruncatedText>{phone && phone.length && phone[0].phoneNumber}</Table.Cell>
+		<Table.Cell withTruncatedText>{visitorEmails && visitorEmails.length && visitorEmails[0].address}</Table.Cell>
+		<Table.Cell withTruncatedText>{lastChat && formatDate(lastChat.ts)}</Table.Cell>
+	</Table.Row>, [formatDate, onRowClick]);
+
+	return <GenericTable
+		header={header}
+		renderRow={renderRow}
+		results={data && data.visitors}
+		total={data && data.total}
+		setParams={setParams}
+		params={params}
+		renderFilter={({ onChange, ...props }) => <FilterByText displayButton={true} textButton={t('New_Contact')} onButtonClick={onButtonNewClick} onChange={onChange} {...props} />}
+	/>;
+}
+
+export default function ContactTab(props) {
+	const hasAccess = usePermission('view-l-room');
+
+	if (hasAccess) {
+		return <ContactTable {...props} />;
+	}
+
+	return <NotAuthorizedPage />;
+}
diff --git a/client/omnichannel/directory/OmnichannelDirectoryPage.js b/client/omnichannel/directory/OmnichannelDirectoryPage.js
new file mode 100644
index 000000000000..3b4ebc3ea227
--- /dev/null
+++ b/client/omnichannel/directory/OmnichannelDirectoryPage.js
@@ -0,0 +1,74 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { Tabs, Icon, Box } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import Page from '../../components/Page';
+import { useRoute, useRouteParameter } from '../../contexts/RouterContext';
+import ContactTab from './ContactTab';
+import VerticalBar from '../../components/VerticalBar';
+import { ContactNewEdit, ContactEditWithData } from './ContactForm';
+import { ContactInfo } from './ContactInfo';
+
+
+const OmnichannelDirectoryPage = () => {
+	const t = useTranslation();
+
+	const defaultTab = 'contacts';
+
+	const tab = useRouteParameter('tab');
+	const directoryRoute = useRoute('omnichannel-directory');
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	const handleTabClick = useCallback((tab) => () => directoryRoute.push({ tab }), [directoryRoute]);
+
+	const [contactReload, setContactReload] = useState();
+
+	useEffect(() => {
+		if (!tab) {
+			return directoryRoute.replace({ tab: defaultTab });
+		}
+	}, [directoryRoute, tab, defaultTab]);
+
+	const ContactContextualBar = useCallback(() => {
+		if (!context) {
+			return '';
+		}
+		const handleVerticalBarCloseButtonClick = () => {
+			directoryRoute.push({});
+		};
+
+		return <VerticalBar className={'contextual-bar'}>
+			<VerticalBar.Header>
+				{context === 'new' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('New_Contact')}</Box>}
+				{context === 'info' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('Contact_Profile')}</Box>}
+				{context === 'edit' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='pencil' size='x20' /> {t('Edit_Contact_Profile')}</Box>}
+				<VerticalBar.Close onClick={handleVerticalBarCloseButtonClick} />
+			</VerticalBar.Header>
+
+			{context === 'new' && <ContactNewEdit reload={contactReload} close={handleVerticalBarCloseButtonClick} />}
+			{context === 'info' && <ContactInfo reload={contactReload} id={id} />}
+			{context === 'edit' && <ContactEditWithData id={id} reload={contactReload} close={handleVerticalBarCloseButtonClick} />}
+
+		</VerticalBar>;
+	}, [context, t, contactReload, directoryRoute, id]);
+
+	return <Page flexDirection='row'>
+		<Page>
+			<Page.Header title={t('Omnichannel')} />
+			<Tabs flexShrink={0} >
+				<Tabs.Item selected={tab === 'contacts'} onClick={handleTabClick('contacts')}>{t('Contacts')}</Tabs.Item>
+				<Tabs.Item selected={tab === 'chats'} onClick={handleTabClick('chats')}>{t('Chats')}</Tabs.Item>
+			</Tabs>
+			<Page.Content>
+				{
+					(tab === 'contacts' && <ContactTab setContactReload={setContactReload} />)
+				}
+			</Page.Content>
+		</Page>
+		<ContactContextualBar />
+	</Page>;
+};
+
+OmnichannelDirectoryPage.displayName = 'DirectoryOmnichannelPage';
+export default OmnichannelDirectoryPage;
diff --git a/client/omnichannel/directory/Skeleton.js b/client/omnichannel/directory/Skeleton.js
new file mode 100644
index 000000000000..2fc5e9097c14
--- /dev/null
+++ b/client/omnichannel/directory/Skeleton.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+
+export const FormSkeleton = (props) => <Box w='full' pb='x24' {...props}>
+	<Skeleton mbe='x8' />
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x8'/>
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x8'/>
+</Box>;
diff --git a/client/routes.js b/client/routes.js
index 474880b57b64..820864f9edbe 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -103,6 +103,16 @@ FlowRouter.route('/directory/:tab?', {
 	}],
 });
 
+FlowRouter.route('/omnichannel-directory/:tab?/:context?/:id?', {
+	name: 'omnichannel-directory',
+	action: () => {
+		renderRouteComponent(() => import('./omnichannel/directory/OmnichannelDirectoryPage'), { template: 'main', region: 'center' });
+	},
+	triggersExit: [function() {
+		$('.main-content').addClass('rc-old');
+	}],
+});
+
 FlowRouter.route('/account/:group?', {
 	name: 'account',
 	action: () => {
diff --git a/client/sidebar/sections/Omnichannel.js b/client/sidebar/sections/Omnichannel.js
index 84b0c2d84fd4..3f827f58018c 100644
--- a/client/sidebar/sections/Omnichannel.js
+++ b/client/sidebar/sections/Omnichannel.js
@@ -3,7 +3,7 @@ import { Sidebar } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useMethod } from '../../contexts/ServerContext';
-import { useOmnichannelShowQueueLink, useOmnichannelAgentAvailable, useOmnichannelQueueLink } from '../../contexts/OmnichannelContext';
+import { useOmnichannelShowQueueLink, useOmnichannelAgentAvailable, useOmnichannelQueueLink, useOmnichannelDirectoryLink } from '../../contexts/OmnichannelContext';
 
 const OmnichannelSection = React.memo((props) => {
 	const method = useMethod('livechat:changeLivechatStatus');
@@ -11,6 +11,7 @@ const OmnichannelSection = React.memo((props) => {
 	const agentAvailable = useOmnichannelAgentAvailable();
 	const showOmnichannelQueueLink = useOmnichannelShowQueueLink();
 	const queueLink = useOmnichannelQueueLink();
+	const directoryLink = useOmnichannelDirectoryLink();
 
 	const icon = {
 		title: agentAvailable ? t('Available') : t('Not_Available'),
@@ -18,11 +19,17 @@ const OmnichannelSection = React.memo((props) => {
 		...agentAvailable && { success: 1 },
 	};
 
+	const directoryIcon = {
+		title: t('Directory'),
+		icon: 'contact',
+	};
+
 	return <Sidebar.TopBar.ToolBox { ...props }>
 		<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
 		<Sidebar.TopBar.Actions>
 			{showOmnichannelQueueLink && <Sidebar.TopBar.Action icon='queue' title={t('Queue')} is='a' href={queueLink}/> }
 			<Sidebar.TopBar.Action {...icon} onClick={() => { method(); }}/>
+			<Sidebar.TopBar.Action {...directoryIcon} href={directoryLink} is='a' />
 		</Sidebar.TopBar.Actions>
 	</Sidebar.TopBar.ToolBox>;
 });
diff --git a/ee/client/omnichannel/ContactManager.js b/ee/client/omnichannel/ContactManager.js
new file mode 100644
index 000000000000..284810695b5b
--- /dev/null
+++ b/ee/client/omnichannel/ContactManager.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+
+import { useEndpointData } from '../../../client/hooks/useEndpointData';
+import { AsyncStatePhase } from '../../../client/hooks/useAsyncState';
+import UserAvatar from '../../../client/components/avatar/UserAvatar';
+import { UserStatus } from '../../../client/components/UserStatus';
+import UserCard from '../../../client/components/UserCard';
+
+const wordBreak = css`
+	word-break: break-word;
+`;
+const Info = ({ className, ...props }) => <UserCard.Info className={[className, wordBreak]} flexShrink={0} {...props}/>;
+
+export function ContactManagerInfo({ username }) {
+	const { value: data, phase: state } = useEndpointData(`users.info?username=${ username }`);
+	if (!data && state === AsyncStatePhase.LOADING) { return null; }
+	const { user: { name, status } } = data;
+	return <>
+		<Info style={{ display: 'flex' }}>
+			<UserAvatar title={username} username={username} />
+			<UserCard.Username mis='x10' name={username} status={<UserStatus status={status} />} />
+			<Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>({name})</Box>
+		</Info>
+	</>;
+}
diff --git a/ee/client/omnichannel/additionalForms/ContactManager.js b/ee/client/omnichannel/additionalForms/ContactManager.js
new file mode 100644
index 000000000000..6be754f6026b
--- /dev/null
+++ b/ee/client/omnichannel/additionalForms/ContactManager.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Field } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import { UserAutoComplete } from '../../../../client/components/AutoComplete';
+
+export const ContactManager = ({ value, handler }) => {
+	const t = useTranslation();
+
+	return <Field>
+		<Field.Label>{t('Contact_Manager')}</Field.Label>
+		<Field.Row>
+			<UserAutoComplete value={value} onChange={handler}/>
+		</Field.Row>
+	</Field>;
+};
+
+export default ContactManager;
diff --git a/ee/client/omnichannel/additionalForms/register.js b/ee/client/omnichannel/additionalForms/register.js
index 4ab79bba3d6c..826282275fe1 100644
--- a/ee/client/omnichannel/additionalForms/register.js
+++ b/ee/client/omnichannel/additionalForms/register.js
@@ -20,4 +20,5 @@ hasLicense('livechat-enterprise').then((enabled) => {
 	registerForm({ useBusinessHoursTimeZone: () => useMemo(() => lazy(() => import('./BusinessHoursTimeZone')), []) });
 	registerForm({ useBusinessHoursMultiple: () => useMemo(() => lazy(() => import('./BusinessHoursMultiple')), []) });
 	registerForm({ useCurrentChatTags: () => useMemo(() => lazy(() => import('../tags/CurrentChatTags')), []) });
+	registerForm({ useContactManager: () => useMemo(() => lazy(() => import('../additionalForms/ContactManager')), []) });
 });
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 021e8eb2f9ff..f204e1d4381e 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -843,6 +843,9 @@
   "Contact": "Contact",
   "Contact_Chat_History": "Contact Chat History",
   "Contains_Security_Fixes": "Contains Security Fixes",
+  "Contact_Manager": "Contact Manager",
+  "Contact_not_found": "Contact not found",
+  "Contact_Profile": "Contact Profile",
   "Content": "Content",
   "Continue": "Continue",
   "Continuous_sound_notifications_for_new_livechat_room": "Continuous sound notifications for new omnichannel room",
@@ -1377,6 +1380,11 @@
   "edit-room-avatar_description": "Permission to edit a room's avatar.",
   "edit-room-retention-policy": "Edit Room's Retention Policy",
   "edit-room-retention-policy_description": "Permission to edit a room’s retention policy, to automatically delete messages in it",
+  "Edit_Contact_Profile": "Edit Contact Profile",
+  "Edit_Custom_Field": "Edit Custom Field",
+  "Edit_Department": "Edit Department",
+  "Edit_previous_message": "`%s` - Edit previous message",
+  "Edit_Trigger": "Edit Trigger",
   "edited": "edited",
   "Editing_room": "Editing room",
   "Editing_user": "Editing user",
@@ -1983,6 +1991,8 @@
   "Instance_Record": "Instance Record",
   "Instructions": "Instructions",
   "Instructions_to_your_visitor_fill_the_form_to_send_a_message": "Instructions to your visitor fill the form to send a message",
+  "Invitation_HTML_Default": "<h1>You have been invited to <strong>[Site_Name]</strong></h1><p>Go to [Site_URL] and try the best open source chat solution available today!</p>",
+  "Insert_Contact_Name": "Insert the Contact Name",
   "Insurance": "Insurance",
   "Integration_added": "Integration has been added",
   "Integration_Advanced_Settings": "Advanced Settings",
@@ -2155,6 +2165,7 @@
   "Last_30_days": "Last 30 Days",
   "Last_90_days": "Last 90 Days",
   "Last_active": "Last active",
+  "Last_Chat": "Last Chat",
   "Last_login": "Last login",
   "Last_Message": "Last Message",
   "Last_Message_At": "Last Message At",
@@ -2689,6 +2700,7 @@
   "New_chat_in_queue": "New chat in queue",
   "New_chat_priority": "Priority Changed: __user__ changed the priority to __priority__",
   "New_chat_transfer": "New Chat Transfer: __transfer__",
+  "New_Contact": "New Contact",
   "New_Custom_Field": "New Custom Field",
   "New_Department": "New Department",
   "New_discussion": "New discussion",
@@ -2810,6 +2822,7 @@
   "Old Colors": "Old Colors",
   "Old Colors (minor)": "Old Colors (minor)",
   "Older_than": "Older than",
+  "Omnichannel_Directory": "Omnichannel Directory",
   "Omnichannel_appearance": "Omnichannel Appearance",
   "Omnichannel_External_Frame": "External Frame",
   "Omnichannel_External_Frame_Enabled": "External frame enabled",
@@ -3336,6 +3349,17 @@
   "Send_invitation_email_success": "You have successfully sent an invitation email to the following addresses:",
   "Send_me_the_code_again": "Send me the code again",
   "Send_request_on": "Send Request on",
+  "Agent_messages": "Agent Messages",
+  "Chat_close": "Chat Close",
+  "Chats_removed": "Chats Removed",
+  "Chat_removed": "Chat Removed",
+  "Chat_queued": "Chat Queued",
+  "Chat_start": "Chat Start",
+  "Chat_taken": "Chat Taken",
+  "Chat_History": "Chat History",
+  "Forwarding": "Forwarding",
+  "Offline_messages": "Offline Messages",
+  "Visitor_message": "Visitor Messages",
   "Send_request_on_agent_message": "Send Request on Agent Messages",
   "Send_request_on_chat_close": "Send Request on Chat Close",
   "Send_request_on_chat_queued": "Send request on Chat Queued",
diff --git a/packages/rocketchat-i18n/i18n/pt-BR.i18n.json b/packages/rocketchat-i18n/i18n/pt-BR.i18n.json
index c41e383f2d14..ebf62da29a50 100644
--- a/packages/rocketchat-i18n/i18n/pt-BR.i18n.json
+++ b/packages/rocketchat-i18n/i18n/pt-BR.i18n.json
@@ -740,6 +740,7 @@
   "Consumer_Goods": "Bens de consumo",
   "Contact": "Contato",
   "Contact_Chat_History": "Histórico do bate-papo do contato",
+  "Contact_not_found": "Contato não encontrado",
   "Contains_Security_Fixes": "Contém correções de segurança",
   "Content": "Conteúdo",
   "Continue": "Continuar",
@@ -1888,6 +1889,7 @@
   "Language": "Idioma",
   "Language_Not_set": "Não específico",
   "Language_Version": "Versão em Português",
+  "Last_Chat": "Último Chat",
   "Last_login": "Último login",
   "Last_Message": "Última mensagem",
   "Last_Message_At": "Última mensagem em",
@@ -2439,6 +2441,7 @@
   "Old Colors": "Cores antigas",
   "Old Colors (minor)": "Cores antigas (menores)",
   "Older_than": "Mais velho que",
+  "Omnichannel_Directory": "Diretório Omnichannel",
   "Omnichannel_External_Frame": "Frame Externo",
   "Omnichannel_External_Frame_Enabled": "Frame Externo habilitado",
   "Omnichannel_External_Frame_Encryption_JWK": "Chave de criptografia (JWK)",

From a4221a40e46a223d4889307978c5f751ab6f1a73 Mon Sep 17 00:00:00 2001
From: Rafael Ferreira <rafaelblink@gmail.com>
Date: Tue, 22 Dec 2020 01:13:32 -0300
Subject: [PATCH 2/3] [FEATURE] Omnichannel / Directory - Chats Tab (#19930)

* [FEATURE] Directory page starting contacts/visitors tab.

* [IMPROVE] Removing unused variable.

* [IMPROVE] Directory link tooltip to just "Directory" instead "Omnichannel Directory"

* Creating omnichannel directory - chat tab page.

* Get logged user and passing to query.

* Navigate to conversation page on click at row.

* Missing translation of "Chat duration"

* Contact name column translation

* Sorting by "Closed At" column and adding tags below "Contact Name"

* Responsive tags in Chat tab

* Add permission to see chats tab and removing useless comment.

* changes after merge with develop

* after merge

* Revert "after merge"

This reverts commit 8e1860f83964e3eba062433f3956610092756f49.

* Fix blank line missing.

* showing chat tab.

Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>
---
 client/omnichannel/directory/ChatTab.js       | 97 +++++++++++++++++++
 .../directory/OmnichannelDirectoryPage.js     |  2 +
 packages/rocketchat-i18n/i18n/en.i18n.json    |  2 +
 3 files changed, 101 insertions(+)
 create mode 100644 client/omnichannel/directory/ChatTab.js

diff --git a/client/omnichannel/directory/ChatTab.js b/client/omnichannel/directory/ChatTab.js
new file mode 100644
index 000000000000..559bbda0c345
--- /dev/null
+++ b/client/omnichannel/directory/ChatTab.js
@@ -0,0 +1,97 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { Table, Tag, Box } from '@rocket.chat/fuselage';
+import moment from 'moment';
+import { Meteor } from 'meteor/meteor';
+import { FlowRouter } from 'meteor/kadira:flow-router';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import GenericTable from '../../components/GenericTable';
+import FilterByText from '../../components/FilterByText';
+import { usePermission } from '../../contexts/AuthorizationContext';
+import NotAuthorizedPage from '../../components/NotAuthorizedPage';
+
+
+const useQuery = ({ text, itemsPerPage, current }, [column, direction], userIdLoggedIn) => useMemo(() => ({
+	sort: JSON.stringify({ [column]: direction === 'asc' ? 1 : -1 }),
+	open: false,
+	roomName: text,
+	agents: [userIdLoggedIn],
+	...itemsPerPage && { count: itemsPerPage },
+	...current && { offset: current },
+}), [column, current, direction, itemsPerPage, userIdLoggedIn, text]);
+
+const ChatTable = () => {
+	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
+	const [sort, setSort] = useState(['closedAt', 'desc']);
+	const t = useTranslation();
+	const debouncedParams = useDebouncedValue(params, 500);
+	const debouncedSort = useDebouncedValue(sort, 500);
+	const userIdLoggedIn = Meteor.userId();
+	const query = useQuery(debouncedParams, debouncedSort, userIdLoggedIn);
+
+	const onHeaderClick = useMutableCallback((id) => {
+		const [sortBy, sortDirection] = sort;
+
+		if (sortBy === id) {
+			setSort([id, sortDirection === 'asc' ? 'desc' : 'asc']);
+			return;
+		}
+		setSort([id, 'asc']);
+	});
+
+	const onRowClick = useMutableCallback((_id) => {
+		FlowRouter.go('live', { id: _id });
+	});
+
+	const { value: data } = useEndpointData('livechat/rooms', query) || {};
+
+	const header = useMemo(() => [
+		<GenericTable.HeaderCell key={'fname'} direction={sort[1]} active={sort[0] === 'fname'} onClick={onHeaderClick} sort='fname' w='x400'>{t('Contact_Name')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'department'} direction={sort[1]} active={sort[0] === 'department'} onClick={onHeaderClick} sort='department' w='x200'>{t('Department')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'ts'} direction={sort[1]} active={sort[0] === 'ts'} onClick={onHeaderClick} sort='ts' w='x200'>{t('Started_At')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'chatDuration'} direction={sort[1]} active={sort[0] === 'chatDuration'} onClick={onHeaderClick} sort='chatDuration' w='x120'>{t('Chat_Duration')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'closedAt'} direction={sort[1]} active={sort[0] === 'closedAt'} onClick={onHeaderClick} sort='closedAt' w='x200'>{t('Closed_At')}</GenericTable.HeaderCell>,
+	].filter(Boolean), [sort, onHeaderClick, t]);
+
+	const renderRow = useCallback(({ _id, fname, ts, closedAt, department, tags }) => <Table.Row key={_id} tabIndex={0} role='link' onClick={() => onRowClick(_id)} action qa-user-id={_id}>
+		<Table.Cell withTruncatedText>
+			<Box display='flex' flexDirection='column'>
+				<Box color='default' withTruncatedText>{fname}</Box>
+				{tags && <Box color='hint' display='flex' flex-direction='row'>
+					{tags.map((tag) => (
+						<Box style={{ marginTop: 4, whiteSpace: 'nowrap', overflow: tag.length > 10 ? 'hidden' : 'visible', textOverflow: 'ellipsis' }} key={tag} mie='x4'>
+							<Tag style={{ display: 'inline' }} disabled>{tag}</Tag>
+						</Box>
+					))}
+				</Box>}
+			</Box>
+		</Table.Cell>
+		<Table.Cell withTruncatedText>{department ? department.name : ''}</Table.Cell>
+		<Table.Cell withTruncatedText>{moment(ts).format('L LTS')}</Table.Cell>
+		<Table.Cell withTruncatedText>{moment(closedAt).from(moment(ts), true)}</Table.Cell>
+		<Table.Cell withTruncatedText>{moment(closedAt).format('L LTS')}</Table.Cell>
+	</Table.Row>, [onRowClick]);
+
+	return <GenericTable
+		header={header}
+		renderRow={renderRow}
+		results={data && data.rooms}
+		total={data && data.total}
+		setParams={setParams}
+		params={params}
+		renderFilter={({ onChange, ...props }) => <FilterByText onChange={onChange} {...props} />}
+	/>;
+};
+
+
+export default function ChatTab(props) {
+	const hasAccess = usePermission('view-l-room');
+
+	if (hasAccess) {
+		return <ChatTable {...props} />;
+	}
+
+	return <NotAuthorizedPage />;
+}
diff --git a/client/omnichannel/directory/OmnichannelDirectoryPage.js b/client/omnichannel/directory/OmnichannelDirectoryPage.js
index 3b4ebc3ea227..263eda3a46e0 100644
--- a/client/omnichannel/directory/OmnichannelDirectoryPage.js
+++ b/client/omnichannel/directory/OmnichannelDirectoryPage.js
@@ -8,6 +8,7 @@ import ContactTab from './ContactTab';
 import VerticalBar from '../../components/VerticalBar';
 import { ContactNewEdit, ContactEditWithData } from './ContactForm';
 import { ContactInfo } from './ContactInfo';
+import ChatTab from './ChatTab';
 
 
 const OmnichannelDirectoryPage = () => {
@@ -63,6 +64,7 @@ const OmnichannelDirectoryPage = () => {
 			<Page.Content>
 				{
 					(tab === 'contacts' && <ContactTab setContactReload={setContactReload} />)
+					|| (tab === 'chats' && <ChatTab />)
 				}
 			</Page.Content>
 		</Page>
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index f204e1d4381e..3dbba7ee49c5 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -704,6 +704,7 @@
   "Chatpal_Current_Room_Only": "Same room",
   "Chatpal_Default_Result_Type": "Default Result Type",
   "Chatpal_Default_Result_Type_Description": "Defines which result type is shown by result. All means that an overview for all types is provided.",
+  "Chat_Duration": "Chat Duration",
   "Chatpal_Email_Address": "Email Address",
   "Chatpal_ERROR_Email_must_be_set": "Email must be set",
   "Chatpal_ERROR_Email_must_be_valid": "Email must be valid",
@@ -841,6 +842,7 @@
   "Consulting": "Consulting",
   "Consumer_Goods": "Consumer Goods",
   "Contact": "Contact",
+  "Contact_Name": "Contact Name",
   "Contact_Chat_History": "Contact Chat History",
   "Contains_Security_Fixes": "Contains Security Fixes",
   "Contact_Manager": "Contact Manager",

From 528a18454082d6e8a50dacfeceb41662845aa327 Mon Sep 17 00:00:00 2001
From: Rafael Ferreira <rafaelblink@gmail.com>
Date: Tue, 22 Dec 2020 02:14:28 -0300
Subject: [PATCH 3/3] Missing token on endpoints and contact tab.

---
 app/livechat/server/api/v1/contact.js       |  6 ++----
 client/components/helpers.js                |  1 +
 client/omnichannel/directory/ContactForm.js | 10 ++++++++--
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 client/components/helpers.js

diff --git a/app/livechat/server/api/v1/contact.js b/app/livechat/server/api/v1/contact.js
index 4099fb49910a..10880b282913 100644
--- a/app/livechat/server/api/v1/contact.js
+++ b/app/livechat/server/api/v1/contact.js
@@ -6,13 +6,12 @@ import {
 	LivechatVisitors,
 } from '../../../../models';
 
-const createToken = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-
 API.v1.addRoute('omnichannel/contact', { authRequired: true }, {
 	post() {
 		try {
 			check(this.bodyParams, {
 				_id: Match.Maybe(String),
+				token: String,
 				name: String,
 				email: Match.Maybe(String),
 				phone: Match.Maybe(String),
@@ -24,9 +23,8 @@ API.v1.addRoute('omnichannel/contact', { authRequired: true }, {
 			if (this.bodyParams.phone) {
 				contactParams.phone = { number: this.bodyParams.phone };
 			}
+			const contact = Livechat.registerGuest(contactParams);
 
-			const data = Object.assign(contactParams, { token: createToken() });
-			const contact = Livechat.registerGuest(data);
 			return API.v1.success({ contact });
 		} catch (e) {
 			return API.v1.failure(e);
diff --git a/client/components/helpers.js b/client/components/helpers.js
new file mode 100644
index 000000000000..efda68785d53
--- /dev/null
+++ b/client/components/helpers.js
@@ -0,0 +1 @@
+export const createToken = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
diff --git a/client/omnichannel/directory/ContactForm.js b/client/omnichannel/directory/ContactForm.js
index 79292727dbdb..826d86701b82 100644
--- a/client/omnichannel/directory/ContactForm.js
+++ b/client/omnichannel/directory/ContactForm.js
@@ -16,8 +16,10 @@ import CustomFieldsForm from '../../components/CustomFieldsForm';
 import { hasAtLeastOnePermission } from '../../../app/authorization';
 import { AsyncStatePhase } from '../../hooks/useAsyncState';
 import { formsSubscription } from '../../views/omnichannel/additionalForms';
+import { createToken } from '../../components/helpers';
 
 const initialValues = {
+	token: '',
 	name: '',
 	email: '',
 	phone: '',
@@ -29,9 +31,10 @@ const getInitialValues = (data) => {
 		return initialValues;
 	}
 
-	const { contact: { name, phone, visitorEmails, livechatData, contactManager } } = data;
+	const { contact: { name, token, phone, visitorEmails, livechatData, contactManager } } = data;
 
 	return {
+		token: token ?? '',
 		name: name ?? '',
 		email: visitorEmails ? visitorEmails[0].address : '',
 		phone: phone ? phone[0].phoneNumber : '',
@@ -76,6 +79,7 @@ export function ContactNewEdit({ id, data, reload, close }) {
 		handleUsername,
 	} = handlers;
 	const {
+		token,
 		name,
 		email,
 		phone,
@@ -148,8 +152,10 @@ export function ContactNewEdit({ id, data, reload, close }) {
 
 		if (id) {
 			payload._id = id;
+			payload.token = token;
+		} else {
+			payload.token = createToken();
 		}
-
 		if (livechatData) { payload.livechatData = livechatData; }
 		if (username) { payload.contactManager = { username }; }