feat: integrate auth-client for hydra logout functionality

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@deriv-com/analytics": "^1.18.0",
+    "@deriv-com/auth-client": "^1.0.13",
     "@deriv/deriv-api": "^1.0.11",
     "@deriv/quill-icons": "^1.22.10",
     "@deriv/ui": "^0.8.0",

src/components/AccountSwitcher/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useRef } from 'react';
+import { useOAuth2 } from '@deriv-com/auth-client';
 import { isNotDemoCurrency } from '@site/src/utils';
 import useLogout from '@site/src/hooks/useLogout';
+import useGrowthbookGetFeatureValue from '@site/src/hooks/useGrowthbookGetFeatureValue';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
 import CurrencyIcon from '../CurrencyIcon';
@@ -10,8 +12,18 @@ import styles from './account_switcher.module.scss';
 import SearchButton from '../SearchButton';
 import Translate from '@docusaurus/Translate';
 
+type HydraBEApps = {
+  enabled_for: number[];
+}[];
+
 const AccountSwitcher = () => {
+  const [OAuth2EnabledApps, OAuth2EnabledAppsInitialised] =
+    useGrowthbookGetFeatureValue<HydraBEApps>({
+      featureFlag: 'hydra_be',
+    });
+
   const { logout } = useLogout();
+  const { OAuth2Logout } = useOAuth2({ OAuth2EnabledApps, OAuth2EnabledAppsInitialised }, logout);
 
   const { currentLoginAccount } = useAuthContext();
   const [is_toggle_dropdown, setToggleDropdown] = useState(false);
@@ -57,7 +69,7 @@ const AccountSwitcher = () => {
           </div>
           <div className={styles.logoutButtonContainer}>
             <button
-              onClick={logout}
+              onClick={OAuth2Logout}
               type='button'
               color={'tertiary'}
               className={styles.logoutButton}

src/hooks/useGrowthbookGetFeatureValue/index.tsx

@@ -2,26 +2,28 @@ import { useEffect, useState } from 'react';
 import { Analytics } from '@deriv-com/analytics';
 import useIsGrowthbookIsLoaded from '../useIsGrowthbookLoaded';
 
-interface UseGrowthbookGetFeatureValueArgs<T> {
-  defaultValue?: T;
+type featureValueTypes = Record<string, boolean> | boolean | string | [];
+
+interface UseGrowthbookGetFeatureValueArgs {
+  defaultValue?: featureValueTypes;
   featureFlag: string;
 }
 
-const useGrowthbookGetFeatureValue = <T extends boolean | string>({
+const useGrowthbookGetFeatureValue = <T,>({
   defaultValue,
   featureFlag,
-}: UseGrowthbookGetFeatureValueArgs<T>) => {
-  const resolvedDefaultValue: T = defaultValue !== undefined ? defaultValue : (false as T);
-  const [featureFlagValue, setFeatureFlagValue] = useState(
-    Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) ?? resolvedDefaultValue,
+}: UseGrowthbookGetFeatureValueArgs): [T, boolean] => {
+  const resolvedDefaultValue: featureValueTypes = defaultValue !== undefined ? defaultValue : false;
+  const [featureFlagValue, setFeatureFlagValue] = useState<T>(
+    (Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) ?? resolvedDefaultValue) as T,
   );
   const isGBLoaded = useIsGrowthbookIsLoaded();
 
   useEffect(() => {
     if (isGBLoaded) {
       if (Analytics?.getInstances()?.ab) {
         const setFeatureValue = () => {
-          const value = Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue);
+          const value = Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) as T;
           setFeatureFlagValue(value);
         };
         setFeatureValue();
@@ -33,7 +35,7 @@ const useGrowthbookGetFeatureValue = <T extends boolean | string>({
     }
   }, [isGBLoaded, resolvedDefaultValue, featureFlag]);
 
-  return [featureFlagValue, isGBLoaded];
+  return [featureFlagValue as T, isGBLoaded];
 };
 
 export default useGrowthbookGetFeatureValue;