Merge pull request #28 from thisyahlen-deriv/thisyahlen/analytics

chore: add gb logic and logout logic in lib level

src/hooks/index.ts

@@ -1 +1,2 @@
 export { useOAuth2 } from './useOAuth2';
+export { useIsOAuth2Enabled } from './useIsOAuth2Enabled';

src/hooks/useIsOAuth2Enabled.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import { getServerInfo } from '../constants/';
+
+type hydraBEApps = {
+    enabled_for: number[];
+};
+
+/**
+ * Custom hook to determine whether OAuth2 is enabled for a given app id.
+ * @param {hydraBEApps[]} OAuth2EnabledApps - an array of Hydra enabled apps
+ * @param {boolean} OAuth2EnabledAppsInitialised - a flag indicating whether the array has been initialised
+ * @returns {boolean} - a boolean indicating whether OAuth2 is enabled for the current app id
+ */
+export const useIsOAuth2Enabled = (
+    OAuth2EnabledApps: hydraBEApps[],
+    OAuth2EnabledAppsInitialised: boolean
+): boolean => {
+    const [isOAuth2Enabled, setIsOAuth2Enabled] = useState<boolean>(false);
+    const { appId } = getServerInfo();
+
+    useEffect(() => {
+        if (OAuth2EnabledAppsInitialised) {
+            const FEHydraAppIds = OAuth2EnabledApps.length
+                ? (OAuth2EnabledApps[OAuth2EnabledApps.length - 1]?.enabled_for ?? [])
+                : [];
+            setIsOAuth2Enabled(FEHydraAppIds.includes(+(appId as string)));
+        }
+    }, [OAuth2EnabledAppsInitialised, OAuth2EnabledApps, appId]);
+
+    return isOAuth2Enabled;
+};

src/hooks/useOAuth2.ts

@@ -1,19 +1,35 @@
 import { useEffect, useCallback } from 'react';
 import { getOAuthLogoutUrl, getOAuthOrigin } from '../constants/';
+import { useIsOAuth2Enabled } from './useIsOAuth2Enabled';
 
 type MessageEvent = {
     data: 'logout_complete' | 'logout_error';
     origin: string;
 };
 
+type hydraBEApps = {
+    enabled_for: number[];
+};
+
+type OAuth2GBConfig = {
+    OAuth2EnabledApps: hydraBEApps[];
+    OAuth2EnabledAppsInitialised: boolean;
+};
+
 /**
  * Custom hook to handle OAuth2 logout and redirection.
  *
+ * @param {OAuth2Config} config - Configuration object containing OAuth2 enabled apps flag and initialisation flag.
  * @param {(oauthUrl: string) => Promise<void>} WSLogoutAndRedirect - Function to handle logout and redirection.
  * @returns {{ OAuth2Logout: () => Promise<void> }} - Object containing the OAuth2Logout function.
  */
-export const useOAuth2 = (WSLogoutAndRedirect: () => Promise<void>) => {
+export const useOAuth2 = (OAuth2GrowthBookConfig: OAuth2GBConfig, WSLogoutAndRedirect: () => Promise<void>) => {
+    const { OAuth2EnabledApps, OAuth2EnabledAppsInitialised } = OAuth2GrowthBookConfig;
+    const isOAuth2Enabled = useIsOAuth2Enabled(OAuth2EnabledApps, OAuth2EnabledAppsInitialised);
+
     useEffect(() => {
+        if (!isOAuth2Enabled) return;
+
         const onMessage = async (event: MessageEvent) => {
             const allowedOrigin = getOAuthOrigin();
             if (allowedOrigin === event.origin) {
@@ -29,9 +45,14 @@ export const useOAuth2 = (WSLogoutAndRedirect: () => Promise<void>) => {
 
         window.addEventListener('message', onMessage);
         return () => window.removeEventListener('message', onMessage);
-    }, [WSLogoutAndRedirect]);
+    }, [isOAuth2Enabled, WSLogoutAndRedirect]);
 
     const OAuth2Logout = useCallback(async () => {
+        if (!isOAuth2Enabled) {
+            WSLogoutAndRedirect();
+            return;
+        }
+
         let iframe: HTMLIFrameElement | null = document.getElementById('logout-iframe') as HTMLIFrameElement;
         if (!iframe) {
             iframe = document.createElement('iframe');
@@ -49,7 +70,7 @@ export const useOAuth2 = (WSLogoutAndRedirect: () => Promise<void>) => {
         iframe.onerror = error => {
             console.error('There has been a problem with the logout: ', error);
         };
-    }, [WSLogoutAndRedirect]);
+    }, [isOAuth2Enabled, WSLogoutAndRedirect]);
 
     return { OAuth2Logout };
 };