refactor(i18n): Use i18next‘s t-function

apps/meteor/app/lib/server/methods/addUsersToRoom.ts

@@ -98,14 +98,11 @@ export const addUsersToRoomMethod = async (userId: string, data: { rid: string;
 					return;
 				}
 				void api.broadcast('notify.ephemeralMessage', userId, data.rid, {
-					msg: i18n.t(
-						'Username_is_already_in_here',
-						{
-							postProcess: 'sprintf',
-							sprintf: [newUser.username],
-						},
-						user?.language,
-					),
+					msg: i18n.t('Username_is_already_in_here', {
+						postProcess: 'sprintf',
+						sprintf: [newUser.username],
+						lng: user?.language,
+					}),
 				});
 			}
 		}),

apps/meteor/app/lib/server/methods/sendMessage.ts

@@ -1,7 +1,9 @@
 import { api } from '@rocket.chat/core-services';
 import type { AtLeast, IMessage, IUser } from '@rocket.chat/core-typings';
 import type { ServerMethods } from '@rocket.chat/ddp-client';
+import type { RocketchatI18nKeys } from '@rocket.chat/i18n';
 import { Messages, Users } from '@rocket.chat/models';
+import type { TOptions } from 'i18next';
 import { check } from 'meteor/check';
 import { Meteor } from 'meteor/meteor';
 import moment from 'moment';
@@ -97,10 +99,10 @@ export async function executeSendMessage(uid: IUser['_id'], message: AtLeast<IMe
 	} catch (err: any) {
 		SystemLogger.error({ msg: 'Error sending message:', err });
 
-		const errorMessage = typeof err === 'string' ? err : err.error || err.message;
-		const errorContext = err.details ?? {};
+		const errorMessage: RocketchatI18nKeys = typeof err === 'string' ? err : err.error || err.message;
+		const errorContext: TOptions = err.details ?? {};
 		void api.broadcast('notify.ephemeralMessage', uid, message.rid, {
-			msg: i18n.t(errorMessage, errorContext, user.language),
+			msg: i18n.t(errorMessage, { ...errorContext, lng: user.language }),
 		});
 
 		if (typeof err === 'string') {

apps/meteor/app/lib/server/startup/mentionUserNotInChannel.ts

@@ -24,7 +24,7 @@ const getBlocks = (mentions: IMessage['mentions'], messageId: string, lng: strin
 			actionId: 'add-users',
 			text: {
 				type: 'plain_text',
-				text: i18n.t('Add_them', undefined, lng),
+				text: i18n.t('Add_them', { lng }),
 			},
 		},
 		dismissBlock: {
@@ -35,7 +35,7 @@ const getBlocks = (mentions: IMessage['mentions'], messageId: string, lng: strin
 			actionId: 'dismiss',
 			text: {
 				type: 'plain_text',
-				text: i18n.t('Do_nothing', undefined, lng),
+				text: i18n.t('Do_nothing', { lng }),
 			},
 		},
 		dmBlock: {
@@ -46,7 +46,7 @@ const getBlocks = (mentions: IMessage['mentions'], messageId: string, lng: strin
 			actionId: 'share-message',
 			text: {
 				type: 'plain_text',
-				text: i18n.t('Let_them_know', undefined, lng),
+				text: i18n.t('Let_them_know', { lng }),
 			},
 		},
 	} as const;
@@ -121,7 +121,7 @@ callbacks.add(
 					type: 'section',
 					text: {
 						type: 'mrkdwn',
-						text: i18n.t(messageLabel, { mentions: mentionsText }, language),
+						text: i18n.t(messageLabel, { mentions: mentionsText, lng: language }),
 					},
 				} as const,
 				Boolean(elements.length) &&

apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx

@@ -1,6 +1,6 @@
 import { Button, Modal } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type PlaceChatOnHoldModalProps = {
 	onOnHoldChat: () => void;
@@ -9,7 +9,7 @@ type PlaceChatOnHoldModalProps = {
 };
 
 const PlaceChatOnHoldModal = ({ onCancel, onOnHoldChat, confirm = onOnHoldChat, ...props }: PlaceChatOnHoldModalProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	return (
 		<Modal {...props} data-qa-id='on-hold-modal'>

apps/meteor/app/livechat/server/lib/Helper.ts

@@ -440,8 +440,8 @@ export const dispatchInquiryQueued = async (inquiry: ILivechatInquiryRecord, age
 			hasMentionToHere: false,
 			message: { _id: '', u: v, msg: '' },
 			// we should use server's language for this type of messages instead of user's
-			notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName }, language),
-			room: Object.assign(room, { name: i18n.t('New_chat_in_queue', {}, language) }),
+			notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName, lng: language }),
+			room: Object.assign(room, { name: i18n.t('New_chat_in_queue', { lng: language }) }),
 			mentionIds: [],
 		});
 	}

apps/meteor/app/livechat/server/lib/QueueManager.ts

@@ -371,8 +371,8 @@ export class QueueManager {
 				hasMentionToHere: false,
 				message: { _id: '', u: v, msg: '' },
 				// we should use server's language for this type of messages instead of user's
-				notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName }, language),
-				room: { ...room, name: i18n.t('New_chat_in_queue', {}, language) },
+				notificationMessage: i18n.t('User_started_a_new_conversation', { username: notificationUserName, lng: language }),
+				room: { ...room, name: i18n.t('New_chat_in_queue', { lng: language }) },
 				mentionIds: [],
 			});
 		}

apps/meteor/app/ui-message/client/messageBox/AddLinkComposerActionModal.tsx

@@ -1,8 +1,8 @@
 import { Field, FieldGroup, TextInput, FieldLabel, FieldRow, Box } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../../../client/components/GenericModal';
 
@@ -13,7 +13,7 @@ type AddLinkComposerActionModalProps = {
 };
 
 const AddLinkComposerActionModal = ({ selectedText, onClose, onConfirm }: AddLinkComposerActionModalProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const textField = useUniqueId();
 	const urlField = useUniqueId();
 

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx

@@ -1,15 +1,15 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useVoipOutboundStates } from '../../contexts/CallContext';
 import { useDialModal } from '../../hooks/useDialModal';
 
 type NavBarItemOmniChannelCallDialPadProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmniChannelCallDialPad = (props: NavBarItemOmniChannelCallDialPadProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const { openDialModal } = useDialModal();
 

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx

@@ -1,12 +1,12 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NavBarItemOmnichannelCallToggleErrorProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmnichannelCallToggleError = (props: NavBarItemOmnichannelCallToggleErrorProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <NavBarItem icon='phone' danger data-tooltip={t('Error')} disabled {...props} />;
 };
 

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx

@@ -1,12 +1,12 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NavBarItemOmnichannelCallToggleLoadingProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmnichannelCallToggleLoading = (props: NavBarItemOmnichannelCallToggleLoadingProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <NavBarItem icon='phone' data-tooltip={t('Loading')} aria-label={t('VoIP_Toggle')} disabled {...props} />;
 };
 

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx

@@ -1,14 +1,14 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useCallerInfo, useCallRegisterClient, useCallUnregisterClient, useVoipNetworkStatus } from '../../contexts/CallContext';
 
 type NavBarItemOmnichannelCallToggleReadyProps = ComponentPropsWithoutRef<typeof NavBarItem>;
 
 const NavBarItemOmnichannelCallToggleReady = (props: NavBarItemOmnichannelCallToggleReadyProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const caller = useCallerInfo();
 	const unregister = useCallUnregisterClient();

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx

@@ -1,17 +1,17 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { GenericMenu, useHandleMenuAction } from '@rocket.chat/ui-client';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import UserMenuButton from './UserMenuButton';
 import { useUserMenu } from './hooks/useUserMenu';
 
 type UserMenuProps = { user: IUser } & Omit<ComponentProps<typeof GenericMenu>, 'sections' | 'items' | 'title'>;
 
 const UserMenu = function UserMenu({ user, ...props }: UserMenuProps) {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [isOpen, setIsOpen] = useState(false);
 
 	const sections = useUserMenu(user);

apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx

@@ -1,7 +1,7 @@
 import { Avatar } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import {
 	ContextualbarTitle,
@@ -19,7 +19,7 @@ interface IGameCenterContainerProps {
 }
 
 const GameCenterContainer = ({ handleClose, handleBack, game }: IGameCenterContainerProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	return (
 		<>

apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx

@@ -1,8 +1,8 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../components/GenericModal';
 import UserAutoCompleteMultipleFederated from '../../components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated';
@@ -19,7 +19,7 @@ interface IGameCenterInvitePlayersModalProps {
 }
 
 const GameCenterInvitePlayersModal = ({ game, onClose }: IGameCenterInvitePlayersModalProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [users, setUsers] = useState<Array<Username>>([]);
 	const { name } = game;
 

apps/meteor/client/components/ActionManagerBusyState.tsx

@@ -1,12 +1,12 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager';
 
 const ActionManagerBusyState = () => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const actionManager = useUiKitActionManager();
 	const [busy, setBusy] = useState(false);
 

apps/meteor/client/components/AutoCompleteDepartment.tsx

@@ -1,8 +1,8 @@
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../hooks/useAsyncState';
@@ -28,7 +28,7 @@ const AutoCompleteDepartment = ({
 	showArchived = false,
 	...props
 }: AutoCompleteDepartmentProps): ReactElement | null => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState<string>('');
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);

apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx

@@ -1,9 +1,9 @@
 import { CheckOption, PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../hooks/useAsyncState';
@@ -24,7 +24,7 @@ const AutoCompleteDepartmentMultiple = ({
 	enabled = false,
 	onChange = () => undefined,
 }: AutoCompleteDepartmentMultipleProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState('');
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);

apps/meteor/client/components/ConfirmOwnerChangeModal.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from './GenericModal';
 import RawText from './RawText';
@@ -20,7 +20,7 @@ const ConfirmOwnerChangeModal = ({
 	onConfirm,
 	onCancel,
 }: ConfirmOwnerChangeModalProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	let changeOwnerRooms = '';
 	if (shouldChangeOwner.length > 0) {

apps/meteor/client/components/Contextualbar/ContextualbarBack.tsx

@@ -1,13 +1,13 @@
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ContextualbarAction from './ContextualbarAction';
 
 type ContextualbarBackProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
 const ContextualbarBack = (props: ContextualbarBackProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <ContextualbarAction {...props} title={t('Back')} name='arrow-back' />;
 };
 

apps/meteor/client/components/Contextualbar/ContextualbarClose.tsx

@@ -1,13 +1,13 @@
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ContextualbarAction from './ContextualbarAction';
 
 type ContextualbarCloseProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
 const ContextualbarClose = (props: ContextualbarCloseProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	return <ContextualbarAction data-qa='ContextualbarActionClose' {...props} aria-label={t('Close')} name='cross' />;
 };
 

apps/meteor/client/components/FilterByText.tsx

@@ -1,8 +1,8 @@
 import { Box, Icon, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, FormEvent, HTMLAttributes } from 'react';
 import React, { forwardRef, memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type FilterByTextProps = {
 	onChange: (filter: string) => void;
@@ -13,7 +13,7 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 	{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
 	ref,
 ) {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [text, setText] = useState('');
 	const autoFocusRef = useAutoFocus(shouldAutoFocus);
 	const mergedRefs = useMergedRefs(ref, autoFocusRef);