Merge branch 'develop' into fix/error-priority

Author: ggazzo

.changeset/tall-sloths-exercise.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where voice call button is not displaying in navbar on mobile screen sizes
+> This change is being tested under `Enhanced navigation experience` feature preview, in order to check it you need to enabled it

apps/meteor/client/NavBarV2/NavBarControls/NavBarControlsMenu.tsx

@@ -12,11 +12,15 @@ type NavBarControlsMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'> & {
 	callItem?: GenericMenuItemProps;
 };
 
-const NavBarControlsMenu = ({ omnichannelItems, isPressed, ...props }: NavBarControlsMenuProps) => {
+const NavBarControlsMenu = ({ omnichannelItems, isPressed, callItem, ...props }: NavBarControlsMenuProps) => {
 	const { t } = useTranslation();
 	const showOmnichannel = useOmnichannelEnabled();
 
 	const sections = [
+		{
+			title: t('Voice_Call'),
+			items: callItem ? [callItem] : [],
+		},
 		{
 			title: t('Omnichannel'),
 			items: showOmnichannel ? omnichannelItems : [],

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';
@@ -13,6 +14,8 @@ type NavBarControlsMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 const NavBarControlsWithData = (props: NavBarControlsMenuProps) => {
 	const isCallEnabled = useIsCallEnabled();
 
+	const callAction = useMediaCallAction();
+
 	const {
 		isEnabled: queueEnabled,
 		icon: queueIcon,
@@ -34,6 +37,15 @@ const NavBarControlsWithData = (props: NavBarControlsMenuProps) => {
 		handleAvailableStatusChange,
 	} = useOmnichannelLivechatToggle();
 
+	const callItem = callAction
+		? {
+				id: 'rcx-media-call',
+				icon: callAction.icon,
+				content: callAction.title,
+				onClick: () => callAction.action(),
+			}
+		: undefined;
+
 	const omnichannelItems = [
 		queueEnabled && {
 			id: 'omnichannelQueue',
@@ -58,10 +70,10 @@ const NavBarControlsWithData = (props: NavBarControlsMenuProps) => {
 	const isPressed = isQueuePressed || isContactPressed;
 
 	if (isCallEnabled) {
-		return <NavbarControlsWithCall omnichannelItems={omnichannelItems} isPressed={isPressed} {...props} />;
+		return <NavbarControlsWithCall callItem={callItem} omnichannelItems={omnichannelItems} isPressed={isPressed} {...props} />;
 	}
 
-	return <NavBarControlsMenu omnichannelItems={omnichannelItems} isPressed={isPressed} {...props} />;
+	return <NavBarControlsMenu callItem={callItem} omnichannelItems={omnichannelItems} isPressed={isPressed} {...props} />;
 };
 
 export default NavBarControlsWithData;