fix(Omnichannel): Omnichannel agent take it button

.changeset/forty-ghosts-flow.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed "Take it" button behavior disabling it when agent status is set to offline

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelInquiry.tsx

@@ -1,21 +1,25 @@
 import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
-import { useEndpoint, useMethod, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useMethod, useToastMessageDispatch, useTranslation, useUser } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useOmnichannelAgentAvailable } from '../../../../hooks/omnichannel/useOmnichannelAgentAvailable';
 import { useOmnichannelRoom } from '../../contexts/RoomContext';
 
 export const ComposerOmnichannelInquiry = (): ReactElement => {
+	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
-
+	const user = useUser();
+	const agentAvailable = useOmnichannelAgentAvailable();
 	const room = useOmnichannelRoom();
 	const getInquire = useEndpoint('GET', `/v1/livechat/inquiries.getOne`);
 	const result = useQuery(['inquire', room._id], () =>
 		getInquire({
 			roomId: room._id,
 		}),
 	);
+
 	const takeInquiry = useMethod('livechat:takeInquiry');
 
 	const handleTakeInquiry = async (): Promise<void> => {
@@ -32,11 +36,24 @@ export const ComposerOmnichannelInquiry = (): ReactElement => {
 		}
 	};
 
-	const t = useTranslation();
+	const title = useMemo(() => {
+		if (user?.status === 'offline') {
+			return t('meteor_status_offline');
+		}
+
+		if (!agentAvailable) {
+			return t('Youre_unavailable');
+		}
+	}, [agentAvailable, t, user?.status]);
+
 	return (
 		<MessageFooterCallout aria-busy={result.isLoading}>
 			<MessageFooterCalloutContent>{t('you_are_in_preview_mode_of_incoming_livechat')}</MessageFooterCalloutContent>
-			<MessageFooterCalloutAction disabled={result.isLoading} onClick={handleTakeInquiry}>
+			<MessageFooterCalloutAction
+				{...(title && { title })}
+				disabled={result.isLoading || user?.status === 'offline' || !agentAvailable}
+				onClick={handleTakeInquiry}
+			>
 				{t('Take_it')}
 			</MessageFooterCalloutAction>
 		</MessageFooterCallout>

apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts

@@ -20,7 +20,7 @@ const getRoomId = (page: Page): string => {
 	return rid;
 };
 
-test.describe('omnichannel-changing-room-priority-and-sla', () => {
+test.describe.serial('omnichannel-changing-room-priority-and-sla', () => {
 	test.skip(!IS_EE, 'Enterprise Only');
 
 	let poLiveChat: OmnichannelLiveChat;
@@ -69,7 +69,7 @@ test.describe('omnichannel-changing-room-priority-and-sla', () => {
 		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
 		await poLiveChat.btnSendMessageToOnlineAgent.click();
 
-		await agent.poHomeChannel.sidenav.openQueuedOmnichannelChat(newVisitor.name);
+		await agent.poHomeChannel.sidenav.getQueuedChat(newVisitor.name).click();
 	});
 
 	test('expect to change priority of room and corresponding system message should be displayed', async ({ api }) => {

apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts

@@ -48,7 +48,7 @@ test.describe('Omnichannel close inquiry', () => {
 		});
 
 		await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => {
-			await agent.poHomeOmnichannel.sidenav.openQueuedOmnichannelChat(newUser.name);
+			await agent.poHomeOmnichannel.sidenav.getQueuedChat(newUser.name).click();
 			await expect(agent.poHomeOmnichannel.content.btnTakeChat).toBeVisible();
 		});
 

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

@@ -12,6 +12,13 @@ test.describe('omnichannel-takeChat', () => {
 
 	let agent: { page: Page; poHomeChannel: HomeOmnichannel };
 
+	const sendLivechatMessage = async () => {
+		await poLiveChat.openLiveChat();
+		await poLiveChat.sendMessage(newVisitor, false);
+		await poLiveChat.onlineAgentMessage.fill('this_a_test_message_from_user');
+		await poLiveChat.btnSendMessageToOnlineAgent.click();
+	};
+
 	test.beforeAll(async ({ api, browser }) => {
 		await Promise.all([
 			await api.post('/livechat/users/agent', { username: 'user1' }).then((res) => expect(res.status()).toBe(200)),
@@ -24,51 +31,66 @@ test.describe('omnichannel-takeChat', () => {
 	});
 
 	test.afterAll(async ({ api }) => {
+		await agent.poHomeChannel.sidenav.switchOmnichannelStatus('online');
+		await agent.poHomeChannel.sidenav.switchStatus('online');
+
 		await Promise.all([
-			await api.post('/settings/Livechat_Routing_Method', { value: 'Auto_Selection' }).then((res) => expect(res.status()).toBe(200)),
-			await api.post('/settings/Livechat_enabled_when_agent_idle', { value: false }).then((res) => expect(res.status()).toBe(200)),
 			await api.delete('/livechat/users/agent/user1').then((res) => expect(res.status()).toBe(200)),
+			await api.post('/settings/Livechat_Routing_Method', { value: 'Auto_Selection' }).then((res) => expect(res.status()).toBe(200)),
+			await api.post('/settings/Livechat_enabled_when_agent_idle', { value: true }).then((res) => expect(res.status()).toBe(200)),
 		]);
 
 		await agent.page.close();
 	});
 
-	test.beforeEach(async ({ page, api }) => {
-		// make "user-1" online
+	test.beforeEach('start a new livechat chat', async ({ page, api }) => {
 		await agent.poHomeChannel.sidenav.switchStatus('online');
 
-		// start a new chat for each test
 		newVisitor = {
 			name: `${faker.person.firstName()} ${faker.string.uuid()}`,
 			email: faker.internet.email(),
 		};
+
 		poLiveChat = new OmnichannelLiveChat(page, api);
+
 		await page.goto('/livechat');
-		await poLiveChat.openLiveChat();
-		await poLiveChat.sendMessage(newVisitor, false);
-		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
-		await poLiveChat.btnSendMessageToOnlineAgent.click();
 	});
 
-	test('expect "user1" to be able to take the chat from the queue', async () => {
-		await agent.poHomeChannel.sidenav.openQueuedOmnichannelChat(newVisitor.name);
+	test('When agent is online should take the chat', async () => {
+		await sendLivechatMessage();
+
+		await agent.poHomeChannel.sidenav.getQueuedChat(newVisitor.name).click();
+
 		await expect(agent.poHomeChannel.content.btnTakeChat).toBeVisible();
-		await agent.poHomeChannel.content.btnTakeChat.click();
 
+		await agent.poHomeChannel.content.btnTakeChat.click();
 		await agent.poHomeChannel.sidenav.openChat(newVisitor.name);
+
 		await expect(agent.poHomeChannel.content.btnTakeChat).not.toBeVisible();
 		await expect(agent.poHomeChannel.content.inputMessage).toBeVisible();
+
+		await poLiveChat.closeChat();
 	});
 
-	test('expect "user1" to not able able to take chat from queue in-case its user status is offline', async () => {
-		// make "user-1" offline
+	test('When agent is offline should not take the chat', async () => {
 		await agent.poHomeChannel.sidenav.switchStatus('offline');
 
-		await agent.poHomeChannel.sidenav.openQueuedOmnichannelChat(newVisitor.name);
-		await expect(agent.poHomeChannel.content.btnTakeChat).toBeVisible();
-		await agent.poHomeChannel.content.btnTakeChat.click();
+		await sendLivechatMessage();
+
+		await expect(poLiveChat.alertMessage('Error starting a new conversation: Sorry, no online agents [no-agent-online]')).toBeVisible();
+	});
+
+	test('When a new livechat conversation starts but agent is offline, it should not be able to take the chat', async () => {
+		await sendLivechatMessage();
+
+		await agent.poHomeChannel.sidenav.switchStatus('offline');
+		await agent.poHomeChannel.sidenav.getQueuedChat(newVisitor.name).click();
+
+		await expect(agent.poHomeChannel.content.btnTakeChat).toBeDisabled();
+
+		await agent.poHomeChannel.sidenav.switchStatus('online');
+		await agent.poHomeChannel.sidenav.switchOmnichannelStatus('offline');
 
-		// expect to see error message
-		await expect(agent.page.locator('text=Agent status is offline or Omnichannel service is not active')).toBeVisible();
+		await expect(agent.poHomeChannel.content.btnTakeChat).toBeDisabled();
 	});
 });

apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts

@@ -49,6 +49,11 @@ export class HomeSidenav {
 		return this.page.getByRole('toolbar', { name: 'Sidebar actions' });
 	}
 
+	// Note: this is different from openChat because queued chats are not searchable
+	getQueuedChat(name: string): Locator {
+		return this.page.locator('[data-qa="sidebar-item-title"]', { hasText: name }).first();
+	}
+
 	getSidebarItemByName(name: string): Locator {
 		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`);
 	}
@@ -129,11 +134,6 @@ export class HomeSidenav {
 		expect(newStatus).toBe(status === 'offline' ? StatusTitleMap.offline : StatusTitleMap.online);
 	}
 
-	// Note: this is a workaround for now since queued omnichannel chats are not searchable yet so we can't use openChat() :(
-	async openQueuedOmnichannelChat(name: string): Promise<void> {
-		await this.page.locator('[data-qa="sidebar-item-title"]', { hasText: name }).first().click();
-	}
-
 	async createPublicChannel(name: string) {
 		await this.openNewByLabel('Channel');
 		await this.checkboxPrivateChannel.click();

apps/meteor/tests/e2e/page-objects/omnichannel-livechat.ts

@@ -169,7 +169,7 @@ export class OmnichannelLiveChat {
 	): Promise<void> {
 		await this.openAnyLiveChat();
 		await this.sendMessage(liveChatUser, false);
-		await this.onlineAgentMessage.type(message);
+		await this.onlineAgentMessage.fill(message);
 		await this.btnSendMessageToOnlineAgent.click();
 		await expect(this.txtChatMessage(message)).toBeVisible();
 		await this.closeChat();

packages/i18n/src/locales/en.i18n.json

@@ -6419,5 +6419,6 @@
   "Close_gallery": "Close gallery",
   "Next_image": "Next Image",
   "Previous_image": "Previous image",
-  "Image_gallery": "Image gallery"
+  "Image_gallery": "Image gallery",
+  "Youre_unavailable": "You’re unavailable"
 }