Chore: Rewrite some Omnichannel files to TypeScript (#25359)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

apps/meteor/app/livechat/imports/server/rest/departments.ts

@@ -74,28 +74,25 @@ API.v1.addRoute(
 	'livechat/department/:_id',
 	{ authRequired: true },
 	{
-		get() {
+		async get() {
 			check(this.urlParams, {
 				_id: String,
 			});
 
 			const { onlyMyDepartments } = this.queryParams;
 
-			const { department, agents } = Promise.await(
-				findDepartmentById({
-					userId: this.userId,
-					departmentId: this.urlParams._id,
-					includeAgents: this.queryParams.includeAgents && this.queryParams.includeAgents === 'true',
-					onlyMyDepartments: onlyMyDepartments === 'true',
-				}),
-			);
+			const { department, agents } = await findDepartmentById({
+				userId: this.userId,
+				departmentId: this.urlParams._id,
+				includeAgents: this.queryParams.includeAgents && this.queryParams.includeAgents === 'true',
+				onlyMyDepartments: onlyMyDepartments === 'true',
+			});
 
 			// TODO: return 404 when department is not found
 			// Currently, FE relies on the fact that this endpoint returns an empty payload
 			// to show the "new" view. Returning 404 breaks it
-			const result = { department, agents };
 
-			return API.v1.success(result);
+			return API.v1.success({ department, agents });
 		},
 		put() {
 			const permissionToSave = hasPermission(this.userId, 'manage-livechat-departments');

apps/meteor/client/components/Omnichannel/Tags.js → apps/meteor/client/components/Omnichannel/Tags.tsx

 import { Field, TextInput, Chip, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React, { useState } from 'react';
+import React, { ChangeEvent, ReactElement, useState } from 'react';
 import { useSubscription } from 'use-subscription';
 
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
@@ -10,30 +10,48 @@ import { useEndpointData } from '../../hooks/useEndpointData';
 import { formsSubscription } from '../../views/omnichannel/additionalForms';
 import { FormSkeleton } from './Skeleton';
 
-const Tags = ({ tags = [], handler = () => {}, error = '', tagRequired = false }) => {
-	const { value: tagsResult = [], phase: stateTags } = useEndpointData('livechat/tags.list');
+const Tags = ({
+	tags,
+	handler,
+	error,
+	tagRequired,
+}: {
+	tags?: string[];
+	handler: (value: string[]) => void;
+	error?: string;
+	tagRequired?: boolean;
+}): ReactElement => {
 	const t = useTranslation();
-	const forms = useSubscription(formsSubscription);
+	const forms = useSubscription<any>(formsSubscription);
 
-	const { useCurrentChatTags = () => {} } = forms;
-	const Tags = useCurrentChatTags();
+	const { value: tagsResult, phase: stateTags } = useEndpointData('livechat/tags.list');
+
+	const { useCurrentChatTags } = forms;
+	const EETagsComponent = useCurrentChatTags();
 
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const [tagValue, handleTagValue] = useState('');
-	const [paginatedTagValue, handlePaginatedTagValue] = useState(tags);
+	const [paginatedTagValue, handlePaginatedTagValue] = useState<{ label: string; value: string }[]>();
 
-	const removeTag = (tag) => {
-		const tagsFiltered = tags.filter((tagArray) => tagArray !== tag);
-		handler(tagsFiltered);
+	const removeTag = (tagToRemove: string): void => {
+		if (tags) {
+			const tagsFiltered = tags.filter((tag: string) => tag !== tagToRemove);
+			handler(tagsFiltered);
+		}
 	};
 
 	const handleTagTextSubmit = useMutableCallback(() => {
+		if (!tags) {
+			return;
+		}
+
 		if (!tagValue || tagValue.trim() === '') {
 			dispatchToastMessage({ type: 'error', message: t('Enter_a_tag') });
 			handleTagValue('');
 			return;
 		}
+
 		if (tags.includes(tagValue)) {
 			dispatchToastMessage({ type: 'error', message: t('Tag_already_exists') });
 			return;
@@ -46,18 +64,16 @@ const Tags = ({ tags = [], handler = () => {}, error = '', tagRequired = false }
 		return <FormSkeleton />;
 	}
 
-	const { tags: tagsList } = tagsResult;
-
 	return (
 		<>
 			<Field.Label required={tagRequired} mb='x4'>
 				{t('Tags')}
 			</Field.Label>
-			{Tags && tagsList && tagsList.length > 0 ? (
+			{EETagsComponent && tagsResult?.tags && tagsResult?.tags.length ? (
 				<Field.Row>
-					<Tags
+					<EETagsComponent
 						value={paginatedTagValue}
-						handler={(tags) => {
+						handler={(tags: { label: string; value: string }[]): void => {
 							handler(tags.map((tag) => tag.label));
 							handlePaginatedTagValue(tags);
 						}}
@@ -68,19 +84,19 @@ const Tags = ({ tags = [], handler = () => {}, error = '', tagRequired = false }
 					<Field.Row>
 						<TextInput
 							error={error}
-							value={tagValue?.value ? tagValue.value : tagValue}
-							onChange={(event) => handleTagValue(event.target.value)}
+							value={tagValue}
+							onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>): void => handleTagValue(currentTarget.value)}
 							flexGrow={1}
 							placeholder={t('Enter_a_tag')}
 						/>
-						<Button disabled={!tagValue} mis='x8' title={t('add')} onClick={handleTagTextSubmit}>
+						<Button disabled={!tagValue} mis='x8' title={t('Add')} onClick={handleTagTextSubmit}>
 							{t('Add')}
 						</Button>
 					</Field.Row>
 					<Field.Row justifyContent='flex-start'>
-						{tags.map((tag, i) => (
-							<Chip key={i} onClick={() => removeTag(tag)} mie='x8'>
-								{tag?.value ? tag.value : tag}
+						{tags?.map((tag, i) => (
+							<Chip key={i} onClick={(): void => removeTag(tag)} mie='x8'>
+								{tag}
 							</Chip>
 						))}
 					</Field.Row>

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.js → apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

+import { ILivechatDepartment } from '@rocket.chat/core-typings';
 import { Field, Button, TextInput, Icon, ButtonGroup, Modal, Box } from '@rocket.chat/fuselage';
-import { useAutoFocus } from '@rocket.chat/fuselage-hooks';
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, ReactElement, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { useSetting } from '../../../contexts/SettingsContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
-import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
-import { useForm } from '../../../hooks/useForm';
 import GenericModal from '../../GenericModal';
 import Tags from '../Tags';
 
-const CloseChatModal = ({ department = {}, onCancel, onConfirm }) => {
+const CloseChatModal = ({
+	department,
+	onCancel,
+	onConfirm,
+}: {
+	department?: ILivechatDepartment | null;
+	onCancel: () => void;
+	onConfirm: (comment?: string, tags?: string[]) => Promise<void>;
+}): ReactElement => {
 	const t = useTranslation();
 
-	const inputRef = useAutoFocus(true);
+	const {
+		formState: { errors },
+		handleSubmit,
+		register,
+		setError,
+		setFocus,
+		setValue,
+		watch,
+	} = useForm();
 
-	const { values, handlers } = useForm({ comment: '', tags: [] });
+	const commentRequired = useSetting('Livechat_request_comment_when_closing_conversation') as boolean;
+	const [tagRequired, setTagRequired] = useState(false);
 
-	const commentRequired = useSetting('Livechat_request_comment_when_closing_conversation');
+	const tags = watch('tags');
+	const comment = watch('comment');
 
-	const { comment, tags } = values;
-	const { handleComment, handleTags } = handlers;
-	const [commentError, setCommentError] = useState('');
-	const [tagError, setTagError] = useState('');
-	const [tagRequired, setTagRequired] = useState(false);
+	const handleTags = (value: string[]): void => {
+		setValue('tags', value);
+	};
+
+	const onSubmit = useCallback(
+		({ comment, tags }): void => {
+			if (!comment && commentRequired) {
+				setError('comment', { type: 'custom', message: t('The_field_is_required', t('Comment')) });
+			}
+
+			if (!tags?.length && tagRequired) {
+				setError('tags', { type: 'custom', message: t('error-tags-must-be-assigned-before-closing-chat') });
+			}
 
-	const handleConfirm = useCallback(() => {
-		onConfirm(comment, tags);
-	}, [comment, onConfirm, tags]);
+			if (!errors.comment || errors.tags) {
+				onConfirm(comment, tags);
+			}
+		},
+		[commentRequired, tagRequired, errors, setError, t, onConfirm],
+	);
 
-	useComponentDidUpdate(() => {
-		setCommentError(!comment && commentRequired ? t('The_field_is_required', t('Comment')) : '');
-	}, [commentRequired, comment, t]);
+	const cannotSubmit = useMemo(() => {
+		const cannotSendTag = (tagRequired && !tags?.length) || errors.tags;
+		const cannotSendComment = (commentRequired && !comment) || errors.comment;
+		return cannotSendTag || cannotSendComment;
+	}, [comment, commentRequired, errors, tagRequired, tags]);
 
-	const canConfirm = useMemo(() => {
-		const canConfirmTag = !tagError && (tagRequired ? tags.length > 0 : true);
-		const canConfirmComment = !commentError && (commentRequired ? !!comment : true);
-		return canConfirmTag && canConfirmComment;
-	}, [comment, commentError, commentRequired, tagError, tagRequired, tags.length]);
+	useEffect(() => {
+		if (department?.requestTagBeforeClosingChat) {
+			setTagRequired(true);
+		}
+	}, [department]);
 
 	useEffect(() => {
-		department?.requestTagBeforeClosingChat && setTagRequired(true);
-		setTagError(tagRequired && (!tags || tags.length === 0) ? t('error-tags-must-be-assigned-before-closing-chat') : '');
-	}, [department, tagRequired, t, tags]);
+		if (commentRequired) {
+			setFocus('comment');
+		}
+	}, [commentRequired, setFocus]);
 
-	if (!commentRequired && !tagRequired) {
-		return (
-			<GenericModal
-				variant='warning'
-				title={t('Are_you_sure_you_want_to_close_this_chat')}
-				onConfirm={handleConfirm}
-				onCancel={onCancel}
-				onClose={onCancel}
-				confirmText={t('Confirm')}
-			></GenericModal>
-		);
-	}
+	useEffect(() => {
+		if (tagRequired) {
+			register('tags');
+		}
+	}, [register, tagRequired]);
 
-	return (
-		<Modal>
+	return commentRequired || tagRequired ? (
+		<Modal is='form' onSubmit={handleSubmit(onSubmit)}>
 			<Modal.Header>
 				<Icon name='baloon-close-top-right' size={20} />
 				<Modal.Title>{t('Closing_chat')}</Modal.Title>
@@ -68,33 +92,33 @@ const CloseChatModal = ({ department = {}, onCancel, onConfirm }) => {
 				<Field marginBlock='x15'>
 					<Field.Label required={commentRequired}>{t('Comment')}</Field.Label>
 					<Field.Row>
-						<TextInput
-							ref={inputRef}
-							error={commentError}
-							flexGrow={1}
-							value={comment}
-							onChange={handleComment}
-							placeholder={t('Please_add_a_comment')}
-						/>
+						<TextInput {...register('comment')} error={errors.comment} flexGrow={1} placeholder={t('Please_add_a_comment')} />
 					</Field.Row>
-					<Field.Error>{commentError}</Field.Error>
+					<Field.Error>{errors.comment?.message}</Field.Error>
+				</Field>
+				<Field>
+					<Tags tagRequired={tagRequired} tags={tags} handler={handleTags} />
+					<Field.Error>{errors.tags?.message}</Field.Error>
 				</Field>
-				{Tags && (
-					<Field>
-						<Tags tagRequired={tagRequired} tags={tags} handler={handleTags} error={tagError} />
-						<Field.Error>{tagError}</Field.Error>
-					</Field>
-				)}
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
 					<Button onClick={onCancel}>{t('Cancel')}</Button>
-					<Button disabled={!canConfirm} primary onClick={handleConfirm}>
+					<Button type='submit' disabled={cannotSubmit} primary>
 						{t('Confirm')}
 					</Button>
 				</ButtonGroup>
 			</Modal.Footer>
 		</Modal>
+	) : (
+		<GenericModal
+			variant='warning'
+			title={t('Are_you_sure_you_want_to_close_this_chat')}
+			onConfirm={onConfirm}
+			onCancel={onCancel}
+			onClose={onCancel}
+			confirmText={t('Confirm')}
+		></GenericModal>
 	);
 };
 

apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.js → apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.tsx

-import React from 'react';
+import { ILivechatDepartment, ILivechatDepartmentAgents } from '@rocket.chat/core-typings';
+import React, { ReactElement } from 'react';
 
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import { FormSkeleton } from '../Skeleton';
 import CloseChatModal from './CloseChatModal';
 
-const CloseChatModalData = ({ departmentId, onCancel, onConfirm }) => {
-	const { value: data, phase: state } = useEndpointData(`livechat/department/${departmentId}?includeAgents=false`);
+const CloseChatModalData = ({
+	departmentId,
+	onCancel,
+	onConfirm,
+}: {
+	departmentId: ILivechatDepartment['_id'];
+	onCancel: () => void;
+	onConfirm: (comment?: string, tags?: string[]) => Promise<void>;
+}): ReactElement => {
+	const { value: data, phase: state } = useEndpointData(`livechat/department/${departmentId}`);
+
 	if ([state].includes(AsyncStatePhase.LOADING)) {
 		return <FormSkeleton />;
 	}
-	const { department } = data || {};
-	return <CloseChatModal onCancel={onCancel} onConfirm={onConfirm} department={department} />;
-};
 
+	// TODO: chapter day: fix issue with rest typing
+	// TODO: This is necessary because of a weird problem
+	// There is an endpoint livechat/department/${departmentId}/agents
+	// that is causing the problem. type A | type B | undefined
+
+	return (
+		<CloseChatModal
+			onCancel={onCancel}
+			onConfirm={onConfirm}
+			department={
+				(
+					data as {
+						department: ILivechatDepartment | null;
+						agents?: ILivechatDepartmentAgents[];
+					}
+				).department
+			}
+		/>
+	);
+};
 export default CloseChatModalData;

apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.js → apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx

+import { IOmnichannelRoom } from '@rocket.chat/core-typings';
 import { Field, Button, TextAreaInput, Icon, ButtonGroup, Modal, Box, PaginatedSelectFiltered } from '@rocket.chat/fuselage';
-import { useMutableCallback, useAutoFocus, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { useEndpoint } from '../../../contexts/ServerContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { useRecordList } from '../../../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
-import { useForm } from '../../../hooks/useForm';
 import UserAutoComplete from '../../UserAutoComplete';
 import { useDepartmentsList } from '../hooks/useDepartmentsList';
 import ModalSeparator from './ModalSeparator';
 
-const ForwardChatModal = ({ onForward, onCancel, room, ...props }) => {
+const ForwardChatModal = ({
+	onForward,
+	onCancel,
+	room,
+	...props
+}: {
+	onForward: (departmentId?: string, userId?: string, comment?: string) => Promise<void>;
+	onCancel: () => void;
+	room: IOmnichannelRoom;
+}): ReactElement => {
 	const t = useTranslation();
+	const getUserData = useEndpoint('GET', 'users.info');
 
-	const inputRef = useAutoFocus(true);
+	const { getValues, handleSubmit, register, setFocus, setValue, watch } = useForm();
 
-	const { values, handlers } = useForm({
-		username: '',
-		comment: '',
-		department: {},
-	});
-	const { username, comment, department } = values;
-	const [userId, setUserId] = useState('');
-
-	const { handleUsername, handleComment, handleDepartment } = handlers;
-	const getUserData = useEndpoint('GET', `users.info?username=${username}`);
+	useEffect(() => {
+		setFocus('comment');
+	}, [setFocus]);
 
-	const [departmentsFilter, setDepartmentsFilter] = useState('');
+	const department = watch('department');
+	const username = watch('username');
 
+	const [departmentsFilter, setDepartmentsFilter] = useState<string | number | undefined>('');
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);
 
 	const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList(
-		useMemo(() => ({ filter: debouncedDepartmentsFilter, enabled: true }), [debouncedDepartmentsFilter]),
+		useMemo(() => ({ filter: debouncedDepartmentsFilter as string, enabled: true }), [debouncedDepartmentsFilter]),
 	);
+	const { phase: departmentsPhase, items: departments, itemCount: departmentsTotal } = useRecordList(departmentsList);
+	const hasDepartments = useMemo(() => departments && departments.length > 0, [departments]);
 
-	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
-
-	const handleSend = useMutableCallback(() => {
-		onForward(department?.value, userId, comment);
-	}, [onForward, department.value, userId, comment]);
-
-	const onChangeUsername = useMutableCallback((username) => {
-		handleUsername(username);
-	});
-
-	useEffect(() => {
-		if (!username) {
-			return;
-		}
-		const fetchData = async () => {
-			const { user } = await getUserData();
-			setUserId(user._id);
-		};
-		fetchData();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [username]);
-
-	const canForward = department || username;
+	const _id = { $ne: room.servedBy?._id };
+	const conditions = { _id, status: { $ne: 'offline' }, statusLivechat: 'available' };
 
-	const departments = departmentsItems;
+	const endReached = useCallback(
+		(start) => {
+			if (departmentsPhase === AsyncStatePhase.LOADING) {
+				loadMoreDepartments(start, Math.min(50, departmentsTotal));
+			}
+		},
+		[departmentsPhase, departmentsTotal, loadMoreDepartments],
+	);
 
-	const hasDepartments = departments && departments.length > 0;
+	const onSubmit = useCallback(
+		async ({ department: departmentId, username, comment }) => {
+			let uid;
 
-	const { servedBy: { _id: agentId } = {} } = room || {};
+			if (username) {
+				const { user } = await getUserData({ userName: username });
+				uid = user?._id;
+			}
 
-	const _id = agentId && { $ne: agentId };
+			onForward(departmentId, uid, comment);
+		},
+		[getUserData, onForward],
+	);
 
-	const conditions = { _id, status: { $ne: 'offline' }, statusLivechat: 'available' };
+	useEffect(() => {
+		register('department');
+		register('username');
+	}, [register]);
 
 	return (
-		<Modal {...props}>
+		<Modal {...props} is='form' onSubmit={handleSubmit(onSubmit)}>
 			<Modal.Header>
 				<Icon name='baloon-arrow-top-right' size={20} />
 				<Modal.Title>{t('Forward_chat')}</Modal.Title>
@@ -80,34 +85,37 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }) => {
 				<Field mbe={'x30'}>
 					<Field.Label>{t('Forward_to_department')}</Field.Label>
 					<Field.Row>
-						<PaginatedSelectFiltered
-							withTitle
-							filter={departmentsFilter}
-							setFilter={setDepartmentsFilter}
-							options={departmentsItems}
-							value={department}
-							maxWidth='100%'
-							placeholder={t('Select_an_option')}
-							onChange={handleDepartment}
-							flexGrow={1}
-							endReached={
-								departmentsPhase === AsyncStatePhase.LOADING
-									? () => {}
-									: (start) => loadMoreDepartments(start, Math.min(50, departmentsTotal))
-							}
-						/>
+						{
+							// TODO: Definitions on fuselage are incorrect, need to be fixed!
+							// @ts-ignore-next-line
+							<PaginatedSelectFiltered
+								withTitle
+								filter={departmentsFilter as string}
+								setFilter={setDepartmentsFilter}
+								options={departments.map(({ _id, name }) => ({ value: _id, label: name }))}
+								maxWidth='100%'
+								placeholder={t('Select_an_option')}
+								onChange={(value: string): void => {
+									setValue('department', value);
+								}}
+								flexGrow={1}
+								endReached={endReached}
+							/>
+						}
 					</Field.Row>
 				</Field>
 				<ModalSeparator text={t('or')} />
-				<Field mbs={hasDepartments && 'x30'}>
+				<Field {...(hasDepartments && { mbs: 'x30' })}>
 					<Field.Label>{t('Forward_to_user')}</Field.Label>
 					<Field.Row>
 						<UserAutoComplete
 							conditions={conditions}
 							flexGrow={1}
-							value={username}
-							onChange={onChangeUsername}
 							placeholder={t('Username')}
+							onChange={(value: string): void => {
+								setValue('username', value);
+							}}
+							value={getValues().username}
 						/>
 					</Field.Row>
 				</Field>
@@ -119,14 +127,14 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }) => {
 						</Box>
 					</Field.Label>
 					<Field.Row>
-						<TextAreaInput ref={inputRef} rows={8} flexGrow={1} value={comment} onChange={handleComment} />
+						<TextAreaInput {...register('comment')} rows={8} flexGrow={1} />
 					</Field.Row>
 				</Field>
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
 					<Button onClick={onCancel}>{t('Cancel')}</Button>
-					<Button disabled={!canForward} primary onClick={handleSend}>
+					<Button type='submit' disabled={!username && !department} primary>
 						{t('Forward')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx

@@ -71,7 +71,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, ...props }) => {
 
 	const { useCurrentChatTags = (): void => undefined } = forms;
 
-	const Tags = useCurrentChatTags();
+	const EETagsComponent = useCurrentChatTags();
 
 	const onSubmit = useMutableCallback((e) => e.preventDefault());
 	const reducer = function (acc: any, curr: string): any {
@@ -151,11 +151,11 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, ...props }) => {
 					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} label={t('All')} onlyMyDepartments />
 				</Box>
 			</Box>
-			{Tags && (
+			{EETagsComponent && (
 				<Box display='flex' flexDirection='row' marginBlockStart='x8' {...props}>
 					<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 						<Label mb='x4'>{t('Tags')}</Label>
-						<Tags value={tags} handler={handleTags} />
+						<EETagsComponent value={tags} handler={handleTags} />
 					</Box>
 				</Box>
 			)}

apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit.js

@@ -143,11 +143,9 @@ function RoomEdit({ room, visitor, reload, reloadInfo, close }) {
 						<TextInput flexGrow={1} value={topic} onChange={handleTopic} />
 					</Field.Row>
 				</Field>
-				{Tags && (
-					<Field>
-						<Tags tags={tags} handler={handleTags} />
-					</Field>
-				)}
+				<Field>
+					<Tags tags={tags} handler={handleTags} />
+				</Field>
 				{PrioritiesSelect && priorities && priorities.length > 0 && (
 					<PrioritiesSelect value={priorityId} label={t('Priority')} options={priorities} handler={handlePriorityId} />
 				)}

apps/meteor/client/views/room/Header/Omnichannel/QuickActions/hooks/useQuickActions.tsx

@@ -178,7 +178,7 @@ export const useQuickActions = (
 	const closeChat = useMethod('livechat:closeRoom');
 
 	const handleClose = useCallback(
-		async (comment: string, tags: string[]) => {
+		async (comment?: string, tags?: string[]) => {
 			try {
 				await closeChat(rid, comment, { clientAction: true, tags });
 				closeModal();

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -3334,6 +3334,7 @@
   "Opened": "Opened",
   "Opened_in_a_new_window": "Opened in a new window.",
   "Opens_a_channel_group_or_direct_message": "Opens a channel, group or direct message",
+  "Optional": "Optional",
   "optional": "optional",
   "Options": "Options",
   "or": "or",

packages/rest-typings/src/v1/omnichannel.ts

@@ -2,6 +2,7 @@ import type {
 	IOmnichannelCannedResponse,
 	ILivechatAgent,
 	ILivechatDepartment,
+	ILivechatDepartmentRecord,
 	ILivechatDepartmentAgents,
 	ILivechatMonitor,
 	ILivechatTag,
@@ -67,12 +68,12 @@ export type OmnichannelEndpoints = {
 	};
 	'livechat/department/:_id': {
 		GET: (params: { onlyMyDepartments?: booleanString; includeAgents?: booleanString }) => {
-			department: ILivechatDepartment | null;
-			agents?: any[];
+			department: ILivechatDepartmentRecord | null;
+			agents?: ILivechatDepartmentAgents[];
 		};
 		PUT: (params: { department: Partial<ILivechatDepartment>[]; agents: any[] }) => {
 			department: ILivechatDepartment;
-			agents: any[];
+			agents: ILivechatDepartmentAgents[];
 		};
 		DELETE: () => void;
 	};