Regression: Parse outbound phone number removing * putting + char

apps/meteor/client/components/voip/room/VoipRoomForeword.tsx

@@ -1,27 +1,30 @@
-import type { IRoom } from '@rocket.chat/core-typings';
+import type { IVoipRoom } from '@rocket.chat/core-typings';
 import { Avatar, Box, Tag } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
 import { getUserAvatarURL } from '../../../../app/utils/client';
+import { parseOutboundPhoneNumber } from '../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 
-export const VoipRoomForeword = ({ room }: { room: IRoom }): ReactElement => {
+export const VoipRoomForeword = ({ room }: { room: IVoipRoom }): ReactElement => {
 	const t = useTranslation();
 
-	const avatarUrl = getUserAvatarURL(room.name || room.fname);
+	const avatarUrl = getUserAvatarURL(room.name);
+
+	const roomName = room.name;
 
 	return (
 		<Box is='div' flexGrow={1} display='flex' justifyContent='center' flexDirection='column'>
 			<Box display='flex' justifyContent='center' mbs='x24'>
-				<Avatar size='x48' title={room.name || room.fname} url={avatarUrl} />
+				<Avatar size='x48' title={room.name} url={avatarUrl} />
 			</Box>
 			<Box color='default' fontScale='h2' flexGrow={1} mb='x16'>
 				{t('You_have_joined_a_new_call_with')}
 			</Box>
 			<Box is='div' mb='x8' flexGrow={1} display='flex' justifyContent='center'>
 				<Box mi='x4'>
 					<Tag style={{ cursor: 'default' }} variant='primary' medium>
-						{room.name || room.fname}
+						{roomName && parseOutboundPhoneNumber(roomName)}
 					</Tag>
 				</Box>
 			</Box>

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

@@ -5,6 +5,7 @@ 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';
 
 type VoipFooterPropsType = {
@@ -118,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 || caller.callerId || anonymousText}
+							{caller.callerName || parseOutboundPhoneNumber(caller.callerId) || anonymousText}
 						</Box>
 						<Box color='hint' fontScale='c1' withTruncatedText>
 							{subtitle}

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

@@ -7,6 +7,7 @@ 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';
@@ -171,8 +172,8 @@ const CallTable: FC = () => {
 					qa-user-id={_id}
 					height='40px'
 				>
-					<Table.Cell withTruncatedText>{fname}</Table.Cell>
-					<Table.Cell withTruncatedText>{phoneNumber}</Table.Cell>
+					<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>

apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
+import { parseOutboundPhoneNumber } from '../../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import { UserStatus } from '../../../../../components/UserStatus';
 import VerticalBar from '../../../../../components/VerticalBar';
 import UserAvatar from '../../../../../components/avatar/UserAvatar';
@@ -56,11 +57,11 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport  */ }: VoipInfo
 							<InfoPanel.Label>{t('Contact')}</InfoPanel.Label>
 							<Box display='flex'>
 								<UserAvatar size='x28' username={_name} />
-								<AgentInfoDetails mis='x8' name={_name} status={<UserStatus status={v?.status} />} />
+								<AgentInfoDetails mis='x8' name={parseOutboundPhoneNumber(_name)} status={<UserStatus status={v?.status} />} />
 							</Box>
 						</InfoPanel.Field>
 					)}
-					{phoneNumber && <InfoField label={t('Caller_Id')} info={phoneNumber} />}
+					{phoneNumber && <InfoField label={t('Caller_Id')} info={parseOutboundPhoneNumber(phoneNumber)} />}
 					{queue && <InfoField label={t('Queue')} info={queue} />}
 					{endedAt && <InfoField label={t('Last_Call')} info={endedAt} />}
 					<InfoField label={t('Waiting_Time')} info={waiting || t('Not_Available')} />

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -4,6 +4,7 @@ import { useDebouncedState, useDebouncedValue, useMutableCallback } from '@rocke
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo, useEffect, ReactElement } from 'react';
 
+import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import FilterByText from '../../../../components/FilterByText';
 import {
 	GenericTable,
@@ -143,8 +144,8 @@ function ContactTable({ setContactReload }: ContactTableProps): ReactElement {
 									onClick={onRowClick(_id)}
 								>
 									<GenericTableCell withTruncatedText>{username}</GenericTableCell>
-									<GenericTableCell withTruncatedText>{name}</GenericTableCell>
-									<GenericTableCell withTruncatedText>{phoneNumber}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{parseOutboundPhoneNumber(name)}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{parseOutboundPhoneNumber(phoneNumber)}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{visitorEmail}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{lastChat && formatDate(lastChat.ts)}</GenericTableCell>
 									<GenericTableCell>{isCallReady && <CallDialpadButton phoneNumber={phoneNumber} />}</GenericTableCell>

apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js

@@ -4,6 +4,7 @@ import { useToastMessageDispatch, useCurrentRoute, useRoute, useTranslation } fr
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { hasPermission } from '../../../../../../app/authorization/client';
+import { parseOutboundPhoneNumber } from '../../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import ContactManagerInfo from '../../../../../../ee/client/omnichannel/ContactManagerInfo';
 import { UserStatus } from '../../../../../components/UserStatus';
 import VerticalBar from '../../../../../components/VerticalBar';
@@ -106,7 +107,7 @@ const ContactInfo = ({ id, rid, route }) => {
 
 	const showContactHistory = currentRouteName === 'live' && lastChat;
 
-	const displayName = name || username;
+	const displayName = parseOutboundPhoneNumber(name) || username;
 
 	const { phoneNumber } = phone?.[0] || {};
 
@@ -132,7 +133,7 @@ const ContactInfo = ({ id, rid, route }) => {
 					{phone && phone.length && (
 						<Field>
 							<Label>{t('Phone')}</Label>
-							<Info>{phoneNumber}</Info>
+							<Info>{parseOutboundPhoneNumber(phoneNumber)}</Info>
 						</Field>
 					)}
 					{ts && (

apps/meteor/client/views/room/Header/Header.tsx

@@ -1,4 +1,4 @@
-import type { IRoom } from '@rocket.chat/core-typings';
+import type { IRoom, IVoipRoom } from '@rocket.chat/core-typings';
 import { useLayout } from '@rocket.chat/ui-contexts';
 import React, { memo, ReactElement, useMemo } from 'react';
 
@@ -9,11 +9,11 @@ import OmnichannelRoomHeader from './Omnichannel/OmnichannelRoomHeader';
 import VoipRoomHeader from './Omnichannel/VoipRoomHeader';
 import RoomHeader from './RoomHeader';
 
-type HeaderProps = {
-	room: IRoom;
+type HeaderProps<T> = {
+	room: T;
 };
 
-const Header = ({ room }: HeaderProps): ReactElement | null => {
+const Header = ({ room }: HeaderProps<IRoom | IVoipRoom>): ReactElement | null => {
 	const { isMobile, isEmbedded, showTopNavbarEmbeddedLayout } = useLayout();
 
 	const slots = useMemo(
@@ -39,7 +39,7 @@ const Header = ({ room }: HeaderProps): ReactElement | null => {
 		return <OmnichannelRoomHeader slots={slots} />;
 	}
 
-	if (room.t === 'v') {
+	if (room.t === 'v' && 'v' in room) {
 		return <VoipRoomHeader slots={slots} room={room} />;
 	}
 

apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx

@@ -1,14 +1,20 @@
+import { IVoipRoom } from '@rocket.chat/core-typings';
 import { useLayout, useCurrentRoute } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo } from 'react';
 
+import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import BurgerMenu from '../../../../components/BurgerMenu';
 import TemplateHeader from '../../../../components/Header';
 import { ToolboxActionConfig } from '../../lib/Toolbox';
 import { ToolboxContext, useToolboxContext } from '../../lib/Toolbox/ToolboxContext';
 import RoomHeader, { RoomHeaderProps } from '../RoomHeader';
 import { BackButton } from './BackButton';
 
-const VoipRoomHeader: FC<RoomHeaderProps> = ({ slots: parentSlot, room }) => {
+export type VoipRoomHeaderProps = {
+	room: IVoipRoom;
+} & Omit<RoomHeaderProps, 'room'>;
+
+const VoipRoomHeader: FC<VoipRoomHeaderProps> = ({ slots: parentSlot, room }) => {
 	const [name] = useCurrentRoute();
 	const { isMobile } = useLayout();
 	const context = useToolboxContext();
@@ -35,7 +41,7 @@ const VoipRoomHeader: FC<RoomHeaderProps> = ({ slots: parentSlot, room }) => {
 				[context],
 			)}
 		>
-			<RoomHeader slots={slots} room={room} />
+			<RoomHeader slots={slots} room={{ ...room, name: parseOutboundPhoneNumber(room.name) }} />
 		</ToolboxContext.Provider>
 	);
 };

apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts

@@ -0,0 +1 @@
+export const parseOutboundPhoneNumber = (phoneNumber: string): string => (phoneNumber ? phoneNumber.replace(/\*/g, '+') : '');

apps/meteor/server/services/omnichannel-voip/service.ts

@@ -141,6 +141,7 @@ export class OmnichannelVoipService extends ServiceClassInternal implements IOmn
 			msgs: 0,
 			usersCount: 1,
 			lm: newRoomAt,
+			name,
 			fname: name,
 			t: 'v',
 			ts: newRoomAt,

packages/core-typings/src/IRoom.ts

@@ -193,6 +193,7 @@ export interface IOmnichannelRoom extends IOmnichannelGenericRoom {
 
 export interface IVoipRoom extends IOmnichannelGenericRoom {
 	t: 'v';
+	name: string;
 	// The timestamp when call was started
 	callStarted: Date;
 	// The amount of time the call lasted, in milliseconds