[NEW] Introduce Widget API method to manage Business Units

src/lib/hooks.js

@@ -69,6 +69,19 @@ const api = {
 		updateIframeGuestData({ department });
 	},
 
+	async setBusinessUnit(newBusinessUnit) {
+		if (!newBusinessUnit || !newBusinessUnit.trim().length) {
+			throw new Error('Error! Invalid business ids');
+		}
+
+		const { businessUnit: existingBusinessUnit } = store.state;
+		if (existingBusinessUnit === newBusinessUnit) {
+			return;
+		}
+		store.setState({ businessUnit: newBusinessUnit });
+		await loadConfig();
+	},
+
 	clearDepartment() {
 		updateIframeGuestData({ department: '' });
 	},

src/lib/main.js

@@ -10,6 +10,7 @@ import constants from './constants';
 export const loadConfig = async () => {
 	const {
 		token,
+		businessUnit = null,
 	} = store.state;
 
 	Livechat.credentials.token = token;
@@ -21,7 +22,10 @@ export const loadConfig = async () => {
 		resources: { sound: src = null } = {},
 		queueInfo,
 		...config
-	} = await Livechat.config({ token });
+	} = await Livechat.config({
+		token,
+		...businessUnit && { businessUnit },
+	});
 
 	await store.setState({
 		config,

src/lib/room.js

@@ -26,7 +26,7 @@ export const closeChat = async ({ transcriptRequested } = {}) => {
 
 	if (clearLocalStorageWhenChatEnded) {
 		// exclude UI-affecting flags
-		const { minimized, visible, undocked, expanded, ...initial } = initialState();
+		const { minimized, visible, undocked, expanded, businessUnit, ...initial } = initialState();
 		await store.setState(initial);
 	}
 

src/store/index.js

@@ -35,6 +35,7 @@ export const initialState = () => ({
 	unread: null,
 	incomingCallAlert: null,
 	ongoingCall: null,	// TODO: store call info like url, startTime, timeout, etc here
+	businessUnit: null,
 });
 
 const dontPersist = ['messages', 'typing', 'loading', 'alerts', 'unread', 'noMoreMessages', 'modal', 'incomingCallAlert', 'ongoingCall'];

src/widget.js

@@ -263,6 +263,10 @@ function setDepartment(department) {
 	callHook('setDepartment', department);
 }
 
+function setBusinessUnit(businessUnits) {
+	callHook('setBusinessUnit', businessUnits);
+}
+
 function setGuestToken(token) {
 	callHook('setGuestToken', token);
 }
@@ -334,6 +338,10 @@ function initialize(params) {
 			case 'department':
 				setDepartment(params[method]);
 				continue;
+			case 'businessUnit': {
+				setBusinessUnit(params[method]);
+				continue;
+			}
 			case 'guestToken':
 				setGuestToken(params[method]);
 				continue;
@@ -436,6 +444,7 @@ window.RocketChat.livechat = {
 	hideWidget,
 	maximizeWidget,
 	minimizeWidget,
+	setBusinessUnit,
 
 	// callbacks
 	onChatMaximized(fn) { registerCallback('chat-maximized', fn); },

widget-demo.html

@@ -51,6 +51,15 @@
 			j.src = 'build/rocketchat-livechat.min.js?_=' + Math.random();
 			h.parentNode.insertBefore(j, h);
 		})(window, document, 'script', 'http://localhost:8080');
+		RocketChat(function() {
+			this.setTheme({
+				color: '#04436A', // widget title background color
+				fontColor: '#FFFFFF', // widget title font color
+				iconColor: '#1d74f5', // widget icon color
+				title: "Welcome to Rocket.Chat", // default widget title when the status of service is online
+				offlineTitle: "Service is offline", // default widget title when the status of service is online
+			});
+		});
 	</script>
 </body>