[NEW][ENTERPRISE] Omnichannel multiple business hours

app/livechat/client/route.js

@@ -7,7 +7,7 @@ export const livechatManagerRoutes = FlowRouter.group({
 	name: 'livechat-manager',
 });
 
-const load = () => import('./views/admin');
+export const load = () => import('./views/admin');
 
 AccountBox.addRoute({
 	name: 'livechat-dashboard',

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

@@ -1,28 +1,33 @@
-import { Meteor } from 'meteor/meteor';
-
 import { IBusinessHour } from './IBusinessHour';
 import { SingleBusinessHour } from './Single';
-import { callbacks } from '../../../../../callbacks/client';
+import { ILivechatBusinessHour } from '../../../../../../definition/ILivechatBusinessHour';
 
 class BusinessHoursManager {
 	private businessHour: IBusinessHour;
 
-	onStartBusinessHourManager(businessHour: IBusinessHour): void {
-		this.registerBusinessHour(businessHour);
+	constructor(businessHour: IBusinessHour) {
+		this.setBusinessHourManager(businessHour);
+	}
+
+	setBusinessHourManager(businessHour: IBusinessHour): void {
+		this.registerBusinessHourMethod(businessHour);
 	}
 
-	registerBusinessHour(businessHour: IBusinessHour): void {
+	registerBusinessHourMethod(businessHour: IBusinessHour): void {
 		this.businessHour = businessHour;
 	}
 
 	getTemplate(): string {
 		return this.businessHour.getView();
 	}
-}
 
-export const businessHourManager = new BusinessHoursManager();
+	shouldShowCustomTemplate(businessHourData: ILivechatBusinessHour): boolean {
+		return this.businessHour.shouldShowCustomTemplate(businessHourData);
+	}
+
+	shouldShowBackButton(): boolean {
+		return this.businessHour.shouldShowBackButton();
+	}
+}
 
-Meteor.startup(() => {
-	const { BusinessHourClass } = callbacks.run('on-business-hour-start', { BusinessHourClass: SingleBusinessHour });
-	businessHourManager.onStartBusinessHourManager(new BusinessHourClass() as IBusinessHour);
-});
+export const businessHourManager = new BusinessHoursManager(new SingleBusinessHour() as IBusinessHour);

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

@@ -1,3 +1,7 @@
+import { ILivechatBusinessHour } from '../../../../../../definition/ILivechatBusinessHour';
+
 export interface IBusinessHour {
 	getView(): string;
+	shouldShowCustomTemplate(businessHourData: ILivechatBusinessHour): boolean;
+	shouldShowBackButton(): boolean;
 }

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

@@ -4,4 +4,12 @@ export class SingleBusinessHour implements IBusinessHour {
 	getView(): string {
 		return 'livechatBusinessHoursForm';
 	}
+
+	shouldShowCustomTemplate(): boolean {
+		return false;
+	}
+
+	shouldShowBackButton(): boolean {
+		return false;
+	}
 }

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

@@ -2,15 +2,20 @@
     {{#requiresPermission 'view-livechat-business-hours'}}
         <form class="rocket-form" id="businessHoursForm">
 
+            {{#if customFieldsTemplate}}
+                {{> Template.dynamic template=customFieldsTemplate data=data }}
+            {{/if}}
+
             <!-- 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>
+                        <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>
+                        <label class="dayOpenCheck"><input type="checkbox" name={{openName day}}>{{name day}}
+                        </label>
                     {{/if}}
                 {{/each}}
             </fieldset>
@@ -29,14 +34,16 @@ <h1><strong>{{name day}}</strong></h1>
                             <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;">
+                                        <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;">
+                                        <input type="time" class="preview-settings rc-input__element"
+                                               name={{finishName day}} id={{finishName day}} value={{finish day}}
+                                               style="width=100px;">
                                     </div>
                                 </td>
                             </tr>
@@ -46,8 +53,9 @@ <h1><strong>{{name day}}</strong></h1>
             </fieldset>
 
 
-            <div class="rc-button__group submit">
-                <button class="rc-button rc-button--primary"><i class="icon-floppy"></i>{{_ "Save"}}</button>
+            <div class="rc-button__group">
+                {{#if showBackButton}}<button class="rc-button back" type="button"><i class="icon-left-big"></i><span>{{_ "Back"}}</span></button>{{/if}}
+                <button class="rc-button rc-button--primary save"><i class="icon-floppy"></i><span>{{_ "Save"}}</span></button>
             </div>
         </form>
     {{/requiresPermission}}

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

@@ -2,11 +2,14 @@ import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
+import { FlowRouter } from 'meteor/kadira:flow-router';
 import toastr from 'toastr';
 import moment from 'moment';
 
 import { t, handleError, APIClient } from '../../../../../utils/client';
 import './livechatBusinessHoursForm.html';
+import { getCustomFormTemplate } from '../customTemplates/register';
+import { businessHourManager } from './BusinessHours';
 
 Template.livechatBusinessHoursForm.helpers({
 	days() {
@@ -33,6 +36,18 @@ Template.livechatBusinessHoursForm.helpers({
 	open(day) {
 		return Template.instance().dayVars[day.day].open.get();
 	},
+	customFieldsTemplate() {
+		if (!businessHourManager.shouldShowCustomTemplate(Template.instance().businessHour.get())) {
+			return;
+		}
+		return getCustomFormTemplate('livechatBusinessHoursForm');
+	},
+	showBackButton() {
+		return businessHourManager.shouldShowBackButton();
+	},
+	data() {
+		return Template.instance().businessHour;
+	},
 });
 
 const splitDayAndPeriod = (value) => value.split('_');
@@ -69,6 +84,12 @@ Template.livechatBusinessHoursForm.events({
 			instance[e.currentTarget.name].set(value);
 		}
 	},
+
+	'click button.back'(e/* , instance*/) {
+		e.preventDefault();
+		FlowRouter.go('livechat-business-hours');
+	},
+
 	'submit .rocket-form'(e, instance) {
 		e.preventDefault();
 
@@ -87,14 +108,23 @@ Template.livechatBusinessHoursForm.events({
 				});
 			}
 		}
-		Meteor.call('livechat:saveBusinessHour', {
+
+		const businessHourData = {
 			...instance.businessHour.get(),
 			workHours: days,
-		}, function(err /* ,result*/) {
+		};
+
+		instance.$('.customFormField').each((i, el) => {
+			const elField = instance.$(el);
+			const name = elField.attr('name');
+			businessHourData[name] = elField.val();
+		});
+		Meteor.call('livechat:saveBusinessHour', businessHourData, function(err /* ,result*/) {
 			if (err) {
 				return handleError(err);
 			}
 			toastr.success(t('Business_hours_updated'));
+			FlowRouter.go('livechat-business-hours');
 		});
 	},
 });
@@ -112,7 +142,6 @@ const createDefaultBusinessHour = () => {
 	};
 };
 
-
 Template.livechatBusinessHoursForm.onCreated(async function() {
 	this.dayVars = createDefaultBusinessHour().workHours.reduce((acc, day) => {
 		acc[day.day] = {
@@ -124,21 +153,28 @@ Template.livechatBusinessHoursForm.onCreated(async function() {
 	}, {});
 	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);
-		});
-	}
+	this.autorun(async () => {
+		const id = FlowRouter.getParam('_id');
+		let url = 'livechat/business-hour';
+		if (id) {
+			url += `?_id=${ id }`;
+		}
+		const { businessHour } = await APIClient.v1.get(url);
+		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

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

app/livechat/client/views/app/customTemplates/register.js

@@ -2,4 +2,6 @@ export const customFormTemplate = new Map();
 
 export const addCustomFormTemplate = (form, customTemplateName) => customFormTemplate.set(form, customTemplateName);
 
+export const removeCustomTemplate = (form) => customFormTemplate.delete(form);
+
 export const getCustomFormTemplate = (form) => customFormTemplate.get(form);

app/livechat/server/business-hour/AbstractBusinessHour.ts

@@ -10,12 +10,17 @@ import { LivechatBusinessHours, Users } from '../../../models/server/raw';
 export interface IBusinessHour {
 	saveBusinessHour(businessHourData: ILivechatBusinessHour): Promise<void>;
 	allowAgentChangeServiceStatus(agentId: string): Promise<boolean>;
-	getBusinessHour(id: string): Promise<ILivechatBusinessHour>;
+	getBusinessHour(id: string): Promise<ILivechatBusinessHour | undefined>;
 	findHoursToCreateJobs(): Promise<IWorkHoursForCreateCronJobs[]>;
 	openBusinessHoursByDayHour(day: string, hour: string): Promise<void>;
 	closeBusinessHoursByDayAndHour(day: string, hour: string): Promise<void>;
 	removeBusinessHoursFromUsers(): Promise<void>;
+	removeBusinessHourById(id: string): Promise<void>;
+	removeBusinessHourFromUsers(departmentId: string, businessHourId: string): Promise<void>;
 	openBusinessHoursIfNeeded(): Promise<void>;
+	removeBusinessHourFromUsersByIds(userIds: string[], businessHourId: string): Promise<void>;
+	addBusinessHourToUsersByIds(userIds: string[], businessHourId: string): Promise<void>;
+	setDefaultToUsersIfNeeded(userIds: string[]): Promise<void>;
 }
 
 export abstract class AbstractBusinessHour {
@@ -36,10 +41,10 @@ export abstract class AbstractBusinessHour {
 		await this.UsersRepository.updateLivechatStatusBasedOnBusinessHours();
 	}
 
-	protected async getBusinessHoursThatMustBeOpened(day: string, currentTime: any, activeBusinessHours: ILivechatBusinessHour[]): Promise<Record<string, any>[]> {
+	protected async getBusinessHoursThatMustBeOpened(currentTime: any, activeBusinessHours: ILivechatBusinessHour[]): Promise<Record<string, any>[]> {
 		return activeBusinessHours
 			.filter((businessHour) => businessHour.workHours
-				.filter((hour) => hour.start.cron.dayOfWeek === day)
+				.filter((hour) => hour.open)
 				.some((hour) => {
 					const localTimeStart = moment(`${ hour.start.cron.dayOfWeek }:${ hour.start.cron.time }`, 'dddd:HH:mm');
 					const localTimeFinish = moment(`${ hour.finish.cron.dayOfWeek }:${ hour.finish.cron.time }`, 'dddd:HH:mm');
@@ -50,4 +55,40 @@ export abstract class AbstractBusinessHour {
 				type: businessHour.type,
 			}));
 	}
+
+	protected convertWorkHoursWithServerTimezone(businessHourData: ILivechatBusinessHour): ILivechatBusinessHour {
+		businessHourData.workHours.forEach((hour: any) => {
+			hour.start = {
+				time: hour.start,
+				utc: {
+					dayOfWeek: this.formatDayOfTheWeekFromUTC(`${ hour.day }:${ hour.start }`, 'dddd'),
+					time: this.formatDayOfTheWeekFromUTC(`${ hour.day }:${ hour.start }`, 'HH:mm'),
+				},
+				cron: {
+					dayOfWeek: this.formatDayOfTheWeekFromServerTimezone(`${ hour.day }:${ hour.start }`, 'dddd'),
+					time: this.formatDayOfTheWeekFromServerTimezone(`${ hour.day }:${ hour.start }`, ' HH:mm'),
+				},
+			};
+			hour.finish = {
+				time: hour.finish,
+				utc: {
+					dayOfWeek: this.formatDayOfTheWeekFromUTC(`${ hour.day }:${ hour.finish }`, 'dddd'),
+					time: this.formatDayOfTheWeekFromUTC(`${ hour.day }:${ hour.finish }`, 'HH:mm'),
+				},
+				cron: {
+					dayOfWeek: this.formatDayOfTheWeekFromServerTimezone(`${ hour.day }:${ hour.finish }`, 'dddd'),
+					time: this.formatDayOfTheWeekFromServerTimezone(`${ hour.day }:${ hour.finish }`, 'HH:mm'),
+				},
+			};
+		});
+		return businessHourData;
+	}
+
+	protected formatDayOfTheWeekFromServerTimezone(hour: string, format: string): string {
+		return moment(hour, 'dddd:HH:mm').format(format);
+	}
+
+	protected formatDayOfTheWeekFromUTC(hour: string, format: string): string {
+		return moment(hour, 'dddd:HH:mm').utc().format(format);
+	}
 }