Merge branch 'master' into sandeep/datadog-implementation

deriv-com · Nov 27, 2024 · 6e54c56 · 6e54c56
2 parents 05df970 + 64c0b6e
commit 6e54c56
Show file tree

Hide file tree

Showing 101 changed files with 9,558 additions and 455 deletions.
diff --git a/index.html b/index.html
@@ -17,5 +17,46 @@
         <div id="modal_root" class="modal-root"></div>
         <div id="popup_root" class="popup-root"></div>
         <div id="root"></div>
+        <!-- LiveChat script -->
+        <script type="text/javascript" defer>
+            window.__lc = window.__lc || {};
+            window.__lc.license = 12049137;
+            window.__lc.asyncInit = true;
+            (function (n, t, c) {
+                function i(n) {
+                    return e._h ? e._h.apply(null, n) : e._q.push(n);
+                }
+                var e = {
+                    _q: [],
+                    _h: null,
+                    _v: '2.0',
+                    on: function () {
+                        i(['on', c.call(arguments)]);
+                    },
+                    once: function () {
+                        i(['once', c.call(arguments)]);
+                    },
+                    off: function () {
+                        i(['off', c.call(arguments)]);
+                    },
+                    get: function () {
+                        if (!e._h) throw new Error('[LiveChatWidget] You can’t use getters before load.');
+                        return i(['get', c.call(arguments)]);
+                    },
+                    call: function () {
+                        i(['call', c.call(arguments)]);
+                    },
+                    init: function () {
+                        var n = t.createElement('script');
+                        (n.async = !0),
+                            (n.type = 'text/javascript'),
+                            (n.src = 'https://cdn.livechatinc.com/tracking.js'),
+                            t.head.appendChild(n);
+                    },
+                };
+                !n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e);
+            })(window, document, [].slice);
+        </script>
+        <!-- End LiveChat script -->
     </body>
 </html>
diff --git a/jest.config.ts b/jest.config.ts
@@ -83,6 +83,7 @@ const config: Config = {
         'react-dom/server': '<rootDir>/__mocks__/react-dom-server.js',
         '@deriv-com/translations': '<rootDir>/__mocks__/translation.mock.js',
         '@deriv-com/ui': '<rootDir>/node_modules/@deriv-com/ui',
+        '@deriv-com/auth-client': '<rootDir>/node_modules/@deriv-com/auth-client',
         '^@/external/(.*)$': '<rootDir>/src/external/$1',
         '^@/utils/(.*)$': '<rootDir>/src/utils/$1',
         '^@/components/(.*)$': '<rootDir>/src/components/$1',
@@ -179,7 +180,7 @@ const config: Config = {
     },
 
     // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-    transformIgnorePatterns: ['/node_modules/(?!@deriv-com/ui).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!@deriv-com/ui|@deriv-com/auth-client).+\\.js$'],
 
     // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
     // unmockedModulePathPatterns: undefined,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "dependencies": {
         "@datadog/browser-rum": "^5.31.1",
         "@deriv-com/analytics": "^1.5.3",
+        "@deriv-com/auth-client": "^1.2.12",
         "@deriv-com/quill-ui": "1.18.1",
         "@deriv-com/translations": "^1.3.9",
         "@deriv-com/ui": "^1.36.4",

diff --git a/public/assets/images/dbot-new-look-QS-and-accumulators-addition.gif b/public/assets/images/dbot-new-look-QS-and-accumulators-addition.gif
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,12 +1,15 @@
-import { Fragment, lazy, Suspense, useEffect } from 'react';
+import { Fragment, lazy, Suspense } from 'react';
 import React from 'react';
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
 import RoutePromptDialog from '@/components/route-prompt-dialog';
+import CallbackPage from '@/pages/callback';
 import Endpoint from '@/pages/endpoint';
-import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
+import { initializeI18n, localize, TranslationProvider } from '@deriv-com/translations';
+import { Loader } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 import { StoreProvider } from '../hooks/useStore';
 import CoreStoreProvider from './CoreStoreProvider';
+import './app-root.scss';
 
 const Layout = lazy(() => import('../components/layout'));
 const AppRoot = lazy(() => import('./app-root'));
@@ -21,7 +24,16 @@ const router = createBrowserRouter(
         <Route
             path='/'
             element={
-                <Suspense fallback={<div>Please wait while we load the app...</div>}>
+                <Suspense
+                    fallback={
+                        <div className='app-root'>
+                            <Loader />
+                            <div className='load-message'>
+                                {localize('Please wait while we connect to the server...')}
+                            </div>
+                        </div>
+                    }
+                >
                     <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
                         <StoreProvider>
                             <RoutePromptDialog />
@@ -36,14 +48,15 @@ const router = createBrowserRouter(
             {/* All child routes will be passed as children to Layout */}
             <Route index element={<AppRoot />} />
             <Route path='endpoint' element={<Endpoint />} />
+            <Route path='callback' element={<CallbackPage />} />
         </Route>
     )
 );
 
 function App() {
     const { loginInfo, paramsToDelete } = URLUtils.getLoginInfoFromURL();
 
-    useEffect(() => {
+    React.useEffect(() => {
         // Set login info to local storage and remove params from url
         if (loginInfo.length) {
             try {

diff --git a/src/app/CoreStoreProvider.tsx b/src/app/CoreStoreProvider.tsx
@@ -4,6 +4,7 @@ import { getDecimalPlaces, toMoment } from '@/components/shared';
 import { FORM_ERROR_MESSAGES } from '@/components/shared/constants/form-error-messages';
 import { initFormErrorMessages } from '@/components/shared/utils/validation/declarative-validation-rules';
 import { api_base } from '@/external/bot-skeleton';
+import { useOauth2 } from '@/hooks/auth/useOauth2';
 import { useApiBase } from '@/hooks/useApiBase';
 import { useStore } from '@/hooks/useStore';
 import { TLandingCompany, TSocketResponseData } from '@/types/api-types';
@@ -20,6 +21,8 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c
 
     const { currentLang } = useTranslations();
 
+    const { oAuthLogout } = useOauth2({ handleLogout: async () => client.logout() });
+
     const activeAccount = useMemo(
         () => accountList?.find(account => account.loginid === activeLoginid),
         [activeLoginid, accountList]
@@ -82,13 +85,13 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c
     }, [client, common, isAuthorizing]);
 
     const handleMessages = useCallback(
-        (res: Record<string, unknown>) => {
+        async (res: Record<string, unknown>) => {
             if (!res) return;
             const data = res.data as TSocketResponseData<'balance'>;
             const { msg_type, error } = data;
 
             if (error?.code === 'AuthorizationRequired') {
-                client.logout();
+                await oAuthLogout();
             }
 
             if (msg_type === 'balance' && data && !error) {
@@ -112,7 +115,7 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c
                 }
             }
         },
-        [client]
+        [client, oAuthLogout]
     );
 
     useEffect(() => {
@@ -123,7 +126,7 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c
 
         return () => {
             if (msg_listener.current) {
-                msg_listener.current.unsubscribe();
+                msg_listener.current.unsubscribe?.();
             }
         };
     }, [connectionStatus, handleMessages, isAuthorizing, isAuthorized, client]);