[NEW] Omnichannel visitor

app/actions/actionsTypes.js

@@ -31,7 +31,7 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	'OPEN_SEARCH_HEADER',
 	'CLOSE_SEARCH_HEADER'
 ]);
-export const ROOM = createRequestTypes('ROOM', ['SUBSCRIBE', 'UNSUBSCRIBE', 'LEAVE', 'DELETE', 'REMOVED', 'USER_TYPING']);
+export const ROOM = createRequestTypes('ROOM', ['SUBSCRIBE', 'UNSUBSCRIBE', 'LEAVE', 'DELETE', 'REMOVED', 'CLOSE', 'FORWARD', 'USER_TYPING']);
 export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS']);
 export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
 export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);

app/actions/room.js

@@ -30,6 +30,21 @@ export function deleteRoom(rid, t) {
 	};
 }
 
+export function closeRoom(rid) {
+	return {
+		type: types.ROOM.CLOSE,
+		rid
+	};
+}
+
+export function forwardRoom(rid, transferData) {
+	return {
+		type: types.ROOM.FORWARD,
+		transferData,
+		rid
+	};
+}
+
 export function removedRoom() {
 	return {
 		type: types.ROOM.REMOVED

app/constants/settings.js

@@ -68,6 +68,9 @@ export default {
 	LDAP_Enable: {
 		type: 'valueAsBoolean'
 	},
+	Livechat_request_comment_when_closing_conversation: {
+		type: 'valueAsBoolean'
+	},
 	Jitsi_Enabled: {
 		type: 'valueAsBoolean'
 	},

app/containers/LoginServices.js

@@ -12,7 +12,7 @@ import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
 import { loginRequest as loginRequestAction } from '../actions/login';
 import Button from './Button';
-import OnboardingSeparator from './OnboardingSeparator';
+import OrSeparator from './OrSeparator';
 import Touch from '../utils/touch';
 import I18n from '../i18n';
 import random from '../utils/random';
@@ -252,12 +252,12 @@ class LoginServices extends React.PureComponent {
 						style={styles.options}
 						color={themes[theme].actionTintColor}
 					/>
-					<OnboardingSeparator theme={theme} />
+					<OrSeparator theme={theme} />
 				</>
 			);
 		}
 		if (length > 0 && separator) {
-			return <OnboardingSeparator theme={theme} />;
+			return <OrSeparator theme={theme} />;
 		}
 		return null;
 	}

app/containers/OnboardingSeparator.js → app/containers/OrSeparator.js

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const DateSeparator = React.memo(({ theme }) => {
+const OrSeparator = React.memo(({ theme }) => {
 	const line = { backgroundColor: themes[theme].borderColor };
 	const text = { color: themes[theme].auxiliaryText };
 	return (
@@ -36,8 +36,8 @@ const DateSeparator = React.memo(({ theme }) => {
 	);
 });
 
-DateSeparator.propTypes = {
+OrSeparator.propTypes = {
 	theme: PropTypes.string
 };
 
-export default DateSeparator;
+export default OrSeparator;

app/containers/RoomTypeIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import { CustomIcon } from '../lib/Icons';
-import { themes } from '../constants/colors';
+import { STATUS_COLORS, themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	style: {
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
 });
 
 const RoomTypeIcon = React.memo(({
-	type, size, isGroupChat, style, theme
+	type, size, isGroupChat, status, style, theme
 }) => {
 	if (!type) {
 		return null;
@@ -36,7 +36,7 @@ const RoomTypeIcon = React.memo(({
 		}
 		return <CustomIcon name='at' size={13} style={[styles.style, styles.discussion, { color }]} />;
 	} if (type === 'l') {
-		return <CustomIcon name='livechat' size={13} style={[styles.style, styles.discussion, { color }]} />;
+		return <CustomIcon name='livechat' size={13} style={[styles.style, styles.discussion, { color: STATUS_COLORS[status] }]} />;
 	}
 	return <Image source={{ uri: 'lock' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
 });
@@ -45,6 +45,7 @@ RoomTypeIcon.propTypes = {
 	theme: PropTypes.string,
 	type: PropTypes.string,
 	isGroupChat: PropTypes.bool,
+	status: PropTypes.string,
 	size: PropTypes.number,
 	style: PropTypes.object
 };

app/containers/TextInput.js

@@ -64,8 +64,10 @@ export default class RCTextInput extends React.PureComponent {
 		inputRef: PropTypes.func,
 		testID: PropTypes.string,
 		iconLeft: PropTypes.string,
+		iconRight: PropTypes.string,
 		placeholder: PropTypes.string,
 		left: PropTypes.element,
+		onIconRightPress: PropTypes.func,
 		theme: PropTypes.string
 	}
 
@@ -90,6 +92,19 @@ export default class RCTextInput extends React.PureComponent {
 		);
 	}
 
+	get iconRight() {
+		const { iconRight, onIconRightPress, theme } = this.props;
+		return (
+			<BorderlessButton onPress={onIconRightPress} style={[styles.iconContainer, styles.iconRight]}>
+				<CustomIcon
+					name={iconRight}
+					style={{ color: themes[theme].bodyText }}
+					size={20}
+				/>
+			</BorderlessButton>
+		);
+	}
+
 	get iconPassword() {
 		const { showPassword } = this.state;
 		const { testID, theme } = this.props;
@@ -117,7 +132,7 @@ export default class RCTextInput extends React.PureComponent {
 	render() {
 		const { showPassword } = this.state;
 		const {
-			label, left, error, loading, secureTextEntry, containerStyle, inputRef, iconLeft, inputStyle, testID, placeholder, theme, ...inputProps
+			label, left, error, loading, secureTextEntry, containerStyle, inputRef, iconLeft, iconRight, inputStyle, testID, placeholder, theme, ...inputProps
 		} = this.props;
 		const { dangerColor } = themes[theme];
 		return (
@@ -140,7 +155,7 @@ export default class RCTextInput extends React.PureComponent {
 						style={[
 							styles.input,
 							iconLeft && styles.inputIconLeft,
-							secureTextEntry && styles.inputIconRight,
+							(secureTextEntry || iconRight) && styles.inputIconRight,
 							{
 								backgroundColor: themes[theme].backgroundColor,
 								borderColor: themes[theme].separatorColor,
@@ -165,6 +180,7 @@ export default class RCTextInput extends React.PureComponent {
 						{...inputProps}
 					/>
 					{iconLeft ? this.iconLeft : null}
+					{iconRight ? this.iconRight : null}
 					{secureTextEntry ? this.iconPassword : null}
 					{loading ? this.loading : null}
 					{left}

app/containers/UIKit/MultiSelect/Chips.js

@@ -12,11 +12,13 @@ import styles from './styles';
 
 const keyExtractor = item => item.value.toString();
 
-const Chip = ({ item, onSelect, theme }) => (
+const Chip = ({
+	item, onSelect, style, theme
+}) => (
 	<Touchable
 		key={item.value}
 		onPress={() => onSelect(item)}
-		style={[styles.chip, { backgroundColor: themes[theme].auxiliaryBackground }]}
+		style={[styles.chip, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
 		background={Touchable.Ripple(themes[theme].bannerBackground)}
 	>
 		<>
@@ -29,17 +31,21 @@ const Chip = ({ item, onSelect, theme }) => (
 Chip.propTypes = {
 	item: PropTypes.object,
 	onSelect: PropTypes.func,
+	style: PropTypes.object,
 	theme: PropTypes.string
 };
 
-const Chips = ({ items, onSelect, theme }) => (
+const Chips = ({
+	items, onSelect, style, theme
+}) => (
 	<View style={styles.chips}>
-		{items.map(item => <Chip key={keyExtractor(item)} item={item} onSelect={onSelect} theme={theme} />)}
+		{items.map(item => <Chip key={keyExtractor(item)} item={item} onSelect={onSelect} style={style} theme={theme} />)}
 	</View>
 );
 Chips.propTypes = {
 	items: PropTypes.array,
 	onSelect: PropTypes.func,
+	style: PropTypes.object,
 	theme: PropTypes.string
 };
 

app/containers/UIKit/MultiSelect/Input.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 
@@ -9,16 +9,16 @@ import ActivityIndicator from '../../ActivityIndicator';
 import styles from './styles';
 
 const Input = ({
-	children, open, theme, loading, inputStyle, disabled
+	children, onPress, theme, loading, inputStyle, placeholder, disabled
 }) => (
 	<Touchable
-		onPress={() => open(true)}
+		onPress={onPress}
 		style={[{ backgroundColor: themes[theme].backgroundColor }, inputStyle]}
 		background={Touchable.Ripple(themes[theme].bannerBackground)}
 		disabled={disabled}
 	>
 		<View style={[styles.input, { borderColor: themes[theme].separatorColor }]}>
-			{children}
+			{placeholder ? <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder}</Text> : children}
 			{
 				loading
 					? <ActivityIndicator style={[styles.loading, styles.icon]} />
@@ -29,10 +29,11 @@ const Input = ({
 );
 Input.propTypes = {
 	children: PropTypes.node,
-	open: PropTypes.func,
+	onPress: PropTypes.func,
 	theme: PropTypes.string,
 	inputStyle: PropTypes.object,
 	disabled: PropTypes.bool,
+	placeholder: PropTypes.string,
 	loading: PropTypes.bool
 };
 

app/containers/UIKit/MultiSelect/index.js

@@ -136,7 +136,7 @@ export const MultiSelect = React.memo(({
 		/>
 	) : (
 		<Input
-			open={onShow}
+			onPress={onShow}
 			theme={theme}
 			loading={loading}
 			disabled={disabled}
@@ -150,7 +150,7 @@ export const MultiSelect = React.memo(({
 		const items = options.filter(option => selected.includes(option.value));
 		button = (
 			<Input
-				open={onShow}
+				onPress={onShow}
 				theme={theme}
 				loading={loading}
 				disabled={disabled}