[FIX] Selecting the same department for multiple units (#19168)

ee/client/omnichannel/units/EditUnit.js

@@ -12,7 +12,7 @@ import { useForm } from '../../../../client/hooks/useForm';
 import { useRoute } from '../../../../client/contexts/RouterContext';
 
 
-export function UnitEditWithData({ unitId, reload }) {
+export function UnitEditWithData({ unitId, reload, allUnits }) {
 	const query = useMemo(() => ({ unitId }), [unitId]);
 	const { data, state, error } = useEndpointDataExperimental('livechat/units.getOne', query);
 	const { data: availableDepartments, state: availableDepartmentsState, error: availableDepartmentsError } = useEndpointDataExperimental('livechat/department');
@@ -29,16 +29,19 @@ export function UnitEditWithData({ unitId, reload }) {
 		return <Callout m='x16' type='danger'>{t('Not_Available')}</Callout>;
 	}
 
+	const filteredDepartments = { departments: availableDepartments.departments.filter((department) => !allUnits || !allUnits.units || !department.ancestors || department.ancestors[0] === unitId || !allUnits.units.find((unit) => unit._id === department.ancestors[0])) };
+
+
 	return <UnitEdit
 		unitId={unitId}
 		data={data}
-		availableDepartments={availableDepartments}
+		availableDepartments={filteredDepartments}
 		availableMonitors={availableMonitors}
 		unitMonitors={unitMonitors}
 		reload={reload}/>;
 }
 
-export function UnitNew({ reload }) {
+export function UnitNew({ reload, allUnits }) {
 	const t = useTranslation();
 
 	const { data: availableDepartments, state: availableDepartmentsState, error: availableDepartmentsError } = useEndpointDataExperimental('livechat/department');
@@ -52,7 +55,8 @@ export function UnitNew({ reload }) {
 		return <Box mbs='x16'>{t('Not_found')}</Box>;
 	}
 
-	return <UnitEdit reload={reload} isNew availableDepartments={availableDepartments} availableMonitors={availableMonitors}/>;
+	const filteredDepartments = { departments: availableDepartments.departments.filter((department) => !allUnits || !allUnits.units || !department.ancestors || !allUnits.units.find((unit) => unit._id === department.ancestors[0])) };
+	return <UnitEdit reload={reload} isNew availableDepartments={filteredDepartments} availableMonitors={availableMonitors}/>;
 }
 
 export function UnitEdit({ data, unitId, isNew, availableDepartments, availableMonitors, unitMonitors, reload, ...props }) {
@@ -89,10 +93,10 @@ export function UnitEdit({ data, unitId, isNew, availableDepartments, availableM
 		monitors,
 	} = values;
 
-	const nameError = useMemo(() => (!name || name.length === 0 ? t('The_field_is_required', 'name') : undefined), [name, t]);
-	const visibilityError = useMemo(() => (!visibility || visibility.length === 0 ? t('The_field_is_required', 'description') : undefined), [visibility, t]);
-	const departmentError = useMemo(() => (!departments || departments.length === 0 ? t('The_field_is_required', 'departments') : undefined), [departments, t]);
-	const unitMonitorsError = useMemo(() => (!monitors || monitors.length === 0 ? t('The_field_is_required', 'monitors') : undefined), [monitors, t]);
+	const nameError = useMemo(() => (!name || name.length === 0 ? t('The_field_is_required', t('name')) : undefined), [name, t]);
+	const visibilityError = useMemo(() => (!visibility || visibility.length === 0 ? t('The_field_is_required', t('description')) : undefined), [visibility, t]);
+	const departmentError = useMemo(() => (!departments || departments.length === 0 ? t('The_field_is_required', t('departments')) : undefined), [departments, t]);
+	const unitMonitorsError = useMemo(() => (!monitors || monitors.length === 0 ? t('The_field_is_required', t('monitors')) : undefined), [monitors, t]);
 
 	const saveUnit = useMethod('livechat:saveUnit');
 

ee/client/omnichannel/units/UnitsRoute.js

@@ -127,11 +127,11 @@ function UnitsRoute() {
 				<VerticalBar.Close onClick={handleVerticalBarCloseButtonClick} />
 			</VerticalBar.Header>
 
-			{context === 'edit' && <UnitEditWithData unitId={id} reload={reload}/>}
-			{context === 'new' && <UnitNew reload={reload} />}
+			{context === 'edit' && <UnitEditWithData unitId={id} reload={reload} allUnits={data} />}
+			{context === 'new' && <UnitNew reload={reload} allUnits={data} />}
 
 		</VerticalBar>;
-	}, [t, context, id, unitsRoute, reload]);
+	}, [t, context, id, unitsRoute, reload, data]);
 
 	if (!canViewUnits) {
 		return <NotAuthorizedPage />;