From 7543d01586656b3207173dcaf7759f7e5aa4d46c Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 6 Jul 2022 14:42:22 -0300 Subject: [PATCH 1/7] parse asterisk --- .../client/components/voip/room/VoipRoomForeword.tsx | 7 ++++--- apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx | 3 ++- .../views/omnichannel/directory/calls/CallTable.tsx | 5 ++++- .../directory/calls/contextualBar/VoipInfo.tsx | 5 +++-- .../views/room/Header/Omnichannel/VoipRoomHeader.tsx | 10 ++++++++-- .../ee/client/lib/voip/parseOutboundPhoneNumber.ts | 1 + packages/core-typings/src/IRoom.ts | 1 + 7 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts diff --git a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx index 222db6f4fa6d..85ae04036f67 100644 --- a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx +++ b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx @@ -1,11 +1,12 @@ -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); @@ -21,7 +22,7 @@ export const VoipRoomForeword = ({ room }: { room: IRoom }): ReactElement => { - {room.name || room.fname} + {parseOutboundPhoneNumber(room.name)} diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx index b49547725a72..f773d161c651 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx +++ b/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 { useVoipFooterMenu } 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 = ({ - {caller.callerName || caller.callerId || anonymousText} + {caller.callerName || parseOutboundPhoneNumber(caller.callerId) || anonymousText} {subtitle} diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx index b0b443bf3259..7506c87e727b 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx @@ -6,6 +6,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 { useEndpointData } from '../../../../hooks/useEndpointData'; @@ -148,7 +149,9 @@ const CallTable: FC = () => { return ( onRowClick(_id, v?.token)} action qa-user-id={_id}> {fname} - {Array.isArray(v?.phone) ? v?.phone[0]?.phoneNumber : v?.phone} + + {Array.isArray(v?.phone) ? parseOutboundPhoneNumber(v?.phone[0]?.phoneNumber) : parseOutboundPhoneNumber(v?.phone)} + {queue} {moment(callStarted).format('L LTS')} {duration.isValid() && duration.humanize()} diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx index 33c9e2559a2d..0660dfb9b789 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx +++ b/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 {t('Contact')} - } /> + } /> )} - {phoneNumber && } + {phoneNumber && } {queue && } {endedAt && } diff --git a/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx b/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx index 68436ab78502..c1b9e5d3ecc0 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx @@ -1,6 +1,8 @@ +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'; @@ -8,7 +10,11 @@ import { ToolboxContext, useToolboxContext } from '../../lib/Toolbox/ToolboxCont import RoomHeader, { RoomHeaderProps } from '../RoomHeader'; import { BackButton } from './BackButton'; -const VoipRoomHeader: FC = ({ slots: parentSlot, room }) => { +export type VoipRoomHeaderProps = { + room: IVoipRoom; +} & Omit; + +const VoipRoomHeader: FC = ({ slots: parentSlot, room }) => { const [name] = useCurrentRoute(); const { isMobile } = useLayout(); const context = useToolboxContext(); @@ -35,7 +41,7 @@ const VoipRoomHeader: FC = ({ slots: parentSlot, room }) => { [context], )} > - + ); }; diff --git a/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts b/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts new file mode 100644 index 000000000000..730854ee8ceb --- /dev/null +++ b/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts @@ -0,0 +1 @@ +export const parseOutboundPhoneNumber = (phoneNumber: string): string => phoneNumber.replace(/\*/g, '+'); diff --git a/packages/core-typings/src/IRoom.ts b/packages/core-typings/src/IRoom.ts index 8885da96f072..f6c9f4117215 100644 --- a/packages/core-typings/src/IRoom.ts +++ b/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 From cbe7ec27ae4e6cd65e2616959e128ae676b015b8 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 6 Jul 2022 14:45:48 -0300 Subject: [PATCH 2/7] fix foreward voip room --- apps/meteor/client/components/voip/room/VoipRoomForeword.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx index 85ae04036f67..8e1e95efc3fe 100644 --- a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx +++ b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx @@ -11,6 +11,8 @@ export const VoipRoomForeword = ({ room }: { room: IVoipRoom }): ReactElement => const avatarUrl = getUserAvatarURL(room.name || room.fname); + const roomName = room.name || room.fname; + return ( @@ -22,7 +24,7 @@ export const VoipRoomForeword = ({ room }: { room: IVoipRoom }): ReactElement => - {parseOutboundPhoneNumber(room.name)} + {roomName && parseOutboundPhoneNumber(roomName)} From b6c7a380bfb9d109c958370b28ddb9f21caca798 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 6 Jul 2022 15:01:17 -0300 Subject: [PATCH 3/7] other places --- .../client/views/omnichannel/directory/calls/CallTable.tsx | 2 +- .../views/omnichannel/directory/contacts/ContactTable.tsx | 5 +++-- .../directory/contacts/contextualBar/ContactInfo.js | 5 +++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx index 7506c87e727b..976db28ccfc2 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx @@ -148,7 +148,7 @@ const CallTable: FC = () => { const duration = moment.duration(callDuration / 1000, 'seconds'); return ( onRowClick(_id, v?.token)} action qa-user-id={_id}> - {fname} + {parseOutboundPhoneNumber(fname)} {Array.isArray(v?.phone) ? parseOutboundPhoneNumber(v?.phone[0]?.phoneNumber) : parseOutboundPhoneNumber(v?.phone)} diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx index d37eb9c33530..788a5266b076 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx +++ b/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, @@ -145,8 +146,8 @@ function ContactTable({ setContactReload }: ContactTableProps): ReactElement { height='40px' > {username} - {name} - {phoneNumber} + {parseOutboundPhoneNumber(name)} + {parseOutboundPhoneNumber(phoneNumber)} {visitorEmail} {lastChat && formatDate(lastChat.ts)} {isCallReady && } diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 90e9efb39209..cdafe62dcc8a 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/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 && ( - {phoneNumber} + {parseOutboundPhoneNumber(phoneNumber)} )} {ts && ( From 618c2e59b2c0ea524ae38d761d320583fc81bdd5 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Thu, 7 Jul 2022 04:02:10 -0300 Subject: [PATCH 4/7] fix typecheck errors --- apps/meteor/client/views/room/Header/Header.tsx | 10 +++++----- .../meteor/server/services/omnichannel-voip/service.ts | 2 ++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/meteor/client/views/room/Header/Header.tsx b/apps/meteor/client/views/room/Header/Header.tsx index b81e05da7797..41ec19016d5a 100644 --- a/apps/meteor/client/views/room/Header/Header.tsx +++ b/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 = { + room: T; }; -const Header = ({ room }: HeaderProps): ReactElement | null => { +const Header = ({ room }: HeaderProps): ReactElement | null => { const { isMobile, isEmbedded, showTopNavbarEmbeddedLayout } = useLayout(); const slots = useMemo( @@ -39,7 +39,7 @@ const Header = ({ room }: HeaderProps): ReactElement | null => { return ; } - if (room.t === 'v') { + if (room.t === 'v' && 'v' in room) { return ; } diff --git a/apps/meteor/server/services/omnichannel-voip/service.ts b/apps/meteor/server/services/omnichannel-voip/service.ts index a34d67d7e7ca..c79af97b94ed 100644 --- a/apps/meteor/server/services/omnichannel-voip/service.ts +++ b/apps/meteor/server/services/omnichannel-voip/service.ts @@ -27,6 +27,7 @@ import { Voip } from '../../sdk'; import { sendMessage } from '../../../app/lib/server/functions/sendMessage'; import { FindVoipRoomsParams, IOmniRoomClosingMessage } from './internalTypes'; import { api } from '../../sdk/api'; +import { getValidRoomName } from '../../../app/utils/server'; export class OmnichannelVoipService extends ServiceClassInternal implements IOmnichannelVoipService { protected name = 'omnichannel-voip'; @@ -141,6 +142,7 @@ export class OmnichannelVoipService extends ServiceClassInternal implements IOmn msgs: 0, usersCount: 1, lm: newRoomAt, + name: getValidRoomName(name), fname: name, t: 'v', ts: newRoomAt, From 2585810d1e24a72e1f927692a11aa663360e2f4d Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Thu, 7 Jul 2022 04:08:08 -0300 Subject: [PATCH 5/7] valid name error --- apps/meteor/server/services/omnichannel-voip/service.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/meteor/server/services/omnichannel-voip/service.ts b/apps/meteor/server/services/omnichannel-voip/service.ts index c79af97b94ed..13b85378d9e7 100644 --- a/apps/meteor/server/services/omnichannel-voip/service.ts +++ b/apps/meteor/server/services/omnichannel-voip/service.ts @@ -27,7 +27,6 @@ import { Voip } from '../../sdk'; import { sendMessage } from '../../../app/lib/server/functions/sendMessage'; import { FindVoipRoomsParams, IOmniRoomClosingMessage } from './internalTypes'; import { api } from '../../sdk/api'; -import { getValidRoomName } from '../../../app/utils/server'; export class OmnichannelVoipService extends ServiceClassInternal implements IOmnichannelVoipService { protected name = 'omnichannel-voip'; @@ -142,7 +141,7 @@ export class OmnichannelVoipService extends ServiceClassInternal implements IOmn msgs: 0, usersCount: 1, lm: newRoomAt, - name: getValidRoomName(name), + name, fname: name, t: 'v', ts: newRoomAt, From fd4967ba5f0337a6dc61504ed4300df381ce04cb Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Fri, 8 Jul 2022 14:25:41 -0300 Subject: [PATCH 6/7] fix --- apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts b/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts index 730854ee8ceb..711c53e6270d 100644 --- a/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts +++ b/apps/meteor/ee/client/lib/voip/parseOutboundPhoneNumber.ts @@ -1 +1 @@ -export const parseOutboundPhoneNumber = (phoneNumber: string): string => phoneNumber.replace(/\*/g, '+'); +export const parseOutboundPhoneNumber = (phoneNumber: string): string => (phoneNumber ? phoneNumber.replace(/\*/g, '+') : ''); From 0c0ccf7df5755adf875fe4b9db23914de8fc8820 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 13 Jul 2022 14:32:27 -0300 Subject: [PATCH 7/7] fix review --- .../meteor/client/components/voip/room/VoipRoomForeword.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx index 8e1e95efc3fe..3727af1b0cd3 100644 --- a/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx +++ b/apps/meteor/client/components/voip/room/VoipRoomForeword.tsx @@ -9,14 +9,14 @@ import { parseOutboundPhoneNumber } from '../../../../ee/client/lib/voip/parseOu 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 || room.fname; + const roomName = room.name; return ( - + {t('You_have_joined_a_new_call_with')}