[FIX] Save button enabled by default in Omnichannel Business Hours Form (#19493)

* [IMPROVE] Checking if the form has some changes before turn save button clickable.

* Changing variable name for better reading.

Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>

client/omnichannel/businessHours/BusinessHoursFormContainer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FieldGroup, Box } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSubscription } from 'use-subscription';
@@ -23,7 +23,7 @@ const getInitalData = ({ workHours }) => ({
 
 const cleanFunc = () => {};
 
-const BusinessHoursFormContainer = ({ data, saveRef }) => {
+const BusinessHoursFormContainer = ({ data, saveRef, onChange }) => {
 	const forms = useSubscription(formsSubscription);
 
 	const {
@@ -40,10 +40,14 @@ const BusinessHoursFormContainer = ({ data, saveRef }) => {
 	const onChangeTimezone = useChangeHandler('timezone', saveRef);
 	const onChangeMultipleBHForm = useChangeHandler('multiple', saveRef);
 
-	const { values, handlers } = useForm(getInitalData(data));
+	const { values, handlers, hasUnsavedChanges } = useForm(getInitalData(data));
 
 	saveRef.current.form = values;
 
+	useEffect(() => {
+		onChange(hasUnsavedChanges);
+	});
+
 	return <Box maxWidth='600px' w='full' alignSelf='center'>
 		<FieldGroup>
 			{showMultipleBHForm && MultipleBHForm && <MultipleBHForm onChange={onChangeMultipleBHForm} data={data}/>}

client/omnichannel/businessHours/EditBusinessHoursPage.js

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useState } from 'react';
 import { Button, ButtonGroup, Callout } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
@@ -22,6 +22,8 @@ const EditBusinessHoursPage = ({ id, type }) => {
 
 	const saveData = useRef({ form: {} });
 
+	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
 	const save = useMethod('livechat:saveBusinessHour');
 	const deleteBH = useMethod('livechat:removeBusinessHour');
 
@@ -109,13 +111,16 @@ const EditBusinessHoursPage = ({ id, type }) => {
 				{type === 'custom' && <Button primary danger onClick={handleDelete}>
 					{t('Delete')}
 				</Button>}
-				<Button primary onClick={handleSave}>
+				<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>
 					{t('Save')}
 				</Button>
 			</ButtonGroup>
 		</Page.Header>
 		<Page.ScrollableContentWithShadow>
-			<BusinessHoursFormContainer data={data.businessHour} saveRef={saveData}/>
+			<BusinessHoursFormContainer
+				data={data.businessHour}
+				saveRef={saveData}
+				onChange={(hasChanges) => setHasUnsavedChanges(hasChanges)} />
 		</Page.ScrollableContentWithShadow>
 	</Page>;
 };