chore: updated who we are page

binary-com · Feb 29, 2024 · 892e6d6 · 892e6d6
1 parent cd55be7
commit 892e6d6
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 43 deletions.
diff --git a/themes/gatsby-theme-deriv/src/components/layout/layout.tsx b/themes/gatsby-theme-deriv/src/components/layout/layout.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { ReactNode, Ref, useCallback } from 'react'
+import React, { ReactNode, Ref, useCallback, useContext, useEffect, useState } from 'react'
 import loadable from '@loadable/component'
 import styled from 'styled-components'
 import { LanguageProvider, SharedLinkProvider } from '@deriv-com/providers'
@@ -24,6 +24,8 @@ import useLangSwitcher from 'features/components/molecules/language-switcher/use
 import { langItemsROW } from 'features/components/templates/layout/data'
 import PartnersNav from 'features/components/templates/navigation/partners-nav'
 import GatsbySharedLink from 'features/components/quill/shared-link'
+import { BuildVariantContextType } from 'features/contexts/build-variant/build-variant.context'
+import BuildVariantProvider from 'features/contexts/build-variant/build-variant.provider'
 
 const RebrandingFooter = loadable(() => import('features/components/templates/footer'))
 
@@ -34,6 +36,7 @@ type LayoutProps = {
     padding_top?: string
     type?: string
     show_footer?: boolean
+    region: BuildVariantContextType['region']
 }
 
 type MainType = {
@@ -100,19 +103,20 @@ const Layout = ({
     padding_top,
     type = 'default',
     show_footer = true,
+    region = 'row',
 }: LayoutProps) => {
     const [is_mounted] = usePageLoaded()
     const [show_modal, toggleModal, closeModal] = useModal()
-    const [modal_payload, setModalPayload] = React.useState({} as ModalPayloadType)
+    const [modal_payload, setModalPayload] = useState({} as ModalPayloadType)
     const { has_platform } = usePlatformQueryParam()
 
     const is_static = type === 'static'
 
     const lang_direction = useLangDirection()
-    const { locale } = React.useContext(LocaleContext)
+    const { locale } = useContext(LocaleContext)
     const formatted_lang = locale.replace('_', '-')
 
-    React.useEffect(() => {
+    useEffect(() => {
         document.body.dir = lang_direction
         document.documentElement.lang = formatted_lang
     }, [lang_direction, formatted_lang])
@@ -145,31 +149,33 @@ const Layout = ({
                     onLangSelect={onLanguageChange}
                     activeLanguage={activeLang}
                 >
-                    {Navs[type]}
-                    <LocationProvider
-                        has_mounted={is_mounted}
-                        toggleModal={toggleModal}
-                        setModalPayload={setModalPayload}
-                    >
-                        <div className="styled-layout">
-                            <Main padding_top={padding_top} type={type} is_static={is_static}>
-                                {children}
-                            </Main>
-                            <EURedirect
-                                toggle={toggleModal}
-                                is_open={show_modal}
-                                closeModal={closeModal}
-                                to={modal_payload.to}
-                                target={modal_payload.target}
-                                rel={modal_payload.rel}
-                                ref={modal_payload.ref}
-                                aria_label={modal_payload.aria_label}
-                            />
-                            <BannerAlert bannerType={bannerTypes.outdatedBrowserBanner} />
-                            <LayoutOverlay is_ppc={is_ppc} />
-                        </div>
-                    </LocationProvider>
-                    {show_footer && <RebrandingFooter />}
+                    <BuildVariantProvider region={region}>
+                        {Navs[type]}
+                        <LocationProvider
+                            has_mounted={is_mounted}
+                            toggleModal={toggleModal}
+                            setModalPayload={setModalPayload}
+                        >
+                            <div className="styled-layout">
+                                <Main padding_top={padding_top} type={type} is_static={is_static}>
+                                    {children}
+                                </Main>
+                                <EURedirect
+                                    toggle={toggleModal}
+                                    is_open={show_modal}
+                                    closeModal={closeModal}
+                                    to={modal_payload.to}
+                                    target={modal_payload.target}
+                                    rel={modal_payload.rel}
+                                    ref={modal_payload.ref}
+                                    aria_label={modal_payload.aria_label}
+                                />
+                                <BannerAlert bannerType={bannerTypes.outdatedBrowserBanner} />
+                                <LayoutOverlay is_ppc={is_ppc} />
+                            </div>
+                        </LocationProvider>
+                        {show_footer && <RebrandingFooter />}
+                    </BuildVariantProvider>
                 </LanguageProvider>
             </PpcProvider>
         </SharedLinkProvider>

diff --git a/themes/gatsby-theme-deriv/src/features/components/quill/quill-layout/index.tsx b/themes/gatsby-theme-deriv/src/features/components/quill/quill-layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback } from 'react'
+import React, { ReactNode, useCallback, useContext, useEffect } from 'react'
 import { LanguageProvider, SharedLinkProvider } from '@deriv-com/providers'
 import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design'
 import BrowserUpdateAlert from '../browser-update-alert'
@@ -39,10 +39,10 @@ const QuillLayout = ({
     const { has_platform } = usePlatformQueryParam()
 
     const lang_direction = useLangDirection()
-    const { locale } = React.useContext(LocaleContext)
+    const { locale } = useContext(LocaleContext)
     const formatted_lang = locale.replace('_', '-')
 
-    React.useEffect(() => {
+    useEffect(() => {
         document.body.dir = lang_direction
         document.documentElement.lang = formatted_lang
     }, [lang_direction, formatted_lang])

diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/banners/award-banners/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/banners/award-banners/index.tsx
@@ -6,8 +6,13 @@ import Container from 'features/components/atoms/container'
 import Flex from 'features/components/atoms/flex-box'
 import Typography from 'features/components/atoms/typography'
 import { Localize } from 'components/localization'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 const AwardBanner = ({ title }: AwardProps) => {
+    const {region} = useBuildVariant()
+
+    if(region === "eu") return null
+
     return (
         <Container.Fluid margin_block="36x">
             <Flex.Box

diff --git a/themes/gatsby-theme-deriv/src/pages/who-we-are/index.tsx b/themes/gatsby-theme-deriv/src/pages/who-we-are/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { graphql } from 'gatsby'
 import { TWhoWeAre } from './_types'
@@ -19,7 +19,6 @@ import AwardBannerEu from 'features/components/templates/banners/award-banners/a
 import device from 'themes/device'
 import { SEO } from 'components/containers'
 import Layout from 'components/layout/layout'
-import useRegion from 'components/hooks/use-region'
 import { WithIntl } from 'components/localization'
 
 const StartSeparator = styled.div`
@@ -42,8 +41,10 @@ const EndSeparator = styled.div`
     }
 `
 
-const AboutUs = ({ data }: TWhoWeAre) => {
-    const { is_eu } = useRegion()
+type AboutUsProps = TGatsbyHead & TWhoWeAre
+
+const AboutUs = ({ data, pageContext }: AboutUsProps) => {
+    const {region} = pageContext
     const {
         hero,
         our_values,
@@ -54,14 +55,9 @@ const AboutUs = ({ data }: TWhoWeAre) => {
         our_locations,
         banner,
     } = data?.strapiWhoWeArePage || {}
-    const [show_eu_content, setShowEuContent] = useState(false)
-
-    useEffect(() => {
-        if (is_eu) setShowEuContent(true)
-    }, [is_eu])
 
     return (
-        <Layout>
+        <Layout region={region}>
             <Hero hero={hero} />
             <MakeTrading hero={hero} />
             <StartSeparator />
@@ -72,7 +68,7 @@ const AboutUs = ({ data }: TWhoWeAre) => {
                 subtitle="_t_We are proud to be recognised as a Great Place to Work™ and certified Platinum in Investors in People._t_"
             />
             <OurPrinciples our_principles={our_principles} />
-            {show_eu_content ? null : <AwardBanner title="_t_Our awards_t_" />}
+            <AwardBanner title="_t_Our awards_t_" />
             <OurLeadership our_leadership={our_leadership} />
             <DerivNumbers deriv_in_numbers={deriv_in_numbers} />
             <ImageMarquee slider_medias={slider_medias} />