[BREAK] Update livechat:saveDepartment to accept a string array in departmentsAllowedToForward (#28261)

Co-authored-by: Murtaza Patrawala <34130764+murtaza98@users.noreply.github.com>

apps/meteor/client/components/AutoCompleteDepartment.tsx

@@ -9,7 +9,7 @@ import { AsyncStatePhase } from '../hooks/useAsyncState';
 import { useDepartmentsList } from './Omnichannel/hooks/useDepartmentsList';
 
 type AutoCompleteDepartmentProps = {
-	value?: { value: string; label: string } | string;
+	value?: string;
 	onChange: (value: string) => void;
 	excludeDepartmentId?: string;
 	onlyMyDepartments?: boolean;
@@ -48,15 +48,10 @@ const AutoCompleteDepartment = ({
 
 	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
 
-	const department = useMemo(() => {
-		const valueFound = typeof value === 'string' ? value : value?.value || '';
-		return departmentsItems.find((dep) => dep.value === valueFound)?.value;
-	}, [departmentsItems, value]);
-
 	return (
 		<PaginatedSelectFiltered
 			withTitle
-			value={department}
+			value={value}
 			onChange={onChange}
 			filter={departmentsFilter}
 			setFilter={setDepartmentsFilter as (value?: string | number) => void}

apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.js

@@ -72,7 +72,7 @@ const AnalyticsPage = () => {
 						<DateRangePicker mi='x4' flexGrow={1} onChange={setDateRange} />
 					</Box>
 					<Box>
-						<Overview type={type} dateRange={dateRange} departmentId={department?.value} />
+						<Overview type={type} dateRange={dateRange} departmentId={department} />
 					</Box>
 					<Box display='flex' flexDirection='row'>
 						<Margins inline='x2'>
@@ -90,12 +90,12 @@ const AnalyticsPage = () => {
 							w='66%'
 							h='100%'
 							chartName={chartName}
-							departmentId={department?.value}
+							departmentId={department}
 							dateRange={dateRange}
 							alignSelf='stretch'
 						/>
 						<Box display='flex' w='33%' flexDirection='row' justifyContent='stretch' p='x10' mis='x4'>
-							<AgentOverview type={chartName} dateRange={dateRange} departmentId={department?.value} />
+							<AgentOverview type={chartName} dateRange={dateRange} departmentId={department} />
 						</Box>
 					</Box>
 				</Margins>

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

@@ -35,7 +35,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 	const [guest, setGuest] = useLocalStorage('guest', '');
 	const [servedBy, setServedBy] = useLocalStorage('servedBy', 'all');
 	const [status, setStatus] = useLocalStorage('status', 'all');
-	const [department, setDepartment] = useLocalStorage<{ label: string; value: string }>('department', { value: 'all', label: t('All') });
+	const [department, setDepartment] = useLocalStorage<string>('department', 'all');
 	const [from, setFrom] = useLocalStorage('from', '');
 	const [to, setTo] = useLocalStorage('to', '');
 	const [tags, setTags] = useLocalStorage<never | { label: string; value: string }[]>('tags', []);
@@ -52,7 +52,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 		setGuest('');
 		setServedBy('all');
 		setStatus('all');
-		setDepartment({ value: 'all', label: t('All') });
+		setDepartment('all');
 		setFrom('');
 		setTo('');
 		setTags([]);
@@ -75,7 +75,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 			guest,
 			servedBy,
 			status,
-			department: department?.value && department.value !== 'all' ? department.value : '',
+			department: department && department !== 'all' ? department : '',
 			from: from && moment(new Date(from)).utc().format('YYYY-MM-DDTHH:mm:ss'),
 			to: to && moment(new Date(to)).utc().format('YYYY-MM-DDTHH:mm:ss'),
 			tags: tags.map((tag) => tag.label),

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

@@ -200,8 +200,8 @@ function EditDepartment({ data, id, title, allowedToForwardData }) {
 			visitorInactivityTimeoutInSeconds,
 			abandonedRoomsCloseCustomMessage,
 			waitingQueueMessage,
-			departmentsAllowedToForward: departmentsAllowedToForward?.map((dep) => dep.value).join(),
-			fallbackForwardDepartment: fallbackForwardDepartment.value,
+			departmentsAllowedToForward: departmentsAllowedToForward?.map((dep) => dep.value),
+			fallbackForwardDepartment,
 		};
 
 		const agentListPayload = {

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

@@ -17,10 +17,7 @@ function EditDepartmentWithAllowedForwardData({ data, ...props }) {
 	} = useEndpointData('/v1/livechat/department.listByIds', {
 		params: useMemo(
 			() => ({
-				ids:
-					data && data.department && data.department.departmentsAllowedToForward
-						? data.department.departmentsAllowedToForward.split(',')
-						: [],
+				ids: data?.department?.departmentsAllowedToForward ?? [],
 			}),
 			[data],
 		),

apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx

@@ -21,7 +21,7 @@ export const QueueListFilter: QueueListFilterPropsType = ({ setFilter, ...props
 
 	const [servedBy, setServedBy] = useLocalStorage('servedBy', 'all');
 	const [status, setStatus] = useLocalStorage('status', 'online');
-	const [department, setDepartment] = useLocalStorage<{ label: string; value: string }>('department', { value: 'all', label: t('All') });
+	const [department, setDepartment] = useLocalStorage<string>('department', 'all');
 
 	const handleServedBy = useMutableCallback((e) => setServedBy(e));
 	const handleStatus = useMutableCallback((e) => setStatus(e));
@@ -39,8 +39,8 @@ export const QueueListFilter: QueueListFilterPropsType = ({ setFilter, ...props
 		if (servedBy !== 'all') {
 			filters.servedBy = servedBy;
 		}
-		if (department?.value && department.value !== 'all') {
-			filters.departmentId = department.value;
+		if (department && department !== 'all') {
+			filters.departmentId = department;
 		}
 
 		setFilter(filters);

apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js

@@ -24,15 +24,15 @@ const RealTimeMonitoringPage = () => {
 	const t = useTranslation();
 
 	const [reloadFrequency, setReloadFrequency] = useState(5);
-	const [department, setDepartment] = useState('');
+	const [departmentId, setDepartment] = useState('');
 
 	const reloadRef = useRef({});
 
 	const departmentParams = useMemo(
 		() => ({
-			...(department?.value && { departmentId: department?.value }),
+			...(departmentId && { departmentId }),
 		}),
-		[department],
+		[departmentId],
 	);
 
 	const allParams = useMemo(
@@ -75,7 +75,7 @@ const RealTimeMonitoringPage = () => {
 						<Box maxWidth='50%' display='flex' mi='x4' flexGrow={1} flexDirection='column'>
 							<Label mb='x4'>{t('Departments')}</Label>
 							<AutoCompleteDepartment
-								value={department}
+								value={departmentId}
 								onChange={setDepartment}
 								placeholder={t('All')}
 								label={t('All')}

apps/meteor/ee/app/livechat-enterprise/server/lib/LivechatEnterprise.js

@@ -240,6 +240,7 @@ export const LivechatEnterprise = {
 			requestTagBeforeClosingChat: Match.Optional(Boolean),
 			chatClosingTags: Match.Optional([String]),
 			fallbackForwardDepartment: Match.Optional(String),
+			departmentsAllowedToForward: Match.Optional([String]),
 		};
 
 		// The Livechat Form department support addition/custom fields, so those fields need to be added before validating

apps/meteor/ee/app/models/server/models/LivechatDepartment.js

@@ -24,9 +24,6 @@ overwriteClassOnLicense('livechat-enterprise', LivechatDepartment, {
 		if (args.length > 2 && !args[1].type) {
 			args[1].type = 'd';
 		}
-		if (args[1] && args[1].departmentsAllowedToForward) {
-			args[1].departmentsAllowedToForward = args[1].departmentsAllowedToForward.split(',');
-		}
 
 		return originalFn.apply(this, args);
 	},

apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponseEdit.tsx

@@ -19,7 +19,7 @@ const CannedResponseEdit: FC<{
 	departmentData?: {
 		department: Serialized<ILivechatDepartment>;
 	};
-}> = ({ data, reload, totalDataReload, isNew = false, departmentData = {} }) => {
+}> = ({ data, reload, totalDataReload, isNew = false }) => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const Route = useRoute('omnichannel-canned-responses');
@@ -44,9 +44,7 @@ const CannedResponseEdit: FC<{
 				? data.cannedResponse.tags.map((tag) => ({ label: tag, value: tag }))
 				: [],
 		scope: data ? data.cannedResponse.scope : 'user',
-		departmentId: data?.cannedResponse?.departmentId
-			? { value: data.cannedResponse.departmentId, label: departmentData?.department?.name }
-			: '',
+		departmentId: data?.cannedResponse?.departmentId ? data.cannedResponse.departmentId : '',
 	});
 
 	const { values, handlers, hasUnsavedChanges } = form;
@@ -100,7 +98,7 @@ const CannedResponseEdit: FC<{
 				text: string;
 				scope: string;
 				tags: any;
-				departmentId: { value: string; label: string };
+				departmentId: string;
 			};
 			const mappedTags = tags.map((tag: string | { value: string; label: string }) => (typeof tag === 'object' ? tag?.value : tag));
 			await saveCannedResponse({
@@ -109,7 +107,7 @@ const CannedResponseEdit: FC<{
 				text,
 				scope,
 				...(mappedTags.length > 0 && { tags: mappedTags }),
-				...(departmentId && { departmentId: departmentId.value }),
+				...(departmentId && { departmentId }),
 			});
 			dispatchToastMessage({
 				type: 'success',

apps/meteor/ee/client/omnichannel/components/CannedResponse/modals/CreateCannedResponse/index.tsx

@@ -75,7 +75,7 @@ const WrapCreateCannedResponseModal: FC<{ data?: any; reloadCannedList?: any }>
 				text: string;
 				scope: string;
 				tags: any;
-				departmentId: { value: string; label: string };
+				departmentId: string;
 			};
 			const mappedTags = tags.map((tag: string | { value: string; label: string }) => (typeof tag === 'object' ? tag?.value : tag));
 			await saveCannedResponse({
@@ -84,7 +84,7 @@ const WrapCreateCannedResponseModal: FC<{ data?: any; reloadCannedList?: any }>
 				text,
 				scope,
 				...(tags.length > 0 && { tags: mappedTags }),
-				...(departmentId && { departmentId: departmentId.value }),
+				...(departmentId && { departmentId }),
 			});
 			dispatchToastMessage({
 				type: 'success',

packages/core-typings/src/ILivechatDepartment.ts

@@ -14,6 +14,7 @@ export interface ILivechatDepartment {
 	businessHourId?: string;
 	fallbackForwardDepartment?: string;
 	archived?: boolean;
+	departmentsAllowedToForward?: string[];
 	// extra optional fields
 	[k: string]: any;
 }

packages/core-typings/src/ILivechatDepartmentRecord.ts

@@ -15,6 +15,7 @@ export interface ILivechatDepartmentRecord extends IRocketChatRecord {
 	numAgents: number;
 	businessHourId?: string;
 	fallbackForwardDepartment?: string;
+	departmentsAllowedToForward?: string[];
 	// extra optional fields
 	[k: string]: any;
 }

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

@@ -2,7 +2,6 @@ import type {
 	IOmnichannelCannedResponse,
 	ILivechatAgent,
 	ILivechatDepartment,
-	ILivechatDepartmentRecord,
 	ILivechatDepartmentAgents,
 	ILivechatMonitor,
 	ILivechatTag,
@@ -2938,7 +2937,7 @@ export type OmnichannelEndpoints = {
 	};
 	'/v1/livechat/department/:_id': {
 		GET: (params: LivechatDepartmentId) => {
-			department: ILivechatDepartmentRecord | null;
+			department: ILivechatDepartment | null;
 			agents?: ILivechatDepartmentAgents[];
 		};
 		PUT: (params: { department: Partial<ILivechatDepartment>[]; agents: any[] }) => {