[IMPROVE] Updating voip tooltips and icons

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

@@ -16,8 +16,10 @@ const callActions = {
 };
 
 const tooltips = {
-	mute: 'Mute',
+	mute: 'Turn off microphone',
+	unmute: 'Turn on microphone',
 	holdCall: 'Hold Call',
+	resumeCall: 'Resume',
 	holdCallEEOnly: 'Hold Call (Enterprise Edition only)',
 	acceptCall: 'Accept Call',
 	endCall: 'End Call',

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

@@ -3,7 +3,7 @@ import { ICallerInfo, VoIpCallerInfo, VoipClientEvents } from '@rocket.chat/core
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup, Icon, SidebarFooter, Menu, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { ReactElement, MouseEvent, ReactNode } from 'react';
+import React, { ReactElement, MouseEvent, ReactNode, useMemo } from 'react';
 
 import type { VoipFooterMenuOptions } from '../../../../ee/client/hooks/useVoipFooterMenu';
 import { CallActionsType } from '../../../contexts/CallContext';
@@ -21,6 +21,8 @@ type VoipFooterPropsType = {
 	togglePause: (state: boolean) => void;
 	tooltips: {
 		mute: string;
+		unmute: string;
+		resumeCall: string;
 		holdCall: string;
 		holdCallEEOnly: string;
 		acceptCall: string;
@@ -74,6 +76,13 @@ export const VoipFooter = ({
 		togglePause(!paused);
 	};
 
+	const holdTitle = useMemo(() => {
+		if (!isEnterprise) {
+			return tooltips.holdCallEEOnly;
+		}
+		return paused ? tooltips.resumeCall : tooltips.holdCall;
+	}, [paused, tooltips, isEnterprise]);
+
 	return (
 		<SidebarFooter elevated>
 			<Box
@@ -95,19 +104,19 @@ export const VoipFooter = ({
 						<ButtonGroup medium className='sidebar--custom-colors'>
 							<IconButton
 								disabled={paused}
-								title={tooltips.mute}
+								title={muted ? tooltips.unmute : tooltips.mute}
 								color={muted ? 'neutral-500' : 'info'}
-								icon='mic'
+								icon={muted ? 'mic-off' : 'mic'}
 								small
 								onClick={(e): void => {
 									e.stopPropagation();
 									toggleMic(!muted);
 								}}
 							/>
 							<IconButton
-								title={isEnterprise ? tooltips.holdCall : tooltips.holdCallEEOnly}
+								title={holdTitle}
 								disabled={!isEnterprise}
-								icon='pause-unfilled'
+								icon={paused ? 'pause' : 'pause-unfilled'}
 								color={paused ? 'neutral-500' : 'info'}
 								small
 								onClick={handleHold}

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

@@ -62,7 +62,9 @@ export const VoipFooter = (): ReactElement | null => {
 	};
 
 	const tooltips = {
-		mute: t('Mute'),
+		mute: t('Turn_off_microphone'),
+		unmute: t('Turn_on_microphone'),
+		resumeCall: t('Resume_Call'),
 		holdCall: t('Hold_Call'),
 		holdCallEEOnly: t('Hold_Call_EE_only'),
 		acceptCall: t('Accept_Call'),

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();
@@ -56,7 +37,7 @@ const OmnichannelSection = (props: typeof Box): ReactElement => {
 			<Sidebar.TopBar.Actions>
 				{showOmnichannelQueueLink && <Sidebar.TopBar.Action icon='queue' title={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')} />
 				)}

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' => {

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

@@ -0,0 +1,29 @@
+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 props = {
+		title: agentAvailable ? t('Turn_off_answer_chats') : t('Turn_on_answer_chats'),
+		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 });
+		}
+	});
+
+	return <Sidebar.TopBar.Action {...props} 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

@@ -3928,6 +3928,7 @@
   "Restart_the_server": "Restart The Server",
   "restart-server": "Restart the server",
   "restart-server_description": "Permission to restart the server",
+  "Resume_Call": "Resume Call",
   "Retail": "Retail",
   "Retention_setting_changed_successfully": "Retention policy setting changed successfully",
   "RetentionPolicy": "Retention Policy",
@@ -4313,7 +4314,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",
@@ -4765,6 +4765,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",
@@ -5193,6 +5199,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__",
@@ -5421,4 +5428,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",

apps/meteor/packages/rocketchat-i18n/i18n/pt-BR.i18n.json

@@ -3620,6 +3620,7 @@
   "Restart": "Reiniciar",
   "Restart_the_server": "Reiniciar o servidor",
   "restart-server": "Reiniciar o servidor",
+  "Resume_Call": "Retomar ligação",
   "Retail": "Varejo",
   "Retention_setting_changed_successfully": "A configuração da política de retenção foi alterada com sucesso",
   "RetentionPolicy": "Política de retenção",
@@ -4397,6 +4398,12 @@
   "Turn_OFF": "Desligar",
   "Turn_ON": "Ligar",
   "Turn_on_video": "Ligar o vídeo",
+  "Turn_on_answer_chats": "Habilitar receber chats",
+  "Turn_on_answer_calls": "Habilitar ligações",
+  "Turn_on_microphone": "Habilitar microfone",
+  "Turn_off_microphone": "Desabilitar microfone",
+  "Turn_off_answer_chats": "Desabilitar receber chats",
+  "Turn_off_answer_calls": "Desabilitar ligações",
   "Turn_off_video": "Desligar o vídeo",
   "Two Factor Authentication": "Autenticação de dois fatores",
   "Two-factor_authentication": "Autenticação de dois fatores por TOTP",
@@ -4755,6 +4762,7 @@
   "Waiting_queue_message": "Mensagem de fila de espera",
   "Waiting_queue_message_description": "Mensagem que será exibida aos visitantes quando eles entrarem na fila de espera",
   "Waiting_Time": "Tempo de espera",
+  "Waiting_for_server_connection": "Aguardando conexão com o servidor",
   "Warning": "Aviso",
   "Warnings": "Avisos",
   "WAU_value": "WAU __value__",
@@ -4958,4 +4966,4 @@
   "onboarding.form.standaloneServerForm.servicesUnavailable": "Alguns dos serviços estarão indisponíveis ou precisarão de configuração manual",
   "onboarding.form.standaloneServerForm.publishOwnApp": "Para enviar notificações de push, você precisará compilar e publicar seu próprio aplicativo no Google Play e App Store",
   "onboarding.form.standaloneServerForm.manuallyIntegrate": "É necessário integrar manualmente com serviços externos"
-}
+}