From b6a73c716e7317dc5b84270f933a059f69f96c6f Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 4 Oct 2023 11:58:06 +0400 Subject: [PATCH 1/2] refactor: :art: refactors useIsMt5LoginListStatus hook --- .../__tests__/account-transfer-form.spec.tsx | 4 ++-- .../account-transfer-form.tsx | 3 ++- .../useIsMt5LoginListStatusPresent.spec.tsx | 24 +++++++++++++------ .../src/useIsMt5LoginListStatusPresent.ts | 12 ++++++---- 4 files changed, 28 insertions(+), 15 deletions(-) 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 bde11fa3c7e5..71226c5b25bf 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 @@ -289,14 +289,14 @@ describe('', () => { }); it('should display no new positions can be opened when transferring amount to a migrated svg account', () => { - mockedUseIsMt5LoginListStatusPresent.mockReturnValue(true); + mockedUseIsMt5LoginListStatusPresent.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(false); + mockedUseIsMt5LoginListStatusPresent.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 3c4426bbb5b8..e8ca85a19d50 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 @@ -122,7 +122,8 @@ const AccountTransferForm = observer( } = 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 { is_flag_present, flag_value } = useIsMt5LoginListStatusPresent('login', selected_to.value ?? ''); + const is_open_order_position_status_present = is_flag_present && !!flag_value; const [from_accounts, setFromAccounts] = React.useState({}); const [to_accounts, setToAccounts] = React.useState({}); diff --git a/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx b/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx index 568ce95ded52..5b07f2bbeef6 100644 --- a/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx +++ b/packages/hooks/src/__tests__/useIsMt5LoginListStatusPresent.spec.tsx @@ -2,26 +2,36 @@ import { renderHook } from '@testing-library/react-hooks'; import useIsMt5LoginListStatusPresent from '../useIsMt5LoginListStatusPresent'; const mock_login_id = 'MOCK_LOGIN_ID'; +const mock_landing_company_short_code = 'MOCK_LANDING_COMPANY_SHORT_CODE'; jest.mock('@deriv/api', () => ({ ...jest.requireActual('@deriv/api'), useMT5AccountsList: jest.fn(() => ({ - data: [{ login: mock_login_id, landing_company_short: 'MOCK_LANDING_COMPANY_SHORT_CODE' }], + 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(); + const { flag_value, is_flag_present } = renderHook(() => + useIsMt5LoginListStatusPresent('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 { result } = renderHook(() => useIsMt5LoginListStatusPresent('balance', mock_login_id)); - expect(result.current).toBeFalsy(); + const { flag_value, is_flag_present } = renderHook(() => + useIsMt5LoginListStatusPresent('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 { result } = renderHook(() => useIsMt5LoginListStatusPresent('account_type', '')); - expect(result.current).toBeFalsy(); + const { flag_value, is_flag_present } = renderHook(() => useIsMt5LoginListStatusPresent('account_type', '')) + .result.current; + expect(is_flag_present).toBeFalsy(); + expect(flag_value).toEqual(undefined); }); }); diff --git a/packages/hooks/src/useIsMt5LoginListStatusPresent.ts b/packages/hooks/src/useIsMt5LoginListStatusPresent.ts index 3100787a283b..b28b5a4007bf 100644 --- a/packages/hooks/src/useIsMt5LoginListStatusPresent.ts +++ b/packages/hooks/src/useIsMt5LoginListStatusPresent.ts @@ -7,15 +7,17 @@ type DetailsOfEachMT5LoginId = ReturnType['client']['mt5_login_ 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 + * 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: 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] - ); + 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; From 93c6be9e1ea04ca278139d67c5872c7116fb8c26 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 4 Oct 2023 12:50:00 +0400 Subject: [PATCH 2/2] refactor: :art: refactors test file --- .../__tests__/account-transfer-form.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 71226c5b25bf..935375adc820 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 @@ -16,7 +16,7 @@ let mockRootStore: ReturnType; jest.mock('@deriv/hooks', () => ({ ...jest.requireActual('@deriv/hooks'), - useIsMt5LoginListStatusPresent: jest.fn(() => false), + useIsMt5LoginListStatusPresent: jest.fn(() => ({ is_flag_present: false, flag_value: undefined })), })); const mockedUseIsMt5LoginListStatusPresent = useIsMt5LoginListStatusPresent as jest.MockedFunction< typeof useIsMt5LoginListStatusPresent