+
{isRtl ? (
) : (
@@ -118,8 +207,8 @@ const AddedMT5AccountsList: React.FC
= ({ account }) => {
setShowDisabledAccountModal(false)}
+ isVisible={shouldShowDisabledAccountModal}
+ onClose={() => setShouldShowDisabledAccountModal(false)}
/>
);
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx
index 1b5f66f84d52..7157576d8451 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx
@@ -1,220 +1,160 @@
import React from 'react';
+import { useJurisdictionStatus, useTradingPlatformStatus } from '@deriv/api-v2';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { ModalProvider } from '../../../../../../components/ModalProvider';
-import { PlatformDetails } from '../../../../constants';
+import { useModal } from '../../../../../../components/ModalProvider';
+import { MT5TradeModal, TradingPlatformStatusModal, VerificationFailedModal } from '../../../../modals';
import AddedMT5AccountsList from '../AddedMT5AccountsList';
-import { useAddedMT5Account } from '../hooks';
-// mock function to check if correct props are passed to the modal components
-const mockPropsFn = jest.fn();
-
-jest.mock('../hooks', () => ({
- useAddedMT5Account: jest.fn(),
-}));
-
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useHistory: jest.fn(() => ({
- push: jest.fn(),
- })),
-}));
-
-jest.mock('../../../../components', () => ({
- ...jest.requireActual('../../../../components'),
- ClientVerificationStatusBadge: jest.fn(props => {
- mockPropsFn(props.variant);
- return (
- {
- e.stopPropagation();
- props.onClick();
- }}
- >
- ClientVerificationStatusBadge
-
- );
- }),
- PlatformStatusBadge: jest.fn(props => {
- mockPropsFn(props);
- return PlatformStatusBadge
;
- }),
-}));
-
-jest.mock('../../../../modals', () => ({
- ...jest.requireActual('../../../../modals'),
- ClientVerificationModal: jest.fn(props => {
- mockPropsFn(props);
- return ClientVerificationModal
;
- }),
- MT5TradeModal: jest.fn(props => {
- mockPropsFn(props);
- return MT5TradeModal
;
- }),
- TradingPlatformStatusModal: jest.fn(props => {
- mockPropsFn(props);
- return TradingPlatformStatusModal
;
- }),
+jest.mock('@deriv/api-v2', () => ({
+ useJurisdictionStatus: jest.fn(),
+ useTradingPlatformStatus: jest.fn(),
}));
-jest.mock('../../../../../../components', () => ({
- ...jest.requireActual('../../../../../../components'),
- WalletDisabledAccountModal: jest.fn(props => {
- mockPropsFn(props);
- return WalletDisabledAccountModal
;
- }),
- WalletStatusBadge: jest.fn(props => {
- mockPropsFn(props);
- return WalletStatusBadge
;
- }),
+jest.mock('../../../../../../components/ModalProvider', () => ({
+ useModal: jest.fn(),
}));
-const mockAccount = {
- display_balance: 'USD 1000.00',
- display_login: '12345678',
- landing_company_short: 'svg',
- market_type: 'financial',
- platform: 'mt5',
- product: 'financial',
- status: 'active',
-};
-
-const mockUseAddedMT5AccountData = {
- accountDetails: {
- icon: (
- <>
- icon-{mockAccount.platform}-{mockAccount.product}
-
- ),
- title: 'Financial',
- },
- isServerMaintenance: false,
- showClientVerificationModal: false,
- showMT5TradeModal: true,
- showPlatformStatus: false,
-};
-
-const wrapper: React.FC = ({ children }) => (
- <>
- {children}
-
-);
-
describe('AddedMT5AccountsList', () => {
- // const mockShow = jest.fn();
+ const mockAccount = {
+ display_balance: 'USD 1000.00',
+ display_login: '12345678',
+ landing_company_short: 'svg',
+ market_type: 'financial',
+ platform: 'mt5',
+ product: 'standard',
+ rights: { enabled: true },
+ status: 'active',
+ };
+
+ const mockShow = jest.fn();
- beforeAll(() => {
- const modalRoot = document.createElement('div');
- modalRoot.setAttribute('id', 'wallets_modal_root');
- document.body.appendChild(modalRoot);
- });
beforeEach(() => {
- (useAddedMT5Account as jest.Mock).mockReturnValue(mockUseAddedMT5AccountData);
+ (useJurisdictionStatus as jest.Mock).mockReturnValue({
+ getVerificationStatus: jest.fn().mockReturnValue({ is_failed: false, is_pending: false }),
+ });
+ (useTradingPlatformStatus as jest.Mock).mockReturnValue({
+ getPlatformStatus: jest.fn().mockReturnValue('active'),
+ });
+ (useModal as jest.Mock).mockReturnValue({ show: mockShow });
});
- it('displays added mt5 account with correct account details', () => {
+ it('renders added mt5 accounts list with correct account details', () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render(, { wrapper });
+ render();
- expect(screen.getByText('icon-mt5-financial')).toBeInTheDocument();
expect(screen.getByText('Financial')).toBeInTheDocument();
expect(screen.getByText('USD 1000.00')).toBeInTheDocument();
expect(screen.getByText('12345678')).toBeInTheDocument();
});
- it('displays correct variant of ClientVerificationStatusBadge and renders modal with ClientVerificationModal when clicked on it', async () => {
- (useAddedMT5Account as jest.Mock).mockReturnValue({
- ...mockUseAddedMT5AccountData,
- kycStatus: 'mockKycStatus',
- });
-
+ it('shows MT5TradeModal when list is clicked and status is active', async () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render(, { wrapper });
-
- const badge = screen.getByText('ClientVerificationStatusBadge');
+ render();
- expect(badge).toBeInTheDocument();
- expect(mockPropsFn).toBeCalledWith('mockKycStatus');
-
- userEvent.click(badge);
+ userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
await waitFor(() => {
- expect(screen.getByText('ClientVerificationModal')).toBeInTheDocument();
+ expect(mockShow).toHaveBeenCalledWith(
+ // @ts-expect-error - since this is a mock, we only need partial properties of the account
+
+ );
});
});
- it('shows the disabled badge when the account MT5 account is disabled', () => {
- (useAddedMT5Account as jest.Mock).mockReturnValue({
- ...mockUseAddedMT5AccountData,
- isAccountDisabled: true,
- isServerMaintenance: true,
- showPlatformStatus: true,
+ it('shows TradingPlatformStatusModal when platform is under maintenance', async () => {
+ (useTradingPlatformStatus as jest.Mock).mockReturnValue({
+ getPlatformStatus: jest.fn().mockReturnValue('maintenance'),
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render(, { wrapper });
+ render();
- expect(screen.getByText('WalletStatusBadge')).toBeInTheDocument();
- expect(mockPropsFn).toBeCalledWith({
- badgeSize: 'md',
- padding: 'tight',
- status: 'disabled',
+ userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
+
+ await waitFor(() => {
+ expect(mockShow).toHaveBeenCalledWith(, {
+ defaultRootId: 'wallets_modal_root',
+ });
});
});
- it('shows MT5TradeModal when list is clicked and status is active', async () => {
+ it('shows VerificationFailedModal when verification has failed', async () => {
+ (useJurisdictionStatus as jest.Mock).mockReturnValue({
+ getVerificationStatus: jest.fn().mockReturnValue({ is_failed: true, is_pending: false }),
+ });
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render(, { wrapper });
+ render();
userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
await waitFor(() => {
- expect(screen.getByText('MT5TradeModal')).toBeInTheDocument();
- expect(mockPropsFn).toBeCalledWith({
- marketType: mockAccount.market_type,
- mt5Account: mockAccount,
- platform: PlatformDetails.mt5.platform,
+ expect(mockShow).toHaveBeenCalledWith(, {
+ defaultRootId: 'wallets_modal_root',
});
});
});
- it('shows TradingPlatformStatusModal when platform is under maintenance', async () => {
- (useAddedMT5Account as jest.Mock).mockReturnValue({
- ...mockUseAddedMT5AccountData,
- isServerMaintenance: true,
- showPlatformStatus: true,
+ it('displays pending verification message when status is pending', () => {
+ (useJurisdictionStatus as jest.Mock).mockReturnValue({
+ getVerificationStatus: jest.fn().mockReturnValue({ is_failed: false, is_pending: true }),
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render(, { wrapper });
+ render();
- userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
+ expect(screen.getByText('Pending verification')).toBeInTheDocument();
+ });
- await waitFor(() => {
- expect(screen.getByText('TradingPlatformStatusModal')).toBeInTheDocument();
- expect(mockPropsFn).toBeCalledWith({
- isServerMaintenance: true,
- });
+ it('displays verification failed message when verification has failed', () => {
+ (useJurisdictionStatus as jest.Mock).mockReturnValue({
+ getVerificationStatus: jest.fn().mockReturnValue({ is_failed: true, is_pending: false }),
});
+ // @ts-expect-error - since this is a mock, we only need partial properties of the account
+ render();
+
+ expect(screen.getByText('Verification failed')).toBeInTheDocument();
+ expect(screen.getByText('Why?')).toBeInTheDocument();
});
- it('shows the WalletDisabledAccountModal when a disabled account MT5 account is clicked', async () => {
- (useAddedMT5Account as jest.Mock).mockReturnValue({
- ...mockUseAddedMT5AccountData,
- isAccountDisabled: true,
- isServerMaintenance: true,
- showPlatformStatus: true,
+ it('displays VerificationFailedModal when "Why?" link is clicked', async () => {
+ (useJurisdictionStatus as jest.Mock).mockReturnValue({
+ getVerificationStatus: jest.fn().mockReturnValue({ is_failed: true, is_pending: false }),
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render(, { wrapper });
+ render();
- await waitFor(() => {
- userEvent.click(screen.getByText('WalletStatusBadge'));
- });
+ const link = screen.getByText('Why?');
+ userEvent.click(link);
await waitFor(() => {
- expect(screen.getByText('WalletDisabledAccountModal')).toBeInTheDocument();
+ expect(mockShow).toHaveBeenCalledWith(, {
+ defaultRootId: 'wallets_modal_root',
+ });
});
});
+
+ it('shows WalletStatusBadge when account is disabled', () => {
+ // @ts-expect-error - since this is a mock, we only need partial properties of the account
+ render();
+
+ expect(screen.getByText('Disabled')).toBeInTheDocument();
+ });
+
+ it('opens WalletDisabledAccountModal when disabled account card is clicked', async () => {
+ // @ts-expect-error - since this is a mock, we only need partial properties of the account
+ render();
+
+ const card = screen.getByTestId('dt_wallets_trading_account_card');
+ await userEvent.click(card);
+
+ expect(screen.getByText('Contact us via live chat for more details.')).toBeInTheDocument();
+
+ const closeButton = screen.getByTestId('dt-close-icon');
+ expect(closeButton).toBeInTheDocument();
+ await userEvent.click(closeButton);
+
+ expect(screen.queryByText('Contact us via live chat for more details.')).not.toBeInTheDocument();
+ });
});
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/__tests__/useAddedMT5Account.spec.ts b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/__tests__/useAddedMT5Account.spec.ts
deleted file mode 100644
index 0d7af35c6215..000000000000
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/__tests__/useAddedMT5Account.spec.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useTradingPlatformStatus } from '@deriv/api-v2';
-import { cleanup } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
-import { getMarketTypeDetails } from '../../../../../constants';
-import { TAddedMT5Account } from '../../../../../types';
-import useAddedMT5Account from '../useAddedMT5Account';
-
-jest.mock('@deriv/api-v2', () => ({
- ...jest.requireActual('@deriv/api-v2'),
- useTradingPlatformStatus: jest.fn(),
-}));
-
-jest.mock('../../../../../constants', () => ({
- ...jest.requireActual('../../../../../constants'),
- getMarketTypeDetails: jest.fn(),
-}));
-
-const mockAccount = {
- market_type: 'financial',
- product: 'financial',
- status: '',
-} as TAddedMT5Account;
-
-describe('useAddedMT5Account', () => {
- beforeEach(() => {
- (useTradingPlatformStatus as jest.Mock).mockReturnValue({
- getPlatformStatus: jest.fn(),
- });
- });
- afterEach(cleanup);
-
- it('provides correct account details based on the market type', () => {
- (getMarketTypeDetails as jest.Mock).mockReturnValue({ financial: 'mock-account-details' });
-
- const { result } = renderHook(() => useAddedMT5Account(mockAccount));
-
- expect(result.current.accountDetails).toEqual('mock-account-details');
- });
-
- it('isServerMaintenance is `true` when trading platform status is `maintenance`', () => {
- (useTradingPlatformStatus as jest.Mock).mockReturnValue({
- getPlatformStatus: jest.fn(() => 'maintenance'),
- });
-
- const { result } = renderHook(() => useAddedMT5Account(mockAccount));
-
- expect(result.current.isServerMaintenance).toEqual(true);
- });
-
- it('isServerMaintenance is `true` when account status is `under_maintenance`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'under_maintenance' }));
-
- expect(result.current.isServerMaintenance).toEqual(true);
- });
-
- it('kycStatus is `failed` when status received for account is `proof_failed`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'proof_failed' }));
-
- expect(result.current.kycStatus).toEqual('failed');
- });
-
- it('kycStatus is `failed` when status received for account is `poa_failed`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'poa_failed' }));
-
- expect(result.current.kycStatus).toEqual('failed');
- });
-
- it('kycStatus is `in_review` when status received for account is `verification_pending`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'verification_pending' }));
-
- expect(result.current.kycStatus).toEqual('in_review');
- });
-
- it('kycStatus is `needs_verification` when status received for account is `needs_verification`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'needs_verification' }));
-
- expect(result.current.kycStatus).toEqual('needs_verification');
- });
-
- it('showMT5TradeModal is `true` when platform status is `active`', () => {
- (useTradingPlatformStatus as jest.Mock).mockReturnValue({
- getPlatformStatus: jest.fn(() => 'active'),
- });
-
- const { result } = renderHook(() => useAddedMT5Account(mockAccount));
-
- expect(result.current.showMT5TradeModal).toEqual(true);
- });
-
- it('showPlatformStatus is `true` when account status is `unavailable`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'unavailable' }));
-
- expect(result.current.showPlatformStatus).toEqual(true);
- });
-
- it('showPlatformStatus is `true` when account status is `under_maintenance`', () => {
- const { result } = renderHook(() => useAddedMT5Account({ ...mockAccount, status: 'under_maintenance' }));
-
- expect(result.current.showPlatformStatus).toEqual(true);
- });
-
- it('showPlatformStatus is `true` when trading platform status is `maintenance`', () => {
- (useTradingPlatformStatus as jest.Mock).mockReturnValue({
- getPlatformStatus: jest.fn(() => 'maintenance'),
- });
-
- const { result } = renderHook(() => useAddedMT5Account(mockAccount));
-
- expect(result.current.showPlatformStatus).toEqual(true);
- });
-});
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/index.ts b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/index.ts
deleted file mode 100644
index 1ac54db629bf..000000000000
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as useAddedMT5Account } from './useAddedMT5Account';
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/useAddedMT5Account.ts b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/useAddedMT5Account.ts
deleted file mode 100644
index e02189eab358..000000000000
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/hooks/useAddedMT5Account.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useMemo } from 'react';
-import { useTradingPlatformStatus } from '@deriv/api-v2';
-import { useTranslations } from '@deriv-com/translations';
-import { ClientVerificationStatusBadge } from '../../../../components';
-import { getMarketTypeDetails, MARKET_TYPE, MT5_ACCOUNT_STATUS, TRADING_PLATFORM_STATUS } from '../../../../constants';
-import { TAddedMT5Account } from '../../../../types';
-
-type TBadgeVariations = Partial['variant']> | undefined;
-
-const getClientKycStatus = (status: TAddedMT5Account['status']): TBadgeVariations => {
- switch (status) {
- case MT5_ACCOUNT_STATUS.POA_FAILED:
- case MT5_ACCOUNT_STATUS.PROOF_FAILED:
- return 'failed';
- case MT5_ACCOUNT_STATUS.VERIFICATION_PENDING:
- case MT5_ACCOUNT_STATUS.POA_PENDING:
- return 'in_review';
- case MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION:
- case MT5_ACCOUNT_STATUS.POA_REQUIRED:
- return 'needs_verification';
- default:
- }
-};
-
-const useAddedMT5Account = (account: TAddedMT5Account) => {
- const { localize } = useTranslations();
-
- // @ts-expect-error The enabled property exists, but the api-types are invalid
- const isAccountDisabled = !account.rights?.enabled;
-
- const accountDetails = useMemo(
- () => getMarketTypeDetails(localize, account.product)[account.market_type ?? MARKET_TYPE.ALL],
- [account.market_type, account.product, localize]
- );
-
- const { getPlatformStatus } = useTradingPlatformStatus();
- const platformStatus = getPlatformStatus(account.platform);
- const kycStatus = getClientKycStatus(account.status);
-
- const isServerMaintenance =
- platformStatus === TRADING_PLATFORM_STATUS.MAINTENANCE ||
- account.status === MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE;
-
- const showPlatformStatus =
- account.status === MT5_ACCOUNT_STATUS.UNAVAILABLE ||
- account.status === MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE ||
- platformStatus === TRADING_PLATFORM_STATUS.MAINTENANCE;
-
- const showMT5TradeModal = platformStatus === TRADING_PLATFORM_STATUS.ACTIVE;
-
- return {
- accountDetails,
- isAccountDisabled,
- isServerMaintenance,
- kycStatus,
- showMT5TradeModal,
- showPlatformStatus,
- };
-};
-
-export default useAddedMT5Account;
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
index 3d6c53ed996e..310168f8c1a3 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -1,22 +1,25 @@
-import React, { useCallback } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
import { useActiveWalletAccount, useMT5AccountsList, useTradingPlatformStatus } from '@deriv/api-v2';
import {
LabelPairedChevronLeftCaptionRegularIcon,
LabelPairedChevronRightCaptionRegularIcon,
} from '@deriv/quill-icons';
import { Localize, useTranslations } from '@deriv-com/translations';
-import { Text } from '@deriv-com/ui';
+import { Loader, Text } from '@deriv-com/ui';
import { TradingAccountCard } from '../../../../../components';
import { useModal } from '../../../../../components/ModalProvider';
import useIsRtl from '../../../../../hooks/useIsRtl';
+import { THooks } from '../../../../../types';
import { getMarketTypeDetails, MARKET_TYPE, PRODUCT, TRADING_PLATFORM_STATUS } from '../../../constants';
-import { ClientVerificationModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../modals';
-import { TAvailableMT5Account } from '../../../types';
-import { getClientVerification } from '../../../utils';
+import { JurisdictionModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../modals';
import './AvailableMT5AccountsList.scss';
+const LazyVerification = lazy(
+ () => import(/* webpackChunkName: "wallets-client-verification" */ '../../ClientVerification/ClientVerification')
+);
+
type TProps = {
- account: TAvailableMT5Account;
+ account: THooks.AvailableMT5Accounts;
};
const AvailableMT5AccountsList: React.FC = ({ account }) => {
@@ -28,11 +31,10 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => {
const { description, title } = getMarketTypeDetails(localize, account.product)[
account.market_type || MARKET_TYPE.ALL
];
+ const [showMt5PasswordModal, setShowMt5PasswordModal] = useState(false);
const { data: mt5Accounts } = useMT5AccountsList();
const platformStatus = getPlatformStatus(account.platform);
const hasUnavailableAccount = mt5Accounts?.some(account => account.status === 'unavailable');
- const isVirtual = activeWallet?.is_virtual;
- const { hasClientKycStatus } = getClientVerification(account);
const onButtonClick = useCallback(() => {
if (hasUnavailableAccount) return show();
@@ -44,16 +46,58 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => {
return show();
case TRADING_PLATFORM_STATUS.ACTIVE:
default:
- if (!isVirtual && hasClientKycStatus) {
- show();
+ if (activeWallet?.is_virtual || account.product === PRODUCT.SWAPFREE) {
+ show(
+
+ );
+ } else if (account.product === PRODUCT.ZEROSPREAD) {
+ show(
+ }>
+ {
+ setShowMt5PasswordModal(true);
+ }}
+ selectedJurisdiction={account.shortcode}
+ />
+
+ );
} else {
- show();
+ show();
}
setModalState('marketType', account.market_type);
setModalState('selectedJurisdiction', account.shortcode);
break;
}
- }, [hasUnavailableAccount, show, platformStatus, isVirtual, hasClientKycStatus, setModalState, account]);
+ }, [
+ hasUnavailableAccount,
+ show,
+ platformStatus,
+ account.platform,
+ account.market_type,
+ account.product,
+ account.shortcode,
+ activeWallet?.is_virtual,
+ setModalState,
+ ]);
+
+ useEffect(() => {
+ if (showMt5PasswordModal) {
+ show(
+
+ );
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [showMt5PasswordModal]);
return (
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx
index 8b6ef7708732..c9756151deeb 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import { useActiveWalletAccount, useMT5AccountsList, useTradingPlatformStatus } from '@deriv/api-v2';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useModal } from '../../../../../../components/ModalProvider';
-import { ClientVerificationModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../../modals';
+import { JurisdictionModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../../modals';
import AvailableMT5AccountsList from '../AvailableMT5AccountsList';
jest.mock('@deriv/api-v2', () => ({
@@ -42,38 +42,16 @@ describe('AvailableMT5AccountsList', () => {
});
});
- const nonRegulatedAccount = {
+ const defaultAccount = {
market_type: 'synthetic',
platform: 'mt5',
product: 'swap_free',
shortcode: 'svg',
};
- const regulatedVerifiedAccount = {
- client_kyc_status: {
- poi_status: 'verified',
- valid_tin: 1,
- },
- market_type: 'synthetic',
- platform: 'mt5',
- product: 'swap_free',
- shortcode: 'svg',
- };
-
- const regulatedUnverifiedAccount = {
- client_kyc_status: {
- poi_status: 'none',
- valid_tin: 0,
- },
- market_type: 'synthetic',
- platform: 'mt5',
- product: 'financial',
- shortcode: 'bvi',
- };
-
it('renders default content for available mt5 account', () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
expect(screen.getByTestId('dt_wallets_trading_account_card')).toBeInTheDocument();
expect(screen.getByText('Standard')).toBeInTheDocument();
@@ -81,13 +59,14 @@ describe('AvailableMT5AccountsList', () => {
it('handles button click when platform status is active for real wallet account', () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
- // @ts-expect-error - since this is a mock, we only need partial properties of the account
- expect(mockShow).toHaveBeenCalledWith();
+ expect(mockShow).toHaveBeenCalledWith(
+
+ );
expect(mockSetModalState).toHaveBeenCalledWith('marketType', 'synthetic');
expect(mockSetModalState).toHaveBeenCalledWith('selectedJurisdiction', 'svg');
});
@@ -98,7 +77,7 @@ describe('AvailableMT5AccountsList', () => {
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
@@ -111,7 +90,7 @@ describe('AvailableMT5AccountsList', () => {
getPlatformStatus: jest.fn(() => 'unavailable'),
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
@@ -119,12 +98,25 @@ describe('AvailableMT5AccountsList', () => {
expect(mockShow).toHaveBeenCalledWith();
});
+ it('shows JurisdictionModal by default when account is undefined', () => {
+ (useActiveWalletAccount as jest.Mock).mockReturnValue({
+ data: undefined,
+ });
+ // @ts-expect-error - since this is a mock, we only need partial properties of the account
+ render();
+
+ const button = screen.getByTestId('dt_wallets_trading_account_card');
+ userEvent.click(button);
+
+ expect(mockShow).toHaveBeenCalledWith();
+ });
+
it('shows TradingPlatformStatusModal with isServerMaintenance when platform status is maintenance', () => {
(useTradingPlatformStatus as jest.Mock).mockReturnValue({
getPlatformStatus: jest.fn(() => 'maintenance'),
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
@@ -132,49 +124,70 @@ describe('AvailableMT5AccountsList', () => {
expect(mockShow).toHaveBeenCalledWith();
});
- it('shows MT5PasswordModal for non-regulated real accounts if client is verified', () => {
- (useActiveWalletAccount as jest.Mock).mockReturnValue({
- data: undefined,
- });
+ it('shows JurisdictionModal when product is neither swap-free nor zero-spread', () => {
+ const nonSwapAccount = { ...defaultAccount, product: 'ctrader' };
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
- // @ts-expect-error - since this is a mock, we only need partial properties of the account
- expect(mockShow).toHaveBeenCalledWith();
+ expect(mockShow).toHaveBeenCalledWith();
});
- it('shows ClientVerificationModal for regulated real accounts if client is unverified', () => {
- (useActiveWalletAccount as jest.Mock).mockReturnValue({
- data: {
- is_virtual: false,
- },
- });
+ it('shows ClientVerification when product is zero-spread', async () => {
+ const zeroSpreadAccount = { ...defaultAccount, product: 'zero_spread' };
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
+ expect(screen.getByText('NEW')).toBeInTheDocument();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
- // @ts-expect-error - since this is a mock, we only need partial properties of the account
- expect(mockShow).toHaveBeenCalledWith();
+ await waitFor(() => {
+ expect(mockShow).toHaveBeenCalled();
+ });
});
- it('shows MT5PasswordModal for demo accounts for verified clients', () => {
+ it('handles virtual wallet accounts correctly', () => {
(useActiveWalletAccount as jest.Mock).mockReturnValue({
- data: {
- is_virtual: true,
- },
+ data: { is_virtual: true },
});
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- render();
+ render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
userEvent.click(button);
+ expect(mockShow).toHaveBeenCalledWith(
+
+ );
+ });
+
+ it('shows MT5PasswordModal after ClientVerification completion', async () => {
+ const zeroSpreadAccount = { ...defaultAccount, product: 'zero_spread' };
// @ts-expect-error - since this is a mock, we only need partial properties of the account
- expect(mockShow).toHaveBeenCalledWith();
+ render();
+
+ const button = screen.getByTestId('dt_wallets_trading_account_card');
+ userEvent.click(button);
+
+ await waitFor(() => {
+ expect(mockShow).toHaveBeenCalled();
+ });
+
+ const lastCall = mockShow.mock.calls[mockShow.mock.calls.length - 1][0];
+ // eslint-disable-next-line testing-library/no-node-access
+ const { onCompletion } = lastCall.props.children.props; //required to access the function of lazy-loaded ClientVerification
+
+ act(() => {
+ onCompletion();
+ });
+
+ await waitFor(() => {
+ expect(mockShow).toHaveBeenCalledWith(
+
+ );
+ });
});
});
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.scss b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.scss
deleted file mode 100644
index 305e021bca3e..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.wallets-client-verification-modal {
- width: 100%;
- min-width: 44rem;
- height: 100%;
- padding: 2.4rem;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 2.4rem;
-
- &__description {
- max-width: 36rem;
-
- @include mobile-or-tablet-screen {
- max-width: 100%;
- }
- }
-
- @include mobile-or-tablet-screen {
- min-width: 100%;
- }
-}
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
deleted file mode 100644
index 856da8dee040..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { DerivLightUploadPoiIcon } from '@deriv/quill-icons';
-import { Localize, useTranslations } from '@deriv-com/translations';
-import { Text, useDevice } from '@deriv-com/ui';
-import { ModalStepWrapper } from '../../../../components';
-import { getMarketTypeDetails, MARKET_TYPE } from '../../constants';
-import { TModifiedMT5Account } from '../../types';
-import { DocumentsList } from './components';
-import './ClientVerificationModal.scss';
-
-type TClientVerificationModal = {
- account: TModifiedMT5Account;
-};
-
-const ClientVerificationModal: React.FC = ({ account }) => {
- const { localize } = useTranslations();
- const { isMobile } = useDevice();
- const { title } = getMarketTypeDetails(localize, account.product)[account.market_type || MARKET_TYPE.ALL];
-
- return (
-
-
-
-
- {account.is_added ? (
-
- ) : (
-
- )}
-
-
-
-
- );
-};
-
-export default ClientVerificationModal;
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss
deleted file mode 100644
index 264c1f00b394..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.wallets-documents-list {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1.6rem;
-}
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
deleted file mode 100644
index 44d2f2f4cf98..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { TModifiedMT5Account } from 'src/features/cfd/types';
-import { useTranslations } from '@deriv-com/translations';
-import { ClientVerificationStatusBadge } from '../../../../components';
-import { getClientVerification } from '../../../../utils';
-import { DocumentTile } from './components';
-import './DocumentsList.scss';
-
-type TDocumentsListProps = {
- account: TModifiedMT5Account;
-};
-
-type TStatusBadgeProps = Record;
-
-const statusBadge: TStatusBadgeProps = {
- expired: ,
- none: <>,
- pending: ,
- rejected: ,
- suspected: ,
- verified: ,
-};
-
-const DocumentsList: React.FC = ({ account }) => {
- const history = useHistory();
- const { localize } = useTranslations();
- const { hasPoaStatus, hasPoiStatus, hasTinStatus, isPoaRequired, isPoiRequired, isTinRequired, statuses } =
- getClientVerification(account);
-
- return (
-
- {hasPoiStatus && (
- history.push('/account/proof-of-identity')}
- title={localize('Proof of identity')}
- />
- )}
- {hasPoaStatus && (
- history.push('/account/proof-of-address')}
- title={localize('Proof of address')}
- />
- )}
- {hasTinStatus && isTinRequired && (
- history.push('/account/personal-details')}
- title={localize('Personal details')}
- />
- )}
-
- );
-};
-
-export default DocumentsList;
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/__tests__/DocumentsList.spec.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/__tests__/DocumentsList.spec.tsx
deleted file mode 100644
index cec52fd1c3f7..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/__tests__/DocumentsList.spec.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import DocumentsList from '../DocumentsList';
-
-const mockHistoryPush = jest.fn();
-
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useHistory: jest.fn(() => ({
- push: mockHistoryPush,
- })),
-}));
-
-jest.mock('../../../../../components', () => ({
- ...jest.requireActual('../../../../../components'),
- ClientVerificationStatusBadge: jest.fn(({ variant }) => variant),
-}));
-
-jest.mock('../components', () => ({
- ...jest.requireActual('../components'),
- DocumentTile: jest.fn(({ badge, isDisabled, onClick, title }) => (
-
- )),
-}));
-
-describe('', () => {
- it('poi tile is not rendered', () => {
- render(
-
- );
-
- expect(screen.queryByText('Proof of identity')).not.toBeInTheDocument();
- });
-
- it('poi tile is not rendered', () => {
- render(
-
- );
-
- expect(screen.queryByText('Proof of address')).not.toBeInTheDocument();
- });
-
- it('personal details tile is not rendered', () => {
- render(
-
- );
-
- expect(screen.queryByText('Personal details')).not.toBeInTheDocument();
- });
-
- it('on click poi tile redirects to correct page', async () => {
- render(
-
- );
-
- const poiTile = screen.getByText('Proof of identity');
- userEvent.click(poiTile);
-
- await waitFor(() => {
- expect(mockHistoryPush).toBeCalledWith('/account/proof-of-identity');
- });
- });
-
- it('on click poa tile redirects to correct page', async () => {
- render(
-
- );
-
- const poaTile = screen.getByText('Proof of address');
- userEvent.click(poaTile);
-
- await waitFor(() => {
- expect(mockHistoryPush).toBeCalledWith('/account/proof-of-address');
- });
- });
-
- it('on click personal details tile redirects to correct page', async () => {
- render(
-
- );
-
- const personalDetailsTile = screen.getByText('Personal details');
- userEvent.click(personalDetailsTile);
-
- await waitFor(() => {
- expect(mockHistoryPush).toBeCalledWith('/account/personal-details');
- });
- });
-
- it('renders poi tile with correct badge', () => {
- render(
-
- );
-
- const poiTile = screen.getByText('Proof of identity');
-
- expect(within(poiTile).getByText('verified')).toBeInTheDocument;
- });
-
- it('renders poa tile with correct badge', () => {
- render(
-
- );
-
- const poaTile = screen.getByText('Proof of address');
-
- expect(within(poaTile).getByText('verified')).toBeInTheDocument;
- });
-});
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss
deleted file mode 100644
index e1b8aab8fd48..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.wallets-document-tile {
- width: 100%;
- height: 5.6rem;
- padding-inline: 1.6rem;
- border: none;
- border-radius: 8px;
- background: #f6f7f8;
- display: flex;
- align-items: center;
- justify-content: space-between;
- cursor: pointer;
-
- &:disabled {
- cursor: not-allowed;
- }
-
- &__status {
- display: flex;
- align-items: center;
- gap: 0.8rem;
- }
-
- &__chevron {
- &--disabled {
- fill: #d6d6d6;
- }
- }
-}
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx
deleted file mode 100644
index 1a3395392faf..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
-import { Text } from '@deriv-com/ui';
-import './DocumentTile.scss';
-
-type TDocumentTileProps = {
- badge?: JSX.Element;
- disabled?: boolean;
- onClick: VoidFunction;
- title: string;
-};
-
-const DocumentTile: React.FC = ({ badge, disabled, onClick, title }) => {
- return (
-
- );
-};
-
-export default DocumentTile;
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/index.ts
deleted file mode 100644
index e6b33e8515a5..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DocumentTile } from './DocumentTile';
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts
deleted file mode 100644
index 76c67643d998..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './DocumentTile';
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts
deleted file mode 100644
index d23ca16a13b6..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DocumentsList } from './DocumentsList';
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts
deleted file mode 100644
index a711e93c8860..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './DocumentsList';
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/index.ts
deleted file mode 100644
index 7625bdeff6b4..000000000000
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ClientVerificationModal } from './ClientVerificationModal';
diff --git a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
index 1698de810892..e32bbbd5f544 100644
--- a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
@@ -5,8 +5,10 @@ import { Button, Loader, useDevice } from '@deriv-com/ui';
import { ModalStepWrapper } from '../../../../components/Base';
import { useModal } from '../../../../components/ModalProvider';
import { DynamicLeverageContext } from '../../components/DynamicLeverageContext';
+import { PlatformDetails } from '../../constants';
import { DynamicLeverageScreen, DynamicLeverageTitle } from '../../screens/DynamicLeverage';
import { JurisdictionScreen } from '../../screens/Jurisdiction';
+import { MT5PasswordModal } from '..';
import './JurisdictionModal.scss';
const LazyVerification = lazy(
@@ -21,19 +23,32 @@ const JurisdictionModal = () => {
const [isDynamicLeverageVisible, setIsDynamicLeverageVisible] = useState(false);
const [isCheckBoxChecked, setIsCheckBoxChecked] = useState(false);
- const { setModalState, show } = useModal();
+ const { getModalState, setModalState, show } = useModal();
const { isLoading } = useAvailableMT5Accounts();
const { isDesktop } = useDevice();
const { localize } = useTranslations();
+ const marketType = getModalState('marketType') ?? 'all';
+ const platform = getModalState('platform') ?? PlatformDetails.mt5.platform;
+
const toggleDynamicLeverage = useCallback(() => {
setIsDynamicLeverageVisible(!isDynamicLeverageVisible);
}, [isDynamicLeverageVisible, setIsDynamicLeverageVisible]);
const JurisdictionFlow = () => {
+ const [showMt5PasswordModal, setShowMt5PasswordModal] = useState(false);
+ if (selectedJurisdiction === 'svg' || showMt5PasswordModal) {
+ return ;
+ }
+
return (
}>
-
+ {
+ setShowMt5PasswordModal(true);
+ }}
+ selectedJurisdiction={selectedJurisdiction}
+ />
);
};
diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
index 2552375f2083..076b42a78b02 100644
--- a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
@@ -31,8 +31,8 @@ const MT5AccountAdded: FC = ({ account, marketType, platform, product })
const history = useHistory();
const { isDesktop } = useDevice();
- const { localize } = useTranslations();
const { getModalState, hide } = useModal();
+ const { localize } = useTranslations();
const addedAccount = mt5Accounts?.find(acc => acc.login === account?.login);
@@ -97,7 +97,7 @@ const MT5AccountAdded: FC = ({ account, marketType, platform, product })
);
},
- [hide, buttonSize, history, addedAccount?.loginid]
+ [hide, isDesktop, history, addedAccount?.loginid]
);
const renderSuccessDescription = useMemo(() => {
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index 25cdb52233fd..1624b1d04d7d 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -1,6 +1,7 @@
import React, { useCallback, useMemo, useState } from 'react';
import {
useAccountStatus,
+ useActiveWalletAccount,
useAvailableMT5Accounts,
useCreateMT5Account,
useMT5AccountsList,
@@ -9,23 +10,25 @@ import {
useVerifyEmail,
} from '@deriv/api-v2';
import { Localize, useTranslations } from '@deriv-com/translations';
-import { Button, Loader, useDevice } from '@deriv-com/ui';
+import { Button, useDevice, Loader } from '@deriv-com/ui';
import { SentEmailContent, WalletError } from '../../../../components';
import { ModalStepWrapper, ModalWrapper } from '../../../../components/Base';
import { useModal } from '../../../../components/ModalProvider';
+import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
-import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails } from '../../constants';
+import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails, PRODUCT } from '../../constants';
import { CreatePassword, CreatePasswordMT5, EnterPassword, MT5ResetPasswordModal } from '../../screens';
-import { TAvailableMT5Account } from '../../types';
import MT5AccountAdded from '../MT5AccountAdded/MT5AccountAdded';
import { PasswordLimitExceededModal } from '../PasswordLimitExceededModal';
import { MT5PasswordModalFooter, SuccessModalFooter } from './MT5PasswordModalFooters';
import './MT5PasswordModal.scss';
type TProps = {
- account: TAvailableMT5Account;
isVirtual?: boolean;
+ marketType: TMarketTypes.SortedMT5Accounts;
+ platform: TPlatforms.All;
+ product?: THooks.AvailableMT5Accounts['product'];
};
export type TPlatformPasswordChange = {
@@ -33,11 +36,8 @@ export type TPlatformPasswordChange = {
newPassword: string;
};
-const MT5PasswordModal: React.FC
= ({ account, isVirtual = false }) => {
- const [isTncChecked, setIsTncChecked] = useState(
- // tnc is automatically checked for real SVG accounts and all demo accounts
- (account as TAvailableMT5Account).shortcode === JURISDICTION.SVG || isVirtual
- );
+const MT5PasswordModal: React.FC = ({ isVirtual, marketType, platform, product }) => {
+ const [isTncChecked, setIsTncChecked] = useState(!(product === PRODUCT.ZEROSPREAD && !isVirtual));
const {
data: createMT5AccountData,
error: createMT5AccountError,
@@ -52,6 +52,7 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
mutateAsync: tradingPasswordChangeMutateAsync,
} = useTradingPlatformPasswordChange();
const { data: accountStatusData, isLoading: accountStatusLoading } = useAccountStatus();
+ const { data: activeWalletData } = useActiveWalletAccount();
const { data: availableMT5AccountsData } = useAvailableMT5Accounts();
const {
error: emailVerificationError,
@@ -68,14 +69,11 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
const [password, setPassword] = useState('');
- const marketType = account.market_type ?? 'synthetic';
- const platform = account.platform;
- const product = account.product;
-
const isMT5PasswordNotSet = accountStatusData?.is_mt5_password_not_set;
const hasMT5Account = mt5AccountsData?.find(account => account.login);
+ const isDemo = activeWalletData?.is_virtual;
const { platform: mt5Platform, title: mt5Title } = PlatformDetails.mt5;
- const selectedJurisdiction = isVirtual ? JURISDICTION.SVG : getModalState('selectedJurisdiction');
+ const selectedJurisdiction = isDemo ? JURISDICTION.SVG : getModalState('selectedJurisdiction');
const isLoading = accountStatusLoading || createMT5AccountLoading || tradingPlatformPasswordChangeLoading;
@@ -91,7 +89,7 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
// =================================
const accountType = marketType === MARKET_TYPE.SYNTHETIC ? 'gaming' : marketType;
- const categoryAccountType = isVirtual ? 'demo' : accountType;
+ const categoryAccountType = isDemo ? 'demo' : accountType;
if (isMT5PasswordNotSet) {
await tradingPasswordChangeMutateAsync({
@@ -109,7 +107,7 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
email: settingsData?.email ?? '',
leverage: availableMT5AccountsData?.find(acc => acc.market_type === marketType)?.leverage ?? 500,
mainPassword: password,
- ...(selectedJurisdiction && !isVirtual ? { company: selectedJurisdiction } : {}),
+ ...(selectedJurisdiction && !isDemo ? { company: selectedJurisdiction } : {}),
...(marketType === MARKET_TYPE.FINANCIAL && { mt5_account_type: MARKET_TYPE.FINANCIAL }),
...(selectedJurisdiction &&
(selectedJurisdiction !== JURISDICTION.LABUAN
@@ -133,7 +131,7 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
}, [
availableMT5AccountsData,
createMT5AccountMutate,
- isVirtual,
+ isDemo,
isMT5PasswordNotSet,
marketType,
mt5Platform,
@@ -156,12 +154,12 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
emailVerificationMutate({
type: 'trading_platform_mt5_password_reset',
url_parameters: {
- redirect_to: platformPasswordResetRedirectLink(CFD_PLATFORMS.MT5, isVirtual),
+ redirect_to: platformPasswordResetRedirectLink(CFD_PLATFORMS.MT5, activeWalletData?.is_virtual),
},
verify_email: email,
});
}
- }, [email, emailVerificationMutate, isVirtual]);
+ }, [activeWalletData?.is_virtual, email, emailVerificationMutate]);
const onSubmitPasswordChange = useCallback(
({ currentPassword, newPassword }: TPlatformPasswordChange) => {
@@ -177,7 +175,7 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
const renderTitle = useCallback(() => {
const accountAction = hasMT5Account ? localize('Add') : localize('Create');
- const accountType = isVirtual ? localize('demo') : localize('real');
+ const accountType = isDemo ? localize('demo') : localize('real');
return updateMT5Password
? localize('{{mt5Title}} latest password requirements', { mt5Title })
@@ -186,13 +184,13 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
accountType,
mt5Title,
});
- }, [hasMT5Account, isVirtual, localize, mt5Title, updateMT5Password]);
+ }, [hasMT5Account, isDemo, localize, mt5Title, updateMT5Password]);
const renderFooter = useCallback(() => {
if (createMT5AccountSuccess)
return (
-
+
);
@@ -237,7 +235,7 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
}, [
createMT5AccountLoading,
createMT5AccountSuccess,
- isVirtual,
+ isDemo,
isDesktop,
isMT5PasswordNotSet,
mt5Title,
@@ -265,7 +263,6 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
if (isMT5PasswordNotSet && platform === CFD_PLATFORMS.MT5)
return (
= ({ account, isVirtual = false }) => {
}}
password={password}
platform={mt5Platform}
+ product={product}
/>
);
@@ -291,10 +289,9 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
return (
setPassword(e.target.value)}
@@ -310,18 +307,18 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
);
}, [
isMT5PasswordNotSet,
- platform,
tradingPlatformPasswordChangeLoading,
createMT5AccountLoading,
+ isTncChecked,
onSubmit,
password,
mt5Platform,
- account,
- isTncChecked,
- isVirtual,
- product,
updateMT5Password,
tradingPasswordChangeError,
+ platform,
+ isVirtual,
+ product,
+ activeWalletData?.is_virtual,
onSubmitPasswordChange,
marketType,
localize,
@@ -331,10 +328,6 @@ const MT5PasswordModal: React.FC = ({ account, isVirtual = false }) => {
isLoading,
]);
- if (accountStatusLoading) {
- return ;
- }
-
if (emailVerificationStatus === 'error') {
return (
= ({ account, isVirtual = false }) => {
);
}
- if (createMT5AccountSuccess) {
+ if (createMT5AccountSuccess && !isMT5PasswordNotSet) {
return (
void;
password: string;
platform: TPlatforms.All;
+ product?: THooks.AvailableMT5Accounts['product'];
};
const CreatePasswordMT5: React.FC = ({
- account,
isLoading,
isTncChecked,
isVirtual,
@@ -32,6 +30,7 @@ const CreatePasswordMT5: React.FC = ({
onTncChange,
password,
platform,
+ product,
}) => {
const { isDesktop } = useDevice();
const { localize } = useTranslations();
@@ -62,9 +61,13 @@ const CreatePasswordMT5: React.FC = ({
onChange={onPasswordChange}
password={password}
/>
- {!isVirtual && }
- {!isVirtual && account.shortcode !== 'svg' && (
-
+ {product === PRODUCT.ZEROSPREAD && !isVirtual && (
+
)}