[NEW] Call to Action buttons for Omnichannel (#4060)

* add: kebab and bottom sheet for omnichannel

* update: `RoomActionsView`

* chore: add canned responses to MessageBox

* chore: add omnichannel permissions to RightButtons

chore: missing changes to previous commit on RoomView

* chore: make icon available on first re-render after joining the room

* refactor: omnichannel permissions logic outside RightButtons

* refactor: extract omnichannel permissions' logic from RoomActionsView

* fix: omnichannel permissions on RightButton component

* add: omnichannelPermissions to RoomActions route props

* update: RoomView

* remove: setOmnichannelPermissions function

* refactor: `omnichannelPermissions` to object

* refactor: extract `on-hold` Omnichannel to `RoomView`

* add: `canPlaceLivechatOnHold` to `Omnichannel`s actions

* update: type for `showActionSheet`

* update: canned responses permission on

* fix: place on-hold permission not updating properly

* update: validation for on-hold

remove: unused variable

* remove: unnecessary param

* update: MessageBox

* fix: Omnichannel permissions on taking chat

* undo: comment on Reactotron

* Fix place chat on-hold

* fix setOptions in messageBox

* resolve lint

* change return to return to waiting line

* remove joined

* fix console.log

* fix kebab button

* fix subscription to room outside of db

Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>

app/containers/MessageBox/index.tsx

@@ -46,12 +46,22 @@ import { withActionSheet } from '../ActionSheet';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import { CustomIcon } from '../CustomIcon';
 import { forceJpgExtension } from './forceJpgExtension';
-import { IBaseScreen, IPreviewItem, IUser, TGetCustomEmoji, TSubscriptionModel, TThreadModel, IMessage } from '../../definitions';
+import {
+	IApplicationState,
+	IBaseScreen,
+	IPreviewItem,
+	IUser,
+	TGetCustomEmoji,
+	TSubscriptionModel,
+	TThreadModel,
+	IMessage
+} from '../../definitions';
 import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
 import { getPermalinkMessage, search, sendFileMessage } from '../../lib/methods';
 import { hasPermission, debounce, isAndroid, isTablet } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
 import { TSupportedThemes } from '../../theme';
+import { ChatsStackParamList } from '../../stacks/types';
 
 if (isAndroid) {
 	require('./EmojiKeyboard');
@@ -75,7 +85,7 @@ const videoPickerConfig: Options = {
 	mediaType: 'video'
 };
 
-export interface IMessageBoxProps extends IBaseScreen<MasterDetailInsideStackParamList, any> {
+export interface IMessageBoxProps extends IBaseScreen<ChatsStackParamList & MasterDetailInsideStackParamList, any> {
 	rid: string;
 	baseUrl: string;
 	message: IMessage;
@@ -107,6 +117,7 @@ export interface IMessageBoxProps extends IBaseScreen<MasterDetailInsideStackPar
 	usedCannedResponse: string;
 	uploadFilePermission: string[];
 	serverVersion: string;
+	goToCannedResponses: () => void | null;
 }
 
 interface IMessageBoxState {
@@ -305,7 +316,17 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			permissionToUpload
 		} = this.state;
 
-		const { roomType, replying, editing, isFocused, message, theme, usedCannedResponse, uploadFilePermission } = this.props;
+		const {
+			roomType,
+			replying,
+			editing,
+			isFocused,
+			message,
+			theme,
+			usedCannedResponse,
+			uploadFilePermission,
+			goToCannedResponses
+		} = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
@@ -357,12 +378,15 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (nextProps.usedCannedResponse !== usedCannedResponse) {
 			return true;
 		}
+		if (nextProps.goToCannedResponses !== goToCannedResponses) {
+			return true;
+		}
 		return false;
 	}
 
 	componentDidUpdate(prevProps: IMessageBoxProps) {
-		const { uploadFilePermission } = this.props;
+		const { uploadFilePermission, goToCannedResponses } = this.props;
-		if (!dequal(prevProps.uploadFilePermission, uploadFilePermission)) {
+		if (!dequal(prevProps.uploadFilePermission, uploadFilePermission) || prevProps.goToCannedResponses !== goToCannedResponses) {
 			this.setOptions();
 		}
 	}
@@ -783,9 +807,16 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	showMessageBoxActions = () => {
 		logEvent(events.ROOM_SHOW_BOX_ACTIONS);
 		const { permissionToUpload } = this.state;
-		const { showActionSheet } = this.props;
+		const { showActionSheet, goToCannedResponses } = this.props;
 
 		const options = [];
+		if (goToCannedResponses) {
+			options.push({
+				title: I18n.t('Canned_Responses'),
+				icon: 'canned-response',
+				onPress: () => goToCannedResponses()
+			});
+		}
 		if (permissionToUpload) {
 			options.push(
 				{
@@ -1170,7 +1201,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	isMasterDetail: state.app.isMasterDetail,
 	baseUrl: state.server.server,
 	threadsEnabled: state.settings.Threads_enabled,

app/definitions/IRoom.ts

@@ -198,7 +198,7 @@ export interface IServerRoom extends IRocketChatRecord {
 	unread?: number;
 	alert?: boolean;
 	hideUnreadStatus?: boolean;
-
+	status?: string;
 	sysMes?: string[];
 	muted?: string[];
 	unmuted?: string[];

app/i18n/locales/ar.json

@@ -421,7 +421,6 @@
   "Reset_password": "إعادة تعيين كلمة المرور",
   "resetting_password": "إعادة تعيين كلمة المرور",
   "RESET": "إعادة",
-  "Return": "العودة",
   "Review_app_title": "هل أنت مستمتع بهذا التطبيق؟",
   "Review_app_desc": "قم بإعطائنا 5 نجوم {{store}}",
   "Review_app_yes": "أكيد!",

app/i18n/locales/de.json

@@ -427,7 +427,6 @@
   "Reset_password": "Passwort zurücksetzen",
   "resetting_password": "Passwort zurücksetzen",
   "RESET": "ZURÜCKSETZEN",
-  "Return": "Zurück",
   "Review_app_title": "Gefällt Ihnen diese App?",
   "Review_app_desc": "Geben Sie uns 5 Sterne im {{store}}",
   "Review_app_yes": "Sicher!",

app/i18n/locales/en.json

@@ -431,7 +431,7 @@
   "Reset_password": "Reset password",
   "resetting_password": "resetting password",
   "RESET": "RESET",
-  "Return": "Return",
+  "Return_to_waiting_line": "Return to waiting line",
   "Review_app_title": "Are you enjoying this app?",
   "Review_app_desc": "Give us 5 stars on {{store}}",
   "Review_app_yes": "Sure!",

app/i18n/locales/fr.json

@@ -427,7 +427,6 @@
   "Reset_password": "Réinitialiser le mot de passe",
   "resetting_password": "réinitialisation du mot de passe",
   "RESET": "RÉINITIALISER",
-  "Return": "Retour",
   "Review_app_title": "Appréciez-vous cette application ?",
   "Review_app_desc": "Donnez-nous 5 étoiles sur {{store}}",
   "Review_app_yes": "Bien sûr !",

app/i18n/locales/it.json

@@ -416,7 +416,6 @@
   "Reset_password": "Ripristina password",
   "resetting_password": "ripristinando password",
   "RESET": "RIPRISTINA",
-  "Return": "Ritorno",
   "Review_app_title": "Ti piace questa app?",
   "Review_app_desc": "Dacci 5 stesse su {{store}}",
   "Review_app_yes": "Certo!",

app/i18n/locales/nl.json

@@ -427,7 +427,6 @@
   "Reset_password": "Wachtwoord resetten",
   "resetting_password": "wachtwoord aan het resetten",
   "RESET": "RESET",
-  "Return": "Terug",
   "Review_app_title": "Geniet je van deze app?",
   "Review_app_desc": "Geef ons 5 sterren op {{store}}",
   "Review_app_yes": "Zeker!",

app/i18n/locales/pt-BR.json

@@ -403,7 +403,6 @@
   "Reset_password": "Resetar senha",
   "resetting_password": "redefinindo senha",
   "RESET": "RESETAR",
-  "Return": "Retornar",
   "Review_app_title": "Você está gostando do app?",
   "Review_app_desc": "Nos dê 5 estrelas na {{store}}",
   "Review_app_yes": "Claro!",

app/i18n/locales/ru.json

@@ -427,7 +427,6 @@
   "Reset_password": "Сброс пароля",
   "resetting_password": "сброс пароля",
   "RESET": "СБРОС",
-  "Return": "Возврат",
   "Review_app_title": "Нравится ли вам это приложение?",
   "Review_app_desc": "Поставьте нам 5 звезд в {{store}}",
   "Review_app_yes": "Конечно!",

app/i18n/locales/tr.json

@@ -417,7 +417,6 @@
   "Reset_password": "Şifre sıfırla",
   "resetting_password": "şifre sıfırlanıyor",
   "RESET": "SIFIRLA",
-  "Return": "Geri dön",
   "Review_app_title": "Uygulama hoşunuza gitti mi?",
   "Review_app_desc": "{{store}} üzerinde bize 5 yıldız verin",
   "Review_app_yes": "Elbette!",

app/i18n/locales/zh-CN.json

@@ -414,7 +414,6 @@
   "Reset_password": "重置密码",
   "resetting_password": "正在重置密码",
   "RESET": "重置",
-  "Return": "返回",
   "Review_app_title": "对此 App 满意吗？",
   "Review_app_desc": "请在 {{store}} 给予我们 5 星好评",
   "Review_app_yes": "没问题",

app/i18n/locales/zh-TW.json

@@ -416,7 +416,6 @@
   "Reset_password": "重置密碼",
   "resetting_password": "正在重置密碼",
   "RESET": "重置",
-  "Return": "返回",
   "Review_app_title": "對此 App 滿意嗎？",
   "Review_app_desc": "請在 {{store}} 給予我們 5 星好評",
   "Review_app_yes": "沒問題",

app/lib/methods/helpers/log/events.ts

@@ -193,6 +193,7 @@ export default {
 	ROOM_AUDIO_FINISH_F: 'room_audio_finish_f',
 	ROOM_AUDIO_CANCEL: 'room_audio_cancel',
 	ROOM_AUDIO_CANCEL_F: 'room_audio_cancel_f',
+	ROOM_SHOW_MORE_ACTIONS: 'room_show_more_actions',
 	ROOM_SHOW_BOX_ACTIONS: 'room_show_box_actions',
 	ROOM_BOX_ACTION_PHOTO: 'room_box_action_photo',
 	ROOM_BOX_ACTION_PHOTO_F: 'room_box_action_photo_f',

app/stacks/MasterDetailStack/types.ts

@@ -32,6 +32,12 @@ export type ModalStackParamList = {
 		rid: string;
 		t: SubscriptionType;
 		joined: boolean;
+		omnichannelPermissions?: {
+			canForwardGuest: boolean;
+			canReturnQueue: boolean;
+			canViewCannedResponse: boolean;
+			canPlaceLivechatOnHold: boolean;
+		};
 	};
 	RoomInfoView: {
 		room: ISubscription;

app/stacks/types.ts

@@ -34,6 +34,7 @@ export type ChatsStackParamList = {
 				jumpToThreadId?: string;
 				roomUserId?: string | null;
 				usedCannedResponse?: string;
+				status?: string;
 		  }
 		| undefined; // Navigates back to RoomView already on stack
 	RoomActionsView: {
@@ -42,6 +43,12 @@ export type ChatsStackParamList = {
 		rid: string;
 		t: SubscriptionType;
 		joined: boolean;
+		omnichannelPermissions?: {
+			canForwardGuest: boolean;
+			canReturnQueue: boolean;
+			canViewCannedResponse: boolean;
+			canPlaceLivechatOnHold: boolean;
+		};
 	};
 	SelectListView: {
 		data?: TDataSelect[];

app/views/RoomActionsView/index.tsx

@@ -64,12 +64,10 @@ interface IRoomActionsViewProps extends IBaseScreen<ChatsStackParamList, 'RoomAc
 	editRoomPermission?: string[];
 	toggleRoomE2EEncryptionPermission?: string[];
 	viewBroadcastMemberListPermission?: string[];
-	transferLivechatGuestPermission?: string[];
 	createTeamPermission?: string[];
 	addTeamChannelPermission?: string[];
 	convertTeamPermission?: string[];
 	viewCannedResponsesPermission?: string[];
-	livechatAllowManualOnHold?: boolean;
 }
 
 interface IRoomActionsViewState {
@@ -81,16 +79,11 @@ interface IRoomActionsViewState {
 	canAutoTranslate: boolean;
 	canAddUser: boolean;
 	canInviteUser: boolean;
-	canForwardGuest: boolean;
-	canReturnQueue: boolean;
 	canEdit: boolean;
 	canToggleEncryption: boolean;
 	canCreateTeam: boolean;
 	canAddChannelToTeam: boolean;
 	canConvertTeam: boolean;
-	canViewCannedResponse: boolean;
-	canPlaceLivechatOnHold: boolean;
-	isOnHold: boolean;
 }
 
 class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomActionsViewState> {
@@ -98,6 +91,12 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 	private rid: string;
 	private t: string;
 	private joined: boolean;
+	private omnichannelPermissions?: {
+		canForwardGuest: boolean;
+		canReturnQueue: boolean;
+		canViewCannedResponse: boolean;
+		canPlaceLivechatOnHold: boolean;
+	};
 	private roomObservable?: Observable<TSubscriptionModel>;
 	private subscription?: Subscription;
 
@@ -122,6 +121,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 		this.rid = props.route.params?.rid;
 		this.t = props.route.params?.t;
 		this.joined = props.route.params?.joined;
+		this.omnichannelPermissions = props.route.params?.omnichannelPermissions;
 		this.state = {
 			room: room || { rid: this.rid, t: this.t },
 			membersCount: 0,
@@ -131,22 +131,17 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 			canAutoTranslate: false,
 			canAddUser: false,
 			canInviteUser: false,
-			canForwardGuest: false,
-			canReturnQueue: false,
 			canEdit: false,
 			canToggleEncryption: false,
 			canCreateTeam: false,
 			canAddChannelToTeam: false,
-			canConvertTeam: false,
+			canConvertTeam: false
-			canViewCannedResponse: false,
-			canPlaceLivechatOnHold: false,
-			isOnHold: false
 		};
 		if (room && room.observe && room.rid) {
 			this.roomObservable = room.observe();
 			this.subscription = this.roomObservable.subscribe(changes => {
 				if (this.mounted) {
-					this.setState({ room: changes, isOnHold: !!changes?.onHold });
+					this.setState({ room: changes });
 				} else {
 					// @ts-ignore
 					this.state.room = changes;
@@ -214,28 +209,6 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 				canAddChannelToTeam,
 				canConvertTeam
 			});
-
-			// livechat permissions
-			if (room.t === 'l') {
-				const canForwardGuest = await this.canForwardGuest();
-				const canReturnQueue = await this.canReturnQueue();
-				const canViewCannedResponse = await this.canViewCannedResponse();
-				const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
-				this.setState({ canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold });
-			}
-		}
-	}
-
-	componentDidUpdate(prevProps: IRoomActionsViewProps, prevState: IRoomActionsViewState) {
-		const { livechatAllowManualOnHold } = this.props;
-		const { room, isOnHold } = this.state;
-
-		if (
-			room.t === 'l' &&
-			(isOnHold !== prevState.isOnHold || prevProps.livechatAllowManualOnHold !== livechatAllowManualOnHold)
-		) {
-			const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
-			this.setState({ canPlaceLivechatOnHold });
 		}
 	}
 
@@ -372,38 +345,6 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 		return result;
 	};
 
-	canForwardGuest = async () => {
-		const { room } = this.state;
-		const { transferLivechatGuestPermission } = this.props;
-		const { rid } = room;
-		const permissions = await hasPermission([transferLivechatGuestPermission], rid);
-		return permissions[0];
-	};
-
-	canViewCannedResponse = async () => {
-		const { room } = this.state;
-		const { viewCannedResponsesPermission } = this.props;
-		const { rid } = room;
-		const permissions = await hasPermission([viewCannedResponsesPermission], rid);
-		return permissions[0];
-	};
-
-	canPlaceLivechatOnHold = (): boolean => {
-		const { livechatAllowManualOnHold } = this.props;
-		const { room } = this.state;
-
-		return !!(livechatAllowManualOnHold && !room?.lastMessage?.token && room?.lastMessage?.u && !room.onHold);
-	};
-
-	canReturnQueue = async () => {
-		try {
-			const { returnQueue } = await Services.getRoutingConfig();
-			return returnQueue;
-		} catch {
-			return false;
-		}
-	};
-
 	renderEncryptedSwitch = () => {
 		const { room, canToggleEncryption, canEdit } = this.state;
 		const { encrypted } = room;
@@ -1047,20 +988,86 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 		);
 	};
 
+	renderOmnichannelSection = () => {
+		const { room } = this.state;
+		const { rid, t } = room;
+		const { theme } = this.props;
+
+		if (t !== 'l' || this.isOmnichannelPreview) {
+			return null;
+		}
+
+		return (
+			<List.Section>
+				{this.omnichannelPermissions?.canForwardGuest ? (
+					<>
+						<List.Item
+							title='Forward'
+							onPress={() =>
+								this.onPressTouchable({
+									route: 'ForwardLivechatView',
+									params: { rid }
+								})
+							}
+							left={() => <List.Icon name='chat-forward' color={themes[theme].titleText} />}
+							showActionIndicator
+						/>
+						<List.Separator />
+					</>
+				) : null}
+
+				{this.omnichannelPermissions?.canPlaceLivechatOnHold ? (
+					<>
+						<List.Item
+							title='Place_chat_on_hold'
+							onPress={() =>
+								this.onPressTouchable({
+									event: this.placeOnHoldLivechat
+								})
+							}
+							left={() => <List.Icon name='pause' color={themes[theme].titleText} />}
+							showActionIndicator
+						/>
+						<List.Separator />
+					</>
+				) : null}
+
+				{this.omnichannelPermissions?.canReturnQueue ? (
+					<>
+						<List.Item
+							title='Return_to_waiting_line'
+							onPress={() =>
+								this.onPressTouchable({
+									event: this.returnLivechat
+								})
+							}
+							left={() => <List.Icon name='move-to-the-queue' color={themes[theme].titleText} />}
+							showActionIndicator
+						/>
+						<List.Separator />
+					</>
+				) : null}
+
+				<>
+					<List.Item
+						title='Close'
+						color={themes[theme].dangerColor}
+						onPress={() =>
+							this.onPressTouchable({
+								event: this.closeLivechat
+							})
+						}
+						left={() => <List.Icon name='chat-close' color={themes[theme].dangerColor} />}
+						showActionIndicator
+					/>
+					<List.Separator />
+				</>
+			</List.Section>
+		);
+	};
+
 	render() {
-		const {
+		const { room, membersCount, canViewMembers, canAddUser, canInviteUser, joined, canAutoTranslate } = this.state;
-			room,
-			membersCount,
-			canViewMembers,
-			canAddUser,
-			canInviteUser,
-			joined,
-			canAutoTranslate,
-			canForwardGuest,
-			canReturnQueue,
-			canViewCannedResponse,
-			canPlaceLivechatOnHold
-		} = this.state;
 		const { rid, t, prid } = room;
 		const isGroupChatHandler = isGroupChat(room);
 
@@ -1149,6 +1156,18 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							</>
 						) : null}
 
+						{['l'].includes(t) && !this.isOmnichannelPreview && this.omnichannelPermissions?.canViewCannedResponse ? (
+							<>
+								<List.Item
+									title='Canned_Responses'
+									onPress={() => this.onPressTouchable({ route: 'CannedResponsesListView', params: { rid } })}
+									left={() => <List.Icon name='canned-response' />}
+									showActionIndicator
+								/>
+								<List.Separator />
+							</>
+						) : null}
+
 						{['c', 'p', 'd'].includes(t) ? (
 							<>
 								<List.Item
@@ -1276,85 +1295,8 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 
 						{this.teamChannelActions(t, room)}
 						{this.teamToChannelActions(t, room)}
-
-						{['l'].includes(t) && !this.isOmnichannelPreview && canViewCannedResponse ? (
-							<>
-								<List.Item
-									title='Canned_Responses'
-									onPress={() => this.onPressTouchable({ route: 'CannedResponsesListView', params: { rid } })}
-									left={() => <List.Icon name='canned-response' />}
-									showActionIndicator
-								/>
-								<List.Separator />
-							</>
-						) : null}
-
-						{['l'].includes(t) && !this.isOmnichannelPreview ? (
-							<>
-								<List.Item
-									title='Close'
-									onPress={() =>
-										this.onPressTouchable({
-											event: this.closeLivechat
-										})
-									}
-									left={() => <List.Icon name='close' />}
-									showActionIndicator
-								/>
-								<List.Separator />
-							</>
-						) : null}
-
-						{['l'].includes(t) && !this.isOmnichannelPreview && canForwardGuest ? (
-							<>
-								<List.Item
-									title='Forward'
-									onPress={() =>
-										this.onPressTouchable({
-											route: 'ForwardLivechatView',
-											params: { rid }
-										})
-									}
-									left={() => <List.Icon name='user-forward' />}
-									showActionIndicator
-								/>
-								<List.Separator />
-							</>
-						) : null}
-
-						{['l'].includes(t) && !this.isOmnichannelPreview && canPlaceLivechatOnHold ? (
-							<>
-								<List.Item
-									title='Place_chat_on_hold'
-									onPress={() =>
-										this.onPressTouchable({
-											event: this.placeOnHoldLivechat
-										})
-									}
-									left={() => <List.Icon name='pause' />}
-									showActionIndicator
-								/>
-								<List.Separator />
-							</>
-						) : null}
-
-						{['l'].includes(t) && !this.isOmnichannelPreview && canReturnQueue ? (
-							<>
-								<List.Item
-									title='Return'
-									onPress={() =>
-										this.onPressTouchable({
-											event: this.returnLivechat
-										})
-									}
-									left={() => <List.Icon name='undo' />}
-									showActionIndicator
-								/>
-								<List.Separator />
-							</>
-						) : null}
 					</List.Section>
-
+					{this.renderOmnichannelSection()}
 					{this.renderLastSection()}
 				</List.Container>
 			</SafeAreaView>
@@ -1377,12 +1319,9 @@ const mapStateToProps = (state: IApplicationState) => ({
 	editRoomPermission: state.permissions['edit-room'],
 	toggleRoomE2EEncryptionPermission: state.permissions['toggle-room-e2e-encryption'],
 	viewBroadcastMemberListPermission: state.permissions['view-broadcast-member-list'],
-	transferLivechatGuestPermission: state.permissions['transfer-livechat-guest'],
 	createTeamPermission: state.permissions['create-team'],
 	addTeamChannelPermission: state.permissions['add-team-channel'],
-	convertTeamPermission: state.permissions['convert-team'],
+	convertTeamPermission: state.permissions['convert-team']
-	viewCannedResponsesPermission: state.permissions['view-canned-responses'],
-	livechatAllowManualOnHold: state.settings.Livechat_allow_manual_on_hold as boolean
 });
 
 export default connect(mapStateToProps)(withTheme(withDimensions(RoomActionsView)));

app/views/RoomView/RightButtons.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
 import { Observable, Subscription } from 'rxjs';
+import { Dispatch } from 'redux';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 import * as HeaderButton from '../../containers/HeaderButton';
@@ -11,19 +12,33 @@ import { events, logEvent } from '../../lib/methods/helpers/log';
 import { isTeamRoom } from '../../lib/methods/helpers/room';
 import { IApplicationState, SubscriptionType, TMessageModel, TSubscriptionModel } from '../../definitions';
 import { ChatsStackParamList } from '../../stacks/types';
+import { TActionSheetOptions, TActionSheetOptionsItem, withActionSheet } from '../../containers/ActionSheet';
+import i18n from '../../i18n';
+import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers';
+import { closeRoom } from '../../actions/room';
+import { onHoldLivechat, returnLivechat } from '../../lib/services/restApi';
 
 interface IRightButtonsProps {
 	userId?: string;
 	threadsEnabled: boolean;
-	rid?: string;
+	rid: string;
 	t: string;
 	tmid?: string;
 	teamId?: string;
 	isMasterDetail: boolean;
 	toggleFollowThread: Function;
 	joined: boolean;
+	status?: string;
+	dispatch: Dispatch;
 	encrypted?: boolean;
+	showActionSheet: (item: TActionSheetOptions) => void;
+	transferLivechatGuestPermission: boolean;
 	navigation: StackNavigationProp<ChatsStackParamList, 'RoomView'>;
+	omnichannelPermissions: {
+		canForwardGuest: boolean;
+		canReturnQueue: boolean;
+		canPlaceLivechatOnHold: boolean;
+	};
 }
 
 interface IRigthButtonsState {
@@ -71,13 +86,22 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 
 	shouldComponentUpdate(nextProps: IRightButtonsProps, nextState: IRigthButtonsState) {
 		const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
-		const { teamId } = this.props;
+		const { teamId, status, joined, omnichannelPermissions } = this.props;
 		if (nextProps.teamId !== teamId) {
 			return true;
 		}
+		if (nextProps.status !== status) {
+			return true;
+		}
+		if (nextProps.joined !== joined) {
+			return true;
+		}
 		if (nextState.isFollowingThread !== isFollowingThread) {
 			return true;
 		}
+		if (!dequal(nextProps.omnichannelPermissions, omnichannelPermissions)) {
+			return true;
+		}
 		if (!dequal(nextState.tunread, tunread)) {
 			return true;
 		}
@@ -157,6 +181,82 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 		}
 	};
 
+	returnLivechat = () => {
+		const { rid } = this.props;
+		showConfirmationAlert({
+			message: i18n.t('Would_you_like_to_return_the_inquiry'),
+			confirmationText: i18n.t('Yes'),
+			onPress: async () => {
+				try {
+					await returnLivechat(rid);
+				} catch (e: any) {
+					showErrorAlert(e.reason, i18n.t('Oops'));
+				}
+			}
+		});
+	};
+
+	placeOnHoldLivechat = () => {
+		const { navigation, rid } = this.props;
+		showConfirmationAlert({
+			title: i18n.t('Are_you_sure_question_mark'),
+			message: i18n.t('Would_like_to_place_on_hold'),
+			confirmationText: i18n.t('Yes'),
+			onPress: async () => {
+				try {
+					await onHoldLivechat(rid);
+					navigation.navigate('RoomsListView');
+				} catch (e: any) {
+					showErrorAlert(e.data?.error, i18n.t('Oops'));
+				}
+			}
+		});
+	};
+
+	closeLivechat = () => {
+		const { dispatch, rid } = this.props;
+		dispatch(closeRoom(rid));
+	};
+
+	showMoreActions = () => {
+		logEvent(events.ROOM_SHOW_MORE_ACTIONS);
+		const { showActionSheet, rid, navigation, omnichannelPermissions } = this.props;
+
+		const options = [] as TActionSheetOptionsItem[];
+		if (omnichannelPermissions.canPlaceLivechatOnHold) {
+			options.push({
+				title: i18n.t('Place_chat_on_hold'),
+				icon: 'pause',
+				onPress: () => this.placeOnHoldLivechat()
+			});
+		}
+
+		if (omnichannelPermissions.canForwardGuest) {
+			options.push({
+				title: i18n.t('Forward_Chat'),
+				icon: 'chat-forward',
+				onPress: () => navigation.navigate('ForwardLivechatView', { rid })
+			});
+		}
+
+		if (omnichannelPermissions.canReturnQueue) {
+			options.push({
+				title: i18n.t('Return_to_waiting_line'),
+				icon: 'move-to-the-queue',
+				onPress: () => this.returnLivechat()
+			});
+		}
+
+		options.push({
+			title: i18n.t('Close'),
+			icon: 'chat-close',
+			onPress: () => this.closeLivechat(),
+			danger: true
+		});
+
+		showActionSheet({ options });
+	};
+
 	goSearchView = () => {
 		logEvent(events.ROOM_GO_SEARCH);
 		const { rid, t, navigation, isMasterDetail, encrypted } = this.props;
@@ -183,10 +283,23 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 		}
 	};
 
+	isOmnichannelPreview = () => {
+		const { status } = this.props;
+		return status === 'queued';
+	};
+
 	render() {
 		const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
 		const { t, tmid, threadsEnabled, teamId, joined } = this.props;
+
 		if (t === 'l') {
+			if (!this.isOmnichannelPreview()) {
+				return (
+					<HeaderButton.Container>
+						<HeaderButton.Item iconName='kebab' onPress={this.showMoreActions} testID='room-view-header-omnichannel-kebab' />
+					</HeaderButton.Container>
+				);
+			}
 			return null;
 		}
 		if (tmid) {
@@ -225,4 +338,4 @@ const mapStateToProps = (state: IApplicationState) => ({
 	isMasterDetail: state.app.isMasterDetail
 });
 
-export default connect(mapStateToProps)(RightButtonsContainer);
+export default connect(mapStateToProps)(withActionSheet(RightButtonsContainer));

app/views/RoomView/index.tsx

@@ -9,6 +9,7 @@ import { dequal } from 'dequal';
 import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { Subscription } from 'rxjs';
 
+import { getRoutingConfig } from '../../lib/services/restApi';
 import Touch from '../../lib/methods/helpers/touch';
 import { replyBroadcast } from '../../actions/messages';
 import database from '../../lib/database';
@@ -63,6 +64,7 @@ import {
 	IApplicationState,
 	IAttachment,
 	IBaseScreen,
+	ILastMessage,
 	ILoggedUser,
 	IMessage,
 	IOmnichannelSource,
@@ -94,7 +96,8 @@ import {
 	canAutoTranslate as canAutoTranslateMethod,
 	debounce,
 	isIOS,
-	isTablet
+	isTablet,
+	hasPermission
 } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
 
@@ -112,7 +115,10 @@ const stateAttrsUpdate = [
 	'reacting',
 	'readOnly',
 	'member',
-	'showingBlockingLoader'
+	'showingBlockingLoader',
+	'canForwardGuest',
+	'canReturnQueue',
+	'canViewCannedResponse'
 ] as TStateAttrsUpdate[];
 
 type TRoomUpdate = keyof TSubscriptionModel;
@@ -138,6 +144,8 @@ const roomAttrsUpdate = [
 	'joinCodeRequired',
 	'teamMain',
 	'teamId',
+	'status',
+	'lastMessage',
 	'onHold'
 ] as TRoomUpdate[];
 
@@ -158,6 +166,9 @@ interface IRoomViewProps extends IBaseScreen<ChatsStackParamList, 'RoomView'> {
 	width: number;
 	height: number;
 	insets: EdgeInsets;
+	transferLivechatGuestPermission?: string[]; // TODO: Check if its the correct type
+	viewCannedResponsesPermission?: string[]; // TODO: Check if its the correct type
+	livechatAllowManualOnHold?: boolean;
 }
 
 interface IRoomViewState {
@@ -165,7 +176,18 @@ interface IRoomViewState {
 	joined: boolean;
 	room:
 		| TSubscriptionModel
-		| { rid: string; t: string; name?: string; fname?: string; prid?: string; joinCodeRequired?: boolean; sysMes?: boolean };
+		| {
+				rid: string;
+				t: string;
+				name?: string;
+				fname?: string;
+				prid?: string;
+				joinCodeRequired?: boolean;
+				status?: boolean;
+				lastMessage?: ILastMessage;
+				sysMes?: boolean;
+				onHold?: boolean;
+		  };
 	roomUpdate: {
 		[K in TRoomUpdate]?: any;
 	};
@@ -197,6 +219,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	private flatList: TListRef;
 	private mounted: boolean;
 	private offset = 0;
+	private subObserveQuery?: Subscription;
 	private subSubscription?: Subscription;
 	private queryUnreads?: Subscription;
 	private retryInit = 0;
@@ -256,8 +279,14 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			reacting: false,
 			readOnly: false,
 			unreadsCount: null,
-			roomUserId
+			roomUserId,
+			canViewCannedResponse: false,
+			canForwardGuest: false,
+			canReturnQueue: false,
+			canPlaceLivechatOnHold: false,
+			isOnHold: false
 		};
+
 		this.setHeader();
 
 		if ('id' in room) {
@@ -275,6 +304,10 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		this.flatList = React.createRef();
 		this.mounted = false;
 
+		if (this.t === 'l') {
+			this.updateOmnichannel();
+		}
+
 		// we don't need to subscribe to threads
 		if (this.rid && !this.tmid) {
 			this.sub = new RoomClass(this.rid);
@@ -314,7 +347,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 
 	shouldComponentUpdate(nextProps: IRoomViewProps, nextState: IRoomViewState) {
 		const { state } = this;
-		const { roomUpdate, member } = state;
+		const { roomUpdate, member, isOnHold } = state;
 		const { appState, theme, insets, route } = this.props;
 		if (theme !== nextProps.theme) {
 			return true;
@@ -325,7 +358,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (member.statusText !== nextState.member.statusText) {
 			return true;
 		}
-
+		if (isOnHold !== nextState.isOnHold) {
+			return true;
+		}
 		const stateUpdated = stateAttrsUpdate.some(key => nextState[key] !== state[key]);
 		if (stateUpdated) {
 			return true;
@@ -340,7 +375,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	}
 
 	componentDidUpdate(prevProps: IRoomViewProps, prevState: IRoomViewState) {
-		const { roomUpdate } = this.state;
+		const { roomUpdate, joined } = this.state;
 		const { appState, insets, route } = this.props;
 
 		if (route?.params?.jumpToMessageId && route?.params?.jumpToMessageId !== prevProps.route?.params?.jumpToMessageId) {
@@ -365,8 +400,13 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		}
 		// If it's a livechat room
 		if (this.t === 'l') {
-			if (!dequal(prevState.roomUpdate.visitor, roomUpdate.visitor)) {
+			if (
-				this.setHeader();
+				!dequal(prevState.roomUpdate.lastMessage?.token, roomUpdate.lastMessage?.token) ||
+				!dequal(prevState.roomUpdate.visitor, roomUpdate.visitor) ||
+				!dequal(prevState.roomUpdate.status, roomUpdate.status) ||
+				prevState.joined !== joined
+			) {
+				this.updateOmnichannel();
 			}
 		}
 		if (roomUpdate.teamMain !== prevState.roomUpdate.teamMain || roomUpdate.teamId !== prevState.roomUpdate.teamId) {
@@ -387,6 +427,17 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		this.setReadOnly();
 	}
 
+	updateOmnichannel = async () => {
+		const canForwardGuest = await this.canForwardGuest();
+		const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
+		const canReturnQueue = await this.canReturnQueue();
+		const canViewCannedResponse = await this.canViewCannedResponse();
+		this.setState({ canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold });
+		if (this.mounted) {
+			this.setHeader();
+		}
+	};
+
 	async componentWillUnmount() {
 		const { editing, room } = this.state;
 		const db = database.active;
@@ -424,15 +475,16 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (this.subSubscription && this.subSubscription.unsubscribe) {
 			this.subSubscription.unsubscribe();
 		}
+
+		if (this.subObserveQuery && this.subObserveQuery.unsubscribe) {
+			this.subObserveQuery.unsubscribe();
+		}
 		if (this.queryUnreads && this.queryUnreads.unsubscribe) {
 			this.queryUnreads.unsubscribe();
 		}
 		if (this.retryInitTimeout) {
 			clearTimeout(this.retryInitTimeout);
 		}
-		if (this.retryFindTimeout) {
-			clearTimeout(this.retryFindTimeout);
-		}
 		EventEmitter.removeListener('connected', this.handleConnected);
 		if (isTablet) {
 			EventEmitter.removeListener(KEY_COMMAND, this.handleCommands);
@@ -441,13 +493,61 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		console.countReset(`${this.constructor.name}.render calls`);
 	}
 
+	canForwardGuest = async () => {
+		const { transferLivechatGuestPermission } = this.props;
+		const permissions = await hasPermission([transferLivechatGuestPermission], this.rid);
+		return permissions[0] as boolean;
+	};
+
+	canPlaceLivechatOnHold = () => {
+		const { livechatAllowManualOnHold } = this.props;
+		const { room } = this.state;
+		return !!(livechatAllowManualOnHold && !room?.lastMessage?.token && room?.lastMessage?.u && !room.onHold);
+	};
+
+	canViewCannedResponse = async () => {
+		const { viewCannedResponsesPermission } = this.props;
+		const permissions = await hasPermission([viewCannedResponsesPermission], this.rid);
+		return permissions[0] as boolean;
+	};
+
+	canReturnQueue = async () => {
+		try {
+			const { returnQueue } = await getRoutingConfig();
+			return returnQueue;
+		} catch {
+			return false;
+		}
+	};
+
+	observeSubscriptions = () => {
+		try {
+			const db = database.active;
+			const observeSubCollection = db
+				.get('subscriptions')
+				.query(Q.where('rid', this.rid as string))
+				.observe();
+			this.subObserveQuery = observeSubCollection.subscribe(data => {
+				if (data[0]) {
+					if (this.subObserveQuery && this.subObserveQuery.unsubscribe) {
+						this.observeRoom(data[0]);
+						this.setState({ room: data[0] });
+						this.subObserveQuery.unsubscribe();
+					}
+				}
+			});
+		} catch (e) {
+			console.log("observeSubscriptions: Can't find subscription to observe");
+		}
+	};
+
 	get isOmnichannel() {
 		const { room } = this.state;
 		return room.t === 'l';
 	}
 
 	setHeader = () => {
-		const { room, unreadsCount, roomUserId, joined } = this.state;
+		const { room, unreadsCount, roomUserId, joined, canForwardGuest, canReturnQueue, canPlaceLivechatOnHold } = this.state;
 		const { navigation, isMasterDetail, theme, baseUrl, user, route } = this.props;
 		const { rid, tmid } = this;
 		if (!room.rid) {
@@ -474,6 +574,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		let token: string | undefined;
 		let avatar: string | undefined;
 		let visitor: IVisitor | undefined;
+		let status: string | undefined;
 		let sourceType: IOmnichannelSource | undefined;
 		if ('id' in room) {
 			subtitle = room.topic;
@@ -484,6 +585,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			({ id: userId, token } = user);
 			avatar = room.name;
 			visitor = room.visitor;
+			status = room.status;
 		}
 
 		if ('source' in room) {
@@ -493,11 +595,13 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		}
 
 		let numIconsRight = 2;
-		if (tmid) {
+		if (tmid || (status && joined)) {
 			numIconsRight = 1;
 		} else if (teamId && isTeamRoom({ teamId, joined })) {
 			numIconsRight = 3;
 		}
+		const omnichannelPermissions = { canForwardGuest, canReturnQueue, canPlaceLivechatOnHold };
+
 		const paddingRight = this.getPaddingLeft(numIconsRight, isMasterDetail);
 		navigation.setOptions({
 			headerShown: true,
@@ -542,6 +646,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					tmid={tmid}
 					teamId={teamId}
 					joined={joined}
+					status={room.status}
+					omnichannelPermissions={omnichannelPermissions}
 					t={this.t || t}
 					encrypted={encrypted}
 					navigation={navigation}
@@ -560,7 +666,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 
 	goRoomActionsView = (screen?: keyof ModalStackParamList) => {
 		logEvent(events.ROOM_GO_RA);
-		const { room, member, joined } = this.state;
+		const { room, member, joined, canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold } = this.state;
 		const { navigation, isMasterDetail } = this.props;
 		if (isMasterDetail) {
 			// @ts-ignore
@@ -572,7 +678,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					room: room as ISubscription,
 					member,
 					showCloseModal: !!screen,
-					joined
+					joined,
+					omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold }
 				}
 			});
 		} else if (this.rid && this.t) {
@@ -581,7 +688,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				t: this.t as SubscriptionType,
 				room: room as TSubscriptionModel,
 				member,
-				joined
+				joined,
+				omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold }
 			});
 		}
 	};
@@ -669,15 +777,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				this.internalSetState({ joined: false });
 			}
 			if (this.rid) {
-				// We navigate to RoomView before the Room is inserted to the local db
+				this.observeSubscriptions();
-				// So we retry just to make sure we have the right content
-				this.retryFindCount = this.retryFindCount + 1 || 1;
-				if (this.retryFindCount <= 3) {
-					this.retryFindTimeout = setTimeout(() => {
-						this.findAndObserveRoom(rid);
-						this.init();
-					}, 300);
-				}
 			}
 		}
 	};
@@ -697,7 +797,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				return ret;
 			}, {});
 			if (this.mounted) {
-				this.internalSetState({ room: changes, roomUpdate });
+				this.internalSetState({ room: changes, roomUpdate, isOnHold: !!changes?.onHold });
 			} else {
 				// @ts-ignore
 				this.state.room = changes;
@@ -1186,6 +1286,11 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		});
 	};
 
+	goToCannedResponses = () => {
+		const { room } = this.state;
+		Navigation.navigate('CannedResponsesListView', { rid: room.rid });
+	};
+
 	renderItem = (item: TAnyMessageModel, previousItem: TAnyMessageModel, highlightedMessage?: string) => {
 		const { room, lastOpen, canAutoTranslate } = this.state;
 		const { user, Message_GroupingPeriod, Message_TimeFormat, useRealName, baseUrl, Message_Read_Receipt_Enabled, theme } =
@@ -1203,7 +1308,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				dateSeparator = item.ts;
 			}
 		}
-
 		let content = null;
 		if (item.t && MESSAGE_TYPE_ANY_LOAD.includes(item.t as MessageTypeLoad)) {
 			content = (
@@ -1271,7 +1375,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	};
 
 	renderFooter = () => {
-		const { joined, room, selectedMessage, editing, replying, replyWithMention, readOnly, loading } = this.state;
+		const { joined, room, selectedMessage, editing, replying, replyWithMention, readOnly, loading, canViewCannedResponse } =
+			this.state;
 		const { navigation, theme, route } = this.props;
 
 		const usedCannedResponse = route?.params?.usedCannedResponse;
@@ -1338,9 +1443,11 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		return (
 			<MessageBox
 				ref={this.messagebox}
+				goToCannedResponses={canViewCannedResponse ? this.goToCannedResponses : null}
 				onSubmit={this.handleSendMessage}
 				rid={this.rid}
 				tmid={this.tmid}
+				joined={joined}
 				roomType={room.t}
 				isFocused={navigation.isFocused}
 				theme={theme}
@@ -1454,7 +1561,10 @@ const mapStateToProps = (state: IApplicationState) => ({
 	baseUrl: state.server.server,
 	serverVersion: state.server.version,
 	Message_Read_Receipt_Enabled: state.settings.Message_Read_Receipt_Enabled as boolean,
-	Hide_System_Messages: state.settings.Hide_System_Messages as string[]
+	Hide_System_Messages: state.settings.Hide_System_Messages as string[],
+	transferLivechatGuestPermission: state.permissions['transfer-livechat-guest'],
+	viewCannedResponsesPermission: state.permissions['view-canned-responses'],
+	livechatAllowManualOnHold: state.settings.Livechat_allow_manual_on_hold as boolean
 });
 
 export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomView))));