Merge pull request deriv-com#70 from shaheer-deriv/shaheer/COJ-131

refactor: 🔱 refactors useIsMt5LoginListStatus hook

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

@@ -16,7 +16,7 @@ let mockRootStore: ReturnType<typeof mockStore>;
 
 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
@@ -289,14 +289,14 @@ describe('<AccountTransferForm />', () => {
     });
 
     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();

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

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

packages/hooks/src/useIsMt5LoginListStatusPresent.ts

@@ -7,15 +7,17 @@ type DetailsOfEachMT5LoginId = ReturnType<typeof useStore>['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;