[FIX] Disable voip button when call is in progress (#24864)

client/lib/voip/VoIPUser.ts

@@ -567,6 +567,9 @@ export class VoIPUser extends Emitter<VoipEvents> implements OutgoingRequestDele
 		if (this._callState !== 'ANSWER_SENT' && this._callState !== 'IN_CALL' && this._callState !== 'ON_HOLD') {
 			throw new Error(`Incorrect call State = ${this.callState}`);
 		}
+
+		// When call ends, force state to be revisited
+		this.emit('stateChanged');
 		switch (this.session.state) {
 			case SessionState.Initial:
 				if (this.session instanceof Invitation) {

client/sidebar/sections/components/OmnichannelCallToggleReady.tsx

@@ -2,20 +2,39 @@ import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { ReactElement, useEffect, useState } from 'react';
 
-import { useCallClient } from '../../../contexts/CallContext';
+import { useCallClient, useCallerInfo } from '../../../contexts/CallContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
 
 export const OmnichannelCallToggleReady = (): ReactElement => {
 	const [agentEnabled, setAgentEnabled] = useState(false); // TODO: get from AgentInfo
 	const t = useTranslation();
 	const [registered, setRegistered] = useState(false);
+	const voipClient = useCallClient();
+	const [onCall, setOnCall] = useState(false);
+	const callerInfo = useCallerInfo();
+
+	const getTooltip = (): string => {
+		if (!registered) {
+			return t('Enable');
+		}
+		if (!onCall) {
+			// Color for this state still not defined
+			return t('Disable');
+		}
+
+		return t('Cannot_disable_while_on_call');
+	};
 
 	const voipCallIcon = {
-		title: !registered ? t('Enable') : t('Disable'),
+		title: getTooltip(),
 		color: registered ? 'success' : undefined,
 		icon: registered ? 'phone' : 'phone-disabled',
 	} as const;
-	const voipClient = useCallClient();
+
+	useEffect(() => {
+		// Any of the 2 states means the user is already talking
+		setOnCall(['IN_CALL', 'ON_HOLD'].includes(callerInfo.state));
+	}, [callerInfo]);
 
 	useEffect(() => {
 		let agentEnabled = false;
@@ -26,13 +45,10 @@ export const OmnichannelCallToggleReady = (): ReactElement => {
 		setAgentEnabled(agentEnabled);
 		setRegistered(agentEnabled);
 	}, [voipClient]);
+
 	// TODO: move registration flow to context provider
 	const handleVoipCallStatusChange = useMutableCallback((): void => {
-		const { state } = voipClient.callerInfo;
-
-		if (['IN_CALL', 'ON_HOLD'].includes(state)) {
-			// Any of the 2 states means the user is already talking
-			// So if the caller info is any of those, we will prevent status change
+		if (onCall) {
 			return;
 		}
 		// TODO: backend set voip call status
@@ -81,5 +97,5 @@ export const OmnichannelCallToggleReady = (): ReactElement => {
 		};
 	}, [onRegistered, onRegistrationError, onUnregistered, onUnregistrationError, voipClient]);
 
-	return <Sidebar.TopBar.Action {...voipCallIcon} onClick={handleVoipCallStatusChange} />;
+	return <Sidebar.TopBar.Action {...voipCallIcon} onClick={handleVoipCallStatusChange} disabled={onCall} />;
 };

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

@@ -741,6 +741,7 @@
   "Cannot_invite_users_to_direct_rooms": "Cannot invite users to direct rooms",
   "Cannot_open_conversation_with_yourself": "Cannot Direct Message with yourself",
   "Cannot_share_your_location": "Cannot share your location...",
+  "Cannot_disable_while_on_call": "Can't change status during calls ",
   "CAS_autoclose": "Autoclose Login Popup",
   "CAS_base_url": "SSO Base URL",
   "CAS_base_url_Description": "The base URL of your external SSO service e.g: https://sso.example.undef/sso/",