Livechat survey

packages/rocketchat-lib/server/models/Messages.coffee

@@ -269,6 +269,8 @@ RocketChat.models.Messages = new class extends RocketChat.models._Base
 	createRoomRenamedWithRoomIdRoomNameAndUser: (roomId, roomName, user, extraData) ->
 		return @createWithTypeRoomIdMessageAndUser 'r', roomId, roomName, user, extraData
 
+	createCommandWithRoomIdAndUser: (command, roomId, user, extraData) ->
+		return @createWithTypeRoomIdMessageAndUser 'command', roomId, command, user, extraData
 
 	# REMOVE
 	removeById: (_id) ->

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

@@ -35,3 +35,4 @@ reactive-var
 accounts-password
 standard-minifiers
 tap:i18n
+kevohagan:sweetalert

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

@@ -35,6 +35,7 @@ [email protected]
 [email protected]
 kadira:[email protected]
 kadira:[email protected]
+kevohagan:[email protected]
 konecty:[email protected]
 [email protected]
 [email protected]

packages/rocketchat-livechat/app/client/lib/fromApp/RoomHistoryManager.coffee

@@ -30,7 +30,9 @@
 			ts = new Date
 
 		Meteor.call 'loadHistory', rid, ts, limit, undefined, (err, result) ->
-			ChatMessage.upsert {_id: item._id}, item for item in result?.messages or []
+			for item in result?.messages or []
+				if item.t isnt 'command'
+					ChatMessage.upsert {_id: item._id}, item
 			room.isLoading.set false
 			room.loaded += result.messages.length
 			if result.messages.length < limit

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

@@ -0,0 +1,15 @@
+@t = (key, replaces...) ->
+	if _.isObject replaces[0]
+		return TAPi18n.__ key, replaces
+	else
+		return TAPi18n.__ key, { postProcess: 'sprintf', sprintf: replaces }
+
+@tr = (key, options, replaces...) ->
+	if _.isObject replaces[0]
+		return TAPi18n.__ key, options, replaces
+	else
+		return TAPi18n.__ key, options, { postProcess: 'sprintf', sprintf: replaces }
+
+@isRtl = (language) ->
+	# https://en.wikipedia.org/wiki/Right-to-left#cite_note-2
+	return language?.split('-').shift().toLowerCase() in ['ar', 'dv', 'fa', 'he', 'ku', 'ps', 'sd', 'ug', 'ur', 'yi']

packages/rocketchat-livechat/app/client/startup/room.coffee

@@ -2,4 +2,9 @@ msgStream = new Meteor.Stream 'messages'
 Tracker.autorun ->
 	if visitor.getRoom()?
 		msgStream.on visitor.getRoom(), (msg) ->
-			ChatMessage.upsert { _id: msg._id }, msg
+			if msg.t is 'command'
+				if msg.msg is 'survey'
+					unless $('body #survey').length
+						Blaze.render(Template.survey, $('body').get(0))
+			else
+				ChatMessage.upsert { _id: msg._id }, msg

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

@@ -40,6 +40,65 @@ input:focus {
 	box-shadow: 0 0 0;
 }
 
+.button {
+	&:extend(.unselectable);
+	display: inline-block;
+	padding: 9px 12px;
+	font-weight: 500;
+	font-size: 13px;
+	margin: 4px;
+	text-transform: uppercase;
+	word-spacing: 0;
+	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
+	border: none;
+	line-height: 16px;
+	position: relative;
+	cursor: pointer;background-color: #FFF;
+	color: rgba(255, 255, 255, 0.85);
+	background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
+	span {
+		position: relative;
+		z-index: 2;
+	}
+	&:before {
+		background-color: rgba(0, 0, 0, 0.1);
+		content: " ";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		z-index: 1;
+		.transition(opacity .1s ease-out);
+	}
+	&:hover {
+		text-decoration: none;
+		color: #FFF;
+		&:before {
+			opacity: 1;
+		}
+	}
+	&.secondary {
+		background-color: @tertiary-background-color;
+		color: @primary-font-color;
+		&:before {
+			background-color: rgba(0, 0, 0, 0.045);
+		}
+	}
+	&.clean {
+		font-size: 14px;
+		box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
+		&.primary {
+			font-weight: 600;
+		}
+	}
+	&.button-block {
+		display: block;
+		width: 100%;
+	}
+}
+
 .livechat-room {
 	position: fixed;
 	top: 0;
@@ -380,6 +439,64 @@ input:focus {
 	}
 }
 
+#survey {
+	.overlay {
+		background-color: rgba(0,0,0,0.5);
+		position: fixed;
+		height: 100%;
+		width: 100%;
+
+		.wrapper {
+			background: white;
+			position: fixed;
+			height: 60vh;
+			width: 60vw;
+			top: 20vh;
+			left: 20vw;
+			border-radius: 6px;
+			display: flex;
+			flex-direction: column;
+
+			header {
+				flex: 1 0 40px;
+				padding: 0 15px;
+				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+				line-height: 40px;
+			}
+
+			.content {
+				overflow-y: scroll;
+				padding: 10px;
+				flex: 1 1 100%;
+
+				.instructions {
+					margin-top: 5px;
+				}
+
+				.survey-item {
+					margin-top: 20px;
+
+					.question {
+						display: block;
+					}
+
+					.answer {
+						margin-right: 5px;
+					}
+				}
+			}
+
+			footer {
+				flex: 1 0 60px;
+				border-top: 1px solid rgba(0, 0, 0, 0.1);
+				line-height: 60px;
+				text-align: right;
+				padding-right: 20px;
+			}
+		}
+	}
+}
+
 @media all and(max-height: 200px) {
 	.livechat-room {
 		.title {

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

@@ -0,0 +1,66 @@
+<template name="survey">
+	<div id="survey">
+		<div class="overlay">
+			<div class="wrapper">
+				<header>
+					<b>{{_ 'Please_answer_survey'}}</b>
+				</header>
+				<div class="content">
+					<p class="instructions">{{_ 'Survey_instructions'}}</p>
+					<form id="survey" class="livechat-form">
+						<div class="survey-item">
+							<label class="question">
+								{{_ "How_satisfied_were_you_with_this_chat"}}
+							</label>
+							<label class="answer"><input type="radio" name="satisfaction" value="1" />1</label>
+							<label class="answer"><input type="radio" name="satisfaction" value="2" />2</label>
+							<label class="answer"><input type="radio" name="satisfaction" value="3" />3</label>
+							<label class="answer"><input type="radio" name="satisfaction" value="4" />4</label>
+							<label class="answer"><input type="radio" name="satisfaction" value="5" />5</label>
+						</div>
+						<div class="survey-item">
+							<label class="question">
+								{{_ "How_knowledgeable_was_the_chat_agent"}}
+							</label>
+							<label class="answer"><input type="radio" name="agentKnowledge" value="1" />1</label>
+							<label class="answer"><input type="radio" name="agentKnowledge" value="2" />2</label>
+							<label class="answer"><input type="radio" name="agentKnowledge" value="3" />3</label>
+							<label class="answer"><input type="radio" name="agentKnowledge" value="4" />4</label>
+							<label class="answer"><input type="radio" name="agentKnowledge" value="5" />5</label>
+						</div>
+						<div class="survey-item">
+							<label class="question">
+								{{_ "How_responsive_was_the_chat_agent"}}
+							</label>
+							<label class="answer"><input type="radio" name="agentResposiveness" value="1" />1</label>
+							<label class="answer"><input type="radio" name="agentResposiveness" value="2" />2</label>
+							<label class="answer"><input type="radio" name="agentResposiveness" value="3" />3</label>
+							<label class="answer"><input type="radio" name="agentResposiveness" value="4" />4</label>
+							<label class="answer"><input type="radio" name="agentResposiveness" value="5" />5</label>
+						</div>
+						<div class="survey-item">
+							<label class="question">
+								{{_ "How_friendly_was_the_chat_agent"}}
+							</label>
+							<label class="answer"><input type="radio" name="agentFriendliness" value="1" />1</label>
+							<label class="answer"><input type="radio" name="agentFriendliness" value="2" />2</label>
+							<label class="answer"><input type="radio" name="agentFriendliness" value="3" />3</label>
+							<label class="answer"><input type="radio" name="agentFriendliness" value="4" />4</label>
+							<label class="answer"><input type="radio" name="agentFriendliness" value="5" />5</label>
+						</div>
+						<div class="survey-item">
+							<label class="question">
+								{{_ "Additional_Feedback"}}
+							</label>
+							<textarea name="additionalFeedback" rows="5"></textarea>
+						</div>
+					</form>
+				</div>
+				<footer>
+					<button type="button" class="button secondary skip"><span>{{_ "Skip"}}</span></button>
+					<button type="button" class="button send"><span>{{_ "Send"}}</span></button>
+				</footer>
+			</div>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,17 @@
+Template.survey.events({
+	'click button.skip': function(e, instance) {
+		instance.$('#survey').remove();
+	},
+
+	'click button.send': function(e, instance) {
+		formData = instance.$('form').serializeArray();
+		Meteor.call('livechat:saveSurveyFeedback', visitor.getToken(), visitor.getRoom(), formData, function(err, results) {
+			instance.$('#survey').remove();
+			swal({
+				title: t('Thank_you_for_your_feedback'),
+				type: 'success',
+				timer: 2000
+			});
+		});
+	}
+})

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

@@ -1,7 +1,19 @@
 {
+	"Additional_Feedback": "Additional Feedback",
+	"Skip": "Skip",
 	"E-mail": "E-mail",
-	"Name": "Name",
+	"How_friendly_was_the_chat_agent": "How friendly was the chat agent?",
+	"How_knowledgeable_was_the_chat_agent": "How knowledgeable was the chat agent?",
+	"How_responsive_was_the_chat_agent": "How responsive was the chat agent?",
+	"How_satisfied_were_you_with_this_chat": "How satisfied were you with this chat?",
 	"Message": "Message",
+	"Name": "Name",
+	"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",
-	"Start_Chat": "Start Chat"
+	"Send": "Send",
+	"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",
+	"User_left" : "Has left the channel."
 }

packages/rocketchat-livechat/package.js

@@ -52,12 +52,14 @@ Package.onUse(function(api) {
 	api.addFiles('server/methods/addAgent.js', 'server');
 	api.addFiles('server/methods/addManager.js', 'server');
 	api.addFiles('server/methods/saveDepartment.js', 'server');
+	api.addFiles('server/methods/saveSurveyFeedback.js', 'server');
 	api.addFiles('server/methods/searchAgent.js', 'server');
 	api.addFiles('server/methods/removeAgent.js', 'server');
 	api.addFiles('server/methods/removeManager.js', 'server');
 	api.addFiles('server/methods/removeDepartment.js', 'server');
 	// models
 	api.addFiles('server/models/Users.js', 'server');
+	api.addFiles('server/models/Rooms.js', 'server');
 	api.addFiles('server/models/LivechatDepartment.js', 'server');
 
 	// collections

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

@@ -0,0 +1,26 @@
+Meteor.methods({
+	'livechat:saveSurveyFeedback' (visitorToken, visitorRoom, formData) {
+		check(visitorToken, String);
+		check(visitorRoom, String);
+		check(formData, [Match.ObjectIncluding({ name: String, value: String })]);
+
+		console.log('[methods] livechat:saveSurveyFeedback -> '.green, 'arguments:', arguments);
+
+		visitor = RocketChat.models.Users.getVisitorByToken(visitorToken);
+		room = RocketChat.models.Rooms.findOneById(visitorRoom);
+
+		if (visitor !== undefined && room !== undefined && room.v !== undefined && visitor.profile !== undefined && room.v.token === visitor.profile.token) {
+			updateData = {};
+			for (var item of formData) {
+				if (_.contains(['satisfaction', 'agentKnowledge', 'agentResposiveness', 'agentFriendliness'], item.name) && _.contains(["1","2","3","4","5"], item.value)) {
+					updateData[item.name] = item.value;
+				} else if (item.name === 'additionalFeedback') {
+					updateData[item.name] = item.value;
+				}
+			}
+			if (!_.isEmpty(updateData)) {
+				return RocketChat.models.Rooms.updateSurveyFeedbackById(room._id, updateData);
+			}
+		}
+	}
+});

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

@@ -0,0 +1,17 @@
+/**
+ * Gets visitor by token
+ * @param {string} token - Visitor token
+ */
+RocketChat.models.Rooms.updateSurveyFeedbackById = function(_id, surveyFeedback) {
+	query = {
+		_id: _id
+	};
+
+	update = {
+		$set: {
+			surveyFeedback: surveyFeedback
+		}
+	};
+
+	return this.update(query, update);
+};

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

@@ -12,3 +12,16 @@ RocketChat.models.Users.setOperator = function(_id, operator) {
 
 	return this.update(_id, update);
 };
+
+/**
+ * Gets visitor by token
+ * @param {string} token - Visitor token
+ */
+RocketChat.models.Users.getVisitorByToken = function(token, options) {
+	var query = {
+		"profile.guest": true,
+		"profile.token": token
+	};
+
+	return this.findOne(query, options);
+};

packages/rocketchat-ui/lib/RoomHistoryManager.coffee

@@ -47,7 +47,7 @@
 			if wrapper?
 				previousHeight = wrapper.scrollHeight
 
-			ChatMessage.upsert {_id: item._id}, item for item in result?.messages or []
+			ChatMessage.upsert {_id: item._id}, item for item in result?.messages or [] when item.t isnt 'command'
 
 			if wrapper?
 				heightDiff = wrapper.scrollHeight - previousHeight