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

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';