chore: updated dbot page

binary-com · Mar 1, 2024 · 6d72138 · 6d72138
1 parent 2dd9ae4
commit 6d72138
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 63 deletions.
diff --git a/themes/gatsby-theme-deriv/src/components/custom/_dhero-dmt5.tsx b/themes/gatsby-theme-deriv/src/components/custom/_dhero-dmt5.tsx
@@ -14,6 +14,7 @@ import Button from 'components/custom/_button'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import { Container } from 'components/containers'
 import { localize } from 'components/localization'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 //TODO: (deriv-rebranding) to make the content section reusable .
 
@@ -129,6 +130,7 @@ const DCommonBanner = () => {
     const { is_mobile } = useBreakpoints()
     const handleSignup = useHandleSignup()
     const [is_logged_in] = useAuthCheck()
+    const { region } = useBuildVariant()
     const { is_eu } = useRegion()
     const is_rtl = useIsRtl()
 
@@ -174,7 +176,7 @@ const DCommonBanner = () => {
                     >
                         <ImageWrapper>
                             <ImageStyle>
-                                {is_eu ? (
+                                {region === "eu" ? (
                                     <StaticImage
                                         src="../../images/common/dmt5/banner_image_eu.png"
                                         loading="eager"

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_flexibility.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_flexibility.tsx
@@ -8,8 +8,8 @@ import SwapFreeIcon from 'images/svg/dmt5/swap-free-platform.svg'
 import DerivedIcon from 'images/svg/dmt5/derived.svg'
 import CFDsIcon from 'images/svg/dmt5/cfds.svg'
 import device from 'themes/device'
-import useRegion from 'components/hooks/use-region'
 import { TString } from 'types/generics'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type ContentType = {
     header: TString
@@ -127,8 +127,8 @@ const StyledText = styled(Text)`
 `
 
 const Flexibility = () => {
-    const { is_eu } = useRegion()
-    const chosen_content = is_eu ? eucontent : content
+    const { region } = useBuildVariant()
+    const chosen_content = region === "eu" ? eucontent : content
 
     return (
         <Section>
@@ -142,7 +142,7 @@ const Flexibility = () => {
             >
                 <Localize
                     translate_text={
-                        is_eu
+                        region === "eu"
                             ? '_t_Flexibility with multiple markets_t_'
                             : '_t_Focused accounts for a focused strategy_t_'
                     }
@@ -151,8 +151,8 @@ const Flexibility = () => {
             <Flex mb="4rem" tablet_direction="column" tablet_ai="center" tablet={{ m: '0' }}>
                 {chosen_content.map((item, idx) => {
                     return (
-                        ((is_eu && item.show_eu) ||
-                            (!is_eu && !item.show_eu) ||
+                        ((region === "eu" && item.show_eu) ||
+                            (region !== "eu" && !item.show_eu) ||
                             item.show_always) && (
                             <ClientCard key={idx}>
                                 {item.icon}

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_interest_free_trading.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_interest_free_trading.tsx
@@ -4,11 +4,11 @@ import { Flex } from 'components/containers'
 import { CardStyle, Header, Text } from 'components/elements'
 import { LinkButton } from 'components/form'
 import { Localize, localize } from 'components/localization'
-import useRegion from 'components/hooks/use-region'
 import Checkmark from 'images/svg/dmt5/checkmark.svg'
 import ZeroPercent from 'images/svg/dmt5/zero_percent.svg'
 import device from 'themes/device'
 import { TString } from 'types/generics'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type CheckedTextProps = {
     content: TString
@@ -152,8 +152,8 @@ const CheckedText = ({ content }: CheckedTextProps) => (
 )
 
 const InterestFreeTrading = () => {
-    const { is_eu } = useRegion()
-    const commission = is_eu
+    const { region } = useBuildVariant()
+    const commission = region === "eu"
         ? '_t_Enjoy zero commission trading on all assets._t_'
         : '_t_Enjoy zero commission trading on all assets. Plus, pay no swap charges on overnight positions for selected derived indices and financial assets._t_'
 

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_margin_calculator.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_margin_calculator.tsx
@@ -6,9 +6,9 @@ import { Carousel, CarouselProps, Header, LinkText, QueryImage, Text } from 'com
 import { LinkButton } from 'components/form'
 import { Localize, localize } from 'components/localization'
 import device from 'themes/device'
-import useRegion from 'components/hooks/use-region'
 import { useLangDirection } from 'components/hooks/use-lang-direction'
 import { TString } from 'types/generics'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type CalculatorProps = {
     children?: React.ReactNode
@@ -193,8 +193,8 @@ const CalculatorCard = ({
     name,
     text,
 }: CalculatorProps) => {
+    const { region } = useBuildVariant()
     const data = useStaticQuery(query)
-    const { is_eu } = useRegion()
 
     return (
         <StyledCardContainer>
@@ -207,14 +207,14 @@ const CalculatorCard = ({
             <ImageWrapper>
                 <Desktop>
                     <QueryImage
-                        data={is_eu ? data['eu_' + image_name] : data[image_name]}
+                        data={region === "eu" ? data['eu_' + image_name] : data[image_name]}
                         alt={localize(image_alt)}
                     />
                 </Desktop>
                 <Mobile>
                     <QueryImage
                         data={
-                            is_eu
+                            region === "eu"
                                 ? data['eu_' + image_name + '_mobile']
                                 : data[image_name + '_mobile']
                         }
@@ -251,6 +251,7 @@ const calculators: CalculatorProps[] = [
 ]
 
 const MarginCalculator = () => {
+    const { region } = useBuildVariant()
     const lang_direction = useLangDirection()
 
     const settings: CarouselProps = {
@@ -275,8 +276,6 @@ const MarginCalculator = () => {
         },
     }
 
-    const { is_eu } = useRegion()
-
     return (
         <StyledSectionContainer>
             <StyledContainer>
@@ -286,7 +285,7 @@ const MarginCalculator = () => {
                             <Localize translate_text="_t_Take control of your trades on Deriv MT5_t_" />
                         </MainHeader>
                         <StyledText>
-                            {is_eu && (
+                            {region === "eu" && (
                                 <Localize
                                     translate_text="_t_Explore <0>CFDs</0> on Deriv MT5 and enjoy low spreads to increase your returns when the market moves in your favour._t_"
                                     components={[
@@ -300,7 +299,7 @@ const MarginCalculator = () => {
                                     ]}
                                 />
                             )}
-                            {!is_eu && (
+                            {region !== "eu" && (
                                 <Localize
                                     translate_text="_t_Explore <0>CFDs</0> on Deriv MT5, and enjoy high leverage and low spreads to increase your returns when the market moves in your favour._t_"
                                     components={[

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_numbers.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_numbers.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import DNumber from 'components/custom/_dnumbers'
-import useRegion from 'components/hooks/use-region'
 import { TString } from 'types/generics'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 // TO-DO (REBRANDING) Replace this component with NumberSection.
 type NumbersContentType = {
@@ -40,14 +40,9 @@ const numbers_content_eu: NumbersContentType[] = [
 ]
 
 const Numbers = () => {
-    const { is_eu } = useRegion()
-    const [contents, setContents] = useState(numbers_content)
+    const { region } =  useBuildVariant()
 
-    useEffect(() => {
-        if (is_eu) setContents(numbers_content_eu)
-    }, [is_eu])
-
-    return <DNumber items={contents} justify="space-around" />
+    return <DNumber items={region === "row" ? numbers_content : numbers_content_eu} justify="space-around" />
 }
 
 export default Numbers
diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_other-platforms.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_other-platforms.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import dxIcon from '../../images/svg/custom/rebranding/deriv-x-icon.svg'
 import dtIcon from '../../images/svg/custom/rebranding/dtrader-icon.svg'
-import ezIcon from '../../images/svg/dmt5/ez-icon.svg'
 import dGoIcon from '../../images/svg/custom/rebranding/deriv-go-icon.svg'
 import dbIcon from '../../images/svg/dmt5/db-icon.svg'
 import GenericCarousel, { TRenderableData } from 'components/custom/carousel/_platforms-carousel'

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_start-trader.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_start-trader.tsx
@@ -8,8 +8,8 @@ import { localize, Localize, LocalizedLink } from 'components/localization'
 import device from 'themes/device'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import useHandleLogin from 'components/hooks/use-handle-login'
-import useRegion from 'components/hooks/use-region'
 import useBreakpoints from 'components/hooks/use-breakpoints'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type TabProps = {
     active?: boolean
@@ -158,6 +158,7 @@ const StyledLocalizedLink = styled(LocalizedLink)<{ id?: string }>`
 `
 
 const StartTrader = () => {
+    const { region } = useBuildVariant()
     const { is_mobile_or_tablet } = useBreakpoints()
 
     const data = useStaticQuery(query)
@@ -170,7 +171,6 @@ const StartTrader = () => {
     const handleLogin = useHandleLogin()
     const handleSignup = useHandleSignup()
 
-    const { is_eu } = useRegion()
     const isDemo = tab === 'Demo'
     const isReal = tab === 'Real'
 
@@ -370,8 +370,8 @@ const StartTrader = () => {
         [data, is_mobile_or_tablet, handleLogin],
     )
 
-    const demo = is_eu ? eu_demo : row_demo
-    const real = is_eu ? eu_real : row_real
+    const demo = region === "eu" ? eu_demo : row_demo
+    const real = region === "eu" ? eu_real : row_real
 
     return (
         <Section>

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_why-trade-dmt5.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_why-trade-dmt5.tsx
@@ -7,10 +7,10 @@ import TwentyFourSeven from 'images/svg/dmt5/twenty-four-seven.svg'
 import SwapFree from 'images/svg/dmt5/swap-free-icon.svg'
 import { Localize } from 'components/localization'
 import { Header } from 'components/elements'
-import useRegion from 'components/hooks/use-region'
 import { Flex, SectionContainer } from 'components/containers'
 import device from 'themes/device'
 import BoxStyledFlex, { TItem } from 'components/custom/_box-styled-flex'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 const card_data: TItem[] = [
     {
@@ -78,16 +78,17 @@ const StyledHeader = styled(Header)`
 `
 
 const WhyTrader = () => {
-    const { is_eu } = useRegion()
+    const { region } = useBuildVariant()
+
     return (
         <Section>
             <StyledHeader align="center" mb="4rem" as="h2" type="page-title">
                 <Localize translate_text="_t_Why trade with Deriv MT5_t_" />
             </StyledHeader>
             <CardContainer>
                 <BoxStyledFlex
-                    items={is_eu ? card_data : card_data.concat(non_eu_card_data)}
-                    containerWidth={is_eu ? '1200px' : '900px'}
+                    items={region === "eu" ? card_data : card_data.concat(non_eu_card_data)}
+                    containerWidth={region === "eu" ? '1200px' : '900px'}
                 />
             </CardContainer>
         </Section>

diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/index.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import {
     WhyTrader,
     StartTrader,
@@ -14,7 +14,6 @@ import DHero from 'components/custom/_dhero-dmt5'
 import Layout from 'components/layout/layout'
 import { SEO, TMetaAttributes } from 'components/containers'
 import { WithIntl } from 'components/localization'
-import useRegion from 'components/hooks/use-region'
 import { TGatsbyHead } from 'features/types'
 
 const meta_attributes: TMetaAttributes = {
@@ -23,32 +22,23 @@ const meta_attributes: TMetaAttributes = {
         '_t_DMT5 is developed to give you the best CFD trading experience. You can access our MT5 trader through desktop and even mobile._t_',
 }
 
-const DMT5 = () => {
-    const { is_row } = useRegion()
-    const [is_loaded, setLoaded] = useState(false)
+const DMT5 = ({ pageContext }: TGatsbyHead) => {
+    const { region } = pageContext
 
-    useEffect(() => {
-        setLoaded(true)
-    }, [])
-
-    if (is_loaded) {
-        return (
-            <Layout>
-                <DHero />
-                <Numbers />
-                <WhatIsTrader />
-                <WhyTrader />
-                <StartTrader />
-                <MarginCalculator />
-                <Flexibility />
-                <SwapFreeTrading />
-                <DownloadApp />
-                {is_row && <OtherPlatforms />}
-            </Layout>
-        )
-    }
-
-    return <React.Fragment></React.Fragment>
+    return (
+        <Layout region={region}>
+            <DHero />
+            <Numbers />
+            <WhatIsTrader />
+            <WhyTrader />
+            <StartTrader />
+            <MarginCalculator />
+            <Flexibility />
+            <SwapFreeTrading />
+            <DownloadApp />
+            {region === "row" && <OtherPlatforms />}
+        </Layout>
+    )
 }
 
 export default WithIntl()(DMT5)