[FIX] Dealing well with pre-configured tags in Omnichannel

app/containers/UIKit/MultiSelect/index.js

@@ -157,7 +157,7 @@ export const MultiSelect = React.memo(({
 				disabled={disabled}
 				inputStyle={inputStyle}
 			>
-				{items.length ? <Chips items={items} onSelect={onSelect} theme={theme} /> : <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder.text}</Text>}
+				{items.length ? <Chips items={items} onSelect={item => (disabled ? {} : onSelect(item))} theme={theme} /> : <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder.text}</Text>}
 			</Input>
 		);
 	}

app/lib/methods/getPermissions.js

@@ -48,7 +48,9 @@ const PERMISSIONS = [
 	'view-user-administration',
 	'view-all-teams',
 	'view-all-team-channels',
-	'convert-team'
+	'convert-team',
+	'edit-omnichannel-contact',
+	'edit-livechat-room-customfields'
 ];
 
 export async function setPermissions() {

app/views/LivechatEditView.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Text, StyleSheet, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
+import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
@@ -15,9 +16,9 @@ import { LISTENER } from '../containers/Toast';
 import EventEmitter from '../utils/events';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import { getUserSelector } from '../selectors/login';
-import Chips from '../containers/UIKit/MultiSelect/Chips';
 import Button from '../containers/Button';
 import SafeAreaView from '../containers/SafeAreaView';
+import { MultiSelect } from '../containers/UIKit/MultiSelect';
 
 const styles = StyleSheet.create({
 	container: {
@@ -27,6 +28,11 @@ const styles = StyleSheet.create({
 		fontSize: 20,
 		paddingVertical: 10,
 		...sharedStyles.textMedium
+	},
+	label: {
+		marginBottom: 10,
+		fontSize: 14,
+		...sharedStyles.textSemibold
 	}
 });
 
@@ -37,10 +43,11 @@ Title.propTypes = {
 };
 
 const LivechatEditView = ({
-	user, navigation, route, theme
+	user, navigation, route, theme, editOmnichannelContact, editLivechatRoomCustomfields
 }) => {
 	const [customFields, setCustomFields] = useState({});
 	const [availableUserTags, setAvailableUserTags] = useState([]);
+	const [permissions, setPermissions] = useState([]);
 
 	const params = {};
 	const inputs = {};
@@ -66,9 +73,12 @@ const LivechatEditView = ({
 	};
 
 	const [tagParam, setTags] = useState(livechat?.tags || []);
+	const [tagParamSelected, setTagParamSelected] = useState(livechat?.tags || []);
 
 	useEffect(() => {
-		setTags([...tagParam, ...availableUserTags]);
+		const arr = [...tagParam, ...availableUserTags];
+		const uniqueArray = arr.filter((val, i) => arr.indexOf(val) === i);
+		setTags(uniqueArray);
 	}, [availableUserTags]);
 
 	const getTagsList = async(agentDepartments) => {
@@ -115,7 +125,7 @@ const LivechatEditView = ({
 			roomData.topic = params.topic;
 		}
 
-		roomData.tags = tagParam;
+		roomData.tags = tagParamSelected;
 
 		roomData.livechatData = {};
 		Object.entries(customFields?.livechat || {}).forEach(([key]) => {
@@ -139,9 +149,15 @@ const LivechatEditView = ({
 
 	const onChangeText = (key, text) => { params[key] = text; };
 
+	const getPermissions = async() => {
+		const permissionsArray = await RocketChat.hasPermission([editOmnichannelContact, editLivechatRoomCustomfields], livechat.rid);
+		setPermissions(permissionsArray);
+	};
+
 	useEffect(() => {
 		getAgentDepartments();
 		getCustomFields();
+		getPermissions();
 	}, []);
 
 	return (
@@ -162,6 +178,7 @@ const LivechatEditView = ({
 						onChangeText={text => onChangeText('name', text)}
 						onSubmitEditing={() => { inputs.name.focus(); }}
 						theme={theme}
+						editable={!!permissions[0]}
 					/>
 					<TextInput
 						label={I18n.t('Email')}
@@ -170,6 +187,7 @@ const LivechatEditView = ({
 						onChangeText={text => onChangeText('email', text)}
 						onSubmitEditing={() => { inputs.phone.focus(); }}
 						theme={theme}
+						editable={!!permissions[0]}
 					/>
 					<TextInput
 						label={I18n.t('Phone')}
@@ -186,6 +204,7 @@ const LivechatEditView = ({
 							}
 						}}
 						theme={theme}
+						editable={!!permissions[0]}
 					/>
 					{Object.entries(customFields?.visitor || {}).map(([key, value], index, array) => (
 						<TextInput
@@ -200,6 +219,7 @@ const LivechatEditView = ({
 								inputs.topic.focus();
 							}}
 							theme={theme}
+							editable={!!permissions[0]}
 						/>
 					))}
 					<Title
@@ -213,35 +233,28 @@ const LivechatEditView = ({
 						onChangeText={text => onChangeText('topic', text)}
 						onSubmitEditing={() => inputs.tags.focus()}
 						theme={theme}
+						editable={!!permissions[1]}
 					/>
 
-					<TextInput
-						inputRef={(e) => { inputs.tags = e; }}
-						label={I18n.t('Tags')}
-						iconRight='add'
-						onIconRightPress={() => {
-							const lastText = inputs.tags._lastNativeText || '';
-							if (lastText.length) {
-								setTags([...tagParam.filter(t => t !== lastText), lastText]);
-								inputs.tags.clear();
-							}
-						}}
-						onSubmitEditing={() => {
-							const keys = Object.keys(customFields?.livechat || {});
-							if (keys.length > 0) {
-								const key = keys.pop();
-								inputs[key].focus();
-							} else {
-								submit();
-							}
+					<Text
+						style={[
+							styles.label,
+							{ color: themes[theme].titleText }
+						]}
+					>
+						{ I18n.t('Tags') }
+					</Text>
+					<MultiSelect
+						options={tagParam.map(tag => ({ text: { text: tag }, value: tag }))}
+						onChange={({ value }) => {
+							setTagParamSelected([...value]);
 						}}
+						placeholder={{ text: I18n.t('Tags') }}
+						value={tagParamSelected}
+						context={BLOCK_CONTEXT.FORM}
+						multiselect
 						theme={theme}
-					/>
-					<Chips
-						items={tagParam.map(tag => ({ text: { text: tag }, value: tag }))}
-						onSelect={tag => setTags(tagParam.filter(t => t !== tag.value) || [])}
-						style={{ backgroundColor: themes[theme].backgroundColor }}
-						theme={theme}
+						disabled={!permissions[1]}
 					/>
 
 					{Object.entries(customFields?.livechat || {}).map(([key, value], index, array) => (
@@ -257,6 +270,7 @@ const LivechatEditView = ({
 								submit();
 							}}
 							theme={theme}
+							editable={!!permissions[1]}
 						/>
 					))}
 
@@ -274,15 +288,19 @@ LivechatEditView.propTypes = {
 	user: PropTypes.object,
 	navigation: PropTypes.object,
 	route: PropTypes.object,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	editOmnichannelContact: PropTypes.array,
+	editLivechatRoomCustomfields: PropTypes.array
 };
 LivechatEditView.navigationOptions = ({
-	title: I18n.t('Livechat_edit')
+	title: I18n.t('Edit')
 });
 
 const mapStateToProps = state => ({
 	server: state.server.server,
-	user: getUserSelector(state)
+	user: getUserSelector(state),
+	editOmnichannelContact: state.permissions['edit-omnichannel-contact'],
+	editLivechatRoomCustomfields: state.permissions['edit-livechat-room-customfields']
 });
 
 export default connect(mapStateToProps)(withTheme(LivechatEditView));

app/views/RoomInfoView/index.js

@@ -55,6 +55,8 @@ class RoomInfoView extends React.Component {
 		isMasterDetail: PropTypes.bool,
 		jitsiEnabled: PropTypes.bool,
 		editRoomPermission: PropTypes.array,
+		editOmnichannelContact: PropTypes.array,
+		editLivechatRoomCustomfields: PropTypes.array,
 		roles: PropTypes.array
 	}
 
@@ -184,7 +186,9 @@ class RoomInfoView extends React.Component {
 
 	loadRoom = async() => {
 		const { room: roomState } = this.state;
-		const { route, editRoomPermission } = this.props;
+		const {
+			route, editRoomPermission, editOmnichannelContact, editLivechatRoomCustomfields
+		} = this.props;
 		let room = route.params?.room;
 		if (room && room.observe) {
 			this.roomObservable = room.observe();
@@ -204,8 +208,10 @@ class RoomInfoView extends React.Component {
 			}
 		}
 
-		const permissions = await RocketChat.hasPermission([editRoomPermission], room.rid);
-		if (permissions[0]) {
+		const permissionToEdit = this.isLivechat ? [editOmnichannelContact, editLivechatRoomCustomfields] : [editRoomPermission];
+
+		const permissions = await RocketChat.hasPermission(permissionToEdit, room.rid);
+		if (permissions.some(Boolean)) {
 			this.setState({ showEdit: true }, () => this.setHeader());
 		}
 	}
@@ -370,6 +376,8 @@ const mapStateToProps = state => ({
 	isMasterDetail: state.app.isMasterDetail,
 	jitsiEnabled: state.settings.Jitsi_Enabled || false,
 	editRoomPermission: state.permissions['edit-room'],
+	editOmnichannelContact: state.permissions['edit-omnichannel-contact'],
+	editLivechatRoomCustomfields: state.permissions['edit-livechat-room-customfields'],
 	roles: state.roles
 });