fix: updated hook with recent changes and respective files

packages/api/types.ts

@@ -1848,5 +1848,4 @@ interface ExtendedDetailsOfEachMT5Loginid {
     sub_account_type?: 'standard' | 'financial' | 'financial_stp' | 'swap_free';
     webtrader_url?: string;
     eligible_to_migrate?: TEligibleToMigrate;
-    open_order_position_status?: number;
 }

packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { APIProvider } from '@deriv/api';
-import { useIsMt5LoginListStatusPresent } from '@deriv/hooks';
+import { useGetMt5LoginListStatus } from '@deriv/hooks';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import TradingAppCard from '../trading-app-card';
 
@@ -17,15 +17,13 @@ jest.mock('@deriv/account', () => ({
 jest.mock('@deriv/hooks', () => ({
     ...jest.requireActual('@deriv/hooks'),
     useMT5SVGEligibleToMigrate: jest.fn(() => ({ eligible_account_to_migrate_label: 'BVI' })),
-    useIsMt5LoginListStatusPresent: jest.fn(() => ({
+    useGetMt5LoginListStatus: jest.fn(() => ({
         is_flag_present: true,
         flag_value: 1,
     })),
 }));
 
-const mockUseIsMt5LoginListStatusPresent = useIsMt5LoginListStatusPresent as jest.MockedFunction<
-    typeof useIsMt5LoginListStatusPresent
->;
+const mockUseGetMt5LoginListStatus = useGetMt5LoginListStatus as jest.MockedFunction<typeof useGetMt5LoginListStatus>;
 
 describe('<TradingAppCard/>', () => {
     let modal_root_el: HTMLDivElement;
@@ -93,7 +91,7 @@ describe('<TradingAppCard/>', () => {
     });
 
     it('should render correct status badge if open_order_position_status key is present in BE response and the value is false', () => {
-        mockUseIsMt5LoginListStatusPresent.mockReturnValueOnce({
+        mockUseGetMt5LoginListStatus.mockReturnValueOnce({
             is_flag_present: true,
             flag_value: 0,
         });
@@ -130,7 +128,7 @@ describe('<TradingAppCard/>', () => {
     });
 
     it('should not render status badge if open_order_position_status key is not present in BE response', () => {
-        mockUseIsMt5LoginListStatusPresent.mockReturnValueOnce({
+        mockUseGetMt5LoginListStatus.mockReturnValueOnce({
             is_flag_present: false,
             flag_value: undefined,
         });

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -12,9 +12,16 @@ import {
 } from 'Constants/platform-config';
 import TradingAppCardActions, { Actions } from './trading-app-card-actions';
 import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
-import { useActiveWallet, useIsMt5LoginListStatusPresent } from '@deriv/hooks';
+import { useActiveWallet, useGetMt5LoginListStatus } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
-import { CFD_PLATFORMS, ContentFlag, getStaticUrl, getUrlSmartTrader, getUrlBinaryBot } from '@deriv/shared';
+import {
+    CFD_PLATFORMS,
+    ContentFlag,
+    getStaticUrl,
+    getUrlSmartTrader,
+    getUrlBinaryBot,
+    MT5LoginlistStatus,
+} from '@deriv/shared';
 import OpenPositionsSVGModal from '../modals/open-positions-svg-modal';
 import './trading-app-card.scss';
 
@@ -51,8 +58,7 @@ const TradingAppCard = ({
     const { current_language } = common;
     const { is_account_being_created } = cfd;
 
-    const { is_flag_present: is_open_order_position_status_present, flag_value: open_order_position_status } =
-        useIsMt5LoginListStatusPresent('open_order_position_status', login ?? '');
+    const { status: banner_status } = useGetMt5LoginListStatus(login ?? '');
     const demo_label = localize('Demo');
     const is_real_account = wallet_account ? !wallet_account.is_virtual : is_real;
 
@@ -112,7 +118,8 @@ const TradingAppCard = ({
     };
 
     const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false);
-    const status_text = open_order_position_status ? 'No new positions' : 'Account closed';
+    const is_open_order_position = banner_status === MT5LoginlistStatus.MIGRATED_WITH_POSITION;
+    const is_account_closed = banner_status === MT5LoginlistStatus.MIGRATED_WITHOUT_POSITION;
 
     return (
         <div className='trading-app-card' key={`trading-app-card__${current_language}`}>
@@ -160,7 +167,23 @@ const TradingAppCard = ({
                             text={badge_text}
                         />
                     )}
-                    {is_open_order_position_status_present && (
+                    {is_open_order_position && (
+                        <StatusBadge
+                            className='trading-app-card__acc_status_badge'
+                            onClick={() => {
+                                setIsOpenPositionSvgModalOpen(!is_open_position_svg_modal_open);
+                            }}
+                            account_status='open-order-position'
+                            icon='IcAlertWarning'
+                            text={
+                                <Localize
+                                    i18n_default_text='<0>No new positions</0>'
+                                    components={[<Text key={0} weight='bold' size='xxxs' color='warning' />]}
+                                />
+                            }
+                        />
+                    )}
+                    {is_account_closed && (
                         <StatusBadge
                             className='trading-app-card__acc_status_badge'
                             onClick={() => {
@@ -170,8 +193,7 @@ const TradingAppCard = ({
                             icon='IcAlertWarning'
                             text={
                                 <Localize
-                                    i18n_default_text='<0>{{status_text}}</0>'
-                                    values={{ status_text }}
+                                    i18n_default_text='<0>Account closed</0>'
                                     components={[<Text key={0} weight='bold' size='xxxs' color='warning' />]}
                                 />
                             }
@@ -180,7 +202,8 @@ const TradingAppCard = ({
                     {is_open_position_svg_modal_open && (
                         <OpenPositionsSVGModal
                             market_type={market_type}
-                            open_order_position_status={!!open_order_position_status}
+                            is_open_order_position={is_open_order_position}
+                            is_account_closed={is_account_closed}
                             is_modal_open={is_open_position_svg_modal_open}
                             setModalOpen={setIsOpenPositionSvgModalOpen}
                         />

packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx

@@ -13,19 +13,20 @@ import { Localize } from '@deriv/translations';
 
 type TOpenPositionsSVGModal = {
     market_type: string;
-    open_order_position_status: boolean | undefined;
+    is_open_order_position: boolean;
+    is_account_closed: boolean;
     is_modal_open: boolean;
     setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const OpenPositionsSVGModal = ({
     market_type,
-    open_order_position_status,
+    is_open_order_position,
+    is_account_closed,
     is_modal_open,
     setModalOpen,
 }: TOpenPositionsSVGModal) => {
     const { eligible_account_to_migrate_label } = useMT5SVGEligibleToMigrate();
-    const title = open_order_position_status ? 'No new positions' : 'Account closed';
     const account_type =
         market_type === JURISDICTION_MARKET_TYPES.FINANCIAL
             ? getFormattedJurisdictionMarketTypes(JURISDICTION_MARKET_TYPES.FINANCIAL)
@@ -45,15 +46,17 @@ const OpenPositionsSVGModal = ({
         >
             <Modal.Body>
                 <Text as='h1' color='prominent' weight='bold' className='open-positions-svg__modal-title'>
-                    <Localize i18n_default_text='{{title}}' values={{ title }} />
+                    {is_open_order_position && <Localize i18n_default_text='No new positions' />}
+                    {is_account_closed && <Localize i18n_default_text='Account closed' />}
                 </Text>
                 <Text as='p' color='prominent ' size='xs'>
-                    {open_order_position_status ? (
+                    {is_open_order_position && (
                         <Localize
                             i18n_default_text='You can no longer open new positions with your {{cfd_platform}} {{account_type}} {{from_account}} account. Please use your {{cfd_platform}} {{account_type}} {{eligible_account_to_migrate_label}} account to open new positions.'
                             values={{ account_type, from_account, eligible_account_to_migrate_label, cfd_platform }}
                         />
-                    ) : (
+                    )}
+                    {is_account_closed && (
                         <Localize
                             i18n_default_text='Your {{cfd_platform}} {{account_type}} {{from_account}} account will be archived after 30 days of inactivity. You can still access your trade history until the account is archived.'
                             values={{ account_type, from_account, cfd_platform }}

packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx

@@ -5,7 +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';
+import { useGetMt5LoginListStatus } from '@deriv/hooks';
 
 jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
     ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
@@ -18,9 +18,7 @@ jest.mock('@deriv/hooks', () => ({
     ...jest.requireActual('@deriv/hooks'),
     useIsMt5LoginListStatusPresent: jest.fn(() => ({ is_flag_present: false, flag_value: undefined })),
 }));
-const mockedUseIsMt5LoginListStatusPresent = useIsMt5LoginListStatusPresent as jest.MockedFunction<
-    typeof useIsMt5LoginListStatusPresent
->;
+const mockedUseGetMt5LoginListStatus = useGetMt5LoginListStatus as jest.MockedFunction<typeof useGetMt5LoginListStatus>;
 
 jest.mock('Assets/svgs/trading-platform', () =>
     jest.fn(props => <div data-testid={props.icon}>TradingPlatformIcon</div>)
@@ -289,14 +287,14 @@ describe('<AccountTransferForm />', () => {
     });
 
     it('should display no new positions can be opened when transferring amount to a migrated svg account', () => {
-        mockedUseIsMt5LoginListStatusPresent.mockReturnValue({ is_flag_present: true, flag_value: 1 });
+        mockedUseGetMt5LoginListStatus.mockReturnValue({ is_flag_present: true, flag_value: 1 });
         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();
     });
 
     it('should display the number of transfers remaining when transferring amount to a non migrated svg accounts', () => {
-        mockedUseIsMt5LoginListStatusPresent.mockReturnValue({ is_flag_present: false, flag_value: undefined });
+        mockedUseGetMt5LoginListStatus.mockReturnValue({ is_flag_present: false, flag_value: undefined });
         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();

packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx

@@ -3,13 +3,14 @@ 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 { useGetMt5LoginListStatus } from '@deriv/hooks';
 import {
     getDecimalPlaces,
     getCurrencyDisplayCode,
     getCurrencyName,
     getPlatformSettings,
     validNumber,
+    MT5LoginlistStatus,
     routes,
 } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
@@ -121,10 +122,10 @@ const AccountTransferForm = observer(
             resetConverter,
         } = crypto_fiat_converter;
 
-        const { is_flag_present: is_open_order_position_status_present } = useIsMt5LoginListStatusPresent(
-            'open_order_position_status',
-            selected_to.value ?? ''
-        );
+        const { status } = useGetMt5LoginListStatus(selected_to.value ?? '');
+        const is_open_order_position_status_present =
+            status === MT5LoginlistStatus.MIGRATED_WITH_POSITION ||
+            status === MT5LoginlistStatus.MIGRATED_WITHOUT_POSITION;
 
         const [from_accounts, setFromAccounts] = React.useState({});
         const [to_accounts, setToAccounts] = React.useState({});

packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { APIProvider } from '@deriv/api';
-import { useIsMt5LoginListStatusPresent } from '@deriv/hooks';
+import { useGetMt5LoginListStatus } from '@deriv/hooks';
 import DMT5TradeModal from '../dmt5-trade-modal';
 
 jest.mock('@deriv/components', () => ({
@@ -18,15 +18,13 @@ jest.mock('../../Assets/svgs/trading-platform', () => jest.fn(() => 'MockTrading
 
 jest.mock('@deriv/hooks', () => ({
     ...jest.requireActual('@deriv/hooks'),
-    useIsMt5LoginListStatusPresent: jest.fn(() => ({
+    useGetMt5LoginListStatus: jest.fn(() => ({
         is_flag_present: true,
         flag_value: true,
     })),
 }));
 
-const mockUseIsMt5LoginListStatusPresent = useIsMt5LoginListStatusPresent as jest.MockedFunction<
-    typeof useIsMt5LoginListStatusPresent
->;
+const mockUseGetMt5LoginListStatus = useGetMt5LoginListStatus as jest.MockedFunction<typeof useGetMt5LoginListStatus>;
 
 describe('<DMT5TradeModal/>', () => {
     const mock_props: React.ComponentProps<typeof DMT5TradeModal> = {
@@ -89,7 +87,7 @@ describe('<DMT5TradeModal/>', () => {
     });
 
     it('should render correct status badge if open_order_position_status is present in BE response and the key value is false', () => {
-        mockUseIsMt5LoginListStatusPresent.mockReturnValue({
+        mockUseGetMt5LoginListStatus.mockReturnValue({
             is_flag_present: true,
             flag_value: false,
         });
@@ -100,7 +98,7 @@ describe('<DMT5TradeModal/>', () => {
     });
 
     it('should not render status badge if open_order_position_status is not present in BE response', () => {
-        mockUseIsMt5LoginListStatusPresent.mockReturnValue({
+        mockUseGetMt5LoginListStatus.mockReturnValue({
             is_flag_present: false,
             flag_value: undefined,
         });

packages/cfd/src/Containers/dmt5-trade-modal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, Icon, Money, StatusBadge } from '@deriv/components';
-import { useIsMt5LoginListStatusPresent } from '@deriv/hooks';
+import { useGetMt5LoginListStatus } from '@deriv/hooks';
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
 import {
     CFD_PLATFORMS,
@@ -10,6 +10,7 @@ import {
     getPlatformSettings,
     getUrlBase,
     isMobile,
+    MT5LoginlistStatus,
 } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { getPlatformMt5DownloadLink } from '../Helpers/constants';
@@ -74,9 +75,9 @@ const DMT5TradeModal = ({
         return 'Financial';
     };
 
-    const { is_flag_present: is_open_order_position_status_present, flag_value: open_order_position_status } =
-        useIsMt5LoginListStatusPresent('open_order_position_status', mt5_trade_account?.login ?? '');
-    const status_text = open_order_position_status ? 'No new positions' : 'Account closed';
+    const { status: banner_status } = useGetMt5LoginListStatus(mt5_trade_account?.login ?? '');
+    const is_open_order_position = banner_status === MT5LoginlistStatus.MIGRATED_WITH_POSITION;
+    const is_account_closed = banner_status === MT5LoginlistStatus.MIGRATED_WITHOUT_POSITION;
 
     return (
         <div className='cfd-trade-modal-container'>
@@ -103,15 +104,27 @@ const DMT5TradeModal = ({
                             />
                         </Text>
                     )}
-                    {is_open_order_position_status_present && (
+                    {is_open_order_position && (
                         <StatusBadge
-                            className='cfd-trade-modal__acc_status_badge'
+                            className='trading-app-card__acc_status_badge'
                             account_status='open-order-position'
                             icon='IcAlertWarning'
                             text={
                                 <Localize
-                                    i18n_default_text='<0>{{status_text}}</0>'
-                                    values={{ status_text }}
+                                    i18n_default_text='<0>No new positions</0>'
+                                    components={[<Text key={0} weight='bold' size='xxxs' color='warning' />]}
+                                />
+                            }
+                        />
+                    )}
+                    {is_account_closed && (
+                        <StatusBadge
+                            className='trading-app-card__acc_status_badge'
+                            account_status='open-order-position'
+                            icon='IcAlertWarning'
+                            text={
+                                <Localize
+                                    i18n_default_text='<0>Account closed</0>'
                                     components={[<Text key={0} weight='bold' size='xxxs' color='warning' />]}
                                 />
                             }

packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx → packages/hooks/src/__tests__/useGetMt5LoginListStatus.spec.tsx

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import useIsMt5LoginListStatusPresent from '../useIsMt5LoginListStatusPresent';
+import useGetMt5LoginListStatus from '../useGetMt5LoginListStatus';
 
 const mock_login_id = 'MOCK_LOGIN_ID';
 const mock_landing_company_short_code = 'MOCK_LANDING_COMPANY_SHORT_CODE';
@@ -10,27 +10,26 @@ jest.mock('@deriv/api', () => ({
     })),
 }));
 
-describe('useIsMt5LoginListStatusPresent', () => {
+describe('useGetMt5LoginListStatus', () => {
     it('should return true when the given status is present for the given login id', () => {
         const { flag_value, is_flag_present } = renderHook(() =>
-            useIsMt5LoginListStatusPresent('landing_company_short', mock_login_id)
+            useGetMt5LoginListStatus('landing_company_short', mock_login_id)
         ).result.current;
 
         expect(is_flag_present).toBeTruthy();
         expect(flag_value).toEqual(mock_landing_company_short_code);
     });
 
     it('should return false when the given status is not present for the given login id', () => {
-        const { flag_value, is_flag_present } = renderHook(() =>
-            useIsMt5LoginListStatusPresent('balance', mock_login_id)
-        ).result.current;
+        const { flag_value, is_flag_present } = renderHook(() => useGetMt5LoginListStatus('balance', mock_login_id))
+            .result.current;
         expect(is_flag_present).toBeFalsy();
         expect(flag_value).toEqual(undefined);
     });
 
     it('should return false when the given login id is empty', () => {
-        const { flag_value, is_flag_present } = renderHook(() => useIsMt5LoginListStatusPresent('account_type', ''))
-            .result.current;
+        const { flag_value, is_flag_present } = renderHook(() => useGetMt5LoginListStatus('account_type', '')).result
+            .current;
         expect(is_flag_present).toBeFalsy();
         expect(flag_value).toEqual(undefined);
     });