feat: Allow CE users to customise Business hour timezone (#30565)

.changeset/tidy-cows-destroy.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+feat: Community users will now be able to customize their Business hour timezone

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

@@ -29,10 +29,6 @@ class BusinessHoursManager {
 	showBackButton(): boolean {
 		return this.behavior.showBackButton();
 	}
-
-	showTimezoneTemplate(): boolean {
-		return this.behavior.showTimezoneTemplate();
-	}
 }
 
 export const businessHourManager = new BusinessHoursManager(new SingleBusinessHourBehavior());

apps/meteor/app/livechat/client/views/app/business-hours/IBusinessHourBehavior.ts

@@ -4,5 +4,4 @@ export interface IBusinessHourBehavior {
 	getView(): string;
 	showCustomTemplate(businessHourData: ILivechatBusinessHour): boolean;
 	showBackButton(): boolean;
-	showTimezoneTemplate(): boolean;
 }

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

@@ -12,8 +12,4 @@ export class SingleBusinessHourBehavior implements IBusinessHourBehavior {
 	showBackButton(): boolean {
 		return false;
 	}
-
-	showTimezoneTemplate(): boolean {
-		return false;
-	}
 }

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursFormContainer.js

@@ -7,6 +7,7 @@ import { useForm } from '../../../hooks/useForm';
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
 import { useFormsSubscription } from '../additionalForms';
 import BusinessHourForm from './BusinessHoursForm';
+import BusinessHoursTimeZone from './BusinessHoursTimeZone';
 
 const useChangeHandler = (name, ref) =>
 	useMutableCallback((val) => {
@@ -29,12 +30,10 @@ const BusinessHoursFormContainer = ({ data, saveRef, onChange = () => {} }) => {
 	const [hasChangesMultiple, setHasChangesMultiple] = useState(false);
 	const [hasChangesTimeZone, setHasChangesTimeZone] = useState(false);
 
-	const { useBusinessHoursTimeZone = cleanFunc, useBusinessHoursMultiple = cleanFunc } = forms;
+	const { useBusinessHoursMultiple = cleanFunc } = forms;
 
-	const TimezoneForm = useBusinessHoursTimeZone();
 	const MultipleBHForm = useBusinessHoursMultiple();
 
-	const showTimezone = useReactiveValue(useMutableCallback(() => businessHourManager.showTimezoneTemplate()));
 	const showMultipleBHForm = useReactiveValue(useMutableCallback(() => businessHourManager.showCustomTemplate(data)));
 
 	const onChangeTimezone = useChangeHandler('timezone', saveRef);
@@ -45,7 +44,7 @@ const BusinessHoursFormContainer = ({ data, saveRef, onChange = () => {} }) => {
 	saveRef.current.form = values;
 
 	useEffect(() => {
-		onChange(hasUnsavedChanges || (showMultipleBHForm && hasChangesMultiple) || (showTimezone && hasChangesTimeZone));
+		onChange(hasUnsavedChanges || (showMultipleBHForm && hasChangesMultiple) || hasChangesTimeZone);
 	});
 
 	return (
@@ -54,9 +53,11 @@ const BusinessHoursFormContainer = ({ data, saveRef, onChange = () => {} }) => {
 				{showMultipleBHForm && MultipleBHForm && (
 					<MultipleBHForm onChange={onChangeMultipleBHForm} data={data} hasChangesAndIsValid={setHasChangesMultiple} />
 				)}
-				{showTimezone && TimezoneForm && (
-					<TimezoneForm onChange={onChangeTimezone} data={data?.timezone?.name ?? data?.timezoneName} hasChanges={setHasChangesTimeZone} />
-				)}
+				<BusinessHoursTimeZone
+					onChange={onChangeTimezone}
+					data={data?.timezone?.name ?? data?.timezoneName}
+					hasChanges={setHasChangesTimeZone}
+				/>
 				<BusinessHourForm values={values} handlers={handlers} />
 			</FieldGroup>
 		</Box>

apps/meteor/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js → apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTimeZone.js

@@ -2,8 +2,8 @@ import { SelectFiltered, Field } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
 
-import { useForm } from '../../../../client/hooks/useForm';
-import { useTimezoneNameList } from '../../../../client/hooks/useTimezoneNameList';
+import { useForm } from '../../../hooks/useForm';
+import { useTimezoneNameList } from '../../../hooks/useTimezoneNameList';
 
 const getInitialData = (data = {}) => ({
 	name: data ?? '',

apps/meteor/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.stories.tsx → apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTimeZone.stories.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import BusinessHoursTimeZone from './BusinessHoursTimeZone';
 
 export default {
-	title: 'Enterprise/Omnichannel/BusinessHoursTimeZone',
+	title: 'Omnichannel/BusinessHoursTimeZone',
 	component: BusinessHoursTimeZone,
 	decorators: [
 		(fn) => (

apps/meteor/ee/app/livechat-enterprise/client/startup.ts

@@ -2,20 +2,21 @@ import { Meteor } from 'meteor/meteor';
 
 import { businessHourManager } from '../../../../app/livechat/client/views/app/business-hours/BusinessHours';
 import type { IBusinessHourBehavior } from '../../../../app/livechat/client/views/app/business-hours/IBusinessHourBehavior';
+import { SingleBusinessHourBehavior } from '../../../../app/livechat/client/views/app/business-hours/Single';
 import { settings } from '../../../../app/settings/client';
 import { hasLicense } from '../../license/client';
-import { EESingleBusinessHourBehaviour } from './SingleBusinessHour';
 import { MultipleBusinessHoursBehavior } from './views/business-hours/Multiple';
 
 const businessHours: Record<string, IBusinessHourBehavior> = {
 	multiple: new MultipleBusinessHoursBehavior(),
-	single: new EESingleBusinessHourBehaviour(),
+	single: new SingleBusinessHourBehavior(),
 };
 
 Meteor.startup(() => {
-	settings.onload('Livechat_business_hour_type', async (_, value) => {
+	Tracker.autorun(async () => {
+		const bhType = settings.get<string>('Livechat_business_hour_type');
 		if (await hasLicense('livechat-enterprise')) {
-			businessHourManager.registerBusinessHourBehavior(businessHours[(value as string).toLowerCase()]);
+			businessHourManager.registerBusinessHourBehavior(businessHours[bhType.toLowerCase()]);
 		}
 	});
 });

apps/meteor/ee/app/livechat-enterprise/client/views/business-hours/Multiple.ts

@@ -12,10 +12,6 @@ export class MultipleBusinessHoursBehavior implements IBusinessHourBehavior {
 		return !businessHourData._id || businessHourData.type !== LivechatBusinessHourTypes.DEFAULT;
 	}
 
-	showTimezoneTemplate(): boolean {
-		return true;
-	}
-
 	showBackButton(): boolean {
 		return true;
 	}

apps/meteor/ee/app/livechat-enterprise/server/business-hour/Helper.ts

@@ -1,8 +1,6 @@
 import type { ILivechatBusinessHour } from '@rocket.chat/core-typings';
 import { LivechatBusinessHourTypes } from '@rocket.chat/core-typings';
-import { License } from '@rocket.chat/license';
-import { LivechatBusinessHours, LivechatDepartment, LivechatDepartmentAgents, Users } from '@rocket.chat/models';
-import moment from 'moment-timezone';
+import { LivechatDepartment, LivechatDepartmentAgents, Users } from '@rocket.chat/models';
 
 import { businessHourLogger } from '../../../../../app/livechat/server/lib/logger';
 
@@ -103,28 +101,3 @@ export const removeBusinessHourByAgentIds = async (agentIds: string[], businessH
 	await Users.removeBusinessHourByAgentIds(agentIds, businessHourId);
 	await Users.updateLivechatStatusBasedOnBusinessHours();
 };
-
-export const resetDefaultBusinessHourIfNeeded = async (): Promise<void> => {
-	if (License.hasValidLicense()) {
-		return;
-	}
-
-	const defaultBusinessHour = await LivechatBusinessHours.findOneDefaultBusinessHour<Pick<ILivechatBusinessHour, '_id'>>({
-		projection: { _id: 1 },
-	});
-	if (!defaultBusinessHour) {
-		return;
-	}
-
-	await LivechatBusinessHours.updateOne(
-		{ _id: defaultBusinessHour._id },
-		{
-			$set: {
-				timezone: {
-					name: moment.tz.guess(),
-					utc: String(moment().utcOffset() / 60),
-				},
-			},
-		},
-	);
-};

apps/meteor/ee/app/livechat-enterprise/server/startup.ts

@@ -3,7 +3,6 @@ import { Meteor } from 'meteor/meteor';
 import { businessHourManager } from '../../../../app/livechat/server/business-hour';
 import { SingleBusinessHourBehavior } from '../../../../app/livechat/server/business-hour/Single';
 import { settings } from '../../../../app/settings/server';
-import { resetDefaultBusinessHourIfNeeded } from './business-hour/Helper';
 import { MultipleBusinessHoursBehavior } from './business-hour/Multiple';
 import { updatePredictedVisitorAbandonment, updateQueueInactivityTimeout } from './lib/Helper';
 import { VisitorInactivityMonitor } from './lib/VisitorInactivityMonitor';
@@ -43,6 +42,4 @@ Meteor.startup(async () => {
 			logger.debug(`Business hour manager started`);
 		}
 	});
-
-	await resetDefaultBusinessHourIfNeeded();
 });

apps/meteor/ee/client/omnichannel/additionalForms/register.ts

@@ -6,7 +6,6 @@ import { registerForm } from '../../../../client/views/omnichannel/additionalFor
 import { hasLicense } from '../../../app/license/client';
 import type CurrentChatTags from '../tags/CurrentChatTags';
 import type BusinessHoursMultipleContainer from './BusinessHoursMultipleContainer';
-import type BusinessHoursTimeZone from './BusinessHoursTimeZone';
 import type ContactManager from './ContactManager';
 import type CustomFieldsAdditionalFormContainer from './CustomFieldsAdditionalFormContainer';
 import type DepartmentBusinessHours from './DepartmentBusinessHours';
@@ -29,7 +28,6 @@ declare module '../../../../client/views/omnichannel/additionalForms' {
 		useEeTextAreaInput?: () => LazyExoticComponent<typeof EeTextAreaInput>;
 		useBusinessHoursMultiple?: () => LazyExoticComponent<typeof BusinessHoursMultipleContainer>;
 		useEeTextInput?: () => LazyExoticComponent<typeof EeTextInput>;
-		useBusinessHoursTimeZone?: () => LazyExoticComponent<typeof BusinessHoursTimeZone>;
 		useContactManager?: () => LazyExoticComponent<typeof ContactManager>;
 
 		useCurrentChatTags?: () => LazyExoticComponent<typeof CurrentChatTags>;
@@ -54,7 +52,6 @@ hasLicense('livechat-enterprise').then((enabled) => {
 		useEeTextAreaInput: () => useMemo(() => lazy(() => import('./EeTextAreaInput')), []),
 		useBusinessHoursMultiple: () => useMemo(() => lazy(() => import('./BusinessHoursMultipleContainer')), []),
 		useEeTextInput: () => useMemo(() => lazy(() => import('./EeTextInput')), []),
-		useBusinessHoursTimeZone: () => useMemo(() => lazy(() => import('./BusinessHoursTimeZone')), []),
 		useContactManager: () => useMemo(() => lazy(() => import('./ContactManager')), []),
 		useCurrentChatTags: () => useMemo(() => lazy(() => import('../tags/CurrentChatTags')), []),
 		useDepartmentBusinessHours: () => useMemo(() => lazy(() => import('./DepartmentBusinessHours')), []),