[IMPROVE] Updating voip tooltips and icons

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

@@ -15,14 +15,6 @@ const callActions = {
 	reject: () => ({}),
 };
 
-const tooltips = {
-	mute: 'Mute',
-	holdCall: 'Hold Call',
-	holdCallEEOnly: 'Hold Call (Enterprise Edition only)',
-	acceptCall: 'Accept Call',
-	endCall: 'End Call',
-};
-
 const callerDefault = {
 	callerName: '',
 	callerId: '+5551999999999',
@@ -84,7 +76,6 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 				paused={paused}
 				toggleMic={toggleMic}
 				togglePause={togglePause}
-				tooltips={tooltips}
 				createRoom={async () => ''}
 				openRoom={() => ''}
 				callsInQueue='2 Calls In Queue'

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

@@ -19,15 +19,7 @@ type VoipFooterPropsType = {
 	paused: boolean;
 	toggleMic: (state: boolean) => void;
 	togglePause: (state: boolean) => void;
-	tooltips: {
-		mute: string;
-		holdCall: string;
-		holdCallEEOnly: string;
-		acceptCall: string;
-		endCall: string;
-	};
 	callsInQueue: string;
-
 	createRoom: (caller: ICallerInfo, callDirection?: IVoipRoom['direction']) => Promise<IVoipRoom['_id']>;
 	openRoom: (rid: IVoipRoom['_id']) => void;
 	dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void;
@@ -47,7 +39,6 @@ export const VoipFooter = ({
 	paused,
 	toggleMic,
 	togglePause,
-	tooltips,
 	createRoom,
 	openRoom,
 	callsInQueue,
@@ -74,6 +65,13 @@ export const VoipFooter = ({
 		togglePause(!paused);
 	};
 
+	const holdTitle = ((): string => {
+		if (!isEnterprise) {
+			return t('Hold_EE_only');
+		}
+		return paused ? t('Resume') : t('Hold');
+	})();
+
 	return (
 		<SidebarFooter elevated>
 			<Box
@@ -94,25 +92,25 @@ export const VoipFooter = ({
 					{(callerState === 'IN_CALL' || callerState === 'ON_HOLD') && (
 						<ButtonGroup medium className='sidebar--custom-colors'>
 							<IconButton
+								small
 								disabled={paused}
-								title={tooltips.mute}
+								icon={muted ? 'mic-off' : 'mic'}
 								color={muted ? 'neutral-500' : 'info'}
-								icon='mic'
-								small
+								data-tooltip={muted ? t('Turn_on_microphone') : t('Turn_off_microphone')}
 								onClick={(e): void => {
 									e.stopPropagation();
 									toggleMic(!muted);
 								}}
 							/>
 							<IconButton
-								title={isEnterprise ? tooltips.holdCall : tooltips.holdCallEEOnly}
+								small
+								data-tooltip={holdTitle}
 								disabled={!isEnterprise}
-								icon='pause-unfilled'
+								icon={paused ? 'pause' : 'pause-unfilled'}
 								color={paused ? 'neutral-500' : 'info'}
-								small
 								onClick={handleHold}
 							/>
-							{options && <Menu color='neutral-500' options={options} />}
+							{options && <Menu color='neutral-500' data-tooltip={t('More_options')} options={options} />}
 						</ButtonGroup>
 					)}
 				</Box>
@@ -129,12 +127,12 @@ export const VoipFooter = ({
 					<ButtonGroup medium>
 						{(callerState === 'IN_CALL' || callerState === 'ON_HOLD' || callerState === 'OFFER_SENT') && (
 							<Button
-								title={tooltips.endCall}
-								disabled={paused}
 								small
 								square
 								danger
+								disabled={paused}
 								aria-label={t('End_call')}
+								data-tooltip={t('End_Call')}
 								onClick={(e): unknown => {
 									e.stopPropagation();
 									muted && toggleMic(false);
@@ -146,16 +144,16 @@ export const VoipFooter = ({
 							</Button>
 						)}
 						{callerState === 'OFFER_RECEIVED' && (
-							<Button title={tooltips.endCall} aria-label={t('Reject_call')} small square danger onClick={callActions.reject}>
+							<Button data-tooltip={t('Decline')} aria-label={t('Decline')} small square danger onClick={callActions.reject}>
 								<Icon name='phone-off' size='x16' />
 							</Button>
 						)}
 						{callerState === 'OFFER_RECEIVED' && (
 							<Button
-								title={tooltips.acceptCall}
 								small
 								square
 								success
+								data-tooltip={t('Accept')}
 								onClick={async (): Promise<void> => {
 									callActions.pickUp();
 									const rid = await createRoom(caller);

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

@@ -61,14 +61,6 @@ export const VoipFooter = (): ReactElement | null => {
 		return subtitles[state] || '';
 	};
 
-	const tooltips = {
-		mute: t('Mute'),
-		holdCall: t('Hold_Call'),
-		holdCallEEOnly: t('Hold_Call_EE_only'),
-		acceptCall: t('Accept_Call'),
-		endCall: t('End_Call'),
-	};
-
 	const getCallsInQueueText = useMemo((): string => {
 		if (queueCounter === 0) {
 			return t('Calls_in_queue_empty');
@@ -96,7 +88,6 @@ export const VoipFooter = (): ReactElement | null => {
 			paused={paused}
 			toggleMic={toggleMic}
 			togglePause={togglePause}
-			tooltips={tooltips}
 			createRoom={createRoom}
 			openRoom={openRoom}
 			callsInQueue={getCallsInQueueText}

apps/meteor/client/sidebar/sections/OmnichannelSection.tsx

@@ -1,40 +1,21 @@
 import { Box, Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useLayout, useToastMessageDispatch, useRoute, usePermission, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
+import { useLayout, useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { memo, ReactElement } from 'react';
 
 import { useIsCallEnabled, useIsCallReady } from '../../contexts/CallContext';
-import { useOmnichannelAgentAvailable } from '../../hooks/omnichannel/useOmnichannelAgentAvailable';
 import { useOmnichannelShowQueueLink } from '../../hooks/omnichannel/useOmnichannelShowQueueLink';
-import { OmniChannelCallDialPad } from './actions/OmnichannelCallDialPad';
-import { OmnichannelCallToggle } from './actions/OmnichannelCallToggle';
+import { OmniChannelCallDialPad, OmnichannelCallToggle, OmnichannelLivechatToggle } from './actions';
 
 const OmnichannelSection = (props: typeof Box): ReactElement => {
 	const t = useTranslation();
-	const changeAgentStatus = useMethod('livechat:changeLivechatStatus');
 	const isCallEnabled = useIsCallEnabled();
 	const isCallReady = useIsCallReady();
 	const hasPermissionToSeeContactCenter = usePermission('view-omnichannel-contact-center');
-	const agentAvailable = useOmnichannelAgentAvailable();
 	const showOmnichannelQueueLink = useOmnichannelShowQueueLink();
 	const { sidebar } = useLayout();
 	const directoryRoute = useRoute('omnichannel-directory');
 	const queueListRoute = useRoute('livechat-queue');
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	const omnichannelIcon = {
-		title: agentAvailable ? t('Available') : t('Not_Available'),
-		color: agentAvailable ? 'success' : undefined,
-		icon: agentAvailable ? 'message' : 'message-disabled',
-	} as const;
-
-	const handleAvailableStatusChange = useMutableCallback(async () => {
-		try {
-			await changeAgentStatus();
-		} catch (error: unknown) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	});
 
 	const handleRoute = useMutableCallback((route) => {
 		sidebar.toggle();
@@ -54,11 +35,13 @@ const OmnichannelSection = (props: typeof Box): ReactElement => {
 		<Sidebar.TopBar.ToolBox className='omnichannel-sidebar' {...props}>
 			<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
 			<Sidebar.TopBar.Actions>
-				{showOmnichannelQueueLink && <Sidebar.TopBar.Action icon='queue' title={t('Queue')} onClick={(): void => handleRoute('queue')} />}
+				{showOmnichannelQueueLink && (
+					<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
+				)}
 				{isCallEnabled && <OmnichannelCallToggle />}
-				<Sidebar.TopBar.Action {...omnichannelIcon} onClick={handleAvailableStatusChange} />
+				<OmnichannelLivechatToggle />
 				{hasPermissionToSeeContactCenter && (
-					<Sidebar.TopBar.Action title={t('Contact_Center')} icon='address-book' onClick={(): void => handleRoute('directory')} />
+					<Sidebar.TopBar.Action data-tooltip={t('Contact_Center')} icon='address-book' onClick={(): void => handleRoute('directory')} />
 				)}
 				{isCallReady && <OmniChannelCallDialPad />}
 			</Sidebar.TopBar.Actions>

apps/meteor/client/sidebar/sections/actions/OmnichannelCallDialPad.tsx

@@ -14,11 +14,11 @@ export const OmniChannelCallDialPad = ({ ...props }): ReactElement => {
 
 	return (
 		<Sidebar.TopBar.Action
-			title={outBoundCallsAllowed ? t('New_Call') : t('New_Call_Enterprise_Edition_Only')}
 			icon='dialpad'
 			onClick={(): void => openDialModal()}
 			disabled={!outBoundCallsEnabledForUser}
 			aria-label={t('Open_Dialpad')}
+			data-tooltip={outBoundCallsAllowed ? t('New_Call') : t('New_Call_Enterprise_Edition_Only')}
 			{...props}
 		/>
 	);

apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx

@@ -4,5 +4,5 @@ import React, { ReactElement } from 'react';
 
 export const OmnichannelCallToggleError = ({ ...props }): ReactElement => {
 	const t = useTranslation();
-	return <Sidebar.TopBar.Action icon='phone' danger data-title={t('Error')} disabled {...props} />;
+	return <Sidebar.TopBar.Action icon='phone' danger data-tooltip={t('Error')} disabled {...props} />;
 };

apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleLoading.tsx

@@ -4,5 +4,5 @@ import React, { ReactElement } from 'react';
 
 export const OmnichannelCallToggleLoading = ({ ...props }): ReactElement => {
 	const t = useTranslation();
-	return <Sidebar.TopBar.Action icon='phone' data-title={t('Loading')} aria-label={t('VoIP_Toggle')} disabled {...props} />;
+	return <Sidebar.TopBar.Action icon='phone' data-tooltip={t('Loading')} aria-label={t('VoIP_Toggle')} disabled {...props} />;
 };

apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx

@@ -25,18 +25,18 @@ export const OmnichannelCallToggleReady = ({ ...props }): ReactElement => {
 
 	const getTitle = (): string => {
 		if (networkStatus === 'offline') {
-			return t('Signaling_connection_disconnected');
+			return t('Waiting_for_server_connection');
 		}
 
 		if (inCall) {
 			return t('Cannot_disable_while_on_call');
 		}
 
 		if (registered) {
-			return t('Enabled');
+			return t('Turn_off_answer_calls');
 		}
 
-		return t('Disabled');
+		return t('Turn_on_answer_calls');
 	};
 
 	const getIcon = (): 'phone-issue' | 'phone' | 'phone-disabled' => {
@@ -53,18 +53,14 @@ export const OmnichannelCallToggleReady = ({ ...props }): ReactElement => {
 		return registered ? 'success' : undefined;
 	};
 
-	const voipCallIcon = {
-		title: getTitle(),
-		icon: getIcon(),
-		color: getColor(),
-	};
-
 	return (
 		<Sidebar.TopBar.Action
-			aria-label={t('VoIP_Toggle')}
-			aria-checked={registered}
+			icon={getIcon()}
 			disabled={inCall}
-			{...voipCallIcon}
+			color={getColor()}
+			aria-checked={registered}
+			aria-label={t('VoIP_Toggle')}
+			data-tooltip={getTitle()}
 			{...props}
 			onClick={onClickVoipButton}
 		/>

apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx

@@ -0,0 +1,30 @@
+import { Sidebar } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useMethod, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import { useOmnichannelAgentAvailable } from '../../../hooks/omnichannel/useOmnichannelAgentAvailable';
+
+export const OmnichannelLivechatToggle = (): ReactElement => {
+	const t = useTranslation();
+	const agentAvailable = useOmnichannelAgentAvailable();
+	const changeAgentStatus = useMethod('livechat:changeLivechatStatus');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleAvailableStatusChange = useMutableCallback(async () => {
+		try {
+			await changeAgentStatus();
+		} catch (error: unknown) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	return (
+		<Sidebar.TopBar.Action
+			data-tooltip={agentAvailable ? t('Turn_off_answer_chats') : t('Turn_on_answer_chats')}
+			color={agentAvailable ? 'success' : undefined}
+			icon={agentAvailable ? 'message' : 'message-disabled'}
+			onClick={handleAvailableStatusChange}
+		/>
+	);
+};

apps/meteor/client/sidebar/sections/actions/index.ts

@@ -0,0 +1,6 @@
+export * from './OmnichannelCallDialPad';
+export * from './OmnichannelCallToggle';
+export * from './OmnichannelCallToggleError';
+export * from './OmnichannelCallToggleError';
+export * from './OmnichannelCallToggleReady';
+export * from './OmnichannelLivechatToggle';

apps/meteor/packages/rocketchat-i18n/i18n/de.i18n.json

@@ -4201,7 +4201,6 @@
   "Sidebar": "Seitenleiste",
   "Sidebar_list_mode": "Seitenleisten-Channel-Listen-Modus",
   "Sign_in_to_start_talking": "Anmelden, um mit dem Chatten zu beginnen",
-  "Signaling_connection_disconnected": "Signalisierungsverbindung unterbrochen",
   "since_creation": "seit %s",
   "Site_Name": "Seitenname",
   "Site_Url": "Website-URL",

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -26,7 +26,6 @@
   "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "A new owner will be assigned automatically to the <span style=\"font-weight: bold;\">__roomName__</span> room.",
   "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "A new owner will be assigned automatically to those <span style=\"font-weight: bold;\">__count__</span> rooms:<br/> __rooms__.",
   "Accept": "Accept",
-  "Accept_Call": "Accept Call",
   "Accept_incoming_livechat_requests_even_if_there_are_no_online_agents": "Accept incoming omnichannel requests even if there are no online agents",
   "Accept_new_livechats_when_agent_is_idle": "Accept new omnichannel requests when the agent is idle",
   "Accept_with_no_online_agents": "Accept with No Online Agents",
@@ -2319,8 +2318,8 @@
   "Highlights_List": "Highlight words",
   "History": "History",
   "Hold_Time": "Hold Time",
-  "Hold_Call": "Hold Call",
-  "Hold_Call_EE_only": "Hold Call (Enterprise Edition only)",
+  "Hold": "Hold", 
+  "Hold_EE_only": "Hold (Enterprise Edition only)",
   "Home": "Home",
   "Homepage": "Homepage",
   "Host": "Host",
@@ -4331,7 +4330,6 @@
   "Sidebar": "Sidebar",
   "Sidebar_list_mode": "Sidebar Channel List Mode",
   "Sign_in_to_start_talking": "Sign in to start talking",
-  "Signaling_connection_disconnected": "Signaling connection disconnected",
   "since_creation": "since %s",
   "Site_Name": "Site Name",
   "Site_Url": "Site URL",
@@ -4783,6 +4781,12 @@
   "Turn_OFF": "Turn OFF",
   "Turn_ON": "Turn ON",
   "Turn_on_video": "Turn on video",
+  "Turn_on_answer_chats": "Turn on answer chats",
+  "Turn_on_answer_calls": "Turn on answer calls",
+  "Turn_on_microphone": "Turn on microphone",
+  "Turn_off_microphone": "Turn off microphone",
+  "Turn_off_answer_chats": "Turn off answer chats",
+  "Turn_off_answer_calls": "Turn off answer calls",
   "Turn_off_video": "Turn off video",
   "Two Factor Authentication": "Two Factor Authentication",
   "Two-factor_authentication": "Two-factor authentication via TOTP",
@@ -5211,6 +5215,7 @@
   "Waiting_queue_message": "Waiting queue message",
   "Waiting_queue_message_description": "Message that will be displayed to the visitors when they get in the queue",
   "Waiting_Time": "Waiting Time",
+  "Waiting_for_server_connection": "Waiting for server connection",
   "Warning": "Warning",
   "Warnings": "Warnings",
   "WAU_value": "WAU __value__",
@@ -5442,4 +5447,4 @@
   "Device_Management_Email_Subject": "[Site_Name] - Login Detected",
   "Device_Management_Email_Body": "You may use the following placeholders: <h2 class=\"rc-color\">{Login_Detected}</h2><p><strong>[name] ([username]) {Logged_In_Via}</strong></p><p><strong>{Device_Management_Client}:</strong> [browserInfo]<br><strong>{Device_Management_OS}:</strong> [osInfo]<br><strong>{Device_Management_Device}:</strong> [deviceInfo]<br><strong>{Device_Management_IP}:</strong>[ipInfo]</p><p><small>[userAgent]</small></p><a class=\"btn\" href=\"[Site_URL]\">{Access_Your_Account}</a><p>{Or_Copy_And_Paste_This_URL_Into_A_Tab_Of_Your_Browser}<br><a href=\"[Site_URL]\">[SITE_URL]</a></p><p>{Thank_You_For_Choosing_RocketChat}</p>",
   "Something_Went_Wrong": "Something went wrong"
-}
+}

apps/meteor/packages/rocketchat-i18n/i18n/pl.i18n.json

@@ -4292,7 +4292,6 @@
   "Sidebar": "Pasek boczny",
   "Sidebar_list_mode": "Tryb listy kanałów na pasku bocznym",
   "Sign_in_to_start_talking": "Zaloguj się, aby zacząć mówić",
-  "Signaling_connection_disconnected": "Połączenie sygnalizacyjne rozłączone",
   "since_creation": "od %s",
   "Site_Name": "Nazwa strony",
   "Site_Url": "Adres strony",