DTRA-1965 / Kate / [DTrader-V2] Trading Page translation issues (deri…

…v-com#17295) * fix: rerender guide, trade types and activesymbols on language change * fix: tests
heorhi-deriv · Oct 25, 2024 · 595fdb0 · 595fdb0
1 parent b81dc79
commit 595fdb0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/packages/trader/src/AppV2/Components/Guide/guide.tsx b/packages/trader/src/AppV2/Components/Guide/guide.tsx
@@ -17,6 +17,7 @@ type TGuide = {
 const Guide = observer(({ has_label, show_guide_for_selected_contract }: TGuide) => {
     const {
         ui: { is_dark_mode_on },
+        common: { current_language },
     } = useStore();
     const { contract_type } = useTraderStore();
     const contract_type_title = AVAILABLE_CONTRACTS.find(item => item.for.includes(contract_type))?.id ?? '';
@@ -61,6 +62,7 @@ const Guide = observer(({ has_label, show_guide_for_selected_contract }: TGuide)
                 icon={<LabelPairedPresentationScreenSmRegularIcon key='guide-button-icon' />}
                 onClick={() => setIsDescriptionOpened(true)}
                 variant={has_label ? 'secondary' : 'tertiary'}
+                key={current_language}
             >
                 {has_label && (
                     <Text size='sm' bold color='quill-typography__color--prominent'>

diff --git a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx b/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import { observer } from 'mobx-react';
+import { useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { isTradeParamVisible } from 'AppV2/Utils/layout-utils';
 import AllowEquals from './AllowEquals';
@@ -28,6 +29,9 @@ type TTradeParametersProps = {
 
 const TradeParameters = observer(({ is_minimized }: TTradeParametersProps) => {
     const { contract_type, has_cancellation, symbol } = useTraderStore();
+    const {
+        common: { current_language },
+    } = useStore();
     const isVisible = (component_key: string) =>
         isTradeParamVisible({ component_key, contract_type, has_cancellation, symbol });
 
@@ -37,6 +41,7 @@ const TradeParameters = observer(({ is_minimized }: TTradeParametersProps) => {
                 'trade-params__options__wrapper',
                 is_minimized && 'trade-params__options__wrapper--minimized'
             )}
+            key={current_language}
         >
             {is_minimized && (
                 <React.Fragment>

diff --git a/packages/trader/src/AppV2/Hooks/__tests__/useActiveSymbols.spec.tsx b/packages/trader/src/AppV2/Hooks/__tests__/useActiveSymbols.spec.tsx
@@ -84,6 +84,7 @@ describe('useActiveSymbols', () => {
             'active_symbols',
             mocked_store.client.loginid ?? '',
             mocked_store.modules.trade.contract_type,
+            mocked_store.common.current_language,
         ]);
     });
 

diff --git a/packages/trader/src/AppV2/Hooks/useActiveSymbols.ts b/packages/trader/src/AppV2/Hooks/useActiveSymbols.ts
@@ -16,7 +16,7 @@ import { useDtraderQuery } from './useDtraderQuery';
 const useActiveSymbols = () => {
     const { client, common } = useStore();
     const { loginid, is_switching } = client;
-    const { showError } = common;
+    const { showError, current_language } = common;
     const {
         active_symbols: symbols_from_store,
         contract_type,
@@ -57,7 +57,7 @@ const useActiveSymbols = () => {
     };
 
     const { data: response } = useDtraderQuery<ActiveSymbolsResponse>(
-        ['active_symbols', loginid ?? '', getContractType()],
+        ['active_symbols', loginid ?? '', getContractType(), current_language],
         {
             active_symbols: 'brief',
             contract_type: getContractTypesList(),