[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,28 @@
+import { Meteor } from 'meteor/meteor';
+
+import { IBusinessHour } from './IBusinessHour';
+import { SingleBusinessHour } from './Single';
+import { callbacks } from '../../../../../callbacks/client';
+
+class BusinessHoursManager {
+	private businessHour: IBusinessHour;
+
+	onStartBusinessHourManager(businessHour: IBusinessHour): void {
+		this.registerBusinessHour(businessHour);
+	}
+
+	registerBusinessHour(businessHour: IBusinessHour): void {
+		this.businessHour = businessHour;
+	}
+
+	getTemplate(): string {
+		return this.businessHour.getView();
+	}
+}
+
+export const businessHourManager = new BusinessHoursManager();
+
+Meteor.startup(() => {
+	const { BusinessHourClass } = callbacks.run('on-business-hour-start', { BusinessHourClass: SingleBusinessHour });
+	businessHourManager.onStartBusinessHourManager(new BusinessHourClass() as IBusinessHour);
+});

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

@@ -0,0 +1,3 @@
+export interface IBusinessHour {
+	getView(): string;
+}

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

@@ -0,0 +1,7 @@
+import { IBusinessHour } from './IBusinessHour';
+
+export class SingleBusinessHour implements IBusinessHour {
+	getView(): string {
+		return 'livechatBusinessHoursForm';
+	}
+}

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

@@ -0,0 +1,54 @@
+<template name="livechatBusinessHoursForm">
+    {{#requiresPermission 'view-livechat-business-hours'}}
+        <form class="rocket-form" id="businessHoursForm">
+
+            <!-- days open -->
+            <fieldset>
+                <legend>{{_ "Open_days_of_the_week"}}</legend>
+                {{#each day in days}}
+                    {{#if open day}}
+                        <label class="dayOpenCheck"><input type="checkbox" name={{openName day}} checked>{{name day}}
+                        </label>
+                    {{else}}
+                        <label class="dayOpenCheck"><input type="checkbox" name={{openName day}}>{{name day}}</label>
+                    {{/if}}
+                {{/each}}
+            </fieldset>
+
+            <!-- times -->
+            <fieldset>
+                <legend>{{_ "Hours"}}</legend>
+                {{#each day in days}}
+                    <div class="input-line">
+                        <h1><strong>{{name day}}</strong></h1>
+                        <table style="width:100%;">
+                            <tr>
+                                <td>{{_ "Open"}}:</td>
+                                <td>{{_ "Close"}}:</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div style="margin-right:30px">
+                                        <input type="time" class="preview-settings rc-input__element" name={{startName
+                                                day}} id={{startName day}}  value={{start day}} style="width=100px;">
+                                    </div>
+                                </td>
+                                <td>
+                                    <div style="margin-right:30px">
+                                        <input type="time" class="preview-settings rc-input__element" name={{finishName
+                                                day}} id={{finishName day}} value={{finish day}} style="width=100px;">
+                                    </div>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                {{/each}}
+            </fieldset>
+
+
+            <div class="rc-button__group submit">
+                <button class="rc-button rc-button--primary"><i class="icon-floppy"></i>{{_ "Save"}}</button>
+            </div>
+        </form>
+    {{/requiresPermission}}
+</template>

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

@@ -0,0 +1,144 @@
+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'));
+		});
+	},
+});
+
+const createDefaultBusinessHour = () => {
+	const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+	const closedDays = ['Saturday', 'Sunday'];
+	return {
+		workHours: days.map((day) => ({
+			day,
+			start: '00:00',
+			finish: '00:00',
+			open: !closedDays.includes(day),
+		})),
+	};
+};
+
+
+Template.livechatBusinessHoursForm.onCreated(async function() {
+	this.dayVars = createDefaultBusinessHour().workHours.reduce((acc, day) => {
+		acc[day.day] = {
+			start: new ReactiveVar(day.start),
+			finish: new ReactiveVar(day.finish),
+			open: new ReactiveVar(day.open),
+		};
+		return acc;
+	}, {});
+	this.businessHour = new ReactiveVar({});
+
+	const { businessHour } = await APIClient.v1.get('livechat/business-hour');
+	this.businessHour.set({
+		...createDefaultBusinessHour(),
+	});
+	if (businessHour) {
+		this.businessHour.set(businessHour);
+		businessHour.workHours.forEach((d) => {
+			if (businessHour.timezone.name) {
+				this.dayVars[d.day].start.set(moment.utc(d.start.utc.time, 'HH:mm').tz(businessHour.timezone.name).format('HH:mm'));
+				this.dayVars[d.day].finish.set(moment.utc(d.finish.utc.time, 'HH:mm').tz(businessHour.timezone.name).format('HH:mm'));
+			} else {
+				this.dayVars[d.day].start.set(moment.utc(d.start.utc.time, 'HH:mm').local().format('HH:mm'));
+				this.dayVars[d.day].finish.set(moment.utc(d.finish.utc.time, '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();
+	},
+});