regression: voip toggle success/error toasts being displayed in quick succession (#33574)

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx

@@ -11,7 +11,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const { clientError, isEnabled, isReady, isRegistered } = useVoipState();
-	const { register, unregister } = useVoipAPI();
+	const { register, unregister, onRegisteredOnce, onUnregisteredOnce } = useVoipAPI();
 
 	const toggleVoip = useMutation({
 		mutationFn: async () => {
@@ -24,10 +24,14 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 			return false;
 		},
 		onSuccess: (isEnabled: boolean) => {
-			dispatchToastMessage({
-				type: 'success',
-				message: isEnabled ? t('Voice_calling_enabled') : t('Voice_calling_disabled'),
-			});
+			if (isEnabled) {
+				onRegisteredOnce(() => dispatchToastMessage({ type: 'success', message: t('Voice_calling_enabled') }));
+			} else {
+				onUnregisteredOnce(() => dispatchToastMessage({ type: 'success', message: t('Voice_calling_disabled') }));
+			}
+		},
+		onError: () => {
+			dispatchToastMessage({ type: 'error', message: t('Voice_calling_registration_failed') });
 		},
 	});
 

apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx

@@ -11,7 +11,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const { clientError, isEnabled, isReady, isRegistered } = useVoipState();
-	const { register, unregister } = useVoipAPI();
+	const { register, unregister, onRegisteredOnce, onUnregisteredOnce } = useVoipAPI();
 
 	const toggleVoip = useMutation({
 		mutationFn: async () => {
@@ -24,10 +24,14 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 			return false;
 		},
 		onSuccess: (isEnabled: boolean) => {
-			dispatchToastMessage({
-				type: 'success',
-				message: isEnabled ? t('Voice_calling_enabled') : t('Voice_calling_disabled'),
-			});
+			if (isEnabled) {
+				onRegisteredOnce(() => dispatchToastMessage({ type: 'success', message: t('Voice_calling_enabled') }));
+			} else {
+				onUnregisteredOnce(() => dispatchToastMessage({ type: 'success', message: t('Voice_calling_disabled') }));
+			}
+		},
+		onError: () => {
+			dispatchToastMessage({ type: 'error', message: t('Voice_calling_registration_failed') });
 		},
 	});
 

packages/ui-voip/src/hooks/useVoipAPI.tsx

@@ -10,6 +10,8 @@ type VoipAPI = {
 	unregister(): Promise<void>;
 	openDialer(): void;
 	closeDialer(): void;
+	onRegisteredOnce(cb: () => void): () => void;
+	onUnregisteredOnce(cb: () => void): () => void;
 	transferCall(calleeURL: string): Promise<void>;
 	changeAudioOutputDevice: VoipContextReady['changeAudioOutputDevice'];
 	changeAudioInputDevice: VoipContextReady['changeAudioInputDevice'];
@@ -32,6 +34,8 @@ export const useVoipAPI = (): VoipAPI => {
 				transferCall: NOOP,
 				changeAudioInputDevice: NOOP,
 				changeAudioOutputDevice: NOOP,
+				onRegisteredOnce: NOOP,
+				onUnregisteredOnce: NOOP,
 			} as VoipAPI;
 		}
 
@@ -47,6 +51,8 @@ export const useVoipAPI = (): VoipAPI => {
 			closeDialer: () => voipClient.notifyDialer({ open: false }),
 			changeAudioInputDevice,
 			changeAudioOutputDevice,
+			onRegisteredOnce: (cb: () => void) => voipClient.once('registered', cb),
+			onUnregisteredOnce: (cb: () => void) => voipClient.once('unregistered', cb),
 		};
 	}, [context]);
 };