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

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

@@ -0,0 +1,37 @@
+import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, StatesLink, Box } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRole, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { links } from '../../../lib/links';
+
+const BusinessHoursDisabledPage = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const isAdmin = useRole('admin');
+
+	return (
+		<Page>
+			<PageHeader title={t('Business_Hours')} />
+			<PageContent>
+				<Box display='flex' justifyContent='center' height='100%'>
+					<States>
+						<StatesIcon name='clock' />
+						<StatesTitle>{t('Business_hours_is_disabled')}</StatesTitle>
+						<StatesSubtitle>{t('Business_hours_is_disabled_description')}</StatesSubtitle>
+						{isAdmin && (
+							<StatesActions>
+								<StatesAction onClick={() => router.navigate('/admin/settings/Omnichannel')}>{t('Enable_business_hours')}</StatesAction>
+							</StatesActions>
+						)}
+						<StatesLink target='_blank' href={links.go.omnichannelDocs}>
+							{t('Learn_more_about_business_hours')}
+						</StatesLink>
+					</States>
+				</Box>
+			</PageContent>
+		</Page>
+	);
+};
+
+export default BusinessHoursDisabledPage;

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

@@ -0,0 +1,19 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import BusinessHoursForm from './BusinessHoursForm';
+
+export default {
+	component: BusinessHoursForm,
+	decorators: [
+		(fn) => (
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
+				{fn()}
+			</Box>
+		),
+	],
+} satisfies Meta<typeof BusinessHoursForm>;
+
+export const Default: StoryObj<typeof BusinessHoursForm> = {
+	name: 'BusinessHoursForm',
+};

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;

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

@@ -0,0 +1,29 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { lazy } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const BusinessHoursTable = lazy(() => import('./BusinessHoursTable'));
+
+const BusinessHoursMultiplePage = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+
+	return (
+		<Page>
+			<PageHeader title={t('Business_Hours')}>
+				<ButtonGroup>
+					<Button icon='plus' onClick={() => router.navigate('/omnichannel/businessHours/new')}>
+						{t('New')}
+					</Button>
+				</ButtonGroup>
+			</PageHeader>
+			<PageContent>
+				<BusinessHoursTable />
+			</PageContent>
+		</Page>
+	);
+};
+
+export default BusinessHoursMultiplePage;

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

@@ -0,0 +1,40 @@
+import { LivechatBusinessHourTypes } from '@rocket.chat/core-typings';
+import { useRouteParameter, useRouter, useSetting } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import BusinessHoursDisabledPage from './BusinessHoursDisabledPage';
+import BusinessHoursMultiplePage from './BusinessHoursMultiplePage';
+import EditBusinessHours from './EditBusinessHours';
+import EditBusinessHoursWithData from './EditBusinessHoursWithData';
+import { useIsSingleBusinessHours } from './useIsSingleBusinessHours';
+
+const BusinessHoursRouter = () => {
+	const router = useRouter();
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+	const type = useRouteParameter('type') as LivechatBusinessHourTypes;
+	const businessHoursEnabled = useSetting('Livechat_enable_business_hours');
+	const isSingleBH = useIsSingleBusinessHours();
+
+	useEffect(() => {
+		if (isSingleBH) {
+			router.navigate('/omnichannel/businessHours/edit/default');
+		}
+	}, [isSingleBH, router, context, type]);
+
+	if (!businessHoursEnabled) {
+		return <BusinessHoursDisabledPage />;
+	}
+
+	if (context === 'edit' || isSingleBH) {
+		return type ? <EditBusinessHoursWithData type={type} id={id} /> : null;
+	}
+
+	if (context === 'new') {
+		return <EditBusinessHours type={LivechatBusinessHourTypes.CUSTOM} />;
+	}
+
+	return <BusinessHoursMultiplePage />;
+};
+
+export default BusinessHoursRouter;

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

@@ -0,0 +1,52 @@
+import type { ILivechatBusinessHour, Serialized } from '@rocket.chat/core-typings';
+import { IconButton } from '@rocket.chat/fuselage';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import type { KeyboardEvent } from 'react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useRemoveBusinessHour } from './useRemoveBusinessHour';
+
+const BusinessHoursRow = ({ _id, name, timezone, workHours, active, type }: Serialized<ILivechatBusinessHour>) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const handleRemove = useRemoveBusinessHour();
+
+	const handleClick = () => router.navigate(`/omnichannel/businessHours/edit/${type}/${_id}`);
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+		if (!['Enter', 'Space'].includes(e.nativeEvent.code)) {
+			return;
+		}
+
+		handleClick();
+	};
+
+	const openDays = useMemo(() => workHours.filter(({ open }) => !!open).map(({ day }) => day), [workHours]);
+
+	return (
+		<GenericTableRow key={_id} action tabIndex={0} onClick={handleClick} onKeyDown={handleKeyDown}>
+			<GenericTableCell withTruncatedText>{name || t('Default')}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{t(timezone.name as TranslationKey)}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{openDays.join(', ')}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{active ? t('Yes') : t('No')}</GenericTableCell>
+			<GenericTableCell withTruncatedText>
+				{name && (
+					<IconButton
+						icon='trash'
+						small
+						title={t('Remove')}
+						onClick={(e) => {
+							e.stopPropagation();
+							handleRemove(_id, type);
+						}}
+					/>
+				)}
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default memo(BusinessHoursRow);

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

@@ -0,0 +1,68 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import BusinessHoursTable from './BusinessHoursTable';
+
+export default {
+	component: BusinessHoursTable,
+	parameters: {
+		actions: {
+			argTypesRegex: '^on.*',
+		},
+	},
+} satisfies Meta<typeof BusinessHoursTable>;
+
+export const Default: StoryObj<typeof BusinessHoursTable> = {
+	render: (_args) => <BusinessHoursTable />,
+	name: 'BusinessHoursTable',
+
+	args: {
+		businessHours: [
+			{
+				name: '',
+				timezone: { name: 'America/Sao_Paulo' },
+				workHours: [
+					{ day: 'Monday', open: true },
+					{ day: 'Tuesday', open: true },
+					{ day: 'Wednesday', open: true },
+					{ day: 'Saturday', open: true },
+				],
+			},
+			{
+				name: 'Extra',
+				timezone: { name: 'America/Sao_Paulo' },
+				workHours: [
+					{ day: 'Monday', open: true },
+					{ day: 'Tuesday', open: true },
+					{ day: 'Saturday', open: true },
+				],
+			},
+			{
+				name: 'Extra2',
+				timezone: { name: 'America/Sao_Paulo' },
+				workHours: [
+					{ day: 'Saturday', open: true },
+					{ day: 'Sunday', open: true },
+					{ day: 'Monday', open: false },
+				],
+			},
+			{
+				name: 'Extra3',
+				timezone: { name: 'America/Sao_Paulo' },
+				workHours: [
+					{ day: 'Monday', open: true },
+					{ day: 'Saturday', open: true },
+				],
+			},
+		],
+		params: {},
+	},
+
+	decorators: [
+		(fn) => (
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
+				{fn()}
+			</Box>
+		),
+	],
+};

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

@@ -0,0 +1,100 @@
+import { Pagination, States, StatesIcon, StatesActions, StatesAction, StatesTitle } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeaderCell,
+	GenericTableHeader,
+	GenericTableLoadingRow,
+	usePagination,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import BusinessHoursRow from './BusinessHoursRow';
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+const BusinessHoursTable = () => {
+	const t = useTranslation();
+	const [text, setText] = useState('');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				name: text,
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[text, itemsPerPage, current],
+		),
+		500,
+	);
+
+	const getBusinessHours = useEndpoint('GET', '/v1/livechat/business-hours');
+	const { data, isLoading, isSuccess, isError, refetch } = useQuery({
+		queryKey: ['livechat-getBusinessHours', query],
+
+		queryFn: async () => getBusinessHours(query),
+	});
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell>{t('Timezone')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell>{t('Open_Days')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x100'>{t('Enabled')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x100'>{t('Remove')}</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingRow cols={5} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.businessHours.length === 0 && <GenericNoResults />}
+			{isSuccess && data?.businessHours.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Business_Hours')}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.businessHours.map((businessHour) => (
+								<BusinessHoursRow key={businessHour._id} {...businessHour} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default BusinessHoursTable;

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

@@ -0,0 +1,116 @@
+import type { ILivechatBusinessHour, LivechatBusinessHourTypes, Serialized } from '@rocket.chat/core-typings';
+import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { canonicalizeTimezone } from '@rocket.chat/tools';
+import { Page, PageFooter, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useTranslation, useRouter, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { BusinessHoursFormData } from './BusinessHoursForm';
+import BusinessHoursForm from './BusinessHoursForm';
+import { defaultWorkHours } from './mapBusinessHoursForm';
+import { useIsSingleBusinessHours } from './useIsSingleBusinessHours';
+import { useRemoveBusinessHour } from './useRemoveBusinessHour';
+
+const getInitialData = (businessHourData: Serialized<ILivechatBusinessHour> | undefined) => ({
+	name: businessHourData?.name || '',
+	timezoneName: canonicalizeTimezone(businessHourData?.timezone?.name || 'America/Sao_Paulo'),
+	daysOpen: (businessHourData?.workHours || defaultWorkHours()).filter(({ open }) => !!open).map(({ day }) => day),
+	daysTime: (businessHourData?.workHours || defaultWorkHours())
+		.filter(({ open }) => !!open)
+		.map(({ day, start: { time: startTime }, finish: { time: finishTime }, open }) => ({
+			day,
+			start: { time: startTime },
+			finish: { time: finishTime },
+			open,
+		})),
+	departmentsToApplyBusinessHour: '',
+	active: businessHourData?.active ?? true,
+	departments: businessHourData?.departments?.map(({ _id, name }) => ({ value: _id, label: name })) || [],
+});
+
+export type EditBusinessHoursProps = {
+	businessHourData?: Serialized<ILivechatBusinessHour>;
+	type: LivechatBusinessHourTypes;
+};
+
+const EditBusinessHours = ({ businessHourData, type }: EditBusinessHoursProps) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const isSingleBH = useIsSingleBusinessHours();
+
+	const saveBusinessHour = useEndpoint('POST', '/v1/livechat/business-hours.save');
+	const handleRemove = useRemoveBusinessHour();
+
+	const router = useRouter();
+
+	const methods = useForm({ values: getInitialData(businessHourData) });
+	const {
+		reset,
+		handleSubmit,
+		formState: { isDirty },
+	} = methods;
+
+	const handleSave = useStableCallback(async ({ departments, ...data }: BusinessHoursFormData) => {
+		const departmentsToApplyBusinessHour = departments?.map((dep) => dep.value).join(',') || '';
+
+		try {
+			const payload = {
+				...data,
+				...(businessHourData?._id && { _id: businessHourData._id }),
+				type,
+				departmentsToApplyBusinessHour,
+				timezone: data.timezoneName,
+				workHours: data.daysTime.map(({ day, start: { time: startTime }, finish: { time: finishTime }, open }) => ({
+					day,
+					start: startTime,
+					finish: finishTime,
+					open,
+				})),
+			};
+
+			await saveBusinessHour(payload);
+			dispatchToastMessage({ type: 'success', message: t('Business_hours_updated') });
+			router.navigate('/omnichannel/businessHours');
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const formId = useId();
+
+	return (
+		<Page>
+			<PageHeader title={t('Business_Hours')}>
+				<ButtonGroup>
+					{!isSingleBH && <Button onClick={() => router.navigate('/omnichannel/businessHours')}>{t('Back')}</Button>}
+					{type === 'custom' && businessHourData?._id && (
+						<Button danger onClick={() => handleRemove(businessHourData?._id, type)}>
+							{t('Delete')}
+						</Button>
+					)}
+				</ButtonGroup>
+			</PageHeader>
+			<PageScrollableContentWithShadow>
+				<Box maxWidth='600px' width='full' alignSelf='center'>
+					<FormProvider {...methods}>
+						<form id={formId} onSubmit={handleSubmit(handleSave)}>
+							<BusinessHoursForm type={type} />
+						</form>
+					</FormProvider>
+				</Box>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
+				<ButtonGroup>
+					<Button onClick={() => reset()}>{t('Cancel')}</Button>
+					<Button form={formId} primary type='submit'>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</PageFooter>
+		</Page>
+	);
+};
+
+export default EditBusinessHours;

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

@@ -0,0 +1,50 @@
+import type { ILivechatBusinessHour, LivechatBusinessHourTypes } from '@rocket.chat/core-typings';
+import { Button, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import EditBusinessHours from './EditBusinessHours';
+import PageSkeleton from '../../../components/PageSkeleton';
+
+export type EditBusinessHoursWidthDataProps = { id?: ILivechatBusinessHour['_id']; type: LivechatBusinessHourTypes };
+
+const EditBusinessHoursWidthData = ({ id, type }: EditBusinessHoursWidthDataProps) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const getBusinessHour = useEndpoint('GET', '/v1/livechat/business-hour');
+
+	const { data, isPending, isError, refetch } = useQuery({
+		queryKey: ['livechat-getBusinessHourById', id, type],
+		queryFn: async () => getBusinessHour({ _id: id, type }),
+		refetchOnWindowFocus: false,
+	});
+
+	if (isPending) {
+		return <PageSkeleton />;
+	}
+
+	if (isError) {
+		return (
+			<Page>
+				<PageHeader title={t('Business_Hours')}>
+					<Button onClick={() => router.navigate('/omnichannel/businessHours')}>{t('Back')}</Button>
+				</PageHeader>
+				<PageContent>
+					<States>
+						<StatesIcon name='warning' variation='danger' />
+						<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+						<StatesActions>
+							<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+						</StatesActions>
+					</States>
+				</PageContent>
+			</Page>
+		);
+	}
+
+	return <EditBusinessHours businessHourData={data.businessHour} type={type} />;
+};
+
+export default EditBusinessHoursWidthData;

apps/meteor/client/views/omnichannel/businessHours/mapBusinessHoursForm.ts

@@ -0,0 +1,14 @@
+export const DAYS_OF_WEEK = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+const closedDays = ['Saturday', 'Sunday'];
+
+export const defaultWorkHours = (allDays = false) =>
+	DAYS_OF_WEEK.map((day) => ({
+		day,
+		start: {
+			time: '08:00',
+		},
+		finish: {
+			time: '18:00',
+		},
+		open: allDays ? true : !closedDays.includes(day),
+	}));

apps/meteor/client/views/omnichannel/businessHours/useIsSingleBusinessHours.ts

@@ -0,0 +1,5 @@
+import { businessHourManager } from '../../../lib/omnichannel/businessHours/businessHourManager';
+
+// businessHourManager holds a single behavior instance with no reactive store — the previous
+// useReactiveValue wrapper never actually re-ran, so this is a plain read.
+export const useIsSingleBusinessHours = () => businessHourManager.getTemplate() === 'livechatBusinessHoursForm';

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

@@ -0,0 +1,33 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+export const useRemoveBusinessHour = () => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const removeBusinessHour = useEndpoint('POST', '/v1/livechat/business-hours.remove');
+	const queryClient = useQueryClient();
+
+	const handleRemove = useStableCallback((_id: string, type: string) => {
+		const onDeleteBusinessHour = async () => {
+			try {
+				await removeBusinessHour({ _id, type });
+				dispatchToastMessage({ type: 'success', message: t('Business_Hour_Removed') });
+				queryClient.invalidateQueries({
+					queryKey: ['livechat-getBusinessHours'],
+				});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal();
+			}
+		};
+
+		setModal(<GenericModal variant='danger' onConfirm={onDeleteBusinessHour} onCancel={() => setModal()} confirmText={t('Delete')} />);
+	});
+
+	return handleRemove;
+};