feat: Outlook Calendar Integration (#27922)

.vscode/settings.json

@@ -20,6 +20,7 @@
 	"typescript.tsdk": "./node_modules/typescript/lib",
 	"cSpell.words": [
 		"autotranslate",
+		"Contextualbar",
 		"fname",
 		"Gazzodown",
 		"katex",

apps/meteor/app/api/server/index.ts

@@ -7,6 +7,7 @@ import './helpers/isUserFromParams';
 import './helpers/parseJsonQuery';
 import './default/info';
 import './v1/assets';
+import './v1/calendar';
 import './v1/channels';
 import './v1/chat';
 import './v1/cloud';

apps/meteor/app/api/server/v1/calendar.ts

@@ -0,0 +1,139 @@
+import {
+	isCalendarEventListProps,
+	isCalendarEventCreateProps,
+	isCalendarEventImportProps,
+	isCalendarEventInfoProps,
+	isCalendarEventUpdateProps,
+	isCalendarEventDeleteProps,
+} from '@rocket.chat/rest-typings';
+import { Calendar } from '@rocket.chat/core-services';
+
+import { API } from '../api';
+
+API.v1.addRoute(
+	'calendar-events.list',
+	{ authRequired: true, validateParams: isCalendarEventListProps, rateLimiterOptions: { numRequestsAllowed: 3, intervalTimeInMS: 1000 } },
+	{
+		async get() {
+			const { userId } = this;
+			const { date } = this.queryParams;
+
+			const data = await Calendar.list(userId, new Date(date));
+
+			return API.v1.success({ data });
+		},
+	},
+);
+
+API.v1.addRoute(
+	'calendar-events.info',
+	{ authRequired: true, validateParams: isCalendarEventInfoProps, rateLimiterOptions: { numRequestsAllowed: 3, intervalTimeInMS: 1000 } },
+	{
+		async get() {
+			const { userId } = this;
+			const { id } = this.queryParams;
+
+			const event = await Calendar.get(id);
+
+			if (!event || event.uid !== userId) {
+				return API.v1.failure();
+			}
+
+			return API.v1.success({ event });
+		},
+	},
+);
+
+API.v1.addRoute(
+	'calendar-events.create',
+	{ authRequired: true, validateParams: isCalendarEventCreateProps },
+	{
+		async post() {
+			const { userId: uid } = this;
+			const { startTime, externalId, subject, description, meetingUrl, reminderMinutesBeforeStart } = this.bodyParams;
+
+			const id = await Calendar.create({
+				uid,
+				startTime: new Date(startTime),
+				externalId,
+				subject,
+				description,
+				meetingUrl,
+				reminderMinutesBeforeStart,
+			});
+
+			return API.v1.success({ id });
+		},
+	},
+);
+
+API.v1.addRoute(
+	'calendar-events.import',
+	{ authRequired: true, validateParams: isCalendarEventImportProps },
+	{
+		async post() {
+			const { userId: uid } = this;
+			const { startTime, externalId, subject, description, meetingUrl, reminderMinutesBeforeStart } = this.bodyParams;
+
+			const id = await Calendar.import({
+				uid,
+				startTime: new Date(startTime),
+				externalId,
+				subject,
+				description,
+				meetingUrl,
+				reminderMinutesBeforeStart,
+			});
+
+			return API.v1.success({ id });
+		},
+	},
+);
+
+API.v1.addRoute(
+	'calendar-events.update',
+	{ authRequired: true, validateParams: isCalendarEventUpdateProps },
+	{
+		async post() {
+			const { userId } = this;
+			const { eventId, startTime, subject, description, meetingUrl, reminderMinutesBeforeStart } = this.bodyParams;
+
+			const event = await Calendar.get(eventId);
+
+			if (!event || event.uid !== userId) {
+				throw new Error('invalid-calendar-event');
+			}
+
+			await Calendar.update(eventId, {
+				startTime: new Date(startTime),
+				subject,
+				description,
+				meetingUrl,
+				reminderMinutesBeforeStart,
+			});
+
+			return API.v1.success();
+		},
+	},
+);
+
+API.v1.addRoute(
+	'calendar-events.delete',
+	{ authRequired: true, validateParams: isCalendarEventDeleteProps },
+	{
+		async post() {
+			const { userId } = this;
+			const { eventId } = this.bodyParams;
+
+			const event = await Calendar.get(eventId);
+
+			if (!event || event.uid !== userId) {
+				throw new Error('invalid-calendar-event');
+			}
+
+			await Calendar.delete(eventId);
+
+			return API.v1.success();
+		},
+	},
+);

apps/meteor/client/components/GenericModal.tsx → apps/meteor/client/components/GenericModal/GenericModal.tsx

@@ -98,7 +98,7 @@ const GenericModal: FC<GenericModalProps> = ({
 							{confirmText ?? t('Ok')}
 						</Button>
 					)}
-					{!wrapperFunction && (
+					{!wrapperFunction && onConfirm && (
 						<Button {...getButtonProps(variant)} onClick={onConfirm} disabled={confirmDisabled}>
 							{confirmText ?? t('Ok')}
 						</Button>

apps/meteor/client/components/GenericModal/GenericModalSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import GenericModal from './GenericModal';
+
+const GenericModalSkeleton = ({ onClose, ...props }: ComponentProps<typeof GenericModal>) => {
+	const t = useTranslation();
+
+	return (
+		<GenericModal
+			{...props}
+			variant='warning'
+			onClose={onClose}
+			title={<Skeleton width='50%' />}
+			confirmText={t('Cancel')}
+			onConfirm={onClose}
+		>
+			<Skeleton width='full' />
+		</GenericModal>
+	);
+};
+
+export default GenericModalSkeleton;

apps/meteor/client/components/GenericModal/index.ts

@@ -0,0 +1,2 @@
+export * from './GenericModal';
+export { default } from './GenericModal';

apps/meteor/client/components/withDoNotAskAgain.tsx → apps/meteor/client/components/GenericModal/withDoNotAskAgain.tsx

@@ -3,7 +3,7 @@ import { useUserPreference, useTranslation, useEndpoint } from '@rocket.chat/ui-
 import type { FC, ReactElement, ComponentType } from 'react';
 import React, { useState } from 'react';
 
-import type { DontAskAgainList } from '../hooks/useDontAskAgain';
+import type { DontAskAgainList } from '../../hooks/useDontAskAgain';
 
 type DoNotAskAgainProps = {
 	onConfirm: (...args: any) => Promise<void> | void;

apps/meteor/client/lib/utils/window.RocketChatDesktop.d.ts

@@ -0,0 +1,14 @@
+type OutlookEventsResponse = { status: 'success' | 'canceled' };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface Window {
+	RocketChatDesktop:
+		| {
+				openInternalVideoChatWindow?: (url: string, options: undefined) => void;
+				getOutlookEvents?: (date: Date) => Promise<OutlookEventsResponse>;
+				setOutlookExchangeUrl?: (url: string, userId: string) => Promise<void>;
+				hasOutlookCredentials?: () => Promise<boolean>;
+				clearOutlookCredentials?: () => void;
+		  }
+		| undefined;
+}

apps/meteor/client/main.ts

@@ -13,3 +13,4 @@ import './views/admin';
 import './views/marketplace';
 import './views/account';
 import './views/teams';
+import './views/outlookCalendar';

apps/meteor/client/providers/VideoConfProvider.tsx

@@ -8,11 +8,11 @@ import { VideoConfContext } from '../contexts/VideoConfContext';
 import type { DirectCallParams, ProviderCapabilities, CallPreferences } from '../lib/VideoConfManager';
 import { VideoConfManager } from '../lib/VideoConfManager';
 import VideoConfPopups from '../views/room/contextualBar/VideoConference/VideoConfPopups';
-import { useVideoOpenCall } from '../views/room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
+import { useVideoConfOpenCall } from '../views/room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
 
 const VideoConfContextProvider = ({ children }: { children: ReactNode }): ReactElement => {
 	const [outgoing, setOutgoing] = useState<VideoConfPopupPayload | undefined>();
-	const handleOpenCall = useVideoOpenCall();
+	const handleOpenCall = useVideoConfOpenCall();
 
 	useEffect(
 		() =>

apps/meteor/client/startup/notifications/konchatNotifications.ts

@@ -1,17 +1,22 @@
-import type { AtLeast, ISubscription, IUser } from '@rocket.chat/core-typings';
+import type { AtLeast, ISubscription, IUser, ICalendarNotification } from '@rocket.chat/core-typings';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
+import { lazy } from 'react';
 
 import { CachedChatSubscription } from '../../../app/models/client';
 import { Notifications } from '../../../app/notifications/client';
+import { settings } from '../../../app/settings/client';
 import { readMessage } from '../../../app/ui-utils/client';
 import { KonchatNotification } from '../../../app/ui/client/lib/KonchatNotification';
 import { getUserPreference } from '../../../app/utils/client';
 import { RoomManager } from '../../lib/RoomManager';
+import { imperativeModal } from '../../lib/imperativeModal';
 import { fireGlobalEvent } from '../../lib/utils/fireGlobalEvent';
 import { isLayoutEmbedded } from '../../lib/utils/isLayoutEmbedded';
 
+const OutlookCalendarEventModal = lazy(() => import('../../views/outlookCalendar/OutlookCalendarEventModal'));
+
 const notifyNewRoom = async (sub: AtLeast<ISubscription, 'rid'>): Promise<void> => {
 	const user = Meteor.user() as IUser | null;
 	if (!user || user.status === 'busy') {
@@ -41,11 +46,42 @@ function notifyNewMessageAudio(rid?: string): void {
 }
 
 Meteor.startup(() => {
+	const notifyUserCalendar = async function (notification: ICalendarNotification): Promise<void> {
+		const user = Meteor.user() as IUser | null;
+		if (!user || user.status === 'busy') {
+			return;
+		}
+
+		const requireInteraction = getUserPreference<boolean>(Meteor.userId(), 'desktopNotificationRequireInteraction');
+
+		const n = new Notification(notification.title, {
+			body: notification.text,
+			tag: notification.payload._id,
+			silent: true,
+			requireInteraction,
+		} as NotificationOptions);
+
+		n.onclick = function () {
+			this.close();
+			window.focus();
+			imperativeModal.open({
+				component: OutlookCalendarEventModal,
+				props: { id: notification.payload._id, onClose: imperativeModal.close, onCancel: imperativeModal.close },
+			});
+		};
+	};
+	Tracker.autorun(() => {
+		if (!Meteor.userId() || !settings.get('Outlook_Calendar_Enabled')) {
+			return Notifications.unUser('calendar');
+		}
+
+		Notifications.onUser('calendar', notifyUserCalendar);
+	});
+
 	Tracker.autorun(() => {
 		if (!Meteor.userId()) {
 			return;
 		}
-
 		Notifications.onUser('notification', (notification) => {
 			const openedRoomId = ['channel', 'group', 'direct'].includes(FlowRouter.getRouteName()) ? RoomManager.opened : undefined;
 

apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx

@@ -46,6 +46,7 @@ type CurrentData = {
 	muteFocusedConversations: boolean;
 	receiveLoginDetectionEmail: boolean;
 	dontAskAgainList: [action: string, label: string][];
+	notifyCalendarEvents: boolean;
 };
 
 export type FormSectionProps = {

apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx

@@ -30,6 +30,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 	const userMobileNotifications = useUserPreference('pushNotifications');
 	const userEmailNotificationMode = useUserPreference('emailNotificationMode') as keyof typeof emailNotificationOptionsLabelMap;
 	const userReceiveLoginDetectionEmail = useUserPreference('receiveLoginDetectionEmail');
+	const userNotifyCalendarEvents = useUserPreference('notifyCalendarEvents');
 
 	const defaultDesktopNotifications = useSetting(
 		'Accounts_Default_User_Preferences_desktopNotifications',
@@ -42,6 +43,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 	const loginEmailEnabled = useSetting('Device_Management_Enable_Login_Emails');
 	const allowLoginEmailPreference = useSetting('Device_Management_Allow_Login_Email_preference');
 	const showNewLoginEmailPreference = loginEmailEnabled && allowLoginEmailPreference;
+	const showCalendarPreference = useSetting('Outlook_Calendar_Enabled');
 
 	const { values, handlers, commit } = useForm(
 		{
@@ -50,6 +52,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 			pushNotifications: userMobileNotifications,
 			emailNotificationMode: userEmailNotificationMode,
 			receiveLoginDetectionEmail: userReceiveLoginDetectionEmail,
+			notifyCalendarEvents: userNotifyCalendarEvents,
 		},
 		onChange,
 	);
@@ -60,12 +63,14 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		pushNotifications,
 		emailNotificationMode,
 		receiveLoginDetectionEmail,
+		notifyCalendarEvents,
 	} = values as {
 		desktopNotificationRequireInteraction: boolean;
 		desktopNotifications: string;
 		pushNotifications: string;
 		emailNotificationMode: string;
 		receiveLoginDetectionEmail: boolean;
+		notifyCalendarEvents: boolean;
 	};
 
 	const {
@@ -74,6 +79,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		handlePushNotifications,
 		handleEmailNotificationMode,
 		handleReceiveLoginDetectionEmail,
+		handleNotifyCalendarEvents,
 	} = handlers;
 
 	useEffect(() => setNotificationsPermission(window.Notification && Notification.permission), []);
@@ -186,6 +192,17 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 						<Field.Hint>{t('Receive_Login_Detection_Emails_Description')}</Field.Hint>
 					</Field>
 				)}
+
+				{showCalendarPreference && (
+					<Field>
+						<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
+							<Field.Label>{t('Notify_Calendar_Events')}</Field.Label>
+							<Field.Row>
+								<ToggleSwitch checked={notifyCalendarEvents} onChange={handleNotifyCalendarEvents} />
+							</Field.Row>
+						</Box>
+					</Field>
+				)}
 			</FieldGroup>
 		</Accordion.Item>
 	);

apps/meteor/client/views/conference/ConferencePage.tsx

@@ -3,7 +3,7 @@ import type { ReactElement } from 'react';
 import React, { useEffect } from 'react';
 
 import { useUserDisplayName } from '../../hooks/useUserDisplayName';
-import { useVideoOpenCall } from '../room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
+import { useVideoConfOpenCall } from '../room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
 import PageLoading from '../root/PageLoading';
 import ConferencePageError from './ConferencePageError';
 
@@ -19,7 +19,7 @@ const ConferencePage = (): ReactElement => {
 	const user = useUser();
 	const defaultRoute = useRoute('/');
 	const setModal = useSetModal();
-	const handleOpenCall = useVideoOpenCall();
+	const handleOpenCall = useVideoConfOpenCall();
 	const userDisplayName = useUserDisplayName({ name: user?.name, username: user?.username });
 
 	const { callUrlParam } = getQueryParams();