Shayan/feq 2336/redirect guest users to login page

package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
-        "@deriv-com/api-hooks": "^0.1.24",
+        "@deriv-com/api-hooks": "^1.0.10",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.27.9",
         "@deriv-com/utils": "latest",

src/App.tsx

@@ -2,9 +2,10 @@ import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { AppFooter, AppHeader, DerivIframe } from '@/components';
+import { useRedirectToOauth } from '@/hooks';
+import AppContent from '@/routes/AppContent';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
-import AppContent from './routes/AppContent';
 
 const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = import.meta.env;
 const i18nInstance = initializeI18n({
@@ -13,6 +14,9 @@ const i18nInstance = initializeI18n({
 
 const App = () => {
     const { isDesktop } = useDevice();
+    const { redirectToOauth } = useRedirectToOauth();
+
+    redirectToOauth();
 
     return (
         <BrowserRouter>

src/components/AppHeader/AppHeader.tsx

@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
+import { getOauthUrl } from '@/constants';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
-import { useAccountList, useAuthData } from '@deriv-com/api-hooks';
+import { useAuthData } from '@deriv-com/api-hooks';
 import { useTranslations } from '@deriv-com/translations';
 import { Button, Header, Text, TooltipMenuIcon, useDevice, Wrapper } from '@deriv-com/ui';
-import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
 import { AccountSwitcher } from './AccountSwitcher';
 import { AppLogo } from './AppLogo';
 import { MenuItems } from './MenuItems';
@@ -14,34 +13,10 @@ import './AppHeader.scss';
 
 // TODO: handle local storage values not updating after changing local storage values
 const AppHeader = () => {
-    const { data: accounts } = useAccountList();
     const { isDesktop } = useDevice();
     const { activeLoginid, logout } = useAuthData();
     const { localize } = useTranslations();
-    const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
-    const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString());
-    const oauthUrl =
-        appId && serverUrl
-            ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv`
-            : URLUtils.getOauthURL();
-
-    useEffect(() => {
-        const shouldRedirectToLogin = () => {
-            if (typeof accounts !== 'undefined') {
-                const userHasNoP2PAccount = !accounts.find(
-                    account => account.broker === 'CR' && account.currency === 'USD'
-                );
-                const activeAccount = accounts.find(account => account.loginid === activeLoginid);
-                const activeAccountCurrency = activeAccount?.currency || null;
-
-                if (userHasNoP2PAccount || activeAccountCurrency !== 'USD') {
-                    window.open(oauthUrl, '_self');
-                }
-            }
-        };
-
-        shouldRedirectToLogin();
-    }, [accounts, activeLoginid, oauthUrl]);
+    const oauthUrl = getOauthUrl();
 
     return (
         <Header className={!isDesktop ? 'h-[40px]' : ''}>

src/components/AppHeader/HeaderConfig.tsx

@@ -81,14 +81,14 @@ export const MenuItems: MenuItemsConfig[] = [
         label: "Trader's Hub",
     },
     {
-        as: 'button',
-        href: 'https://app.deriv.com/appstore/traders-hub',
+        as: 'a',
+        href: 'https://app.deriv.com/appstore/reports',
         icon: <ReportsLogo iconSize='xs' />,
         label: 'Reports',
     },
     {
-        as: 'button',
-        href: 'https://app.deriv.com/appstore/traders-hub',
+        as: 'a',
+        href: 'https://app.deriv.com/appstore/cashier',
         icon: <CashierLogo iconSize='xs' />,
         label: 'Cashier',
     },

src/constants/url.ts

@@ -1,4 +1,4 @@
-import { URLConstants } from '@deriv-com/utils';
+import { LocalStorageConstants, LocalStorageUtils, URLConstants, URLUtils } from '@deriv-com/utils';
 
 export const BUY_SELL_URL = '/buy-sell';
 export const ORDERS_URL = '/orders';
@@ -12,3 +12,14 @@ export const ACCOUNT_LIMITS = `${URLConstants.derivAppProduction}/account/accoun
 export const DERIV_COM = URLConstants.derivComProduction;
 export const HELP_CENTRE = `${URLConstants.derivComProduction}/help-centre/`;
 export const RESPONSIBLE = `${URLConstants.derivComProduction}/responsible/`;
+
+export const getOauthUrl = () => {
+    const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
+    const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString());
+    const oauthUrl =
+        appId && serverUrl
+            ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv`
+            : URLUtils.getOauthURL();
+
+    return oauthUrl;
+};

src/hooks/custom-hooks/index.ts

@@ -12,5 +12,6 @@ export { default as useNavigatorOnline } from './useNavigatorOnline';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as usePoiPoaStatus } from './usePoiPoaStatus';
 export { default as useQueryString } from './useQueryString';
+export { default as useRedirectToOauth } from './useRedirectToOauth';
 export { default as useSendbird } from './useSendbird';
 export { default as useSyncedTime } from './useSyncedTime';

src/hooks/custom-hooks/useRedirectToOauth.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getOauthUrl } from '@/constants';
+import { getCurrentRoute } from '@/utils';
+import { useAuthData } from '@deriv-com/api-hooks';
+
+const useRedirectToOauth = () => {
+    const [shouldRedirect, setShouldRedirect] = useState(false);
+    const { isAuthorized, isAuthorizing } = useAuthData();
+    const isEndpointPage = getCurrentRoute() === 'endpoint';
+
+    const oauthUrl = getOauthUrl();
+    const redirectToOauth = useCallback(() => {
+        shouldRedirect && window.open(oauthUrl, '_self');
+    }, [oauthUrl, shouldRedirect]);
+
+    useEffect(() => {
+        if (!isEndpointPage && !isAuthorized && !isAuthorizing) {
+            setShouldRedirect(true);
+        }
+    }, [isAuthorized, isAuthorizing, isEndpointPage, oauthUrl]);
+
+    return {
+        redirectToOauth,
+    };
+};
+
+export default useRedirectToOauth;