[IMPROVE] Add modal to close chats when tags/comments are not required (#22245)

* [IMPROVE] Add modal to close chats when tags/comments are not required (#22225)

* [IMPROVE] Add modal to close chats when tags/comments are not required

* department from subscribe correctly

* fix departmentId and department from subscription.

* undo sub departmentId change

* undo sub departmentId change

* fix room type

* fix RoomHeader props type

* Tags required with asterisk as all default labels of RC.

* get deparment from subscription or room.

* normalizing subscription and room into useOmnichannelRoom

* Get room from useOmnichannelRoom into omnichannel header.

* trying to skip build fail

* Revert "trying to skip build fail"

This reverts commit 2c581a2052.

Co-authored-by: Martin <martin.schoeler@rocket.chat>
Co-authored-by: pierre-lehnen-rc <55164754+pierre-lehnen-rc@users.noreply.github.com>
Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>
Co-authored-by: Rafael Ferreira <rafael.ferreira@rocket.chat>
Co-authored-by: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>

* Remove subscription interface from output.

* remove cache from CI install

* Revert "remove cache from CI install"

This reverts commit f72ac4472c.

Co-authored-by: Martin <martin.schoeler@rocket.chat>
Co-authored-by: pierre-lehnen-rc <55164754+pierre-lehnen-rc@users.noreply.github.com>
Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>
Co-authored-by: Rafael Ferreira <rafael.ferreira@rocket.chat>
Co-authored-by: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>

client/components/Omnichannel/Tags.js

@@ -10,7 +10,7 @@ import { useEndpointData } from '../../hooks/useEndpointData';
 import { formsSubscription } from '../../views/omnichannel/additionalForms';
 import { FormSkeleton } from './Skeleton';
 
-const Tags = ({ tags = [], handler = () => {}, error = '' }) => {
+const Tags = ({ tags = [], handler = () => {}, error = '', tagRequired = false }) => {
 	const { value: tagsResult = [], phase: stateTags } = useEndpointData('livechat/tags.list');
 	const t = useTranslation();
 	const forms = useSubscription(formsSubscription);
@@ -49,7 +49,9 @@ const Tags = ({ tags = [], handler = () => {}, error = '' }) => {
 
 	return (
 		<>
-			<Field.Label mb='x4'>{t('Tags')}</Field.Label>
+			<Field.Label required={tagRequired} mb='x4'>
+				{t('Tags')}
+			</Field.Label>
 			{Tags && tagsList && tagsList.length > 0 ? (
 				<Field.Row>
 					<Tags value={tags} handler={handler} />

client/components/Omnichannel/modals/CloseChatModal.js

@@ -6,6 +6,7 @@ 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 }) => {
@@ -46,6 +47,19 @@ const CloseChatModal = ({ department = {}, onCancel, onConfirm }) => {
 		);
 	}, [department, tagRequired, t, tags]);
 
+	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>
+		);
+	}
+
 	return (
 		<Modal>
 			<Modal.Header>
@@ -71,7 +85,7 @@ const CloseChatModal = ({ department = {}, onCancel, onConfirm }) => {
 				</Field>
 				{Tags && (
 					<Field>
-						<Tags tags={tags} handler={handleTags} error={tagError} />
+						<Tags tagRequired={tagRequired} tags={tags} handler={handleTags} error={tagError} />
 						<Field.Error>{tagError}</Field.Error>
 					</Field>
 				)}

client/views/omnichannel/directory/chats/contextualBar/ChatInfo.js

@@ -40,7 +40,7 @@ function ChatInfo({ id, route }) {
 		ts,
 		tags,
 		closedAt,
-		department,
+		departmentId,
 		v,
 		servedBy,
 		metrics,
@@ -103,7 +103,7 @@ function ChatInfo({ id, route }) {
 					{room && v && <ContactField contact={v} room={room} />}
 					{visitorId && <VisitorClientInfo uid={visitorId} />}
 					{servedBy && <AgentField agent={servedBy} />}
-					{department && <DepartmentField departmentId={department} />}
+					{departmentId && <DepartmentField departmentId={departmentId} />}
 					{tags && tags.length > 0 && (
 						<Field>
 							<Label>{t('Tags')}</Label>

client/views/room/Header/Header.js

@@ -28,7 +28,7 @@ const Header = ({ room }) => {
 	}
 
 	if (room.t === 'l') {
-		return <OmnichannelRoomHeader slots={slots} room={room} />;
+		return <OmnichannelRoomHeader slots={slots} />;
 	}
 
 	return <RoomHeader slots={slots} room={room} topic={room.topic} />;

client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx

@@ -3,14 +3,16 @@ import React, { FC, useMemo } from 'react';
 import TemplateHeader from '../../../../components/Header';
 import { useLayout } from '../../../../contexts/LayoutContext';
 import { useCurrentRoute } from '../../../../contexts/RouterContext';
+import { useOmnichannelRoom } from '../../contexts/RoomContext';
 import Burger from '../Burger';
 import RoomHeader, { RoomHeaderProps } from '../RoomHeader';
 import BackButton from './BackButton';
 import QuickActions from './QuickActions';
 
-const OmnichannelRoomHeader: FC<RoomHeaderProps> = ({ room, slots: parentSlot }) => {
+const OmnichannelRoomHeader: FC<RoomHeaderProps> = ({ slots: parentSlot }) => {
 	const [name] = useCurrentRoute();
 	const { isMobile } = useLayout();
+	const room = useOmnichannelRoom();
 	const slots = useMemo(
 		() => ({
 			...parentSlot,

client/views/room/contexts/RoomContext.ts

@@ -1,15 +1,24 @@
 import { createContext, useContext } from 'react';
 
 import { IRoom, IOmnichannelRoom, isOmnichannelRoom } from '../../../../definition/IRoom';
+import { IOmnichannelSubscription } from '../../../../definition/ISubscription';
 
 export type RoomContextValue = {
 	rid: IRoom['_id'];
-	room: IRoom;
-	// tabBar: TabBar;
+	room: IOmnichannelRoom & IOmnichannelSubscription;
 };
 
 export const RoomContext = createContext<RoomContextValue | null>(null);
 
+const normalizeRoomSubscription = (
+	room: IOmnichannelRoom & IOmnichannelSubscription,
+): IOmnichannelRoom => {
+	if (room.department) {
+		room.departmentId = room.department;
+	}
+	return room;
+};
+
 export const useRoom = (): IRoom => {
 	const { room } = useContext(RoomContext) || {};
 	if (!room) {
@@ -20,11 +29,13 @@ export const useRoom = (): IRoom => {
 
 export const useOmnichannelRoom = (): IOmnichannelRoom => {
 	const { room } = useContext(RoomContext) || {};
+
 	if (!room) {
 		throw new Error('use useRoom only inside opened rooms');
 	}
 	if (!isOmnichannelRoom(room)) {
 		throw new Error('invalid room type');
 	}
-	return room;
+
+	return normalizeRoomSubscription(room);
 };

client/views/room/providers/RoomProvider.tsx

@@ -1,7 +1,8 @@
 import React, { ReactNode, useMemo, memo, useEffect } from 'react';
 
 import { roomTypes } from '../../../../app/utils/client';
-import { IRoom } from '../../../../definition/IRoom';
+import { IRoom, IOmnichannelRoom } from '../../../../definition/IRoom';
+import { IOmnichannelSubscription } from '../../../../definition/ISubscription';
 import { RoomManager, useHandleRoom } from '../../../lib/RoomManager';
 import { AsyncStatePhase } from '../../../lib/asyncState';
 import Skeleton from '../Room/Skeleton';
@@ -22,7 +23,8 @@ const RoomProvider = ({ rid, children }: Props): JSX.Element => {
 		room._id = rid;
 		return {
 			rid,
-			room: { ...room, name: roomTypes.getRoomName(room.t, room) },
+			room: { ...room, name: roomTypes.getRoomName(room.t, room) } as IOmnichannelRoom &
+				IOmnichannelSubscription,
 		};
 	}, [room, rid]);
 

definition/ISubscription.ts

@@ -40,6 +40,10 @@ export interface ISubscription extends IRocketChatRecord {
 	unreadAlert?: 'default' | 'all' | 'mentions' | 'nothing';
 }
 
+export interface IOmnichannelSubscription extends ISubscription {
+	department?: string;
+}
+
 export interface ISubscriptionDirectMessage extends Omit<ISubscription, 'name'> {
 	t: 'd';
 }

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

@@ -523,6 +523,7 @@
   "are_also_typing": "are also typing",
   "are_typing": "are typing",
   "Are_you_sure": "Are you sure?",
+  "Are_you_sure_you_want_to_close_this_chat": "Are you sure you want to close this chat?",
   "Are_you_sure_you_want_to_delete_this_record": "Are you sure you want to delete this record?",
   "Are_you_sure_you_want_to_delete_your_account": "Are you sure you want to delete your account?",
   "Are_you_sure_you_want_to_disable_Facebook_integration": "Are you sure you want to disable Facebook integration?",

packages/rocketchat-i18n/i18n/pt-BR.i18n.json

@@ -457,6 +457,7 @@
   "are_also_typing": "também estão digitando",
   "are_typing": "estão digitando",
   "Are_you_sure": "Você tem certeza?",
+  "Are_you_sure_you_want_to_close_this_chat": "Tem certeza de que deseja fechar esta conversa?",
   "Are_you_sure_you_want_to_delete_this_record": "Tem certeza de que deseja remover este registro?",
   "Are_you_sure_you_want_to_delete_your_account": "Tem certeza de que deseja excluir a sua conta?",
   "Are_you_sure_you_want_to_disable_Facebook_integration": "Tem certeza de que deseja desabilitar a integração do Facebook?",