fix: language change on bcert page #1050

apps/web/src/components/b-certificate-presentation.tsx

@@ -1,11 +1,11 @@
 import { Link } from '@tanstack/react-router';
-import { t } from 'i18next';
 import { FaArrowRightLong } from 'react-icons/fa6';
 
 import { Button, cn } from '@blms/ui';
 
 import { useGreater } from '#src/hooks/use-greater.js';
 
+import { useTranslation } from 'react-i18next';
 import BCertificateImage from '../assets/about/b-certificate-presentation.webp';
 
 interface BCertificatePresentationProps {
@@ -15,6 +15,8 @@ interface BCertificatePresentationProps {
 export const BCertificatePresentation = ({
   marginClasses = 'mt-20',
 }: BCertificatePresentationProps) => {
+  const { t } = useTranslation();
+
   const isScreenMd = useGreater('md');
 
   return (

apps/web/src/components/main-layout.tsx

@@ -1,10 +1,10 @@
-import { t } from 'i18next';
 import { type JSX, useEffect, useRef } from 'react';
 
 import { cn, customToast } from '@blms/ui';
 
 import SignInIconLight from '#src/assets/icons/profile_log_in_light.svg';
 
+import { useTranslation } from 'react-i18next';
 import { Header } from './Header/header.tsx';
 import { Footer } from './footer.tsx';
 import ScrollToTopButton from './scroll-to-top-button.tsx';
@@ -24,6 +24,7 @@ export const MainLayout = ({
   footerVariant,
   headerVariant,
 }: MainLayoutProps) => {
+  const { t } = useTranslation();
   const box = useRef<HTMLDivElement | null>(null);
 
   const bgColorClasses = {

apps/web/src/components/payment-description.tsx

@@ -1,6 +1,5 @@
-import { t } from 'i18next';
 import { type JSX, useEffect, useState } from 'react';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import type { CouponCode, JoinedEvent } from '@blms/types';
 import { Button } from '@blms/ui';
@@ -60,6 +59,7 @@ export const PaymentDescription = ({
   checkoutError,
   children,
 }: PaymentDescriptionProps) => {
+  const { t } = useTranslation();
   const splitDescription = description.split('\n');
   const [inputCoupon, setInputCoupon] = useState('');
   const [queryEnabled, setQueryEnabled] = useState(false);

apps/web/src/routes/_content/_misc/b-certificate.tsx

@@ -1,5 +1,4 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { t } from 'i18next';
 import { useEffect } from 'react';
 import { FaArrowRightLong } from 'react-icons/fa6';
 
@@ -10,6 +9,7 @@ import { PageLayout } from '#src/components/page-layout.js';
 import { useGreater } from '#src/hooks/use-greater.js';
 import { trpc } from '#src/utils/trpc.js';
 
+import { useTranslation } from 'react-i18next';
 import { BCertificateEvents } from './-components/b-certificate-events.tsx';
 
 export const Route = createFileRoute('/_content/_misc/b-certificate')({
@@ -18,6 +18,7 @@ export const Route = createFileRoute('/_content/_misc/b-certificate')({
 
 const BCertificateOrganize = () => {
   const isScreenMd = useGreater('md');
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col items-center max-md:border border-darkOrange-5 rounded-2xl max-md:p-4">
@@ -72,6 +73,7 @@ const BCertificateOrganize = () => {
 
 function BCertificate() {
   const { data: events, isFetched } = trpc.content.getRecentEvents.useQuery();
+  const { t } = useTranslation();
 
   const filteredEvents = events
     ? events.filter(