From d85c61c428684448d0e17704d6e0ee9ba3cd4a0a Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Wed, 18 Oct 2023 18:08:32 +0400 Subject: [PATCH] fix: updated hook with recent changes and respective files --- packages/api/types.ts | 1 - .../__tests__/trading-app-card.spec.tsx | 12 +++--- .../containers/trading-app-card.tsx | 41 +++++++++++++++---- .../open-positions-svg-modal.tsx | 15 ++++--- .../__tests__/account-transfer-form.spec.tsx | 10 ++--- .../account-transfer-form.tsx | 11 ++--- .../__tests__/dmt5-trade-modal.spec.tsx | 12 +++--- .../cfd/src/Containers/dmt5-trade-modal.tsx | 29 +++++++++---- ....tsx => useGetMt5LoginListStatus.spec.tsx} | 15 ++++--- packages/hooks/src/index.ts | 2 +- .../hooks/src/useGetMt5LoginListStatus.ts | 18 ++++++++ .../src/useIsMt5LoginListStatusPresent.ts | 21 ---------- packages/shared/src/utils/constants/index.ts | 1 + .../utils/constants/mt5-login-list-status.ts | 6 +++ 14 files changed, 115 insertions(+), 79 deletions(-) rename packages/hooks/src/__tests__/{useIsMt5LoginListStatusPresent.spec.tsx => useGetMt5LoginListStatus.spec.tsx} (77%) create mode 100644 packages/hooks/src/useGetMt5LoginListStatus.ts delete mode 100644 packages/hooks/src/useIsMt5LoginListStatusPresent.ts create mode 100644 packages/shared/src/utils/constants/mt5-login-list-status.ts diff --git a/packages/api/types.ts b/packages/api/types.ts index 9d6e07897e2b..941446bd66cb 100644 --- a/packages/api/types.ts +++ b/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; } diff --git a/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx b/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx index edea3273a42d..0184d6deb96c 100644 --- a/packages/appstore/src/components/containers/__tests__/trading-app-card.spec.tsx +++ b/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; describe('', () => { let modal_root_el: HTMLDivElement; @@ -93,7 +91,7 @@ describe('', () => { }); 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('', () => { }); 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, }); diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index b84a62f90b5f..82f404f6ea41 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/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 (
@@ -160,7 +167,23 @@ const TradingAppCard = ({ text={badge_text} /> )} - {is_open_order_position_status_present && ( + {is_open_order_position && ( + { + setIsOpenPositionSvgModalOpen(!is_open_position_svg_modal_open); + }} + account_status='open-order-position' + icon='IcAlertWarning' + text={ + ]} + /> + } + /> + )} + {is_account_closed && ( { @@ -170,8 +193,7 @@ const TradingAppCard = ({ icon='IcAlertWarning' text={ ]} /> } @@ -180,7 +202,8 @@ const TradingAppCard = ({ {is_open_position_svg_modal_open && ( diff --git a/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx b/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx index 41f03b2ffc77..dc5701dd8e5d 100644 --- a/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx +++ b/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>; }; 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 = ({ > - + {is_open_order_position && } + {is_account_closed && } - {open_order_position_status ? ( + {is_open_order_position && ( - ) : ( + )} + {is_account_closed && ( ({ ...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; jest.mock('Assets/svgs/trading-platform', () => jest.fn(props =>
TradingPlatformIcon
) @@ -289,14 +287,14 @@ describe('', () => { }); 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(); 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 a6560644c027..2dc0c9e7c0d6 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,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({}); diff --git a/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx b/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx index 12eb02491ebe..e01467c4843b 100644 --- a/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx +++ b/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; describe('', () => { const mock_props: React.ComponentProps = { @@ -89,7 +87,7 @@ describe('', () => { }); 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('', () => { }); 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, }); diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx index d97ecffa221c..f59e6c5cdc05 100644 --- a/packages/cfd/src/Containers/dmt5-trade-modal.tsx +++ b/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 (
@@ -103,15 +104,27 @@ const DMT5TradeModal = ({ /> )} - {is_open_order_position_status_present && ( + {is_open_order_position && ( ]} + /> + } + /> + )} + {is_account_closed && ( + ]} /> } diff --git a/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx b/packages/hooks/src/__tests__/useGetMt5LoginListStatus.spec.tsx similarity index 77% rename from packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx rename to packages/hooks/src/__tests__/useGetMt5LoginListStatus.spec.tsx index 5b07f2bbeef6..17667c3b2731 100644 --- a/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx +++ b/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,10 +10,10 @@ 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(); @@ -21,16 +21,15 @@ describe('useIsMt5LoginListStatusPresent', () => { }); 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); }); diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index bf8ecb667053..4ea9f5a22f02 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -62,5 +62,5 @@ export { default as useWalletsList } from './useWalletsList'; export { default as useStatesList } from './useStatesList'; export { default as useP2PConfig } from './useP2PConfig'; export { default as useIsClientHighRiskForMT5 } from './useIsClientHighRiskForMT5'; -export { default as useIsMt5LoginListStatusPresent } from './useIsMt5LoginListStatusPresent'; +export { default as useGetMt5LoginListStatus } from './useGetMt5LoginListStatus'; export { default as useCFDCanGetMoreMT5Accounts } from './useCFDCanGetMoreMT5Accounts'; diff --git a/packages/hooks/src/useGetMt5LoginListStatus.ts b/packages/hooks/src/useGetMt5LoginListStatus.ts new file mode 100644 index 000000000000..67c6907b0249 --- /dev/null +++ b/packages/hooks/src/useGetMt5LoginListStatus.ts @@ -0,0 +1,18 @@ +import React from 'react'; +import { useMT5AccountsList } from '@deriv/api'; + +/** + * A custom hook to return the status field of mt5_login_list of given account login id. + * If the status is present, then it will return the value of the status flag else undefined. + */ + +const useGetMt5LoginListStatus = (account_login_id: string) => { + const { data: mt5_login_list } = useMT5AccountsList(); + + return React.useMemo(() => { + const account = mt5_login_list.find(account => account?.login === account_login_id); + return { status: account?.status }; + }, [account_login_id, mt5_login_list]); +}; + +export default useGetMt5LoginListStatus; diff --git a/packages/hooks/src/useIsMt5LoginListStatusPresent.ts b/packages/hooks/src/useIsMt5LoginListStatusPresent.ts deleted file mode 100644 index ca0bc3277c3e..000000000000 --- a/packages/hooks/src/useIsMt5LoginListStatusPresent.ts +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { useMT5AccountsList } from '@deriv/api'; - -type TMT5Accounts = ReturnType['data'][number]; -type TStatusKey = keyof TMT5Accounts; - -/** - * A custom hook to check if the given status flag is present in the mt5_login_list of given account login id. - * If the flag is present, 'is_flag_present' will be true, else false. - * If the flag is present, 'flag_value' will contain the value, else undefined. - */ -const useIsMt5LoginListStatusPresent = (status: TStatusKey, account_login_id: string) => { - const { data: mt5_login_list } = useMT5AccountsList(); - - return React.useMemo(() => { - const account = mt5_login_list.find(account => account?.login === account_login_id); - return { is_flag_present: Object.hasOwn(account ?? {}, status), flag_value: account?.[status] }; - }, [account_login_id, mt5_login_list, status]); -}; - -export default useIsMt5LoginListStatusPresent; diff --git a/packages/shared/src/utils/constants/index.ts b/packages/shared/src/utils/constants/index.ts index d9817697f166..dfb11bed0842 100644 --- a/packages/shared/src/utils/constants/index.ts +++ b/packages/shared/src/utils/constants/index.ts @@ -5,3 +5,4 @@ export * from './default-options'; export * from './jurisdictions-config'; export * from './signup_fields'; export * from './error'; +export * from './mt5-login-list-status'; diff --git a/packages/shared/src/utils/constants/mt5-login-list-status.ts b/packages/shared/src/utils/constants/mt5-login-list-status.ts new file mode 100644 index 000000000000..d523ade0f37a --- /dev/null +++ b/packages/shared/src/utils/constants/mt5-login-list-status.ts @@ -0,0 +1,6 @@ +export const MT5LoginlistStatus = Object.freeze({ + MIGRATED_WITH_POSITION: 'migrated_with_position', + MIGRATED_WITHOUT_POSITION: 'migrated', + POA_PENDING: 'poa_pending', + POA_VERIFIED: 'poa_verified', +});