[NEW] Enable/disable Livechat registration form fields (#10584)

[NEW] Options to enable/disable each Livechat registration form field

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

@@ -1272,6 +1272,7 @@
   "Livechat_online": "Livechat online",
   "Livechat_open_inquiery_show_connecting": "Show Connecting Message Instead of Input When Guest is Not Yet Connected to an Agent",
   "Livechat_Queue": "Livechat Queue",
+  "Livechat_registration_form": "Registration Form",
   "Livechat_room_count": "Livechat Room Count",
   "Livechat_Routing_Method": "Livechat Routing Method",
   "Livechat_Take_Confirm": "Do you want to take this client?",
@@ -1893,13 +1894,15 @@
   "Show_all": "Show All",
   "Show_Avatars": "Show Avatars",
   "Show_counter": "Show counter",
-  "Show_room_counter_on_sidebar": "Show room counter on sidebar",
+  "Show_email_field": "Show email field",
   "Show_more": "Show more",
+  "Show_name_field": "Show name field",
   "show_offline_users": "show offline users",
   "Show_on_registration_page": "Show on registration page",
   "Show_only_online": "Show Online Only",
   "Show_preregistration_form": "Show Pre-registration Form",
   "Show_queue_list_to_all_agents": "Show Queue List to All Agents",
+  "Show_room_counter_on_sidebar": "Show room counter on sidebar",
   "Show_the_keyboard_shortcut_list": "Show the keyboard shortcut list",
   "Showing_archived_results": "<p>Showing <b>%s</b> archived results</p>",
   "Showing_online_users": "Showing: <b>__total_showing__</b>, Online: __online__, Total: __total__ users",

packages/rocketchat-i18n/i18n/pt.i18n.json

@@ -1237,6 +1237,7 @@
   "Livechat_online": "Livechat on-line",
   "Livechat_open_inquiery_show_connecting": "Mostrar conexão de mensagem em vez de entrada quando o visitante ainda não está conectado a um agente",
   "Livechat_Queue": "Roleta Livechat",
+  "Livechat_registration_form": "Formulário de pré-registro",
   "Livechat_room_count": "Contador de salas de livechat",
   "Livechat_Routing_Method": "Método de roteamento Livechat",
   "Livechat_Take_Confirm": "Você quer levar esse cliente?",
@@ -1838,13 +1839,15 @@
   "Show_all": "Mostrar tudo",
   "Show_Avatars": "Mostrar Avatares",
   "Show_counter": "Show counter",
-  "Show_room_counter_on_sidebar": "Mostrar contador do quarto na barra lateral",
+  "Show_email_field": "Mostrar campo e-mail",
   "Show_more": "Mostrar mais",
+  "Show_name_field": "Mostrar campo nome",
   "show_offline_users": "mostrar usuários offline",
   "Show_on_registration_page": "Mostrar na página de registro",
   "Show_only_online": "Mostrar apenas online",
   "Show_preregistration_form": "Mostrar formulário de pré-registro",
   "Show_queue_list_to_all_agents": "Mostrar link da roleta à todos agentes",
+  "Show_room_counter_on_sidebar": "Mostrar contador do quarto na barra lateral",
   "Show_the_keyboard_shortcut_list": "Exibe a lisgta de atalhos do teclado",
   "Showing_archived_results": "<p>Exibindo <b>%s</b> resultados arquivados</p>",
   "Showing_online_users": "Mostrando <b>__total_showing__</b> de __total__ usuários",

packages/rocketchat-livechat/.app/client/lib/_livechat.js

@@ -23,6 +23,8 @@ this.Livechat = new (class Livechat {
 		this._videoCall = new ReactiveVar(false);
 		this._transcriptMessage = new ReactiveVar('');
 		this._conversationFinishedMessage = new ReactiveVar('');
+		this._nameFieldRegistrationForm = new ReactiveVar(false);
+		this._emailFieldRegistrationForm = new ReactiveVar(false);
 		this._connecting = new ReactiveVar(false);
 		this._room = new ReactiveVar(null);
 		this._department = new ReactiveVar(null);
@@ -104,6 +106,12 @@ this.Livechat = new (class Livechat {
 	get conversationFinishedMessage() {
 		return this._conversationFinishedMessage.get();
 	}
+	get nameFieldRegistrationForm() {
+		return this._nameFieldRegistrationForm.get();
+	}
+	get emailFieldRegistrationForm() {
+		return this._emailFieldRegistrationForm.get();
+	}
 	get department() {
 		return this._department.get();
 	}
@@ -168,6 +176,12 @@ this.Livechat = new (class Livechat {
 	set conversationFinishedMessage(value) {
 		this._conversationFinishedMessage.set(value);
 	}
+	set nameFieldRegistrationForm(value) {
+		this._nameFieldRegistrationForm.set(value);
+	}
+	set emailFieldRegistrationForm(value) {
+		this._emailFieldRegistrationForm.set(value);
+	}
 	set connecting(value) {
 		this._connecting.set(value);
 	}

packages/rocketchat-livechat/.app/client/lib/commands.js

@@ -17,7 +17,7 @@ this.Commands = {
 		if (Livechat.transcript) {
 			const visitorData = visitor.getData();
 			const email = visitorData && visitorData.visitorEmails && visitorData.visitorEmails.length > 0 ? visitorData.visitorEmails[0].address : '';
-			const transcriptMessage = (!_.isEmpty(Livechat.transcriptMessage)) ? Livechat.transcriptMessage : (TAPi18n.__('Would_you_like_a_copy_if_this_chat_emailed'));
+			const transcriptMessage = (Livechat.transcriptMessage) ? Livechat.transcriptMessage : (TAPi18n.__('Would_you_like_a_copy_if_this_chat_emailed'));
 
 			swal({
 				title: t('Chat_ended'),

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

@@ -1,6 +1,10 @@
 /* globals Department, Livechat, LivechatVideoCall */
 import visitor from '../../imports/client/visitor';
 
+function showDepartments() {
+	return Department.find({ showOnRegistration: true }).count() > 1;
+};
+
 Template.livechatWindow.helpers({
 	title() {
 		return Livechat.title;
@@ -21,7 +25,7 @@ Template.livechatWindow.helpers({
 		if (Session.get('triggered') || visitor.getId()) {
 			return false;
 		}
-		return Livechat.registrationForm;
+		return (Livechat.registrationForm && (Livechat.nameFieldRegistrationForm || Livechat.emailFieldRegistrationForm || showDepartments()));
 	},
 	showSwitchDepartmentForm() {
 		return Livechat.showSwitchDepartmentForm;
@@ -115,7 +119,8 @@ Template.livechatWindow.onCreated(function() {
 			}
 			Livechat.videoCall = result.videoCall;
 			Livechat.registrationForm = result.registrationForm;
-
+			Livechat.nameFieldRegistrationForm = result.nameFieldRegistrationForm;
+			Livechat.emailFieldRegistrationForm = result.emailFieldRegistrationForm;
 			if (result.room) {
 				Livechat.room = result.room._id;
 
@@ -145,6 +150,7 @@ Template.livechatWindow.onCreated(function() {
 				Department.insert(department);
 			});
 			Livechat.allowSwitchingDepartments = result.allowSwitchingDepartments;
+
 			Livechat.ready();
 		}
 	});

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

@@ -8,9 +8,12 @@
 			{{{welcomeMessage}}}
 		</p>
 		<form id="livechat-registration">
-			<input type="text" name="name" id="guestName" placeholder="{{_ "Name"}}">
-			<input type="email" name="email" id="guestEmail" placeholder="{{_ "Email"}}">
-
+			{{#if showNameFieldRegisterForm}}
+				<input type="text" name="name" id="guestName" placeholder="{{_ "Name"}}">
+			{{/if}}	
+			{{#if showEmailFieldRegisterForm}}
+				<input type="email" name="email" id="guestEmail" placeholder="{{_ "Email"}}">
+			{{/if}}	
 			{{#if showDepartments}}
 				<select name="department">
 					<option value="">{{_ "Select_a_department"}}</option>

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

@@ -1,6 +1,7 @@
 /* globals Department, Livechat, LivechatVideoCall */
 import visitor from '../../imports/client/visitor';
 import _ from 'underscore';
+import s from 'underscore.string';
 
 Template.register.helpers({
 	error() {
@@ -20,7 +21,13 @@ Template.register.helpers({
 	},
 	selectedDepartment() {
 		return this._id === Livechat.department;
-	}
+	},
+	showNameFieldRegisterForm() {
+		return Livechat.nameFieldRegistrationForm;
+	},
+	showEmailFieldRegisterForm() {
+		return Livechat.emailFieldRegistrationForm;
+	}	
 });
 
 Template.register.events({
@@ -33,11 +40,24 @@ Template.register.events({
 				LivechatVideoCall.request();
 			}
 		};
+		const form = e.currentTarget;
+
+		const fields = [];
+		let name;
+		let email;
+
+		if (Livechat.nameFieldRegistrationForm) {
+			fields.push('name');
+			name = instance.$('input[name=name]').val();
+		}
 
-		const $name = instance.$('input[name=name]');
-		const $email = instance.$('input[name=email]');
-		if (!($name.val().trim() && $email.val().trim())) {
-			return instance.showError(TAPi18n.__('Please_fill_name_and_email'));
+		if (Livechat.emailFieldRegistrationForm) {
+			fields.push('email');
+			email = instance.$('input[name=email]').val();
+		}
+
+		if (!instance.validateForm(form, fields)) {
+			return instance.showError(TAPi18n.__('You_must_complete_all_fields'));
 		} else {
 			let departmentId = instance.$('select[name=department]').val();
 			if (!departmentId) {
@@ -49,8 +69,8 @@ Template.register.events({
 
 			const guest = {
 				token: visitor.getToken(),
-				name: $name.val(),
-				email: $email.val(),
+				name,
+				email,
 				department: Livechat.department || departmentId
 			};
 			Meteor.call('livechat:registerGuest', guest, function(error, result) {
@@ -77,6 +97,15 @@ Template.register.events({
 Template.register.onCreated(function() {
 	this.error = new ReactiveVar();
 	this.request = '';
+
+	this.validateForm = (form, fields) => {
+		const valid = fields.every((field) => {
+			return !_.isEmpty(s.trim(form.elements[field].value));
+		});
+
+		return valid;
+	};
+
 	this.showError = (msg) => {
 		$('.error').addClass('show');
 		this.error.set(msg);

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

@@ -66,6 +66,41 @@ <h2>{{_ "Settings"}}</h2>
 						<textarea class="preview-settings rc-input__element" name="offlineSuccessMessage" id="offlineSuccessMessage">{{offlineSuccessMessage}}</textarea>
 					</div>
 				</fieldset>
+				<fieldset>
+					<legend>{{_ "Livechat_registration_form"}}</legend>
+					<!--
+					<label class="rc-switch__label">
+						<input class="rc-switch__input" type="checkbox" name="registrationFormEnabled" checked="{{registrationFormEnabled}}"/>
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+						<span class="rc-switch__text">
+							{{_ "Show_preregistration_form"}}
+						</span>
+					</label>
+					-->
+					<label class="rc-switch__label">
+						<input class="rc-switch__input js-input-check" type="checkbox" name="registrationFormEnabled" {{registrationFormEnabled}}/>
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+						<span class="rc-switch__text">{{_ "Enabled"}}</span>
+					</label>					
+					<label class="rc-switch__label">
+						<input class="rc-switch__input js-input-check" type="checkbox" name="registrationFormNameFieldEnabled" {{registrationFormNameFieldEnabled}}/>
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+						<span class="rc-switch__text">{{_ "Show_name_field"}}</span>
+					</label>
+					<label class="rc-switch__label">
+						<input class="rc-switch__input js-input-check" type="checkbox" name="registrationFormEmailFieldEnabled" {{registrationFormEmailFieldEnabled}}/>
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+						<span class="rc-switch__text">{{_ "Show_email_field"}}</span>
+					</label>							
+				</fieldset>
 				<fieldset>
 					<legend>{{_ "Conversation_finished"}}</legend>
 					<div class="input-line">

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

@@ -82,6 +82,21 @@ Template.livechatAppearance.helpers({
 	conversationFinishedMessage() {
 		return Template.instance().conversationFinishedMessage.get();
 	},
+	registrationFormEnabled() {
+		if (Template.instance().registrationFormEnabled.get()) {
+			return 'checked';
+		}
+	},
+	registrationFormNameFieldEnabled() {
+		if (Template.instance().registrationFormNameFieldEnabled.get()) {
+			return 'checked';
+		}
+	},
+	registrationFormEmailFieldEnabled() {
+		if (Template.instance().registrationFormEmailFieldEnabled.get()) {
+			return 'checked';
+		}
+	},
 	sampleColor() {
 		if (Template.instance().previewState.get().indexOf('offline') !== -1) {
 			return Template.instance().colorOffline.get();
@@ -181,6 +196,9 @@ Template.livechatAppearance.onCreated(function() {
 	this.colorOffline = new ReactiveVar(null);
 	this.offlineEmail = new ReactiveVar(null);
 	this.conversationFinishedMessage = new ReactiveVar(null);
+	this.registrationFormEnabled = new ReactiveVar(null);
+	this.registrationFormNameFieldEnabled = new ReactiveVar(null);
+	this.registrationFormEmailFieldEnabled = new ReactiveVar(null);
 
 	this.autorun(() => {
 		const setting = LivechatAppearance.findOne('Livechat_title');
@@ -226,18 +244,26 @@ Template.livechatAppearance.onCreated(function() {
 		const setting = LivechatAppearance.findOne('Livechat_conversation_finished_message');
 		this.conversationFinishedMessage.set(setting && setting.value);
 	});
+	this.autorun(() => {
+		const setting = LivechatAppearance.findOne('Livechat_registration_form');
+		this.registrationFormEnabled.set(setting && setting.value);
+	});
+	this.autorun(() => {
+		const setting = LivechatAppearance.findOne('Livechat_name_field_registration_form');
+		this.registrationFormNameFieldEnabled.set(setting && setting.value);
+	});
+	this.autorun(() => {
+		const setting = LivechatAppearance.findOne('Livechat_email_field_registration_form');
+		this.registrationFormEmailFieldEnabled.set(setting && setting.value);
+	});
 });
 
 Template.livechatAppearance.events({
 	'change .preview-mode'(e, instance) {
 		instance.previewState.set(e.currentTarget.value);
 	},
-	'change .preview-settings, keyup .preview-settings'(e, instance) {
-		let value = e.currentTarget.value;
-		if (e.currentTarget.type === 'radio') {
-			value = value === 'true';
-		}
-		instance[e.currentTarget.name].set(value);
+	'change .js-input-check'(e, instance) {
+		instance[e.currentTarget.name].set(e.currentTarget.checked);
 	},
 	'click .reset-settings'(e, instance) {
 		e.preventDefault();
@@ -271,6 +297,15 @@ Template.livechatAppearance.events({
 
 		const settingConversationFinishedMessage = LivechatAppearance.findOne('Livechat_conversation_finished_message');
 		instance.conversationFinishedMessage.set(settingConversationFinishedMessage && settingConversationFinishedMessage.value);
+
+		const settingRegistrationFormEnabled = LivechatAppearance.findOne('Livechat_registration_form');
+		instance.registrationFormEnabled.set(settingRegistrationFormEnabled && settingRegistrationFormEnabled.value);
+
+		const settingRegistrationFormNameFieldEnabled = LivechatAppearance.findOne('Livechat_name_field_registration_form');
+		instance.registrationFormNameFieldEnabled.set(settingRegistrationFormNameFieldEnabled && settingRegistrationFormNameFieldEnabled.value);
+
+		const settingRegistrationFormEmailFieldEnabled = LivechatAppearance.findOne('Livechat_email_field_registration_form');
+		instance.registrationFormEmailFieldEnabled.set(settingRegistrationFormEmailFieldEnabled && settingRegistrationFormEmailFieldEnabled.value);
 	},
 	'submit .rocket-form'(e, instance) {
 		e.preventDefault();
@@ -319,6 +354,18 @@ Template.livechatAppearance.events({
 			{
 				_id: 'Livechat_conversation_finished_message',
 				value: s.trim(instance.conversationFinishedMessage.get())
+			},
+			{
+				_id: 'Livechat_registration_form',
+				value: instance.registrationFormEnabled.get()
+			},
+			{
+				_id: 'Livechat_name_field_registration_form',
+				value: instance.registrationFormNameFieldEnabled.get()
+			},
+			{
+				_id: 'Livechat_email_field_registration_form',
+				value: instance.registrationFormEmailFieldEnabled.get()
 			}
 		];