From 3a14520512e55da5fb6b26efddc025569fbe2aed Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Tue, 20 Aug 2024 17:04:54 -0300 Subject: [PATCH] feat: added dialer button to NavBarV2 --- apps/meteor/client/NavBarV2/NavBar.tsx | 14 ++++++ .../NavBarItemVoiceCallDialer.tsx | 49 +++++++++++++++++++ .../NavBarV2/NavBarVoiceCallToolbar/index.ts | 1 + 3 files changed, 64 insertions(+) create mode 100644 apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/NavBarItemVoiceCallDialer.tsx create mode 100644 apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/index.ts diff --git a/apps/meteor/client/NavBarV2/NavBar.tsx b/apps/meteor/client/NavBarV2/NavBar.tsx index 97c504f4a61b7..604fe78fa11c1 100644 --- a/apps/meteor/client/NavBarV2/NavBar.tsx +++ b/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,6 +33,7 @@ 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); @@ -38,6 +41,9 @@ const NavBar = () => { 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 ( @@ -59,6 +65,14 @@ const NavBar = () => { )} + {showVoiceCall && ( + <> + + + + + + )} diff --git a/apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/NavBarItemVoiceCallDialer.tsx b/apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/NavBarItemVoiceCallDialer.tsx new file mode 100644 index 0000000000000..3c96e5cd4c3d6 --- /dev/null +++ b/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, '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 ? ( + + ) : null; +}; + +export default NavBarItemVoiceCallDialer; diff --git a/apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/index.ts b/apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/index.ts new file mode 100644 index 0000000000000..8cea908dc2e4a --- /dev/null +++ b/apps/meteor/client/NavBarV2/NavBarVoiceCallToolbar/index.ts @@ -0,0 +1 @@ +export { default as NavBarItemVoiceCallDialer } from './NavBarItemVoiceCallDialer';