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

apps/meteor/client/views/omnichannel/modals/CloseChatModal.tsx

@@ -0,0 +1,265 @@
+import type { ILivechatDepartment, Serialized } from '@rocket.chat/core-typings';
+import {
+	Field,
+	FieldGroup,
+	Button,
+	TextInput,
+	Modal,
+	Box,
+	CheckBox,
+	Divider,
+	EmailInput,
+	FieldLabel,
+	FieldRow,
+	FieldError,
+	ModalHeader,
+	ModalIcon,
+	ModalTitle,
+	ModalClose,
+	ModalFooter,
+	ModalFooterControllers,
+	ModalContent,
+} from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { usePermission, useSetting, useUserPreference, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
+import Tags from '../components/Tags';
+
+type CloseChatModalFormData = {
+	comment: string;
+	tags: string[];
+	transcriptPDF: boolean;
+	transcriptEmail: boolean;
+	subject: string;
+};
+
+export type CloseChatModalProps = {
+	department?: Serialized<ILivechatDepartment | null>;
+	visitorEmail?: string;
+	onCancel: () => void;
+	onConfirm: (
+		comment?: string,
+		tags?: string[],
+		preferences?: { omnichannelTranscriptPDF: boolean; omnichannelTranscriptEmail: boolean },
+		requestData?: { email: string; subject: string },
+	) => Promise<void>;
+};
+
+const CloseChatModal = ({ department, visitorEmail, onCancel, onConfirm }: CloseChatModalProps) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const {
+		formState: { errors },
+		handleSubmit,
+		register,
+		setError,
+		setFocus,
+		setValue,
+		watch,
+	} = useForm<CloseChatModalFormData>();
+
+	const commentRequired = useSetting('Livechat_request_comment_when_closing_conversation', true);
+	const alwaysSendTranscript = useSetting('Livechat_transcript_send_always', false);
+	const customSubject = useSetting('Livechat_transcript_email_subject', '');
+	const [tagRequired, setTagRequired] = useState(false);
+
+	const tags = watch('tags');
+	const comment = watch('comment');
+	const transcriptEmail = watch('transcriptEmail');
+	const subject = watch('subject');
+
+	const userTranscriptEmail = useUserPreference<boolean>('omnichannelTranscriptEmail') ?? false;
+	const userTranscriptPDF = useUserPreference<boolean>('omnichannelTranscriptPDF') ?? false;
+	const { data: hasLicense = false } = useHasLicenseModule('livechat-enterprise');
+	const transcriptPDFPermission = usePermission('request-pdf-transcript');
+	const transcriptEmailPermission = usePermission('send-omnichannel-chat-transcript');
+
+	const canSendTranscriptEmail = transcriptEmailPermission && visitorEmail && !alwaysSendTranscript;
+	const canSendTranscriptPDF = transcriptPDFPermission && hasLicense;
+	const canSendTranscript = canSendTranscriptEmail || canSendTranscriptPDF;
+
+	const handleTags = (value: string[]): void => {
+		setValue('tags', value);
+	};
+
+	const onSubmit = useCallback(
+		({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData) => {
+			const preferences = {
+				omnichannelTranscriptPDF: !!transcriptPDF,
+				omnichannelTranscriptEmail: alwaysSendTranscript ? true : !!transcriptEmail,
+			};
+			const requestData = transcriptEmail && visitorEmail ? { email: visitorEmail, subject } : undefined;
+
+			if (!comment?.trim() && commentRequired) {
+				setError('comment', { type: 'custom', message: t('Required_field', { field: t('Comment') }) });
+			}
+
+			if (transcriptEmail && !subject) {
+				setError('subject', { type: 'custom', message: t('Required_field', { field: t('Subject') }) });
+			}
+
+			if (!tags?.length && tagRequired) {
+				setError('tags', { type: 'custom', message: t('error-tags-must-be-assigned-before-closing-chat') });
+			}
+
+			if (!errors.comment || errors.tags) {
+				onConfirm(comment, tags, preferences, requestData);
+			}
+		},
+		[commentRequired, tagRequired, visitorEmail, errors, setError, t, onConfirm, alwaysSendTranscript],
+	);
+
+	const cannotSubmit = useMemo(() => {
+		const cannotSendTag = (tagRequired && !tags?.length) || errors.tags;
+		const cannotSendComment = (commentRequired && !comment?.trim()) || errors.comment;
+		const cannotSendTranscriptEmail = transcriptEmail && (!visitorEmail || !subject);
+
+		return Boolean(cannotSendTag || cannotSendComment || cannotSendTranscriptEmail);
+	}, [comment, commentRequired, errors, tagRequired, tags, transcriptEmail, visitorEmail, subject]);
+
+	useEffect(() => {
+		if (department?.requestTagBeforeClosingChat) {
+			setTagRequired(true);
+		}
+	}, [department]);
+
+	useEffect(() => {
+		if (commentRequired) {
+			setFocus('comment');
+		}
+	}, [commentRequired, setFocus]);
+
+	useEffect(() => {
+		if (tagRequired) {
+			register('tags');
+		}
+	}, [register, tagRequired]);
+
+	useEffect(() => {
+		if (transcriptEmail) {
+			if (!visitorEmail) {
+				dispatchToastMessage({ type: 'error', message: t('Customer_without_registered_email') });
+				return;
+			}
+			setValue('subject', subject || customSubject || t('Transcript_of_your_livechat_conversation'));
+		}
+	}, [transcriptEmail, setValue, visitorEmail, subject, t, customSubject, dispatchToastMessage]);
+
+	if (commentRequired || tagRequired || canSendTranscript) {
+		return (
+			// TODO: Replace Modal with GenericModal
+			<Modal
+				aria-label={t('Wrap_up_conversation')}
+				wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(onSubmit)} {...props} />}
+			>
+				<ModalHeader>
+					<ModalIcon name='baloon-close-top-right' />
+					<ModalTitle>{t('Wrap_up_conversation')}</ModalTitle>
+					<ModalClose onClick={onCancel} />
+				</ModalHeader>
+				<ModalContent fontScale='p2'>
+					<Box color='annotation'>{t('Close_room_description')}</Box>
+					<FieldGroup>
+						<Field>
+							<FieldLabel required={commentRequired}>{t('Comment')}</FieldLabel>
+							<FieldRow>
+								<TextInput
+									{...register('comment')}
+									error={errors.comment && t('Required_field', { field: t('Comment') })}
+									flexGrow={1}
+									placeholder={t('Please_add_a_comment')}
+								/>
+							</FieldRow>
+							<FieldError>{errors.comment?.message}</FieldError>
+						</Field>
+						<Field>
+							<Tags tagRequired={tagRequired} tags={tags} handler={handleTags} {...(department && { department: department._id })} />
+							<FieldError>{errors.tags?.message}</FieldError>
+						</Field>
+						{canSendTranscript && (
+							<>
+								<Field>
+									<Divider />
+									<FieldLabel marginBlockStart={8}>{t('Chat_transcript')}</FieldLabel>
+								</Field>
+								{canSendTranscriptPDF && (
+									<Field marginBlockStart={10}>
+										<FieldRow>
+											<FieldLabel htmlFor='transcript-pdf'>{t('Omnichannel_transcript_pdf')}</FieldLabel>
+											<CheckBox id='transcript-pdf' {...register('transcriptPDF', { value: userTranscriptPDF })} />
+										</FieldRow>
+									</Field>
+								)}
+								{canSendTranscriptEmail && (
+									<>
+										<Field marginBlockStart={10}>
+											<FieldRow>
+												<FieldLabel htmlFor='transcript-email'>{t('Omnichannel_transcript_email')}</FieldLabel>
+												<CheckBox id='transcript-email' {...register('transcriptEmail', { value: userTranscriptEmail })} />
+											</FieldRow>
+										</Field>
+										{transcriptEmail && (
+											<>
+												<Field marginBlockStart={14}>
+													<FieldLabel required>{t('Contact_email')}</FieldLabel>
+													<FieldRow>
+														<EmailInput value={visitorEmail} required disabled flexGrow={1} />
+													</FieldRow>
+												</Field>
+												<Field marginBlockStart={12}>
+													<FieldLabel required>{t('Subject')}</FieldLabel>
+													<FieldRow>
+														<TextInput
+															{...register('subject', { required: true })}
+															className='active'
+															error={errors.subject && t('Required_field', { field: t('Subject') })}
+															flexGrow={1}
+														/>
+													</FieldRow>
+													<FieldError>{errors.subject?.message}</FieldError>
+												</Field>
+											</>
+										)}
+									</>
+								)}
+								<Field marginBlockStart={16}>
+									<FieldLabel color='annotation' fontScale='c1'>
+										{canSendTranscriptPDF && canSendTranscriptEmail
+											? t('These_options_affect_this_conversation_only_To_set_default_selections_go_to_My_Account_Omnichannel')
+											: t('This_option_affect_this_conversation_only_To_set_default_selection_go_to_My_Account_Omnichannel')}
+									</FieldLabel>
+								</Field>
+							</>
+						)}
+					</FieldGroup>
+				</ModalContent>
+				<ModalFooter>
+					<ModalFooterControllers>
+						<Button onClick={onCancel}>{t('Cancel')}</Button>
+						<Button type='submit' disabled={cannotSubmit} primary>
+							{t('Confirm')}
+						</Button>
+					</ModalFooterControllers>
+				</ModalFooter>
+			</Modal>
+		);
+	}
+
+	return (
+		<GenericModal
+			variant='warning'
+			title={t('Are_you_sure_you_want_to_close_this_chat')}
+			onConfirm={(): Promise<void> => onConfirm()}
+			onCancel={onCancel}
+			onClose={onCancel}
+			confirmText={t('Confirm')}
+		/>
+	);
+};
+
+export default CloseChatModal;

apps/meteor/client/views/omnichannel/modals/CloseChatModalData.tsx

@@ -0,0 +1,35 @@
+import type { ILivechatDepartment } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import CloseChatModal from './CloseChatModal';
+import { FormSkeleton } from '../components/FormSkeleton';
+
+const CloseChatModalData = ({
+	departmentId,
+	visitorEmail,
+	onCancel,
+	onConfirm,
+}: {
+	departmentId: ILivechatDepartment['_id'];
+	onCancel: () => void;
+	visitorEmail?: string;
+	onConfirm: (
+		comment?: string,
+		tags?: string[],
+		preferences?: { omnichannelTranscriptPDF: boolean; omnichannelTranscriptEmail: boolean },
+	) => Promise<void>;
+}) => {
+	const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: departmentId });
+	const { data, isPending } = useQuery({
+		queryKey: ['/v1/livechat/department/:_id', departmentId],
+		queryFn: () => getDepartment({}),
+	});
+
+	if (isPending) {
+		return <FormSkeleton />;
+	}
+
+	return <CloseChatModal onCancel={onCancel} onConfirm={onConfirm} visitorEmail={visitorEmail} department={data?.department} />;
+};
+export default CloseChatModalData;

apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx

@@ -0,0 +1,73 @@
+import {
+	Button,
+	Modal,
+	Box,
+	ModalHeader,
+	ModalHeaderText,
+	ModalTagline,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalHeroImage,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import { useOutsideClick } from '@rocket.chat/fuselage-hooks';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { useCheckoutUrl } from '../../admin/subscription/hooks/useCheckoutUrl';
+
+// TODO: use `GenericModal` instead of creating a new modal from scratch
+// This seems a upSell modal for enterprise feature
+const EnterpriseDepartmentsModal = ({ closeModal }: { closeModal: () => void }) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const ref = useRef<HTMLDivElement>(null);
+
+	const openExternalLink = useExternalLink();
+	const manageSubscriptionUrl = useCheckoutUrl()({ target: 'new-departments-page', action: 'upgrade' });
+
+	const goToManageSubscriptionPage = (): void => {
+		openExternalLink(manageSubscriptionUrl);
+		closeModal();
+	};
+
+	const onClose = (): void => {
+		router.navigate('/omnichannel/departments');
+		closeModal();
+	};
+
+	useOutsideClick([ref], onClose);
+
+	return (
+		<Modal aria-label={t('Departments')} ref={ref}>
+			<ModalHeader>
+				<ModalHeaderText>
+					<ModalTagline>{t('Premium_capability')}</ModalTagline>
+					<ModalTitle>{t('Departments')}</ModalTitle>
+				</ModalHeaderText>
+				<ModalClose onClick={onClose} />
+			</ModalHeader>
+			<ModalContent fontScale='p2'>
+				<ModalHeroImage src='/images/departments.svg' />
+				<Box fontScale='h3' marginBlockEnd={28}>
+					{t('Premium_Departments_title')}
+				</Box>
+				{t('Premium_Departments_description_upgrade')}
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button onClick={goToManageSubscriptionPage} primary>
+						{t('Upgrade')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default EnterpriseDepartmentsModal;

apps/meteor/client/views/omnichannel/modals/ForwardChatModal.spec.tsx

@@ -0,0 +1,28 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './ForwardChatModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+jest.mock('../../../../client/lib/LegacyRoomManager', () => ({
+	LegacyRoomManager: {
+		close: jest.fn(),
+	},
+}));
+
+const appRoot = mockAppRoot().build();
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: appRoot });
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: appRoot });
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/omnichannel/modals/ForwardChatModal.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import ForwardChatModal from './ForwardChatModal';
+import { createFakeOmnichannelRoom } from '../../../../tests/mocks/data';
+
+const mockedRoom = createFakeOmnichannelRoom();
+
+export default {
+	component: ForwardChatModal,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	args: {
+		room: mockedRoom,
+	},
+} satisfies Meta<typeof ForwardChatModal>;
+
+export const Default: StoryObj<typeof ForwardChatModal> = {};

apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx

@@ -0,0 +1,174 @@
+import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
+import { Field, FieldGroup, TextAreaInput, Box, Divider, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouter, useSetting, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useCallback, useEffect, useId } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { LegacyRoomManager } from '../../../lib/LegacyRoomManager';
+import AutoCompleteAgent from '../components/AutoCompleteAgent';
+import AutoCompleteDepartment from '../components/AutoCompleteDepartment';
+
+type ForwardChatModalFormData = {
+	comment: string;
+	department: string;
+	username: string;
+};
+
+export type ForwardChatModalProps = {
+	room: IOmnichannelRoom;
+	onCancel: () => void;
+};
+
+const ForwardChatModal = ({ room, onCancel }: ForwardChatModalProps) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const getUserData = useEndpoint('GET', '/v1/users.info');
+	const idleAgentsAllowedForForwarding = useSetting('Livechat_enabled_when_agent_idle', true);
+
+	const departmentFieldId = useId();
+	const userFieldId = useId();
+	const commentFieldId = useId();
+
+	const {
+		handleSubmit,
+		setFocus,
+		control,
+		watch,
+		formState: { isSubmitting },
+	} = useForm<ForwardChatModalFormData>();
+
+	useEffect(() => {
+		setFocus('department');
+	}, [setFocus]);
+
+	const department = watch('department');
+	const username = watch('username');
+
+	const forwardChat = useEndpoint('POST', '/v1/livechat/room.forward');
+
+	const handleForwardChat = useCallback(
+		async ({ department: departmentId, username, comment }: ForwardChatModalFormData) => {
+			try {
+				let userId;
+
+				if (username) {
+					const { user } = await getUserData({ username });
+					userId = user?._id;
+				}
+
+				if (departmentId && userId) {
+					return;
+				}
+
+				const payload: {
+					roomId: string;
+					departmentId?: string;
+					userId?: string;
+					comment?: string;
+					clientAction: boolean;
+				} = {
+					roomId: room._id,
+					comment,
+					clientAction: true,
+				};
+
+				if (departmentId) {
+					payload.departmentId = departmentId;
+				}
+
+				if (userId) {
+					payload.userId = userId;
+				}
+
+				await forwardChat(payload);
+				dispatchToastMessage({ type: 'success', message: t('Transferred') });
+				router.navigate('/home');
+				LegacyRoomManager.close(room.t + room._id);
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				onCancel();
+			}
+		},
+		[room._id, room.t, getUserData, forwardChat, dispatchToastMessage, t, router, onCancel],
+	);
+
+	return (
+		<GenericModal
+			variant='warning'
+			icon={null}
+			title={t('Forward_chat')}
+			onCancel={onCancel}
+			onConfirm={handleSubmit(handleForwardChat)}
+			confirmText={t('Forward')}
+			confirmDisabled={!username && !department}
+			confirmLoading={isSubmitting}
+		>
+			<FieldGroup>
+				<Field>
+					<FieldLabel htmlFor={departmentFieldId}>{t('Forward_to_department')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='department'
+							control={control}
+							render={({ field: { ref: _ref, ...field } }) => (
+								<AutoCompleteDepartment
+									{...field}
+									id={departmentFieldId}
+									aria-label={t('Forward_to_department')}
+									withTitle={false}
+									maxWidth='100%'
+									flexGrow={1}
+									disabled={!!username}
+								/>
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Divider padding={0}>{t('or')}</Divider>
+				<Field>
+					<FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='username'
+							control={control}
+							render={({ field: { ref: _ref, ...field } }) => (
+								<AutoCompleteAgent
+									id={userFieldId}
+									{...field}
+									aria-label={t('Forward_to_user')}
+									withTitle
+									onlyAvailable
+									excludeId={room.servedBy?._id}
+									showIdleAgents={idleAgentsAllowedForForwarding}
+									placeholder={t('Username_name_email')}
+									disabled={!!department}
+								/>
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field marginBlock={15}>
+					<FieldLabel htmlFor={commentFieldId}>
+						{t('Leave_a_comment')}
+						<Box marginInlineStart={4} is='span' color='annotation'>
+							({t('Optional')})
+						</Box>
+					</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='comment'
+							control={control}
+							render={({ field }) => <TextAreaInput {...field} id={commentFieldId} rows={8} flexGrow={1} />}
+						/>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default ForwardChatModal;

apps/meteor/client/views/omnichannel/modals/PlaceChatOnHoldModal.tsx

@@ -0,0 +1,44 @@
+import {
+	Button,
+	Modal,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+	ModalHeader,
+	ModalIcon,
+	ModalTitle,
+} from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type PlaceChatOnHoldModalProps = {
+	onOnHoldChat: () => void;
+	confirm?: () => void;
+	onCancel: () => void;
+};
+
+const PlaceChatOnHoldModal = ({ onCancel, onOnHoldChat, confirm = onOnHoldChat, ...props }: PlaceChatOnHoldModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		// TODO: Replace Modal with GenericModal
+		<Modal {...props} aria-label={t('Omnichannel_onHold_Chat')}>
+			<ModalHeader>
+				<ModalIcon name='pause-unfilled' />
+				<ModalTitle>{t('Omnichannel_onHold_Chat')}</ModalTitle>
+				<ModalClose onClick={onCancel} />
+			</ModalHeader>
+			<ModalContent fontScale='p2'>{t('Would_you_like_to_place_chat_on_hold')}</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onCancel}>{t('Cancel')}</Button>
+					<Button primary onClick={confirm}>
+						{t('Omnichannel_onHold_Chat')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default PlaceChatOnHoldModal;

apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.spec.tsx

@@ -0,0 +1,21 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './ReturnChatQueueModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+const appRoot = mockAppRoot().build();
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: appRoot });
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: appRoot });
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.stories.tsx

@@ -0,0 +1,17 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import ReturnChatQueueModal from './ReturnChatQueueModal';
+
+export default {
+	component: ReturnChatQueueModal,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	args: {
+		onMoveChat: () => undefined,
+		onCancel: () => undefined,
+	},
+} satisfies Meta<typeof ReturnChatQueueModal>;
+
+export const Default: StoryObj<typeof ReturnChatQueueModal> = {};

apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.tsx

@@ -0,0 +1,26 @@
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type ReturnChatQueueModalProps = {
+	onMoveChat: () => void;
+	onCancel: () => void;
+};
+
+const ReturnChatQueueModal = ({ onCancel, onMoveChat }: ReturnChatQueueModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal
+			variant='warning'
+			icon='burger-arrow-left'
+			title={t('Return_to_the_queue')}
+			onConfirm={onMoveChat}
+			onCancel={onCancel}
+			confirmText={t('Confirm')}
+		>
+			{t('Would_you_like_to_return_the_queue')}
+		</GenericModal>
+	);
+};
+
+export default ReturnChatQueueModal;

apps/meteor/client/views/omnichannel/modals/TranscriptModal.spec.tsx

@@ -0,0 +1,47 @@
+import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TranscriptModal from './TranscriptModal';
+
+const room = {
+	open: true,
+	v: { token: '1234567890' },
+	transcriptRequest: {
+		email: 'example@example.com',
+		subject: 'Transcript of livechat conversation',
+	},
+} as IOmnichannelRoom;
+
+const defaultProps = {
+	room,
+	email: 'test@example.com',
+	onRequest: () => null,
+	onSend: () => null,
+	onCancel: () => null,
+	onDiscard: () => null,
+};
+
+it('should show Undo request button when roomOpen is true and transcriptRequest exist', async () => {
+	const onDiscardMock = jest.fn();
+	render(<TranscriptModal {...defaultProps} onDiscard={onDiscardMock} />);
+
+	const undoRequestButton = await screen.findByText('Undo_request');
+	await userEvent.click(undoRequestButton);
+
+	expect(onDiscardMock).toHaveBeenCalled();
+});
+
+it('should show Request button when roomOpen is true and transcriptRequest not exist', async () => {
+	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, transcriptRequest: undefined } }} />);
+
+	const requestBtn = await screen.findByRole('button', { name: 'Request' });
+	expect(requestBtn).toBeInTheDocument();
+});
+
+it('should show Send button when roomOpen is false', async () => {
+	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, open: false } }} />);
+
+	const sendBtn = await screen.findByRole('button', { name: 'Send' });
+	expect(sendBtn).toBeInTheDocument();
+});

apps/meteor/client/views/omnichannel/modals/TranscriptModal.tsx

@@ -0,0 +1,140 @@
+import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
+import {
+	Button,
+	Modal,
+	Box,
+	ModalHeader,
+	ModalIcon,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldError, TextInput } from '@rocket.chat/fuselage-forms';
+import { useCallback, useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export type TranscriptModalProps = {
+	email: string;
+	room: IOmnichannelRoom;
+	onRequest: (email: string, subject: string) => void;
+	onSend?: (email: string, subject: string, token: string) => void;
+	onCancel: () => void;
+	onDiscard: () => void;
+};
+
+const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, onCancel, onDiscard, ...props }: TranscriptModalProps) => {
+	const { t } = useTranslation();
+
+	const {
+		control,
+		handleSubmit,
+		setValue,
+		setFocus,
+		formState: { errors, isSubmitting },
+	} = useForm({
+		defaultValues: { email: emailDefault || '', subject: t('Transcript_of_your_livechat_conversation') },
+	});
+
+	useEffect(() => {
+		setFocus('subject');
+	}, [setFocus]);
+
+	const { transcriptRequest } = room;
+	const roomOpen = room?.open;
+	const token = room?.v?.token;
+
+	const handleDiscard = useCallback(() => onDiscard(), [onDiscard]);
+
+	const submit = useCallback(
+		({ email, subject }: { email: string; subject: string }) => {
+			if (roomOpen && !transcriptRequest) {
+				onRequest(email, subject);
+			}
+			if (!roomOpen && onSend && token) {
+				onSend(email, subject, token);
+			}
+		},
+		[onRequest, onSend, roomOpen, token, transcriptRequest],
+	);
+
+	useEffect(() => {
+		if (transcriptRequest) {
+			setValue('email', transcriptRequest.email);
+			setValue('subject', transcriptRequest.subject);
+		}
+	}, [setValue, transcriptRequest]);
+
+	return (
+		<Modal open wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(submit)} {...props} />} {...props}>
+			<ModalHeader>
+				<ModalIcon name='mail-arrow-top-right' />
+				<ModalTitle>{t('Transcript')}</ModalTitle>
+				<ModalClose onClick={onCancel} />
+			</ModalHeader>
+			<ModalContent fontScale='p2'>
+				{!!transcriptRequest && <p>{t('Livechat_transcript_already_requested_warning')}</p>}
+				<FieldGroup>
+					<Field>
+						<FieldLabel required>{t('Email')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='email'
+								control={control}
+								rules={{ required: t('Required_field', { field: t('Email') }) }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										disabled={!!emailDefault || !!transcriptRequest}
+										error={errors.email?.message}
+										flexGrow={1}
+										aria-required='true'
+									/>
+								)}
+							/>
+						</FieldRow>
+						{errors.email && <FieldError>{errors.email?.message}</FieldError>}
+					</Field>
+					<Field>
+						<FieldLabel required>{t('Subject')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='subject'
+								control={control}
+								rules={{ required: t('Required_field', { field: t('Subject') }) }}
+								render={({ field }) => (
+									<TextInput {...field} disabled={!!transcriptRequest} error={errors.subject?.message} flexGrow={1} aria-required='true' />
+								)}
+							/>
+						</FieldRow>
+						{errors.subject && <FieldError>{errors.subject?.message}</FieldError>}
+					</Field>
+				</FieldGroup>
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onCancel}>{t('Cancel')}</Button>
+					{roomOpen && transcriptRequest && (
+						<Button danger onClick={handleDiscard}>
+							{t('Undo_request')}
+						</Button>
+					)}
+					{roomOpen && !transcriptRequest && (
+						<Button disabled={isSubmitting} loading={isSubmitting} primary type='submit'>
+							{t('Request')}
+						</Button>
+					)}
+					{!roomOpen && (
+						<Button disabled={isSubmitting} loading={isSubmitting} primary type='submit'>
+							{t('Send')}
+						</Button>
+					)}
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default TranscriptModal;

apps/meteor/client/views/omnichannel/modals/__snapshots__/ForwardChatModal.spec.tsx.snap

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_3_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_3_-title"
+              >
+                Forward_chat
+              </h2>
+            </div>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <fieldset
+              class="rcx-box rcx-box--full rcx-field-group"
+              role="group"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-field rcx-field-group__item"
+              >
+                <label
+                  class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                  for="_r_0_"
+                >
+                  Forward_to_department
+                </label>
+                <span
+                  class="rcx-box rcx-box--full rcx-field__row"
+                >
+                  <div
+                    aria-busy="false"
+                    aria-disabled="false"
+                    aria-label="Forward_to_department"
+                    class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-cjb8sk"
+                    id="_r_0_"
+                    name="department"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
+                    >
+                      <input
+                        aria-haspopup="listbox"
+                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box rcx-select__focus rcx-css-1l0s473"
+                        placeholder="Select_an_option"
+                        value=""
+                      />
+                      <div
+                        class="rcx-box rcx-box--full rcx-select__addon rcx-css-x7bl3q rcx-css-6bg1ps"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </div>
+                    </div>
+                  </div>
+                </span>
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-message-divider rcx-field-group__item rcx-css-1sjru0w"
+                role="separator"
+              >
+                <div
+                  class="rcx-divider__bar"
+                />
+                <div
+                  class="rcx-divider__wrapper"
+                >
+                  or
+                </div>
+                <div
+                  class="rcx-divider__bar"
+                />
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-field rcx-field-group__item"
+              >
+                <label
+                  class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                  for="_r_1_"
+                >
+                  Forward_to_user
+                </label>
+                <span
+                  class="rcx-box rcx-box--full rcx-field__row"
+                >
+                  <div
+                    aria-label="Forward_to_user"
+                    class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-ue04py"
+                    id="_r_1_"
+                    name="username"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
+                    >
+                      <input
+                        aria-haspopup="listbox"
+                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box rcx-select__focus rcx-css-1l0s473"
+                        placeholder="Username_name_email"
+                        value=""
+                      />
+                      <div
+                        class="rcx-box rcx-box--full rcx-select__addon rcx-css-x7bl3q rcx-css-6bg1ps"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </div>
+                    </div>
+                  </div>
+                </span>
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-field rcx-field-group__item rcx-css-305goq"
+              >
+                <label
+                  class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                  for="_r_2_"
+                >
+                  Leave_a_comment
+                  <span
+                    class="rcx-box rcx-box--full rcx-css-ogdx05"
+                  >
+                    (
+                    Optional
+                    )
+                  </span>
+                </label>
+                <span
+                  class="rcx-box rcx-box--full rcx-field__row"
+                >
+                  <textarea
+                    class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-textarea rcx-input-box rcx-css-t3n91h"
+                    cols="1"
+                    id="_r_2_"
+                    name="comment"
+                    rows="8"
+                    size="1"
+                  />
+                </span>
+              </div>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Forward
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;

apps/meteor/client/views/omnichannel/modals/__snapshots__/ReturnChatQueueModal.spec.tsx.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_0_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-trljwa rcx-css-1xb12qx"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-burger-arrow-left rcx-icon rcx-css-zozvgz"
+              >
+                
+              </i>
+            </div>
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_0_-title"
+              >
+                Return_to_the_queue
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            Would_you_like_to_return_the_queue
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Confirm
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;