feat: Team collab VoIP config modal

.changeset/light-yaks-drive.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Implements a modal to let users know about VoIP calls in direct messages and missing configurations.

apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useStartCallRoomAction.tsx

@@ -11,26 +11,26 @@ export const useStartCallRoomAction = () => {
 	const voipCall = useVoipMenuOptions();
 
 	return useMemo((): RoomToolboxActionConfig | undefined => {
-		if (!videoCall.allowed && !voipCall.allowed) {
+		if (!videoCall.allowed && !voipCall?.allowed) {
 			return undefined;
 		}
 
 		return {
 			id: 'start-call',
 			title: 'Call',
 			icon: 'phone',
-			groups: [...videoCall.groups, ...voipCall.groups],
-			disabled: videoCall.disabled && voipCall.disabled,
+			groups: [...videoCall.groups, ...(voipCall?.groups ?? [])],
+			disabled: videoCall.disabled && (voipCall?.disabled ?? true),
 			full: true,
-			order: Math.max(voipCall.order, videoCall.order),
+			order: Math.max(voipCall?.order ?? Number.NEGATIVE_INFINITY, videoCall.order),
 			featured: true,
 			renderToolboxItem: ({ id, icon, title, disabled, className }) => (
 				<GenericMenu
 					button={<HeaderToolbarAction />}
 					key={id}
 					title={title}
 					disabled={disabled}
-					items={[...voipCall.items, ...videoCall.items]}
+					items={[...(voipCall?.allowed ? voipCall.items : []), ...videoCall.items]}
 					className={className}
 					placement='bottom-start'
 					icon={icon}

apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useVoipMenuOptions.tsx

@@ -1,18 +1,22 @@
 import { Box } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { useUserId } from '@rocket.chat/ui-contexts';
+import { usePermission, useUserId } from '@rocket.chat/ui-contexts';
 import { useVoipAPI, useVoipState } from '@rocket.chat/ui-voip';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useMediaPermissions } from '../../../views/room/composer/messageBox/hooks/useMediaPermissions';
 import { useRoom } from '../../../views/room/contexts/RoomContext';
 import { useUserInfoQuery } from '../../useUserInfoQuery';
+import { useVoipWarningModal } from '../../useVoipWarningModal';
 
 const useVoipMenuOptions = () => {
 	const { t } = useTranslation();
 	const { uids = [] } = useRoom();
 	const ownUserId = useUserId();
+	const canStartVoiceCall = usePermission('view-user-voip-extension');
+	const dispatchWarning = useVoipWarningModal();
 
 	const [isMicPermissionDenied] = useMediaPermissions('microphone');
 
@@ -27,7 +31,9 @@ const useVoipMenuOptions = () => {
 	const isRemoteRegistered = !!remoteUser?.freeSwitchExtension;
 	const isDM = members.length === 1;
 
-	const disabled = isMicPermissionDenied || !isDM || !isRemoteRegistered || !isRegistered || isInCall || isPending;
+	const disabled = isMicPermissionDenied || !isDM || isInCall || isPending;
+	const allowed = isDM && !isInCall && !isPending;
+	const canMakeVoipCall = allowed && isRemoteRegistered && isRegistered && isEnabled && !isMicPermissionDenied;
 
 	const title = useMemo(() => {
 		if (isMicPermissionDenied) {
@@ -41,13 +47,24 @@ const useVoipMenuOptions = () => {
 		return disabled ? t('Voice_calling_disabled') : '';
 	}, [disabled, isInCall, isMicPermissionDenied, t]);
 
+	const handleOnClick = useEffectEvent(() => {
+		if (canMakeVoipCall) {
+			return makeCall(remoteUser?.freeSwitchExtension as string);
+		}
+		dispatchWarning();
+	});
+
 	return useMemo(() => {
+		if (!canStartVoiceCall) {
+			return undefined;
+		}
+
 		const items: GenericMenuItemProps[] = [
 			{
 				id: 'start-voip-call',
 				icon: 'phone',
 				disabled,
-				onClick: () => makeCall(remoteUser?.freeSwitchExtension as string),
+				onClick: handleOnClick,
 				content: (
 					<Box is='span' title={title}>
 						{t('Voice_call')}
@@ -57,13 +74,13 @@ const useVoipMenuOptions = () => {
 		];
 
 		return {
-			items: isEnabled ? items : [],
+			items,
 			groups: ['direct'] as const,
 			disabled,
-			allowed: isEnabled,
 			order: 4,
+			allowed,
 		};
-	}, [disabled, title, t, isEnabled, makeCall, remoteUser?.freeSwitchExtension]);
+	}, [disabled, title, t, handleOnClick, allowed, canStartVoiceCall]);
 };
 
 export default useVoipMenuOptions;

apps/meteor/client/hooks/useVoipWarningModal.tsx

@@ -0,0 +1,30 @@
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useRole, useRoute, useSetModal } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import { useHasLicenseModule } from './useHasLicenseModule';
+import TeamsVoipConfigModal from '../views/room/contextualBar/TeamsVoipConfigModal';
+
+export const useVoipWarningModal = (): (() => void) => {
+	const setModal = useSetModal();
+	const isAdmin = useRole('admin');
+	const hasModule = useHasLicenseModule('teams-voip') === true;
+	const teamsVoipSettingsRoute = useRoute('admin-settings');
+
+	const handleClose = useEffectEvent(() => setModal(null));
+
+	const handleRedirectToConfiguration = useEffectEvent(() => {
+		handleClose();
+		teamsVoipSettingsRoute.push({
+			group: 'VoIP_TeamCollab',
+		});
+	});
+
+	return useMemo(
+		() => (): void =>
+			setModal(
+				<TeamsVoipConfigModal hasModule={hasModule} onClose={handleClose} onConfirm={handleRedirectToConfiguration} isAdmin={isAdmin} />,
+			),
+		[handleClose, handleRedirectToConfiguration, isAdmin, setModal, hasModule],
+	);
+};

apps/meteor/client/views/room/contextualBar/TeamsVoipConfigModal.tsx

@@ -0,0 +1,116 @@
+import {
+	Modal,
+	Button,
+	Box,
+	Callout,
+	Margins,
+	ModalHeader,
+	ModalHeaderText,
+	ModalTagline,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalHeroImage,
+	ModalFooter,
+	ModalFooterAnnotation,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { GET_ADDONS_LINK } from '../../admin/subscription/utils/links';
+
+type TeamsVoipConfigModalProps = {
+	onClose: () => void;
+	onConfirm?: () => void;
+	isAdmin: boolean;
+	hasModule: boolean;
+};
+
+const TeamsVoipConfigModal = ({ onClose, onConfirm, isAdmin, hasModule }: TeamsVoipConfigModalProps): ReactElement => {
+	const { t } = useTranslation();
+	const openExternalLink = useExternalLink();
+
+	const getCalloutWarning = () => {
+		if (isAdmin && !hasModule) {
+			return t('Contact_sales_start_using_VoIP');
+		}
+
+		if (!isAdmin && !hasModule) {
+			return t('Contact_your_workspace_admin_to_start_using_VoIP');
+		}
+
+		return t('VoIP_available_setup_freeswitch_server_details');
+	};
+
+	return (
+		<Modal>
+			<ModalHeader>
+				<ModalHeaderText>
+					<ModalTagline>{t('VoIP')}</ModalTagline>
+					<ModalTitle>{t('Team_voice_call')}</ModalTitle>
+				</ModalHeaderText>
+				<ModalClose title={t('Close')} onClick={onClose} />
+			</ModalHeader>
+			<ModalContent>
+				<ModalHeroImage maxHeight='initial' src='/images/teams-voip-config.svg' />
+				<Box paddingBlock={24}>
+					{t('Fully_integrated_voip_receive_internal_external_calls_without_switching_between_apps_external_systems')}
+				</Box>
+				<Box fontScale='h3'>{t('Features')}</Box>
+				<Margins block={24}>
+					<Box withRichContent>
+						<Box is='ul' pis={24}>
+							<li>
+								<Trans i18nKey='VoIP_TeamCollab_Feature1'>
+									<strong>Direct calling:</strong> Instantly start or receive calls with team members within your Rocket.Chat workspace.
+								</Trans>
+							</li>
+							<li>
+								<Trans i18nKey='VoIP_TeamCollab_Feature2'>
+									<strong>Extension management:</strong> Admins can assign unique extensions to users, enabling quick, direct dialing both
+									from inside and outside your organization.
+								</Trans>
+							</li>
+							<li>
+								<Trans i18nKey='VoIP_TeamCollab_Feature3'>
+									<strong>Call transfers:</strong> Seamlessly transfer active calls to ensure users reach the right team member.
+								</Trans>
+							</li>
+							<li>
+								<Trans i18nKey='VoIP_TeamCollab_Feature4'>
+									<strong>Availability settings:</strong> Users can control their availability to receive calls, enhancing flexibility.
+								</Trans>
+							</li>
+						</Box>
+					</Box>
+				</Margins>
+				<Box fontScale='h3' mbs={24}>
+					{t('Required_action')}
+				</Box>
+				<Callout mbs={12} mbe={24} title={!hasModule ? t('Subscription_add-on_required') : t('FreeSwitch_setup_required')} type='warning'>
+					{getCalloutWarning()}
+				</Callout>
+			</ModalContent>
+			<ModalFooter justifyContent={!isAdmin && hasModule ? 'space-between' : 'end'}>
+				{!isAdmin && hasModule && <ModalFooterAnnotation>{t('Only_admins_can_perform_this_setup')}</ModalFooterAnnotation>}
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					{onConfirm && isAdmin && hasModule && (
+						<Button primary onClick={onConfirm}>
+							{t('Go_to_settings')}
+						</Button>
+					)}
+					{isAdmin && !hasModule && (
+						<Button primary onClick={() => openExternalLink(GET_ADDONS_LINK)}>
+							{t('Contact_sales')}
+						</Button>
+					)}
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default TeamsVoipConfigModal;