feat: add remote toggle for livechat and whatsapp

.github/workflows/remote_config_pr.yml

@@ -16,7 +16,7 @@ jobs:
   download_remote_config_backup_and_create_pr:
     name: Download Remote Config Backup File and Create PR
     runs-on: ubuntu-latest
-    environment: Staging
+    environment: Production
     env: 
         REMOTE_CONFIG_BRANCH: "remote_config_update_branch"
     steps:

src/javascript/_common/remote_config.json

@@ -1 +1 @@
-{"cs_chat_livechat":true,"cs_chat_whatsapp":true,"marketing_growthbook":true,"passkeys":true,"tracking_GTM":true,"tracking_datadog":false,"tracking_hotjar":true,"tracking_rudderstack":true}
+{"cs_chat_livechat":true,"cs_chat_whatsapp":true,"marketing_growthbook":true,"passkeys":true,"tracking_GTM":true,"tracking_datadog":false,"tracking_hotjar":true,"tracking_rudderstack":true}

src/javascript/app/base/header.js

@@ -25,6 +25,7 @@ const Language                 = require('../../_common/language');
 const mapCurrencyName          = require('../../_common/base/currency_base').mapCurrencyName;
 const isEuCountry              = require('../common/country_base').isEuCountry;
 const DerivIFrame              = require('../pages/deriv_iframe.jsx');
+const getRemoteConfig          = require('../hooks/useRemoteConfig').getRemoteConfig;
 
 const header_icon_base_path = '/images/pages/header/';
 const wallet_header_icon_base_path = '/images/pages/header/wallets/';
@@ -60,8 +61,30 @@ const Header = (() => {
         fullscreen_map.event.forEach(event => {
             document.addEventListener(event, onFullScreen, false);
         });
+        applyFeatureFlags();
     };
-
+
+    const applyFeatureFlags = () => {
+        getRemoteConfig(true)
+            .then(data => {
+                const { cs_chat_livechat, cs_chat_whatsapp } = data.data;
+                const mobile_menu_livechat                   = getElementById('mobile__menu-livechat');
+                const livechat                               = getElementById('livechat');
+                const topbar_whatsapp                        = getElementById('topbar-whatsapp');
+                const whatsapp_mobile_drawer                 = getElementById('whatsapp-mobile-drawer');
+
+                const livechatDisplay = cs_chat_livechat ? 'inline-flex' : 'none';
+                mobile_menu_livechat.style.display = livechatDisplay;
+                livechat.style.display            = livechatDisplay;
+
+                const whatsappDisplay = cs_chat_whatsapp ? 'inline-flex' : 'none';
+                topbar_whatsapp.style.display        = whatsappDisplay;
+                whatsapp_mobile_drawer.style.display = whatsappDisplay;
+            })
+            // eslint-disable-next-line no-console
+            .catch(error => console.error('Error fetching feature flags:', error));
+    };
+
     const switchHeaders = () => {
         const regular_header = getElementById('regular__header');
         const wallet_header = getElementById('wallet__header');

src/javascript/app/hooks/useRemoteConfig.js

@@ -0,0 +1,51 @@
+const ObjectUtils = require('@deriv-com/utils').ObjectUtils;
+const initData = require('../../_common/remote_config.json');
+
+const RemoteConfig = (() => {
+    let data = initData;
+    let isEnabled = false;
+
+    const remoteConfigQuery = async function () {
+        const isProductionOrStaging = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging';
+        const REMOTE_CONFIG_URL = process.env.REMOTE_CONFIG_URL || '';
+        if (isProductionOrStaging && REMOTE_CONFIG_URL === '') {
+            throw new Error('Remote Config URL is not set!');
+        }
+        const response = await fetch(REMOTE_CONFIG_URL);
+        if (!response.ok) {
+            throw new Error('Remote Config Server is out of reach!');
+        }
+        return response.json();
+    };
+
+    const fetchAndUpdateData = async () => {
+        if (!isEnabled) return data;
+
+        try {
+            const res = await remoteConfigQuery();
+            const resHash = await ObjectUtils.hashObject(res);
+            const dataHash = await ObjectUtils.hashObject(data);
+            if (resHash !== dataHash) {
+                data = res;
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.log('Remote Config error: ', error);
+        }
+        return data;
+    };
+
+    const getRemoteConfig = async (enabled = false) => {
+        isEnabled = enabled;
+        if (isEnabled) {
+            await fetchAndUpdateData();
+        }
+        return { data };
+    };
+
+    return {
+        getRemoteConfig,
+    };
+})();
+
+module.exports = RemoteConfig;