snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/outlookCalendar/OutlookCalendarEventModal.tsx

@@ -0,0 +1,55 @@
+import { GenericModal, GenericModalSkeleton } from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { ComponentProps } from 'react';
+
+import OutlookEventItemContent from './OutlookEventsList/OutlookEventItemContent';
+import { useOutlookOpenCall } from './hooks/useOutlookOpenCall';
+
+export type OutlookCalendarEventModalProps = ComponentProps<typeof GenericModal> & {
+	id?: string;
+	subject?: string;
+	meetingUrl?: string | null;
+	description?: string;
+};
+
+const OutlookCalendarEventModal = ({ id, subject, meetingUrl, description, ...props }: OutlookCalendarEventModalProps) => {
+	const t = useTranslation();
+	const calendarInfoEndpoint = useEndpoint('GET', '/v1/calendar-events.info');
+
+	const { data, isLoading } = useQuery({
+		queryKey: ['calendar-events.info', id],
+
+		queryFn: async () => {
+			if (!id) {
+				const event = { event: { subject, meetingUrl, description } };
+				return event;
+			}
+
+			return calendarInfoEndpoint({ id });
+		},
+	});
+
+	const openCall = useOutlookOpenCall(data?.event.meetingUrl);
+
+	if (isLoading) {
+		return <GenericModalSkeleton {...props} />;
+	}
+
+	return (
+		<GenericModal
+			{...props}
+			tagline={t('Outlook_calendar_event')}
+			icon={null}
+			variant='warning'
+			title={data?.event.subject}
+			cancelText={t('Close')}
+			confirmText={t('Join_call')}
+			onConfirm={openCall}
+		>
+			{data?.event.description ? <OutlookEventItemContent html={data?.event.description} /> : t('No_content_was_provided')}
+		</GenericModal>
+	);
+};
+
+export default OutlookCalendarEventModal;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx

@@ -0,0 +1,71 @@
+import type { ICalendarEvent, Serialized } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Palette } from '@rocket.chat/fuselage';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+import { usePreventPropagation } from '../../../hooks/usePreventPropagation';
+import OutlookCalendarEventModal from '../OutlookCalendarEventModal';
+import { useOutlookOpenCall } from '../hooks/useOutlookOpenCall';
+
+export type OutlookEventItemProps = Serialized<ICalendarEvent>;
+
+const hovered = css`
+	&:hover {
+		cursor: pointer;
+	}
+
+	&:hover,
+	&:focus {
+		background: ${Palette.surface['surface-hover']};
+	}
+`;
+
+const OutlookEventItem = ({ subject, description, startTime, meetingUrl }: OutlookEventItemProps) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const formatDateAndTime = useFormatDateAndTime();
+	const openCall = useOutlookOpenCall(meetingUrl);
+	const handleMeetingClick = usePreventPropagation(openCall);
+
+	const handleOpenEvent = () => {
+		setModal(
+			<OutlookCalendarEventModal
+				onClose={() => setModal(null)}
+				onCancel={() => setModal(null)}
+				subject={subject}
+				meetingUrl={meetingUrl}
+				description={description}
+			/>,
+		);
+	};
+
+	return (
+		<Box
+			className={hovered}
+			borderBlockEndWidth={1}
+			borderBlockEndColor='stroke-extra-light'
+			borderBlockEndStyle='solid'
+			paddingInline={24}
+			paddingBlock={16}
+			display='flex'
+			justifyContent='space-between'
+			onClick={handleOpenEvent}
+		>
+			<Box>
+				<Box fontScale='h4'>{subject}</Box>
+				<Box fontScale='c1'>{formatDateAndTime(startTime)}</Box>
+			</Box>
+			<Box>
+				{meetingUrl && (
+					<Button onClick={handleMeetingClick} small>
+						{t('Join')}
+					</Button>
+				)}
+			</Box>
+		</Box>
+	);
+};
+
+export default OutlookEventItem;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItemContent.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import DOMPurify from 'dompurify';
+
+type SanitizeProps = {
+	html: string;
+	options?: {
+		[key: string]: string;
+	};
+};
+
+const OutlookEventItemContent = ({ html, options }: SanitizeProps) => {
+	const defaultOptions = {
+		ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'br'],
+		ALLOWED_ATTR: ['href'],
+	};
+
+	const sanitize = (dirtyHTML: SanitizeProps['html'], options: SanitizeProps['options']) => ({
+		__html: DOMPurify.sanitize(dirtyHTML, { ...defaultOptions, ...options }).toString(),
+	});
+
+	return <Box wordBreak='break-word' color='default' dangerouslySetInnerHTML={sanitize(html, options)} />;
+};
+
+export default OutlookEventItemContent;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx

@@ -0,0 +1,109 @@
+import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, ButtonGroup, Button, Throbber } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import {
+	VirtualizedScrollbars,
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarFooter,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
+import { Virtuoso } from 'react-virtuoso';
+
+import OutlookEventItem from './OutlookEventItem';
+import { getErrorMessage } from '../../../lib/errorHandling';
+import { useOutlookAuthentication } from '../hooks/useOutlookAuthentication';
+import { useMutationOutlookCalendarSync, useOutlookCalendarListForToday } from '../hooks/useOutlookCalendarList';
+import { NotOnDesktopError } from '../lib/NotOnDesktopError';
+
+export type OutlookEventsListProps = {
+	onClose: () => void;
+	changeRoute: () => void;
+};
+
+const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps) => {
+	const t = useTranslation();
+	const user = useUser();
+	const { authEnabled, isError, error } = useOutlookAuthentication();
+
+	const hasOutlookMethods = !(isError && error instanceof NotOnDesktopError);
+
+	const syncOutlookCalendar = useMutationOutlookCalendarSync();
+
+	const calendarListResult = useOutlookCalendarListForToday();
+
+	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver<HTMLElement>({
+		debounceDelay: 200,
+	});
+
+	const calendarEvents = calendarListResult.data;
+	const total = calendarEvents?.length || 0;
+
+	const outlookUrl = user?.settings?.calendar?.outlook?.Outlook_Url;
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='calendar' />
+				<ContextualbarTitle>{t('Outlook_calendar')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarContent paddingInline={0} color='default'>
+				<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex' justifyContent='center' ref={ref}>
+					{calendarListResult.isPending && <Throbber size='x12' />}
+					{calendarListResult.isError && (
+						<States>
+							<StatesIcon name='circle-exclamation' variation='danger' />
+							<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+							<StatesSubtitle>{getErrorMessage(calendarListResult.error)}</StatesSubtitle>
+						</States>
+					)}
+					{!calendarListResult.isPending && total === 0 && (
+						<States>
+							<StatesIcon name='calendar' />
+							<StatesTitle>{t('No_history')}</StatesTitle>
+						</States>
+					)}
+					{calendarListResult.isSuccess && calendarListResult.data.length > 0 && (
+						<VirtualizedScrollbars>
+							<Virtuoso
+								style={{
+									height: blockSize,
+									width: inlineSize,
+								}}
+								totalCount={total}
+								overscan={25}
+								data={calendarEvents}
+								itemContent={(_index, calendarData) => <OutlookEventItem {...calendarData} />}
+							/>
+						</VirtualizedScrollbars>
+					)}
+				</Box>
+			</ContextualbarContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					{authEnabled && <Button onClick={changeRoute}>{t('Calendar_settings')}</Button>}
+					{outlookUrl && (
+						<Button icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
+							{t('Open_Outlook')}
+						</Button>
+					)}
+				</ButtonGroup>
+				{hasOutlookMethods && (
+					<Box marginBlockStart={8}>
+						<ButtonGroup stretch>
+							<Button primary loading={syncOutlookCalendar.isPending} onClick={() => syncOutlookCalendar.mutate()}>
+								{authEnabled ? t('Sync') : t('Log_in_to_sync')}
+							</Button>
+						</ButtonGroup>
+					</Box>
+				)}
+			</ContextualbarFooter>
+		</ContextualbarDialog>
+	);
+};
+
+export default OutlookEventsList;

apps/meteor/client/views/outlookCalendar/OutlookEventsList/index.ts

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

apps/meteor/client/views/outlookCalendar/OutlookEventsRoute.tsx

@@ -0,0 +1,25 @@
+import { useRoomToolbox } from '@rocket.chat/ui-contexts';
+import { useState } from 'react';
+
+import OutlookEventsList from './OutlookEventsList';
+import OutlookSettingsList from './OutlookSettingsList';
+
+type OutlookCalendarRoutes = 'list' | 'settings';
+
+const CALENDAR_ROUTES: { [key: string]: OutlookCalendarRoutes } = {
+	LIST: 'list',
+	SETTINGS: 'settings',
+};
+
+const OutlookEventsRoute = () => {
+	const { closeTab } = useRoomToolbox();
+	const [calendarRoute, setCalendarRoute] = useState<OutlookCalendarRoutes>('list');
+
+	if (calendarRoute === CALENDAR_ROUTES.SETTINGS) {
+		return <OutlookSettingsList onClose={closeTab} changeRoute={() => setCalendarRoute(CALENDAR_ROUTES.LIST)} />;
+	}
+
+	return <OutlookEventsList onClose={closeTab} changeRoute={() => setCalendarRoute(CALENDAR_ROUTES.SETTINGS)} />;
+};
+
+export default OutlookEventsRoute;

apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx

@@ -0,0 +1,57 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Palette } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type OutlookSettingItemProps = {
+	id: string;
+	title: string;
+	subTitle: string;
+	enabled: boolean;
+	handleEnable: (value: boolean) => void;
+};
+
+const OutlookSettingItem = ({ id, title, subTitle, enabled, handleEnable }: OutlookSettingItemProps) => {
+	const { t } = useTranslation();
+
+	const hovered = css`
+		&:hover,
+		&:focus {
+			background: ${Palette.surface['surface-hover']};
+			.rcx-message {
+				background: ${Palette.surface['surface-hover']};
+			}
+		}
+	`;
+
+	return (
+		<Box
+			borderBlockEndWidth={1}
+			borderBlockEndColor='stroke-extra-light'
+			borderBlockEndStyle='solid'
+			className={hovered}
+			paddingInline={24}
+			paddingBlock={16}
+			display='flex'
+			justifyContent='space-between'
+		>
+			<Box marginInlineEnd={8}>
+				<Box fontScale='h4'>{title}</Box>
+				<Box fontScale='p2'>{subTitle}</Box>
+			</Box>
+			<Box>
+				{id === 'authentication' && (
+					<Button small onClick={() => handleEnable(!enabled)}>
+						{t('Disable')}
+					</Button>
+				)}
+				{id !== 'authentication' && (
+					<Button primary={!enabled} small onClick={() => handleEnable(!enabled)}>
+						{enabled ? t('Disable') : t('Enable')}
+					</Button>
+				)}
+			</Box>
+		</Box>
+	);
+};
+
+export default OutlookSettingItem;

apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingsList.tsx

@@ -0,0 +1,87 @@
+import { ButtonGroup, Button } from '@rocket.chat/fuselage';
+import {
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarFooter,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useUserPreference, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+import OutlookSettingItem from './OutlookSettingItem';
+import { useOutlookAuthentication, useOutlookAuthenticationMutationLogout } from '../hooks/useOutlookAuthentication';
+
+export type OutlookSettingsListProps = {
+	onClose: () => void;
+	changeRoute: () => void;
+};
+
+const OutlookSettingsList = ({ onClose, changeRoute }: OutlookSettingsListProps) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+	const notifyCalendarEvents = useUserPreference('notifyCalendarEvents') as boolean;
+	const { authEnabled } = useOutlookAuthentication();
+	const handleDisableAuth = useOutlookAuthenticationMutationLogout();
+
+	const handleNotifyCalendarEvents = useCallback(
+		(value: boolean) => {
+			try {
+				saveUserPreferences({ data: { notifyCalendarEvents: value } });
+				dispatchToastMessage({ type: 'success', message: t('Preferences_saved') });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		[saveUserPreferences, dispatchToastMessage, t],
+	);
+
+	const calendarSettings = [
+		{
+			id: 'notification',
+			title: t('Event_notifications'),
+			subTitle: t('Event_notifications_description'),
+			enabled: notifyCalendarEvents,
+			handleEnable: handleNotifyCalendarEvents,
+		},
+		{
+			id: 'authentication',
+			title: t('Outlook_authentication'),
+			subTitle: t('Outlook_authentication_description'),
+			enabled: authEnabled,
+			handleEnable: () =>
+				handleDisableAuth.mutate(undefined, {
+					onSuccess: changeRoute,
+				}),
+		},
+	];
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='calendar' />
+				<ContextualbarTitle>{t('Outlook_calendar_settings')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarContent paddingInline={0} color='default'>
+				{calendarSettings.map((setting, index) => {
+					if (setting.id === 'authentication' && !setting.enabled) {
+						return;
+					}
+
+					return <OutlookSettingItem key={index} {...setting} />;
+				})}
+			</ContextualbarContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button onClick={changeRoute}>{t('Back_to_calendar')}</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</ContextualbarDialog>
+	);
+};
+
+export default OutlookSettingsList;

apps/meteor/client/views/outlookCalendar/OutlookSettingsList/index.ts

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

apps/meteor/client/views/outlookCalendar/hooks/useOutlookAuthentication.ts

@@ -0,0 +1,58 @@
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { NotOnDesktopError } from '../lib/NotOnDesktopError';
+
+export const useOutlookAuthentication = () => {
+	const {
+		data: authEnabled,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['outlook', 'auth'],
+
+		queryFn: async () => {
+			const desktopApp = window.RocketChatDesktop;
+			if (!desktopApp?.hasOutlookCredentials) {
+				throw new NotOnDesktopError();
+			}
+
+			return Boolean(await desktopApp?.hasOutlookCredentials?.()) || false;
+		},
+	});
+
+	return { authEnabled: Boolean(authEnabled), isError, error };
+};
+
+export const useOutlookAuthenticationMutation = () => {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			await queryClient.invalidateQueries({
+				queryKey: ['outlook', 'auth'],
+			});
+		},
+	});
+};
+
+export const useOutlookAuthenticationMutationLogout = () => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const mutation = useOutlookAuthenticationMutation();
+	return useMutation({
+		mutationFn: async () => {
+			const desktopApp = window.RocketChatDesktop;
+			if (!desktopApp?.clearOutlookCredentials) {
+				throw new NotOnDesktopError();
+			}
+
+			await desktopApp.clearOutlookCredentials();
+
+			return mutation.mutateAsync();
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Outlook_authentication_disabled') });
+		},
+	});
+};

apps/meteor/client/views/outlookCalendar/hooks/useOutlookCalendarList.ts

@@ -0,0 +1,53 @@
+import { useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { useOutlookAuthenticationMutation } from './useOutlookAuthentication';
+import { syncOutlookEvents } from '../lib/syncOutlookEvents';
+
+export const useOutlookCalendarListForToday = () => {
+	return useOutlookCalendarList(new Date());
+};
+
+export const useOutlookCalendarList = (date: Date) => {
+	const calendarData = useEndpoint('GET', '/v1/calendar-events.list');
+
+	return useQuery({
+		queryKey: ['outlook', 'calendar', 'list'],
+
+		queryFn: async () => {
+			const { data } = await calendarData({ date: date.toISOString() });
+			return data;
+		},
+	});
+};
+
+export const useMutationOutlookCalendarSync = () => {
+	const t = useTranslation();
+	const queryClient = useQueryClient();
+
+	const checkOutlookCredentials = useOutlookAuthenticationMutation();
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const syncMutation = useMutation({
+		mutationFn: async () => {
+			await syncOutlookEvents();
+
+			await queryClient.invalidateQueries({
+				queryKey: ['outlook', 'calendar', 'list'],
+			});
+
+			await checkOutlookCredentials.mutateAsync();
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Outlook_Sync_Success') });
+		},
+		onError: (error) => {
+			if (error instanceof Error && error.message === 'abort') {
+				return;
+			}
+			dispatchToastMessage({ type: 'error', message: t('Outlook_Sync_Failed') });
+		},
+	});
+	return syncMutation;
+};

apps/meteor/client/views/outlookCalendar/hooks/useOutlookOpenCall.ts

@@ -0,0 +1,18 @@
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import { useUser } from '@rocket.chat/ui-contexts';
+
+import { useVideoConfOpenCall } from '../../room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
+
+export const useOutlookOpenCall = (meetingUrl?: string | null) => {
+	const user = useUser();
+	const handleOpenCall = useVideoConfOpenCall();
+	const userDisplayName = useUserDisplayName({ name: user?.name, username: user?.username });
+
+	const namedMeetingUrl = `${meetingUrl}&name=${userDisplayName}`;
+
+	if (!meetingUrl) {
+		return;
+	}
+
+	return () => handleOpenCall(namedMeetingUrl);
+};

apps/meteor/client/views/outlookCalendar/lib/NotOnDesktopError.ts

@@ -0,0 +1,5 @@
+export class NotOnDesktopError extends Error {
+	constructor() {
+		super('Not on desktop');
+	}
+}

apps/meteor/client/views/outlookCalendar/lib/syncOutlookEvents.ts

@@ -0,0 +1,15 @@
+import { NotOnDesktopError } from './NotOnDesktopError';
+
+export const syncOutlookEvents = async () => {
+	const date = new Date();
+	const desktopApp = window.RocketChatDesktop;
+
+	if (!desktopApp?.getOutlookEvents) {
+		throw new NotOnDesktopError();
+	}
+
+	const response = await desktopApp.getOutlookEvents(date);
+	if (response.status === 'canceled') {
+		throw new Error('abort');
+	}
+};