chore: Replace useForm in favor of RHF on BusinessHours

apps/meteor/client/views/admin/settings/MemoizedSetting.tsx

@@ -101,8 +101,8 @@ const MemoizedSetting = ({
 						<Callout type='warning'>{callout}</Callout>
 					</Margins>
 				)}
+				{showUpgradeButton}
 			</Box>
-			{showUpgradeButton}
 		</Field>
 	);
 };

apps/meteor/client/views/admin/settings/Setting.tsx

@@ -2,7 +2,6 @@ import type { ISettingColor, SettingEditor, SettingValue } from '@rocket.chat/co
 import { isSettingColor, isSetting } from '@rocket.chat/core-typings';
 import { Button } from '@rocket.chat/fuselage';
 import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
-import { ExternalLink } from '@rocket.chat/ui-client';
 import { useSettingStructure, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
@@ -113,9 +112,9 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr
 	const showUpgradeButton = useMemo(
 		() =>
 			shouldDisableEnterprise ? (
-				<ExternalLink to={PRICING_URL}>
-					<Button>{t('See_Paid_Plan')}</Button>
-				</ExternalLink>
+				<Button mbs={4} is='a' href={PRICING_URL} target='_blank'>
+					{t('See_Paid_Plan')}
+				</Button>
 			) : undefined,
 		[shouldDisableEnterprise, t],
 	);

apps/meteor/client/views/omnichannel/additionalForms.tsx

@@ -1,4 +1,4 @@
-import BusinessHoursMultipleContainer from '../../../ee/client/omnichannel/additionalForms/BusinessHoursMultipleContainer';
+import BusinessHoursMultiple from '../../../ee/client/omnichannel/additionalForms/BusinessHoursMultiple';
 import ContactManager from '../../../ee/client/omnichannel/additionalForms/ContactManager';
 import CurrentChatTags from '../../../ee/client/omnichannel/additionalForms/CurrentChatTags';
 import CustomFieldsAdditionalForm from '../../../ee/client/omnichannel/additionalForms/CustomFieldsAdditionalForm';
@@ -18,7 +18,7 @@ export {
 	MaxChatsPerAgentDisplay,
 	EeNumberInput,
 	EeTextAreaInput,
-	BusinessHoursMultipleContainer,
+	BusinessHoursMultiple,
 	EeTextInput,
 	ContactManager,
 	CurrentChatTags,

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx

@@ -1,5 +1,4 @@
 import { Box } from '@rocket.chat/fuselage';
-import { action } from '@storybook/addon-actions';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
@@ -19,17 +18,3 @@ export default {
 
 export const Default: ComponentStory<typeof BusinessHoursForm> = (args) => <BusinessHoursForm {...args} />;
 Default.storyName = 'BusinessHoursForm';
-Default.args = {
-	values: {
-		daysOpen: ['Monday', 'Tuesday', 'Saturday'],
-		daysTime: {
-			Monday: { start: '00:00', finish: '08:00' },
-			Tuesday: { start: '00:00', finish: '08:00' },
-			Saturday: { start: '00:00', finish: '08:00' },
-		},
-	},
-	handlers: {
-		handleDaysOpen: action('handleDaysOpen'),
-		handleDaysTime: action('handleDaysTime'),
-	},
-};

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx

@@ -0,0 +1,123 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { InputBox, Field, MultiSelect, FieldGroup, Box, Select, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useMemo } from 'react';
+import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
+
+import { useTimezoneNameList } from '../../../hooks/useTimezoneNameList';
+import { BusinessHoursMultiple } from '../additionalForms';
+import { defaultWorkHours, DAYS_OF_WEEK } from './mapBusinessHoursForm';
+
+type mappedDayTime = {
+	day: string;
+	start: {
+		time: string;
+	};
+	finish: {
+		time: string;
+	};
+	open: boolean;
+};
+
+export type BusinessHoursFormData = {
+	name: string;
+	timezoneName: string;
+	daysOpen: string[];
+	daysTime: mappedDayTime[];
+	departmentsToApplyBusinessHour: string;
+	active: boolean;
+	departments: {
+		value: string;
+		label: string;
+	}[];
+};
+
+// TODO: replace `Select` in favor `SelectFiltered`
+// TODO: add time validation for start and finish not be equal on UI
+// TODO: add time validation for start not be higher than finish on UI
+const BusinessHoursForm = ({ type }: { type?: 'default' | 'custom' }) => {
+	const t = useTranslation();
+	const timeZones = useTimezoneNameList();
+	const timeZonesOptions: SelectOption[] = useMemo(() => timeZones.map((name) => [name, t(name as TranslationKey)]), [t, timeZones]);
+	const daysOptions: SelectOption[] = useMemo(() => DAYS_OF_WEEK.map((day) => [day, t(day as TranslationKey)]), [t]);
+
+	const { watch, control } = useFormContext<BusinessHoursFormData>();
+	const { daysTime } = watch();
+	const { fields: daysTimeFields, replace } = useFieldArray({ control, name: 'daysTime' });
+
+	const timezoneField = useUniqueId();
+	const daysOpenField = useUniqueId();
+	const daysTimeField = useUniqueId();
+
+	const handleChangeDaysTime = (values: string[]) => {
+		const newValues = values
+			.map((item) => daysTime.find(({ day }) => day === item) || defaultWorkHours(true).find(({ day }) => day === item))
+			.filter((item): item is mappedDayTime => Boolean(item));
+		replace(newValues);
+	};
+
+	return (
+		<FieldGroup>
+			{type === 'custom' && <BusinessHoursMultiple />}
+			<Field>
+				<FieldLabel htmlFor={timezoneField}>{t('Timezone')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='timezoneName'
+						control={control}
+						render={({ field }) => <Select id={timezoneField} {...field} options={timeZonesOptions} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel htmlFor={daysOpenField}>{t('Open_days_of_the_week')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='daysOpen'
+						control={control}
+						render={({ field: { onChange, value, name, onBlur } }) => (
+							<MultiSelect
+								id={daysOpenField}
+								onBlur={onBlur}
+								name={name}
+								onChange={(values) => {
+									handleChangeDaysTime(values);
+									onChange(values);
+								}}
+								options={daysOptions}
+								value={value}
+								placeholder={t('Select_an_option')}
+								w='full'
+							/>
+						)}
+					/>
+				</FieldRow>
+			</Field>
+			{daysTimeFields.map((dayTime, index) => (
+				<Field key={dayTime.id}>
+					<FieldLabel>{t(dayTime.day as TranslationKey)}</FieldLabel>
+					<FieldRow>
+						<Box display='flex' flexDirection='column' flexGrow={1} mie={2}>
+							<FieldLabel htmlFor={`${daysTimeField + index}-start`}>{t('Open')}</FieldLabel>
+							<Controller
+								name={`daysTime.${index}.start.time`}
+								render={({ field }) => <InputBox id={`${daysTimeField + index}-start`} type='time' {...field} />}
+							/>
+						</Box>
+						<Box display='flex' flexDirection='column' flexGrow={1} mis={2}>
+							<FieldLabel htmlFor={`${daysTimeField + index}-finish`}>{t('Close')}</FieldLabel>
+							<Controller
+								name={`daysTime.${index}.finish.time`}
+								render={({ field }) => <InputBox id={`${daysTimeField + index}-finish`} type='time' {...field} />}
+							/>
+						</Box>
+					</FieldRow>
+				</Field>
+			))}
+		</FieldGroup>
+	);
+};
+
+export default BusinessHoursForm;

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursPage.js → apps/meteor/client/views/omnichannel/businessHours/BusinessHoursMultiplePage.tsx

@@ -1,27 +1,20 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { lazy, useMemo } from 'react';
 
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 
-const BusinessHoursPage = () => {
+const BusinessHoursMultiplePage = () => {
 	const t = useTranslation();
-	const router = useRoute('omnichannel-businessHours');
+	const router = useRouter();
 
-	const BusinessHoursTable = useMemo(() => lazy(() => import('../../../../ee/client/omnichannel/BusinessHoursTable')), []);
-
-	const handleNew = useMutableCallback(() => {
-		router.push({
-			context: 'new',
-		});
-	});
+	const BusinessHoursTable = useMemo(() => lazy(() => import('../../../../ee/client/omnichannel/businessHours/BusinessHoursTable')), []);
 
 	return (
 		<Page>
 			<PageHeader title={t('Business_Hours')}>
 				<ButtonGroup>
-					<Button icon='plus' onClick={handleNew}>
+					<Button icon='plus' onClick={() => router.navigate('/omnichannel/businessHours/new')}>
 						{t('New')}
 					</Button>
 				</ButtonGroup>
@@ -33,4 +26,4 @@ const BusinessHoursPage = () => {
 	);
 };
 
-export default BusinessHoursPage;
+export default BusinessHoursMultiplePage;