Sergei / 67781 / live chat color (binary-com#7619)

* feat: add query parameter for dark mode * chore: empty to start build again * fix: update dark query parameter for every render * feat: combine lang and dark query * feat: change logic of getting lang_from_url in client-store * feat: sort query parameters * feat: reinit livechat when query parameters change * refactor: apply Farzins suggestions * feat: add search_params const * feat: change window.location.search to useParams * refactor: delete empty lines
amina-deriv · May 3, 2023 · 37e0d18 · 37e0d18
1 parent d84a627
commit 37e0d18
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts
@@ -1,14 +1,20 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useHistory } from 'react-router';
+import { useHistory, useParams } from 'react-router';
 import { liveChatInitialization } from './live-chat';
 import Cookies from 'js-cookie';
 import { deriv_urls } from '@deriv/shared';
 
+type TQueryParams = {
+    lang: string;
+    dark: string;
+};
+
 // Todo: Should break this into smaller hooks or utility functions.
 const useLiveChat = (has_cookie_account = false) => {
     const [isReady, setIsReady] = useState(false);
     const [reload, setReload] = useState(false);
     const history = useHistory();
+    const { lang, dark } = useParams<TQueryParams>();
     const widget = window.LiveChatWidget;
 
     const liveChatDeletion = () =>
@@ -102,6 +108,10 @@ const useLiveChat = (has_cookie_account = false) => {
         });
     };
 
+    useEffect(() => {
+        onHistoryChange();
+    }, [lang, dark, onHistoryChange]);
+
     useEffect(() => {
         if (isReady && !widget) {
             onHistoryChange();

diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import Loadable from 'react-loadable';
 import { UILoader } from '@deriv/components';
-import { urlForLanguage } from '@deriv/shared';
+import { urlSetQuery } from '@deriv/shared';
 import { getLanguage } from '@deriv/translations';
 import BinaryRoutes from 'App/Components/Routes';
 import { connect } from 'Stores/connect';
@@ -23,6 +23,7 @@ const Routes = ({
     error,
     has_error,
     history,
+    is_dark_mode_on,
     is_logged_in,
     is_logging_in,
     location,
@@ -57,8 +58,6 @@ const Routes = ({
     }, []);
 
     const lang = getLanguage();
-    const lang_regex = /[?&]lang=/;
-    const has_lang = lang_regex.test(location.search);
 
     if (has_error) {
         return <Error {...error} />;
@@ -70,10 +69,12 @@ const Routes = ({
     // non-supported language, the language still
     // shows up in the URL. This is not in sync
     // with the default language (EN), so we
-    // will remove it.
-    if ((!has_lang && lang !== 'EN') || (has_lang && lang === 'EN')) {
-        window.history.replaceState({}, document.title, urlForLanguage(lang));
-    }
+    // will remove it. (The same thing for dark_mode)
+    window.history.replaceState(
+        {},
+        document.title,
+        urlSetQuery({ lang: lang.replace('EN', ''), dark: Number(is_dark_mode_on) })
+    );
 
     return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} passthrough={passthrough} />;
 };
@@ -83,6 +84,7 @@ Routes.propTypes = {
     error: MobxPropTypes.objectOrObservableObject,
     has_error: PropTypes.bool,
     history: PropTypes.object,
+    is_dark_mode_on: PropTypes.bool,
     is_logged_in: PropTypes.bool,
     is_logging_in: PropTypes.bool,
     is_virtual: PropTypes.bool,
@@ -95,7 +97,8 @@ Routes.propTypes = {
 // need to wrap withRouter around connect
 // to prevent updates on <BinaryRoutes /> from being blocked
 export default withRouter(
-    connect(({ client, common }) => ({
+    connect(({ client, common, ui }) => ({
+        is_dark_mode_on: ui.is_dark_mode_on,
         is_logged_in: client.is_logged_in,
         is_logging_in: client.is_logging_in,
         error: common.error,

diff --git a/packages/shared/src/utils/url/url.ts b/packages/shared/src/utils/url/url.ts
@@ -9,6 +9,11 @@ type TOption = {
     language?: string;
 };
 
+type TQueryObj = {
+    dark: string;
+    lang: string;
+};
+
 const default_domain = 'binary.com';
 const host_map = {
     // the exceptions regarding updating the URLs
@@ -35,6 +40,23 @@ export const urlForLanguage = (lang: string, url: string = window.location.href)
     return `${current_url}`;
 };
 
+export const urlSetQuery = (queryObj: TQueryObj, url: string = window.location.href) => {
+    const current_url = new URL(url);
+
+    Object.entries(queryObj).forEach(element => {
+        const [key, value] = element;
+        if (value) {
+            current_url.searchParams.set(key, value);
+        } else {
+            current_url.searchParams.delete(key);
+        }
+    });
+
+    current_url.searchParams.sort();
+
+    return current_url.toString();
+};
+
 export const reset = () => {
     location_url = window?.location ?? location_url;
 };