diff --git a/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx b/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx index 2373190d050e..cf9f86ab6df2 100644 --- a/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx +++ b/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx @@ -63,6 +63,7 @@ const AccountSwitcher = observer(({ history, is_mobile, is_visible }) => { toggleSetCurrencyModal, should_show_real_accounts_list, setShouldShowCooldownModal, + setIsForcedToExitPnv, } = ui; const [active_tab_index, setActiveTabIndex] = React.useState(!is_virtual || should_show_real_accounts_list ? 0 : 1); const [is_deriv_demo_visible, setDerivDemoVisible] = React.useState(true); @@ -99,6 +100,9 @@ const AccountSwitcher = observer(({ history, is_mobile, is_visible }) => { await logoutClient(); history.push(routes.traders_hub); } else { + if (window.location.pathname.startsWith(routes.phone_verification)) { + await setIsForcedToExitPnv(true); + } history.push(routes.traders_hub); await logoutClient(); } diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js index fafb35933336..f55db96fdaed 100644 --- a/packages/core/src/Stores/ui-store.js +++ b/packages/core/src/Stores/ui-store.js @@ -480,7 +480,7 @@ export default class UIStore extends BaseStore { this.should_show_phone_number_otp = should_show_phone_number_otp; } - setIsForcedToExitPnv(is_forced_to_exit_pnv) { + async setIsForcedToExitPnv(is_forced_to_exit_pnv) { this.is_forced_to_exit_pnv = is_forced_to_exit_pnv; } diff --git a/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx b/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx index 73feadedc881..9d9e75ce92f7 100644 --- a/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx +++ b/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx @@ -1,9 +1,7 @@ -import React from 'react'; - -import { mockStore, StoreProvider } from '@deriv/stores'; import { renderHook } from '@testing-library/react-hooks'; import usePhoneNumberVerificationSessionTimer from '../usePhoneNumberVerificationSessionTimer'; +import useSettings from '../useSettings'; jest.mock('@deriv/shared', () => ({ ...jest.requireActual('@deriv/shared'), @@ -12,23 +10,17 @@ jest.mock('@deriv/shared', () => ({ }, })); -const mock_store = mockStore({ - client: { - account_settings: { - phone_number_verification: { - session_timestamp: undefined, - }, - }, - }, -}); +jest.mock('../useSettings'); describe('usePhoneNumberVerificationSetTimer', () => { - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); beforeEach(() => { jest.clearAllMocks(); jest.useFakeTimers({ legacyFakeTimers: true }); + (useSettings as jest.Mock).mockReturnValue({ + data: { + phone_number_verification: { session_timestamp: undefined }, + }, + }); }); afterEach(() => { @@ -36,10 +28,13 @@ describe('usePhoneNumberVerificationSetTimer', () => { }); it('should set should_show_session_timeout_modal to true if session_timestap is same with WS response time', async () => { - if (mock_store.client.account_settings.phone_number_verification) - mock_store.client.account_settings.phone_number_verification.session_timestamp = 1620000000; + (useSettings as jest.Mock).mockReturnValue({ + data: { + phone_number_verification: { session_timestamp: 1620000000 }, + }, + }); - const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer(), { wrapper }); + const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer()); expect(result.current.should_show_session_timeout_modal).toBe(false); @@ -49,10 +44,13 @@ describe('usePhoneNumberVerificationSetTimer', () => { }); it('should set should_show_session_timeout_modal to false if session_timestap more than WS response time', async () => { - if (mock_store.client.account_settings.phone_number_verification) - mock_store.client.account_settings.phone_number_verification.session_timestamp = 1620000003; + (useSettings as jest.Mock).mockReturnValue({ + data: { + phone_number_verification: { session_timestamp: 1620000003 }, + }, + }); - const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer(), { wrapper }); + const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer()); expect(result.current.should_show_session_timeout_modal).toBe(false); @@ -62,10 +60,13 @@ describe('usePhoneNumberVerificationSetTimer', () => { }); it('should set formatted_time value to be 00:00 if the session_timestamp has no difference', async () => { - if (mock_store.client.account_settings.phone_number_verification) - mock_store.client.account_settings.phone_number_verification.session_timestamp = 1620000000; + (useSettings as jest.Mock).mockReturnValue({ + data: { + phone_number_verification: { session_timestamp: 1620000000 }, + }, + }); - const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer(), { wrapper }); + const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer()); await waitForNextUpdate(); @@ -73,10 +74,13 @@ describe('usePhoneNumberVerificationSetTimer', () => { }); it('should set formatted_time value if the session_timestamp has any value', async () => { - if (mock_store.client.account_settings.phone_number_verification) - mock_store.client.account_settings.phone_number_verification.session_timestamp = 1620000003; + (useSettings as jest.Mock).mockReturnValue({ + data: { + phone_number_verification: { session_timestamp: 1620000003 }, + }, + }); - const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer(), { wrapper }); + const { result, waitForNextUpdate } = renderHook(() => usePhoneNumberVerificationSessionTimer()); await waitForNextUpdate(); diff --git a/packages/hooks/src/usePhoneNumberVerificationSessionTimer.ts b/packages/hooks/src/usePhoneNumberVerificationSessionTimer.ts index c25685b13ece..7c402348796f 100644 --- a/packages/hooks/src/usePhoneNumberVerificationSessionTimer.ts +++ b/packages/hooks/src/usePhoneNumberVerificationSessionTimer.ts @@ -1,15 +1,13 @@ import { useCallback, useEffect, useState } from 'react'; import { useIsMounted, WS } from '@deriv/shared'; -import { useStore } from '@deriv/stores'; import dayjs from 'dayjs'; +import useSettings from './useSettings'; const usePhoneNumberVerificationSessionTimer = () => { const [session_timer, setSessionTimer] = useState(); const [formatted_time, setFormattedTime] = useState('00:00'); const [should_show_session_timeout_modal, setShouldShowSessionTimeoutModal] = useState(false); - const { client } = useStore(); - const { account_settings } = client; - const { phone_number_verification } = account_settings; + const { data: account_settings } = useSettings(); const isMounted = useIsMounted(); const formatTime = useCallback((totalSeconds: number) => { @@ -29,9 +27,13 @@ const usePhoneNumberVerificationSessionTimer = () => { WS.send({ time: 1 }).then((response: { error?: Error; time: number }) => { if (response.error) return; - if (response.time && phone_number_verification?.session_timestamp) { + //@ts-expect-error will remove this once GetSettings is updated + if (response.time && account_settings?.phone_number_verification?.session_timestamp) { // request_in_miliseconds is to convert session_timestamp from get_settings * it with 1000 to make it into miliseconds and convert the time using dayjs package - const request_in_milliseconds = dayjs(phone_number_verification?.session_timestamp * 1000); + const request_in_milliseconds = dayjs( + //@ts-expect-error will remove this once GetSettings is updated + account_settings?.phone_number_verification?.session_timestamp * 1000 + ); // next_request is to compare request_in_miliseconds with server's response time const next_request = Math.round(request_in_milliseconds.diff(response.time * 1000) / 1000); @@ -42,7 +44,8 @@ const usePhoneNumberVerificationSessionTimer = () => { } } }); - }, [phone_number_verification?.session_timestamp]); + //@ts-expect-error will remove this once GetSettings is updated + }, [account_settings?.phone_number_verification?.session_timestamp]); useEffect(() => { let countdown: ReturnType; @@ -63,6 +66,7 @@ const usePhoneNumberVerificationSessionTimer = () => { return { formatted_time, should_show_session_timeout_modal, + setSessionTimer, setShouldShowSessionTimeoutModal, }; };