Merge pull request #1743 from RocketChat/livechat-form-improvements

Livechat registration form improvements

packages/rocketchat-livechat/app/.meteor/packages

@@ -36,3 +36,5 @@ accounts-password
 standard-minifiers
 tap:i18n
 kevohagan:sweetalert
+ecmascript
+es5-shim

packages/rocketchat-livechat/app/.meteor/versions

@@ -27,6 +27,7 @@ ecmascript@0.1.6
 ecmascript-runtime@0.2.6
 ejson@1.0.7
 email@1.0.8
+es5-shim@4.1.14
 geojson-utils@1.0.4
 html-tools@1.0.5
 htmljs@1.0.5

packages/rocketchat-livechat/app/client/lib/chatMessages.coffee

@@ -93,7 +93,7 @@ class @ChatMessages
 							showError error.reason
 
 			if not Meteor.userId()
-				Meteor.call 'registerGuest', visitor.getToken(), (error, result) ->
+				Meteor.call 'livechat:registerGuest', { token: visitor.getToken() }, (error, result) ->
 					if error?
 						return showError error.reason
 

packages/rocketchat-livechat/app/client/lib/collections.coffee

@@ -2,3 +2,4 @@
 @ChatRoom = new Meteor.Collection 'rocketchat_room'
 @Settings = new Meteor.Collection 'rocketchat_settings'
 @Trigger = new Meteor.Collection 'rocketchat_livechat_trigger'
+@Department = new Meteor.Collection 'rocketchat_livechat_department'

packages/rocketchat-livechat/app/client/routes/router.coffee

@@ -9,4 +9,4 @@ FlowRouter.route '/livechat',
 	]
 
 	action: ->
-		BlazeLayout.render 'main', {center: 'room'}
+		BlazeLayout.render 'main', {center: 'livechatWindow'}

packages/rocketchat-livechat/app/client/stylesheets/main.less

@@ -1,4 +1,3 @@
-@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);
 @import "_variables.less";
 @import "utils/_lesshat.import.less";
 @import "utils/_reset.import.less";
@@ -13,11 +12,9 @@ html, body {
 	height: 100%;
 }
 body {
-	padding: 0;
 	margin: 0;
-	font-size: 10pt;
+	font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, "Meiryo UI";
-	font-family: "Roboto", "HelveticaNeue", sans-serif;
+	font-size: 0.8rem;
-	// font-size: 14px;
 	color: @primary-font-color;
 	height: 100%;
 	width: 100%;
@@ -36,6 +33,11 @@ textarea {
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
+	padding: 5px;
+	margin: 5px;
+	border: 1px solid #E7E7E7;
+	border-radius: 5px;
+	outline: none;
 }
 
 input:focus {
@@ -54,6 +56,7 @@ input:focus {
 	word-spacing: 0;
 	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
 	border: none;
+	border-radius: 0;
 	line-height: 16px;
 	position: relative;
 	cursor: pointer;background-color: #FFF;
@@ -367,9 +370,7 @@ input:focus {
 				padding-right: 38px;
 				overflow-y: auto;
 				resize: none;
-				border: 1px solid #E7E7E7;
+				margin: 0;
-				// margin: 10px;
-				border-radius: 5px;
 				max-height: 200px;
 				width: 100%;
 				font-size: 12px;
@@ -378,7 +379,6 @@ input:focus {
 				line-height: normal;
 				background-color: #fff;
 				position: relative;
-				outline: none;
 			}
 		}
 	}
@@ -399,11 +399,10 @@ input:focus {
 	border-right: 1px solid #E7E7E7;
 	padding: 5px;
 
-	input, button {
+	input, button, select {
 		display: block;
-		padding: 5px;
-		margin: 5px;
 	}
+
 	.error {
 		display: none;
 		// width: 100%;

packages/rocketchat-livechat/app/client/views/livechatWindow.html

@@ -1,4 +1,4 @@
-<template name="room">
+<template name="livechatWindow">
 	{{#if livechatStartedEnabled}}
 		<div class="livechat-room">
 			<div class="title" style="background-color:{{color}}">
@@ -12,10 +12,10 @@
 			</div>
 
 			{{#if livechatEnabled}}
-				{{#if showMessages}}
+				{{#if showRegisterForm}}
-					{{> messages}}
-				{{else}}
 					{{> register}}
+				{{else}}
+					{{> messages}}
 				{{/if}}
 			{{else}}
 				<div class="offline">{{_ "We_are_offline_Sorry_for_the_inconvenience"}}</div>

packages/rocketchat-livechat/app/client/views/livechatWindow.js

@@ -1,60 +1,62 @@
-Template.room.helpers({
+Template.livechatWindow.helpers({
-	title: function() {
+	title() {
 		var ref;
 		if (!Template.instance().subscriptionsReady()) {
 			return '';
 		}
 		return ((ref = Settings.findOne('Livechat_title')) != null ? ref.value : void 0) || 'Rocket.Chat';
 	},
-	color: function() {
+	color() {
 		var ref;
 		if (!Template.instance().subscriptionsReady()) {
 			return 'transparent';
 		}
 		return ((ref = Settings.findOne('Livechat_title_color')) != null ? ref.value : void 0) || '#C1272D';
 	},
-	popoutActive: function() {
+	popoutActive() {
 		return FlowRouter.getQueryParam('mode') === 'popout';
 	},
-	showMessages: function() {
+	showRegisterForm() {
-		return Session.get('triggered') || Meteor.userId();
+		if (Session.get('triggered')  || Meteor.userId()) {
+			return false;
+		}
+		var form = Settings.findOne('Livechat_registration_form');
+		return form.value;
 	},
-	livechatStartedEnabled: function() {
+	livechatStartedEnabled() {
 		return Template.instance().startedEnabled.get() !== null;
 	},
-	livechatEnabled: function() {
+	livechatEnabled() {
 		return Template.instance().startedEnabled.get();
 	}
 });
 
-Template.room.events({
+Template.livechatWindow.events({
-	'click .title': function() {
+	'click .title'() {
 		parentCall('toggleWindow');
 	},
-	'click .popout': function(event) {
+	'click .popout'(event) {
 		event.stopPropagation();
 		parentCall('openPopout');
 	}
 });
 
-Template.room.onCreated(function() {
+Template.livechatWindow.onCreated(function() {
-	self = this;
+	this.startedEnabled = new ReactiveVar(null);
-
-	self.startedEnabled = new ReactiveVar(null);
 
-	self.subscribe('settings', ['Livechat_title', 'Livechat_title_color', 'Livechat_enabled']);
+	this.subscribe('settings', ['Livechat_title', 'Livechat_title_color', 'Livechat_enabled', 'Livechat_registration_form']);
 
 	var initialCheck = true;
 
-	self.autorun(function() {
+	this.autorun(() => {
-		if (self.subscriptionsReady()) {
+		if (this.subscriptionsReady()) {
 			var enabled = Settings.findOne('Livechat_enabled');
 			if (enabled !== undefined) {
 				if (!enabled.value && initialCheck) {
 					parentCall('removeWidget');
 				}
 				initialCheck = false;
-				self.startedEnabled.set(enabled.value);
+				this.startedEnabled.set(enabled.value);
 			}
 		}
 	});

packages/rocketchat-livechat/app/client/views/register.coffee

@@ -1,50 +0,0 @@
-Template.register.helpers
-	error: ->
-		return Template.instance().error.get()
-
-	title: ->
-		return '' unless Template.instance().subscriptionsReady()
-		return Settings.findOne('Livechat_title')?.value or 'Rocket.Chat'
-
-	color: ->
-		return 'transparent' unless Template.instance().subscriptionsReady()
-		return Settings.findOne('Livechat_title_color')?.value or '#C1272D'
-
-	welcomeMessage: ->
-		return ""
-
-Template.register.events
-	'submit #livechat-registration': (e, instance) ->
-		e.preventDefault()
-
-		$name = instance.$('input[name=name]')
-		$email = instance.$('input[name=email]')
-
-		unless $name.val().trim() and $email.val().trim()
-			return instance.showError TAPi18n.__('Please_fill_name_and_email')
-		else
-			Meteor.call 'registerGuest', visitor.getToken(), $name.val(), $email.val(), (error, result) ->
-				if error?
-					return instance.showError error.reason
-
-				Meteor.loginWithToken result.token, (error) ->
-					if error
-						return instance.showError error.reason
-
-	'click .error': (e, instance) ->
-		instance.hideError()
-
-Template.register.onCreated ->
-	@subscribe 'settings', ['Livechat_title', 'Livechat_title_color']
-	@error = new ReactiveVar
-
-	@showError = (msg) =>
-		$('.error').addClass('show')
-		@error.set msg
-		return
-
-	@hideError = =>
-		$('.error').removeClass('show')
-		@error.set()
-		return
-

packages/rocketchat-livechat/app/client/views/register.html

@@ -9,7 +9,16 @@
 		</label>
 		<input type="text" name="name" id="guestName" placeholder="{{_ "Name"}}">
 		<input type="email" name="email" id="guestEmail" placeholder="{{_ "E-mail"}}">
-		<button type="submit" id="btnEntrar" class="-btn"> {{_ "Start_Chat"}} </button>
+
+		{{#if hasDepartments}}
+			<select name="department">
+				<option value="">{{_ "Select_a_department"}}</option>
+				{{#each departments}}
+					<option value="{{_id}}">{{name}}</option>
+				{{/each}}
+			</select>
+		{{/if}}
+		<button type="submit" id="btnEntrar" class="button"> {{_ "Start_Chat"}} </button>
 
 	</form>
 </template>

packages/rocketchat-livechat/app/client/views/register.js

@@ -0,0 +1,68 @@
+Template.register.helpers({
+	error() {
+		return Template.instance().error.get();
+	},
+	welcomeMessage() {
+		return "";
+	},
+	hasDepartments() {
+		return Department.find().count() > 1;
+	},
+	departments() {
+		return Department.find();
+	}
+});
+
+Template.register.events({
+	'submit #livechat-registration' (e, instance) {
+		var $email, $name;
+		e.preventDefault();
+		$name = instance.$('input[name=name]');
+		$email = instance.$('input[name=email]');
+		if (!($name.val().trim() && $email.val().trim())) {
+			return instance.showError(TAPi18n.__('Please_fill_name_and_email'));
+		} else {
+			var departmentId = instance.$('select[name=department]').val();
+			if (!departmentId) {
+				var department = Department.findOne();
+				if (department) {
+					departmentId = department._id;
+				}
+			}
+
+			var guest = {
+				token: visitor.getToken(),
+				name: $name.val(),
+				email: $email.val(),
+				department: departmentId
+			};
+			Meteor.call('livechat:registerGuest', guest, function(error, result) {
+				if (error != null) {
+					return instance.showError(error.reason);
+				}
+				Meteor.loginWithToken(result.token, function(error) {
+					if (error) {
+						return instance.showError(error.reason);
+					}
+				});
+			});
+		}
+	},
+	'click .error' (e, instance) {
+		return instance.hideError();
+	}
+});
+
+Template.register.onCreated(function() {
+	this.subscribe('livechat:availableDepartments');
+
+	this.error = new ReactiveVar;
+	this.showError = (msg) => {
+		$('.error').addClass('show');
+		this.error.set(msg);
+	};
+	this.hideError = () => {
+		$('.error').removeClass('show');
+		this.error.set();
+	};
+});

packages/rocketchat-livechat/app/i18n/en.i18n.json

@@ -8,10 +8,11 @@
   "Installation" : "Installation",
   "Please_answer_survey" : "Please take a moment to answer a quick survey about this chat",
   "Please_fill_name_and_email" : "Please fill name and e-mail",
+  "Select_a_department" : "Select a department",
   "Skip" : "Skip",
   "Start_Chat" : "Start Chat",
   "Survey" : "Survey",
   "Survey_instructions" : "Rate each question according to your satisfaction, 1 meaning you are completely unsatisfied and 5 meaning you are completely satisfied.",
   "Thank_you_for_your_feedback" : "Thank you for your feedback",
   "We_are_offline_Sorry_for_the_inconvenience" : "We are offline. Sorry for the inconvenience."
-}
+}

packages/rocketchat-livechat/config.js

@@ -3,4 +3,5 @@ Meteor.startup(function() {
 	RocketChat.settings.add('Livechat_title'       , 'Rocket.Chat', { type: 'string', group: 'Livechat', public: true });
 	RocketChat.settings.add('Livechat_title_color' , '#C1272D',     { type: 'string', group: 'Livechat', public: true });
 	RocketChat.settings.add('Livechat_enabled' ,     true,          { type: 'boolean', group: 'Livechat', public: true });
+	RocketChat.settings.add('Livechat_registration_form' , true,    { type: 'boolean', group: 'Livechat', public: true, i18nLabel: 'Show_preregistration_form' });
 });

packages/rocketchat-livechat/i18n/en.i18n.json

@@ -41,6 +41,7 @@
   "Saved" : "Saved",
   "Selected_agents" : "Selected agents",
   "Send_a_message" : "Send a message",
+  "Show_preregistration_form" : "Show pre-registration form",
   "Theme" : "Theme",
   "There_are_no_agents_added_to_this_department_yet" : "There are no agents added to this department yet.",
   "Time_in_seconds" : "Time in seconds",

packages/rocketchat-livechat/package.js

@@ -93,6 +93,7 @@ Package.onUse(function(api) {
 	api.addFiles('server/lib/getNextAgent.js', 'server');
 
 	// publications
+	api.addFiles('server/publications/availableDepartments.js', 'server');
 	api.addFiles('server/publications/departmentAgents.js', 'server');
 	api.addFiles('server/publications/livechatAgents.js', 'server');
 	api.addFiles('server/publications/livechatManagers.js', 'server');

packages/rocketchat-livechat/server/lib/getNextAgent.js

@@ -2,7 +2,7 @@ this.getNextAgent = function(department) {
 	var agentFilter = {};
 
 	if (department) {
-		return RocketChat.models.LivechatDepartment.getNextAgent(department);
+		return RocketChat.models.LivechatDepartmentAgents.getNextAgentForDepartment(department);
 	} else {
 		return RocketChat.models.Users.getNextAgent();
 	}

packages/rocketchat-livechat/server/methods/registerGuest.js

@@ -1,5 +1,5 @@
 Meteor.methods({
-	registerGuest: function(token, name, email) {
+	'livechat:registerGuest': function({ token, name, email, department } = {}) {
 		var pass, qt, user, userData, userExists, userId, inc = 0;
 
 		check(token, String);
@@ -35,7 +35,8 @@ Meteor.methods({
 		}
 		userData = {
 			username: user,
-			globalRoles: 'livechat-guest'
+			globalRoles: 'livechat-guest',
+			department: department
 		};
 		userId = Accounts.insertUserDoc({}, userData);
 

packages/rocketchat-livechat/server/methods/sendMessageLivechat.js

@@ -7,13 +7,23 @@ Meteor.methods({
 
 		guest = Meteor.users.findOne(Meteor.userId(), {
 			fields: {
-				username: 1
+				username: 1,
+				department: 1
 			}
 		});
 
 		room = RocketChat.models.Rooms.findOneById(message.rid);
 		if (room == null) {
-			agent = getNextAgent();
+
+			// if no department selected verify if there is only one active and use it
+			if (!guest.department) {
+				var departments = RocketChat.models.LivechatDepartment.findEnabledWithAgents();
+				if (departments.count() === 1) {
+					guest.department = departments.fetch()[0]._id;
+				}
+			}
+
+			agent = getNextAgent(guest.department);
 			if (!agent) {
 				throw new Meteor.Error('no-agent-online', 'Sorry, no online agents');
 			}

packages/rocketchat-livechat/server/models/LivechatDepartment.js

@@ -63,6 +63,14 @@ class LivechatDepartment extends RocketChat.models._Base {
 		query = { _id: _id };
 		return this.remove(query);
 	}
+
+	findEnabledWithAgents() {
+		var query = {
+			numAgents: { $gt: 0 },
+			enabled: true
+		};
+		return this.find(query);
+	}
 }
 
 RocketChat.models.LivechatDepartment = new LivechatDepartment();

packages/rocketchat-livechat/server/publications/availableDepartments.js

@@ -0,0 +1,3 @@
+Meteor.publish('livechat:availableDepartments', function() {
+	return RocketChat.models.LivechatDepartment.findEnabledWithAgents();
+});