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;