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

apps/meteor/app/utils/lib/i18n.ts

@@ -1,9 +1,18 @@
 import type { RocketchatI18nKeys } from '@rocket.chat/i18n';
+import type { TOptions } from 'i18next';
 import i18next from 'i18next';
 import sprintf from 'i18next-sprintf-postprocessor';
 
 import { isObject } from '../../../lib/utils/isObject';
 
+declare module 'i18next' {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface TFunction {
+		(key: RocketchatI18nKeys): string;
+		(key: RocketchatI18nKeys, options: TOptions): string;
+	}
+}
+
 export const i18n = i18next.use(sprintf);
 
 export const addSprinfToI18n = function (t: (typeof i18n)['t']) {

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

@@ -1,15 +1,16 @@
 import { Sidebar } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ComponentProps } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useOmnichannelAgentAvailable } from '../../hooks/omnichannel/useOmnichannelAgentAvailable';
 
 type NavBarItemOmnichannelLivechatToggleProps = Omit<ComponentProps<typeof Sidebar.TopBar.Action>, 'icon'>;
 
 const NavBarItemOmnichannelLivechatToggle = (props: NavBarItemOmnichannelLivechatToggleProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const agentAvailable = useOmnichannelAgentAvailable();
 	const changeAgentStatus = useEndpoint('POST', '/v1/livechat/agent.status');
 	const dispatchToastMessage = useToastMessageDispatch();

apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx

@@ -1,15 +1,16 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
-import { useCurrentRoutePath, useTranslation } from '@rocket.chat/ui-contexts';
+import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useAuditMenu } from './hooks/useAuditMenu';
 
 type NavBarItemAuditMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const NavBarItemAuditMenu = (props: NavBarItemAuditMenuProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const sections = useAuditMenu();
 	const currentRoute = useCurrentRoutePath();
 

apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx

@@ -1,15 +1,16 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
-import { useCurrentRoutePath, useTranslation } from '@rocket.chat/ui-contexts';
+import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useMarketPlaceMenu } from './hooks/useMarketPlaceMenu';
 
 type NavBarItemMarketPlaceMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const NavBarItemMarketPlaceMenu = (props: NavBarItemMarketPlaceMenuProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const sections = useMarketPlaceMenu();
 
 	const currentRoute = useCurrentRoutePath();

apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useAuditMenu.tsx

@@ -1,11 +1,12 @@
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { usePermission, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
+import { usePermission, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
 
 import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
 
 export const useAuditMenu = () => {
 	const router = useRouter();
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const hasAuditLicense = useHasLicenseModule('auditing') === true;
 

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

@@ -1,15 +1,16 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
-import { useCurrentRoutePath, useTranslation } from '@rocket.chat/ui-contexts';
+import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useAdministrationMenu } from './hooks/useAdministrationMenu';
 
 type NavBarItemAdministrationMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const NavBarItemAdministrationMenu = (props: NavBarItemAdministrationMenuProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const currentRoute = useCurrentRoutePath();
 
 	const sections = useAdministrationMenu();

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

@@ -1,13 +1,14 @@
 import { Button } from '@rocket.chat/fuselage';
-import { useSessionDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSessionDispatch } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NavBarItemLoginPageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const NavBarItemLoginPage = (props: NavBarItemLoginPageProps) => {
 	const setForceLogin = useSessionDispatch('forceLogin');
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	return (
 		<Button primary small icon='login' onClick={(): void => setForceLogin(true)} {...props}>

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

@@ -1,8 +1,9 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Box, Margins } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
-import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetting } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import MarkdownText from '../../../components/MarkdownText';
 import { UserStatus } from '../../../components/UserStatus';
@@ -11,7 +12,7 @@ import { useUserDisplayName } from '../../../hooks/useUserDisplayName';
 type UserMenuHeaderProps = { user: IUser };
 
 const UserMenuHeader = ({ user }: UserMenuHeaderProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const presenceDisabled = useSetting<boolean>('Presence_broadcast_disabled');
 	const displayName = useUserDisplayName(user);
 

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

@@ -2,11 +2,12 @@ import { Badge } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { defaultFeaturesPreview, usePreferenceFeaturePreviewList } from '@rocket.chat/ui-client';
-import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRouter } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const useAccountItems = (): GenericMenuItemProps[] => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const router = useRouter();
 
 	const { unseenFeatures, featurePreviewEnabled } = usePreferenceFeaturePreviewList();

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

@@ -1,16 +1,17 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { useLogout, useTranslation } from '@rocket.chat/ui-contexts';
+import { useLogout } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import UserMenuHeader from '../UserMenuHeader';
 import { useAccountItems } from './useAccountItems';
 import { useStatusItems } from './useStatusItems';
 import { useVoipItemsSection } from './useVoipItemsSection';
 
 export const useUserMenu = (user: IUser) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const statusItems = useStatusItems();
 	const accountItems = useAccountItems();

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/hooks/useAdministrationMenu.tsx

@@ -1,5 +1,6 @@
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { useAtLeastOnePermission, usePermission, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
+import { useAtLeastOnePermission, usePermission, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
 
 const ADMIN_PERMISSIONS = [
 	'view-statistics',
@@ -31,7 +32,7 @@ const ADMIN_PERMISSIONS = [
 
 export const useAdministrationMenu = () => {
 	const router = useRouter();
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const isAdmin = useAtLeastOnePermission(ADMIN_PERMISSIONS);
 	const isOmnichannel = usePermission('view-livechat-manager');

apps/meteor/client/apps/gameCenter/GameCenterList.tsx

@@ -1,7 +1,8 @@
 import { Avatar, Icon, Table, TableBody, TableCell, TableHead, TableRow } from '@rocket.chat/fuselage';
-import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetModal } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ContextualbarHeader, ContextualbarTitle, ContextualbarClose, ContextualbarContent } from '../../components/Contextualbar';
 import { FormSkeleton } from '../../components/Skeleton';
@@ -16,7 +17,7 @@ interface IGameCenterListProps {
 }
 
 const GameCenterList = ({ handleClose, handleOpenGame, games, isLoading }: IGameCenterListProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const setModal = useSetModal();
 	const handleInvitePlayer = useCallback(
 		(game) => {

apps/meteor/client/components/NotFoundState.tsx

@@ -1,15 +1,16 @@
 import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
-import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NotFoundProps = {
 	title: string;
 	subtitle: string;
 };
 
 const NotFoundState = ({ title, subtitle }: NotFoundProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const router = useRouter();
 
 	const handleGoHomeClick = () => {

apps/meteor/client/components/Omnichannel/OmnichannelSortingDisclaimer.tsx

@@ -1,6 +1,7 @@
 import { OmnichannelSortingMechanismSettingType as OmniSortingType } from '@rocket.chat/core-typings';
-import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetting } from '@rocket.chat/ui-contexts';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useOmnichannelEnterpriseEnabled } from '../../hooks/omnichannel/useOmnichannelEnterpriseEnabled';
 
@@ -19,7 +20,7 @@ export const useOmnichannelSortingDisclaimer = () => {
 };
 
 export const OmnichannelSortingDisclaimer = () => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const type = useOmnichannelSortingDisclaimer();
 

apps/meteor/client/components/Omnichannel/Tags.tsx

@@ -1,8 +1,9 @@
 import { TextInput, Chip, Button, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { CurrentChatTags } from '../../views/omnichannel/additionalForms';
 import { FormSkeleton } from './Skeleton';
@@ -17,7 +18,7 @@ type TagsProps = {
 };
 
 const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	const { data: tagsResult, isInitialLoading } = useLivechatTags({
 		department,

apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts

@@ -1,5 +1,6 @@
-import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
 import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
@@ -24,7 +25,7 @@ export const useAgentsList = (
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [itemsList, setItemsList] = useState(() => new RecordList<AgentOption>());
 	const reload = useCallback(() => setItemsList(new RecordList<AgentOption>()), []);
 

apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts

@@ -1,5 +1,6 @@
-import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
 import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
@@ -27,7 +28,7 @@ export const useDepartmentsList = (
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [itemsList, setItemsList] = useState(() => new RecordList<DepartmentListItem>());
 	const reload = useCallback(() => setItemsList(new RecordList<DepartmentListItem>()), []);
 

apps/meteor/client/components/Omnichannel/modals/EnterpriseDepartmentsModal.tsx

@@ -1,14 +1,15 @@
 import { Button, Modal, Box } from '@rocket.chat/fuselage';
 import { useOutsideClick } from '@rocket.chat/fuselage-hooks';
-import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useExternalLink } from '../../../hooks/useExternalLink';
 import { useCheckoutUrl } from '../../../views/admin/subscription/hooks/useCheckoutUrl';
 
 const EnterpriseDepartmentsModal = ({ closeModal }: { closeModal: () => void }): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const router = useRouter();
 	const ref = useRef<HTMLDivElement>(null);
 

apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx

@@ -13,10 +13,11 @@ import {
 	Option,
 } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useEndpoint, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../../../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
@@ -33,7 +34,7 @@ const ForwardChatModal = ({
 	onCancel: () => void;
 	room: IOmnichannelRoom;
 }): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const getUserData = useEndpoint('GET', '/v1/users.info');
 	const idleAgentsAllowedForForwarding = useSetting('Livechat_enabled_when_agent_idle') as boolean;
 

apps/meteor/client/components/Page/PageHeader.tsx

@@ -1,8 +1,9 @@
 import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useDocumentTitle } from '@rocket.chat/ui-client';
-import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
+import { useLayout } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { HeaderToolbar } from '../Header';
 import SidebarToggler from '../SidebarToggler';
@@ -15,7 +16,7 @@ type PageHeaderProps = {
 } & Omit<ComponentPropsWithoutRef<typeof Box>, 'title'>;
 
 const PageHeader = ({ children = undefined, title, onClickBack, borderBlockEndColor, ...props }: PageHeaderProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [border] = useContext(PageContext);
 	const { isMobile } = useLayout();
 

apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx

@@ -1,8 +1,9 @@
 import { Box, FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError, Button } from '@rocket.chat/fuselage';
 import { useAutoFocus, useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent, SyntheticEvent } from 'react';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../GenericModal';
 import type { OnConfirm } from './TwoFactorModal';
@@ -17,7 +18,7 @@ type TwoFactorEmailModalProps = {
 
 const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername, invalidAttempt }: TwoFactorEmailModalProps): ReactElement => {
 	const dispatchToastMessage = useToastMessageDispatch();
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const [code, setCode] = useState<string>('');
 	const ref = useAutoFocus<HTMLInputElement>();