Regression: Quick action button missing for Omnichannel On-Hold queue (…

…#21285) * Move manual OnHold button to header + Minor fixes * Move On Hold client files to ee folder * Cleanup * Move Visitor abandoment setting to EE * Add new on-hold icon * Fix settings. * Fix setting file. Co-authored-by: Renato Becker <[email protected]>
RocketChat · Mar 31, 2021 · cca963a · cca963a
1 parent 85e9cf3
commit cca963a
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 60 deletions.
diff --git a/client/contexts/ServerContext/endpoints.ts b/client/contexts/ServerContext/endpoints.ts
@@ -15,6 +15,7 @@ import { ListEndpoint as EmojiCustomListEndpoint } from './endpoints/v1/emoji-cu
 import { GetDiscussionsEndpoint as ChatGetDiscussionsEndpoint } from './endpoints/v1/chat/getDiscussions';
 import { GetThreadsListEndpoint as ChatGetThreadsListEndpoint } from './endpoints/v1/chat/getThreadsList';
 import { LivechatVisitorInfoEndpoint } from './endpoints/v1/livechat/visitorInfo';
+import { LivechatRoomOnHoldEndpoint } from './endpoints/v1/livechat/onHold';
 
 export type ServerEndpoints = {
 	'chat.getMessage': ChatGetMessageEndpoint;
@@ -34,6 +35,7 @@ export type ServerEndpoints = {
 	'rooms.autocomplete.channelAndPrivate': RoomsAutocompleteEndpoint;
 	'teams.addRooms': TeamsAddRoomsEndpoint;
 	'livechat/visitors.info': LivechatVisitorInfoEndpoint;
+	'livechat/room.onHold': LivechatRoomOnHoldEndpoint;
 };
 
 export type ServerEndpointPath = keyof ServerEndpoints;

diff --git a/client/contexts/ServerContext/endpoints/v1/livechat/onHold.ts b/client/contexts/ServerContext/endpoints/v1/livechat/onHold.ts
@@ -0,0 +1,5 @@
+export type LivechatRoomOnHoldEndpoint = {
+	POST: (roomId: string) => {
+		success: boolean;
+	};
+};
diff --git a/client/providers/OmniChannelProvider.tsx b/client/providers/OmniChannelProvider.tsx
@@ -96,6 +96,7 @@ const OmnichannelEnabledProvider: FC = ({ children }) => {
 		setContextValue((context) => ({
 			...context,
 			agentAvailable: user?.statusLivechat === 'available',
+			...routeConfig && { routeConfig },
 		}));
 	}, [user?.statusLivechat, routeConfig]);
 

diff --git a/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx b/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx
@@ -21,6 +21,8 @@ import { useAtLeastOnePermission, usePermission, useRole } from '../../../../../
 import { useUserId } from '../../../../../contexts/UserContext';
 import { useOmnichannelRouteConfig } from '../../../../../contexts/OmnichannelContext';
 import { useEndpoint, useMethod } from '../../../../../contexts/ServerContext';
+import { useSetting } from '../../../../../contexts/SettingsContext';
+import PlaceChatOnHoldModal from '../../../../../../ee/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal';
 
 
 const QuickActions = ({ room, className }: { room: IRoom; className: BoxProps['className'] }): JSX.Element => {
@@ -137,6 +139,18 @@ const QuickActions = ({ room, className }: { room: IRoom; className: BoxProps['c
 		}
 	}, [closeChat, closeModal, rid, t]);
 
+	const onHoldChat = useEndpoint('POST', 'livechat/room.onHold');
+
+	const handleOnHoldChat = useCallback(async () => {
+		try {
+			await onHoldChat({ roomId: rid } as any);
+			closeModal();
+			toastr.success(t('Chat_On_Hold_Successfully'));
+		} catch (error) {
+			handleError(error);
+		}
+	}, [onHoldChat, closeModal, rid, t]);
+
 	const openModal = useMutableCallback((id: string) => {
 		switch (id) {
 			case QuickActionsEnum.MoveQueue:
@@ -151,6 +165,9 @@ const QuickActions = ({ room, className }: { room: IRoom; className: BoxProps['c
 			case QuickActionsEnum.CloseChat:
 				setModal(<CloseChatModal onConfirm={handleClose} onCancel={closeModal} />);
 				break;
+			case QuickActionsEnum.OnHoldChat:
+				setModal(<PlaceChatOnHoldModal onOnHoldChat={handleOnHoldChat} onCancel={closeModal} />);
+				break;
 			default:
 				break;
 		}
@@ -162,6 +179,8 @@ const QuickActions = ({ room, className }: { room: IRoom; className: BoxProps['c
 		openModal(id);
 	});
 
+	const manualOnHoldAllowed = useSetting('Livechat_allow_manual_on_hold');
+
 	const hasManagerRole = useRole('livechat-manager');
 
 	const roomOpen = room && room.open && ((room.servedBy && room.servedBy._id === uid) || hasManagerRole);
@@ -172,6 +191,8 @@ const QuickActions = ({ room, className }: { room: IRoom; className: BoxProps['c
 
 	const canCloseRoom = usePermission('close-others-livechat-room');
 
+	const canPlaceChatOnHold = (!room.onHold && room.u && !(room as any).lastMessage?.token && manualOnHoldAllowed) as boolean;
+
 	const omnichannelRouteConfig = useOmnichannelRouteConfig();
 
 	const hasPermissionButtons = (id: string): boolean => {
@@ -184,6 +205,8 @@ const QuickActions = ({ room, className }: { room: IRoom; className: BoxProps['c
 				return !!email && canSendTranscript;
 			case QuickActionsEnum.CloseChat:
 				return !!roomOpen && canCloseRoom;
+			case QuickActionsEnum.OnHoldChat:
+				return !!roomOpen && canPlaceChatOnHold;
 			default:
 				break;
 		}

diff --git a/client/views/room/lib/QuickActions/index.tsx b/client/views/room/lib/QuickActions/index.tsx
@@ -43,5 +43,6 @@ export enum QuickActionsEnum {
 	MoveQueue = 'rocket-move-to-queue',
 	ChatForward = 'rocket-chat-forward',
 	Transcript = 'rocket-transcript',
-	CloseChat = 'rocket-close-chat'
+	CloseChat = 'rocket-close-chat',
+	OnHoldChat = 'rocket-on-hold-chat',
 }
diff --git a/ee/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx b/ee/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx
@@ -0,0 +1,40 @@
+import { Box, Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+import { useTranslation } from '../../../../../../client/contexts/TranslationContext';
+import { RequiredModalProps } from '../../../../../../client/components/withDoNotAskAgain';
+
+type PlaceChatOnHoldModalProps = RequiredModalProps & {
+	onOnHoldChat: () => void;
+	onCancel: () => void;
+};
+
+const PlaceChatOnHoldModal: FC<PlaceChatOnHoldModalProps> = ({
+	onCancel,
+	onOnHoldChat,
+	confirm = onOnHoldChat,
+	...props
+}) => {
+	const t = useTranslation();
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='pause-unfilled' size={20}/>
+			<Modal.Title>{t('Livechat_onHold_Chat')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{t('Would_you_like_to_place_chat_on_hold')}
+		</Modal.Content>
+		<Modal.Footer>
+			<Box>
+				<ButtonGroup align='end'>
+					<Button onClick={onCancel}>{t('Cancel')}</Button>
+					<Button primary onClick={confirm}>{t('Livechat_onHold_Chat')}</Button>
+				</ButtonGroup>
+			</Box>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default PlaceChatOnHoldModal;
diff --git a/ee/app/livechat-enterprise/client/index.js b/ee/app/livechat-enterprise/client/index.js
@@ -11,4 +11,5 @@ hasLicense('livechat-enterprise').then((enabled) => {
 	require('./views/app/registerCustomTemplates');
 	require('./views/livechatSideNavItems');
 	require('./views/business-hours/Multiple');
+	require('../lib/QuickActions/defaultActions');
 });
diff --git a/ee/app/livechat-enterprise/lib/QuickActions/defaultActions.ts b/ee/app/livechat-enterprise/lib/QuickActions/defaultActions.ts
@@ -0,0 +1,9 @@
+import { addAction, QuickActionsEnum } from '../../../../../client/views/room/lib/QuickActions';
+
+addAction(QuickActionsEnum.OnHoldChat, {
+	groups: ['live'],
+	id: QuickActionsEnum.OnHoldChat,
+	title: 'Livechat_onHold_Chat',
+	icon: 'pause-unfilled',
+	order: 5,
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
 		"@babel/register": "^7.12.1",
 		"@octokit/rest": "^16.43.2",
 		"@rocket.chat/eslint-config": "^0.3.0",
-		"@rocket.chat/icons": "^0.6.3-dev.202",
+		"@rocket.chat/icons": "^0.6.3-dev.206",
 		"@rocket.chat/livechat": "^1.9.0",
 		"@settlin/spacebars-loader": "^1.0.8",
 		"@storybook/addon-essentials": "^6.1.11",
@@ -138,15 +138,15 @@
 		"@nivo/line": "^0.61.1",
 		"@nivo/pie": "^0.61.1",
 		"@rocket.chat/apps-engine": "1.24.0-alpha.4777",
-		"@rocket.chat/css-in-js": "^0.6.3-dev.180",
-		"@rocket.chat/emitter": "^0.6.3-dev.185",
-		"@rocket.chat/fuselage": "^0.6.3-dev.203",
-		"@rocket.chat/fuselage-hooks": "^0.6.3-dev.178",
-		"@rocket.chat/fuselage-polyfills": "^0.6.3-dev.181",
+		"@rocket.chat/css-in-js": "^0.6.3-dev.205",
+		"@rocket.chat/emitter": "^0.6.3-dev.205",
+		"@rocket.chat/fuselage": "^0.6.3-dev.206",
+		"@rocket.chat/fuselage-hooks": "^0.6.3-dev.205",
+		"@rocket.chat/fuselage-polyfills": "^0.22.1-dev.0",
 		"@rocket.chat/fuselage-tokens": "^0.21.0",
-		"@rocket.chat/fuselage-ui-kit": "^0.6.3-dev.184",
-		"@rocket.chat/mp3-encoder": "^0.6.3-dev.178",
-		"@rocket.chat/ui-kit": "^0.6.3-dev.178",
+		"@rocket.chat/fuselage-ui-kit": "^0.6.3-dev.206",
+		"@rocket.chat/mp3-encoder": "^0.6.3-dev.205",
+		"@rocket.chat/ui-kit": "^0.6.3-dev.205",
 		"@slack/client": "^4.12.0",
 		"@types/dompurify": "^2.2.1",
 		"@types/fibers": "^3.1.0",

diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -2573,7 +2573,7 @@
   "Mailing": "Mailing",
   "Make_Admin": "Make Admin",
   "Make_sure_you_have_a_copy_of_your_codes_1": "Make sure you have a copy of your codes:",
-  "Make_sure_you_have_a_copy_of_your_codes_2": "If you lose access to your authenticator app, you can use one of these codes to log in.",  
+  "Make_sure_you_have_a_copy_of_your_codes_2": "If you lose access to your authenticator app, you can use one of these codes to log in.",
   "manage-apps": "Manage Apps",
   "manage-apps_description": "Permission to manage all apps",
   "manage-assets": "Manage Assets",