Merge pull request #229 from deriv-com/ako/add-gb-feature-flag

Ako/ add gb feature flag

.github/workflows/build-and-deploy-prod.yml

@@ -50,6 +50,7 @@ jobs:
                 VITE_GROWTHBOOK_CLIENT_KEY: ${{ vars.VITE_GROWTHBOOK_CLIENT_KEY }}
                 VITE_RUDDERSTACK_KEY: ${{ vars.VITE_RUDDERSTACK_KEY }}
                 VITE_REMOTE_CONFIG_URL: ${{ vars.VITE_REMOTE_CONFIG_URL }}
+                VITE_NODE_ENV: production
 
             - name: Run tests for Eslint
               run: npm run test:lint

.github/workflows/build-and-deploy-staging.yml

@@ -48,6 +48,7 @@ jobs:
                 VITE_GROWTHBOOK_CLIENT_KEY: ${{ vars.VITE_GROWTHBOOK_CLIENT_KEY }}
                 VITE_RUDDERSTACK_KEY: ${{ vars.VITE_RUDDERSTACK_KEY }}
                 VITE_REMOTE_CONFIG_URL: ${{ vars.VITE_REMOTE_CONFIG_URL }}
+                VITE_NODE_ENV: staging
 
 
             - name: Run tests for Eslintbuild_to_cloudflare_pages

src/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -7,13 +7,18 @@ import { useDerivAnalytics, useRedirectToOauth, useTrackjs } from '@/hooks';
 import AppContent from '@/routes/AppContent';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { Loader, useDevice } from '@deriv-com/ui';
+import { URLConstants } from '@deriv-com/utils';
+import useGrowthbookGetFeatureValue from './hooks/custom-hooks/useGrowthbookGetFeatureValue';
 
 const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = process.env;
 const i18nInstance = initializeI18n({
     cdnUrl: `${VITE_TRANSLATIONS_CDN_URL}/${VITE_PROJECT_NAME}/${VITE_CROWDIN_BRANCH_NAME}`,
 });
 
 const App = () => {
+    const [ShouldRedirectToDerivApp, isGBLoaded] = useGrowthbookGetFeatureValue({
+        featureFlag: 'redirect_to_deriv_app_p2p',
+    });
     const { init: initTrackJS } = useTrackjs();
     const { isDesktop } = useDevice();
     const { redirectToOauth } = useRedirectToOauth();
@@ -23,6 +28,13 @@ const App = () => {
     initDerivAnalytics();
     redirectToOauth();
 
+    useEffect(() => {
+        if (isGBLoaded && ShouldRedirectToDerivApp) {
+            const NODE_ENV = process.env.VITE_NODE_ENV;
+            const APP_URL = NODE_ENV === 'production' ? URLConstants.derivAppProduction : URLConstants.derivAppStaging;
+            window.location.href = `${APP_URL}/cashier/p2p`;
+        }
+    }, [isGBLoaded, ShouldRedirectToDerivApp]);
     return (
         <BrowserRouter>
             {/* TODO: Replace the fallback element with the ErrorComponent */}

src/hooks/custom-hooks/useGrowthbookGetFeatureValue.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { Analytics } from '@deriv-com/analytics';
+import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded';
+
+interface UseGrowthbookGetFeatureValueArgs<T> {
+    defaultValue?: T;
+    featureFlag: string;
+}
+
+const useGrowthbookGetFeatureValue = <T extends boolean | string>({
+    defaultValue,
+    featureFlag,
+}: UseGrowthbookGetFeatureValueArgs<T>) => {
+    const resolvedDefaultValue: T = defaultValue !== undefined ? defaultValue : (false as T);
+    const [featureFlagValue, setFeatureFlagValue] = useState(
+        Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) ?? resolvedDefaultValue
+    );
+    const isGBLoaded = useIsGrowthbookIsLoaded();
+
+    useEffect(() => {
+        if (isGBLoaded) {
+            if (Analytics?.getInstances()?.ab) {
+                const setFeatureValue = () => {
+                    const value = Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue);
+                    setFeatureFlagValue(value);
+                };
+                setFeatureValue();
+                Analytics?.getInstances()?.ab?.GrowthBook?.setRenderer(() => {
+                    // this will be called whenever the feature flag value changes and acts as a event listener
+                    setFeatureValue();
+                });
+            }
+        }
+    }, [isGBLoaded, resolvedDefaultValue, featureFlag]);
+
+    return [featureFlagValue, isGBLoaded];
+};
+
+export default useGrowthbookGetFeatureValue;

src/hooks/custom-hooks/useIsGrowthbookLoaded.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { Analytics } from '@deriv-com/analytics';
+
+const useIsGrowthbookIsLoaded = () => {
+    const [isGBLoaded, setIsGBLoaded] = useState(false);
+
+    useEffect(() => {
+        let checksCounter = 0;
+        const analyticsInterval: NodeJS.Timeout = setInterval(() => {
+            // Check if the analytics instance is available for 10 seconds before setting the feature flag value
+            if (checksCounter > 20) {
+                // If the analytics instance is not available after 10 seconds, clear the interval
+                clearInterval(analyticsInterval);
+                return;
+            }
+            checksCounter += 1;
+            if (Analytics?.getInstances()?.ab) {
+                setIsGBLoaded(true);
+                clearInterval(analyticsInterval);
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(analyticsInterval);
+        };
+    }, []);
+
+    return isGBLoaded;
+};
+
+export default useIsGrowthbookIsLoaded;