[NEW] Introduce Widget API method to manage Business Units (#677)

Co-authored-by: Kevin Aleman <kevin.aleman@rocket.chat>
Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>

src/lib/hooks.js

@@ -2,7 +2,7 @@ import { Livechat } from '../api';
 import { store } from '../store';
 import CustomFields from './customFields';
 import { setWidgetLanguage } from './locale';
-import { loadConfig } from './main';
+import { loadConfig, updateBusinessUnit } from './main';
 import { parentCall } from './parentCall';
 import { createToken } from './random';
 import Triggers from './triggers';
@@ -69,6 +69,21 @@ const api = {
 		updateIframeGuestData({ department });
 	},
 
+	async setBusinessUnit(newBusinessUnit) {
+		if (!newBusinessUnit || !newBusinessUnit.trim().length) {
+			throw new Error('Error! Invalid business ids');
+		}
+
+		const { businessUnit: existingBusinessUnit } = store.state;
+
+		return existingBusinessUnit !== newBusinessUnit && updateBusinessUnit(newBusinessUnit);
+	},
+
+	async clearBusinessUnit() {
+		const { businessUnit } = store.state;
+		return businessUnit && updateBusinessUnit();
+	},
+
 	clearDepartment() {
 		updateIframeGuestData({ department: '' });
 	},

src/lib/main.js

@@ -7,9 +7,43 @@ import I18n from '../i18n';
 import store from '../store';
 import constants from './constants';
 
+export const updateBusinessUnit = async (newBusinessUnit) => {
+	const {
+		token,
+		config: existingConfig,
+	} = store.state;
+	if (!token) {
+		throw new Error('Error! no livechat token found. please make sure you initialize widget first before setting business unit');
+	}
+
+	const { departments } = await Livechat.config({
+		token,
+		...newBusinessUnit && { businessUnit: newBusinessUnit },
+	});
+
+	if (newBusinessUnit) {
+		return store.setState({
+			config: {
+				...existingConfig,
+				departments,
+			},
+			businessUnit: newBusinessUnit,
+		});
+	}
+
+	await store.setState({
+		config: {
+			...existingConfig,
+			departments,
+		},
+	});
+	await store.unsetSinglePropInStateByName('businessUnit');
+};
+
 export const loadConfig = async () => {
 	const {
 		token,
+		businessUnit = null,
 	} = store.state;
 
 	Livechat.credentials.token = token;
@@ -21,7 +55,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/Store.js

@@ -78,6 +78,14 @@ export default class Store {
 		this.emit('change', [this._state, prevState, partialState]);
 	}
 
+	unsetSinglePropInStateByName(propName) {
+		const prevState = this._state;
+		delete prevState[propName];
+		this._state = { ...prevState };
+		this.persist();
+		this.emit('change', [this._state, prevState]);
+	}
+
 	setStoredState(storedState) {
 		const prevState = this._state;
 

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,14 @@ function setDepartment(department) {
 	callHook('setDepartment', department);
 }
 
+function setBusinessUnit(businessUnit) {
+	callHook('setBusinessUnit', businessUnit);
+}
+
+function clearBusinessUnit() {
+	callHook('clearBusinessUnit');
+}
+
 function setGuestToken(token) {
 	callHook('setGuestToken', token);
 }
@@ -334,6 +342,10 @@ function initialize(params) {
 			case 'department':
 				setDepartment(params[method]);
 				continue;
+			case 'businessUnit': {
+				setBusinessUnit(params[method]);
+				continue;
+			}
 			case 'guestToken':
 				setGuestToken(params[method]);
 				continue;
@@ -436,6 +448,8 @@ window.RocketChat.livechat = {
 	hideWidget,
 	maximizeWidget,
 	minimizeWidget,
+	setBusinessUnit,
+	clearBusinessUnit,
 
 	// 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>