feat: updated hook and filtered footer icon data

binary-com · Feb 27, 2024 · 7c6cf2b · 7c6cf2b
1 parent 16faaa9
commit 7c6cf2b
Show file tree

Hide file tree

Showing 12 changed files with 158 additions and 124 deletions.
diff --git a/src/components/hooks/use-third-party-flags.tsx b/src/components/hooks/use-third-party-flags.tsx
@@ -39,8 +39,13 @@ const useThirdPartyFlags = (featurePath) => {
                 return // Feature path does not exist
             }
             currentFeature = currentFeature[part]
+            console.log('currentFeature ==>', part, currentFeature)
+        }
+        if (typeof currentFeature === 'object') {
+            setFeature(currentFeature)
+        } else {
+            setFeature(Boolean(currentFeature))
         }
-        setFeature(Boolean(currentFeature))
     }, [data, featurePath])
 
     return feature

diff --git a/src/features/components/templates/footer/data.tsx b/src/features/components/templates/footer/data.tsx
@@ -12,7 +12,6 @@ import {
 import { DerivGoBanner } from './deriv-go-banner'
 import { IIPAward } from './iip-award'
 import { Localize } from 'components/localization'
-import { isFeatureEnabled } from 'common/utility'
 
 export const RowFooterNavData: FooterItems[] = [
     {
@@ -501,42 +500,36 @@ export const socialButtonsROW = [
         href: 'https://www.facebook.com/derivdotcom',
         'data-cy': 'facebook',
         'aria-label': 'facebook',
-        visibility: isFeatureEnabled('normal_social_media_icons.facebook'),
     },
     {
         icon: <StandaloneInstagramIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.instagram.com/deriv_official',
         'data-cy': 'instagram',
         'aria-label': 'instagram',
-        visibility: isFeatureEnabled('normal_social_media_icons.instagram'),
     },
     {
         icon: <StandaloneXTwitterIcon iconSize="md" fill="#000000b8" />,
         href: 'https://twitter.com/derivdotcom/',
         'data-cy': 'twitter',
         'aria-label': 'twitter',
-        visibility: isFeatureEnabled('normal_social_media_icons.twitter'),
     },
     {
         icon: <StandaloneYoutubeIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.youtube.com/@deriv',
         'data-cy': 'youtube',
         'aria-label': 'youtube',
-        visibility: isFeatureEnabled('normal_social_media_icons.youtube'),
     },
     {
         icon: <StandaloneLinkedinIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.linkedin.com/company/derivdotcom/',
         'data-cy': 'linkedin',
         'aria-label': 'linkedin',
-        visibility: isFeatureEnabled('normal_social_media_icons.linkedin'),
     },
     {
         icon: <StandaloneTelegramIcon iconSize="md" fill="#000000b8" />,
         href: 'https://t.me/Derivchannelofficial',
         'data-cy': 'telegram',
         'aria-label': 'telegram',
-        visibility: isFeatureEnabled('normal_social_media_icons.telegram'),
     },
 ]
 
@@ -546,35 +539,30 @@ export const socialButtonsEU = [
         href: 'https://www.facebook.com/DerivEU',
         'data-cy': 'facebook',
         'aria-label': 'facebook',
-        visibility: isFeatureEnabled('normal_social_media_icons.facebook'),
     },
     {
         icon: <StandaloneInstagramIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.instagram.com/deriv_eu/',
         'data-cy': 'instagram',
         'aria-label': 'instagram',
-        visibility: isFeatureEnabled('normal_social_media_icons.instagram'),
     },
     {
         icon: <StandaloneXTwitterIcon iconSize="md" fill="#000000b8" />,
         href: 'https://twitter.com/deriv_eu/',
         'data-cy': 'twitter',
         'aria-label': 'twitter',
-        visibility: isFeatureEnabled('normal_social_media_icons.twitter'),
     },
     {
         icon: <StandaloneYoutubeIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.youtube.com/@deriv',
         'data-cy': 'youtube',
         'aria-label': 'youtube',
-        visibility: isFeatureEnabled('normal_social_media_icons.youtube'),
     },
     {
         icon: <StandaloneLinkedinIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.linkedin.com/company/derivdotcom/',
         'data-cy': 'linkedin',
         'aria-label': 'linkedin',
-        visibility: isFeatureEnabled('normal_social_media_icons.linkedin'),
     },
 ]
 
@@ -584,20 +572,17 @@ export const socialButtonsCareers = [
         href: 'https://www.facebook.com/derivcareers',
         'data-cy': 'facebook',
         'aria-label': 'facebook',
-        visibility: isFeatureEnabled('career_social_media_icons.facebook'),
     },
     {
         icon: <StandaloneInstagramIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.instagram.com/derivcareers/',
         'data-cy': 'instagram',
         'aria-label': 'instagram',
-        visibility: isFeatureEnabled('career_social_media_icons.instagram'),
     },
     {
         icon: <StandaloneLinkedinIcon iconSize="md" fill="#000000b8" />,
         href: 'https://www.linkedin.com/company/derivdotcom/life/',
         'data-cy': 'linkedin',
         'aria-label': 'linkedin',
-        visibility: isFeatureEnabled('career_social_media_icons.linkedin'),
     },
 ]
diff --git a/src/features/components/templates/footer/deriv-go-banner.tsx b/src/features/components/templates/footer/deriv-go-banner.tsx
@@ -9,13 +9,16 @@ 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 { isFeatureEnabled } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 export const DerivGoBanner = () => {
     const { is_row } = useRegion()
-    const showQR =
-        isFeatureEnabled('deriv_go_apps.app_gallery') &&
-        isFeatureEnabled('deriv_go_apps.android') &&
-        isFeatureEnabled('deriv_go_apps.app_store')
+
+    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(() => {

diff --git a/src/features/components/templates/footer/download.tsx b/src/features/components/templates/footer/download.tsx
@@ -15,17 +15,20 @@ import {
     deriv_go_ios_url,
     deriv_go_playstore_url,
 } from 'common/constants'
-import { isFeatureEnabled } from 'common/utility'
+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'
 
 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">
-            {isFeatureEnabled('deriv_go_apps.app_gallery') &&
+            {deriv_go_apps_app_gallery &&
                 is_appgallery_supported &&
                 is_appgallery_and_ios_supported && (
                     <CustomLink
@@ -43,7 +46,7 @@ const DownloadBadges = () => {
                         />
                     </CustomLink>
                 )}
-            {isFeatureEnabled('deriv_go_apps.android') && (
+            {deriv_go_apps_android && (
                 <CustomLink
                     href={deriv_go_playstore_url}
                     target="_blank"
@@ -59,24 +62,18 @@ const DownloadBadges = () => {
                     />
                 </CustomLink>
             )}
-            {isFeatureEnabled('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
-                            src="../../../../images/common/migration/footer/download-appstore.png"
-                            alt={localize('_t_download on the app store_t_')}
-                            formats={['webp', 'auto']}
-                            width={90}
-                            placeholder="none"
-                        />
-                    </CustomLink>
-                )}
+            {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
+                        src="../../../../images/common/migration/footer/download-appstore.png"
+                        alt={localize('_t_download on the app store_t_')}
+                        formats={['webp', 'auto']}
+                        width={90}
+                        placeholder="none"
+                    />
+                </CustomLink>
+            )}
         </div>
     )
 }

diff --git a/src/features/components/templates/footer/index.tsx b/src/features/components/templates/footer/index.tsx
@@ -15,6 +15,7 @@ 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()
@@ -30,20 +31,31 @@ export const MainFooter = () => {
         setIsCareer(is_career_page)
     }, [])
 
-    const filterSocialIcons = (iconsData) => {
-        return iconsData.filter((item) => item.visibility)
+    const filterSocialIcons = (flagsData, mainData) => {
+        return mainData.filter((item) => flagsData?.[item['aria-label']])
     }
-    const socialIconROW = filterSocialIcons(socialButtonsROW)
-    const socialIconEU = filterSocialIcons(socialButtonsEU)
-    const socialIconCareer = filterSocialIcons(socialButtonsCareers)
 
-    const socialButtons = is_career ? socialIconCareer : is_eu ? socialIconEU : socialIconROW
+    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
@@ -17,6 +17,7 @@ import { ctrader_android_url, ctrader_traders_hub_url, ctrader_windows_url } fro
 import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download'
 import { localize } from 'components/localization'
 import { isFeatureEnabled } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const ContentWrapper = styled.div<{ is_rtl: boolean }>`
     display: flex;
@@ -49,26 +50,29 @@ 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,
-            visibility: isFeatureEnabled('ctrader_apps.android'),
+            visibility: ctrader_apps_android,
         },
         {
             text: `Web Browser`,
             icon: BrowserIcon,
             link: ctrader_traders_hub_url,
             smallText: `_t_Via Trader's Hub_t_`,
-            visibility: isFeatureEnabled('ctrader_apps.web_browser'),
+            visibility: ctrader_apps_web_browser,
         },
         {
             text: 'Windows',
             icon: WindowsIcon,
             link: ctrader_windows_url,
-            visibility: isFeatureEnabled('ctrader_apps.windows'),
+            visibility: ctrader_apps_windows,
         },
     ]
 

diff --git a/src/features/pages/signup/form-container/form-social-buttons.tsx b/src/features/pages/signup/form-container/form-social-buttons.tsx
@@ -10,18 +10,22 @@ import AppleLogo from 'images/svg/signup_apple_icon.svg'
 import FacebookLogo from 'images/svg/signup_fb_icon.svg'
 import GoogleLogo from 'images/svg/google_logo.svg'
 import { Localize } from 'components/localization'
-import { isBrowser, isFeatureEnabled } from 'common/utility'
+import { isBrowser } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const FormSocialButtons = () => {
     const analyticsData: Parameters<typeof Analytics.trackEvent>[1] = {
         action: 'started',
         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 (
         <>
-            {isFeatureEnabled('google_signup') && (
+            {google_signup && (
                 <Button.Secondary
                     outlined
                     id="dm-signup-google"
@@ -41,7 +45,7 @@ const FormSocialButtons = () => {
                     </Flex.Box>
                 </Button.Secondary>
             )}
-            {isFeatureEnabled('facebook_signup') && (
+            {facebook_signup && (
                 <Button.Base
                     className={signup_fb_btn}
                     id="dm-signup-facebook"
@@ -66,7 +70,7 @@ const FormSocialButtons = () => {
                     </Flex.Box>
                 </Button.Base>
             )}
-            {isFeatureEnabled('apple_signup') && (
+            {apple_signup && (
                 <Button.Base
                     className={signup_apple_btn}
                     textcolor="white"

diff --git a/src/pages/deriv-go/_footer-banner.tsx b/src/pages/deriv-go/_footer-banner.tsx
@@ -21,6 +21,7 @@ import {
 import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download'
 import { localize } from 'components/localization'
 import { isFeatureEnabled } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 
 const ContentWrapper = styled.div<{ is_rtl: boolean }>`
     display: flex;
@@ -50,20 +51,24 @@ 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,
-            visibility: isFeatureEnabled('deriv_go_apps.windows'),
+            visibility: deriv_go_apps_android,
         },
         ...(is_ios_supported && is_appgallery_and_ios_supported
             ? [
                   {
                       text: 'App Store',
                       icon: AppleIcon,
                       link: deriv_go_ios_url,
-                      visibility: isFeatureEnabled('deriv_go_apps.app_store'),
+                      visibility: deriv_go_apps_app_store,
                   },
               ]
             : []),
@@ -73,7 +78,7 @@ const DerivGoGetApp = () => {
                       text: 'AppGallery',
                       icon: AppGalleryIcon,
                       link: deriv_go_huaweiappgallery_url,
-                      visibility: isFeatureEnabled('deriv_go_apps.app_gallery'),
+                      visibility: deriv_go_apps_app_gallery,
                   },
               ]
             : []),