Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GRWT-3938 / Kate / Insufficient balance error when changing language #17874

Merged
merged 1 commit into from
Dec 26, 2024
+59 −60
Merged

GRWT-3938 / Kate / Insufficient balance error when changing language #17874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 13 additions & 18 deletions ...ages/trader/src/AppV2/Components/ServiceErrorSheet/__tests__/service-error-sheet.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => ({
Expand Down Expand Up @@ -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();
});
Expand Down
16 changes: 9 additions & 7 deletions packages/trader/src/AppV2/Components/ServiceErrorSheet/service-error-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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 =
Expand Down
31 changes: 14 additions & 17 deletions packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 });

Expand All @@ -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>
Expand Down
33 changes: 19 additions & 14 deletions packages/trader/src/AppV2/Containers/Trade/trade.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -87,7 +92,7 @@ const Trade = observer(() => {
onMount();
return onUnmount;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [current_language]);

useEffect(() => {
if (is_switching) {
Expand Down
4 changes: 2 additions & 2 deletions packages/trader/src/AppV2/Utils/__tests__/layout-utils.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/trader/src/AppV2/Utils/layout-utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TCommonStoreServicesError } from '@deriv/stores/types';

import { getTradeParams } from './trade-params-utils';

export const HEIGHT = {
Expand Down Expand Up @@ -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 (
Expand Down
Loading