From d6f3cb32c1accb8b2975abf3741851f23357edc3 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Mon, 7 Mar 2022 14:17:13 -0300 Subject: [PATCH 1/4] fix layout --- client/contexts/CallContext.ts | 2 +- .../providers/CallProvider/CallProvider.tsx | 4 +- .../footer/voip/VoipFooter.stories.tsx | 46 +++++++++++++++++-- client/sidebar/footer/voip/VoipFooter.tsx | 6 +-- 4 files changed, 47 insertions(+), 11 deletions(-) diff --git a/client/contexts/CallContext.ts b/client/contexts/CallContext.ts index 4be9c138a0462..f79a2f3f901b0 100644 --- a/client/contexts/CallContext.ts +++ b/client/contexts/CallContext.ts @@ -23,7 +23,7 @@ type CallContextReady = { voipClient: VoIPUser; actions: CallActionsType; queueCounter: number; - openedRoomInfo: { v: { token?: string }; rid: string }; + openedRoomInfo: { v: { token?: string }; rid: string; queue: string }; openWrapUpModal: () => void; openRoom: (caller: ICallerInfo) => IVoipRoom['_id']; closeRoom: (data: { comment?: string; tags?: string[] }) => void; diff --git a/client/providers/CallProvider/CallProvider.tsx b/client/providers/CallProvider/CallProvider.tsx index 1b3307b2a1aef..1460f1581e697 100644 --- a/client/providers/CallProvider/CallProvider.tsx +++ b/client/providers/CallProvider/CallProvider.tsx @@ -214,7 +214,7 @@ export const CallProvider: FC = ({ children }) => { const voipEndpoint = useEndpoint('GET', 'voip/room'); const voipCloseRoomEndpoint = useEndpoint('POST', 'voip/room.close'); - const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string }>(); + const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string; queue: string }>(); const contextValue: CallContextValue = useMemo(() => { if (!voipEnabled) { @@ -272,7 +272,7 @@ export const CallProvider: FC = ({ children }) => { }); const voipRoom = visitor && (await voipEndpoint({ token: visitor.token, agentId: user._id })); voipRoom.room && roomCoordinator.openRouteLink(voipRoom.room.t, { rid: voipRoom.room._id, name: voipRoom.room.name }); - voipRoom.room && setRoomInfo({ v: { token: voipRoom.room.v.token }, rid: voipRoom.room._id }); + voipRoom.room && setRoomInfo({ v: { token: voipRoom.room.v.token }, rid: voipRoom.room._id, queue: voipRoom.room.queue }); const queueAggregator = result.voipClient.getAggregator(); if (queueAggregator) { queueAggregator.callStarted(); diff --git a/client/sidebar/footer/voip/VoipFooter.stories.tsx b/client/sidebar/footer/voip/VoipFooter.stories.tsx index d13b9477ee17c..57cf118955bdf 100644 --- a/client/sidebar/footer/voip/VoipFooter.stories.tsx +++ b/client/sidebar/footer/voip/VoipFooter.stories.tsx @@ -25,10 +25,9 @@ const tooltips = { endCall: 'End Call', }; -export const Default = (): ReactElement => { +export const IncomingCall = (): ReactElement => { const [muted, toggleMic] = useState(false); const [paused, togglePause] = useState(false); - const [callsInQueue] = useState('2'); return ( @@ -40,7 +39,7 @@ export const Default = (): ReactElement => { }} callerState='OFFER_RECEIVED' callActions={callActions} - title='Sales Department' + title='Phone Call' subtitle='Calling' muted={muted} paused={paused} @@ -48,10 +47,47 @@ export const Default = (): ReactElement => { togglePause={togglePause} tooltips={tooltips} openRoom={() => ''} - callsInQueue={callsInQueue} + callsInQueue='2 Calls In Queue' openWrapUpCallModal={() => null} dispatchEvent={() => null} - openedRoomInfo={{ v: { token: '' }, rid: '' }} + openedRoomInfo={{ v: { token: '' }, rid: '', queue: '' }} + /> + + ); +}; + +export const InCall = (): ReactElement => { + const [muted, toggleMic] = useState(false); + const [paused, togglePause] = useState(false); + const getSubtitle = () => { + if (paused) { + return 'On Hold'; + } + return 'In Progress'; + }; + + return ( + + ''} + callsInQueue='2 Calls In Queue' + openWrapUpCallModal={() => null} + dispatchEvent={() => null} + openedRoomInfo={{ v: { token: '' }, rid: '', queue: 'Sales Department' }} /> ); diff --git a/client/sidebar/footer/voip/VoipFooter.tsx b/client/sidebar/footer/voip/VoipFooter.tsx index c9fb32d721989..d65699eaaa3ab 100644 --- a/client/sidebar/footer/voip/VoipFooter.tsx +++ b/client/sidebar/footer/voip/VoipFooter.tsx @@ -28,7 +28,7 @@ type VoipFooterPropsType = { openWrapUpCallModal: () => void; openRoom: (caller: ICallerInfo) => IVoipRoom['_id']; dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void; - openedRoomInfo: { v: { token?: string | undefined }; rid: string }; + openedRoomInfo: { v: { token?: string | undefined }; rid: string; queue: string }; }; export const VoipFooter = ({ @@ -52,9 +52,9 @@ export const VoipFooter = ({ {callsInQueue} - + - {title} + {openedRoomInfo.queue || title} {(callerState === 'IN_CALL' || callerState === 'ON_HOLD') && ( From c55d538d30d8a11e300bd5b7aa099bba46e9190a Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Mon, 7 Mar 2022 14:29:21 -0300 Subject: [PATCH 2/4] fix --- client/contexts/CallContext.ts | 13 ++++++++++- .../providers/CallProvider/CallProvider.tsx | 22 ++++++++++++++++--- .../footer/voip/VoipFooter.stories.tsx | 8 +++---- client/sidebar/footer/voip/VoipFooter.tsx | 4 ++-- client/sidebar/footer/voip/index.tsx | 4 +++- 5 files changed, 40 insertions(+), 11 deletions(-) diff --git a/client/contexts/CallContext.ts b/client/contexts/CallContext.ts index f79a2f3f901b0..ad7b93d4fdf40 100644 --- a/client/contexts/CallContext.ts +++ b/client/contexts/CallContext.ts @@ -22,8 +22,9 @@ type CallContextReady = { ready: true; voipClient: VoIPUser; actions: CallActionsType; + queueName: string; queueCounter: number; - openedRoomInfo: { v: { token?: string }; rid: string; queue: string }; + openedRoomInfo: { v: { token?: string }; rid: string }; openWrapUpModal: () => void; openRoom: (caller: ICallerInfo) => IVoipRoom['_id']; closeRoom: (data: { comment?: string; tags?: string[] }) => void; @@ -133,6 +134,16 @@ export const useCallClient = (): VoIPUser => { return context.voipClient; }; +export const useQueueName = (): CallContextReady['queueName'] => { + const context = useContext(CallContext); + + if (!isCallContextReady(context)) { + throw new Error('useQueueInfo only if Calls are enabled and ready'); + } + + return context.queueName; +}; + export const useQueueCounter = (): CallContextReady['queueCounter'] => { const context = useContext(CallContext); diff --git a/client/providers/CallProvider/CallProvider.tsx b/client/providers/CallProvider/CallProvider.tsx index 1460f1581e697..f2242e5cd34e0 100644 --- a/client/providers/CallProvider/CallProvider.tsx +++ b/client/providers/CallProvider/CallProvider.tsx @@ -44,6 +44,7 @@ export const CallProvider: FC = ({ children }) => { const AudioTagPortal: FC = ({ children }) => useMemo(() => createPortal(children, document.body), [children]); + const [queueName, setQueueName] = useState(''); const [queueCounter, setQueueCounter] = useState(''); const setModal = useSetModal(); @@ -87,6 +88,7 @@ export const CallProvider: FC = ({ children }) => { const queueAggregator = result.voipClient.getAggregator(); if (queueAggregator) { queueAggregator.memberAdded(queue); + setQueueName(queue.queuename); setQueueCounter(queueAggregator.getCallWaitingCount().toString()); } }, @@ -129,6 +131,7 @@ export const CallProvider: FC = ({ children }) => { const queueAggregator = result.voipClient.getAggregator(); if (queueAggregator) { queueAggregator.queueJoined(joiningDetails); + setQueueName(joiningDetails.queuename); setQueueCounter(queueAggregator.getCallWaitingCount().toString()); } }, @@ -214,7 +217,7 @@ export const CallProvider: FC = ({ children }) => { const voipEndpoint = useEndpoint('GET', 'voip/room'); const voipCloseRoomEndpoint = useEndpoint('POST', 'voip/room.close'); - const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string; queue: string }>(); + const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string }>(); const contextValue: CallContextValue = useMemo(() => { if (!voipEnabled) { @@ -251,6 +254,7 @@ export const CallProvider: FC = ({ children }) => { registrationInfo, voipClient, queueCounter, + queueName, actions: { mute: (): Promise => voipClient.muteCall(true), // voipClient.mute(), unmute: (): Promise => voipClient.muteCall(false), // voipClient.unmute() @@ -272,7 +276,7 @@ export const CallProvider: FC = ({ children }) => { }); const voipRoom = visitor && (await voipEndpoint({ token: visitor.token, agentId: user._id })); voipRoom.room && roomCoordinator.openRouteLink(voipRoom.room.t, { rid: voipRoom.room._id, name: voipRoom.room.name }); - voipRoom.room && setRoomInfo({ v: { token: voipRoom.room.v.token }, rid: voipRoom.room._id, queue: voipRoom.room.queue }); + voipRoom.room && setRoomInfo({ v: { token: voipRoom.room.v.token }, rid: voipRoom.room._id }); const queueAggregator = result.voipClient.getAggregator(); if (queueAggregator) { queueAggregator.callStarted(); @@ -291,7 +295,19 @@ export const CallProvider: FC = ({ children }) => { }, openWrapUpModal, }; - }, [queueCounter, voipEnabled, homeRoute, openWrapUpModal, result, roomInfo, user, visitorEndpoint, voipCloseRoomEndpoint, voipEndpoint]); + }, [ + voipEnabled, + result, + roomInfo, + queueCounter, + queueName, + openWrapUpModal, + user, + visitorEndpoint, + voipEndpoint, + voipCloseRoomEndpoint, + homeRoute, + ]); return ( {children} diff --git a/client/sidebar/footer/voip/VoipFooter.stories.tsx b/client/sidebar/footer/voip/VoipFooter.stories.tsx index 57cf118955bdf..fe8155df03db7 100644 --- a/client/sidebar/footer/voip/VoipFooter.stories.tsx +++ b/client/sidebar/footer/voip/VoipFooter.stories.tsx @@ -39,7 +39,7 @@ export const IncomingCall = (): ReactElement => { }} callerState='OFFER_RECEIVED' callActions={callActions} - title='Phone Call' + title='Sales Department' subtitle='Calling' muted={muted} paused={paused} @@ -50,7 +50,7 @@ export const IncomingCall = (): ReactElement => { callsInQueue='2 Calls In Queue' openWrapUpCallModal={() => null} dispatchEvent={() => null} - openedRoomInfo={{ v: { token: '' }, rid: '', queue: '' }} + openedRoomInfo={{ v: { token: '' }, rid: '' }} /> ); @@ -76,7 +76,7 @@ export const InCall = (): ReactElement => { }} callerState='IN_CALL' callActions={callActions} - title='Phone Call' + title='Sales Department' subtitle={getSubtitle()} muted={muted} paused={paused} @@ -87,7 +87,7 @@ export const InCall = (): ReactElement => { callsInQueue='2 Calls In Queue' openWrapUpCallModal={() => null} dispatchEvent={() => null} - openedRoomInfo={{ v: { token: '' }, rid: '', queue: 'Sales Department' }} + openedRoomInfo={{ v: { token: '' }, rid: '' }} /> ); diff --git a/client/sidebar/footer/voip/VoipFooter.tsx b/client/sidebar/footer/voip/VoipFooter.tsx index d65699eaaa3ab..dfa6b35aadfcf 100644 --- a/client/sidebar/footer/voip/VoipFooter.tsx +++ b/client/sidebar/footer/voip/VoipFooter.tsx @@ -28,7 +28,7 @@ type VoipFooterPropsType = { openWrapUpCallModal: () => void; openRoom: (caller: ICallerInfo) => IVoipRoom['_id']; dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void; - openedRoomInfo: { v: { token?: string | undefined }; rid: string; queue: string }; + openedRoomInfo: { v: { token?: string | undefined }; rid: string }; }; export const VoipFooter = ({ @@ -54,7 +54,7 @@ export const VoipFooter = ({ - {openedRoomInfo.queue || title} + {title} {(callerState === 'IN_CALL' || callerState === 'ON_HOLD') && ( diff --git a/client/sidebar/footer/voip/index.tsx b/client/sidebar/footer/voip/index.tsx index c9523916fa3f7..7d7135887decd 100644 --- a/client/sidebar/footer/voip/index.tsx +++ b/client/sidebar/footer/voip/index.tsx @@ -6,6 +6,7 @@ import { useCallOpenRoom, useOpenedRoomInfo, useQueueCounter, + useQueueName, useWrapUpModal, } from '../../../contexts/CallContext'; import { useEndpoint } from '../../../contexts/ServerContext'; @@ -20,6 +21,7 @@ export const VoipFooter = (): ReactElement | null => { const openRoom = useCallOpenRoom(); const queueCounter = useQueueCounter(); + const queueName = useQueueName(); const openWrapUpCallModal = useWrapUpModal(); const openedRoomInfo = useOpenedRoomInfo(); @@ -72,7 +74,7 @@ export const VoipFooter = (): ReactElement | null => { caller={callerInfo.caller} callerState={callerInfo.state} callActions={callActions} - title={t('Phone_call')} + title={queueName || t('Phone_call')} subtitle={getSubtitle()} muted={muted} paused={paused} From e886a2ba211ef89a35d69a3628718a3cc7d43d6b Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Mon, 7 Mar 2022 23:34:44 -0300 Subject: [PATCH 3/4] plural --- client/sidebar/footer/voip/index.tsx | 14 +++++++++++++- packages/rocketchat-i18n/i18n/en.i18n.json | 6 ++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/client/sidebar/footer/voip/index.tsx b/client/sidebar/footer/voip/index.tsx index 7d7135887decd..9a07389284dfd 100644 --- a/client/sidebar/footer/voip/index.tsx +++ b/client/sidebar/footer/voip/index.tsx @@ -69,6 +69,18 @@ export const VoipFooter = (): ReactElement | null => { return null; } + const getCallsInQueueText = (queueCounter: number): string => { + if (queueCounter === 0) { + return t('Calls_in_queue_empty'); + } + + if (queueCounter === 1) { + return t('Calls_in_queue', { calls: queueCounter }); + } + + return t('Calls_in_queue_plural', { calls: queueCounter }); + }; + return ( { togglePause={togglePause} tooltips={tooltips} openRoom={openRoom} - callsInQueue={t('Calls_in_queue', { calls: queueCounter })} + callsInQueue={getCallsInQueueText(queueCounter)} openWrapUpCallModal={openWrapUpCallModal} dispatchEvent={dispatchEvent} openedRoomInfo={openedRoomInfo} diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json index 880f61a8e3c00..d068e05979378 100644 --- a/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/packages/rocketchat-i18n/i18n/en.i18n.json @@ -712,7 +712,9 @@ "Call": "Call", "Calling": "Calling", "Call_Center": "Call Center", - "Calls_in_queue": "__calls__ Calls In Queue", + "Calls_in_queue": "__calls__ Call In Queue", + "Calls_in_queue_plural": "__calls__ Calls In Queue", + "Calls_in_queue_empty": "Queue Is Empty", "Call_declined": "Call Declined!", "Call_Information": "Call Information", "Call_provider": "Call Provider", @@ -4949,4 +4951,4 @@ "onboarding.form.standaloneServerForm.servicesUnavailable": "Some of the services will be unavailable or will require manual setup", "onboarding.form.standaloneServerForm.publishOwnApp": "In order to send push notitications you need to compile and publish your own app to Google Play and App Store", "onboarding.form.standaloneServerForm.manuallyIntegrate": "Need to manually integrate with external services" -} \ No newline at end of file +} From ad69245f351069e07c9225c1e912f7beb909b5ab Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Tue, 8 Mar 2022 14:20:33 -0300 Subject: [PATCH 4/4] end --- client/contexts/CallContext.ts | 13 +- .../providers/CallProvider/CallProvider.tsx | 24 +- .../footer/voip/VoipFooter.stories.tsx | 4 + client/sidebar/footer/voip/VoipFooter.tsx | 215 ++++++++++-------- client/sidebar/footer/voip/index.tsx | 20 +- packages/rocketchat-i18n/i18n/en.i18n.json | 1 + 6 files changed, 169 insertions(+), 108 deletions(-) diff --git a/client/contexts/CallContext.ts b/client/contexts/CallContext.ts index ad7b93d4fdf40..be9409b95041e 100644 --- a/client/contexts/CallContext.ts +++ b/client/contexts/CallContext.ts @@ -26,7 +26,8 @@ type CallContextReady = { queueCounter: number; openedRoomInfo: { v: { token?: string }; rid: string }; openWrapUpModal: () => void; - openRoom: (caller: ICallerInfo) => IVoipRoom['_id']; + openRoom: (rid: IVoipRoom['_id']) => void; + createRoom: (caller: ICallerInfo) => IVoipRoom['_id']; closeRoom: (data: { comment?: string; tags?: string[] }) => void; }; type CallContextError = { @@ -105,6 +106,16 @@ export const useCallerInfo = (): VoIpCallerInfo => { return useSubscription(subscription); }; +export const useCallCreateRoom = (): CallContextReady['createRoom'] => { + const context = useContext(CallContext); + + if (!isCallContextReady(context)) { + throw new Error('useCallerInfo only if Calls are enabled and ready'); + } + + return context.createRoom; +}; + export const useCallOpenRoom = (): CallContextReady['openRoom'] => { const context = useContext(CallContext); diff --git a/client/providers/CallProvider/CallProvider.tsx b/client/providers/CallProvider/CallProvider.tsx index f1ba2028adfd3..eb3e7a6fbc36b 100644 --- a/client/providers/CallProvider/CallProvider.tsx +++ b/client/providers/CallProvider/CallProvider.tsx @@ -7,6 +7,7 @@ import { CustomSounds } from '../../../app/custom-sounds/client'; import { getUserPreference } from '../../../app/utils/client'; import { IVoipRoom } from '../../../definition/IRoom'; import { IUser } from '../../../definition/IUser'; +import { ICallerInfo } from '../../../definition/voip/ICallerInfo'; import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal'; import { CallContext, CallContextValue } from '../../contexts/CallContext'; import { useSetModal } from '../../contexts/ModalContext'; @@ -44,7 +45,7 @@ export const CallProvider: FC = ({ children }) => { const AudioTagPortal: FC = ({ children }) => useMemo(() => createPortal(children, document.body), [children]); const [queueName, setQueueName] = useState(''); - const [queueCounter, setQueueCounter] = useState(''); + const [queueCounter, setQueueCounter] = useState(0); const setModal = useSetModal(); @@ -73,7 +74,7 @@ export const CallProvider: FC = ({ children }) => { }): Promise => { queueAggregator.queueJoined(joiningDetails); setQueueName(joiningDetails.queuename); - setQueueCounter(queueAggregator.getCallWaitingCount().toString()); + setQueueCounter(queueAggregator.getCallWaitingCount()); }; return subscribeToNotifyUser(`${user._id}/callerjoined`, handleQueueJoined); @@ -95,7 +96,7 @@ export const CallProvider: FC = ({ children }) => { const handleAgentConnected = (queue: { queuename: string; queuedcalls: string; waittimeinqueue: string }): void => { queueAggregator.callPickedup(queue); - setQueueCounter(queueAggregator.getCallWaitingCount().toString()); + setQueueCounter(queueAggregator.getCallWaitingCount()); }; return subscribeToNotifyUser(`${user._id}/agentconnected`, handleAgentConnected); @@ -118,7 +119,7 @@ export const CallProvider: FC = ({ children }) => { const handleMemberAdded = (queue: { queuename: string; queuedcalls: string }): void => { queueAggregator.memberAdded(queue); setQueueName(queue.queuename); - setQueueCounter(queueAggregator.getCallWaitingCount().toString()); + setQueueCounter(queueAggregator.getCallWaitingCount()); }; return subscribeToNotifyUser(`${user._id}/queuememberadded`, handleMemberAdded); @@ -140,7 +141,7 @@ export const CallProvider: FC = ({ children }) => { const handleMemberRemoved = (queue: { queuename: string; queuedcalls: string }): void => { queueAggregator.memberRemoved(queue); - setQueueCounter(queueAggregator.getCallWaitingCount().toString()); + setQueueCounter(queueAggregator.getCallWaitingCount()); }; return subscribeToNotifyUser(`${user._id}/queuememberremoved`, handleMemberRemoved); @@ -162,7 +163,7 @@ export const CallProvider: FC = ({ children }) => { const handleCallAbandon = (queue: { queuename: string; queuedcallafterabandon: string }): void => { queueAggregator.queueAbandoned(queue); - setQueueCounter(queueAggregator.getCallWaitingCount().toString()); + setQueueCounter(queueAggregator.getCallWaitingCount()); }; return subscribeToNotifyUser(`${user._id}/callabandoned`, handleCallAbandon); @@ -236,6 +237,10 @@ export const CallProvider: FC = ({ children }) => { const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string }>(); + const openRoom = (rid: IVoipRoom['_id']): void => { + roomCoordinator.openRouteLink('v', { rid }); + }; + const contextValue: CallContextValue = useMemo(() => { if (!voipEnabled) { return { @@ -283,7 +288,8 @@ export const CallProvider: FC = ({ children }) => { remoteAudioMediaRef.current && voipClient.acceptCall({ remoteMediaElement: remoteAudioMediaRef.current }), reject: (): Promise => voipClient.rejectCall(), }, - openRoom: async (caller): Promise => { + openRoom, + createRoom: async (caller: ICallerInfo): Promise => { if (user) { const { visitor } = await visitorEndpoint({ visitor: { @@ -293,7 +299,7 @@ export const CallProvider: FC = ({ children }) => { }, }); const voipRoom = visitor && (await voipEndpoint({ token: visitor.token, agentId: user._id })); - voipRoom.room && roomCoordinator.openRouteLink(voipRoom.room.t, { rid: voipRoom.room._id, name: voipRoom.room.name }); + openRoom(voipRoom.room._id); voipRoom.room && setRoomInfo({ v: { token: voipRoom.room.v.token }, rid: voipRoom.room._id }); const queueAggregator = result.voipClient.getAggregator(); if (queueAggregator) { @@ -303,7 +309,7 @@ export const CallProvider: FC = ({ children }) => { } return ''; }, - closeRoom: async ({ comment, tags }): Promise => { + closeRoom: async ({ comment, tags }: { comment: string; tags: string[] }): Promise => { roomInfo && (await voipCloseRoomEndpoint({ rid: roomInfo.rid, token: roomInfo.v.token || '', comment: comment || '', tags })); homeRoute.push({}); const queueAggregator = result.voipClient.getAggregator(); diff --git a/client/sidebar/footer/voip/VoipFooter.stories.tsx b/client/sidebar/footer/voip/VoipFooter.stories.tsx index fe8155df03db7..c9bb15dd8886e 100644 --- a/client/sidebar/footer/voip/VoipFooter.stories.tsx +++ b/client/sidebar/footer/voip/VoipFooter.stories.tsx @@ -46,11 +46,13 @@ export const IncomingCall = (): ReactElement => { toggleMic={toggleMic} togglePause={togglePause} tooltips={tooltips} + createRoom={() => ''} openRoom={() => ''} callsInQueue='2 Calls In Queue' openWrapUpCallModal={() => null} dispatchEvent={() => null} openedRoomInfo={{ v: { token: '' }, rid: '' }} + anonymousText={'Anonymous'} /> ); @@ -83,11 +85,13 @@ export const InCall = (): ReactElement => { toggleMic={toggleMic} togglePause={togglePause} tooltips={tooltips} + createRoom={() => ''} openRoom={() => ''} callsInQueue='2 Calls In Queue' openWrapUpCallModal={() => null} dispatchEvent={() => null} openedRoomInfo={{ v: { token: '' }, rid: '' }} + anonymousText={'Anonymous'} /> ); diff --git a/client/sidebar/footer/voip/VoipFooter.tsx b/client/sidebar/footer/voip/VoipFooter.tsx index dfa6b35aadfcf..1079216259727 100644 --- a/client/sidebar/footer/voip/VoipFooter.tsx +++ b/client/sidebar/footer/voip/VoipFooter.tsx @@ -1,3 +1,4 @@ +import { css } from '@rocket.chat/css-in-js'; import { Box, Button, ButtonGroup, Icon, SidebarFooter } from '@rocket.chat/fuselage'; import React, { ReactElement } from 'react'; @@ -26,9 +27,11 @@ type VoipFooterPropsType = { callsInQueue: string; openWrapUpCallModal: () => void; - openRoom: (caller: ICallerInfo) => IVoipRoom['_id']; + createRoom: (caller: ICallerInfo) => IVoipRoom['_id']; + openRoom: (rid: IVoipRoom['_id']) => void; dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void; openedRoomInfo: { v: { token?: string | undefined }; rid: string }; + anonymousText: string; }; export const VoipFooter = ({ @@ -42,101 +45,133 @@ export const VoipFooter = ({ toggleMic, togglePause, tooltips, + createRoom, openRoom, callsInQueue, openWrapUpCallModal, dispatchEvent, openedRoomInfo, -}: VoipFooterPropsType): ReactElement => ( - - - {callsInQueue} - - - - {title} - - {(callerState === 'IN_CALL' || callerState === 'ON_HOLD') && ( - - - - - )} - - - - - {caller.callerName} + anonymousText, +}: VoipFooterPropsType): ReactElement => { + const cssClickable = + callerState === 'IN_CALL' || callerState === 'ON_HOLD' + ? css` + cursor: pointer; + ` + : ''; + + return ( + + { + if (callerState === 'IN_CALL' || callerState === 'ON_HOLD') { + openRoom(openedRoomInfo.rid); + } + }} + > + + {callsInQueue} - - {subtitle} + + + {title} + + {(callerState === 'IN_CALL' || callerState === 'ON_HOLD') && ( + + + + + )} - + + + + {caller.callerName || caller.callerId || anonymousText} + + + {subtitle} + + - - {callerState === 'IN_CALL' && ( - - )} - {callerState === 'OFFER_RECEIVED' && ( - - )} - {callerState === 'OFFER_RECEIVED' && ( - - )} - - - -); + return callActions.end(); + }} + > + + + )} + {callerState === 'OFFER_RECEIVED' && ( + + )} + {callerState === 'OFFER_RECEIVED' && ( + + )} + + + + + ); +}; diff --git a/client/sidebar/footer/voip/index.tsx b/client/sidebar/footer/voip/index.tsx index 9a07389284dfd..bc6a6fb3e20f8 100644 --- a/client/sidebar/footer/voip/index.tsx +++ b/client/sidebar/footer/voip/index.tsx @@ -1,7 +1,8 @@ -import React, { ReactElement, useCallback, useState } from 'react'; +import React, { ReactElement, useCallback, useMemo, useState } from 'react'; import { useCallActions, + useCallCreateRoom, useCallerInfo, useCallOpenRoom, useOpenedRoomInfo, @@ -19,6 +20,7 @@ export const VoipFooter = (): ReactElement | null => { const callActions = useCallActions(); const dispatchEvent = useEndpoint('POST', 'voip/events'); + const createRoom = useCallCreateRoom(); const openRoom = useCallOpenRoom(); const queueCounter = useQueueCounter(); const queueName = useQueueName(); @@ -65,11 +67,7 @@ export const VoipFooter = (): ReactElement | null => { endCall: t('End_Call'), }; - if (!('caller' in callerInfo)) { - return null; - } - - const getCallsInQueueText = (queueCounter: number): string => { + const getCallsInQueueText = useMemo((): string => { if (queueCounter === 0) { return t('Calls_in_queue_empty'); } @@ -79,7 +77,11 @@ export const VoipFooter = (): ReactElement | null => { } return t('Calls_in_queue_plural', { calls: queueCounter }); - }; + }, [queueCounter, t]); + + if (!('caller' in callerInfo)) { + return null; + } return ( { toggleMic={toggleMic} togglePause={togglePause} tooltips={tooltips} + createRoom={createRoom} openRoom={openRoom} - callsInQueue={getCallsInQueueText(queueCounter)} + callsInQueue={getCallsInQueueText} openWrapUpCallModal={openWrapUpCallModal} dispatchEvent={dispatchEvent} openedRoomInfo={openedRoomInfo} + anonymousText={t('Anonymous')} /> ); }; diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json index d068e05979378..ef24ba465645e 100644 --- a/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/packages/rocketchat-i18n/i18n/en.i18n.json @@ -350,6 +350,7 @@ "And_more": "And __length__ more", "Animals_and_Nature": "Animals & Nature", "Announcement": "Announcement", + "Anonymous": "Anonymous", "Answer_call": "Answer Call", "API": "API", "API_Add_Personal_Access_Token": "Add new Personal Access Token",