fix: updating store on language change (#17874)

packages/trader/src/AppV2/Components/ServiceErrorSheet/__tests__/service-error-sheet.spec.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
+
+import * as fileUtils from '@deriv/shared';
+import { mockStore } from '@deriv/stores';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockStore } from '@deriv/stores';
+
 import TraderProviders from '../../../../trader-providers';
-import * as fileUtils from '@deriv/shared';
 import ServiceErrorSheet from '../service-error-sheet';
 
 jest.mock('react-router-dom', () => ({
@@ -52,54 +54,47 @@ describe('ServiceErrorSheet', () => {
         );
     };
 
-    it('renders the Action Sheet with appropriate message and action for InsufficientBalance error', () => {
+    it('renders the Action Sheet with appropriate message and action for InsufficientBalance error', async () => {
         render(mockTrade());
 
         expect(screen.getByText('Insufficient balance')).toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button'));
+        await userEvent.click(screen.getByRole('button'));
         expect(default_mock_store.common.resetServicesError).toBeCalled();
     });
 
-    it('renders the Action Sheet with appropriate message for InvalidContractProposal error', () => {
-        default_mock_store.common.services_error.code = 'InvalidContractProposal';
-        render(mockTrade());
-
-        expect(screen.getByText('Insufficient balance')).toBeInTheDocument();
-    });
-
-    it('renders the Action Sheet with appropriate message and actions for AuthorizationRequired error', () => {
+    it('renders the Action Sheet with appropriate message and actions for AuthorizationRequired error', async () => {
         const spyRedirectToLogin = jest.spyOn(fileUtils, 'redirectToLogin');
         default_mock_store.common.services_error.code = 'AuthorizationRequired';
         render(mockTrade());
 
         expect(screen.getByText('Start trading with us')).toBeInTheDocument();
 
-        userEvent.click(screen.getByText('Create free account'));
+        await userEvent.click(screen.getByText('Create free account'));
         expect(default_mock_store.common.resetServicesError).toBeCalled();
 
-        userEvent.click(screen.getByText('Login'));
+        await userEvent.click(screen.getByText('Login'));
         expect(spyRedirectToLogin).toBeCalled();
     });
 
-    it('renders the Action Sheet with appropriate message and action for PleaseAuthenticate error', () => {
+    it('renders the Action Sheet with appropriate message and action for PleaseAuthenticate error', async () => {
         default_mock_store.common.services_error.code = 'PleaseAuthenticate';
         render(mockTrade());
 
         expect(screen.getByText('Account verification required')).toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button'));
+        await userEvent.click(screen.getByRole('button'));
         expect(default_mock_store.common.resetServicesError).toBeCalled();
     });
 
-    it('renders the Action Sheet with appropriate message and action if is_mf_verification_pending_modal_visible === true', () => {
+    it('renders the Action Sheet with appropriate message and action if is_mf_verification_pending_modal_visible === true', async () => {
         default_mock_store.common.services_error.code = '';
         default_mock_store.ui.is_mf_verification_pending_modal_visible = true;
         render(mockTrade());
 
         expect(screen.getByText('Pending verification')).toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button'));
+        await userEvent.click(screen.getByRole('button'));
         expect(default_mock_store.common.resetServicesError).toBeCalled();
         expect(default_mock_store.ui.setIsMFVericationPendingModal).toBeCalled();
     });

packages/trader/src/AppV2/Components/ServiceErrorSheet/service-error-sheet.tsx

@@ -1,12 +1,15 @@
 import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router';
+
+import { isEmptyObject, redirectToLogin, redirectToSignUp, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
-import { useTraderStore } from 'Stores/useTraderStores';
-import { ActionSheet } from '@deriv-com/quill-ui';
 import { getLanguage, Localize } from '@deriv/translations';
-import { isEmptyObject, redirectToLogin, redirectToSignUp, routes } from '@deriv/shared';
-import { useHistory } from 'react-router';
-import ServiceErrorDescription from './service-error-description';
+import { ActionSheet } from '@deriv-com/quill-ui';
+
 import { checkIsServiceModalError, SERVICE_ERROR } from 'AppV2/Utils/layout-utils';
+import { useTraderStore } from 'Stores/useTraderStores';
+
+import ServiceErrorDescription from './service-error-description';
 
 const ServiceErrorSheet = observer(() => {
     const [is_open, setIsOpen] = useState(false);
@@ -18,8 +21,7 @@ const ServiceErrorSheet = observer(() => {
     const history = useHistory();
 
     const { code, message, type } = services_error || {};
-    const is_insufficient_balance =
-        code === SERVICE_ERROR.INSUFFICIENT_BALANCE || code === SERVICE_ERROR.INVALID_CONTRACT_PROPOSAL;
+    const is_insufficient_balance = code === SERVICE_ERROR.INSUFFICIENT_BALANCE;
     const is_authorization_required = code === SERVICE_ERROR.AUTHORIZATION_REQUIRED && type === 'buy';
     const is_account_verification_required = code === SERVICE_ERROR.PLEASE_AUTHENTICATE;
     const should_show_error_modal =

packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx

@@ -1,35 +1,33 @@
 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 { useTraderStore } from 'Stores/useTraderStores';
+
+import AccumulatorsInformation from './AccumulatorsInformation';
 import AllowEquals from './AllowEquals';
-import Duration from './Duration';
-import Stake from './Stake';
 import Barrier from './Barrier';
+import BarrierInfo from './BarrierInfo';
+import Duration from './Duration';
 import GrowthRate from './GrowthRate';
-import TakeProfit from './TakeProfit';
-import AccumulatorsInformation from './AccumulatorsInformation';
+import LastDigitPrediction from './LastDigitPrediction';
 import Multiplier from './Multiplier';
-import RiskManagement from './RiskManagement';
 import MultipliersDealCancellationInfo from './MultipliersDealCancellationInfo';
-import TradeTypeTabs from './TradeTypeTabs';
-import Strike from './Strike';
-import PayoutPerPoint from './PayoutPerPoint';
-import LastDigitPrediction from './LastDigitPrediction';
 import MultipliersExpirationInfo from './MultipliersExpirationInfo';
-import BarrierInfo from './BarrierInfo';
-import PayoutPerPointInfo from './PayoutPerPointInfo';
 import PayoutInfo from './PayoutInfo';
+import PayoutPerPoint from './PayoutPerPoint';
+import PayoutPerPointInfo from './PayoutPerPointInfo';
+import RiskManagement from './RiskManagement';
+import Stake from './Stake';
+import Strike from './Strike';
+import TakeProfit from './TakeProfit';
+import TradeTypeTabs from './TradeTypeTabs';
 
 export type TTradeParametersProps = { is_minimized?: boolean };
 
 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 });
 
@@ -39,7 +37,6 @@ const TradeParameters = observer(({ is_minimized }: TTradeParametersProps) => {
                 'trade-params__options__wrapper',
                 is_minimized && 'trade-params__options__wrapper--minimized'
             )}
-            key={current_language}
         >
             {is_minimized && (
                 <React.Fragment>

packages/trader/src/AppV2/Containers/Trade/trade.tsx

@@ -1,32 +1,37 @@
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { observer } from 'mobx-react';
-import { useStore } from '@deriv/stores';
-import { Loading, Skeleton } from '@deriv/components';
+
+import { Loading } from '@deriv/components';
 import { useLocalStorageData } from '@deriv/hooks';
-import ClosedMarketMessage from 'AppV2/Components/ClosedMarketMessage';
-import { useTraderStore } from 'Stores/useTraderStores';
+import { useStore } from '@deriv/stores';
+
+import AccumulatorStats from 'AppV2/Components/AccumulatorStats';
 import BottomNav from 'AppV2/Components/BottomNav';
-import PurchaseButton from 'AppV2/Components/PurchaseButton';
-import { getChartHeight, HEIGHT } from 'AppV2/Utils/layout-utils';
-import { TradeParametersContainer, TradeParameters } from 'AppV2/Components/TradeParameters';
+import ClosedMarketMessage from 'AppV2/Components/ClosedMarketMessage';
 import CurrentSpot from 'AppV2/Components/CurrentSpot';
-import { TradeChart } from '../Chart';
-import { isDigitTradeType } from 'Modules/Trading/Helpers/digits';
-import TradeTypes from './trade-types';
 import MarketSelector from 'AppV2/Components/MarketSelector';
-import useContractsForCompany from 'AppV2/Hooks/useContractsForCompany';
-import AccumulatorStats from 'AppV2/Components/AccumulatorStats';
 import OnboardingGuide from 'AppV2/Components/OnboardingGuide/GuideForPages';
+import PurchaseButton from 'AppV2/Components/PurchaseButton';
 import ServiceErrorSheet from 'AppV2/Components/ServiceErrorSheet';
-import { sendSelectedTradeTypeToAnalytics } from '../../../Analytics';
 import TradeErrorSnackbar from 'AppV2/Components/TradeErrorSnackbar';
+import { TradeParameters, TradeParametersContainer } from 'AppV2/Components/TradeParameters';
+import useContractsForCompany from 'AppV2/Hooks/useContractsForCompany';
+import { getChartHeight, HEIGHT } from 'AppV2/Utils/layout-utils';
+import { isDigitTradeType } from 'Modules/Trading/Helpers/digits';
+import { useTraderStore } from 'Stores/useTraderStores';
+
+import { sendSelectedTradeTypeToAnalytics } from '../../../Analytics';
+import { TradeChart } from '../Chart';
+
+import TradeTypes from './trade-types';
 
 const Trade = observer(() => {
     const [is_minimized_params_visible, setIsMinimizedParamsVisible] = React.useState(false);
     const chart_ref = React.useRef<HTMLDivElement>(null);
     const {
         client: { is_logged_in, is_switching },
+        common: { current_language },
         ui: { is_dark_mode_on },
     } = useStore();
     const {
@@ -87,7 +92,7 @@ const Trade = observer(() => {
         onMount();
         return onUnmount;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [current_language]);
 
     useEffect(() => {
         if (is_switching) {

packages/trader/src/AppV2/Utils/__tests__/layout-utils.spec.ts

@@ -1,5 +1,6 @@
 import { TRADE_TYPES } from '@deriv/shared';
-import { isTradeParamVisible, getChartHeight, checkIsServiceModalError } from '../layout-utils';
+
+import { checkIsServiceModalError, getChartHeight, isTradeParamVisible } from '../layout-utils';
 
 describe('isTradeParamVisible', () => {
     it('should return correct value for expiration component key', () => {
@@ -139,7 +140,6 @@ describe('checkIsServiceModalError', () => {
     });
     it('returns true if services_error has appropriate code', () => {
         expect(checkIsServiceModalError({ services_error: { code: 'InsufficientBalance' } })).toBe(true);
-        expect(checkIsServiceModalError({ services_error: { code: 'InvalidContractProposal' } })).toBe(true);
         expect(checkIsServiceModalError({ services_error: { code: 'PleaseAuthenticate' } })).toBe(true);
     });
     it('returns true if services_error code is AuthorizationRequired and type is buy', () => {

packages/trader/src/AppV2/Utils/layout-utils.tsx

@@ -1,4 +1,5 @@
 import { TCommonStoreServicesError } from '@deriv/stores/types';
+
 import { getTradeParams } from './trade-params-utils';
 
 export const HEIGHT = {
@@ -72,8 +73,7 @@ export const checkIsServiceModalError = ({
 }) => {
     const { code, type } = services_error || {};
     // Error modal is shown only for next four types. For the rest - snackbar.
-    const is_insufficient_balance =
-        code === SERVICE_ERROR.INSUFFICIENT_BALANCE || code === SERVICE_ERROR.INVALID_CONTRACT_PROPOSAL;
+    const is_insufficient_balance = code === SERVICE_ERROR.INSUFFICIENT_BALANCE;
     const is_authorization_required = code === SERVICE_ERROR.AUTHORIZATION_REQUIRED && type === 'buy';
     const is_account_verification_required = code === SERVICE_ERROR.PLEASE_AUTHENTICATE;
     return (