[IMPROVE] Added identification on calls to/from existing contacts

apps/meteor/client/components/FilterByText.tsx

@@ -46,7 +46,7 @@ const FilterByText = ({
 	}, []);
 
 	return (
-		<Box mb='x16' is='form' onSubmit={handleFormSubmit} display='flex' flexDirection={shouldFiltersStack ? 'column' : 'row'} {...props}>
+		<Box mb='x16' is='form' onSubmit={handleFormSubmit} display='flex' flexDirection={shouldFiltersStack ? 'column' : 'row'}>
 			<TextInput
 				placeholder={placeholder ?? t('Search')}
 				ref={inputRef}

apps/meteor/client/hooks/omnichannel/useContactName.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+import { parseOutboundPhoneNumber } from '../../../ee/client/lib/voip/parseOutboundPhoneNumber';
+import { useOmnichannelContacts } from './useOmnichannelContacts';
+
+export const useContactName = (phone: string): string => {
+	const safePhone = parseOutboundPhoneNumber(phone);
+	const { getContactByPhone } = useOmnichannelContacts();
+	const [name, setName] = useState(safePhone);
+
+	useEffect(() => {
+		getContactByPhone(safePhone).then((contact) => {
+			setName(contact.name || contact.phone);
+		});
+	}, [safePhone, getContactByPhone]);
+
+	return name;
+};

apps/meteor/client/hooks/omnichannel/useOmnichannelContacts.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ContactsContext, ContactsContextValue } from '../../providers/OmnichannelContactsProvider';
+
+export const useOmnichannelContacts = (): ContactsContextValue => useContext(ContactsContext);

apps/meteor/client/providers/CallProvider/CallProvider.tsx

@@ -389,14 +389,20 @@ export const CallProvider: FC = ({ children }) => {
 			stopAllRingback();
 		};
 
-		const onCallFailed = (reason: 'Not Found' | 'Address Incomplete' | string): void => {
+		const onCallFailed = (reason: 'Not Found' | 'Address Incomplete' | 'Request Terminated' | string): void => {
 			switch (reason) {
 				case 'Not Found':
+					// This happens when the call matches dialplan and goes to the world, but the trunk doesnt find the number.
 					openDialModal({ errorMessage: t('Dialed_number_doesnt_exist') });
 					break;
 				case 'Address Incomplete':
+					// This happens when the dialed number doesnt match a valid asterisk dialplan pattern or the number is invalid.
 					openDialModal({ errorMessage: t('Dialed_number_is_incomplete') });
 					break;
+				case 'Request Terminated':
+					// This happens when the user is the one hanging up the call.
+					openDialModal();
+					break;
 				default:
 					openDialModal({ errorMessage: t('Something_went_wrong_try_again_later') });
 			}

apps/meteor/client/providers/MeteorProvider.tsx

@@ -9,6 +9,7 @@ import CustomSoundProvider from './CustomSoundProvider';
 import { DeviceProvider } from './DeviceProvider/DeviceProvider';
 import LayoutProvider from './LayoutProvider';
 import ModalProvider from './ModalProvider';
+import { OmnichannelContactsProvider } from './OmnichannelContactsProvider';
 import OmnichannelProvider from './OmnichannelProvider';
 import RouterProvider from './RouterProvider';
 import ServerProvider from './ServerProvider';
@@ -39,7 +40,9 @@ const MeteorProvider: FC = ({ children }) => (
 																<VideoConfProvider>
 																	<CallProvider>
 																		<OmnichannelProvider>
-																			<AttachmentProvider>{children}</AttachmentProvider>
+																			<OmnichannelContactsProvider>
+																				<AttachmentProvider>{children}</AttachmentProvider>
+																			</OmnichannelContactsProvider>
 																		</OmnichannelProvider>
 																	</CallProvider>
 																</VideoConfProvider>

apps/meteor/client/providers/OmnichannelContactsProvider.tsx

@@ -0,0 +1,106 @@
+import { ILivechatVisitor } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import React, { ReactElement, ReactNode, useCallback, useEffect, createContext, useMemo, useRef } from 'react';
+
+type Contact = {
+	name: string;
+	phone: string;
+};
+
+type ContactsProviderProps = {
+	children: ReactNode | undefined;
+};
+
+export type ContactsContextValue = {
+	getContactByPhone(phone: string): Promise<Contact>;
+};
+
+const STORAGE_KEY = 'rcOmnichannelContacts';
+
+const createContact = (phone: string, data: Pick<ILivechatVisitor, 'name'> | null): Contact => ({
+	phone,
+	name: data?.name || '',
+});
+
+const storeInCache = (contacts: Record<string, Contact>): void => {
+	window.localStorage.setItem(STORAGE_KEY, JSON.stringify(contacts));
+};
+
+const retrieveFromCache = (): Record<string, Contact> => {
+	const cache = window.localStorage.getItem(STORAGE_KEY);
+
+	try {
+		return cache ? JSON.parse(cache) : {};
+	} catch (_) {
+		return {};
+	}
+};
+
+export const ContactsContext = createContext<ContactsContextValue>({
+	getContactByPhone: (_: string) => Promise.reject(),
+});
+
+export const OmnichannelContactsProvider = ({ children }: ContactsProviderProps): ReactElement => {
+	const getContactBy = useEndpoint('GET', '/v1/omnichannel/contact.search');
+	const contacts = useRef<Record<string, Contact>>({});
+	const pendingRequests = useRef<Map<string, Promise<Contact>>>(new Map());
+
+	useEffect(() => {
+		contacts.current = retrieveFromCache();
+
+		const handleVisibilityChange = (): void => storeInCache(contacts.current);
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	}, []);
+
+	const getContactByPhoneFromCache = useCallback((phone: string): Contact | null => contacts.current[phone] || null, []);
+
+	const addContactToCache = useCallback((contact: Contact): void => {
+		contacts.current[contact.phone] = contact;
+	}, []);
+
+	const fetchContactByPhone = useCallback((phone: string): ReturnType<typeof getContactBy> => getContactBy({ phone }), [getContactBy]);
+
+	const getContactByPhone = useCallback(
+		(phone: string): Promise<Contact> => {
+			const cache = getContactByPhoneFromCache(phone);
+			const cachedRequest = pendingRequests.current.get(phone);
+
+			if (cache) {
+				return Promise.resolve(cache);
+			}
+
+			if (cachedRequest) {
+				return cachedRequest;
+			}
+
+			const request = fetchContactByPhone(phone)
+				.then((data) => {
+					const contact = createContact(phone, data.contact);
+					addContactToCache(contact);
+
+					return contact;
+				})
+				.finally(() => {
+					pendingRequests.current.delete(phone);
+				});
+
+			pendingRequests.current.set(phone, request);
+
+			return request;
+		},
+		[addContactToCache, fetchContactByPhone, getContactByPhoneFromCache],
+	);
+
+	const contextValue = useMemo(
+		() => ({
+			getContactByPhone,
+		}),
+		[getContactByPhone],
+	);
+
+	return <ContactsContext.Provider value={contextValue}>{children}</ContactsContext.Provider>;
+};

apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx

@@ -5,8 +5,8 @@ import { Box, Button, ButtonGroup, Icon, SidebarFooter, Menu, IconButton } from
 import React, { ReactElement, MouseEvent, ReactNode } from 'react';
 
 import type { VoipFooterMenuOptions } from '../../../../ee/client/hooks/useVoipFooterMenu';
-import { parseOutboundPhoneNumber } from '../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import { CallActionsType } from '../../../contexts/CallContext';
+import { useContactName } from '../../../hooks/omnichannel/useContactName';
 
 type VoipFooterPropsType = {
 	caller: ICallerInfo;
@@ -58,6 +58,8 @@ export const VoipFooter = ({
 	children,
 	options,
 }: VoipFooterPropsType): ReactElement => {
+	const contactName = useContactName(caller.callerId);
+
 	const cssClickable =
 		callerState === 'IN_CALL' || callerState === 'ON_HOLD'
 			? css`
@@ -117,7 +119,7 @@ export const VoipFooter = ({
 				<Box display='flex' flexDirection='row' mi='16px' mbe='12px' justifyContent='space-between' alignItems='center'>
 					<Box>
 						<Box color='white' fontScale='p2' withTruncatedText>
-							{caller.callerName || parseOutboundPhoneNumber(caller.callerId) || anonymousText}
+							{caller.callerName || contactName || anonymousText}
 						</Box>
 						<Box color='hint' fontScale='c1' withTruncatedText>
 							{subtitle}

apps/meteor/client/views/omnichannel/directory/CallDialpadButton.tsx

@@ -1,10 +1,17 @@
+import { css } from '@rocket.chat/css-in-js';
 import { IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { MouseEvent, ReactElement } from 'react';
 
 import { useVoipOutboundStates } from '../../../contexts/CallContext';
 import { useDialModal } from '../../../hooks/useDialModal';
 
+export const rcxCallDialButton = css`
+	.rcx-show-call-button-on-hover:not(:hover) & {
+		display: none !important;
+	}
+`;
+
 export const CallDialpadButton = ({ phoneNumber }: { phoneNumber: string }): ReactElement => {
 	const t = useTranslation();
 
@@ -20,6 +27,7 @@ export const CallDialpadButton = ({ phoneNumber }: { phoneNumber: string }): Rea
 		<IconButton
 			rcx-call-dial-button
 			title={outBoundCallsAllowed ? t('Call_number') : t('Call_number_enterprise_only')}
+			className={rcxCallDialButton}
 			disabled={!outBoundCallsEnabledForUser || !phoneNumber}
 			tiny
 			icon='phone'

apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx

@@ -1,25 +1,11 @@
-import { IVoipRoom } from '@rocket.chat/core-typings';
-import { css } from '@rocket.chat/css-in-js';
-import { Table } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import { Meteor } from 'meteor/meteor';
-import moment from 'moment';
 import React, { useState, useMemo, useCallback, FC } from 'react';
 
-import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import GenericTable from '../../../../components/GenericTable';
-import { useIsCallReady } from '../../../../contexts/CallContext';
 import { useEndpointData } from '../../../../hooks/useEndpointData';
-import { CallDialpadButton } from '../CallDialpadButton';
-
-export const rcxCallDialButton = css`
-	&:not(:hover) {
-		.rcx-call-dial-button {
-			display: none !important;
-		}
-	}
-`;
+import { CallTableRow } from './CallTableRow';
 
 const useQuery = (
 	{
@@ -66,18 +52,6 @@ const CallTable: FC = () => {
 	const userIdLoggedIn = Meteor.userId();
 	const query = useQuery(debouncedParams, debouncedSort, userIdLoggedIn);
 	const directoryRoute = useRoute('omnichannel-directory');
-	const isCallReady = useIsCallReady();
-
-	const resolveDirectionLabel = useCallback(
-		(direction: IVoipRoom['direction']) => {
-			const labels = {
-				inbound: 'Incoming',
-				outbound: 'Outgoing',
-			} as const;
-			return t(labels[direction] || 'Not_Available');
-		},
-		[t],
-	);
 
 	const onHeaderClick = useMutableCallback((id) => {
 		const [sortBy, sortDirection] = sort;
@@ -156,34 +130,7 @@ const CallTable: FC = () => {
 		[sort, onHeaderClick, t],
 	);
 
-	const renderRow = useCallback(
-		({ _id, fname, callStarted, queue, callDuration, v, direction }) => {
-			const duration = moment.duration(callDuration / 1000, 'seconds');
-			const phoneNumber = Array.isArray(v?.phone) ? v?.phone[0]?.phoneNumber : v?.phone;
-
-			return (
-				<Table.Row
-					key={_id}
-					className={rcxCallDialButton}
-					tabIndex={0}
-					role='link'
-					onClick={(): void => onRowClick(_id, v?.token)}
-					action
-					qa-user-id={_id}
-					height='40px'
-				>
-					<Table.Cell withTruncatedText>{parseOutboundPhoneNumber(fname)}</Table.Cell>
-					<Table.Cell withTruncatedText>{parseOutboundPhoneNumber(phoneNumber)}</Table.Cell>
-					<Table.Cell withTruncatedText>{queue}</Table.Cell>
-					<Table.Cell withTruncatedText>{moment(callStarted).format('L LTS')}</Table.Cell>
-					<Table.Cell withTruncatedText>{duration.isValid() && duration.humanize()}</Table.Cell>
-					<Table.Cell withTruncatedText>{resolveDirectionLabel(direction)}</Table.Cell>
-					<Table.Cell>{isCallReady && <CallDialpadButton phoneNumber={phoneNumber} />}</Table.Cell>
-				</Table.Row>
-			);
-		},
-		[onRowClick, resolveDirectionLabel, isCallReady],
-	);
+	const renderRow = useCallback((room) => <CallTableRow room={room} onRowClick={onRowClick} />, [onRowClick]);
 
 	return (
 		<GenericTable

apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx

@@ -0,0 +1,57 @@
+import { IVoipRoom } from '@rocket.chat/core-typings';
+import { Table } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import moment from 'moment';
+import React, { ReactElement, useCallback } from 'react';
+
+import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
+import { useIsCallReady } from '../../../../contexts/CallContext';
+import { useContactName } from '../../../../hooks/omnichannel/useContactName';
+import { CallDialpadButton } from '../CallDialpadButton';
+
+type CallTableRowProps = {
+	room: IVoipRoom;
+	onRowClick(_id: string, token?: string): void;
+};
+
+export const CallTableRow = ({ room, onRowClick }: CallTableRowProps): ReactElement => {
+	const t = useTranslation();
+	const isCallReady = useIsCallReady();
+
+	const { _id, fname, callStarted, queue, callDuration = 0, v, direction } = room;
+	const duration = moment.duration(callDuration / 1000, 'seconds');
+	const phoneNumber = Array.isArray(v?.phone) ? v?.phone[0]?.phoneNumber : v?.phone;
+	const contactName = useContactName(phoneNumber);
+
+	const resolveDirectionLabel = useCallback(
+		(direction: IVoipRoom['direction']) => {
+			const labels = {
+				inbound: 'Incoming',
+				outbound: 'Outgoing',
+			} as const;
+			return t(labels[direction] || 'Not_Available');
+		},
+		[t],
+	);
+
+	return (
+		<Table.Row
+			key={_id}
+			rcx-show-call-button-on-hover
+			tabIndex={0}
+			role='link'
+			onClick={(): void => onRowClick(_id, v?.token)}
+			action
+			qa-user-id={_id}
+			height='40px'
+		>
+			<Table.Cell withTruncatedText>{contactName || parseOutboundPhoneNumber(fname)}</Table.Cell>
+			<Table.Cell withTruncatedText>{parseOutboundPhoneNumber(phoneNumber)}</Table.Cell>
+			<Table.Cell withTruncatedText>{queue}</Table.Cell>
+			<Table.Cell withTruncatedText>{moment(callStarted).format('L LTS')}</Table.Cell>
+			<Table.Cell withTruncatedText>{duration.isValid() && duration.humanize()}</Table.Cell>
+			<Table.Cell withTruncatedText>{resolveDirectionLabel(direction)}</Table.Cell>
+			<Table.Cell>{isCallReady && <CallDialpadButton phoneNumber={phoneNumber} />}</Table.Cell>
+		</Table.Row>
+	);
+};