Merge pull request #164 from shafin-deriv/shafin/BOT-2452/chore-acc-s…

…witcher-bugs chore: fix logout issue and account switcher style issues
deriv-com · Dec 2, 2024 · 1a6f282 · 1a6f282
2 parents 736ee31 + 2f7d0bd
commit 1a6f282
Show file tree

Hide file tree

Showing 10 changed files with 288 additions and 193 deletions.
diff --git a/src/app/CoreStoreProvider.tsx b/src/app/CoreStoreProvider.tsx
@@ -21,7 +21,7 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c
 
     const { currentLang } = useTranslations();
 
-    const { oAuthLogout } = useOauth2({ handleLogout: async () => client.logout() });
+    const { oAuthLogout } = useOauth2({ handleLogout: async () => client.logout(), client });
 
     const activeAccount = useMemo(
         () => accountList?.find(account => account.loginid === activeLoginid),

diff --git a/src/components/layout/header/account-switcher.tsx b/src/components/layout/header/account-switcher.tsx
diff --git a/src/components/layout/header/header.scss b/src/components/layout/header/header.scss
@@ -32,6 +32,7 @@
             justify-content: space-between;
             align-items: center;
             padding: 0 1rem;
+            background-color: var(--general-main-1);
 
             &--hide-manage-button {
                 justify-content: flex-end;
@@ -167,6 +168,16 @@
             margin-inline-end: 1rem;
             font-size: var(--text-size-xs);
         }
+
+        &--loader {
+            display: flex;
+            justify-content: flex-end;
+            padding: 16px;
+        }
+    }
+
+    &__tradershub-link {
+        background: var(--general-main-1);
     }
 
     &__footer {

diff --git a/src/components/layout/header/mobile-menu/menu-content.tsx b/src/components/layout/header/mobile-menu/menu-content.tsx
@@ -1,12 +1,15 @@
 import clsx from 'clsx';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@/hooks/useStore';
 import { MenuItem, Text, useDevice } from '@deriv-com/ui';
 import PlatformSwitcher from '../platform-switcher';
 import useMobileMenuConfig from './use-mobile-menu-config';
 
-const MenuContent = () => {
+const MenuContent = observer(() => {
     const { isDesktop } = useDevice();
+    const { client } = useStore();
     const textSize = isDesktop ? 'sm' : 'md';
-    const { config } = useMobileMenuConfig();
+    const { config } = useMobileMenuConfig(client);
 
     return (
         <div className='mobile-menu__content'>
@@ -78,6 +81,6 @@ const MenuContent = () => {
             </div>
         </div>
     );
-};
+});
 
 export default MenuContent;
diff --git a/src/components/layout/header/mobile-menu/use-mobile-menu-config.tsx b/src/components/layout/header/mobile-menu/use-mobile-menu-config.tsx
@@ -1,10 +1,11 @@
 import { ComponentProps, ReactNode } from 'react';
 import Livechat from '@/components/chat/Livechat';
+import useIsLiveChatWidgetAvailable from '@/components/chat/useIsLiveChatWidgetAvailable';
 import { standalone_routes } from '@/components/shared';
 import { useOauth2 } from '@/hooks/auth/useOauth2';
 import useRemoteConfig from '@/hooks/growthbook/useRemoteConfig';
-import { useStore } from '@/hooks/useStore';
 import useThemeSwitcher from '@/hooks/useThemeSwitcher';
+import RootStore from '@/stores/root-store';
 import { ACCOUNT_LIMITS, HELP_CENTRE, RESPONSIBLE } from '@/utils/constants';
 import {
     LegacyAccountLimitsIcon,
@@ -31,23 +32,24 @@ type TMenuConfig = {
     RightComponent?: ReactNode;
     as: 'a' | 'button';
     href?: string;
-    label: string;
+    label: ReactNode;
     onClick?: () => void;
     removeBorderBottom?: boolean;
     submenu?: TSubmenuSection;
     target?: ComponentProps<'a'>['target'];
 }[];
 
-const useMobileMenuConfig = () => {
+const useMobileMenuConfig = (client?: RootStore['client']) => {
     const { localize } = useTranslations();
     const { is_dark_mode_on, toggleTheme } = useThemeSwitcher();
-    const { client } = useStore();
 
-    const { oAuthLogout } = useOauth2({ handleLogout: async () => client.logout() });
+    const { oAuthLogout } = useOauth2({ handleLogout: async () => client?.logout(), client });
 
     const { data } = useRemoteConfig(true);
     const { cs_chat_whatsapp } = data;
 
+    const { is_livechat_available } = useIsLiveChatWidgetAvailable();
+
     const menuConfig: TMenuConfig[] = [
         [
             {
@@ -116,27 +118,31 @@ const useMobileMenuConfig = () => {
                           target: '_blank',
                       }
                     : null,
-                {
-                    as: 'button',
-                    label: localize('Live chat'),
-                    LeftComponent: Livechat,
-                    onClick: () => {
-                        window.enable_freshworks_live_chat
-                            ? window.fcWidget.open()
-                            : window.LiveChatWidget?.call('maximize');
-                    },
-                },
+                is_livechat_available
+                    ? {
+                          as: 'button',
+                          label: localize('Live chat'),
+                          LeftComponent: Livechat,
+                          onClick: () => {
+                              window.enable_freshworks_live_chat
+                                  ? window.fcWidget.open()
+                                  : window.LiveChatWidget?.call('maximize');
+                          },
+                      }
+                    : null,
             ] as TMenuConfig
         ).filter(Boolean),
-        [
-            {
-                as: 'button',
-                label: localize('Log out'),
-                LeftComponent: LegacyLogout1pxIcon,
-                onClick: oAuthLogout,
-                removeBorderBottom: true,
-            },
-        ],
+        client?.is_logged_in
+            ? [
+                  {
+                      as: 'button',
+                      label: localize('Log out'),
+                      LeftComponent: LegacyLogout1pxIcon,
+                      onClick: oAuthLogout,
+                      removeBorderBottom: true,
+                  },
+              ]
+            : [],
     ];
 
     return {

diff --git a/src/components/loader/rectangle-skeleton/index.tsx b/src/components/loader/rectangle-skeleton/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import './rectangle-skeleton.scss';
+
+const RectangleSkeleton: React.FC<{ width: string; height: string }> = ({ width, height }) => {
+    return <div className='skeleton' style={{ width, height }} />;
+};
+
+export default RectangleSkeleton;
diff --git a/src/components/loader/rectangle-skeleton/rectangle-skeleton.scss b/src/components/loader/rectangle-skeleton/rectangle-skeleton.scss
@@ -0,0 +1,15 @@
+.skeleton {
+    background: linear-gradient(90deg, var(--general-main-1) 25%, var(--general-main-2) 50%, var(--general-main-3) 75%)
+        0 0 / 200% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
diff --git a/src/components/shared_ui/wallet-icon/wallet-icon.scss b/src/components/shared_ui/wallet-icon/wallet-icon.scss
@@ -11,8 +11,7 @@
 
     &__default-bg {
         // Default Background
-        background: radial-gradient(100% 4130.74% at 0% 100%, rgb(244 67 54 / 24%) 0%, rgb(40 57 145 / 48%) 100%)
-            #fff;
+        background: radial-gradient(100% 4130.74% at 0% 100%, rgb(244 67 54 / 24%) 0%, rgb(40 57 145 / 48%) 100%) #fff;
     }
 
     &--xsmall {

diff --git a/src/hooks/auth/useOauth2.ts b/src/hooks/auth/useOauth2.ts
@@ -1,3 +1,4 @@
+import RootStore from '@/stores/root-store';
 import { TOAuth2EnabledAppList, useIsOAuth2Enabled, useOAuth2 } from '@deriv-com/auth-client';
 import useGrowthbookGetFeatureValue from '../growthbook/useGrowthbookGetFeatureValue';
 
@@ -14,7 +15,13 @@ import useGrowthbookGetFeatureValue from '../growthbook/useGrowthbookGetFeatureV
  * @param {{ handleLogout?: () => Promise<void> }} [options] - An object with an optional `handleLogout` property.
  * @returns {{ isOAuth2Enabled: boolean; oAuthLogout: () => Promise<void> }}
  */
-export const useOauth2 = ({ handleLogout }: { handleLogout?: () => Promise<void> } = {}) => {
+export const useOauth2 = ({
+    handleLogout,
+    client,
+}: {
+    handleLogout?: () => Promise<void>;
+    client?: RootStore['client'];
+} = {}) => {
     const { featureFlagValue: oAuth2EnabledApps, isGBLoaded: OAuth2EnabledAppsInitialised } =
         useGrowthbookGetFeatureValue<string>({
             featureFlag: 'hydra_be',
@@ -31,5 +38,11 @@ export const useOauth2 = ({ handleLogout }: { handleLogout?: () => Promise<void>
     };
 
     const { OAuth2Logout: oAuthLogout } = useOAuth2(oAuthGrowthbookConfig, handleLogout ?? (() => Promise.resolve()));
-    return { isOAuth2Enabled, oAuthLogout };
+
+    const logoutHandler = async () => {
+        client?.setIsLoggingOut(true);
+        await oAuthLogout();
+    };
+
+    return { isOAuth2Enabled, oAuthLogout: logoutHandler };
 };
diff --git a/src/stores/client-store.ts b/src/stores/client-store.ts
@@ -25,6 +25,7 @@ export default class ClientStore {
     accounts: Record<string, TAuthData['account_list'][number]> = {};
     is_landing_company_loaded = false;
     all_accounts_balance: Balance | null = null;
+    is_logging_out = false;
 
     // TODO: fix with self exclusion
     updateSelfExclusion = () => {};
@@ -43,6 +44,7 @@ export default class ClientStore {
             loginid: observable,
             upgradeable_landing_companies: observable,
             website_status: observable,
+            is_logging_out: observable,
             active_accounts: computed,
             clients_country: computed,
             is_bot_allowed: computed,
@@ -64,6 +66,7 @@ export default class ClientStore {
             setBalance: action,
             setCurrency: action,
             setIsLoggedIn: action,
+            setIsLoggingOut: action,
             setLandingCompany: action,
             setLoginId: action,
             setWebsiteStatus: action,
@@ -274,6 +277,10 @@ export default class ClientStore {
         this.all_accounts_balance = all_accounts_balance ?? null;
     };
 
+    setIsLoggingOut = (is_logging_out: boolean) => {
+        this.is_logging_out = is_logging_out;
+    };
+
     logout = () => {
         // reset all the states
         this.account_list = [];
@@ -298,6 +305,8 @@ export default class ClientStore {
         setAccountList([]);
         setAuthData(null);
 
+        this.setIsLoggingOut(false);
+
         // disable livechat
         window.LC_API?.close_chat?.();
         window.LiveChatWidget?.call('hide');