Merge pull request #67 from shaheer-deriv/shaheer/WALL-1892

feat: 🪝 added hook for checking the presence of given status in mt5_login_list

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('<PoiConfirmWithExampleFormContainer/>', () => {
         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');

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<typeof mockStore>;
 
+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 => <div data-testid={props.icon}>TradingPlatformIcon</div>)
 );
@@ -279,31 +288,18 @@ describe('<AccountTransferForm />', () => {
         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('<Dropdown />', () => {

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<JSX.Element>();
@@ -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 = <Localize i18n_default_text='You can no longer open new positions with this account.' />;
             } 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 &&

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();
+    });
+});

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';

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<typeof useStore>['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;