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

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx

@@ -0,0 +1,193 @@
+import { UserStatus as UserStatusType } from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { InputBox, Margins, Box } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, TextInput, Select } from '@rocket.chat/fuselage-forms';
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useSetting, useEndpoint, useUser, useTranslation } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent, ComponentProps } from 'react';
+import { useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import UserStatusMenu from '../../../components/UserStatusMenu';
+import { USER_STATUS_TEXT_MAX_LENGTH } from '../../../lib/constants';
+import { getUserStatusInitialValues } from '../../../lib/getUserInitialStatus';
+import { STATUS_DURATION_OPTIONS, validateStatusExpiration } from '../../../lib/statusDurations';
+
+export type EditStatusModalProps = {
+	onClose: () => void;
+};
+
+type StatusFormValues = {
+	statusText: string;
+	statusType: UserStatusType;
+	statusDuration: string;
+	statusCustomDate: string;
+	statusCustomTime: string;
+};
+
+const EditStatusModal = ({ onClose }: EditStatusModalProps) => {
+	const t = useTranslation();
+	const user = useUser();
+	const allowUserStatusMessageChange = useSetting('Accounts_AllowUserStatusMessageChange');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const [customStatus, setCustomStatus] = useLocalStorage<string>('Local_Custom_Status', '');
+
+	const {
+		control,
+		handleSubmit,
+		setValue,
+		watch,
+		formState: { errors, isDirty },
+	} = useForm<StatusFormValues>({
+		defaultValues: getUserStatusInitialValues(user, customStatus),
+	});
+
+	const { statusDuration, statusType, statusText } = watch();
+	const isExpirationDisabled = statusType === UserStatusType.ONLINE && !statusText.trim();
+
+	useEffect(() => {
+		if (isExpirationDisabled) {
+			setValue('statusDuration', '', { shouldValidate: true });
+		}
+	}, [isExpirationDisabled, setValue]);
+
+	const isStatusFromCall = user?.statusSource === 'internal' || user?.statusSource === 'external';
+
+	const setUserStatus = useEndpoint('POST', '/v1/users.setStatus');
+
+	const durationOptions: SelectOption[] = useMemo(() => STATUS_DURATION_OPTIONS.map(({ value, labelKey }) => [value, t(labelKey)]), [t]);
+
+	const handleSaveStatus = async ({
+		statusText,
+		statusType,
+		statusDuration,
+		statusCustomDate,
+		statusCustomTime,
+	}: StatusFormValues): Promise<void> => {
+		const expiresAt = STATUS_DURATION_OPTIONS.find((o) => o.value === statusDuration)?.getExpiresAt?.({
+			now: new Date(),
+			customDate: statusCustomDate,
+			customTime: statusCustomTime,
+		});
+		try {
+			await setUserStatus({
+				message: statusText,
+				status: statusType,
+				...(expiresAt && { expiresAt: expiresAt.toISOString() }),
+			});
+			setCustomStatus(statusText);
+			dispatchToastMessage({ type: 'success', message: t('StatusMessage_Changed_Successfully') });
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	return (
+		<GenericModal
+			icon={null}
+			variant='warning'
+			title={t('Status_set_your_status')}
+			onCancel={onClose}
+			confirmText={t('Save')}
+			confirmDisabled={!isDirty}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => <Box is='form' onSubmit={handleSubmit(handleSaveStatus)} {...props} />}
+		>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Status')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							control={control}
+							name='statusText'
+							rules={{
+								maxLength: {
+									value: USER_STATUS_TEXT_MAX_LENGTH,
+									message: t('Max_length_is', { limit: USER_STATUS_TEXT_MAX_LENGTH }),
+								},
+							}}
+							render={({ field }) => (
+								<TextInput
+									{...field}
+									error={errors.statusText?.message}
+									disabled={!allowUserStatusMessageChange}
+									flexGrow={1}
+									placeholder={t(statusType)}
+									startAddon={
+										<Controller
+											control={control}
+											name='statusType'
+											render={({ field: { value, onChange } }) => <UserStatusMenu initialStatus={value} onChange={onChange} />}
+										/>
+									}
+								/>
+							)}
+						/>
+					</FieldRow>
+					<FieldHint>{t(allowUserStatusMessageChange ? 'Status_you_can_use_emoji' : 'StatusMessage_Change_Disabled')}</FieldHint>
+					{errors.statusText && <FieldError>{errors.statusText.message}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel>{t('Status_clear_after')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							control={control}
+							name='statusDuration'
+							rules={{
+								deps: ['statusCustomDate', 'statusCustomTime'],
+								validate: (value, { statusCustomDate, statusCustomTime }) =>
+									validateStatusExpiration(value, { statusCustomDate, statusCustomTime }, t),
+							}}
+							render={({ field: { value, onChange } }) => (
+								<Select
+									value={value}
+									options={durationOptions}
+									onChange={(next) => onChange(String(next))}
+									disabled={isExpirationDisabled}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{statusDuration === 'custom' && (
+						<Box display='flex' marginInline='neg-x4' marginBlockStart={8}>
+							<Margins inline={4}>
+								<Controller
+									control={control}
+									name='statusCustomDate'
+									render={({ field: { value, onChange } }) => (
+										<InputBox
+											aria-label={t('Status_expiration_date')}
+											type='date'
+											flexGrow={1}
+											value={value}
+											onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.currentTarget.value)}
+											min={new Date().toLocaleDateString('en-CA')}
+										/>
+									)}
+								/>
+								<Controller
+									control={control}
+									name='statusCustomTime'
+									render={({ field: { value, onChange } }) => (
+										<InputBox
+											aria-label={t('Status_expiration_time')}
+											type='time'
+											flexGrow={1}
+											value={value}
+											onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.currentTarget.value)}
+										/>
+									)}
+								/>
+							</Margins>
+						</Box>
+					)}
+					{errors.statusDuration && <FieldError>{errors.statusDuration.message}</FieldError>}
+					<FieldHint>{t(isStatusFromCall ? 'Status_new_status_warning_after_call' : 'Status_new_status_warning')}</FieldHint>
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default EditStatusModal;