[FIX] Save edited tags for omnichannel departments

.vscode/settings.json

@@ -14,5 +14,10 @@
 		}
 	],
 	"typescript.tsdk": "./node_modules/typescript/lib",
-	"cSpell.words": ["photoswipe", "tmid"]
+	"cSpell.words": [
+		"livechat",
+		"omnichannel",
+		"photoswipe",
+		"tmid"
+	]
 }

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

@@ -59,6 +59,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 	const { department } = data || { department: {} };
 
 	const [[tags, tagsText], setTagsState] = useState(() => [department?.chatClosingTags ?? [], '']);
+	const [newTagsState, setNewTagsState] = useState(false);
 
 	const { values, handlers, hasUnsavedChanges } = useForm({
 		name: withDefault(department?.name, ''),
@@ -118,6 +119,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 
 	const handleTagChipClick = (tag) => () => {
 		setTagsState(([tags, tagsText]) => [tags.filter((_tag) => _tag !== tag), tagsText]);
+		setNewTagsState(true);
 	};
 
 	const handleTagTextSubmit = useMutableCallback(() => {
@@ -130,6 +132,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 
 			return [[...tags, tagsText], ''];
 		});
+		setNewTagsState(true);
 	});
 
 	const handleTagTextChange = (e) => {
@@ -271,7 +274,12 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 						<Button onClick={handleReturn}>
 							<Icon name='back' /> {t('Back')}
 						</Button>
-						<Button type='submit' form={formId} primary disabled={invalidForm && hasNewAgent && !(id && agentsHaveChanged())}>
+						<Button
+							type='submit'
+							form={formId}
+							primary
+							disabled={invalidForm && hasNewAgent && !newTagsState && !(id && agentsHaveChanged())}
+						>
 							{t('Save')}
 						</Button>
 					</ButtonGroup>
@@ -441,7 +449,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 										onChange={handleTagTextChange}
 										placeholder={t('Enter_a_tag')}
 									/>
-									<Button mis='x8' title={t('add')} onClick={handleTagTextSubmit}>
+									<Button data-qa='DepartmentEditAddButton-ConversationClosingTags' mis='x8' title={t('add')} onClick={handleTagTextSubmit}>
 										{t('Add')}
 									</Button>
 								</Field.Row>

apps/meteor/tests/e2e/omnichannel-departaments.spec.ts

@@ -1,51 +1,64 @@
 import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
 
 import { test, expect } from './utils/test';
-import { OmnichannelDepartaments } from './page-objects';
+import { OmnichannelDepartments } from './page-objects';
 
 test.use({ storageState: 'admin-session.json' });
 
-test.describe.serial('omnichannel-departaments', () => {
-	let poOmnichannelDepartaments: OmnichannelDepartaments;
+test.describe.serial('omnichannel-departments', () => {
+	let poOmnichannelDepartments: OmnichannelDepartments;
 
 	const departmentName = faker.datatype.uuid();
 
-	test.beforeEach(async ({ page }) => {
-		poOmnichannelDepartaments = new OmnichannelDepartaments(page);
+	test.beforeEach(async ({ page }: { page: Page }) => {
+		poOmnichannelDepartments = new OmnichannelDepartments(page);
 
 		await page.goto('/omnichannel');
-		await poOmnichannelDepartaments.sidenav.linkDepartments.click();
+		await poOmnichannelDepartments.sidenav.linkDepartments.click();
 	});
 
 	test('expect create new department', async () => {
-		await poOmnichannelDepartaments.btnNew.click();
-		await poOmnichannelDepartaments.btnEnabled.click();
-		await poOmnichannelDepartaments.inputName.fill(departmentName);
-		await poOmnichannelDepartaments.inputEmail.fill(faker.internet.email());
-		await poOmnichannelDepartaments.btnSave.click();
-
-		await poOmnichannelDepartaments.inputSearch.fill(departmentName);
-		await expect(poOmnichannelDepartaments.firstRowInTable).toBeVisible();
+		await poOmnichannelDepartments.btnNew.click();
+		await poOmnichannelDepartments.btnEnabled.click();
+		await poOmnichannelDepartments.inputName.fill(departmentName);
+		await poOmnichannelDepartments.inputEmail.fill(faker.internet.email());
+		await poOmnichannelDepartments.btnSave.click();
+
+		await poOmnichannelDepartments.inputSearch.fill(departmentName);
+		await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
 	});
 
 	test('expect update department name', async () => {
-		await poOmnichannelDepartaments.inputSearch.fill(departmentName);
+		await poOmnichannelDepartments.inputSearch.fill(departmentName);
+
+		await poOmnichannelDepartments.firstRowInTable.locator(`text=${departmentName}`).click();
+		await poOmnichannelDepartments.inputName.fill(`edited-${departmentName}`);
+		await poOmnichannelDepartments.btnSave.click();
+
+		await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);
+		await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
+	});
+
+	test('expect update adding department tags ', async () => {
+		await poOmnichannelDepartments.inputSearch.fill(departmentName);
+
+		await poOmnichannelDepartments.firstRowInTable.locator(`text=${departmentName}`).click();
+		await poOmnichannelDepartments.toggleRequestTags.click();
 
-		await poOmnichannelDepartaments.firstRowInTable.locator(`text=${departmentName}`).click();
-		await poOmnichannelDepartaments.inputName.fill(`edited-${departmentName}`);
-		await poOmnichannelDepartaments.btnSave.click();
+		await poOmnichannelDepartments.inputTags.fill(faker.datatype.string(5));
+		await poOmnichannelDepartments.btnTagsAdd.click();
 
-		await poOmnichannelDepartaments.inputSearch.fill(`edited-${departmentName}`);
-		await expect(poOmnichannelDepartaments.firstRowInTable).toBeVisible();
+		await poOmnichannelDepartments.btnSave.click();
 	});
 
 	test('expect delete department', async () => {
-		await poOmnichannelDepartaments.inputSearch.fill(`edited-${departmentName}`);
+		await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);
 
-		await poOmnichannelDepartaments.btnDeletefirstRowInTable.click();
-		await poOmnichannelDepartaments.btnModalConfirmDelete.click();
+		await poOmnichannelDepartments.btnDeleteFirstRowInTable.click();
+		await poOmnichannelDepartments.btnModalConfirmDelete.click();
 
-		await poOmnichannelDepartaments.inputSearch.fill(`edited-${departmentName}`);
-		await expect(poOmnichannelDepartaments.firstRowInTable).toBeHidden();
+		await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);
+		await expect(poOmnichannelDepartments.firstRowInTable).toBeHidden();
 	});
 });

apps/meteor/tests/e2e/page-objects/index.ts

@@ -5,5 +5,5 @@ export * from './auth';
 export * from './home-channel';
 export * from './home-discussion';
 export * from './omnichannel-agents';
-export * from './omnichannel-departaments';
+export * from './omnichannel-departments';
 export * from './omnichannel-livechat';

apps/meteor/tests/e2e/page-objects/omnichannel-departaments.ts → apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts

@@ -2,7 +2,7 @@ import type { Page } from '@playwright/test';
 
 import { OmnichannelSidenav } from './fragments';
 
-export class OmnichannelDepartaments {
+export class OmnichannelDepartments {
 	private readonly page: Page;
 
 	readonly sidenav: OmnichannelSidenav;
@@ -32,6 +32,18 @@ export class OmnichannelDepartaments {
 		return this.page.locator('[data-qa="DepartmentEditTextInput-Email"]');
 	}
 
+	get toggleRequestTags() {
+		return this.page.locator('[data-qa="DiscussionToggle-RequestTagBeforeCLosingChat"] span label');
+	}
+
+	get inputTags() {
+		return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]');
+	}
+
+	get btnTagsAdd() {
+		return this.page.locator('[data-qa="DepartmentEditAddButton-ConversationClosingTags"]');
+	}
+
 	get btnSave() {
 		return this.page.locator('button.rcx-button--primary.rcx-button >> text="Save"');
 	}
@@ -40,7 +52,7 @@ export class OmnichannelDepartaments {
 		return this.page.locator('table tr:first-child td:first-child');
 	}
 
-	get btnDeletefirstRowInTable() {
+	get btnDeleteFirstRowInTable() {
 		return this.page.locator('table tr:first-child td:nth-child(6) button');
 	}