diff --git a/themes/gatsby-theme-deriv/src/components/layout/layout.tsx b/themes/gatsby-theme-deriv/src/components/layout/layout.tsx index 3fd9576488f..f0912f14196 100644 --- 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]} - -
-
- {children} -
- - - -
-
- {show_footer && } + + {Navs[type]} + +
+
+ {children} +
+ + + +
+
+ {show_footer && } +
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 index acbf4ecc388..3cf75ecc268 100644 --- 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 index 8002778d93b..ef7a27402b5 100644 --- 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 ( { - 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 ( - + @@ -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_" /> - {show_eu_content ? null : } +