Suisin/chore: fix blank screen issue (#18107)

* chore: fix blank screen issue

* chore: fix logout scenario redirect issue

* chore: empty commit

Author: suisin-deriv

packages/core/src/App/Containers/Redirect/redirect.jsx

@@ -1,19 +1,26 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { useHistory, withRouter } from 'react-router-dom';
+import Cookies from 'js-cookie';
 import PropTypes from 'prop-types';
-import { withRouter, useHistory } from 'react-router-dom';
-import { loginUrl, routes, redirectToLogin, SessionStore, getDomainName } from '@deriv/shared';
+
+import { useOauth2 } from '@deriv/hooks';
+import { getDomainName, loginUrl, redirectToLogin, routes, SessionStore } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
-import { WS } from 'Services';
-import { Analytics } from '@deriv-com/analytics';
-import Cookies from 'js-cookie';
 import { Chat } from '@deriv/utils';
+import { Analytics } from '@deriv-com/analytics';
+import { requestOidcAuthentication } from '@deriv-com/auth-client';
+
+import { WS } from 'Services';
 
 const Redirect = observer(() => {
     const history = useHistory();
     const { client, ui } = useStore();
+    const { isOAuth2Enabled } = useOauth2({});
+    const [queryCurrency, setQueryCurrency] = useState('USD');
 
     const {
+        authorize_accounts_list,
         currency,
         has_wallet,
         is_logged_in,
@@ -22,6 +29,8 @@ const Redirect = observer(() => {
         setVerificationCode,
         verification_code,
         setPreventRedirectToHub,
+        switchAccount,
+        is_client_store_initialized,
     } = client;
 
     const {
@@ -321,10 +330,29 @@ const Redirect = observer(() => {
         default:
             break;
     }
+
     useEffect(() => {
-        if (!redirected_to_route && history.location.pathname !== routes.traders_hub) {
-            const account_currency = url_params.get('account');
-            const client_account_lists = JSON.parse(localStorage.getItem('client.accounts'));
+        const account_currency = url_params.get('account');
+        setQueryCurrency(account_currency);
+    }, []);
+
+    useEffect(() => {
+        const account_currency = queryCurrency;
+        if (!redirected_to_route && history.location.pathname !== routes.traders_hub && is_client_store_initialized) {
+            const client_account_lists = JSON.parse(localStorage.getItem('client.accounts') || '{}');
+            const is_correct_currency = authorize_accounts_list.some(
+                account => account.currency?.toUpperCase() === account_currency?.toUpperCase()
+            );
+            const currency_exists = Object.values(client_account_lists).some(
+                account => account.currency?.toUpperCase() === account_currency?.toUpperCase()
+            );
+            if (!currency_exists && is_correct_currency && authorize_accounts_list.length > 0) {
+                if (isOAuth2Enabled) {
+                    requestOidcAuthentication({
+                        redirectCallbackUri: `${window.location.origin}/callback`,
+                    });
+                }
+            }
 
             if (account_currency) {
                 let matching_loginid;
@@ -341,7 +369,8 @@ const Redirect = observer(() => {
                     );
                 }
 
-                if (matching_loginid) {
+                if (matching_loginid && is_client_store_initialized) {
+                    switchAccount(matching_loginid);
                     sessionStorage.setItem('active_loginid', matching_loginid);
                 }
             }
@@ -363,16 +392,23 @@ const Redirect = observer(() => {
             );
 
             let updated_search = url_query_string;
+            const params = new URLSearchParams(url_query_string);
+            params.set('account', queryCurrency);
             if (matched_route && matched_route.type) {
-                updated_search = `${url_query_string}&trade_type=${matched_route.type}`;
+                updated_search = `${params.toString()}`;
             }
 
+            sessionStorage.setItem(
+                'tradershub_redirect_to',
+                matched_route ? `redirect?${updated_search}` : default_route
+            );
+
             history.push({
                 pathname: matched_route ? matched_route.route : default_route,
                 search: updated_search,
             });
         }
-    }, [redirected_to_route, url_query_string, history]);
+    }, [redirected_to_route, url_query_string, history, is_client_store_initialized, authorize_accounts_list]);
 
     return null;
 });

packages/core/src/App/app.jsx

@@ -54,7 +54,7 @@ const AppWithoutTranslation = ({ root_store }) => {
     const url_query_string = window.location.search;
     const url_params = new URLSearchParams(url_query_string);
     const account_currency = url_params.get('account');
-    const client_account_lists = JSON.parse(localStorage.getItem('client.accounts'));
+    const client_account_lists = JSON.parse(localStorage.getItem('client.accounts') ?? '{}');
 
     if (account_currency) {
         let matching_loginid, matching_wallet_loginid;

packages/core/src/Modules/Callback/CallbackPage.tsx

@@ -16,6 +16,7 @@ const CallbackPage = () => {
 
                 const redirectTo = sessionStorage.getItem('tradershub_redirect_to');
                 if (redirectTo) {
+                    sessionStorage.removeItem('tradershub_redirect_to');
                     window.location.href = redirectTo;
                 } else {
                     window.location.href = routes.traders_hub;

packages/core/src/Stores/client-store.js

@@ -59,6 +59,7 @@ export default class ClientStore extends BaseStore {
     upgrade_info;
     email;
     accounts = {};
+    authorize_accounts_list = [];
     is_trading_platform_available_account_loaded = false;
     trading_platform_available_accounts = [];
     ctrader_trading_platform_available_accounts = [];
@@ -1472,6 +1473,7 @@ export default class ClientStore extends BaseStore {
     };
 
     updateAccountList(account_list) {
+        this.authorize_accounts_list = account_list;
         account_list.forEach(account => {
             if (this.accounts[account.loginid]) {
                 this.accounts[account.loginid].excluded_until = account.excluded_until || '';