[IMPROVE][Omnichannel] Refactor Office Hours feature

app/authorization/server/startup.js

@@ -110,7 +110,7 @@ Meteor.startup(function() {
 		{ _id: 'view-livechat-appearance',      roles: ['livechat-manager', 'admin'] },
 		{ _id: 'view-livechat-webhooks',        roles: ['livechat-manager', 'admin'] },
 		{ _id: 'view-livechat-facebook',        roles: ['livechat-manager', 'admin'] },
-		{ _id: 'view-livechat-officeHours',     roles: ['livechat-manager', 'admin'] },
+		{ _id: 'view-livechat-business-hours',     roles: ['livechat-manager', 'admin'] },
 		{ _id: 'view-livechat-room-closed-same-department',  roles: ['livechat-manager', 'admin'] },
 		{ _id: 'view-livechat-room-closed-by-another-agent', roles: ['livechat-manager', 'admin'] },
 		{ _id: 'view-livechat-room-customfields',    roles: ['livechat-manager', 'livechat-agent', 'admin'] },

app/livechat/client/route.js

@@ -124,11 +124,11 @@ AccountBox.addRoute({
 }, livechatManagerRoutes, load);
 
 AccountBox.addRoute({
-	name: 'livechat-officeHours',
-	path: '/officeHours',
+	name: 'livechat-business-hours',
+	path: '/businessHours',
 	sideNav: 'livechatFlex',
-	i18nPageTitle: 'Office_Hours',
-	pageTemplate: 'livechatOfficeHours',
+	i18nPageTitle: 'Business_Hours',
+	pageTemplate: 'livechatMainBusinessHours',
 }, livechatManagerRoutes, load);
 
 AccountBox.addRoute({

app/livechat/client/views/admin.js

@@ -11,11 +11,12 @@ import './app/livechatCustomFieldForm';
 import './app/livechatDepartmentForm';
 import './app/livechatDepartments';
 import './app/livechatInstallation';
-import './app/livechatOfficeHours';
 import './app/livechatTriggers';
 import './app/livechatTriggersForm';
 import './app/livechatManagers';
 import './app/integrations/livechatIntegrationWebhook';
 import './app/integrations/livechatIntegrationFacebook';
 import './app/triggers/livechatTriggerAction';
 import './app/triggers/livechatTriggerCondition';
+import './app/business-hours/livechatBusinessHoursForm';
+import './app/business-hours/livechatMainBusinessHours';

app/livechat/client/views/app/business-hours/BusinessHours.ts

@@ -0,0 +1,27 @@
+export interface IBusinessHour {
+	getView(): string;
+}
+
+class BusinessHoursManager {
+	private businessHour: IBusinessHour;
+
+	constructor(businessHour: IBusinessHour) {
+		this.registerBusinessHour(businessHour);
+	}
+
+	registerBusinessHour(businessHour: IBusinessHour): void {
+		this.businessHour = businessHour;
+	}
+
+	getTemplate(): string {
+		return this.businessHour.getView();
+	}
+}
+
+class Single implements IBusinessHour {
+	getView(): string {
+		return 'livechatBusinessHoursForm';
+	}
+}
+
+export const businessHourManager = new BusinessHoursManager(new Single());

app/livechat/client/views/app/livechatOfficeHours.html → app/livechat/client/views/app/business-hours/livechatBusinessHoursForm.html

@@ -1,23 +1,7 @@
-<template name="livechatOfficeHours">
-	{{#requiresPermission 'view-livechat-officeHours'}}
-		<div class="livechat-officeHours-div">
-			<form class="rocket-form" id="officeHoursForm">
-
-				<fieldset>
-					<legend>{{_ "Office_hours_enabled"}}</legend>
-					<input type="radio" class="preview-settings" name="enableOfficeHours" id="enableOfficeHoursTrue" checked="{{enableOfficeHoursTrueChecked}}" value="true">
-					<label for="displayOfflineFormTrue">{{_ "True"}}</label>
-					<input type="radio" class="preview-settings" name="enableOfficeHours" id="enableOfficeHoursFalse" checked="{{enableOfficeHoursFalseChecked}}" value="false">
-					<label for="displayOfflineFormFalse">{{_ "False"}}</label>
-				</fieldset>
-
-				<fieldset>
-					<legend>{{_ "Allow_Online_Agents_Outside_Office_Hours"}}</legend>
-					<input type="radio" class="preview-settings" name="allowAgentsOnlineOutOfficeHours" id="allowAgentsOnlineOutOfficeHoursTrue" checked="{{allowAgentsOnlineOutOfficeHoursTrueChecked}}" value="true">
-					<label for="displayOfflineFormTrue">{{_ "True"}}</label>
-					<input type="radio" class="preview-settings" name="allowAgentsOnlineOutOfficeHours" id="allowAgentsOnlineOutOfficeHoursFalse" checked="{{allowAgentsOnlineOutOfficeHoursFalseChecked}}" value="false">
-					<label for="displayOfflineFormFalse">{{_ "False"}}</label>
-				</fieldset>
+<template name="livechatBusinessHoursForm">
+	{{#requiresPermission 'view-livechat-business-hours'}}
+		<div class="livechat-businessHours-div">
+			<form class="rocket-form" id="businessHoursForm">
 
 				<!-- days open -->
 				<fieldset>

app/livechat/client/views/app/business-hours/livechatBusinessHoursForm.js

@@ -0,0 +1,154 @@
+import { Meteor } from 'meteor/meteor';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Template } from 'meteor/templating';
+import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
+import toastr from 'toastr';
+import moment from 'moment';
+
+import { t, handleError, APIClient } from '../../../../../utils/client';
+import './livechatBusinessHoursForm.html';
+
+Template.livechatBusinessHoursForm.helpers({
+	days() {
+		return Template.instance().businessHour.get().workHours;
+	},
+	startName(day) {
+		return `${ day.day }_start`;
+	},
+	finishName(day) {
+		return `${ day.day }_finish`;
+	},
+	openName(day) {
+		return `${ day.day }_open`;
+	},
+	start(day) {
+		return Template.instance().dayVars[day.day].start.get();
+	},
+	finish(day) {
+		return Template.instance().dayVars[day.day].finish.get();
+	},
+	name(day) {
+		return TAPi18n.__(day.day);
+	},
+	open(day) {
+		return Template.instance().dayVars[day.day].open.get();
+	},
+});
+
+const splitDayAndPeriod = (value) => value.split('_');
+
+Template.livechatBusinessHoursForm.events({
+	'change .preview-settings, keydown .preview-settings'(e, instance) {
+		const [day, period] = splitDayAndPeriod(e.currentTarget.name);
+
+		const newTime = moment(e.currentTarget.value, 'HH:mm');
+
+		// check if start and stop do not cross
+		if (period === 'start') {
+			if (newTime.isSameOrBefore(moment(instance.dayVars[day].finish.get(), 'HH:mm'))) {
+				instance.dayVars[day].start.set(e.currentTarget.value);
+			} else {
+				e.currentTarget.value = instance.dayVars[day].start.get();
+			}
+		} else if (period === 'finish') {
+			if (newTime.isSameOrAfter(moment(instance.dayVars[day].start.get(), 'HH:mm'))) {
+				instance.dayVars[day].finish.set(e.currentTarget.value);
+			} else {
+				e.currentTarget.value = instance.dayVars[day].finish.get();
+			}
+		}
+	},
+	'change .dayOpenCheck input'(e, instance) {
+		const [day, period] = splitDayAndPeriod(e.currentTarget.name);
+		instance.dayVars[day][period].set(e.target.checked);
+	},
+	'change .preview-settings, keyup .preview-settings'(e, instance) {
+		let { value } = e.currentTarget;
+		if (e.currentTarget.type === 'radio') {
+			value = value === 'true';
+			instance[e.currentTarget.name].set(value);
+		}
+	},
+	'submit .rocket-form'(e, instance) {
+		e.preventDefault();
+
+		// convert all times to utc then update them in db
+		const days = [];
+		for (const d in instance.dayVars) {
+			if (instance.dayVars.hasOwnProperty(d)) {
+				const day = instance.dayVars[d];
+				const start = moment(day.start.get(), 'HH:mm').format('HH:mm');
+				const finish = moment(day.finish.get(), 'HH:mm').format('HH:mm');
+				days.push({
+					day: d,
+					start,
+					finish,
+					open: day.open.get(),
+				});
+			}
+		}
+		Meteor.call('livechat:saveBusinessHour', {
+			...instance.businessHour.get(),
+			workHours: days,
+		}, function(err /* ,result*/) {
+			if (err) {
+				return handleError(err);
+			}
+			toastr.success(t('Business_hours_updated'));
+		});
+	},
+});
+
+Template.livechatBusinessHoursForm.onCreated(async function() {
+	this.dayVars = {
+		Monday: {
+			start: new ReactiveVar('08:00'),
+			finish: new ReactiveVar('20:00'),
+			open: new ReactiveVar(true),
+		},
+		Tuesday: {
+			start: new ReactiveVar('00:00'),
+			finish: new ReactiveVar('00:00'),
+			open: new ReactiveVar(true),
+		},
+		Wednesday: {
+			start: new ReactiveVar('00:00'),
+			finish: new ReactiveVar('00:00'),
+			open: new ReactiveVar(true),
+		},
+		Thursday: {
+			start: new ReactiveVar('00:00'),
+			finish: new ReactiveVar('00:00'),
+			open: new ReactiveVar(true),
+		},
+		Friday: {
+			start: new ReactiveVar('00:00'),
+			finish: new ReactiveVar('00:00'),
+			open: new ReactiveVar(true),
+		},
+		Saturday: {
+			start: new ReactiveVar('00:00'),
+			finish: new ReactiveVar('00:00'),
+			open: new ReactiveVar(false),
+		},
+		Sunday: {
+			start: new ReactiveVar('00:00'),
+			finish: new ReactiveVar('00:00'),
+			open: new ReactiveVar(false),
+		},
+	};
+	this.businessHour = new ReactiveVar({});
+
+	const { businessHour } = await APIClient.v1.get('livechat/business-hour');
+	this.businessHour.set(businessHour);
+	businessHour.workHours.forEach((d) => {
+		if (businessHour.timezone.name) {
+			this.dayVars[d.day].start.set(moment.utc(d.start, 'HH:mm').tz(businessHour.timezone.name).format('HH:mm'));
+			this.dayVars[d.day].finish.set(moment.utc(d.finish, 'HH:mm').tz(businessHour.timezone.name).format('HH:mm'));
+		} else {
+			this.dayVars[d.day].start.set(moment.utc(d.start, 'HH:mm').local().format('HH:mm'));
+			this.dayVars[d.day].finish.set(moment.utc(d.finish, 'HH:mm').local().format('HH:mm'));
+		}
+		this.dayVars[d.day].open.set(d.open);
+	});
+});

app/livechat/client/views/app/business-hours/livechatMainBusinessHours.html

@@ -0,0 +1,7 @@
+<template name="livechatMainBusinessHours">
+    {{#requiresPermission 'view-livechat-business-hours'}}
+        <div class="livechat-businessHours-div">
+            {{> Template.dynamic template=getTemplate}}
+        </div>
+    {{/requiresPermission}}
+</template>

app/livechat/client/views/app/business-hours/livechatMainBusinessHours.js

@@ -0,0 +1,10 @@
+import { Template } from 'meteor/templating';
+
+import './livechatMainBusinessHours.html';
+import { businessHourManager } from './BusinessHours';
+
+Template.livechatMainBusinessHours.helpers({
+	getTemplate() {
+		return businessHourManager.getTemplate();
+	},
+});