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

apps/meteor/client/views/omnichannel/slaPolicies/SlaEdit.tsx

@@ -0,0 +1,154 @@
+import type { IOmnichannelServiceLevelAgreements, Serialized } from '@rocket.chat/core-typings';
+import { Field, FieldLabel, FieldRow, FieldError, TextInput, Button, NumberInput, ButtonGroup } from '@rocket.chat/fuselage';
+import { ContextualbarFooter, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { useController, useForm } from 'react-hook-form';
+
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
+
+export type SlaEditProps = {
+	isNew?: boolean;
+	slaId?: string;
+	reload: () => void;
+	data?: Serialized<IOmnichannelServiceLevelAgreements>;
+};
+
+type SlaEditFormData = {
+	name: string;
+	description?: string;
+	dueTimeInMinutes: number;
+};
+
+function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps) {
+	const slasRoute = useRoute('omnichannel-sla-policies');
+	const saveSLA = useEndpoint('POST', '/v1/livechat/sla');
+	const updateSLA = useEndpoint('PUT', `/v1/livechat/sla/:slaId`, { slaId: slaId || '' });
+	const dispatchToastMessage = useToastMessageDispatch();
+	const t = useTranslation();
+
+	const {
+		control,
+		formState: { errors, isDirty },
+		handleSubmit,
+		reset,
+	} = useForm<SlaEditFormData>({
+		defaultValues: {
+			name: data?.name || '',
+			description: data?.description || '',
+			dueTimeInMinutes: data?.dueTimeInMinutes || 0,
+		},
+	});
+
+	const { field: nameField } = useController({
+		control,
+		name: 'name',
+		rules: { required: t('Required_field', { field: t('Name') }) },
+	});
+
+	const { field: dueTimeField } = useController({
+		control,
+		name: 'dueTimeInMinutes',
+		rules: {
+			validate(value) {
+				return Number(value || 0) <= 0 ? t('Required_field', { field: t('Estimated_wait_time_in_minutes') }) : true;
+			},
+		},
+	});
+
+	const { field: descField } = useController({ control, name: 'description' });
+
+	const formId = useId();
+	const nameFieldId = useId();
+	const descFieldId = useId();
+	const dueTimeFieldId = useId();
+
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async ({ name, description, dueTimeInMinutes }: SlaEditFormData) => {
+			try {
+				const payload = { name, description, dueTimeInMinutes: Number(dueTimeInMinutes) };
+				if (slaId) {
+					await updateSLA(payload);
+				} else {
+					await saveSLA(payload);
+				}
+
+				dispatchToastMessage({ type: 'success', message: t('Saved') });
+				reload();
+				slasRoute.push({});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		{ isDirty },
+	);
+
+	return (
+		<>
+			<ContextualbarScrollableContent is='form' onSubmit={handleSubmit(handleSave)} id={formId} {...props}>
+				<Field>
+					<FieldLabel required htmlFor={nameFieldId}>
+						{t('Name')}
+					</FieldLabel>
+					<FieldRow>
+						<TextInput
+							id={nameFieldId}
+							placeholder={t('Name')}
+							flexGrow={1}
+							{...nameField}
+							aria-describedby={`${nameFieldId}-error`}
+							aria-invalid={Boolean(errors.name?.message)}
+							error={errors.name?.message}
+						/>
+					</FieldRow>
+					{errors.name && (
+						<FieldError role='alert' id={`${nameFieldId}-error`}>
+							{errors.name.message}
+						</FieldError>
+					)}
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={descFieldId}>{t('Description')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={descFieldId} placeholder={t('Description')} flexGrow={1} {...descField} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel required htmlFor={dueTimeFieldId}>
+						{t('Estimated_wait_time_in_minutes')}
+					</FieldLabel>
+					<FieldRow>
+						<NumberInput
+							id={dueTimeFieldId}
+							placeholder={t('Estimated_wait_time_in_minutes')}
+							flexGrow={1}
+							{...dueTimeField}
+							aria-describedby={`${dueTimeFieldId}-error`}
+							aria-invalid={Boolean(errors.dueTimeInMinutes?.message)}
+							error={errors.dueTimeInMinutes?.message}
+						/>
+					</FieldRow>
+					{errors.dueTimeInMinutes && (
+						<FieldError role='alert' id={`${dueTimeFieldId}-error`}>
+							{errors.dueTimeInMinutes.message}
+						</FieldError>
+					)}
+				</Field>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					{!isNew && (
+						<Button flexGrow={1} type='reset' disabled={!isDirty} onClick={(): void => reset()}>
+							{t('Reset')}
+						</Button>
+					)}
+					<Button primary marginInlineEnd='none' type='submit' flexGrow={1} form={formId}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+}
+
+export default SlaEdit;