Merge pull request #106 from nada-deriv/nada/tab-switch-issue

nada/fix: handle tab switching when changing language

src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertiserAdvertsTable.tsx

@@ -5,6 +5,7 @@ import { ErrorModal, LoadingModal } from '@/components/Modals';
 import { ADVERT_TYPE, BUY_SELL, BUY_SELL_URL } from '@/constants';
 import { api } from '@/hooks';
 import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager, useQueryString } from '@/hooks/custom-hooks';
+import { getLocalizedTabs } from '@/utils/tabs';
 import { useTranslations } from '@deriv-com/translations';
 import { Tab, Tabs } from '@deriv-com/ui';
 import { AdvertsTableRenderer } from './AdvertsTableRenderer';
@@ -76,7 +77,12 @@ const AdvertiserAdvertsTable = ({ advertiserId }: TAdvertiserAdvertsTableProps)
 
     return (
         <div className='advertiser-adverts-table'>
-            <Tabs activeTab={activeTab} className='lg:w-80 lg:mt-10' onChange={setActiveTab} variant='secondary'>
+            <Tabs
+                activeTab={getLocalizedTabs(localize)[activeTab]}
+                className='lg:w-80 lg:mt-10'
+                onChange={setActiveTab}
+                variant='secondary'
+            >
                 <Tab className='text-xs' title={localize('Buy')} />
                 <Tab title={localize('Sell')} />
             </Tabs>

src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx

@@ -4,6 +4,7 @@ import { FilterModal } from '@/components/Modals';
 import { getSortByList } from '@/constants';
 import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
+import { getLocalizedTabs } from '@/utils/tabs';
 import { LabelPairedBarsFilterMdBoldIcon, LabelPairedBarsFilterSmBoldIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import { Button, Tab, Tabs, useDevice } from '@deriv-com/ui';
@@ -53,7 +54,7 @@ const BuySellHeader = ({
         >
             <Tabs
                 TitleFontSize={isMobile ? 'md' : 'sm'}
-                activeTab={activeTab}
+                activeTab={getLocalizedTabs(localize)[activeTab]}
                 onChange={setActiveTab}
                 variant='primary'
                 wrapperClassName='buy-sell-header__tabs'

src/pages/my-profile/screens/MyProfile/MyProfile.tsx

@@ -8,6 +8,7 @@ import {
     usePoiPoaStatus,
     useQueryString,
 } from '@/hooks/custom-hooks';
+import { getLocalizedTabs } from '@/utils/tabs';
 import { useTranslations } from '@deriv-com/translations';
 import { Loader, Tab, Tabs, useDevice } from '@deriv-com/ui';
 import { MyProfileAdDetails } from '../MyProfileAdDetails';
@@ -64,7 +65,7 @@ const MyProfile = () => {
         <div className='my-profile'>
             <ProfileContent />
             <Tabs
-                activeTab={(currentTab !== 'default' && currentTab) || 'Stats'}
+                activeTab={getLocalizedTabs(localize)[(currentTab !== 'default' && currentTab) || 'Stats']}
                 className='my-profile__tabs'
                 onChange={index => {
                     setQueryString({

src/pages/orders/screens/Orders/OrdersTableHeader/OrdersTableHeader.tsx

@@ -1,5 +1,6 @@
 import { ORDERS_STATUS } from '@/constants/orders';
 import { useQueryString } from '@/hooks/custom-hooks';
+import { getLocalizedTabs } from '@/utils/tabs';
 import { useTranslations } from '@deriv-com/translations';
 import { Tab, Tabs, useDevice } from '@deriv-com/ui';
 import './OrdersTableHeader.scss';
@@ -17,7 +18,7 @@ const OrdersTableHeader = ({ activeTab }: TOrdersTableHeaderProps) => {
         <div className='orders-table-header' data-testid='dt_orders_table_header'>
             <Tabs
                 TitleFontSize={isMobile ? 'md' : 'sm'}
-                activeTab={activeTab}
+                activeTab={getLocalizedTabs(localize)[activeTab]}
                 onChange={(index: number) =>
                     setQueryString({
                         tab: index === 0 ? ORDERS_STATUS.ACTIVE_ORDERS : ORDERS_STATUS.PAST_ORDERS,

src/utils/tabs.ts

@@ -0,0 +1,16 @@
+import { TLocalize } from 'types';
+
+/**
+ * The below function is a temporary solution to get handle the tab switching when switching the language.
+ * @returns the localized tabs based on the current language.
+ */
+export const getLocalizedTabs = (localize: TLocalize): { [tab: string]: string } => ({
+    'Active orders': localize('Active orders'),
+    'Ad details': localize('Ad details'),
+    Buy: localize('Buy'),
+    'My counterparties': localize('My counterparties'),
+    'Past orders': localize('Past orders'),
+    'Payment methods': localize('Payment methods'),
+    Sell: localize('Sell'),
+    Stats: localize('Stats'),
+});