feat: added dialer button to NavBarV2

apps/meteor/client/NavBarV2/NavBar.tsx

@@ -7,6 +7,7 @@ import { useIsCallEnabled, useIsCallReady } from '../contexts/OmnichannelCallCon
 import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled';
 import { useOmnichannelShowQueueLink } from '../hooks/omnichannel/useOmnichannelShowQueueLink';
 import { useHasLicenseModule } from '../hooks/useHasLicenseModule';
+import { useVoiceCallState } from '../providers/VoiceCallProvider/hooks/useVoiceCallState';
 import {
 	NavBarItemOmniChannelCallDialPad,
 	NavBarItemOmnichannelContact,
@@ -16,6 +17,7 @@ import {
 } from './NavBarOmnichannelToolbar';
 import { NavBarItemMarketPlaceMenu, NavBarItemAuditMenu, NavBarItemDirectoryPage, NavBarItemHomePage } from './NavBarPagesToolbar';
 import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from './NavBarSettingsToolbar';
+import { NavBarItemVoiceCallDialer } from './NavBarVoiceCallToolbar';
 
 const NavBar = () => {
 	const t = useTranslation();
@@ -31,13 +33,17 @@ const NavBar = () => {
 	const showOmnichannelQueueLink = useOmnichannelShowQueueLink();
 	const isCallEnabled = useIsCallEnabled();
 	const isCallReady = useIsCallReady();
+	const { isEnabled: showVoiceCall } = useVoiceCallState();
 
 	const pagesToolbarRef = useRef(null);
 	const { toolbarProps: pagesToolbarProps } = useToolbar({ 'aria-label': t('Pages') }, pagesToolbarRef);
 
 	const omnichannelToolbarRef = useRef(null);
 	const { toolbarProps: omnichannelToolbarProps } = useToolbar({ 'aria-label': t('Omnichannel') }, omnichannelToolbarRef);
 
+	const voiceCallToolbarRef = useRef(null);
+	const { toolbarProps: voiceCallToolbarProps } = useToolbar({ 'aria-label': t('Voice_Call') }, omnichannelToolbarRef);
+
 	return (
 		<NavBarComponent aria-label='header'>
 			<NavBarSection>
@@ -59,6 +65,14 @@ const NavBar = () => {
 						</NavBarGroup>
 					</>
 				)}
+				{showVoiceCall && (
+					<>
+						<NavBarDivider />
+						<NavBarGroup role='toolbar' ref={voiceCallToolbarRef} {...voiceCallToolbarProps}>
+							<NavBarItemVoiceCallDialer />
+						</NavBarGroup>
+					</>
+				)}
 			</NavBarSection>
 			<NavBarSection>
 				<NavBarGroup aria-label={t('Workspace_and_user_settings')}>

apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/NavBarItemVoiceCallDialer.tsx

@@ -0,0 +1,49 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useVoiceCallDialer } from '../../providers/VoiceCallProvider/hooks/useVoiceCallDialer';
+import { useVoiceCallState } from '../../providers/VoiceCallProvider/hooks/useVoiceCallState';
+
+type NavBarItemVoiceCallDialerProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemVoiceCallDialer = (props: NavBarItemVoiceCallDialerProps) => {
+	const { t } = useTranslation();
+	const { sidebar } = useLayout();
+	const { isEnabled, isReady, isRegistered } = useVoiceCallState();
+	const { open: isDialerOpen, openDialer, closeDialer } = useVoiceCallDialer();
+
+	const handleToggleDialer = useEffectEvent(() => {
+		sidebar.toggle();
+		isDialerOpen ? closeDialer() : openDialer();
+	});
+
+	const title = useMemo(() => {
+		if (!isReady) {
+			return t('Loading');
+		}
+
+		if (!isRegistered) {
+			return t('Voice_calling_disabled');
+		}
+
+		return t('New_call');
+	}, [isReady, isRegistered, t]);
+
+	return isEnabled ? (
+		<NavBarItem
+			{...props}
+			primary
+			title={title}
+			icon='phone'
+			onClick={handleToggleDialer}
+			pressed={isDialerOpen}
+			disabled={!isReady || !isRegistered}
+		/>
+	) : null;
+};
+
+export default NavBarItemVoiceCallDialer;

apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/index.ts

@@ -0,0 +1 @@
+export { default as NavBarItemVoiceCallDialer } from './NavBarItemVoiceCallDialer';