[UPM1730] Suisin/fix: logout not redirected to app.deriv.com and it is showing pnv can…

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

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

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,34 +10,31 @@ 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 }) => (
-        <StoreProvider store={mock_store}>{children}</StoreProvider>
-    );
     beforeEach(() => {
         jest.clearAllMocks();
         jest.useFakeTimers({ legacyFakeTimers: true });
+        (useSettings as jest.Mock).mockReturnValue({
+            data: {
+                phone_number_verification: { session_timestamp: undefined },
+            },
+        });
     });
 
     afterEach(() => {
         jest.useRealTimers();
     });
 
     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,21 +60,27 @@ 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();
 
         expect(result.current.formatted_time).toBe('00:00');
     });
 
     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();
 

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<number | undefined>();
     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<typeof setInterval>;
@@ -63,6 +66,7 @@ const usePhoneNumberVerificationSessionTimer = () => {
     return {
         formatted_time,
         should_show_session_timeout_modal,
+        setSessionTimer,
         setShouldShowSessionTimeoutModal,
     };
 };