diff --git a/packages/account/src/Components/poi/poi-confirm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx b/packages/account/src/Components/poi/poi-confirm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx
index 4d348f3d1379..916e0dbb127b 100644
--- a/packages/account/src/Components/poi/poi-confirm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx
+++ b/packages/account/src/Components/poi/poi-confirm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx
@@ -66,7 +66,7 @@ describe('', () => {
expect(checkbox_el.checked).toBeFalsy();
const input_fields: HTMLInputElement[] = screen.getAllByRole('textbox');
- expect(input_fields.length).toBe(3);
+ expect(input_fields).toHaveLength(3);
expect(input_fields[0].name).toBe('first_name');
expect(input_fields[1].name).toBe('last_name');
expect(input_fields[2].name).toBe('date_of_birth');
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
index 3bceeb2e915c..bde11fa3c7e5 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
@@ -5,6 +5,7 @@ import AccountTransferForm from '../account-transfer-form';
import CashierProviders from '../../../../cashier-providers';
import { mockStore } from '@deriv/stores';
import { TError } from '../../../../types';
+import { useIsMt5LoginListStatusPresent } from '@deriv/hooks';
jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
@@ -13,6 +14,14 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
let mockRootStore: ReturnType;
+jest.mock('@deriv/hooks', () => ({
+ ...jest.requireActual('@deriv/hooks'),
+ useIsMt5LoginListStatusPresent: jest.fn(() => false),
+}));
+const mockedUseIsMt5LoginListStatusPresent = useIsMt5LoginListStatusPresent as jest.MockedFunction<
+ typeof useIsMt5LoginListStatusPresent
+>;
+
jest.mock('Assets/svgs/trading-platform', () =>
jest.fn(props => TradingPlatformIcon
)
);
@@ -279,31 +288,18 @@ describe('', () => {
expect(screen.getByText('You have 1 transfer remaining for today.')).toBeInTheDocument();
});
- it('should show proper hint when transferring amount to a migrated svg account', () => {
- mockRootStore.client.account_limits = {
- daily_transfers: {
- dxtrade: {},
- internal: {
- available: 1,
- },
- mt5: {},
- },
- };
- mockRootStore.client.mt5_login_list = [
- {
- account_type: 'real',
- balance: 1233,
- currency: 'USD',
- display_balance: '1233.00',
- login: 'TEST_LOGIN_ID',
- open_order_position_status: true,
- },
- ];
- mockRootStore.modules.cashier.account_transfer.selected_to.value = 'TEST_LOGIN_ID';
-
+ it('should display no new positions can be opened when transferring amount to a migrated svg account', () => {
+ mockedUseIsMt5LoginListStatusPresent.mockReturnValue(true);
renderAccountTransferForm();
+ expect(screen.getByText(/You can no longer open new positions with this account./i)).toBeInTheDocument();
+ expect(screen.queryByText(/You have 0 transfer remaining for today./i)).not.toBeInTheDocument();
+ });
- expect(screen.getByText('You can no longer open new positions with this account.')).toBeInTheDocument();
+ it('should display the number of transfers remaining when transferring amount to a non migrated svg accounts', () => {
+ mockedUseIsMt5LoginListStatusPresent.mockReturnValue(false);
+ renderAccountTransferForm();
+ expect(screen.getByText(/You have 0 transfer remaining for today./i)).toBeInTheDocument();
+ expect(screen.queryByText(/You can no longer open new positions with this account./i)).not.toBeInTheDocument();
});
describe('', () => {
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
index e62cfca87d96..2a9ffd70431a 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
@@ -3,6 +3,7 @@ import React from 'react';
import { Link, useHistory } from 'react-router-dom';
import { Field, FieldProps, Formik, Form } from 'formik';
import { Button, Dropdown, InlineMessage, Input, Loading, Money, Text } from '@deriv/components';
+import { useIsMt5LoginListStatusPresent } from '@deriv/hooks';
import {
getDecimalPlaces,
getCurrencyDisplayCode,
@@ -87,13 +88,7 @@ const AccountTransferForm = observer(
} = useStore();
const { is_mobile } = ui;
- const {
- account_limits,
- authentication_status,
- is_dxtrade_allowed,
- getLimits: onMount,
- mt5_login_list,
- } = client;
+ const { account_limits, authentication_status, is_dxtrade_allowed, getLimits: onMount } = client;
const { account_transfer, crypto_fiat_converter, general_store } = useCashierStore();
const {
@@ -125,6 +120,9 @@ const AccountTransferForm = observer(
resetConverter,
} = crypto_fiat_converter;
+ // TODO: Replace 'login' with 'open_order_position_status' once the flag is available in the BE response and in type TSocketResponseData<"mt5_login_list">
+ const is_open_order_position_status_present = useIsMt5LoginListStatusPresent('login', selected_to.value ?? '');
+
const [from_accounts, setFromAccounts] = React.useState({});
const [to_accounts, setToAccounts] = React.useState({});
const [transfer_to_hint, setTransferToHint] = React.useState();
@@ -346,8 +344,7 @@ const AccountTransferForm = observer(
};
let hint_text;
- // flag 'open_order_position_status' does not exist in mt5_login_list, @deriv/api-types yet
- if (mt5_login_list.find(account => account?.login === selected_to.value)?.open_order_position_status) {
+ if (is_open_order_position_status_present) {
hint_text = ;
} else {
remaining_transfers = getRemainingTransfers() ?? 0;
@@ -361,7 +358,7 @@ const AccountTransferForm = observer(
}
setTransferToHint(hint_text);
resetConverter();
- }, [account_limits, selected_from, selected_to, mt5_login_list]); // eslint-disable-line react-hooks/exhaustive-deps
+ }, [account_limits, is_open_order_position_status_present, selected_from, selected_to]); // eslint-disable-line react-hooks/exhaustive-deps
const is_mt5_restricted =
selected_from?.is_mt &&
diff --git a/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx b/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx
new file mode 100644
index 000000000000..568ce95ded52
--- /dev/null
+++ b/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx
@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useIsMt5LoginListStatusPresent from '../useIsMt5LoginListStatusPresent';
+
+const mock_login_id = 'MOCK_LOGIN_ID';
+jest.mock('@deriv/api', () => ({
+ ...jest.requireActual('@deriv/api'),
+ useMT5AccountsList: jest.fn(() => ({
+ data: [{ login: mock_login_id, landing_company_short: 'MOCK_LANDING_COMPANY_SHORT_CODE' }],
+ })),
+}));
+
+describe('useIsMt5LoginListStatusPresent', () => {
+ it('should return true when the given status is present for the given login id', () => {
+ const { result } = renderHook(() => useIsMt5LoginListStatusPresent('landing_company_short', mock_login_id));
+ expect(result.current).toBeTruthy();
+ });
+
+ it('should return false when the given status is not present for the given login id', () => {
+ const { result } = renderHook(() => useIsMt5LoginListStatusPresent('balance', mock_login_id));
+ expect(result.current).toBeFalsy();
+ });
+
+ it('should return false when the given login id is empty', () => {
+ const { result } = renderHook(() => useIsMt5LoginListStatusPresent('account_type', ''));
+ expect(result.current).toBeFalsy();
+ });
+});
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 4b22cbce43d4..f2d031e41d85 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -49,4 +49,5 @@ export { default as useVerifyEmail } from './useVerifyEmail';
export { useIsAccountStatusPresent } from './useIsAccountStatusPresent';
export { default as useP2PConfig } from './useP2PConfig';
export { default as useIsClientHighRiskForMT5 } from './useIsClientHighRiskForMT5';
+export { default as useIsMt5LoginListStatusPresent } from './useIsMt5LoginListStatusPresent';
export { default as useCFDCanGetMoreMT5Accounts } from './useCFDCanGetMoreMT5Accounts';
diff --git a/packages/hooks/src/useIsMt5LoginListStatusPresent.ts b/packages/hooks/src/useIsMt5LoginListStatusPresent.ts
new file mode 100644
index 000000000000..3100787a283b
--- /dev/null
+++ b/packages/hooks/src/useIsMt5LoginListStatusPresent.ts
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useMT5AccountsList } from '@deriv/api';
+import { useStore } from '@deriv/stores';
+
+// TODO: Remove this todo once 'open_order_position_status' flag is available in BE response and in type TSocketResponseData<"mt5_login_list">
+type DetailsOfEachMT5LoginId = ReturnType['client']['mt5_login_list'][number];
+type TStatus = keyof DetailsOfEachMT5LoginId;
+
+/**
+ * A custom hook to check if the given status flag is present in the mt5_login_list of given account login id
+ */
+const useIsMt5LoginListStatusPresent = (status: TStatus, account_login_id: string) => {
+ const { data: mt5_login_list } = useMT5AccountsList();
+
+ return React.useMemo(
+ () => !!mt5_login_list?.find(account => account?.login === account_login_id)?.[status],
+ [account_login_id, mt5_login_list, status]
+ );
+};
+
+export default useIsMt5LoginListStatusPresent;