diff --git a/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsMenu.tsx b/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsMenu.tsx index 8c92510d88fcf..98b87c3f12725 100644 --- a/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsMenu.tsx @@ -1,27 +1,25 @@ import { NavBarItem } from '@rocket.chat/fuselage'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { GenericMenu } from '@rocket.chat/ui-client'; -import { useVoipState } from '@rocket.chat/ui-voip'; import type { HTMLAttributes } from 'react'; import { useTranslation } from 'react-i18next'; import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled'; type NavBarControlsMenuProps = Omit, 'is'> & { - voipItems: GenericMenuItemProps[]; omnichannelItems: GenericMenuItemProps[]; isPressed: boolean; + callItem?: GenericMenuItemProps; }; -const NavBarControlsMenu = ({ voipItems, omnichannelItems, isPressed, ...props }: NavBarControlsMenuProps) => { +const NavBarControlsMenu = ({ omnichannelItems, isPressed, callItem, ...props }: NavBarControlsMenuProps) => { const { t } = useTranslation(); - const { isEnabled: showVoip } = useVoipState(); const showOmnichannel = useOmnichannelEnabled(); const sections = [ { title: t('Voice_Call'), - items: showVoip ? voipItems : [], + items: callItem ? [callItem] : [], }, { title: t('Omnichannel'), diff --git a/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithCall.tsx b/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithCall.tsx index 716279688c679..2aa65855b5200 100644 --- a/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithCall.tsx +++ b/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithCall.tsx @@ -6,12 +6,12 @@ import { useOmnichannelCallDialPadAction } from '../NavBarOmnichannelGroup/hooks import { useOmnichannelCallToggleAction } from '../NavBarOmnichannelGroup/hooks/useOmnichannelCallToggleAction'; type NavBarControlsMenuProps = Omit, 'is'> & { - voipItems: GenericMenuItemProps[]; omnichannelItems: GenericMenuItemProps[]; isPressed: boolean; + callItem?: GenericMenuItemProps; }; -const NavBarControlsWithCall = ({ voipItems, omnichannelItems, isPressed, ...props }: NavBarControlsMenuProps) => { +const NavBarControlsWithCall = ({ omnichannelItems, isPressed, ...props }: NavBarControlsMenuProps) => { const { icon: omnichannelCallIcon, title: omnichannelCallTitle, @@ -44,7 +44,7 @@ const NavBarControlsWithCall = ({ voipItems, omnichannelItems, isPressed, ...pro }, ] as GenericMenuItemProps[]; - return ; + return ; }; export default NavBarControlsWithCall; diff --git a/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithData.tsx b/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithData.tsx index ce4c7a9a3081f..d1405674be8e0 100644 --- a/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithData.tsx +++ b/apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsWithData.tsx @@ -1,4 +1,5 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; +import { useMediaCallAction } from '@rocket.chat/ui-voip'; import type { HTMLAttributes } from 'react'; import NavBarControlsMenu from './NavBarControlsMenu'; @@ -7,16 +8,13 @@ import { useIsCallEnabled } from '../../contexts/CallContext'; import { useOmnichannelContactAction } from '../NavBarOmnichannelGroup/hooks/useOmnichannelContactAction'; import { useOmnichannelLivechatToggle } from '../NavBarOmnichannelGroup/hooks/useOmnichannelLivechatToggle'; import { useOmnichannelQueueAction } from '../NavBarOmnichannelGroup/hooks/useOmnichannelQueueAction'; -import { useVoipDialerAction } from '../NavBarVoipGroup/hooks/useVoipDialerAction'; -import { useVoipTogglerAction } from '../NavBarVoipGroup/hooks/useVoipTogglerAction'; type NavBarControlsMenuProps = Omit, 'is'>; const NavBarControlsWithData = (props: NavBarControlsMenuProps) => { const isCallEnabled = useIsCallEnabled(); - const { title: dialerTitle, handleToggleDialer, isPressed: isVoipDialerPressed, isDisabled: dialerDisabled } = useVoipDialerAction(); - const { isRegistered, title: togglerTitle, handleToggleVoip, isDisabled: togglerDisabled } = useVoipTogglerAction(); + const callAction = useMediaCallAction(); const { isEnabled: queueEnabled, @@ -39,22 +37,14 @@ const NavBarControlsWithData = (props: NavBarControlsMenuProps) => { handleAvailableStatusChange, } = useOmnichannelLivechatToggle(); - const voipItems = [ - { - id: 'voipDialer', - icon: 'dialpad', - content: dialerTitle, - onClick: handleToggleDialer, - disabled: dialerDisabled, - }, - { - id: 'voipToggler', - icon: isRegistered ? 'phone-disabled' : 'phone', - content: togglerTitle, - onClick: handleToggleVoip, - disabled: togglerDisabled, - }, - ].filter(Boolean) as GenericMenuItemProps[]; + const callItem = callAction + ? { + id: 'rcx-media-call', + icon: callAction.icon, + content: callAction.title, + onClick: () => callAction.action(), + } + : undefined; const omnichannelItems = [ queueEnabled && { @@ -62,7 +52,6 @@ const NavBarControlsWithData = (props: NavBarControlsMenuProps) => { icon: queueIcon, content: queueTitle, onClick: handleGoToQueue, - disabled: dialerDisabled, }, { id: 'omnichannelContact', @@ -78,13 +67,13 @@ const NavBarControlsWithData = (props: NavBarControlsMenuProps) => { }, ].filter(Boolean) as GenericMenuItemProps[]; - const isPressed = isVoipDialerPressed || isQueuePressed || isContactPressed; + const isPressed = isQueuePressed || isContactPressed; if (isCallEnabled) { - return ; + return ; } - return ; + return ; }; export default NavBarControlsWithData;