Merge branch 'develop' into new.drawer-omnichannel

android/app/build.gradle

@@ -282,6 +282,9 @@ dependencies {
     playImplementation project(':@react-native-firebase_app')
     playImplementation project(':@react-native-firebase_analytics')
     playImplementation project(':@react-native-firebase_crashlytics')
+    implementation(project(':react-native-jitsi-meet')) { // https://github.com/skrafft/react-native-jitsi-meet#side-note
+      exclude group: 'com.facebook.react',module:'react-native-svg'
+    }
     implementation fileTree(dir: "libs", include: ["*.jar"])
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules

app/containers/Avatar/Avatar.tsx

@@ -28,7 +28,8 @@ const Avatar = React.memo(
 		text,
 		size = 25,
 		borderRadius = 4,
-		type = SubscriptionType.DIRECT
+		type = SubscriptionType.DIRECT,
+		externalProviderUrl
 	}: IAvatar) => {
 		const { theme } = useTheme();
 
@@ -67,7 +68,8 @@ const Avatar = React.memo(
 					avatarETag,
 					serverVersion,
 					rid,
-					blockUnauthenticatedAccess
+					blockUnauthenticatedAccess,
+					externalProviderUrl
 				});
 			}
 

app/containers/Avatar/index.tsx

@@ -32,7 +32,10 @@ class AvatarContainer extends React.Component<IAvatar, any> {
 
 	shouldComponentUpdate(nextProps: IAvatar, nextState: { avatarETag: string }) {
 		const { avatarETag } = this.state;
-		const { text, type } = this.props;
+		const { text, type, externalProviderUrl } = this.props;
+		if (nextProps.externalProviderUrl !== externalProviderUrl) {
+			return true;
+		}
 		if (nextState.avatarETag !== avatarETag) {
 			return true;
 		}
@@ -100,6 +103,7 @@ const mapStateToProps = (state: IApplicationState) => ({
 	blockUnauthenticatedAccess:
 		(state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess as boolean) ??
 		state.settings.Accounts_AvatarBlockUnauthenticatedAccess ??
-		true
+		true,
+	externalProviderUrl: state.settings.Accounts_AvatarExternalProviderUrl as string
 });
 export default connect(mapStateToProps)(AvatarContainer);

app/containers/Avatar/interfaces.ts

@@ -23,4 +23,5 @@ export interface IAvatar {
 	rid?: string;
 	blockUnauthenticatedAccess?: boolean;
 	serverVersion: string | null;
+	externalProviderUrl?: string;
 }

app/containers/FormContainer.tsx

@@ -4,7 +4,7 @@ import { ScrollView, ScrollViewProps, StyleSheet, View } from 'react-native';
 import { themes } from '../lib/constants';
 import sharedStyles from '../views/Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
-import KeyboardView from '../presentation/KeyboardView';
+import KeyboardView from './KeyboardView';
 import { useTheme } from '../theme';
 import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';

app/containers/HeaderButton/HeaderButtonItemBadge.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import UnreadBadge from '../../presentation/UnreadBadge';
+import UnreadBadge from '../UnreadBadge';
 
 const styles = StyleSheet.create({
 	badgeContainer: {

app/containers/KeyboardView.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from '@codler/react-native-keyboard-aware-scroll-view';
+
+import scrollPersistTaps from '../utils/scrollPersistTaps';
+
+interface IKeyboardViewProps extends KeyboardAwareScrollViewProps {
+	keyboardVerticalOffset?: number;
+	scrollEnabled?: boolean;
+	children: React.ReactElement[] | React.ReactElement;
+}
+
+const KeyboardView = ({ style, contentContainerStyle, scrollEnabled, keyboardVerticalOffset, children }: IKeyboardViewProps) => (
+	<KeyboardAwareScrollView
+		{...scrollPersistTaps}
+		style={style}
+		contentContainerStyle={contentContainerStyle}
+		scrollEnabled={scrollEnabled}
+		alwaysBounceVertical={false}
+		extraHeight={keyboardVerticalOffset}>
+		{children}
+	</KeyboardAwareScrollView>
+);
+
+export default KeyboardView;

app/containers/List/ListIcon.tsx

@@ -11,6 +11,7 @@ interface IListIcon {
 	color?: string | null;
 	style?: StyleProp<ViewStyle>;
 	testID?: string;
+	size?: number;
 }
 
 const styles = StyleSheet.create({
@@ -20,12 +21,12 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListIcon = React.memo(({ name, color, style, testID }: IListIcon) => {
+const ListIcon = React.memo(({ name, color, style, testID, size }: IListIcon) => {
 	const { theme } = useTheme();
 
 	return (
 		<View style={[styles.icon, style]}>
-			<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
+			<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={size ?? ICON_SIZE} testID={testID} />
 		</View>
 	);
 });

app/containers/List/ListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { I18nManager, StyleSheet, Text, View } from 'react-native';
+import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 
 import Touch from '../../utils/touch';
 import { themes } from '../../lib/constants';
@@ -66,6 +66,8 @@ interface IListItemContent {
 	translateSubtitle?: boolean;
 	showActionIndicator?: boolean;
 	alert?: boolean;
+	heightContainer?: number;
+	styleTitle?: StyleProp<TextStyle>;
 }
 
 const Content = React.memo(
@@ -81,17 +83,21 @@ const Content = React.memo(
 		translateTitle = true,
 		translateSubtitle = true,
 		showActionIndicator = false,
-		theme
+		theme,
+		heightContainer,
+		styleTitle
 	}: IListItemContent) => {
 		const { fontScale } = useDimensions();
 
 		return (
-			<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale }]} testID={testID}>
+			<View
+				style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}
+				testID={testID}>
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>
-						<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, styleTitle, { color: color || themes[theme].titleText }]} numberOfLines={1}>
-							{translateTitle ? I18n.t(title) : title}
+							{translateTitle && title ? I18n.t(title) : title}
 						</Text>
 						{alert ? (
 							<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />

app/containers/MessageBox/buttons/BaseButton.tsx

@@ -20,7 +20,10 @@ const BaseButton = ({ accessibilityLabel, icon, color, ...props }: Partial<IBase
 	const { theme } = useTheme();
 	return (
 		<BorderlessButton {...props} style={styles.actionButton}>
-			<View accessible accessibilityLabel={i18n.t(accessibilityLabel)} accessibilityRole='button'>
+			<View
+				accessible
+				accessibilityLabel={accessibilityLabel ? i18n.t(accessibilityLabel) : accessibilityLabel}
+				accessibilityRole='button'>
 				<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryTintColor} />
 			</View>
 		</BorderlessButton>

app/containers/MessageBox/index.tsx

@@ -696,7 +696,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (result.success) {
 			return true;
 		}
-		Alert.alert(I18n.t('Error_uploading'), I18n.t(result.error));
+		Alert.alert(I18n.t('Error_uploading'), result.error && I18n.isTranslated(result.error) ? I18n.t(result.error) : result.error);
 		return false;
 	};
 
@@ -778,7 +778,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			value = message;
 			replyCancel();
 		}
-		Navigation.navigate('ShareView', { room: this.room, value, attachments });
+		Navigation.navigate('ShareView', { room: this.room, thread: value, attachments });
 	};
 
 	createDiscussion = () => {

app/containers/Passcode/Base/index.tsx

@@ -19,7 +19,7 @@ interface IPasscodeBase {
 	type: string;
 	previousPasscode?: string;
 	title: string;
-	subtitle?: string;
+	subtitle?: string | null;
 	showBiometry?: boolean;
 	onEndProcess: Function;
 	onError?: Function;

app/containers/Passcode/PasscodeChoose.tsx

@@ -14,7 +14,7 @@ interface IPasscodeChoose {
 const PasscodeChoose = ({ finishProcess, force = false }: IPasscodeChoose) => {
 	const chooseRef = useRef<IBase>(null);
 	const confirmRef = useRef<IBase>(null);
-	const [subtitle, setSubtitle] = useState(null);
+	const [subtitle, setSubtitle] = useState<string | null>(null);
 	const [status, setStatus] = useState(TYPE.CHOOSE);
 	const [previousPasscode, setPreviouPasscode] = useState('');
 

app/containers/RoomHeader/RoomHeader.stories.js

@@ -2,13 +2,15 @@
 import React from 'react';
 import { Dimensions, View } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
+import { Provider } from 'react-redux';
 
 import Header from '../Header';
 import { longText } from '../../../storybook/utils';
 import { ThemeContext } from '../../theme';
+import { store } from '../../../storybook/stories';
 import RoomHeaderComponent from './RoomHeader';
 
-const stories = storiesOf('RoomHeader', module);
+const stories = storiesOf('RoomHeader', module).addDecorator(story => <Provider store={store}>{story()}</Provider>);
 
 // TODO: refactor after react-navigation v6
 const HeaderExample = ({ title }) => (

app/containers/RoomHeader/RoomHeader.tsx

@@ -6,7 +6,7 @@ import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { MarkdownPreview } from '../markdown';
 import RoomTypeIcon from '../RoomTypeIcon';
-import { TUserStatus } from '../../definitions';
+import { TUserStatus, IOmnichannelSource } from '../../definitions';
 import { useTheme } from '../../theme';
 
 const HIT_SLOP = {
@@ -72,6 +72,7 @@ interface IRoomHeader {
 	parentTitle: string;
 	onPress: () => void;
 	testID: string;
+	sourceType?: IOmnichannelSource;
 }
 
 const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
@@ -135,7 +136,8 @@ const Header = React.memo(
 		isGroupChat,
 		teamMain,
 		testID,
-		usersTyping = []
+		usersTyping = [],
+		sourceType
 	}: IRoomHeader) => {
 		const { theme } = useTheme();
 		const portrait = height > width;
@@ -171,7 +173,13 @@ const Header = React.memo(
 				hitSlop={HIT_SLOP}>
 				<View style={styles.titleContainer}>
 					{tmid ? null : (
-						<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
+						<RoomTypeIcon
+							type={prid ? 'discussion' : type}
+							isGroupChat={isGroupChat}
+							status={status}
+							teamMain={teamMain}
+							sourceType={sourceType}
+						/>
 					)}
 					<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} testID={testID} />
 				</View>

app/containers/RoomHeader/index.tsx

@@ -2,7 +2,7 @@ import { dequal } from 'dequal';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { IApplicationState, TUserStatus } from '../../definitions';
+import { IApplicationState, TUserStatus, IOmnichannelSource } from '../../definitions';
 import { withDimensions } from '../../dimensions';
 import I18n from '../../i18n';
 import RoomHeader from './RoomHeader';
@@ -27,12 +27,26 @@ interface IRoomHeaderContainerProps {
 	parentTitle: string;
 	isGroupChat: boolean;
 	testID: string;
+	sourceType?: IOmnichannelSource;
 }
 
 class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 	shouldComponentUpdate(nextProps: IRoomHeaderContainerProps) {
-		const { type, title, subtitle, status, statusText, connecting, connected, onPress, usersTyping, width, height, teamMain } =
+		const {
-			this.props;
+			type,
+			title,
+			subtitle,
+			status,
+			statusText,
+			connecting,
+			connected,
+			onPress,
+			usersTyping,
+			width,
+			height,
+			teamMain,
+			sourceType
+		} = this.props;
 		if (nextProps.type !== type) {
 			return true;
 		}
@@ -63,6 +77,9 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 		if (!dequal(nextProps.usersTyping, usersTyping)) {
 			return true;
 		}
+		if (!dequal(nextProps.sourceType, sourceType)) {
+			return true;
+		}
 		if (nextProps.onPress !== onPress) {
 			return true;
 		}
@@ -90,7 +107,8 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 			height,
 			parentTitle,
 			isGroupChat,
-			testID
+			testID,
+			sourceType
 		} = this.props;
 
 		let subtitle;
@@ -118,6 +136,7 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 				isGroupChat={isGroupChat}
 				testID={testID}
 				onPress={onPress}
+				sourceType={sourceType}
 			/>
 		);
 	}

app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+import { useSelector } from 'react-redux';
+
+import { OmnichannelSourceType, IApplicationState, IOmnichannelSource } from '../../definitions';
+import { STATUS_COLORS } from '../../lib/constants';
+import { CustomIcon } from '../../lib/Icons';
+
+const iconMap = {
+	widget: 'livechat-monochromatic',
+	email: 'mail',
+	sms: 'sms',
+	app: 'omnichannel',
+	api: 'omnichannel',
+	other: 'omnichannel'
+};
+
+interface IOmnichannelRoomIconProps {
+	size: number;
+	type: string;
+	style?: StyleProp<ViewStyle>;
+	status?: string;
+	sourceType?: IOmnichannelSource;
+}
+
+export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnichannelRoomIconProps) => {
+	const baseUrl = useSelector((state: IApplicationState) => state.server?.server);
+	const connected = useSelector((state: IApplicationState) => state.meteor?.connected);
+
+	if (sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
+		return (
+			<SvgUri
+				height={size}
+				width={size}
+				color={STATUS_COLORS[status || 'offline']}
+				uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
+				style={style}
+			/>
+		);
+	}
+
+	return (
+		<CustomIcon
+			name={iconMap[sourceType?.type || 'other']}
+			size={size}
+			style={style}
+			color={STATUS_COLORS[status || 'offline']}
+		/>
+	);
+};

app/containers/RoomTypeIcon/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { StyleSheet, ViewStyle } from 'react-native';
 
-import { CustomIcon } from '../lib/Icons';
+import { OmnichannelRoomIcon } from './OmnichannelRoomIcon';
-import { STATUS_COLORS, themes } from '../lib/constants';
+import { CustomIcon } from '../../lib/Icons';
-import Status from './Status/Status';
+import { STATUS_COLORS, themes } from '../../lib/constants';
-import { useTheme } from '../theme';
+import Status from '../Status/Status';
-import { TUserStatus } from '../definitions';
+import { useTheme } from '../../theme';
+import { TUserStatus, IOmnichannelSource } from '../../definitions';
 
 const styles = StyleSheet.create({
 	icon: {
@@ -20,13 +21,16 @@ interface IRoomTypeIcon {
 	status?: TUserStatus;
 	size?: number;
 	style?: ViewStyle;
+	sourceType?: IOmnichannelSource;
 }
 
-const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, size = 16 }: IRoomTypeIcon) => {
+const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, size = 16, sourceType }: IRoomTypeIcon) => {
 	const { theme } = useTheme();
+
 	if (!type) {
 		return null;
 	}
+
 	const color = themes[theme].titleText;
 	const iconStyle = [styles.icon, { color }, style];
 
@@ -37,6 +41,10 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, s
 		return <Status style={[iconStyle, { color: STATUS_COLORS[status] }]} size={size} status={status} />;
 	}
 
+	if (type === 'l') {
+		return <OmnichannelRoomIcon style={[styles.icon, style]} size={size} type={type} status={status} sourceType={sourceType} />;
+	}
+
 	// TODO: move this to a separate function
 	let icon = 'channel-private';
 	if (teamMain) {
@@ -51,8 +59,6 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, s
 		} else {
 			icon = 'mention';
 		}
-	} else if (type === 'l') {
-		icon = 'omnichannel';
 	}
 
 	return <CustomIcon name={icon} size={size} style={iconStyle} />;

app/containers/UnreadBadge/getUnreadStyle.ts

@@ -1,14 +1,9 @@
-import { themes } from '../../lib/constants';
+import { IUnreadBadge } from '.';
+import { themes } from '../../lib/constants/colors';
 import { TSupportedThemes } from '../../theme';
 
-interface IGetUnreadStyle {
+interface IGetUnreadStyle extends Omit<IUnreadBadge, 'small' | 'style'> {
-	unread?: number;
-	userMentions?: number;
-	groupMentions?: number;
 	theme: TSupportedThemes;
-	tunread?: [];
-	tunreadUser?: [];
-	tunreadGroup?: [];
 }
 
 export const getUnreadStyle = ({

app/containers/UnreadBadge/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { getUnreadStyle } from './getUnreadStyle';
@@ -29,11 +29,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IUnreadBadge {
+export interface IUnreadBadge {
 	unread?: number;
 	userMentions?: number;
 	groupMentions?: number;
-	style?: ViewStyle;
+	style?: StyleProp<ViewStyle>;
 	tunread?: [];
 	tunreadUser?: [];
 	tunreadGroup?: [];
@@ -43,6 +43,7 @@ interface IUnreadBadge {
 const UnreadBadge = React.memo(
 	({ unread, userMentions, groupMentions, style, tunread, tunreadUser, tunreadGroup, small }: IUnreadBadge) => {
 		const { theme } = useTheme();
+
 		if ((!unread || unread <= 0) && !tunread?.length) {
 			return null;
 		}

app/containers/markdown/index.tsx

@@ -29,7 +29,7 @@ import { themes } from '../../lib/constants';
 export { default as MarkdownPreview } from './Preview';
 
 interface IMarkdownProps {
-	msg?: string;
+	msg?: string | null;
 	theme: TSupportedThemes;
 	md?: MarkdownAST;
 	mentions?: IUserMention[];

app/containers/message/utils.ts

@@ -2,7 +2,7 @@ import { TMessageModel } from '../../definitions/IMessage';
 import I18n from '../../i18n';
 import { DISCUSSION } from './constants';
 
-export const formatMessageCount = (count?: number, type?: string): string => {
+export const formatMessageCount = (count?: number, type?: string): string | null => {
 	const discussion = type === DISCUSSION;
 	let text = discussion ? I18n.t('No_messages_yet') : null;
 	if (!count) {

app/definitions/IRoom.ts

@@ -65,6 +65,24 @@ export enum OmnichannelSourceType {
 	API = 'api',
 	OTHER = 'other' // catch-all source type
 }
+
+export interface IOmnichannelSource {
+	// The source, or client, which created the Omnichannel room
+	type: OmnichannelSourceType;
+	// An optional identification of external sources, such as an App
+	id?: string;
+	// A human readable alias that goes with the ID, for post analytical purposes
+	alias?: string;
+	// A label to be shown in the room info
+	label?: string;
+	// The sidebar icon
+	sidebarIcon?: string;
+	// The default sidebar icon
+	defaultIcon?: string;
+	_updatedAt?: Date;
+	queuedAt?: Date;
+}
+
 export interface IOmnichannelRoom extends Partial<Omit<IRoom, 'default' | 'featured' | 'broadcast'>> {
 	_id: string;
 	rid: string;
@@ -77,23 +95,7 @@ export interface IOmnichannelRoom extends Partial<Omit<IRoom, 'default' | 'featu
 		replyTo: string;
 		subject: string;
 	};
-	source: {
+	source: IOmnichannelSource;
-		// TODO: looks like this is not so required as the definition suggests
-		// The source, or client, which created the Omnichannel room
-		type: OmnichannelSourceType;
-		// An optional identification of external sources, such as an App
-		id?: string;
-		// A human readable alias that goes with the ID, for post analytical purposes
-		alias?: string;
-		// A label to be shown in the room info
-		label?: string;
-		// The sidebar icon
-		sidebarIcon?: string;
-		// The default sidebar icon
-		defaultIcon?: string;
-		_updatedAt?: Date;
-		queuedAt?: Date;
-	};
 	transcriptRequest?: IRequestTranscript;
 	servedBy?: IServedBy;
 	onHold?: boolean;

app/definitions/ISubscription.ts

@@ -3,7 +3,7 @@ import Relation from '@nozbe/watermelondb/Relation';
 
 import { ILastMessage, TMessageModel } from './IMessage';
 import { IRocketChatRecord } from './IRocketChatRecord';
-import { RoomID, RoomType } from './IRoom';
+import { IOmnichannelSource, RoomID, RoomType } from './IRoom';
 import { IServedBy } from './IServedBy';
 import { TThreadModel } from './IThread';
 import { TThreadMessageModel } from './IThreadMessage';
@@ -98,6 +98,7 @@ export interface ISubscription {
 	teamMain?: boolean;
 	unsubscribe: () => Promise<any>;
 	separator?: boolean;
+	source?: IOmnichannelSource;
 	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
 	messages: RelationModified<TMessageModel>;
 	threads: RelationModified<TThreadModel>;

app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+import { useTheme } from '../../../../theme';
+import { themes } from '../../../../lib/constants';
+import { CustomIcon } from '../../../../lib/Icons';
+import * as List from '../../../../containers/List';
+import styles from './styles';
+import UnreadBadge from '../../../../containers/UnreadBadge';
+import i18n from '../../../../i18n';
+
+interface IOmnichannelQueue {
+	queueSize?: number;
+	onPress(): void;
+}
+
+const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
+	const { theme } = useTheme();
+	return (
+		<>
+			<List.Item
+				title='Omnichannel_queue'
+				heightContainer={50}
+				left={() => <List.Icon name='queue' size={24} color={themes[theme].auxiliaryTintColor} />}
+				color={themes[theme].bodyText}
+				onPress={queueSize ? onPress : undefined}
+				styleTitle={styles.titleOmnichannelQueue}
+				right={() => (
+					<View style={styles.omnichannelRightContainer}>
+						{queueSize ? (
+							<>
+								<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].tintColor }]} unread={queueSize} />
+								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].bodyText} size={24} />
+							</>
+						) : (
+							<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{i18n.t('Empty')}</Text>
+						)}
+					</View>
+				)}
+			/>
+			<List.Separator />
+		</>
+	);
+};
+
+export default OmnichannelQueue;

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

@@ -0,0 +1,77 @@
+import React, { memo, useEffect, useState } from 'react';
+import { Switch, View } from 'react-native';
+
+import * as List from '../../../../containers/List';
+import styles from './styles';
+import { SWITCH_TRACK_COLOR, themes } from '../../../../lib/constants';
+import { useTheme } from '../../../../theme';
+import RocketChat from '../../../../lib/rocketchat';
+import { IUser } from '../../../../definitions/IUser';
+import { showConfirmationAlert } from '../../../../utils/info';
+import I18n from '../../../../i18n';
+import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../lib';
+import OmnichannelQueue from './OmnichannelQueue';
+
+interface IOmnichannelStatus {
+	searching: boolean;
+	goQueue: () => void;
+	queueSize: number;
+	inquiryEnabled: boolean;
+	user: IUser;
+}
+
+const OmnichannelStatus = memo(({ searching, goQueue, queueSize, user }: IOmnichannelStatus) => {
+	const { theme } = useTheme();
+	const [status, setStatus] = useState(isOmnichannelStatusAvailable(user));
+
+	useEffect(() => {
+		setStatus(isOmnichannelStatusAvailable(user));
+	}, [user.statusLivechat]);
+
+	if (searching || !(RocketChat.isOmnichannelModuleAvailable() && user?.roles?.includes('livechat-agent'))) {
+		return null;
+	}
+
+	const toggleLivechat = async () => {
+		// if not-available, prompt to change to available
+		if (!isOmnichannelStatusAvailable(user)) {
+			showConfirmationAlert({
+				message: I18n.t('Omnichannel_enable_alert'),
+				confirmationText: I18n.t('Yes'),
+				onPress: async () => {
+					try {
+						await changeLivechatStatus();
+					} catch {
+						// Do nothing
+					}
+				}
+			});
+		} else {
+			try {
+				setStatus(v => !v);
+				await changeLivechatStatus();
+			} catch {
+				setStatus(v => !v);
+			}
+		}
+	};
+
+	return (
+		<>
+			<List.Item
+				title='Omnichannel'
+				color={themes[theme].bodyText}
+				onPress={toggleLivechat}
+				right={() => (
+					<View style={styles.omnichannelRightContainer}>
+						<Switch value={status} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleLivechat} />
+					</View>
+				)}
+			/>
+			<List.Separator />
+			{status ? <OmnichannelQueue queueSize={queueSize} onPress={goQueue} /> : null}
+		</>
+	);
+});
+
+export default OmnichannelStatus;

app/ee/omnichannel/containers/OmnichannelHeader/styles.ts

@@ -0,0 +1,23 @@
+import { I18nManager, StyleSheet } from 'react-native';
+
+import sharedStyles from '../../../../views/Styles';
+
+export default StyleSheet.create({
+	queueIcon: {
+		marginHorizontal: 10
+	},
+	omnichannelRightContainer: {
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	titleOmnichannelQueue: {
+		...sharedStyles.textMedium
+	},
+	emptyText: {
+		...sharedStyles.textRegular,
+		fontSize: 12
+	},
+	actionIndicator: {
+		...(I18nManager.isRTL ? { transform: [{ rotate: '180deg' }] } : {})
+	}
+});

app/ee/omnichannel/containers/OmnichannelStatus.tsx

@@ -1,67 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import { Switch, View } from 'react-native';
-
-import * as List from '../../../containers/List';
-import styles from '../../../views/RoomsListView/styles';
-import { SWITCH_TRACK_COLOR, themes } from '../../../lib/constants';
-import { useTheme } from '../../../theme';
-import UnreadBadge from '../../../presentation/UnreadBadge';
-import RocketChat from '../../../lib/rocketchat';
-import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../lib';
-import { IUser } from '../../../definitions/IUser';
-import Touch from '../../../utils/touch';
-
-interface IOmnichannelStatus {
-	searching: boolean;
-	goQueue: () => void;
-	queueSize: number;
-	inquiryEnabled: boolean;
-	user: IUser;
-}
-
-const OmnichannelStatus = memo(({ searching, goQueue, queueSize, inquiryEnabled, user }: IOmnichannelStatus) => {
-	const { theme } = useTheme();
-	const [status, setStatus] = useState<boolean>(false);
-	const canUseOmnichannel = RocketChat.isOmnichannelModuleAvailable() && user?.roles?.includes('livechat-agent');
-
-	useEffect(() => {
-		if (canUseOmnichannel) {
-			setStatus(isOmnichannelStatusAvailable(user));
-		}
-	}, [user.statusLivechat]);
-
-	if (searching || !canUseOmnichannel) {
-		return null;
-	}
-
-	const toggleLivechat = async () => {
-		try {
-			setStatus(v => !v);
-			await changeLivechatStatus();
-		} catch {
-			setStatus(v => !v);
-		}
-	};
-
-	return (
-		<>
-			<List.Item
-				title='Omnichannel'
-				left={() => <List.Icon name='omnichannel' />}
-				color={themes[theme].auxiliaryText}
-				onPress={goQueue}
-				right={() => (
-					<View style={styles.omnichannelRightContainer}>
-						{inquiryEnabled ? <UnreadBadge style={styles.queueIcon} unread={queueSize} /> : null}
-						<Touch theme={theme} onPress={toggleLivechat}>
-							<Switch value={status} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleLivechat} />
-						</Touch>
-					</View>
-				)}
-			/>
-			<List.Separator />
-		</>
-	);
-});
-
-export default OmnichannelStatus;

app/i18n/index.ts

@@ -6,10 +6,19 @@ import 'moment/min/locales';
 
 import { toMomentLocale } from '../utils/moment';
 import { isRTL } from './isRTL';
+import englishJson from './locales/en.json';
+
+type TTranslatedKeys = keyof typeof englishJson;
 
 export { isRTL };
 
-export const LANGUAGES = [
+interface ILanguage {
+	label: string;
+	value: string;
+	file: () => any;
+}
+
+export const LANGUAGES: ILanguage[] = [
 	{
 		label: 'English',
 		value: 'en',
@@ -82,12 +91,16 @@ export const LANGUAGES = [
 	}
 ];
 
+interface ITranslations {
+	[language: string]: () => typeof englishJson;
+}
+
 const translations = LANGUAGES.reduce((ret, item) => {
 	ret[item.value] = item.file;
 	return ret;
-}, {});
+}, {} as ITranslations);
 
-export const setLanguage = l => {
+export const setLanguage = (l: string) => {
 	if (!l) {
 		return;
 	}
@@ -104,6 +117,8 @@ export const setLanguage = l => {
 	i18n.translations = { ...i18n.translations, [locale]: translations[locale]?.() };
 	I18nManager.forceRTL(isRTL(locale));
 	I18nManager.swapLeftAndRightInRTL(isRTL(locale));
+	// TODO: Review this logic
+	// @ts-ignore
 	i18n.isRTL = I18nManager.isRTL;
 	moment.locale(toMomentLocale(locale));
 };
@@ -113,7 +128,16 @@ const defaultLanguage = { languageTag: 'en', isRTL: false };
 const availableLanguages = Object.keys(translations);
 const { languageTag } = RNLocalize.findBestAvailableLanguage(availableLanguages) || defaultLanguage;
 
+// @ts-ignore
+i18n.isTranslated = (text?: string) => text in englishJson;
+
 setLanguage(languageTag);
 i18n.fallbacks = true;
 
-export default i18n;
+type Ti18n = {
+	isRTL: boolean;
+	t(scope: TTranslatedKeys, options?: any): string;
+	isTranslated: (text?: string) => boolean;
+} & typeof i18n;
+
+export default i18n as Ti18n;

app/i18n/isRTL.ts

@@ -1,4 +1,4 @@
 // https://github.com/zoontek/react-native-localize/blob/master/src/constants.ts#L5
 const USES_RTL_LAYOUT = ['ar', 'ckb', 'fa', 'he', 'ks', 'lrc', 'mzn', 'ps', 'ug', 'ur', 'yi'];
 
-export const isRTL = locale => USES_RTL_LAYOUT.includes(locale);
+export const isRTL = (locale?: string) => (locale ? USES_RTL_LAYOUT.includes(locale) : false);

app/i18n/locales/ar.json

@@ -650,7 +650,6 @@
   "After_seconds_set_by_admin": "بعد {{seconds}} ثوان (حددها المدير)",
   "Dont_activate": "لا تقم بالتفعيل الآن",
   "Queued_chats": "محادثات في قائمى الانتظار",
-  "Queue_is_empty": "قائمة الانتظار فارغة",
   "Logout_from_other_logged_in_locations": "تسجيل الخروج من الأماكن الأخرى",
   "You_will_be_logged_out_from_other_locations": "سيتم تسجيل خروج من الأماكن الأخرى",
   "Logged_out_of_other_clients_successfully": "تم تسجيل الخروج من الأماكن الأخرى بنجاح",

app/i18n/locales/de.json

@@ -656,7 +656,6 @@
   "After_seconds_set_by_admin": "Nach {{seconds}} Sekunden (durch den Admin gesetzt)",
   "Dont_activate": "Jetzt nicht aktivieren",
   "Queued_chats": "Chats in der Warteschlange",
-  "Queue_is_empty": "Warteschlange leer",
   "Logout_from_other_logged_in_locations": "Auf anderen angemeldeten Geräte abmelden",
   "You_will_be_logged_out_from_other_locations": "Sie werden auf anderen Geräten abgemeldet.",
   "Logged_out_of_other_clients_successfully": "Erfolgreich von anderen Geräten abgemeldet.",

app/i18n/locales/en.json

@@ -659,7 +659,6 @@
   "After_seconds_set_by_admin": "After {{seconds}} seconds (set by admin)",
   "Dont_activate": "Don't activate now",
   "Queued_chats": "Queued chats",
-  "Queue_is_empty": "Queue is empty",
   "Logout_from_other_logged_in_locations": "Logout from other logged in locations",
   "You_will_be_logged_out_from_other_locations": "You'll be logged out from other locations.",
   "Logged_out_of_other_clients_successfully": "Logged out of other clients successfully",
@@ -810,5 +809,7 @@
   "Removed__roomName__from_this_team": "removed #{{roomName}} from this Team",
   "Removed__username__from_team": "removed @{{user_removed}} from this Team",
   "User_joined_team": "joined this Team",
-  "User_left_team": "left this Team"
+  "User_left_team": "left this Team",
+  "Omnichannel_queue": "Omnichannel queue",
+  "Empty": "Empty"
 }

app/i18n/locales/fr.json

@@ -656,7 +656,6 @@
   "After_seconds_set_by_admin": "Après {{seconds}} secondes (défini par l'administrateur)",
   "Dont_activate": "Ne pas activer maintenant",
   "Queued_chats": "Discussions en file d'attente",
-  "Queue_is_empty": "La file d'attente est vide",
   "Logout_from_other_logged_in_locations": "Déconnexion des autres emplacements connectés",
   "You_will_be_logged_out_from_other_locations": "Vous serez déconnecté des autres emplacements.",
   "Logged_out_of_other_clients_successfully": "Déconnexion réussie des autres clients",

app/i18n/locales/it.json

@@ -644,7 +644,6 @@
   "After_seconds_set_by_admin": "Dopo {{seconds}} secondi (impostati dall'admin)",
   "Dont_activate": "Non attivare ora",
   "Queued_chats": "Chat in coda",
-  "Queue_is_empty": "La coda è vuota",
   "Logout_from_other_logged_in_locations": "Disconnetti da altre postazioni",
   "You_will_be_logged_out_from_other_locations": "Verrai disconnesso dalle altre postazioni.",
   "Logged_out_of_other_clients_successfully": "Disconnesso dalle altre postazioni con successo",

app/i18n/locales/nl.json

@@ -656,7 +656,6 @@
   "After_seconds_set_by_admin": "Na {{seconds}} seconden (ingesteld door beheerder)",
   "Dont_activate": "Nu niet activeren",
   "Queued_chats": "Chats in de wachtrij",
-  "Queue_is_empty": "Wachtrij is leeg",
   "Logout_from_other_logged_in_locations": "Afmelden bij andere ingelogde locaties",
   "You_will_be_logged_out_from_other_locations": "Je wordt uitgelogd van andere locaties.",
   "Logged_out_of_other_clients_successfully": "Succesvol uitgelogd bij andere klanten",

app/i18n/locales/pt-BR.json

@@ -615,7 +615,6 @@
   "After_seconds_set_by_admin": "Após {{seconds}} segundos (Configurado pelo adm)",
   "Dont_activate": "Não ativar agora",
   "Queued_chats": "Bate-papos na fila",
-  "Queue_is_empty": "A fila está vazia",
   "Logout_from_other_logged_in_locations": "Sair de outros locais logados",
   "You_will_be_logged_out_from_other_locations": "Você perderá a sessão de outros clientes",
   "Logged_out_of_other_clients_successfully": "Desconectado de outros clientes com sucesso",

app/i18n/locales/ru.json

@@ -656,7 +656,6 @@
   "After_seconds_set_by_admin": "Через {{seconds}} секунд (установлено администратором сервера)",
   "Dont_activate": "Не активировать сейчас",
   "Queued_chats": "Чаты в очереди",
-  "Queue_is_empty": "Очередь пуста",
   "Logout_from_other_logged_in_locations": "Выйти из всех других подключенных расположений",
   "You_will_be_logged_out_from_other_locations": "Будет произведен ваш выход из всех других подключенных расположений.",
   "Logged_out_of_other_clients_successfully": "Выход из других клиентских подключений выполнен успешно",

app/i18n/locales/tr.json

@@ -644,7 +644,6 @@
   "After_seconds_set_by_admin": "{{seconds}} saniye sonra (yönetici tarafından belirlenir)",
   "Dont_activate": "Şimdi etkinleştirme",
   "Queued_chats": "Sıralı sohbetler",
-  "Queue_is_empty": "Sıra boş",
   "Logout_from_other_logged_in_locations": "Giriş yapılan diğer konumlardan çıkış yap",
   "You_will_be_logged_out_from_other_locations": "Diğer konumlardan çıkış yapacaksınız.",
   "Logged_out_of_other_clients_successfully": "Diğer istemcilerden başarıyla çıkış yapıldı",

app/i18n/locales/zh-CN.json

@@ -642,7 +642,6 @@
   "After_seconds_set_by_admin": "{{seconds}} 秒 (管理员设定)",
   "Dont_activate": "現在不要激活",
   "Queued_chats": "聊天队列",
-  "Queue_is_empty": "队列是空的",
   "Logout_from_other_logged_in_locations": "注销其他已登陆的设备",
   "You_will_be_logged_out_from_other_locations": "您将于其他设备上注销",
   "Logged_out_of_other_clients_successfully": "成功登出其他用户端",

app/i18n/locales/zh-TW.json

@@ -644,7 +644,6 @@
   "After_seconds_set_by_admin": "{{seconds}} 秒 (管理員設定)",
   "Dont_activate": "現在不要啟用",
   "Queued_chats": "聊天佇列",
-  "Queue_is_empty": "佇列是空的",
   "Logout_from_other_logged_in_locations": "登出其他已登入的設備",
   "You_will_be_logged_out_from_other_locations": "您將於其他設備上登出",
   "Logged_out_of_other_clients_successfully": "成功登出其他用戶端",

app/lib/constants/defaultSettings.ts

@@ -205,5 +205,8 @@ export const defaultSettings = {
 	},
 	Canned_Responses_Enable: {
 		type: 'valueAsBoolean'
+	},
+	Accounts_AvatarExternalProviderUrl: {
+		type: 'valueAsString'
 	}
 } as const;

app/lib/database/model/Subscription.js

@@ -130,4 +130,6 @@ export default class Subscription extends Model {
 	@field('team_id') teamId;
 
 	@field('team_main') teamMain;
+
+	@json('source', sanitizer) source;
 }

app/lib/database/model/migrations.js

@@ -208,6 +208,15 @@ export default schemaMigrations({
 					columns: [{ name: 'draft_message', type: 'string', isOptional: true }]
 				})
 			]
+		},
+		{
+			toVersion: 16,
+			steps: [
+				addColumns({
+					table: 'subscriptions',
+					columns: [{ name: 'source', type: 'string', isOptional: true }]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 15,
+	version: 16,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -59,7 +59,8 @@ export default appSchema({
 				{ name: 'e2e_key_id', type: 'string', isOptional: true },
 				{ name: 'avatar_etag', type: 'string', isOptional: true },
 				{ name: 'team_id', type: 'string', isIndexed: true },
-				{ name: 'team_main', type: 'boolean', isOptional: true } // Use `Q.notEq(true)` to get false or null
+				{ name: 'team_main', type: 'boolean', isOptional: true }, // Use `Q.notEq(true)` to get false or null
+				{ name: 'source', type: 'string', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/helpers/mergeSubscriptionsRooms.ts

@@ -4,10 +4,13 @@ import { Encryption } from '../../encryption';
 import { store as reduxStore } from '../../store/auxStore';
 import findSubscriptionsRooms from './findSubscriptionsRooms';
 import normalizeMessage from './normalizeMessage';
-import { ISubscription, IServerSubscription, IServerRoom, IRoom } from '../../../definitions';
+import { ISubscription, IServerSubscription, IServerRoom, IRoom, IOmnichannelRoom } from '../../../definitions';
 import { compareServerVersion } from './compareServerVersion';
 
-export const merge = (subscription: ISubscription | IServerSubscription, room?: IRoom | IServerRoom): ISubscription => {
+export const merge = (
+	subscription: ISubscription | IServerSubscription,
+	room?: IRoom | IServerRoom | IOmnichannelRoom
+): ISubscription => {
 	const serverVersion = reduxStore.getState().server.version as string;
 	const mergedSubscription: ISubscription = EJSON.fromJSONValue(subscription);
 
@@ -44,7 +47,9 @@ export const merge = (subscription: ISubscription | IServerSubscription, room?:
 				: lastRoomUpdate;
 		}
 		mergedSubscription.ro = room?.ro ?? false;
-		mergedSubscription.broadcast = room?.broadcast;
+		if (room && 'broadcast' in room) {
+			mergedSubscription.broadcast = room?.broadcast;
+		}
 		mergedSubscription.encrypted = room?.encrypted;
 		mergedSubscription.e2eKeyId = room?.e2eKeyId;
 		mergedSubscription.avatarETag = room?.avatarETag;
@@ -77,6 +82,9 @@ export const merge = (subscription: ISubscription | IServerSubscription, room?:
 			mergedSubscription.tags = room.tags;
 		}
 		mergedSubscription.sysMes = room?.sysMes;
+		if (room && 'source' in room) {
+			mergedSubscription.source = room?.source;
+		}
 	}
 
 	if (!mergedSubscription.name) {

app/lib/notifications/push.ts

@@ -46,7 +46,7 @@ class PushNotification {
 
 		Notifications.events().registerNotificationReceivedForeground(
 			(notification: Notification, completion: (response: NotificationCompletion) => void) => {
-				completion({ alert: true, sound: true, badge: false });
+				completion({ alert: false, sound: false, badge: false });
 			}
 		);
 

app/lib/services/restApi.ts

@@ -743,7 +743,8 @@ export const saveAutoTranslate = ({
 	options?: { defaultLanguage: string };
 }) => sdk.methodCallWrapper('autoTranslate.saveSettings', rid, field, value, options ?? null);
 
-export const getSupportedLanguagesAutoTranslate = () => sdk.methodCallWrapper('autoTranslate.getSupportedLanguages', 'en');
+export const getSupportedLanguagesAutoTranslate = (): Promise<{ language: string; name: string }[]> =>
+	sdk.methodCallWrapper('autoTranslate.getSupportedLanguages', 'en');
 
 export const translateMessage = (message: any, targetLanguage: string) =>
 	sdk.methodCallWrapper('autoTranslate.translateMessage', message, targetLanguage);

app/presentation/KeyboardView.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from '@codler/react-native-keyboard-aware-scroll-view';
-
-import scrollPersistTaps from '../utils/scrollPersistTaps';
-
-interface IKeyboardViewProps extends KeyboardAwareScrollViewProps {
-	keyboardVerticalOffset?: number;
-	scrollEnabled?: boolean;
-	children: React.ReactNode;
-}
-
-export default class KeyboardView extends React.PureComponent<IKeyboardViewProps, any> {
-	render() {
-		const { style, contentContainerStyle, scrollEnabled, keyboardVerticalOffset, children } = this.props;
-
-		return (
-			<KeyboardAwareScrollView
-				{...scrollPersistTaps}
-				style={style}
-				contentContainerStyle={contentContainerStyle}
-				scrollEnabled={scrollEnabled}
-				alwaysBounceVertical={false}
-				extraHeight={keyboardVerticalOffset}>
-				{children}
-			</KeyboardAwareScrollView>
-		);
-	}
-}

app/presentation/RoomItem/IconOrAvatar.js

@@ -18,7 +18,8 @@ const IconOrAvatar = ({
 	teamMain,
 	showLastMessage,
 	theme,
-	displayMode
+	displayMode,
+	sourceType
 }) => {
 	if (showAvatar) {
 		return (
@@ -38,6 +39,7 @@ const IconOrAvatar = ({
 					teamMain={teamMain}
 					size={24}
 					style={{ marginRight: 12 }}
+					sourceType={sourceType}
 				/>
 			</View>
 		);

app/presentation/RoomItem/RoomItem.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import styles from './styles';
 import Wrapper from './Wrapper';
-import UnreadBadge from '../UnreadBadge';
+import UnreadBadge from '../../containers/UnreadBadge';
 import TypeIcon from './TypeIcon';
 import LastMessage from './LastMessage';
 import Title from './Title';
@@ -12,7 +12,7 @@ import Touchable from './Touchable';
 import Tag from './Tag';
 import I18n from '../../i18n';
 import { DisplayMode } from '../../lib/constants';
-import { TUserStatus } from '../../definitions';
+import { TUserStatus, IOmnichannelSource } from '../../definitions';
 import { TSupportedThemes } from '../../theme';
 
 interface IRoomItem {
@@ -62,6 +62,7 @@ interface IRoomItem {
 	size?: number;
 	showAvatar: boolean;
 	displayMode: string;
+	sourceType: IOmnichannelSource;
 }
 
 const RoomItem = ({
@@ -102,7 +103,8 @@ const RoomItem = ({
 	teamMain,
 	autoJoin,
 	showAvatar,
-	displayMode
+	displayMode,
+	sourceType
 }: IRoomItem) => (
 	<Touchable
 		onPress={onPress}
@@ -133,12 +135,20 @@ const RoomItem = ({
 			teamMain={teamMain}
 			displayMode={displayMode}
 			showAvatar={showAvatar}
-			showLastMessage={showLastMessage}>
+			showLastMessage={showLastMessage}
+			sourceType={sourceType}>
 			{showLastMessage && displayMode === DisplayMode.Expanded ? (
 				<>
 					<View style={styles.titleContainer}>
 						{showAvatar ? (
-							<TypeIcon type={type} prid={prid} status={status} isGroupChat={isGroupChat} teamMain={teamMain} />
+							<TypeIcon
+								type={type}
+								prid={prid}
+								status={status}
+								isGroupChat={isGroupChat}
+								teamMain={teamMain}
+								sourceType={sourceType}
+							/>
 						) : null}
 						<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 						{autoJoin ? <Tag testID='auto-join-tag' name={I18n.t('Auto-join')} /> : null}
@@ -174,6 +184,7 @@ const RoomItem = ({
 						teamMain={teamMain}
 						size={22}
 						style={{ marginRight: 8 }}
+						sourceType={sourceType}
 					/>
 					<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 					{autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null}

app/presentation/RoomItem/TypeIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TUserStatus } from '../../definitions';
+import { TUserStatus, IOmnichannelSource } from '../../definitions';
 import RoomTypeIcon from '../../containers/RoomTypeIcon';
 
 interface ITypeIcon {
@@ -11,9 +11,10 @@ interface ITypeIcon {
 	teamMain: boolean;
 	size?: number;
 	style?: object;
+	sourceType?: IOmnichannelSource;
 }
 
-const TypeIcon = React.memo(({ type, prid, status, isGroupChat, teamMain, size, style }: ITypeIcon) => (
+const TypeIcon = React.memo(({ type, prid, status, isGroupChat, teamMain, size, style, sourceType }: ITypeIcon) => (
 	<RoomTypeIcon
 		type={prid ? 'discussion' : type}
 		isGroupChat={isGroupChat}
@@ -21,6 +22,7 @@ const TypeIcon = React.memo(({ type, prid, status, isGroupChat, teamMain, size,
 		teamMain={teamMain}
 		size={size}
 		style={style}
+		sourceType={sourceType}
 	/>
 ));
 

app/presentation/RoomItem/Wrapper.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { DisplayMode, themes } from '../../lib/constants';
+import { IOmnichannelSource } from '../../definitions';
 import { TSupportedThemes } from '../../theme';
 import IconOrAvatar from './IconOrAvatar';
 import styles from './styles';
@@ -21,6 +22,7 @@ interface IWrapper {
 	isGroupChat: boolean;
 	teamMain: boolean;
 	showAvatar: boolean;
+	sourceType: IOmnichannelSource;
 }
 
 const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => (

app/presentation/RoomItem/index.tsx

@@ -218,6 +218,7 @@ class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 				autoJoin={autoJoin}
 				showAvatar={showAvatar}
 				displayMode={displayMode}
+				sourceType={item.source}
 			/>
 		);
 	}

app/utils/avatar.ts

@@ -2,7 +2,7 @@ import { SubscriptionType } from '../definitions/ISubscription';
 import { IAvatar } from '../containers/Avatar/interfaces';
 import { compareServerVersion } from '../lib/methods/helpers/compareServerVersion';
 
-const formatUrl = (url: string, size: number, query: string) => `${url}?format=png&size=${size}${query}`;
+const formatUrl = (url: string, size: number, query?: string) => `${url}?format=png&size=${size}${query}`;
 
 export const avatarURL = ({
 	type,
@@ -14,11 +14,16 @@ export const avatarURL = ({
 	avatarETag,
 	rid,
 	blockUnauthenticatedAccess,
-	serverVersion
+	serverVersion,
+	externalProviderUrl
 }: IAvatar): string => {
 	let room;
 	if (type === SubscriptionType.DIRECT) {
 		room = text;
+		if (externalProviderUrl) {
+			const externalUri = externalProviderUrl.trim().replace(/\/+$/, '').replace('{username}', room);
+			return formatUrl(`${externalUri}`, size);
+		}
 	} else if (rid && !compareServerVersion(serverVersion, 'lowerThan', '3.6.0')) {
 		room = `room/${rid}`;
 	} else {

app/views/CreateChannelView.tsx

@@ -8,7 +8,7 @@ import TextInput from '../presentation/TextInput';
 import Loading from '../containers/Loading';
 import { createChannelRequest } from '../actions/createChannel';
 import { removeUser } from '../actions/selectedUsers';
-import KeyboardView from '../presentation/KeyboardView';
+import KeyboardView from '../containers/KeyboardView';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import I18n from '../i18n';
 import UserItem from '../containers/UserItem';

app/views/CreateDiscussionView/index.tsx

@@ -4,7 +4,7 @@ import { ScrollView, Switch, Text } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
 
 import Loading from '../../containers/Loading';
-import KeyboardView from '../../presentation/KeyboardView';
+import KeyboardView from '../../containers/KeyboardView';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import I18n from '../../i18n';
 import * as HeaderButton from '../../containers/HeaderButton';

app/views/E2EEnterYourPasswordView.tsx

@@ -12,7 +12,7 @@ import StatusBar from '../containers/StatusBar';
 import TextInput from '../containers/TextInput';
 import { IBaseScreen } from '../definitions';
 import I18n from '../i18n';
-import KeyboardView from '../presentation/KeyboardView';
+import KeyboardView from '../containers/KeyboardView';
 import { E2EEnterYourPasswordStackParamList } from '../stacks/types';
 import { withTheme } from '../theme';
 import { events, logEvent } from '../utils/log';

app/views/LivechatEditView.tsx

@@ -8,7 +8,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
 import TextInput from '../containers/TextInput';
-import KeyboardView from '../presentation/KeyboardView';
+import KeyboardView from '../containers/KeyboardView';
 import RocketChat from '../lib/rocketchat';
 import I18n from '../i18n';
 import { LISTENER } from '../containers/Toast';

app/views/NotificationPreferencesView/index.tsx

@@ -16,7 +16,7 @@ import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import SafeAreaView from '../../containers/SafeAreaView';
 import log, { events, logEvent } from '../../utils/log';
 import sharedStyles from '../Styles';
-import { OPTIONS } from './options';
+import { IOptionsField, OPTIONS } from './options';
 import { ChatsStackParamList } from '../../stacks/types';
 import { IRoomNotifications } from '../../definitions';
 
@@ -131,10 +131,10 @@ class NotificationPreferencesView extends React.Component<INotificationPreferenc
 	renderPickerOption = (key: string) => {
 		const { room } = this.state;
 		const { theme } = this.props;
-		const text = room[key] ? OPTIONS[key].find((option: any) => option.value === room[key]) : OPTIONS[key][0];
+		const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : (OPTIONS[key][0] as IOptionsField);
 		return (
 			<Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>
-				{I18n.t(text?.label, { defaultValue: text?.label, second: text?.second })}
+				{text?.label ? I18n.t(text?.label, { defaultValue: text?.label, second: text?.second }) : text?.label}
 			</Text>
 		);
 	};

app/views/ProfileView/index.tsx

@@ -10,7 +10,7 @@ import omit from 'lodash/omit';
 import { StackNavigationOptions } from '@react-navigation/stack';
 
 import Touch from '../../utils/touch';
-import KeyboardView from '../../presentation/KeyboardView';
+import KeyboardView from '../../containers/KeyboardView';
 import sharedStyles from '../Styles';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import { showConfirmationAlert, showErrorAlert } from '../../utils/info';

app/views/RoomActionsView/index.tsx

@@ -16,7 +16,15 @@ import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import SafeAreaView from '../../containers/SafeAreaView';
 import Status from '../../containers/Status';
 import StatusBar from '../../containers/StatusBar';
-import { IApplicationState, IBaseScreen, IRoom, ISubscription, IUser, TSubscriptionModel } from '../../definitions';
+import {
+	IApplicationState,
+	IBaseScreen,
+	IRoom,
+	ISubscription,
+	IUser,
+	SubscriptionType,
+	TSubscriptionModel
+} from '../../definitions';
 import { withDimensions } from '../../dimensions';
 import I18n from '../../i18n';
 import database from '../../lib/database';
@@ -33,6 +41,7 @@ import styles from './styles';
 import { ERoomType } from '../../definitions/ERoomType';
 import { E2E_ROOM_TYPES, SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
 import { compareServerVersion } from '../../lib/methods/helpers/compareServerVersion';
+import { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
 
 interface IRoomActionsViewProps extends IBaseScreen<ChatsStackParamList, 'RoomActionsView'> {
 	userId: string;
@@ -134,15 +143,24 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 		this.mounted = true;
 		const { room, member } = this.state;
 		if (room.rid) {
-			if (!room.id && !this.isOmnichannelPreview) {
+			if (!room.id) {
-				try {
+				if (room.t === SubscriptionType.OMNICHANNEL) {
-					const result = await RocketChat.getChannelInfo(room.rid);
+					if (!this.isOmnichannelPreview) {
-					if (result.success) {
+						const result = await getSubscriptionByRoomId(room.rid);
-						// @ts-ignore
+						if (result) {
-						this.setState({ room: { ...result.channel, rid: result.channel._id } });
+							this.setState({ room: result });
+						}
+					}
+				} else {
+					try {
+						const result = await RocketChat.getChannelInfo(room.rid);
+						if (result.success) {
+							// @ts-ignore
+							this.setState({ room: { ...result.channel, rid: result.channel._id } });
+						}
+					} catch (e) {
+						log(e);
 					}
-				} catch (e) {
-					log(e);
 				}
 			}
 
@@ -686,7 +704,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 
 	renderRoomInfo = () => {
 		const { room, member } = this.state;
-		const { rid, name, t, topic } = room;
+		const { rid, name, t, topic, source } = room;
 		const { theme, fontScale } = this.props;
 
 		const avatar = RocketChat.getRoomAvatar(room);
@@ -728,7 +746,12 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 								</Text>
 							) : (
 								<View style={styles.roomTitleRow}>
-									<RoomTypeIcon type={room.prid ? 'discussion' : room.t} teamMain={room.teamMain} status={room.visitor?.status} />
+									<RoomTypeIcon
+										type={room.prid ? 'discussion' : room.t}
+										teamMain={room.teamMain}
+										status={room.visitor?.status}
+										sourceType={source}
+									/>
 									<Text style={[styles.roomTitle, { color: themes[theme].titleText }]} numberOfLines={1}>
 										{RocketChat.getRoomTitle(room)}
 									</Text>

app/views/RoomInfoEditView/index.tsx

@@ -22,7 +22,7 @@ import I18n from '../../i18n';
 import database from '../../lib/database';
 import { CustomIcon } from '../../lib/Icons';
 import RocketChat from '../../lib/rocketchat';
-import KeyboardView from '../../presentation/KeyboardView';
+import KeyboardView from '../../containers/KeyboardView';
 import { TSupportedPermissions } from '../../reducers/permissions';
 import { ModalStackParamList } from '../../stacks/MasterDetailStack/types';
 import { ChatsStackParamList } from '../../stacks/types';

app/views/RoomInfoView/Channel.tsx

@@ -25,7 +25,7 @@ const Channel = ({ room }: { room: ISubscription }) => {
 			/>
 			<Item
 				label={I18n.t('Broadcast_Channel')}
-				content={room.broadcast && I18n.t('Broadcast_channel_Description')}
+				content={room.broadcast ? I18n.t('Broadcast_channel_Description') : ''}
 				testID='room-info-view-broadcast'
 			/>
 		</>

app/views/RoomInfoView/index.tsx

@@ -68,6 +68,7 @@ const getRoomTitle = ({ room, type, name, username, statusText, theme }: IGetRoo
 				teamMain={room.teamMain}
 				key='room-info-type'
 				status={room.visitor?.status}
+				sourceType={room.source}
 			/>
 			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme].titleText }]} key='room-info-name'>
 				{RocketChat.getRoomTitle(room)}
@@ -422,6 +423,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 	render() {
 		const { room, roomUser } = this.state;
 		const { theme } = this.props;
+
 		return (
 			<ScrollView style={[styles.scroll, { backgroundColor: themes[theme].backgroundColor }]}>
 				<StatusBar />

app/views/RoomView/index.tsx

@@ -70,6 +70,7 @@ import {
 	IBaseScreen,
 	ILoggedUser,
 	IMessage,
+	IOmnichannelSource,
 	ISubscription,
 	IVisitor,
 	SubscriptionType,
@@ -498,6 +499,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		let avatar: string | undefined;
 		let visitor: IVisitor | undefined;
 		let status: string | undefined;
+		let sourceType: IOmnichannelSource | undefined;
 		if ('id' in room) {
 			subtitle = room.topic;
 			t = room.t;
@@ -510,6 +512,12 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			status = room.status;
 		}
 
+		if ('source' in room) {
+			t = room.t;
+			sourceType = room.source;
+			visitor = room.visitor;
+		}
+
 		let numIconsRight = 2;
 		if (tmid || (status && joined)) {
 			numIconsRight = 1;
@@ -555,6 +563,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					isGroupChat={isGroupChat}
 					onPress={this.goRoomActionsView}
 					testID={`room-view-title-${title}`}
+					sourceType={sourceType}
 				/>
 			),
 			headerRight: () => (

app/views/RoomsListView/ListHeader/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useTheme } from '../../../theme';
 import * as List from '../../../containers/List';
-import OmnichannelStatus from '../../../ee/omnichannel/containers/OmnichannelStatus';
+import OmnichannelStatus from '../../../ee/omnichannel/containers/OmnichannelHeader';
 import { IUser } from '../../../definitions';
 import { E2E_BANNER_TYPE, themes } from '../../../lib/constants';
 

app/views/RoomsListView/index.tsx

@@ -40,9 +40,7 @@ import { goRoom } from '../../utils/goRoom';
 import SafeAreaView from '../../containers/SafeAreaView';
 import Header, { getHeaderTitlePosition } from '../../containers/Header';
 import { withDimensions } from '../../dimensions';
-import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
 import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry';
-import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../ee/omnichannel/lib';
 import { IApplicationState, IBaseScreen, ISubscription, IUser, RootEnum, TSubscriptionModel } from '../../definitions';
 import styles from './styles';
 import ServerDropdown from './ServerDropdown';
@@ -745,30 +743,12 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 	goQueue = () => {
 		logEvent(events.RL_GO_QUEUE);
-		const { navigation, isMasterDetail, queueSize, inquiryEnabled, user } = this.props;
+		const { navigation, isMasterDetail, inquiryEnabled } = this.props;
-
-		// if not-available, prompt to change to available
-		if (!isOmnichannelStatusAvailable(user)) {
-			showConfirmationAlert({
-				message: I18n.t('Omnichannel_enable_alert'),
-				confirmationText: I18n.t('Yes'),
-				onPress: async () => {
-					try {
-						await changeLivechatStatus();
-					} catch {
-						// Do nothing
-					}
-				}
-			});
-		}
 
 		if (!inquiryEnabled) {
 			return;
 		}
-		// prevent navigation to empty list
+
-		if (!queueSize) {
-			return showErrorAlert(I18n.t('Queue_is_empty'), I18n.t('Oops'));
-		}
 		if (isMasterDetail) {
 			navigation.navigate('ModalStackNavigator', { screen: 'QueueListView' });
 		} else {

app/views/RoomsListView/styles.ts

@@ -24,13 +24,6 @@ export default StyleSheet.create({
 	backdrop: {
 		...StyleSheet.absoluteFillObject
 	},
-	queueIcon: {
-		marginHorizontal: 12
-	},
-	omnichannelRightContainer: {
-		flexDirection: 'row',
-		alignItems: 'center'
-	},
 	groupTitleContainer: {
 		paddingHorizontal: 12,
 		paddingTop: 17,

app/views/SetUsernameView.tsx

@@ -15,7 +15,7 @@ import TextInput from '../containers/TextInput';
 import { IApplicationState } from '../definitions';
 import I18n from '../i18n';
 import RocketChat from '../lib/rocketchat';
-import KeyboardView from '../presentation/KeyboardView';
+import KeyboardView from '../containers/KeyboardView';
 import { getUserSelector } from '../selectors/login';
 import { TSupportedThemes, withTheme } from '../theme';
 import { isTablet } from '../utils/deviceInfo';

app/views/UserNotificationPreferencesView/index.tsx

@@ -72,7 +72,11 @@ class UserNotificationPreferencesView extends React.Component<
 	renderPickerOption = (key: TKey) => {
 		const { theme } = this.props;
 		const text = this.findDefaultOption(key);
-		return <Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>{I18n.t(text?.label)}</Text>;
+		return (
+			<Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>
+				{text?.label ? I18n.t(text?.label) : text?.label}
+			</Text>
+		);
 	};
 
 	pickerSelection = (title: string, key: TKey) => {
@@ -82,7 +86,9 @@ class UserNotificationPreferencesView extends React.Component<
 
 		const defaultOption = this.findDefaultOption(key);
 		if (OPTIONS[key][0]?.value !== 'default') {
-			const defaultValue = { label: `${I18n.t('Default')} (${I18n.t(defaultOption?.label)})` } as {
+			const defaultValue = {
+				label: `${I18n.t('Default')} (${defaultOption?.label ? I18n.t(defaultOption?.label) : defaultOption?.label})`
+			} as {
 				label: string;
 				value: string;
 			};

ios/Podfile.lock

@@ -582,6 +582,8 @@ PODS:
     - React
   - RNScreens (2.9.0):
     - React
+  - RNSVG (12.3.0):
+    - React-Core
   - RNVectorIcons (8.1.0):
     - React-Core
   - SDWebImage (5.8.4):
@@ -712,6 +714,7 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNRootView (from `../node_modules/rn-root-view`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - "simdjson (from `../node_modules/@nozbe/simdjson`)"
   - UMAppLoader (from `../node_modules/unimodules-app-loader/ios`)
@@ -916,6 +919,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/rn-root-view"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   simdjson:
@@ -1046,6 +1051,7 @@ SPEC CHECKSUMS:
   RNReanimated: 241c586663f44f19a53883c63375fdd041253960
   RNRootView: 895a4813dedeaca82db2fa868ca1c333d790e494
   RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
+  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SDWebImage: cf6922231e95550934da2ada0f20f2becf2ceba9
   SDWebImageWebPCoder: 36f8f47bd9879a8aea6044765c1351120fd8e3a8

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -85,8 +85,10 @@
 		7A0D62D2242AB187006D5C06 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 7A0D62D1242AB187006D5C06 /* LaunchScreen.storyboard */; };
 		7A14FCED257FEB3A005BDCD4 /* Experimental.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 7A14FCEC257FEB3A005BDCD4 /* Experimental.xcassets */; };
 		7A14FCF4257FEB59005BDCD4 /* Official.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 7A14FCF3257FEB59005BDCD4 /* Official.xcassets */; };
-		7A3268F624F04FFE0050E241 /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A3268F524F04FFE0050E241 /* custom.ttf */; };
+		7A610CD227ECE38100B8ABDD /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A610CD127ECE38100B8ABDD /* custom.ttf */; };
-		7A3268F724F04FFE0050E241 /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A3268F524F04FFE0050E241 /* custom.ttf */; };
+		7A610CD327ECE38100B8ABDD /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A610CD127ECE38100B8ABDD /* custom.ttf */; };
+		7A610CD427ECE38100B8ABDD /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A610CD127ECE38100B8ABDD /* custom.ttf */; };
+		7A610CD527ECE38100B8ABDD /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A610CD127ECE38100B8ABDD /* custom.ttf */; };
 		7AAB3E15257E6A6E00707CF6 /* Sender.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1E01C8282511304100FEF824 /* Sender.swift */; };
 		7AAB3E16257E6A6E00707CF6 /* Request.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1E680ED82512990700C9257A /* Request.swift */; };
 		7AAB3E17257E6A6E00707CF6 /* ReplyNotification.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1ED00BB02513E04400A1331F /* ReplyNotification.swift */; };
@@ -129,7 +131,6 @@
 		7AAB3E3E257E6A6E00707CF6 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 06BB44DD4855498082A744AD /* libz.tbd */; };
 		7AAB3E3F257E6A6E00707CF6 /* libWatermelonDB.a in Frameworks */ = {isa = PBXBuildFile; fileRef = BA7E862283664608B3894E34 /* libWatermelonDB.a */; };
 		7AAB3E42257E6A6E00707CF6 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		7AAB3E43257E6A6E00707CF6 /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A3268F524F04FFE0050E241 /* custom.ttf */; };
 		7AAB3E44257E6A6E00707CF6 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 7A006F13229C83B600803143 /* GoogleService-Info.plist */; };
 		7AAB3E45257E6A6E00707CF6 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 7A0D62D1242AB187006D5C06 /* LaunchScreen.storyboard */; };
 		7AAB3E49257E6A6E00707CF6 /* ShareRocketChatRN.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 1EC6ACB022CB9FC300A41C61 /* ShareRocketChatRN.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
@@ -265,7 +266,7 @@
 		7A0D62D1242AB187006D5C06 /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = LaunchScreen.storyboard; sourceTree = "<group>"; };
 		7A14FCEC257FEB3A005BDCD4 /* Experimental.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Experimental.xcassets; sourceTree = "<group>"; };
 		7A14FCF3257FEB59005BDCD4 /* Official.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Official.xcassets; sourceTree = "<group>"; };
-		7A3268F524F04FFE0050E241 /* custom.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = custom.ttf; sourceTree = "<group>"; };
+		7A610CD127ECE38100B8ABDD /* custom.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = custom.ttf; sourceTree = "<group>"; };
 		7AAA749C23043B1D00F1ADE9 /* RocketChatRN-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "RocketChatRN-Bridging-Header.h"; sourceTree = "<group>"; };
 		7AAB3E52257E6A6E00707CF6 /* Rocket.Chat.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Rocket.Chat.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		7ACD4853222860DE00442C55 /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -476,7 +477,6 @@
 				B9D2BCED708759575760AFDE /* Pods-defaults-ShareRocketChatRN.debug.xcconfig */,
 				1FD576942AB7B278424D7D91 /* Pods-defaults-ShareRocketChatRN.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -520,7 +520,7 @@
 		AF5E16F0398347E6A80C8CBE /* Resources */ = {
 			isa = PBXGroup;
 			children = (
-				7A3268F524F04FFE0050E241 /* custom.ttf */,
+				7A610CD127ECE38100B8ABDD /* custom.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -731,7 +731,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				7A3268F624F04FFE0050E241 /* custom.ttf in Resources */,
+				7A610CD227ECE38100B8ABDD /* custom.ttf in Resources */,
 				7A14FCED257FEB3A005BDCD4 /* Experimental.xcassets in Resources */,
 				7A006F14229C83B600803143 /* GoogleService-Info.plist in Resources */,
 				7A0D62D2242AB187006D5C06 /* LaunchScreen.storyboard in Resources */,
@@ -742,7 +742,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				7A3268F724F04FFE0050E241 /* custom.ttf in Resources */,
+				7A610CD327ECE38100B8ABDD /* custom.ttf in Resources */,
 				1EC6ACB722CB9FC300A41C61 /* MainInterface.storyboard in Resources */,
 				1ED59D4C22CBA77D00C54289 /* GoogleService-Info.plist in Resources */,
 			);
@@ -753,6 +753,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				1E6CC61F2513DBF400965591 /* GoogleService-Info.plist in Resources */,
+				7A610CD427ECE38100B8ABDD /* custom.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -761,8 +762,8 @@
 			buildActionMask = 2147483647;
 			files = (
 				7A14FCF4257FEB59005BDCD4 /* Official.xcassets in Resources */,
+				7A610CD527ECE38100B8ABDD /* custom.ttf in Resources */,
 				7AAB3E42257E6A6E00707CF6 /* Images.xcassets in Resources */,
-				7AAB3E43257E6A6E00707CF6 /* custom.ttf in Resources */,
 				7AAB3E44257E6A6E00707CF6 /* GoogleService-Info.plist in Resources */,
 				7AAB3E45257E6A6E00707CF6 /* LaunchScreen.storyboard in Resources */,
 			);
@@ -1572,7 +1573,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/rn-extensions-share/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase/**",
-					"$PODS_CONFIGURATION_BUILD_DIR/Firebase",
+					$PODS_CONFIGURATION_BUILD_DIR/Firebase,
 				);
 				INFOPLIST_FILE = ShareRocketChatRN/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
@@ -1638,7 +1639,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/rn-extensions-share/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase/**",
-					"$PODS_CONFIGURATION_BUILD_DIR/Firebase",
+					$PODS_CONFIGURATION_BUILD_DIR/Firebase,
 				);
 				INFOPLIST_FILE = ShareRocketChatRN/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;

package.json

@@ -114,6 +114,7 @@
 		"react-native-scrollable-tab-view": "^1.0.0",
 		"react-native-simple-crypto": "RocketChat/react-native-simple-crypto#0.5.0",
 		"react-native-slowlog": "^1.0.2",
+		"react-native-svg": "^12.3.0",
 		"react-native-ui-lib": "RocketChat/react-native-ui-lib#minor-improvements",
 		"react-native-unimodules": "^0.14.8",
 		"react-native-vector-icons": "8.1.0",
@@ -148,6 +149,7 @@
 		"@testing-library/react-native": "^9.0.0",
 		"@types/bytebuffer": "^5.0.43",
 		"@types/ejson": "^2.1.3",
+		"@types/i18n-js": "^3.8.2",
 		"@types/jest": "^26.0.24",
 		"@types/lodash": "^4.14.171",
 		"@types/react": "^17.0.14",

storybook/stories/RoomItem.js

@@ -182,3 +182,18 @@ stories.add('Expanded Room Item without Avatar', () => (
 		/>
 	</>
 ));
+
+stories.add('Omnichannel Icon', () => (
+	<>
+		<RoomItem type='l' sourceType={{ type: 'widget' }} status='online' />
+		<RoomItem type='l' sourceType={{ type: 'widget' }} status='away' />
+		<RoomItem type='l' sourceType={{ type: 'widget' }} status='loading' />
+		<RoomItem type='l' sourceType={{ type: 'widget' }} />
+		<RoomItem type='l' sourceType={{ type: 'email' }} status='online' />
+		<RoomItem type='l' sourceType={{ type: 'email' }} />
+		<RoomItem type='l' sourceType={{ type: 'sms' }} status='online' />
+		<RoomItem type='l' sourceType={{ type: 'sms' }} />
+		<RoomItem type='l' sourceType={{ type: 'other' }} status='online' />
+		<RoomItem type='l' sourceType={{ type: 'other' }} />
+	</>
+));

storybook/stories/UnreadBadge.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import UnreadBadge from '../../app/presentation/UnreadBadge';
+import UnreadBadge from '../../app/containers/UnreadBadge';
 import { ThemeContext } from '../../app/theme';
 
 const stories = storiesOf('Unread Badge', module);

tsconfig.json

@@ -67,7 +67,8 @@
 
 		/* Advanced Options */
 		"skipLibCheck": true /* Skip type checking of declaration files. */,
-		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+		"resolveJsonModule": true
 	},
 	"exclude": ["node_modules", "e2e/docker", "__mocks__"]
 }

yarn.lock

@@ -4514,6 +4514,11 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
   integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
+"@types/i18n-js@^3.8.2":
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/@types/i18n-js/-/i18n-js-3.8.2.tgz#957a3fa268124d09e3b3b34695f0184118f4bc4f"
+  integrity sha512-F+AuFCjllE1A0W/YUxJB13q2t7cWITMqXOTXQ/InfXxxT8nXrrqL7s/8Pv6XThGjFPemukElwk6QlMOKCEg7eQ==
+
 "@types/is-function@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
@@ -6299,7 +6304,7 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-boolbase@~1.0.0:
+boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
@@ -7656,6 +7661,17 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+css-select@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
+  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.1.0"
+    domhandler "^4.3.0"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
 css-to-react-native@^2.2.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
@@ -7665,11 +7681,24 @@ css-to-react-native@^2.2.1:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^3.3.0"
 
+css-tree@^1.0.0-alpha.39:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+css-what@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
+  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -8069,6 +8098,15 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
@@ -8089,6 +8127,11 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
+domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -8103,6 +8146,13 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+domhandler@^4.2.0, domhandler@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -8119,6 +8169,15 @@ domutils@^1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
@@ -12364,6 +12423,11 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 "mdurl@~ 1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -13248,6 +13312,13 @@ npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nth-check@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -14958,6 +15029,14 @@ react-native-slowlog@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz#5520979e3ef9d5273495d431ff3be34f02e35c89"
   integrity sha1-VSCXnj751Sc0ldQx/zvjTwLjXIk=
 
+react-native-svg@^12.3.0:
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.3.0.tgz#40f657c5d1ee366df23f3ec8dae76fd276b86248"
+  integrity sha512-ESG1g1j7/WLD7X3XRFTQHVv0r6DpbHNNcdusngAODIxG88wpTWUZkhcM3A2HJTb+BbXTFDamHv7FwtRKWQ/ALg==
+  dependencies:
+    css-select "^4.2.1"
+    css-tree "^1.0.0-alpha.39"
+
 react-native-swipe-gestures@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"