[FIX] Omnichannel Business Hours form is not being rendered (#20007)

* business hour - error showing on "single" configuration and not able to edit and create with "multiple" * Implement validation for new values and valid form for business hours (edit/create) * Missing translations PT-BR for Business Hour pages. * Fill full height screen of table on Business Hours list. * Fix method not found on LivechatDepartmentAgentsRaw(EE) Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>
RocketChat · Dec 31, 2020 · d6d4a54 · d6d4a54
1 parent 5a1c0d4
commit d6d4a54
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 36 deletions.
diff --git a/client/sidebar/sections/Omnichannel.js b/client/sidebar/sections/Omnichannel.js
@@ -1,17 +1,20 @@
 import React from 'react';
 import { Sidebar } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
+import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useMethod } from '../../contexts/ServerContext';
 import { useOmnichannelShowQueueLink, useOmnichannelAgentAvailable, useOmnichannelQueueLink, useOmnichannelDirectoryLink } from '../../contexts/OmnichannelContext';
 
 const OmnichannelSection = React.memo((props) => {
-	const method = useMethod('livechat:changeLivechatStatus');
+	const changeAgentStatus = useMethod('livechat:changeLivechatStatus');
 	const t = useTranslation();
 	const agentAvailable = useOmnichannelAgentAvailable();
 	const showOmnichannelQueueLink = useOmnichannelShowQueueLink();
 	const queueLink = useOmnichannelQueueLink();
 	const directoryLink = useOmnichannelDirectoryLink();
+	const dispatchToastMessage = useToastMessageDispatch();
 
 	const icon = {
 		title: agentAvailable ? t('Available') : t('Not_Available'),
@@ -23,12 +26,20 @@ const OmnichannelSection = React.memo((props) => {
 		title: t('Contact_Center'),
 		icon: 'contact',
 	};
+	const handleStatusChange = useMutableCallback(async () => {
+		try {
+			await changeAgentStatus();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+			console.log(error);
+		}
+	});
 
 	return <Sidebar.TopBar.ToolBox { ...props }>
 		<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
 		<Sidebar.TopBar.Actions>
 			{showOmnichannelQueueLink && <Sidebar.TopBar.Action icon='queue' title={t('Queue')} is='a' href={queueLink}/> }
-			<Sidebar.TopBar.Action {...icon} onClick={() => { method(); }}/>
+			<Sidebar.TopBar.Action {...icon} onClick={handleStatusChange}/>
 			<Sidebar.TopBar.Action {...directoryIcon} href={directoryLink} is='a' />
 		</Sidebar.TopBar.Actions>
 	</Sidebar.TopBar.ToolBox>;

diff --git a/client/views/omnichannel/businessHours/BusinessHoursFormContainer.js b/client/views/omnichannel/businessHours/BusinessHoursFormContainer.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FieldGroup, Box } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSubscription } from 'use-subscription';
@@ -23,9 +23,12 @@ const getInitalData = ({ workHours }) => ({
 
 const cleanFunc = () => {};
 
-const BusinessHoursFormContainer = ({ data, saveRef, onChange }) => {
+const BusinessHoursFormContainer = ({ data, saveRef, onChange = () => {} }) => {
 	const forms = useSubscription(formsSubscription);
 
+	const [hasChangesMultiple, setHasChangesMultiple] = useState(false);
+	const [hasChangesTimeZone, setHasChangesTimeZone] = useState(false);
+
 	const {
 		useBusinessHoursTimeZone = cleanFunc,
 		useBusinessHoursMultiple = cleanFunc,
@@ -45,13 +48,13 @@ const BusinessHoursFormContainer = ({ data, saveRef, onChange }) => {
 	saveRef.current.form = values;
 
 	useEffect(() => {
-		onChange(hasUnsavedChanges);
+		onChange(hasUnsavedChanges || (showMultipleBHForm && hasChangesMultiple) || (showTimezone && hasChangesTimeZone));
 	});
 
 	return <Box maxWidth='600px' w='full' alignSelf='center'>
 		<FieldGroup>
-			{showMultipleBHForm && MultipleBHForm && <MultipleBHForm onChange={onChangeMultipleBHForm} data={data}/>}
-			{showTimezone && TimezoneForm && <TimezoneForm onChange={onChangeTimezone} data={data?.timezone?.name ?? data?.timezoneName}/>}
+			{showMultipleBHForm && MultipleBHForm && <MultipleBHForm onChange={onChangeMultipleBHForm} data={data} hasChangesAndIsValid={setHasChangesMultiple} />}
+			{showTimezone && TimezoneForm && <TimezoneForm onChange={onChangeTimezone} data={data?.timezone?.name ?? data?.timezoneName} hasChanges={setHasChangesTimeZone}/>}
 			<BusinessHourForm values={values} handlers={handlers}/>
 		</FieldGroup>
 	</Box>;

diff --git a/client/views/omnichannel/businessHours/BusinessHoursPage.js b/client/views/omnichannel/businessHours/BusinessHoursPage.js
@@ -22,14 +22,14 @@ const BusinessHoursPage = () => {
 	return <Page>
 		<Page.Header title={t('Business_Hours')}>
 			<ButtonGroup>
-				<Button small square onClick={handleNew}>
-					<Icon name='plus'/>
+				<Button onClick={handleNew}>
+					<Icon name='plus' /> {t('New')}
 				</Button>
 			</ButtonGroup>
 		</Page.Header>
-		<Page.ScrollableContentWithShadow>
+		<Page.Content>
 			<Table />
-		</Page.ScrollableContentWithShadow>
+		</Page.Content>
 	</Page>;
 };
 

diff --git a/client/views/omnichannel/businessHours/BusinessHoursRouter.js b/client/views/omnichannel/businessHours/BusinessHoursRouter.js
@@ -28,7 +28,7 @@ const BusinessHoursRouter = () => {
 	}, [context, isSingleBH, router, type]);
 
 	if ((context === 'edit' && type) || (isSingleBH && (context !== 'edit' || type !== 'default'))) {
-		return <EditBusinessHoursPage type={type} id={id}/>;
+		return type ? <EditBusinessHoursPage type={type} id={id}/> : null;
 	}
 
 	if (context === 'new') {

diff --git a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js
@@ -23,7 +23,7 @@ const EditBusinessHoursPage = ({ id, type }) => {
 
 	const saveData = useRef({ form: {} });
 
-	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	const [hasChanges, setHasChanges] = useState(false);
 
 	const save = useMethod('livechat:saveBusinessHour');
 	const deleteBH = useMethod('livechat:removeBusinessHour');
@@ -112,7 +112,7 @@ const EditBusinessHoursPage = ({ id, type }) => {
 				{type === 'custom' && <Button primary danger onClick={handleDelete}>
 					{t('Delete')}
 				</Button>}
-				<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>
+				<Button primary onClick={handleSave} disabled={!hasChanges}>
 					{t('Save')}
 				</Button>
 			</ButtonGroup>
@@ -121,7 +121,7 @@ const EditBusinessHoursPage = ({ id, type }) => {
 			<BusinessHoursFormContainer
 				data={data.businessHour}
 				saveRef={saveData}
-				onChange={(hasChanges) => setHasUnsavedChanges(hasChanges)} />
+				onChange={setHasChanges} />
 		</Page.ScrollableContentWithShadow>
 	</Page>;
 };

diff --git a/client/views/omnichannel/businessHours/NewBusinessHoursPage.js b/client/views/omnichannel/businessHours/NewBusinessHoursPage.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
@@ -35,6 +35,8 @@ const NewBusinessHoursPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
+	const [hasChanges, setHasChanges] = useState(false);
+
 	const saveData = useRef({ form: {} });
 
 	const save = useMethod('livechat:saveBusinessHour');
@@ -83,13 +85,13 @@ const NewBusinessHoursPage = () => {
 				<Button onClick={handleReturn}>
 					{t('Back')}
 				</Button>
-				<Button primary onClick={handleSave}>
+				<Button primary onClick={handleSave} disabled={!hasChanges}>
 					{t('Save')}
 				</Button>
 			</ButtonGroup>
 		</Page.Header>
 		<Page.ScrollableContentWithShadow>
-			<BusinessHoursFormContainer data={defaultBusinessHour} saveRef={saveData}/>
+			<BusinessHoursFormContainer data={defaultBusinessHour} saveRef={saveData} onChange={setHasChanges}/>
 		</Page.ScrollableContentWithShadow>
 	</Page>;
 };

diff --git a/ee/app/livechat-enterprise/server/business-hour/Multiple.ts b/ee/app/livechat-enterprise/server/business-hour/Multiple.ts
@@ -6,8 +6,8 @@ import {
 } from '../../../../../app/livechat/server/business-hour/AbstractBusinessHour';
 import { ILivechatBusinessHour } from '../../../../../definition/ILivechatBusinessHour';
 import { LivechatDepartmentRaw } from '../../../../../app/models/server/raw/LivechatDepartment';
-import { LivechatDepartmentAgentsRaw } from '../../../models/server/raw/LivechatDepartmentAgents';
-import { LivechatDepartment, LivechatDepartmentAgents } from '../../../../../app/models/server/raw';
+import LivechatDepartmentAgentsRaw from '../../../models/server/raw/LivechatDepartmentAgents';
+import { LivechatDepartment } from '../../../../../app/models/server/raw';
 import { filterBusinessHoursThatMustBeOpened } from '../../../../../app/livechat/server/business-hour/Helper';
 import { closeBusinessHour, openBusinessHour, removeBusinessHourByAgentIds } from './Helper';
 
@@ -19,7 +19,7 @@ interface IBusinessHoursExtraProperties extends ILivechatBusinessHour {
 export class MultipleBusinessHoursBehavior extends AbstractBusinessHourBehavior implements IBusinessHourBehavior {
 	private DepartmentsRepository: LivechatDepartmentRaw = LivechatDepartment;
 
-	private DepartmentsAgentsRepository = LivechatDepartmentAgents as LivechatDepartmentAgentsRaw;
+	private DepartmentsAgentsRepository = LivechatDepartmentAgentsRaw;
 
 	constructor() {
 		super();

diff --git a/ee/app/models/server/index.js b/ee/app/models/server/index.js
@@ -7,6 +7,7 @@ import CannedResponseRaw from './raw/CannedResponse';
 import LivechatPriorityRaw from './raw/LivechatPriority';
 import LivechatTagRaw from './raw/LivechatTag';
 import LivechatUnitMonitorsRaw from './raw/LivechatUnitMonitors';
+import LivechatDepartmentAgentsRaw from './raw/LivechatDepartmentAgents';
 import './models/LivechatDepartment';
 import './models/LivechatRooms';
 import './models/LivechatInquiry';
@@ -24,4 +25,5 @@ export {
 	LivechatUnitMonitorsRaw,
 	LivechatPriority,
 	LivechatPriorityRaw,
+	LivechatDepartmentAgentsRaw,
 };
diff --git a/ee/app/models/server/raw/LivechatDepartmentAgents.ts b/ee/app/models/server/raw/LivechatDepartmentAgents.ts
@@ -1,4 +1,5 @@
 import { LivechatDepartmentAgentsRaw as Raw } from '../../../../../app/models/server/raw/LivechatDepartmentAgents';
+import { LivechatDepartmentAgents } from '../../../../../app/models/server';
 
 export class LivechatDepartmentAgentsRaw extends Raw {
 	findAgentsByAgentIdAndBusinessHourId(agentId: string, businessHourId: string): Promise<Record<string, any>> {
@@ -24,3 +25,5 @@ export class LivechatDepartmentAgentsRaw extends Raw {
 		return this.col.aggregate([match, lookup, unwind, withBusinessHourId, project]).toArray();
 	}
 }
+
+export default new LivechatDepartmentAgentsRaw(LivechatDepartmentAgents.model.rawCollection());
diff --git a/ee/client/omnichannel/additionalForms/BusinessHoursMultiple.js b/ee/client/omnichannel/additionalForms/BusinessHoursMultiple.js
@@ -14,12 +14,15 @@ const getInitialData = (data = {}) => ({
 	departments: mapDepartments(data.departments),
 });
 
-const BusinessHoursMultipleContainer = ({ onChange, data: initialData, className }) => {
+const BusinessHoursMultipleContainer = ({ onChange, data: initialData, className, hasChangesAndIsValid = () => {} }) => {
 	const { value: data, phase: state } = useEndpointData('livechat/department');
 
-	const { values, handlers } = useForm(getInitialData(initialData));
+	const { values, handlers, hasUnsavedChanges } = useForm(getInitialData(initialData));
+
+	const { name } = values;
 
 	onChange(values);
+	hasChangesAndIsValid(hasUnsavedChanges && !!name);
 
 	const departmentList = useMemo(() => data && data.departments?.map(({ _id, name }) => [_id, name]), [data]);
 
@@ -59,7 +62,7 @@ export const BusinessHoursMultiple = ({ values = {}, handlers = {}, className, d
 			</Box>
 		</Field>
 		<Field className={className}>
-			<Field.Label>{t('Name')}</Field.Label>
+			<Field.Label>{t('Name')}*</Field.Label>
 			<Field.Row>
 				<TextInput value={name} onChange={handleName} placeholder={t('Name')}/>
 			</Field.Row>

diff --git a/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js b/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js
@@ -1,14 +1,21 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { SelectFiltered, Field } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useTimezoneNameList } from '../../../../client/hooks/useTimezoneNameList';
+import { useForm } from '../../../../client/hooks/useForm';
 
-const BusinessHoursTimeZone = ({ onChange, data, className }) => {
+const getInitialData = (data = {}) => ({
+	name: data ?? '',
+});
+
+const BusinessHoursTimeZone = ({ onChange, data, className, hasChanges = () => {} }) => {
 	const t = useTranslation();
 
-	const [timezone, setTimezone] = useState(data);
+	const { values, handlers, hasUnsavedChanges } = useForm(getInitialData(data));
+
+	const { name } = values;
+	const { handleName } = handlers;
 
 	const timeZones = useTimezoneNameList();
 
@@ -17,18 +24,15 @@ const BusinessHoursTimeZone = ({ onChange, data, className }) => {
 		t(name),
 	]), [t, timeZones]);
 
-	const handleChange = useMutableCallback((value) => {
-		setTimezone(value);
-	});
-
-	onChange({ name: timezone });
+	onChange({ name });
+	hasChanges(hasUnsavedChanges);
 
 	return <Field className={className}>
 		<Field.Label>
 			{t('Timezone')}
 		</Field.Label>
 		<Field.Row>
-			<SelectFiltered options={timeZonesOptions} value={timezone} onChange={handleChange}/>
+			<SelectFiltered options={timeZonesOptions} value={name} onChange={handleName}/>
 		</Field.Row>
 	</Field>;
 };

diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -2733,6 +2733,7 @@
   "Newer_than_may_not_exceed_Older_than": "\"Newer than\" may not exceed \"Older than\"",
   "Nickname": "Nickname",
   "Nickname_Placeholder": "Enter your nickname...",
+  "No": "No",
   "No_available_agents_to_transfer": "No available agents to transfer",
   "No_Canned_Responses": "No Canned Responses",
   "No_channel_with_name_%s_was_found": "No channel with name <strong>\"%s\"</strong> was found!",

diff --git a/packages/rocketchat-i18n/i18n/pt-BR.i18n.json b/packages/rocketchat-i18n/i18n/pt-BR.i18n.json
@@ -1575,7 +1575,7 @@
   "Forward_to_user": "Encaminhar ao usuário",
   "Free": "Grátis",
   "Frequently_Used": "Usados frequentemente",
-  "Friday": "Sexta-Feira",
+  "Friday": "Sexta-feira",
   "From": "De",
   "From_Email": "Email De",
   "From_email_warning": "<b>Aviso</b>: O campo <b>De</b> está sujeito às configurações do seu servidor de emails.",
@@ -2371,6 +2371,7 @@
   "Newer_than_may_not_exceed_Older_than": "\"Mais recente que\" não pode exceder \"Mais antigo que\"",
   "Nickname": "Apelido",
   "Nickname_Placeholder": "Digite seu apelido...",
+  "No": "Não",
   "No_available_agents_to_transfer": "Nenhum agente disponível para transferir",
   "No_channel_with_name_%s_was_found": "Nenhum canal com nome <strong>\"%s\"</strong> foi encontrado!",
   "No_channels_yet": "Você não faz parte de nenhum canal ainda.",
@@ -3181,6 +3182,7 @@
   "Thursday": "Quinta-feira",
   "Time_in_seconds": "Tempo em segundos",
   "Timeouts": "Tempos limite",
+  "Timezone": "Fuso horário",
   "Title": "Título",
   "Title_bar_color": "Cor da barra de título",
   "Title_bar_color_offline": "Cor da barra de título quando offline",
@@ -3230,7 +3232,7 @@
   "Triggers": "Gatilhos",
   "Troubleshoot_Disable_Notifications": "Desativar as notificações",
   "True": "Sim",
-  "Tuesday": "terça",
+  "Tuesday": "Terça-feira",
   "Turn_OFF": "Desligar",
   "Turn_ON": "Ligar",
   "Two Factor Authentication": "Autenticação de dois fatores",