From 7c6f41d052ebd789f3378de9e84d623e0948884a Mon Sep 17 00:00:00 2001
From: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com>
Date: Thu, 29 Feb 2024 19:26:04 +0800
Subject: [PATCH] Fasih/DPROD-3590/integrate firebase feature flag for third
 party items (#7149)

* feat: implement json which contain items name

* feat: adding flag on third party packages

* feat: implemented flag on trade platfrom apps

* feat: removed unsued code

* feat: made some items value false

* feat: enabled all items

* feat: add condition for derivgo footer badge

* feat: updated keys

* feat: interated api and hook

* feat: updated hook with importing function

* feat: updated hook and filtered footer icon data

* feat: remvoed hotjar and gtm from flags

* feat: removed unused code

* feat: made every item true

* feat: updated other layout files

* feat: updated the condition

---------

Co-authored-by: fasihali-deriv <muhammad.fasih@deriv.com>
Co-authored-by: Muhammad Fasih Ali Naqvi <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard.local>
---
 gatsby-ssr.js                                 |  12 +-
 .../custom/_multi-width-column-download.tsx   |  93 ++++++------
 .../hooks/use-third-party-flags.tsx           |  53 +++++++
 src/components/layout/layout-overlay.tsx      |   7 +-
 .../molecules/layout-overlay/index.tsx        |   7 +-
 .../components/quill/layout-overlay/index.tsx |   7 +-
 .../templates/footer/deriv-go-banner.tsx      |  43 +++---
 .../components/templates/footer/download.tsx  |  50 ++++---
 .../components/templates/footer/index.tsx     |  27 +++-
 .../pages/deriv-ctrader/get-trading/index.tsx |  19 ++-
 src/features/pages/home/index.tsx             |  13 +-
 .../data-provider/index.tsx                   |   2 +-
 .../form-container/form-social-buttons.tsx    | 140 ++++++++++--------
 src/pages/contact_us/index.tsx                |   4 +-
 src/pages/deriv-go/_footer-banner.tsx         |  30 +++-
 src/pages/deriv-go/index.tsx                  |   4 +-
 src/pages/derivx/_get-derivx.tsx              |  29 +++-
 src/pages/dmt5/_download-app.tsx              |  69 +++++++--
 .../components/_didnt-find-answer.tsx         |  13 +-
 .../components/_search-section.tsx            |   4 +-
 static/appConfig.js                           |  57 +++++++
 21 files changed, 488 insertions(+), 195 deletions(-)
 create mode 100644 src/components/hooks/use-third-party-flags.tsx
 create mode 100644 static/appConfig.js

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 31bc3864b5e..d8f34f3a386 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -38,25 +38,25 @@ export const onRenderBody = ({ setHeadComponents }) => {
         />,
 
         // GTM setup
-        gtmTrackingId && (
+        (gtmTrackingId && (
             <script
                 key="gtm-script"
                 type="text/partytown"
                 async
                 src={`https://www.googletagmanager.com/gtm.js?id=${gtmTrackingId}`}
             ></script>
-        ),
-        gtmTrackingId && (
+        )),
+        (gtmTrackingId && (
             <script
                 key="gtm-script"
                 dangerouslySetInnerHTML={{
                     __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', '${gtmTrackingId}');`,
                 }}
             />
-        ),
+        )),
 
         // Hotjar setup
-        hotjarId && (
+        (hotjarId && (
             <script
                 key="hotjar-script"
                 dangerouslySetInnerHTML={{
@@ -72,6 +72,6 @@ export const onRenderBody = ({ setHeadComponents }) => {
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
                 }}
             />
-        ),
+        )),
     ])
 }
diff --git a/src/components/custom/_multi-width-column-download.tsx b/src/components/custom/_multi-width-column-download.tsx
index d574006a97f..e0da61d8669 100644
--- a/src/components/custom/_multi-width-column-download.tsx
+++ b/src/components/custom/_multi-width-column-download.tsx
@@ -11,6 +11,7 @@ export type TDownloadColumnItem = {
     icon: string
     link: string
     smallText?: TString
+    visibility?: boolean
 }
 
 type TDownloadColumn = {
@@ -75,50 +76,58 @@ const StyledItemsWrapper = styled.div`
 `
 
 const DownloadColumn = ({ items, QRImage, QRHeading1, QRHeading2, is_rtl }: TDownloadColumn) => {
+    const renderableItems = items.filter((item) => item.visibility)
+    const containsHiddenItem = items.some((item) => !item.visibility)
+    const isAllItemsAreHidden = items.every((item) => !item.visibility)
+
     return (
         <Flex ai="center">
-            <DownloadAppWrapper is_rtl={is_rtl}>
-                <QRScanBox>
-                    <img
-                        width="64px"
-                        height="64px"
-                        src={QRImage}
-                        alt={localize('_t_Deriv GO QR_t_')}
-                    />
-                    <div>
-                        <StyledHeading as="p" weight="100">
-                            <Localize translate_text={QRHeading1} />
-                        </StyledHeading>
-                        <StyledHeading as="h5" weight="700">
-                            <Localize translate_text={QRHeading2} />
-                        </StyledHeading>
-                    </div>
-                </QRScanBox>
-                <DownloadAppOsLinks>
-                    <StyledItemsWrapper>
-                        {items.map(({ icon, link, text, smallText }) => (
-                            <StyledItems key={text}>
-                                <StyledOsIcon src={icon} alt={localize('_t_OS icon_t_')} />
-                                <AppButton
-                                    external
-                                    to={link}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    {smallText && (
-                                        <StyledItemSmallText as="p" weight="400">
-                                            <Localize translate_text={smallText} />
-                                        </StyledItemSmallText>
-                                    )}
-                                    <StyledItemText as="p" weight="700">
-                                        {text}
-                                    </StyledItemText>
-                                </AppButton>
-                            </StyledItems>
-                        ))}
-                    </StyledItemsWrapper>
-                </DownloadAppOsLinks>
-            </DownloadAppWrapper>
+            {!isAllItemsAreHidden && (
+                <DownloadAppWrapper is_rtl={is_rtl}>
+                    <QRScanBox>
+                        <img
+                            width="64px"
+                            height="64px"
+                            src={QRImage}
+                            alt={localize('_t_Deriv GO QR_t_')}
+                        />
+                        <div>
+                            <StyledHeading as="p" weight="100">
+                                <Localize translate_text={QRHeading1} />
+                            </StyledHeading>
+                            {!containsHiddenItem && (
+                                <StyledHeading as="h5" weight="700">
+                                    <Localize translate_text={QRHeading2} />
+                                </StyledHeading>
+                            )}
+                        </div>
+                    </QRScanBox>
+                    <DownloadAppOsLinks>
+                        <StyledItemsWrapper>
+                            {renderableItems.map(({ icon, link, text, smallText }) => (
+                                <StyledItems key={text}>
+                                    <StyledOsIcon src={icon} alt={localize('_t_OS icon_t_')} />
+                                    <AppButton
+                                        external
+                                        to={link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        {smallText && (
+                                            <StyledItemSmallText as="p" weight="400">
+                                                <Localize translate_text={smallText} />
+                                            </StyledItemSmallText>
+                                        )}
+                                        <StyledItemText as="p" weight="700">
+                                            {text}
+                                        </StyledItemText>
+                                    </AppButton>
+                                </StyledItems>
+                            ))}
+                        </StyledItemsWrapper>
+                    </DownloadAppOsLinks>
+                </DownloadAppWrapper>
+            )}
         </Flex>
     )
 }
diff --git a/src/components/hooks/use-third-party-flags.tsx b/src/components/hooks/use-third-party-flags.tsx
new file mode 100644
index 00000000000..bc2e84f6713
--- /dev/null
+++ b/src/components/hooks/use-third-party-flags.tsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react'
+import { initializeApp } from 'firebase/app'
+import { getDatabase, ref, onValue } from 'firebase/database'
+// import useRegion from 'components/hooks/use-region'
+import featuresConfig from '../../../static/appConfig'
+
+const thirdPartyFlagsConfig = {
+    databaseURL: 'https://app-config-staging.firebaseio.com',
+}
+
+const useThirdPartyFlags = (featurePath) => {
+    const [data, setData] = useState(featuresConfig)
+    const [feature, setFeature] = useState(null)
+
+    useEffect(() => {
+        const app = initializeApp(thirdPartyFlagsConfig, 'thirdPartyFlagsConfig')
+        const db = getDatabase(app)
+
+        // let fetchedData = featuresConfig
+        const starCountRef = ref(db, 'remote_config/deriv-com')
+        const flagsData = onValue(
+            starCountRef,
+            (snapshot) => {
+                setData(snapshot.val())
+            },
+            (error) => {
+                console.error(error)
+            },
+        )
+        return flagsData
+    }, [])
+
+    useEffect(() => {
+        const pathParts = featurePath.split('.')
+        let currentFeature = data
+
+        for (const part of pathParts) {
+            if (currentFeature[part] === undefined) {
+                return // Feature path does not exist
+            }
+            currentFeature = currentFeature[part]
+        }
+        if (typeof currentFeature === 'object') {
+            setFeature(currentFeature)
+        } else {
+            setFeature(Boolean(currentFeature))
+        }
+    }, [data, featurePath])
+
+    return feature
+}
+
+export default useThirdPartyFlags
diff --git a/src/components/layout/layout-overlay.tsx b/src/components/layout/layout-overlay.tsx
index e717f7f4819..b81e0248cd9 100644
--- a/src/components/layout/layout-overlay.tsx
+++ b/src/components/layout/layout-overlay.tsx
@@ -5,6 +5,7 @@ import { useIsRtl } from 'components/hooks/use-isrtl'
 import BannerAlert from 'components/custom/_banner-alert'
 import { bannerTypes } from 'common/constants'
 import CfdWarningBanner from 'features/components/molecules/layout-overlay/cfd-warning-banner'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const LiveChat = Loadable(() => import('./livechat'))
 const WhatsApp = Loadable(() => import('./whatsapp'))
@@ -22,11 +23,13 @@ const OverlayContainer = styled.div<{ is_rtl: boolean }>`
 
 const LayoutOverlay = () => {
     const is_rtl = useIsRtl()
+    const isLiveChat = useThirdPartyFlags('chat.live_chat')
+    const isWhatsappChat = useThirdPartyFlags('chat.whatsapp_chat')
 
     return (
         <OverlayContainer is_rtl={is_rtl} id="overlay-container">
-            <LiveChat />
-            <WhatsApp />
+            {isLiveChat && <LiveChat />}
+            {isWhatsappChat && <WhatsApp />}
             <BannerAlert bannerType={bannerTypes.cookieBanner} />
             <CfdWarningBanner />
         </OverlayContainer>
diff --git a/src/features/components/molecules/layout-overlay/index.tsx b/src/features/components/molecules/layout-overlay/index.tsx
index 68df3b275f4..dba93ab0469 100644
--- a/src/features/components/molecules/layout-overlay/index.tsx
+++ b/src/features/components/molecules/layout-overlay/index.tsx
@@ -6,6 +6,7 @@ import CfdWarningBanner from './cfd-warning-banner'
 import Flex from 'features/components/atoms/flex-box'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const LiveChatButton = loadable(() => pMinDelay(import('./live-chat-button'), 5000))
 const WhatsappButton = loadable(() => pMinDelay(import('./whats-app-button'), 5000))
@@ -14,6 +15,8 @@ const CookieBanner = loadable(() => pMinDelay(import('./cookie-banner'), 5000))
 const LayoutOverlay = () => {
     const is_rtl = useIsRtl()
     const [is_mounted] = usePageLoaded()
+    const isLiveChat = useThirdPartyFlags('chat.live_chat')
+    const isWhatsappChat = useThirdPartyFlags('chat.whatsapp_chat')
 
     return (
         <Flex.Box
@@ -35,8 +38,8 @@ const LayoutOverlay = () => {
                     <CookieBanner />
                 </Flex.Box>
                 <Flex.Box direction="col">
-                    <LiveChatButton />
-                    <WhatsappButton />
+                    {isLiveChat && <LiveChatButton />}
+                    {isWhatsappChat && <WhatsappButton />}
                 </Flex.Box>
             </Flex.Box>
             {is_mounted && <CfdWarningBanner />}
diff --git a/src/features/components/quill/layout-overlay/index.tsx b/src/features/components/quill/layout-overlay/index.tsx
index 5f1eda0026c..cbf33d08573 100644
--- a/src/features/components/quill/layout-overlay/index.tsx
+++ b/src/features/components/quill/layout-overlay/index.tsx
@@ -6,6 +6,7 @@ import { wrapper_ltr, wrapper_rtl } from './styles.module.scss'
 import CfdWarningBanner from './cfd-warning-banner'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 
 const LiveChatButton = loadable(() => pMinDelay(import('./live-chat-button'), 5000))
@@ -20,6 +21,8 @@ function calculatePercentageOfNumber(percentage: number, number: number) {
 const LayoutOverlay = () => {
     const is_rtl = useIsRtl()
     const { visibilityPercentage } = useFloatingCtaContext()
+    const isLiveChat = useThirdPartyFlags('chat.live_chat')
+    const isWhatsappChat = useThirdPartyFlags('chat.whatsapp_chat')
     const [is_mounted] = usePageLoaded()
 
     return (
@@ -50,8 +53,8 @@ const LayoutOverlay = () => {
                         )}px`,
                     }}
                 >
-                    <LiveChatButton />
-                    <WhatsappButton />
+                    {isLiveChat && <LiveChatButton />}
+                    {isWhatsappChat && <WhatsappButton />}
                 </div>
             </div>
             {is_mounted && <CfdWarningBanner />}
diff --git a/src/features/components/templates/footer/deriv-go-banner.tsx b/src/features/components/templates/footer/deriv-go-banner.tsx
index 2f86fa29c57..55d9ba0ab40 100644
--- a/src/features/components/templates/footer/deriv-go-banner.tsx
+++ b/src/features/components/templates/footer/deriv-go-banner.tsx
@@ -8,9 +8,16 @@ import { footer_qr_box } from './styles.module.scss'
 import derivGoQR from 'images/common/migration/footer/deriv-go-qr.svg'
 import { Localize, localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 export const DerivGoBanner = () => {
     const { is_row } = useRegion()
+
+    const deriv_go_apps_app_gallery = useThirdPartyFlags('deriv_go_apps.app_gallery')
+    const deriv_go_apps_android = useThirdPartyFlags('deriv_go_apps.android')
+    const deriv_go_apps_app_store = useThirdPartyFlags('deriv_go_apps.app_store')
+
+    const showQR = deriv_go_apps_app_gallery && deriv_go_apps_android && deriv_go_apps_app_store
     const [show_content, setShowContent] = useState(true)
 
     useEffect(() => {
@@ -35,24 +42,26 @@ export const DerivGoBanner = () => {
                                 <Localize translate_text="_t_Trade multipliers on our mobile app._t_" />
                             </Text>
                         </div>
-                        <div className="block max-sm:hidden">
-                            <div
-                                className={clsx(
-                                    footer_qr_box,
-                                    'flex items-center gap-gap-md rounded-[8px] border-solid border-xs border-opacity-black-100 p-general-sm',
-                                )}
-                            >
-                                <img
-                                    src={derivGoQR}
-                                    height={64}
-                                    width={64}
-                                    alt={localize('_t_download deriv-go_t_')}
-                                />
-                                <CaptionText className="text-typography-default text-center">
-                                    <Localize translate_text="_t_Scan to download_t_" />
-                                </CaptionText>
+                        {showQR && (
+                            <div className="block max-sm:hidden">
+                                <div
+                                    className={clsx(
+                                        footer_qr_box,
+                                        'flex items-center gap-gap-md rounded-[8px] border-solid border-xs border-opacity-black-100 p-general-sm',
+                                    )}
+                                >
+                                    <img
+                                        src={derivGoQR}
+                                        height={64}
+                                        width={64}
+                                        alt={localize('_t_download deriv-go_t_')}
+                                    />
+                                    <CaptionText className="text-typography-default text-center">
+                                        <Localize translate_text="_t_Scan to download_t_" />
+                                    </CaptionText>
+                                </div>
                             </div>
-                        </div>
+                        )}
                     </div>
                     <DownloadBadges />
                 </div>
diff --git a/src/features/components/templates/footer/download.tsx b/src/features/components/templates/footer/download.tsx
index 1dab1e291a4..2a090461e64 100644
--- a/src/features/components/templates/footer/download.tsx
+++ b/src/features/components/templates/footer/download.tsx
@@ -15,6 +15,7 @@ import {
     deriv_go_ios_url,
     deriv_go_playstore_url,
 } from 'common/constants'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const sharedClasses =
     'flex items-center justify-center gap-gap-md p-general-sm rounded-[4px] border-solid border-xs border-opacity-black-100'
@@ -22,39 +23,46 @@ const sharedClasses =
 const DownloadBadges = () => {
     const { is_appgallery_supported, is_ios_supported, is_appgallery_and_ios_supported } =
         useRegion()
+    const deriv_go_apps_app_gallery = useThirdPartyFlags('deriv_go_apps.app_gallery')
+    const deriv_go_apps_android = useThirdPartyFlags('deriv_go_apps.android')
+    const deriv_go_apps_app_store = useThirdPartyFlags('deriv_go_apps.app_store')
     return (
         <div className="flex flex-col gap-gap-md max-lg:flex-1">
-            {is_appgallery_supported && is_appgallery_and_ios_supported && (
+            {deriv_go_apps_app_gallery &&
+                is_appgallery_supported &&
+                is_appgallery_and_ios_supported && (
+                    <CustomLink
+                        href={deriv_go_huaweiappgallery_url}
+                        target="_blank"
+                        className={clsx(sharedClasses, 'order-last')}
+                    >
+                        <LabelPairedHuaweiAppGalleryLgIcon fill="#000000b8" />
+                        <StaticImage
+                            src="../../../../images/common/migration/footer/explore-appgallery.png"
+                            alt={localize('_t_explore it on appgallery_t_')}
+                            formats={['webp', 'auto']}
+                            width={90}
+                            placeholder="none"
+                        />
+                    </CustomLink>
+                )}
+            {deriv_go_apps_android && (
                 <CustomLink
-                    href={deriv_go_huaweiappgallery_url}
+                    href={deriv_go_playstore_url}
                     target="_blank"
-                    className={clsx(sharedClasses, 'order-last')}
+                    className={clsx(sharedClasses)}
                 >
-                    <LabelPairedHuaweiAppGalleryLgIcon fill="#000000b8" />
+                    <LabelPairedGooglePlayLgIcon fill="#000000b8" />
                     <StaticImage
-                        src="../../../../images/common/migration/footer/explore-appgallery.png"
-                        alt={localize('_t_explore it on appgallery_t_')}
+                        src="../../../../images/common/migration/footer/get-googleplay.png"
+                        alt={localize('_t_get it on google play_t_')}
                         formats={['webp', 'auto']}
                         width={90}
                         placeholder="none"
                     />
                 </CustomLink>
             )}
-            <CustomLink
-                href={deriv_go_playstore_url}
-                target="_blank"
-                className={clsx(sharedClasses)}
-            >
-                <LabelPairedGooglePlayLgIcon fill="#000000b8" />
-                <StaticImage
-                    src="../../../../images/common/migration/footer/get-googleplay.png"
-                    alt={localize('_t_get it on google play_t_')}
-                    formats={['webp', 'auto']}
-                    width={90}
-                    placeholder="none"
-                />
-            </CustomLink>
-            {is_ios_supported && is_appgallery_and_ios_supported && (
+            {deriv_go_apps_app_store && is_ios_supported && is_appgallery_and_ios_supported && (
                 <CustomLink href={deriv_go_ios_url} target="_blank" className={clsx(sharedClasses)}>
                     <LabelPairedAppleLgIcon fill="#000000b8" />
                     <StaticImage
diff --git a/src/features/components/templates/footer/index.tsx b/src/features/components/templates/footer/index.tsx
index 5cfc9fc24e8..1ac9f4b6e82 100644
--- a/src/features/components/templates/footer/index.tsx
+++ b/src/features/components/templates/footer/index.tsx
@@ -9,11 +9,13 @@ import {
     socialButtonsROW,
     warnText,
 } from './data'
+// import { socialIconROW, socialIconEU, socialIconCareer } from './validate-social-icons-data'
 import { DerivGoBanner } from './deriv-go-banner'
 import { IIPAward } from './iip-award'
 import { DescriptionContent } from './description'
 import useRegion from 'components/hooks/use-region'
 import { getLocationPathname } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 export const MainFooter = () => {
     const { is_eu, is_cpa_plan } = useRegion()
@@ -29,12 +31,31 @@ export const MainFooter = () => {
         setIsCareer(is_career_page)
     }, [])
 
+    const filterSocialIcons = (flagsData, mainData) => {
+        return mainData.filter((item) => flagsData?.[item['aria-label']])
+    }
+
+    const career_social_media_icons = useThirdPartyFlags('career_social_media_icons')
+    const row_social_media_icons = useThirdPartyFlags('row_social_media_icons')
+    const eu_social_media_icons = useThirdPartyFlags('eu_social_media_icons')
+
     useEffect(() => {
-        const region_buttons = is_eu ? socialButtonsEU : socialButtonsROW
-        setSocialButtons(is_career ? socialButtonsCareers : region_buttons)
+        const socialIconROW = filterSocialIcons(row_social_media_icons, socialButtonsROW)
+        const socialIconEU = filterSocialIcons(eu_social_media_icons, socialButtonsEU)
+        const socialIconCareer = filterSocialIcons(career_social_media_icons, socialButtonsCareers)
+
+        const region_buttons = is_eu ? socialIconEU : socialIconROW
+        setSocialButtons(is_career ? socialIconCareer : region_buttons)
         if (is_eu) setNavData(EuFooterNavData)
         setWarnText(!is_eu && !is_cpa_plan ? warnText : null)
-    }, [is_eu, is_cpa_plan, is_career])
+    }, [
+        is_eu,
+        is_cpa_plan,
+        is_career,
+        career_social_media_icons,
+        row_social_media_icons,
+        eu_social_media_icons,
+    ])
 
     return (
         <Footer.FooterBlock
diff --git a/src/features/pages/deriv-ctrader/get-trading/index.tsx b/src/features/pages/deriv-ctrader/get-trading/index.tsx
index 15b939f4de8..fef0c259054 100644
--- a/src/features/pages/deriv-ctrader/get-trading/index.tsx
+++ b/src/features/pages/deriv-ctrader/get-trading/index.tsx
@@ -16,6 +16,7 @@ import { useIsRtl } from 'components/hooks/use-isrtl'
 import { ctrader_android_url, ctrader_traders_hub_url, ctrader_windows_url } from 'common/constants'
 import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download'
 import { localize } from 'components/localization'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const ContentWrapper = styled.div<{ is_rtl: boolean }>`
     display: flex;
@@ -48,16 +49,30 @@ const Wrapper = styled.div`
 const DerivCtraderApp = () => {
     const { is_mobile_or_tablet } = useBreakpoints()
     const is_rtl = useIsRtl()
+    const ctrader_apps_windows = useThirdPartyFlags('ctrader_apps.windows')
+    const ctrader_apps_android = useThirdPartyFlags('ctrader_apps.android')
+    const ctrader_apps_web_browser = useThirdPartyFlags('ctrader_apps.web_browser')
 
     const items: TDownloadColumnItem[] = [
-        { text: 'Google Play', icon: AndroidIcon, link: ctrader_android_url },
+        {
+            text: 'Google Play',
+            icon: AndroidIcon,
+            link: ctrader_android_url,
+            visibility: ctrader_apps_android,
+        },
         {
             text: `Web Browser`,
             icon: BrowserIcon,
             link: ctrader_traders_hub_url,
             smallText: `_t_Via Trader's Hub_t_`,
+            visibility: ctrader_apps_web_browser,
+        },
+        {
+            text: 'Windows',
+            icon: WindowsIcon,
+            link: ctrader_windows_url,
+            visibility: ctrader_apps_windows,
         },
-        { text: 'Windows', icon: WindowsIcon, link: ctrader_windows_url },
     ]
 
     return (
diff --git a/src/features/pages/home/index.tsx b/src/features/pages/home/index.tsx
index d521d72e230..75b9f749bbd 100644
--- a/src/features/pages/home/index.tsx
+++ b/src/features/pages/home/index.tsx
@@ -12,6 +12,7 @@ import TrustpilotSection from './trustpilot'
 import { useOpenLiveChat } from 'components/hooks/use-open-live-chat-redirection'
 import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 import MainFooter from 'features/components/templates/footer'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 const FastPaymentSection = loadable(() => import('./fast-payment'))
 const LiveMarketSection = loadable(() => import('./live-pricing-migration'))
 const TradeTypeSection = loadable(() => import('./trade-type'))
@@ -19,18 +20,22 @@ const UserFriendlyPlatforms = loadable(() => import('./user-platfroms'))
 
 const HomePage = () => {
     useOpenLiveChat(true)
+    const isTrustpilot = useThirdPartyFlags('trustpilot')
+    const isLivePricing = useThirdPartyFlags('live_pricing')
 
     return (
         <QuillLayout>
             <MainRowNavigation />
             <PageLayout>
                 <HomeHero />
-                <TrustpilotSection />
+                {isTrustpilot && <TrustpilotSection />}
                 <StatSection />
                 <TwentyYearsStrong />
-                <LiveMarketSection
-                    fallback={<div className="h-[695px] md:h-[638.5px] lg:h-[811.78px]" />}
-                />
+                {isLivePricing && (
+                    <LiveMarketSection
+                        fallback={<div className="h-[695px] md:h-[638.5px] lg:h-[811.78px]" />}
+                    />
+                )}
                 <UserFriendlyPlatforms
                     fallback={<div className="h-[1805px] md:h-[1007.5px] lg:h-[999px]" />}
                 />
diff --git a/src/features/pages/home/live-pricing-migration/data-provider/index.tsx b/src/features/pages/home/live-pricing-migration/data-provider/index.tsx
index 30e895c7f77..05b5d6e0b25 100644
--- a/src/features/pages/home/live-pricing-migration/data-provider/index.tsx
+++ b/src/features/pages/home/live-pricing-migration/data-provider/index.tsx
@@ -26,7 +26,7 @@ const LiveMarketProvider = ({ children }: { children: ReactNode }) => {
     const commoditiesRef = useRef<DatabaseReference>()
 
     useEffect(() => {
-        firebaseAppRef.current = initializeApp(firebaseConfig)
+        firebaseAppRef.current = initializeApp(firebaseConfig, 'firebaseConfig')
         firebaseDbRef.current = getDatabase(firebaseAppRef.current)
     }, [])
 
diff --git a/src/features/pages/signup/form-container/form-social-buttons.tsx b/src/features/pages/signup/form-container/form-social-buttons.tsx
index 417e2bbd3ec..61f05533d21 100644
--- a/src/features/pages/signup/form-container/form-social-buttons.tsx
+++ b/src/features/pages/signup/form-container/form-social-buttons.tsx
@@ -11,6 +11,7 @@ import FacebookLogo from 'images/svg/signup_fb_icon.svg'
 import GoogleLogo from 'images/svg/google_logo.svg'
 import { Localize } from 'components/localization'
 import { isBrowser } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const FormSocialButtons = () => {
     const analyticsData: Parameters<typeof Analytics.trackEvent>[1] = {
@@ -18,74 +19,83 @@ const FormSocialButtons = () => {
         form_source: isBrowser() && window.location.hostname,
         form_name: 'default_diel_deriv',
     }
+    const google_signup = useThirdPartyFlags('google_signup')
+    const facebook_signup = useThirdPartyFlags('facebook_signup')
+    const apple_signup = useThirdPartyFlags('apple_signup')
 
     return (
         <>
-            <Button.Secondary
-                outlined
-                id="dm-signup-google"
-                onClick={() => {
-                    Analytics?.trackEvent('ce_virtual_signup_form', {
-                        signup_provider: 'google',
-                        ...analyticsData,
-                    })
-                    Login.initOneAll('google')
-                }}
-            >
-                <Flex.Box justify="center" align="end" gap={'2x'}>
-                    <Image src={GoogleLogo} />
-                    <Typography.Paragraph size="small" weight="bold" font_family="UBUNTU">
-                        <Localize translate_text={'_t_Google_t_'} />
-                    </Typography.Paragraph>
-                </Flex.Box>
-            </Button.Secondary>
-            <Button.Base
-                className={signup_fb_btn}
-                id="dm-signup-facebook"
-                onClick={() => {
-                    Analytics?.trackEvent('ce_virtual_signup_form', {
-                        signup_provider: 'facebook',
-                        ...analyticsData,
-                    })
-                    Login.initOneAll('facebook')
-                }}
-            >
-                <Flex.Box justify="center" align="end" gap={'2x'}>
-                    <Image src={FacebookLogo} />
-                    <Typography.Paragraph
-                        size="small"
-                        weight="bold"
-                        font_family="UBUNTU"
-                        textcolor="white"
-                    >
-                        <Localize translate_text={'_t_Facebook_t_'} />
-                    </Typography.Paragraph>
-                </Flex.Box>
-            </Button.Base>
-            <Button.Base
-                className={signup_apple_btn}
-                textcolor="white"
-                id="dm-signup-apple"
-                onClick={() => {
-                    Analytics?.trackEvent('ce_virtual_signup_form', {
-                        signup_provider: 'apple',
-                        ...analyticsData,
-                    })
-                    Login.initOneAll('apple')
-                }}
-            >
-                <Flex.Box justify="center" align="end" gap={'2x'}>
-                    <Image src={AppleLogo} />
-                    <Typography.Paragraph
-                        size="small"
-                        weight="bold"
-                        font_family="UBUNTU"
-                        textcolor="white"
-                    >
-                        <Localize translate_text={'_t_Apple_t_'} />
-                    </Typography.Paragraph>
-                </Flex.Box>
-            </Button.Base>
+            {google_signup && (
+                <Button.Secondary
+                    outlined
+                    id="dm-signup-google"
+                    onClick={() => {
+                        Analytics?.trackEvent('ce_virtual_signup_form', {
+                            signup_provider: 'google',
+                            ...analyticsData,
+                        })
+                        Login.initOneAll('google')
+                    }}
+                >
+                    <Flex.Box justify="center" align="end" gap={'2x'}>
+                        <Image src={GoogleLogo} />
+                        <Typography.Paragraph size="small" weight="bold" font_family="UBUNTU">
+                            <Localize translate_text={'_t_Google_t_'} />
+                        </Typography.Paragraph>
+                    </Flex.Box>
+                </Button.Secondary>
+            )}
+            {facebook_signup && (
+                <Button.Base
+                    className={signup_fb_btn}
+                    id="dm-signup-facebook"
+                    onClick={() => {
+                        Analytics?.trackEvent('ce_virtual_signup_form', {
+                            signup_provider: 'facebook',
+                            ...analyticsData,
+                        })
+                        Login.initOneAll('facebook')
+                    }}
+                >
+                    <Flex.Box justify="center" align="end" gap={'2x'}>
+                        <Image src={FacebookLogo} />
+                        <Typography.Paragraph
+                            size="small"
+                            weight="bold"
+                            font_family="UBUNTU"
+                            textcolor="white"
+                        >
+                            <Localize translate_text={'_t_Facebook_t_'} />
+                        </Typography.Paragraph>
+                    </Flex.Box>
+                </Button.Base>
+            )}
+            {apple_signup && (
+                <Button.Base
+                    className={signup_apple_btn}
+                    textcolor="white"
+                    id="dm-signup-apple"
+                    onClick={() => {
+                        Analytics?.trackEvent('ce_virtual_signup_form', {
+                            signup_provider: 'apple',
+                            ...analyticsData,
+                        })
+                        Login.initOneAll('apple')
+                    }}
+                >
+                    <Flex.Box justify="center" align="end" gap={'2x'}>
+                        <Image src={AppleLogo} />
+                        <Typography.Paragraph
+                            size="small"
+                            weight="bold"
+                            font_family="UBUNTU"
+                            textcolor="white"
+                        >
+                            <Localize translate_text={'_t_Apple_t_'} />
+                        </Typography.Paragraph>
+                    </Flex.Box>
+                </Button.Base>
+            )}
             <Typography.Paragraph align="center">
                 <Localize
                     translate_text="_t_Already have an account? <0>Log in</0>_t_"
diff --git a/src/pages/contact_us/index.tsx b/src/pages/contact_us/index.tsx
index c06e4c01d27..87db0da2c74 100644
--- a/src/pages/contact_us/index.tsx
+++ b/src/pages/contact_us/index.tsx
@@ -11,6 +11,7 @@ import { Localize, WithIntl } from 'components/localization'
 import Layout from 'components/layout/layout'
 import { SEO, SectionContainer, Container } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const Offices = Loadable(() => import('./_offices'))
 const Affiliates = Loadable(() => import('./_affiliates'))
@@ -42,6 +43,7 @@ const ContactUs = ({ data }: TContactUs) => {
     /* redirect livechat for en to open live chat popup */
     /* set true to allow redirection for other lang also*/
     useOpenLiveChat(true)
+    const isLiveChat = useThirdPartyFlags('chat.live_chat')
 
     return (
         <Layout>
@@ -57,7 +59,7 @@ const ContactUs = ({ data }: TContactUs) => {
             </SectionContainer>
             <ContactWays support_section={support_section} />
             <Offices our_offices={our_offices} office_address={office_address} />
-            <Affiliates business_partnership={business_partnership} />
+            {isLiveChat && <Affiliates business_partnership={business_partnership} />}
         </Layout>
     )
 }
diff --git a/src/pages/deriv-go/_footer-banner.tsx b/src/pages/deriv-go/_footer-banner.tsx
index 295414010fa..16195df0493 100644
--- a/src/pages/deriv-go/_footer-banner.tsx
+++ b/src/pages/deriv-go/_footer-banner.tsx
@@ -20,6 +20,7 @@ import {
 } from 'common/constants'
 import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download'
 import { localize } from 'components/localization'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const ContentWrapper = styled.div<{ is_rtl: boolean }>`
     display: flex;
@@ -49,13 +50,36 @@ const DerivGoGetApp = () => {
     const { is_appgallery_supported, is_ios_supported, is_appgallery_and_ios_supported } =
         useRegion()
 
+    const deriv_go_apps_app_gallery = useThirdPartyFlags('deriv_go_apps.app_gallery')
+    const deriv_go_apps_android = useThirdPartyFlags('deriv_go_apps.android')
+    const deriv_go_apps_app_store = useThirdPartyFlags('deriv_go_apps.app_store')
+
     const items: TDownloadColumnItem[] = [
-        { text: 'Google Play', icon: AndroidIcon, link: deriv_go_playstore_url },
+        {
+            text: 'Google Play',
+            icon: AndroidIcon,
+            link: deriv_go_playstore_url,
+            visibility: deriv_go_apps_android,
+        },
         ...(is_ios_supported && is_appgallery_and_ios_supported
-            ? [{ text: 'App Store', icon: AppleIcon, link: deriv_go_ios_url }]
+            ? [
+                  {
+                      text: 'App Store',
+                      icon: AppleIcon,
+                      link: deriv_go_ios_url,
+                      visibility: deriv_go_apps_app_store,
+                  },
+              ]
             : []),
         ...(is_appgallery_supported && is_appgallery_and_ios_supported
-            ? [{ text: 'AppGallery', icon: AppGalleryIcon, link: deriv_go_huaweiappgallery_url }]
+            ? [
+                  {
+                      text: 'AppGallery',
+                      icon: AppGalleryIcon,
+                      link: deriv_go_huaweiappgallery_url,
+                      visibility: deriv_go_apps_app_gallery,
+                  },
+              ]
             : []),
     ]
 
diff --git a/src/pages/deriv-go/index.tsx b/src/pages/deriv-go/index.tsx
index 0c7080eec2e..f70d675ee17 100644
--- a/src/pages/deriv-go/index.tsx
+++ b/src/pages/deriv-go/index.tsx
@@ -12,6 +12,7 @@ import Layout from 'components/layout/layout'
 import { WithIntl } from 'components/localization'
 import { ContentType } from 'pages/landing/_types'
 import { TGatsbyHead } from 'features/types'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const items: ContentType[] = [
     {
@@ -54,6 +55,7 @@ const derivGoPortalData: TPortal = {
 const DerivGo = () => {
     const { is_row } = useRegion()
     const [is_loaded, setLoaded] = useState(false)
+    const deriv_go_management_board = useThirdPartyFlags('deriv_go_management_board')
 
     useEffect(() => {
         setLoaded(true)
@@ -68,7 +70,7 @@ const DerivGo = () => {
                     <WhyTradeDerivGo />
                     <DerivGoContent reverse P2P={items} />
                     <StartDerivGo />
-                    <Roadmap portal={derivGoPortalData} />
+                    {deriv_go_management_board && <Roadmap portal={derivGoPortalData} />}
                     <FooterBanner />
                     <OtherApps />
                 </Layout>
diff --git a/src/pages/derivx/_get-derivx.tsx b/src/pages/derivx/_get-derivx.tsx
index 4a9368dbcbe..0598c9b48f3 100644
--- a/src/pages/derivx/_get-derivx.tsx
+++ b/src/pages/derivx/_get-derivx.tsx
@@ -22,6 +22,7 @@ import {
 } from 'common/constants'
 import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download'
 import { localize } from 'components/localization'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const ContentWrapper = styled.div<{ is_rtl: boolean }>`
     display: flex;
@@ -55,18 +56,40 @@ const DerivXGetApp = () => {
     const { is_mobile_or_tablet } = useBreakpoints()
     const is_rtl = useIsRtl()
     const { is_appgallery_supported } = useRegion()
+    const deriv_x_apps_android = useThirdPartyFlags('deriv_x_apps.android')
+    const deriv_x_apps_app_store = useThirdPartyFlags('deriv_x_apps.app_store')
+    const deriv_x_apps_app_gallery = useThirdPartyFlags('deriv_x_apps.app_gallery')
+    const deriv_x_apps_web_browser = useThirdPartyFlags('deriv_x_apps.web_browser')
 
     const items: TDownloadColumnItem[] = [
-        { text: 'Google Play', icon: AndroidIcon, link: derivx_android_url },
-        { text: 'App Store', icon: AppleIcon, link: derivx_ios_url },
+        {
+            text: 'Google Play',
+            icon: AndroidIcon,
+            link: derivx_android_url,
+            visibility: deriv_x_apps_android,
+        },
+        {
+            text: 'App Store',
+            icon: AppleIcon,
+            link: derivx_ios_url,
+            visibility: deriv_x_apps_app_store,
+        },
         ...(is_appgallery_supported
-            ? [{ text: 'AppGallery', icon: AppGalleryIcon, link: derivx_huawei_url }]
+            ? [
+                  {
+                      text: 'AppGallery',
+                      icon: AppGalleryIcon,
+                      link: derivx_huawei_url,
+                      visibility: deriv_x_apps_app_gallery,
+                  },
+              ]
             : []),
         {
             text: 'Web Browser',
             icon: BrowserIcon,
             link: derivx_app_url,
             smallText: '_t_Use it on your_t_',
+            visibility: deriv_x_apps_web_browser,
         },
     ]
 
diff --git a/src/pages/dmt5/_download-app.tsx b/src/pages/dmt5/_download-app.tsx
index 4700c254a20..03a6b9ced29 100644
--- a/src/pages/dmt5/_download-app.tsx
+++ b/src/pages/dmt5/_download-app.tsx
@@ -29,21 +29,7 @@ import {
 import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download'
 import { Flex } from 'components/containers'
 import { Localize, localize } from 'components/localization'
-
-const items: TDownloadColumnItem[] = [
-    { text: 'Google Play', icon: AndroidIcon, link: dmt5_android_url },
-    { text: 'App Store', icon: AppleIcon, link: dmt5_ios_url },
-    { text: 'AppGallery', icon: AppGalleryIcon, link: dmt5_app_gallery_url },
-    {
-        text: 'Web Browser',
-        icon: BrowserIcon,
-        link: dmt5_web_browser_url,
-        smallText: '_t_Use it on your_t_',
-    },
-    { text: 'Windows', icon: WinIcon, link: dmt5_windows },
-    { text: 'macOS', icon: MacIcon, link: dmt5_mac_app_url },
-    { text: 'Linux', icon: LinuxIcon, link: dmt5_linux_url },
-]
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const ContentWrapper = styled.div<{ is_rtl: boolean }>`
     display: flex;
@@ -84,6 +70,59 @@ const DerivMT5GetApp = () => {
     const { is_mobile_or_tablet } = useBreakpoints()
     const is_rtl = useIsRtl()
 
+    const mt5_apps_android = useThirdPartyFlags('mt5_apps.android')
+    const mt5_apps_app_store = useThirdPartyFlags('mt5_apps.app_store')
+    const mt5_apps_app_gallery = useThirdPartyFlags('mt5_apps.app_gallery')
+    const mt5_apps_web_browser = useThirdPartyFlags('mt5_apps.web_browser')
+    const mt5_apps_windows = useThirdPartyFlags('mt5_apps.windows')
+    const mt5_apps_mac_os = useThirdPartyFlags('mt5_apps.mac_os')
+    const mt5_apps_linux = useThirdPartyFlags('mt5_apps.linux')
+
+    const items: TDownloadColumnItem[] = [
+        {
+            text: 'Google Play',
+            icon: AndroidIcon,
+            link: dmt5_android_url,
+            visibility: mt5_apps_android,
+        },
+        {
+            text: 'App Store',
+            icon: AppleIcon,
+            link: dmt5_ios_url,
+            visibility: mt5_apps_app_store,
+        },
+        {
+            text: 'AppGallery',
+            icon: AppGalleryIcon,
+            link: dmt5_app_gallery_url,
+            visibility: mt5_apps_app_gallery,
+        },
+        {
+            text: 'Web Browser',
+            icon: BrowserIcon,
+            link: dmt5_web_browser_url,
+            smallText: '_t_Use it on your_t_',
+            visibility: mt5_apps_web_browser,
+        },
+        {
+            text: 'Windows',
+            icon: WinIcon,
+            link: dmt5_windows,
+            visibility: mt5_apps_windows,
+        },
+        {
+            text: 'macOS',
+            icon: MacIcon,
+            link: dmt5_mac_app_url,
+            visibility: mt5_apps_mac_os,
+        },
+        {
+            text: 'Linux',
+            icon: LinuxIcon,
+            link: dmt5_linux_url,
+            visibility: mt5_apps_linux,
+        },
+    ]
     return (
         <MultiWidthColumn
             firstColumnBackground="#4C515C"
diff --git a/src/pages/help-centre/components/_didnt-find-answer.tsx b/src/pages/help-centre/components/_didnt-find-answer.tsx
index fbd4b7f7e53..ba7df6f877d 100644
--- a/src/pages/help-centre/components/_didnt-find-answer.tsx
+++ b/src/pages/help-centre/components/_didnt-find-answer.tsx
@@ -8,6 +8,7 @@ import device from 'themes/device'
 import ContactUsIcon from 'images/svg/help/livechat-red.svg'
 import WhatsAppSVG from 'images/svg/help/whatsapp.svg'
 import { whatsapp_url } from 'common/constants'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const DidntFindYourAnswerWrapper = styled.div`
     background: var(--color-black);
@@ -79,6 +80,8 @@ const DidntFindYourAnswerBanner = () => {
 
     const openChatWindow = () => LC_API.open_chat_window()
     const openWhatsappUrl = () => window.open(whatsapp_url, '_blank')
+    const isLiveChat = useThirdPartyFlags('chat.live_chat')
+    const isWhatsappChat = useThirdPartyFlags('chat.whatsapp_chat')
 
     return (
         <DidntFindYourAnswerWrapper>
@@ -87,18 +90,20 @@ const DidntFindYourAnswerBanner = () => {
                 <Localize translate_text="_t_Didn’t find your answer? We can help._t_" />
             </Text>
 
-            {is_livechat_interactive && (
-                <ButtonWrapper>
+            <ButtonWrapper>
+                {isLiveChat && is_livechat_interactive && (
                     <ChatButton secondary onClick={openChatWindow}>
                         <Localize translate_text="_t_Chat_t_" />
                     </ChatButton>
+                )}
 
+                {isWhatsappChat && is_livechat_interactive && (
                     <WhatsAppButton onClick={openWhatsappUrl}>
                         <img src={WhatsAppSVG} alt="whatsapp-icon" height="16" width="16" />
                         <Localize translate_text="_t_WhatsApp_t_" />
                     </WhatsAppButton>
-                </ButtonWrapper>
-            )}
+                )}
+            </ButtonWrapper>
         </DidntFindYourAnswerWrapper>
     )
 }
diff --git a/src/pages/help-centre/components/_search-section.tsx b/src/pages/help-centre/components/_search-section.tsx
index 9698e73e59c..15060229801 100644
--- a/src/pages/help-centre/components/_search-section.tsx
+++ b/src/pages/help-centre/components/_search-section.tsx
@@ -13,6 +13,7 @@ import device from 'themes/device'
 // Icons
 import SearchIcon from 'images/svg/help/search.svg'
 import CrossIcon from 'images/svg/help/cross.svg'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const Section = styled.section`
     padding: 8rem 0;
@@ -90,6 +91,7 @@ const SearchCrossIcon = styled.img`
 const SearchSection = () => {
     const [search_value, setSearchValue] = useState('')
     const search_input_ref = useRef(null)
+    const isLiveChat = useThirdPartyFlags('chat.live_chat')
 
     useEffect(() => {
         if (search_input_ref.current) {
@@ -171,7 +173,7 @@ const SearchSection = () => {
                             />
                         )}
                     </SearchForm>
-                    <TalkToUs />
+                    {isLiveChat && <TalkToUs />}
 
                     {has_search_value && (
                         <SearchResult
diff --git a/static/appConfig.js b/static/appConfig.js
new file mode 100644
index 00000000000..8de044a6f65
--- /dev/null
+++ b/static/appConfig.js
@@ -0,0 +1,57 @@
+module.exports = {
+    "chat": {
+        "live_chat": true,
+        "whatsapp_chat": true
+    },
+    "career_social_media_icons": {
+        "facebook": true,
+        "instagram": true,
+        "linkedin": true
+    },
+    "row_social_media_icons": {
+        "facebook": true,
+        "instagram": true,
+        "twitter": true,
+        "youtube": true,
+        "linkedin": true,
+        "telegram": true
+    },
+    "eu_social_media_icons": {
+        "facebook": true,
+        "instagram": true,
+        "twitter": true,
+        "youtube": true,
+        "linkedin": true
+    },
+    "trustpilot": true,
+    "live_pricing": true,
+    "deriv_go_management_board": true,
+    "google_signup": true,
+    "apple_signup": true,
+    "facebook_signup": true,
+    "mt5_apps": {
+        "android": true,
+        "app_store": true,
+        "app_gallery": true,
+        "web_browser": true,
+        "windows": true,
+        "mac_os": true,
+        "linux": true
+    },
+    "deriv_x_apps": {
+        "android": true,
+        "app_store": true,
+        "app_gallery": true,
+        "web_browser": true
+    },
+    "ctrader_apps": {
+        "android": true,
+        "web_browser": true,
+        "windows": true
+    },
+    "deriv_go_apps": {
+        "android": true,
+        "app_store": true,
+        "app_gallery": true
+    }
+}