[BREAK] Move Multiple Department Creation to EE & [NEW] Department Archive

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

@@ -12,6 +12,7 @@ import {
 	findDepartmentsBetweenIds,
 	findDepartmentAgents,
 } from '../../../server/api/lib/departments';
+import { LivechatEnterprise } from '../../../../../ee/app/livechat-enterprise/server/lib/LivechatEnterprise';
 
 API.v1.addRoute(
 	'livechat/department',
@@ -54,7 +55,7 @@ API.v1.addRoute(
 			});
 
 			const agents = this.bodyParams.agents ? { upsert: this.bodyParams.agents } : {};
-			const department = Livechat.saveDepartment(null, this.bodyParams.department, agents);
+			const department = await LivechatEnterprise.saveDepartment(null, this.bodyParams.department, agents);
 
 			if (department) {
 				return API.v1.success({
@@ -117,7 +118,7 @@ API.v1.addRoute(
 
 			let success;
 			if (permissionToSave) {
-				success = Livechat.saveDepartment(_id, department);
+				success = await LivechatEnterprise.saveDepartment(_id, department);
 			}
 
 			if (success && agents && permissionToAddAgents) {

apps/meteor/app/livechat/server/lib/Livechat.js

@@ -1043,74 +1043,6 @@ export const Livechat = {
 		return updateDepartmentAgents(_id, departmentAgents, department.enabled);
 	},
 
-	saveDepartment(_id, departmentData, departmentAgents) {
-		check(_id, Match.Maybe(String));
-
-		const defaultValidations = {
-			enabled: Boolean,
-			name: String,
-			description: Match.Optional(String),
-			showOnRegistration: Boolean,
-			email: String,
-			showOnOfflineForm: Boolean,
-			requestTagBeforeClosingChat: Match.Optional(Boolean),
-			chatClosingTags: Match.Optional([String]),
-			fallbackForwardDepartment: Match.Optional(String),
-		};
-
-		// The Livechat Form department support addition/custom fields, so those fields need to be added before validating
-		Object.keys(departmentData).forEach((field) => {
-			if (!defaultValidations.hasOwnProperty(field)) {
-				defaultValidations[field] = Match.OneOf(String, Match.Integer, Boolean);
-			}
-		});
-
-		check(departmentData, defaultValidations);
-		check(
-			departmentAgents,
-			Match.Maybe({
-				upsert: Match.Maybe(Array),
-				remove: Match.Maybe(Array),
-			}),
-		);
-
-		const { requestTagBeforeClosingChat, chatClosingTags, fallbackForwardDepartment } = departmentData;
-		if (requestTagBeforeClosingChat && (!chatClosingTags || chatClosingTags.length === 0)) {
-			throw new Meteor.Error(
-				'error-validating-department-chat-closing-tags',
-				'At least one closing tag is required when the department requires tag(s) on closing conversations.',
-				{ method: 'livechat:saveDepartment' },
-			);
-		}
-
-		if (_id) {
-			const department = LivechatDepartment.findOneById(_id);
-			if (!department) {
-				throw new Meteor.Error('error-department-not-found', 'Department not found', {
-					method: 'livechat:saveDepartment',
-				});
-			}
-		}
-
-		if (fallbackForwardDepartment === _id) {
-			throw new Meteor.Error(
-				'error-fallback-department-circular',
-				'Cannot save department. Circular reference between fallback department and department',
-			);
-		}
-
-		if (fallbackForwardDepartment && !LivechatDepartment.findOneById(fallbackForwardDepartment)) {
-			throw new Meteor.Error('error-fallback-department-not-found', 'Fallback department not found', { method: 'livechat:saveDepartment' });
-		}
-
-		const departmentDB = LivechatDepartment.createOrUpdateDepartment(_id, departmentData);
-		if (departmentDB && departmentAgents) {
-			updateDepartmentAgents(departmentDB._id, departmentAgents, departmentDB.enabled);
-		}
-
-		return departmentDB;
-	},
-
 	saveAgentInfo(_id, agentData, agentDepartments) {
 		check(_id, Match.Maybe(String));
 		check(agentData, Object);

apps/meteor/app/livechat/server/methods/saveDepartment.js

@@ -1,16 +1,16 @@
 import { Meteor } from 'meteor/meteor';
 
 import { hasPermission } from '../../../authorization';
-import { Livechat } from '../lib/Livechat';
+import { LivechatEnterprise } from '../../../../ee/app/livechat-enterprise/server/lib/LivechatEnterprise';
 
 Meteor.methods({
-	'livechat:saveDepartment'(_id, departmentData, departmentAgents) {
+	async 'livechat:saveDepartment'(_id, departmentData, departmentAgents) {
 		if (!Meteor.userId() || !hasPermission(Meteor.userId(), 'manage-livechat-departments')) {
 			throw new Meteor.Error('error-not-allowed', 'Not allowed', {
 				method: 'livechat:saveDepartment',
 			});
 		}
 
-		return Livechat.saveDepartment(_id, departmentData, { upsert: departmentAgents });
+		return LivechatEnterprise.saveDepartment(_id, departmentData, { upsert: departmentAgents });
 	},
 });

apps/meteor/client/components/Omnichannel/modals/EnterpriseDepartmentsModal.tsx

@@ -0,0 +1,73 @@
+import { Button, Modal, Box } from '@rocket.chat/fuselage';
+import { useOutsideClick } from '@rocket.chat/fuselage-hooks';
+import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React, { useRef } from 'react';
+
+import { hasPermission } from '../../../../app/authorization/client';
+import { useUpgradeTabParams } from '../../../views/hooks/useUpgradeTabParams';
+
+const EnterpriseDepartmentsModal = ({ closeModal }: { closeModal: () => void }): ReactElement => {
+	const t = useTranslation();
+	const upgradeRoute = useRoute('upgrade');
+	const departmentsRoute = useRoute('omnichannel-departments');
+	const { tabType, trialEndDate } = useUpgradeTabParams();
+	const ref = useRef<HTMLDivElement>(null);
+	const upgradeNowClick = (): void => {
+		tabType && upgradeRoute.push({ type: tabType }, trialEndDate ? { trialEndDate } : undefined);
+		closeModal();
+	};
+
+	const onClose = (): void => {
+		departmentsRoute.push({});
+		closeModal();
+	};
+
+	useOutsideClick([ref], onClose);
+
+	return (
+		<>
+			<Modal data-qa-id='enterprise-departments-modal' ref={ref}>
+				<Modal.Header>
+					<Modal.HeaderText>
+						<Modal.Tagline>{t('Enterprise_capability')}</Modal.Tagline>
+						<Modal.Title>{t('Departments')}</Modal.Title>
+					</Modal.HeaderText>
+					<Modal.Close onClick={onClose} data-qa='modal-close' />
+				</Modal.Header>
+				<Modal.Content fontScale='p2'>
+					<Modal.HeroImage src='/images/departments.svg' />
+					<Box fontSize={20} fontWeight={700} lineHeight={28} mbe={28}>
+						{t('Enterprise_Departments_title')}
+					</Box>
+					{tabType === 'go-fully-featured' || tabType === 'go-fully-featured-registered' || tabType === 'upgrade-your-plan'
+						? t('Enterprise_Departments_description_upgrade')
+						: t('Enterprise_Departments_description_free_trial')}
+				</Modal.Content>
+				<Modal.Footer>
+					{hasPermission('view-statistics') ? (
+						<Modal.FooterControllers>
+							<Button is='a' href='https://rocket.chat/contact' external onClick={onClose} data-qa-id='btn-talk-to-sales'>
+								{t('Talk_to_sales')}
+							</Button>
+							<Button onClick={upgradeNowClick} primary data-qa-id='upgrade-now'>
+								{tabType === 'go-fully-featured' || tabType === 'go-fully-featured-registered' || tabType === 'upgrade-your-plan'
+									? t('Start_free_trial')
+									: t('Learn_more')}
+							</Button>
+						</Modal.FooterControllers>
+					) : (
+						<Box display='flex' width='100%' justifyContent='space-between' alignItems='center'>
+							Talk to your workspace admin about enabling departments.
+							<Button onClick={onClose} data-qa='button-close'>
+								{t('Close')}
+							</Button>
+						</Box>
+					)}
+				</Modal.Footer>
+			</Modal>
+		</>
+	);
+};
+
+export default EnterpriseDepartmentsModal;

apps/meteor/client/views/omnichannel/departments/DepartmentsRoute.js

@@ -1,19 +1,19 @@
 import { Table } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRouteParameter, useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo, useCallback, useState } from 'react';
+import { useRouteParameter, useRoute, usePermission, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import React, { useMemo, useCallback, useState, useRef } from 'react';
 
 import GenericTable from '../../../components/GenericTable';
-import { useEndpointData } from '../../../hooks/useEndpointData';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import DepartmentsPage from './DepartmentsPage';
-import EditDepartment from './EditDepartment';
 import EditDepartmentWithData from './EditDepartmentWithData';
+import NewDepartment from './NewDepartment';
 import RemoveDepartmentButton from './RemoveDepartmentButton';
 
 const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
 
-const useQuery = ({ text, itemsPerPage, current }, [column, direction], onlyMyDepartments) =>
+const useDepartmentsQuery = ({ text, itemsPerPage, current }, [column, direction], onlyMyDepartments) =>
 	useMemo(
 		() => ({
 			fields: JSON.stringify({ name: 1, username: 1, emails: 1, avatarETag: 1 }),
@@ -44,11 +44,16 @@ function DepartmentsRoute() {
 	const debouncedParams = useDebouncedValue(params, 500);
 	const debouncedSort = useDebouncedValue(sort, 500);
 	const onlyMyDepartments = true;
-	const query = useQuery(debouncedParams, debouncedSort, onlyMyDepartments);
 	const departmentsRoute = useRoute('omnichannel-departments');
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
 
+	const refetchRef = useRef(() => undefined);
+
+	const handleRefetch = useCallback(() => {
+		refetchRef.current();
+	}, [refetchRef]);
+
 	const onHeaderClick = useMutableCallback((id) => {
 		const [sortBy, sortDirection] = sort;
 
@@ -67,7 +72,23 @@ function DepartmentsRoute() {
 			}),
 	);
 
-	const { value: data = {}, reload } = useEndpointData('/v1/livechat/department', { params: query });
+	const query = {
+		onlyMyDepartments,
+		text: debouncedParams.text,
+		offset: debouncedParams.current,
+		count: debouncedParams.itemsPerPage,
+		sort: JSON.stringify({
+			[debouncedSort.column]: sortDir(debouncedSort.direction),
+			usernames: debouncedSort.column === 'name' ? sortDir(debouncedSort.direction) : undefined,
+		}),
+		fields: JSON.stringify({ name: 1, username: 1, emails: 1, avatarETag: 1 }),
+	};
+
+	const getDepartments = useEndpoint('GET', '/v1/livechat/department');
+
+	const { data, refetch } = useQuery(['getDepartments', query], async () => getDepartments(query));
+
+	const reload = useCallback(() => refetch(), [refetch]);
 
 	const header = useMemo(
 		() =>
@@ -122,18 +143,18 @@ function DepartmentsRoute() {
 				<Table.Cell withTruncatedText>{numAgents || '0'}</Table.Cell>
 				<Table.Cell withTruncatedText>{enabled ? t('Yes') : t('No')}</Table.Cell>
 				<Table.Cell withTruncatedText>{showOnRegistration ? t('Yes') : t('No')}</Table.Cell>
-				{canRemoveDepartments && <RemoveDepartmentButton _id={_id} reload={reload} />}
+				{canRemoveDepartments && <RemoveDepartmentButton _id={_id} reload={reload} refetch={handleRefetch} />}
 			</Table.Row>
 		),
-		[canRemoveDepartments, onRowClick, t, reload],
+		[canRemoveDepartments, handleRefetch, onRowClick, reload, t],
 	);
 
 	if (!canViewDepartments) {
 		return <NotAuthorizedPage />;
 	}
 
 	if (context === 'new') {
-		return <EditDepartment id={id} reload={reload} title={t('New_Department')} />;
+		return <NewDepartment id={id} reload={reload} refetchRef={refetchRef} title={t('New_Department')} />;
 	}
 
 	if (context === 'edit') {
@@ -146,7 +167,7 @@ function DepartmentsRoute() {
 			params={params}
 			onHeaderClick={onHeaderClick}
 			data={data}
-			useQuery={useQuery}
+			useQuery={useDepartmentsQuery}
 			reload={reload}
 			header={header}
 			renderRow={renderRow}

apps/meteor/client/views/omnichannel/departments/NewDepartment.tsx

@@ -0,0 +1,38 @@
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import React, { useEffect } from 'react';
+
+import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
+import PageSkeleton from '../../../components/PageSkeleton';
+import EditDepartment from './EditDepartment';
+import UpgradeDepartments from './UpgradeDepartments';
+
+type NewDepartmentProps = {
+	id: string;
+	reload: () => void;
+	refetchRef: MutableRefObject<() => void>;
+};
+
+const NewDepartment = ({ id, reload, refetchRef }: NewDepartmentProps) => {
+	const getDepartments = useEndpoint('GET', '/v1/livechat/department');
+	const hasLicense = useHasLicenseModule('livechat-enterprise');
+	const { data, refetch, isLoading } = useQuery(['getDepartments'], async () => getDepartments());
+
+	useEffect(() => {
+		refetchRef.current = refetch;
+	}, [refetchRef, refetch]);
+
+	const t = useTranslation();
+
+	if (isLoading || hasLicense === 'loading') {
+		return <PageSkeleton />;
+	}
+	if (!hasLicense && data?.total === 0) {
+		return <UpgradeDepartments />;
+	}
+	// TODO: remove allowedToForwardData and data props once the EditDepartment component is migrated to TS
+	return <EditDepartment id={id} reload={reload} title={t('New_Department')} allowedToForwardData={undefined} data={undefined} />;
+};
+
+export default NewDepartment;

apps/meteor/client/views/omnichannel/departments/RemoveDepartmentButton.js

@@ -6,7 +6,7 @@ import React from 'react';
 import GenericModal from '../../../components/GenericModal';
 import { useEndpointAction } from '../../../hooks/useEndpointAction';
 
-function RemoveDepartmentButton({ _id, reload }) {
+function RemoveDepartmentButton({ _id, reload, refetch }) {
 	const deleteAction = useEndpointAction('DELETE', '/v1/livechat/department/:_id', { keys: { _id } });
 	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -16,6 +16,7 @@ function RemoveDepartmentButton({ _id, reload }) {
 		const result = await deleteAction();
 		if (result.success === true) {
 			reload();
+			refetch();
 		}
 	});
 

apps/meteor/client/views/omnichannel/departments/UpgradeDepartments.tsx

@@ -0,0 +1,14 @@
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import React, { useEffect } from 'react';
+
+import EnterpriseDepartmentsModal from '../../../components/Omnichannel/modals/EnterpriseDepartmentsModal';
+import PageSkeleton from '../../../components/PageSkeleton';
+
+const UpgradeDepartments = () => {
+	const setModal = useSetModal();
+
+	useEffect(() => setModal(<EnterpriseDepartmentsModal closeModal={(): void => setModal(null)} />), [setModal]);
+	return <PageSkeleton />;
+};
+
+export default UpgradeDepartments;