[IMPROVE] Support for tag request close when is obligatory to close Omnichannel's Channel

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import { CustomIcon, TIconsName } from '../../CustomIcon';
 import i18n from '../../../i18n';
@@ -9,6 +10,7 @@ import sharedStyles from '../../../views/Styles';
 import Button from '../../Button';
 import { FormTextInput } from '../../TextInput/FormTextInput';
 import { useActionSheet } from '../Provider';
+import { MultiSelect } from '../../UIKit/MultiSelect';
 
 const styles = StyleSheet.create({
 	subtitleText: {
@@ -76,9 +78,11 @@ const ActionSheetContentWithInputAndSubmit = ({
 	iconColor,
 	customText,
 	confirmBackgroundColor,
-	showInput = true
+	showInput = true,
+	selectTags,
+	options
 }: {
-	onSubmit: (inputValue: string) => void;
+	onSubmit: (inputValue: string, tags?: string[]) => void;
 	onCancel?: () => void;
 	title: string;
 	description: string;
@@ -91,11 +95,25 @@ const ActionSheetContentWithInputAndSubmit = ({
 	customText?: React.ReactElement;
 	confirmBackgroundColor?: string;
 	showInput?: boolean;
+	selectTags?: boolean;
+	options?: string[];
 }): React.ReactElement => {
 	const { colors } = useTheme();
 	const [inputValue, setInputValue] = useState('');
+	const [tagParamSelected, setTagParamSelected] = useState<string[]>([]);
+	const [canSubmit, setCanSubmit] = useState(false);
 	const { hideActionSheet } = useActionSheet();
 
+	useEffect(() => {
+		if (!selectTags && !!inputValue) {
+			setCanSubmit(true);
+		}
+
+		if (selectTags && !!inputValue && tagParamSelected.length > 0) {
+			setCanSubmit(true);
+		}
+	}, [inputValue, tagParamSelected]);
+
 	return (
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
@@ -114,25 +132,44 @@ const ActionSheetContentWithInputAndSubmit = ({
 					placeholder={placeholder}
 					onChangeText={value => setInputValue(value)}
 					onSubmitEditing={() => {
-						// fix android animation
-						setTimeout(() => {
-							hideActionSheet();
-						}, 100);
-						if (inputValue) onSubmit(inputValue);
+						if (canSubmit) {
+							// fix android animation
+							setTimeout(() => {
+								hideActionSheet();
+							}, 100);
+
+							onSubmit(inputValue, tagParamSelected);
+						}
 					}}
 					testID={testID}
 					secureTextEntry={secureTextEntry}
 					inputStyle={{ borderWidth: 2 }}
 					bottomSheet={isIOS}
 				/>
 			) : null}
+			{selectTags ? (
+				<>
+					<Text style={[styles.subtitleText, { color: colors.titleText }]}>{i18n.t('Tags')}</Text>
+					<MultiSelect
+						options={options?.map((tag: string) => ({ text: { text: tag }, value: tag }))}
+						onChange={({ value }: { value: string[] }) => {
+							setTagParamSelected([...value]);
+						}}
+						placeholder={{ text: i18n.t('Select_an_option') }}
+						value={tagParamSelected}
+						context={BlockContext.FORM}
+						multiselect
+						inputStyle={{ borderColor: colors.separatorColor, borderWidth: 2 }}
+					/>
+				</>
+			) : null}
 			<FooterButtons
 				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
 				cancelAction={onCancel || hideActionSheet}
-				confirmAction={() => onSubmit(inputValue)}
+				confirmAction={() => onSubmit(inputValue, tagParamSelected)}
 				cancelTitle={i18n.t('Cancel')}
 				confirmTitle={confirmTitle || i18n.t('Save')}
-				disabled={!showInput ? false : !inputValue}
+				disabled={!showInput ? false : !canSubmit}
 			/>
 		</View>
 	);

app/ee/omnichannel/containers/CloseLivechatSheet/index.tsx

@@ -5,10 +5,14 @@ import I18n from '../../../../i18n';
 
 const CloseLivechatSheet = ({
 	onSubmit = () => {},
-	onCancel = () => {}
+	onCancel = () => {},
+	requestTagBeforeClosingChat,
+	tags
 }: {
 	onSubmit: (comment: string) => void;
 	onCancel: () => void;
+	requestTagBeforeClosingChat?: boolean;
+	tags?: string[];
 }) => (
 	<ActionSheetContentWithInputAndSubmit
 		title={I18n.t('Closing_chat')}
@@ -18,6 +22,8 @@ const CloseLivechatSheet = ({
 		testID='room-actions-view-close-livechat'
 		placeholder=''
 		secureTextEntry={false}
+		selectTags={requestTagBeforeClosingChat}
+		options={tags}
 	/>
 );
 

app/lib/methods/helpers/closeLivechat.ts

@@ -7,14 +7,16 @@ import log from './log';
 export const closeLivechat = async ({
 	rid,
 	comment,
-	isMasterDetail
+	isMasterDetail,
+	tags
 }: {
 	rid: string;
 	isMasterDetail: boolean;
 	comment?: string;
+	tags?: string[];
 }) => {
 	try {
-		await Services.closeLivechat(rid, comment);
+		await Services.closeLivechat(rid, comment, tags);
 		if (isMasterDetail) {
 			Navigation.navigate('DrawerNavigator');
 		} else {

app/lib/services/restApi.ts

@@ -18,6 +18,7 @@ import { getDeviceToken } from '../notifications';
 import { RoomTypes, roomTypeToApiType, unsubscribeRooms } from '../methods';
 import sdk from './sdk';
 import { compareServerVersion, getBundleId, isIOS } from '../methods/helpers';
+import { ILivechatTag } from '../../definitions/ILivechatTag';
 
 export const createChannel = ({
 	name,
@@ -347,9 +348,9 @@ export const getTeamListRoom = ({
 	return sdk.get('teams.listRooms', params);
 };
 
-export const closeLivechat = (rid: string, comment?: string) =>
+export const closeLivechat = (rid: string, comment?: string, tags?: string[]) =>
 	// RC 0.29.0
-	sdk.methodCallWrapper('livechat:closeRoom', rid, comment, { clientAction: true });
+	sdk.methodCallWrapper('livechat:closeRoom', rid, comment, { clientAction: true, tags });
 
 export const editLivechat = (userData: TParams, roomData: TParams): Promise<{ error?: string }> =>
 	// RC 0.55.0
@@ -398,13 +399,7 @@ export const getRoutingConfig = (): Promise<{
 	// RC 2.0.0
 	sdk.methodCallWrapper('livechat:getRoutingConfig');
 
-export const getTagsList = (): Promise<
-	{
-		_id: string;
-		name: string;
-		departments: string[];
-	}[]
-> =>
+export const getTagsList = (): Promise<ILivechatTag[]> =>
 	// RC 2.0.0
 	sdk.methodCallWrapper('livechat:getTagsList');
 

app/views/RoomView/RightButtons.tsx

@@ -5,6 +5,7 @@ import { Observable, Subscription } from 'rxjs';
 import { Dispatch } from 'redux';
 import { StackNavigationProp } from '@react-navigation/stack';
 
+import { ILivechatTag } from '../../definitions/ILivechatTag';
 import * as HeaderButton from '../../containers/HeaderButton';
 import database from '../../lib/database';
 import { getUserSelector } from '../../selectors/login';
@@ -18,6 +19,8 @@ import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers
 import { onHoldLivechat, returnLivechat } from '../../lib/services/restApi';
 import { closeLivechat as closeLivechatService } from '../../lib/methods/helpers/closeLivechat';
 import CloseLivechatSheet from '../../ee/omnichannel/containers/CloseLivechatSheet';
+import { Services } from '../../lib/services';
+import { ILivechatDepartment } from '../../definitions/ILivechatDepartment';
 
 interface IRightButtonsProps extends IActionSheetProvider {
 	userId?: string;
@@ -40,6 +43,7 @@ interface IRightButtonsProps extends IActionSheetProvider {
 		canPlaceLivechatOnHold: boolean;
 	};
 	livechatRequestComment: boolean;
+	departmentId?: string;
 }
 
 interface IRigthButtonsState {
@@ -214,8 +218,22 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 		});
 	};
 
-	closeLivechat = () => {
-		const { rid, livechatRequestComment, showActionSheet, hideActionSheet, isMasterDetail } = this.props;
+	closeLivechat = async () => {
+		const { rid, livechatRequestComment, showActionSheet, hideActionSheet, isMasterDetail, departmentId } = this.props;
+
+		let departmentInfo: ILivechatDepartment | undefined;
+		let tagsList: ILivechatTag[] | undefined;
+
+		if (departmentId) {
+			const result = await Services.getDepartmentInfo(departmentId);
+			if (result.success) {
+				departmentInfo = result.department as ILivechatDepartment;
+			}
+		}
+
+		if (departmentInfo?.requestTagBeforeClosingChat) {
+			tagsList = await Services.getTagsList();
+		}
 
 		hideActionSheet();
 
@@ -228,14 +246,16 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 			showActionSheet({
 				children: (
 					<CloseLivechatSheet
-						onSubmit={(comment: string) => {
+						onSubmit={(comment: string, tags?: string[]) => {
 							hideActionSheet();
-							closeLivechatService({ rid, isMasterDetail, comment });
+							closeLivechatService({ rid, isMasterDetail, comment, tags });
 						}}
 						onCancel={() => hideActionSheet()}
+						requestTagBeforeClosingChat={departmentInfo?.requestTagBeforeClosingChat}
+						tags={tagsList?.map(t => t.name)}
 					/>
 				),
-				headerHeight: 225
+				headerHeight: departmentInfo?.requestTagBeforeClosingChat ? 350 : 225
 			});
 		}, 300);
 	};

app/views/RoomView/index.tsx

@@ -559,6 +559,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		let avatar: string | undefined;
 		let visitor: IVisitor | undefined;
 		let sourceType: IOmnichannelSource | undefined;
+		let departmentId: string | undefined;
 		if ('id' in room) {
 			subtitle = room.topic;
 			t = room.t;
@@ -568,6 +569,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			({ id: userId, token } = user);
 			avatar = room.name;
 			visitor = room.visitor;
+			departmentId = room.departmentId;
 		}
 
 		if ('source' in room) {
@@ -632,6 +634,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					encrypted={encrypted}
 					navigation={navigation}
 					toggleFollowThread={this.toggleFollowThread}
+					departmentId={departmentId}
 				/>
 			)
 		});