fix: Omnichannel permissions on taking chat

app/ReactotronConfig.js

@@ -8,7 +8,8 @@ import sagaPlugin from 'reactotron-redux-saga';
 if (__DEV__) {
 	const scriptURL = NativeModules.SourceCode.scriptURL;
 	const scriptHostname = scriptURL.split('://')[1].split(':')[0];
-	Reactotron.setAsyncStorageHandler(AsyncStorage)
+	Reactotron
+		// .setAsyncStorageHandler(AsyncStorage)
 		.configure({ host: scriptHostname })
 		.useReactNative()
 		.use(reactotronRedux())

app/containers/MessageBox/index.tsx

@@ -318,8 +318,18 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			permissionToUpload
 		} = this.state;
 
-		const { roomType, replying, editing, isFocused, message, theme, usedCannedResponse, uploadFilePermission, joined } =
+		const {
-			this.props;
+			roomType,
+			replying,
+			editing,
+			isFocused,
+			message,
+			theme,
+			usedCannedResponse,
+			uploadFilePermission,
+			viewCannedResponsesPermission,
+			joined
+		} = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
@@ -371,6 +381,9 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (!dequal(nextProps.uploadFilePermission, uploadFilePermission)) {
 			return true;
 		}
+		if (!dequal(nextProps.viewCannedResponsesPermission, viewCannedResponsesPermission)) {
+			return true;
+		}
 		if (nextProps.usedCannedResponse !== usedCannedResponse) {
 			return true;
 		}
@@ -427,14 +440,17 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	setOptions = async () => {
 		const { uploadFilePermission, viewCannedResponsesPermission, rid } = this.props;
 
+		const canViewCannedResponse = await hasPermission([viewCannedResponsesPermission], rid);
+		this.setState({ canViewCannedResponse: canViewCannedResponse[0] });
+
 		// Servers older than 4.2
 		if (!uploadFilePermission) {
 			this.setState({ permissionToUpload: true });
 			return;
 		}
 
-		const permissions = await hasPermission([uploadFilePermission, viewCannedResponsesPermission], rid);
+		const permissionToUpload = await hasPermission([uploadFilePermission], rid);
-		this.setState({ permissionToUpload: permissions[0], canViewCannedResponse: permissions[1] });
+		this.setState({ permissionToUpload: permissionToUpload[0] });
 	};
 
 	onChangeText: any = (text: string): void => {
@@ -803,11 +819,11 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 
 	showMessageBoxActions = () => {
 		logEvent(events.ROOM_SHOW_BOX_ACTIONS);
-		const { permissionToUpload } = this.state;
+		const { permissionToUpload, canViewCannedResponse } = this.state;
-		const { showActionSheet, goToCannedResponses, roomType } = this.props;
+		const { showActionSheet, goToCannedResponses } = this.props;
 
 		const options = [];
-		if (roomType === 'l' && goToCannedResponses) {
+		if (canViewCannedResponse) {
 			options.push({
 				title: I18n.t('Canned_Responses'),
 				icon: 'canned-response',

app/views/RoomView/index.tsx

@@ -217,6 +217,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	private flatList: TListRef;
 	private mounted: boolean;
 	private offset = 0;
+	private subOmnichannel?: Subscription;
 	private subSubscription?: Subscription;
 	private queryUnreads?: Subscription;
 	private retryInit = 0;
@@ -311,6 +312,14 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		this.mounted = true;
 		this.didMountInteraction = InteractionManager.runAfterInteractions(() => {
 			const { isAuthenticated } = this.props;
+			if (this.t === 'l') {
+				this.observeOmnichannel();
+				const canForwardGuest = this.canForwardGuest();
+				const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
+				const canReturnQueue = this.canReturnQueue();
+				const canViewCannedResponse = this.canViewCannedResponse();
+				this.setState({ canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold });
+			}
 			this.setHeader();
 			if (this.rid) {
 				this.sub?.subscribe?.();
@@ -329,13 +338,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			if (isIOS && this.rid) {
 				this.updateUnreadCount();
 			}
-			if (this.t === 'l') {
-				const canForwardGuest = this.canForwardGuest();
-				const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
-				const canReturnQueue = this.canReturnQueue();
-				const canViewCannedResponse = this.canViewCannedResponse();
-				this.setState({ canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold });
-			}
 		});
 		if (isTablet) {
 			EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
@@ -465,6 +467,10 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (this.subSubscription && this.subSubscription.unsubscribe) {
 			this.subSubscription.unsubscribe();
 		}
+
+		if (this.subOmnichannel && this.subOmnichannel.unsubscribe) {
+			this.subOmnichannel.unsubscribe();
+		}
 		if (this.queryUnreads && this.queryUnreads.unsubscribe) {
 			this.queryUnreads.unsubscribe();
 		}
@@ -509,6 +515,26 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		}
 	};
 
+	observeOmnichannel = () => {
+		try {
+			const db = database.active;
+			const subCollection = db
+				.get('subscriptions')
+				.query(Q.where('rid', this.rid as string))
+				.observe();
+			this.subOmnichannel = subCollection.subscribe(data => {
+				if (data[0]) {
+					if (this.subOmnichannel && this.subOmnichannel.unsubscribe) {
+						this.observeRoom(data[0]);
+						this.subOmnichannel.unsubscribe();
+					}
+				}
+			});
+		} catch (e) {
+			console.log("Can't find subscription to observe");
+		}
+	};
+
 	get isOmnichannel() {
 		const { room } = this.state;
 		return room.t === 'l';