[FIX] VoIP button gets disabled whenever user status changes (#24789)

* Clickup task : https://app.clickup.com/t/25jwe53
Description : Whenever the user state is changed (Explicitly or automatically by the virtue of user's inactivity)
Voip component gets reloaded. Also during the reload of the page, the Voip component gets initialised multiple times, causing
multiple websockets opened to asterisk.
This happens because of the following facts:
1. The useEffect of useVoipClient, which creates the Voip component had user in its dependency list.
2. Whenever any user property changes, it would cause the useEffect to trigger and execute the entire initialisation of
voip component.
3. When state change happens, it triggers update on all the components. So OmnichannelCallToggleReady gets re-rendered, also useVoipClient causes reinitialisation (user state change).
4. Now, when the useEffect of OmnichannelCallToggleReady gets executed, voipClient.getRegistrarState(); value is not |registered| because the state change has caused reinitialisation
of voip component, which is not registered.
5. So again, the phone button value gets reset, the agent becomes unavailable.

Fix:
Even though the user state may change, user identity does not change. SIP client reinitialisation should happen only when userId changes.
So the fix is not to add the entire userObject in the dependency list of the useEffect of useVoipClient hook. Instead
1. Create a state userId.
2. Add another useEffect watching the user. Whenever user becomes available or any user change happens, update the userId
3. The useEffect which does the voip client initialisation, should have the userId in the dependency list.

When this is done, the Voip initialisation will happen only when userId changes.

* Clickup task : https://app.clickup.com/t/25jwe53
Description : Realised that we have useUserId hook. As we have this hook, removed the useEffect which
fetches the userId from user. Also removed the state. Instead added a constant userId.

* Clickup Tasks: https://app.clickup.com/t/25jwe53 and https://app.clickup.com/t/22xdyn5
Description :
Though this workspace was fix the first issue, it was realised that there are few other issues
which are dependent on this(Not all may have a clickup task associated).
This commit also fixes following :
1. Voip button does not get disabled when the user state changes. This happens because the user gets updated whenever the state change happens, this causes useVoipClient to reload
this reload causes the reinitialsation of voipUser which initialises the connection again.
2. PR #24752 : This PR fixes the icon display only when the extension associated with the user. This is also fixed as this was broken due to fix for #1. (THis was using user object, and we are now not using the user object directly in the useEffect for voipClient initialisation.
3. This fix broke the fact that whenever user gets associated with the agent, voip button gets active. But because we removed the use of user, This was broken too. This got fixed by the virtue of fixing #2, i.e using extension as a state.
4. Even though the association is deleted, agent was still receiving the call. This was because the SIP user was never unregistered and cleared when the association gets deleted. Fixed this issue by calling voipClient.stop() method. This would take care of unregistering if the UA is registered and then closing the webSocket.

client/lib/voip/VoIPUser.ts

@@ -656,4 +656,8 @@ export class VoIPUser extends Emitter<VoipEvents> implements OutgoingRequestDele
 	getRegistrarState(): string | undefined {
 		return this.registerer?.state.toString().toLocaleLowerCase();
 	}
+
+	clear(): void {
+		this.userAgent?.stop();
+	}
 }

client/providers/CallProvider/hooks/useVoipClient.ts

@@ -6,7 +6,7 @@ import { IRegistrationInfo } from '../../../../definition/voip/IRegistrationInfo
 import { WorkflowTypes } from '../../../../definition/voip/WorkflowTypes';
 import { useEndpoint } from '../../../contexts/ServerContext';
 import { useSetting } from '../../../contexts/SettingsContext';
-import { useUser } from '../../../contexts/UserContext';
+import { useUser, useUserId } from '../../../contexts/UserContext';
 import { SimpleVoipUser } from '../../../lib/voip/SimpleVoipUser';
 import { VoIPUser } from '../../../lib/voip/VoIPUser';
 import { useWebRtcServers } from './useWebRtcServers';
@@ -33,17 +33,18 @@ export const useVoipClient = (): UseVoipClientResult => {
 	const registrationInfo = useEndpoint('GET', 'connector.extension.getRegistrationInfoByUserId');
 	const membership = useEndpoint('GET', 'voip/queues.getMembershipSubscription');
 	const user = useUser();
-	const iceServers = useWebRtcServers();
+	const userId = useUserId();
+	const [extension, setExtension] = useSafely(useState<string | null>(null));
 
+	const iceServers = useWebRtcServers();
 	const [result, setResult] = useSafely(useState<UseVoipClientResult>({}));
-
 	useEffect(() => {
-		if (!user || !user?._id || !user?.extension || !voipEnabled) {
+		if (!userId || !extension || !voipEnabled) {
 			setResult({});
 			return;
 		}
-
-		registrationInfo({ id: user._id }).then(
+		let client: VoIPUser;
+		registrationInfo({ id: userId }).then(
 			(data) => {
 				let parsedData: IRegistrationInfo;
 				if (isSignedResponse(data)) {
@@ -59,7 +60,7 @@ export const useVoipClient = (): UseVoipClientResult => {
 					callServerConfig: { websocketPath },
 				} = parsedData;
 
-				let client: VoIPUser;
+				// let client: VoIPUser;
 				(async (): Promise<void> => {
 					try {
 						const subscription = await membership({ extension });
@@ -81,8 +82,26 @@ export const useVoipClient = (): UseVoipClientResult => {
 		return (): void => {
 			// client?.disconnect();
 			// TODO how to close the client? before creating a new one?
+			if (client) {
+				client.clear();
+			}
 		};
-	}, [user, iceServers, registrationInfo, setResult, membership, voipEnabled]);
+	}, [userId, iceServers, registrationInfo, setResult, membership, voipEnabled, extension]);
 
+	useEffect(() => {
+		if (!user) {
+			setResult({});
+			return;
+		}
+		if (user.extension) {
+			setExtension(user.extension);
+		} else {
+			setExtension(null);
+			if (!isUseVoipClientResultError(result) && !isUseVoipClientResultLoading(result)) {
+				const { voipClient } = result as UseVoipClientResultResolved;
+				voipClient.clear();
+			}
+		}
+	}, [result, setExtension, setResult, user]);
 	return result;
 };