snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,127 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { InputBox, Field, MultiSelect, FieldGroup, Box, Select, FieldLabel, FieldRow, Callout } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useId, useMemo } from 'react';
+import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+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
+export type BusinessHoursFormProps = { type?: 'default' | 'custom' };
+
+const BusinessHoursForm = ({ type }: BusinessHoursFormProps) => {
+	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 = useId();
+	const daysOpenField = useId();
+	const daysTimeField = useId();
+
+	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>
+				<Callout title={t('Daylight_savings_time')} type='info' marginBlockStart='x8'>
+					{t('Business_hours_will_update_automatically')}
+				</Callout>
+			</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')}
+								width='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} marginInlineEnd={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} marginInlineStart={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;