[NEW] Quick action buttons for Omnichannel

client/components/CloseChatModal.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { Field, Button, TextInput, Icon, ButtonGroup, Modal, Box } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../contexts/TranslationContext';
+import { useForm } from '../hooks/useForm';
+import { useComponentDidUpdate } from '../hooks/useComponentDidUpdate';
+
+
+type CloseChatModalProps = {
+	onCancel: () => void;
+	onConfirm: (comment: string) => void;
+};
+
+const CloseChatModal: FC<CloseChatModalProps> = ({ onCancel, onConfirm, ...props }) => {
+	const t = useTranslation();
+
+	const ref = useRef<HTMLInputElement>();
+
+	useEffect(() => {
+		if (typeof ref?.current?.focus === 'function') {
+			ref.current.focus();
+		}
+	}, [ref]);
+
+	const { values, handlers } = useForm({ comment: '' });
+
+	const { comment } = values as { comment: string };
+	const { handleComment } = handlers;
+	const [commentError, setCommentError] = useState('');
+
+
+	const handleConfirm = useCallback(() => {
+		onConfirm(comment);
+	}, [comment, onConfirm]);
+
+	useComponentDidUpdate(() => {
+		setCommentError(!comment ? t('The_field_is_required', t('Comment')) : '');
+	}, [t, comment]);
+
+	const canConfirm = useMemo(() => !!comment, [comment]);
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='baloon-close-top-right' size={20}/>
+			<Modal.Title>{t('Closing_chat')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Box color='neutral-600'>{t('Close_room_description')}</Box>
+			<Field marginBlock='x15'>
+				<Field.Label>{t('Comment')}*</Field.Label>
+				<Field.Row>
+					<TextInput error={commentError} flexGrow={1} value={comment} onChange={handleComment} placeholder={t('Please_add_a_comment')} />
+				</Field.Row>
+				<Field.Error>
+					{commentError}
+				</Field.Error>
+			</Field>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onCancel}>{t('Cancel')}</Button>
+				<Button disabled={!canConfirm} primary onClick={handleConfirm}>{t('Confirm')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default CloseChatModal;

client/components/ForwardChatModal.tsx

@@ -0,0 +1,98 @@
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Field, Button, TextAreaInput, Icon, ButtonGroup, Modal, Box } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../contexts/TranslationContext';
+import { useForm } from '../hooks/useForm';
+import ModalSeparator from './ModalSeparator';
+import DepartmentAutoComplete from '../views/omnichannel/DepartmentAutoComplete';
+import { UserAutoComplete } from './AutoComplete';
+import { useEndpointAction } from '../hooks/useEndpointAction';
+
+type ForwardChatModalProps = {
+	onForward: (departmentName?: string, userId?: string, comment?: string) => void;
+	onCancel: () => void;
+};
+
+const ForwardChatModal: FC<ForwardChatModalProps> = ({ onForward, onCancel, ...props }) => {
+	const t = useTranslation();
+
+	const ref = useRef<HTMLInputElement>();
+
+	useEffect(() => {
+		if (typeof ref?.current?.focus === 'function') {
+			ref.current.focus();
+		}
+	}, [ref]);
+
+	const { values, handlers } = useForm({ departmentName: '', username: '', comment: '' });
+	const { departmentName, username, comment } = values as { departmentName: string; username: string; comment: string };
+	const [userId, setUserId] = useState('');
+
+	const { handleDepartmentName, handleUsername, handleComment } = handlers;
+	const userInfo = useEndpointAction('GET', `users.info?username=${ username }`);
+
+
+	const handleSend = useCallback(() => {
+		onForward(departmentName, userId, comment);
+	}, [onForward, departmentName, userId, comment]);
+
+
+	const onChangeDepartment = useMutableCallback((departmentId: string): void => {
+		handleDepartmentName(departmentId);
+		handleUsername('');
+		setUserId('');
+	});
+
+	const onChangeUsername = useMutableCallback((username: string): void => {
+		handleUsername(username);
+		handleDepartmentName('');
+	});
+
+	useEffect(() => {
+		if (!username) { return; }
+		const fetchData = async (): Promise<void> => {
+			const { user } = await userInfo();
+			setUserId(user._id);
+		};
+		fetchData();
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [username]);
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='baloon-arrow-top-right' size={20}/>
+			<Modal.Title>{t('Forward_chat')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Field mbe={'x30'}>
+				<Field.Label>{t('Forward_to_department')}</Field.Label>
+				<Field.Row>
+					<DepartmentAutoComplete value={departmentName} onChange={onChangeDepartment} flexShrink={1} placeholder={t('Department_name')} />
+				</Field.Row>
+			</Field>
+			<ModalSeparator text={t('or')} />
+			<Field mbs={'x30'}>
+				<Field.Label>{t('Forward_to_user')}</Field.Label>
+				<Field.Row>
+					<UserAutoComplete flexGrow={1} value={username} onChange={onChangeUsername} placeholder={t('Username')} />
+				</Field.Row>
+			</Field>
+			<Field marginBlock='x15'>
+				<Field.Label>{t('Leave_a_comment')} <Box is='span' color='neutral-600'>({t('Optional')})</Box></Field.Label>
+				<Field.Row>
+					<TextAreaInput rows={8} flexGrow={1} value={comment} onChange={handleComment} />
+				</Field.Row>
+			</Field>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onCancel}>{t('Cancel')}</Button>
+				<Button primary onClick={handleSend}>{t('Forward')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default ForwardChatModal;

client/components/Header/Header.tsx

@@ -11,7 +11,7 @@ const HeaderIcon: FC<{ icon: JSX.Element | { name: string; color?: string } | nu
 
 const ToolBox: FC = (props: any) => <ButtonGroup mi='x4' medium {...props}/>;
 
-const ToolBoxAction: FC = ({ id, icon, title, action, className, tabId, index, ...props }: any) => <ActionButton
+const ToolBoxAction: FC = ({ id, icon, color, title, action, className, tabId, index, ...props }: any) => <ActionButton
 	className={className}
 	primary={tabId === id}
 	onClick={action}
@@ -23,6 +23,7 @@ const ToolBoxAction: FC = ({ id, icon, title, action, className, tabId, index, .
 	ghost
 	tiny
 	overflow='visible'
+	color={color && color}
 	{...props}
 />;
 

client/components/ModalSeparator/ModalSeparator.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+import './style.css';
+
+const ModalSeparator: FC<{ text: string }> = ({ text, ...props }) => <h6 className='modal-separator' {...props}>{text}</h6>;
+
+export default ModalSeparator;

client/components/ModalSeparator/index.js

@@ -0,0 +1,3 @@
+import ModalSeparator from './ModalSeparator';
+
+export default ModalSeparator;

client/components/ModalSeparator/style.css

@@ -0,0 +1,20 @@
+.modal-separator {
+	display: flex;
+
+	text-align: center;
+	text-transform: uppercase;
+
+	font-size: 0.625rem;
+	font-weight: normal;
+}
+
+.modal-separator::before,
+.modal-separator::after {
+	flex: 1;
+
+	margin: auto 0.8em;
+
+	content: '';
+
+	border-bottom: solid 2px #f2f3f5;
+}

client/components/ReturnChatQueueModal.tsx

@@ -0,0 +1,44 @@
+import { Box, Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+import { useTranslation } from '../contexts/TranslationContext';
+import { withDoNotAskAgain, RequiredModalProps } from './withDoNotAskAgain';
+
+type ReturnChatQueueModalProps = RequiredModalProps & {
+	onMoveChat: () => void;
+	onCancel: () => void;
+};
+
+const ReturnChatQueueModal: FC<ReturnChatQueueModalProps> = ({
+	onCancel,
+	onMoveChat,
+	confirm = onMoveChat,
+	dontAskAgain,
+	...props
+}) => {
+	const t = useTranslation();
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='burger-arrow-left' size={20}/>
+			<Modal.Title>{t('Return_to_the_queue')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{t('Would_you_like_to_return_the_queue')}
+		</Modal.Content>
+		<Modal.Footer>
+			<Box>
+				{dontAskAgain}
+				<ButtonGroup align='end'>
+					<Button onClick={onCancel}>{t('Cancel')}</Button>
+					<Button primary onClick={confirm}>{t('Move_queue')}</Button>
+				</ButtonGroup>
+			</Box>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export const ReturnChatQueueDoNotAskAgain = withDoNotAskAgain<ReturnChatQueueModalProps>(ReturnChatQueueModal);
+
+export default ReturnChatQueueModal;

client/components/TranscriptModal.tsx

@@ -0,0 +1,111 @@
+import React, { FC, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { Field, Button, TextInput, Icon, ButtonGroup, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../contexts/TranslationContext';
+import { useForm } from '../hooks/useForm';
+import { useComponentDidUpdate } from '../hooks/useComponentDidUpdate';
+import { IRoom } from '../../definition/IRoom';
+
+
+type TranscriptModalProps = {
+	email: string;
+	room?: IRoom;
+	onRequest: (email: string, subject: string) => void;
+	onSend?: (email: string, subject: string, token: string) => void;
+	onCancel: () => void;
+	onDiscard: () => void;
+};
+
+const TranscriptModal: FC<TranscriptModalProps> = ({ email: emailDefault = '', room, onRequest, onSend, onCancel, onDiscard, ...props }) => {
+	const t = useTranslation();
+
+	const ref = useRef<HTMLInputElement>();
+
+	useEffect(() => {
+		if (typeof ref?.current?.focus === 'function') {
+			ref.current.focus();
+		}
+	}, [ref]);
+
+	const { values, handlers } = useForm({ email: emailDefault || '', subject: t('Transcript_of_your_livechat_conversation') });
+
+	const { email, subject } = values as { email: string; subject: string };
+	const { handleEmail, handleSubject } = handlers;
+	const [emailError, setEmailError] = useState('');
+	const [subjectError, setSubjectError] = useState('');
+	const { transcriptRequest } = room as unknown as IRoom;
+	const roomOpen = room && room.open;
+	const token = room?.v?.token;
+
+
+	const handleRequest = useCallback(() => {
+		onRequest(email, subject);
+	}, [email, onRequest, subject]);
+
+	const handleSend = useCallback(() => {
+		onSend && token && onSend(email, subject, token);
+	}, [email, onSend, subject, token]);
+
+	const handleDiscard = useCallback(() => onDiscard(), [onDiscard]);
+
+	useComponentDidUpdate(() => {
+		setEmailError(!email ? t('The_field_is_required', t('Email')) : '');
+	}, [t, email]);
+
+	useComponentDidUpdate(() => {
+		setSubjectError(!subject ? t('The_field_is_required', t('Subject')) : '');
+	}, [t, subject]);
+
+	const canSave = useMemo(() => !!subject, [subject]);
+
+	useEffect(() => {
+		if (transcriptRequest) {
+			handleEmail(transcriptRequest.email);
+			handleSubject(transcriptRequest.subject);
+		}
+	});
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='mail-arrow-top-right' size={20}/>
+			<Modal.Title>{t('Transcript')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Field marginBlock='x15'>
+				<Field.Label>{t('Email')}*</Field.Label>
+				<Field.Row>
+					<TextInput disabled={!!emailDefault || !!transcriptRequest} error={emailError} flexGrow={1} value={email} onChange={handleEmail} />
+				</Field.Row>
+				<Field.Error>
+					{emailError}
+				</Field.Error>
+			</Field>
+			<Field marginBlock='x15'>
+				<Field.Label>{t('Subject')}*</Field.Label>
+				<Field.Row>
+					<TextInput ref={ref} disabled={!!transcriptRequest} error={subjectError} flexGrow={1} value={subject} onChange={handleSubject} />
+				</Field.Row>
+				<Field.Error>
+					{subjectError}
+				</Field.Error>
+			</Field>
+			{!!transcriptRequest && <p>{t('Livechat_transcript_already_requested_warning')}</p>}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onCancel}>{t('Cancel')}</Button>
+				{
+					roomOpen && transcriptRequest
+						? <Button primary danger onClick={handleDiscard}>{t('Discard')}</Button>
+						: <Button disabled={!canSave} primary onClick={handleRequest}>{t('Request')}</Button>
+				}
+				{
+					!roomOpen && <Button disabled={!canSave} primary onClick={handleSend}>{t('Send')}</Button>
+				}
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default TranscriptModal;

client/providers/OmniChannelProvider.tsx

@@ -96,8 +96,9 @@ const OmnichannelEnabledProvider: FC = ({ children }) => {
 		setContextValue((context) => ({
 			...context,
 			agentAvailable: user?.statusLivechat === 'available',
+			routeConfig,
 		}));
-	}, [user?.statusLivechat]);
+	}, [user?.statusLivechat, routeConfig]);
 
 	if (!routeConfig || !user) {
 		return <OmnichannelDisabledProvider children={children}/>;