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 <[email protected]> Co-authored-by: Muhammad Fasih Ali Naqvi <[email protected]>
binary-com · Feb 29, 2024 · 7c6f41d · 7c6f41d
1 parent e87e9fe
commit 7c6f41d
Show file tree

Hide file tree

Showing 21 changed files with 488 additions and 195 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>