diff --git a/packages/trader/src/AppV2/Components/ServiceErrorSheet/__tests__/service-error-sheet.spec.tsx b/packages/trader/src/AppV2/Components/ServiceErrorSheet/__tests__/service-error-sheet.spec.tsx index aaf3388364cb..dea1ef64b128 100644 --- a/packages/trader/src/AppV2/Components/ServiceErrorSheet/__tests__/service-error-sheet.spec.tsx +++ b/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(); }); diff --git a/packages/trader/src/AppV2/Components/ServiceErrorSheet/service-error-sheet.tsx b/packages/trader/src/AppV2/Components/ServiceErrorSheet/service-error-sheet.tsx index 72fe0737b9aa..1796a2c90318 100644 --- a/packages/trader/src/AppV2/Components/ServiceErrorSheet/service-error-sheet.tsx +++ b/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 = diff --git a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx b/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx index 9b0745e858a1..7d0288c64221 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx +++ b/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 && ( diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.tsx b/packages/trader/src/AppV2/Containers/Trade/trade.tsx index 8256d25bcfc5..ac0fc5b79f29 100644 --- a/packages/trader/src/AppV2/Containers/Trade/trade.tsx +++ b/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(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) { diff --git a/packages/trader/src/AppV2/Utils/__tests__/layout-utils.spec.ts b/packages/trader/src/AppV2/Utils/__tests__/layout-utils.spec.ts index 927fe0602140..7bb0d6edaf1a 100644 --- a/packages/trader/src/AppV2/Utils/__tests__/layout-utils.spec.ts +++ b/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', () => { diff --git a/packages/trader/src/AppV2/Utils/layout-utils.tsx b/packages/trader/src/AppV2/Utils/layout-utils.tsx index cec3074688cd..5fd4ab97467c 100644 --- a/packages/trader/src/AppV2/Utils/layout-utils.tsx +++ b/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 (