Fasih/DPROD-3321/Multiple build for market pages

.github/workflows/generate-preview-link-eu.yml

@@ -47,7 +47,6 @@ jobs:
                           ''
                         ].join('\n')
                       core.setOutput("comment", comment);
-
             - name: Post Cloudflare Pages Preview comment
               uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd
               with:
@@ -76,7 +75,6 @@ jobs:
                   path: |
                       sites/eu/.cache
                       sites/eu/public
-
             - name: Install Dependencies
               uses: "./.github/actions/npm_install_from_cache"
 
@@ -105,7 +103,6 @@ jobs:
                   echo "$EVENT_NUMBER" > .pr/NR
                   echo "$EVENT_USERNAME" > .pr/USERNAME
                   echo "$HEAD_REF" > .pr/BRANCHNAME
-
             - name: Publish to Cloudflare Pages
               id: publish-to-pages
               env:
@@ -130,7 +127,6 @@ jobs:
                     echo "Deployment to Cloudflare Pages failed."
                     exit 1
                   fi
-
             - name: 'Generate preview link comment'
               if: success()
               id: generate_preview_url

themes/gatsby-theme-deriv/src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx

@@ -6,17 +6,17 @@ import Typography from 'features/components/atoms/typography'
 import { Localize } from 'components/localization'
 import Flex from 'features/components/atoms/flex-box'
 import { TString } from 'types/generics'
-import useRegion from 'components/hooks/use-region'
 import useVisibleContent from 'components/hooks/use-visible-content'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 interface TradeBenefitWrapperProps {
     data: BenefitTradeTypeItem[]
     header: TString
 }
 
 const TradeBenefitWrapper = ({ data, header }: TradeBenefitWrapperProps) => {
-    const { is_eu } = useRegion()
-    const visible_trade_benefits = useVisibleContent({ content: data, config: { is_eu } })
+    const { region } = useBuildVariant()
+    const visible_trade_benefits = useVisibleContent({ content: data, config: { is_eu: region === 'eu' ? true : false } })
     return (
         <Container.Fixed
             as="section"

themes/gatsby-theme-deriv/src/features/components/organisms/markets/trade-tab/trades-available-wrapper.tsx

@@ -7,8 +7,8 @@ import { TString } from 'types/generics'
 import TabMenu from 'features/components/templates/tabs/menu'
 import Icon from 'features/components/atoms/icon'
 import Link from 'features/components/atoms/link'
-import useRegion from 'components/hooks/use-region'
 import useVisibleContent from 'components/hooks/use-visible-content'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 interface TradesAvailableWrapperProps {
     header?: TString
@@ -17,14 +17,13 @@ interface TradesAvailableWrapperProps {
 
 const TradesAvailableWrapper = ({ item }: TradesAvailableWrapperProps) => {
     const [current_tab, setCurrentTab] = useState('_t_CFDs_t_')
-    const { is_eu } = useRegion()
+    const { region } = useBuildVariant()
     const available_trade_items = useVisibleContent({
         content: item.trade_items,
         config: {
-            is_eu,
+            is_eu: region === 'eu' ? true : false,
         },
     })
-
     return (
         <Flex.Box direction="col" gap="10x" md={{ gap: '20x' }} align="center" justify="center">
             <TabMenu

themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx

@@ -24,6 +24,7 @@ const MainFooter = () => {
     const [is_career, setIsCareer] = useState(false)
     const [social_buttons, setSocialButtons] = useState(socialButtonsROW)
     const [warn_text, setWarnText] = useState(warnText)
+    const region_buttons = region === "eu" ? socialButtonsEU : socialButtonsROW
 
     useEffect(() => {
         const current_path = getLocationPathname()

themes/gatsby-theme-deriv/src/features/pages/markets/etf/index.tsx

@@ -14,11 +14,12 @@ import MainRowNavigation from 'features/components/templates/navigation/main-nav
 import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param'
 import MarketBottomNav from 'features/components/templates/navigation/template/market-bottom-nav'
 import MainFooter from 'features/components/templates/footer'
+import { TPageContext } from 'features/types'
 
-const ETFMarket = () => {
+const ETFMarket = ({ region }: TPageContext) => {
     const { is_deriv_go } = usePlatformQueryParam()
     return (
-        <Layout>
+        <Layout region={region}>
             {!is_deriv_go && (
                 <div className="fixed z-[4] w-full">
                     <MainRowNavigation />
@@ -43,7 +44,7 @@ const ETFMarket = () => {
             <CheckTrading />
             <WhyTrade />
             <Steps />
-            <OtherMarketsSlider current_market="etfs" />
+            <OtherMarketsSlider current_market="etfs"/>
             <SignupPublic />
             <MainFooter />
         </Layout>

themes/gatsby-theme-deriv/src/features/types/index.ts

@@ -1,5 +1,5 @@
-import type { HeadProps } from 'gatsby'
 import { BuildVariantContextType } from 'features/contexts/build-variant/build-variant.context'
+import type { HeadProps } from 'gatsby'
 import { TString } from 'types/generics'
 
 export type ContentSectionTagOptions =

themes/gatsby-theme-deriv/src/pages/markets/basket-indices/index.tsx

@@ -9,18 +9,21 @@ import { WithIntl } from 'components/localization'
 import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
 
-const BasketPage = () => (
-    <Layout type="noNav" padding_top="0">
-        <DerivedFXHero
-            title="_t_Derived_t_"
-            description="_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_"
-            is_derived_row
-        />
-        <NavTab route_from="basket-indices" />
-        <BasketIndices simple_step_content={simple_step_content_basket} />
-        <SignupPublic />
-    </Layout>
-)
+const BasketPage = ({pageContext}: TGatsbyHead) => {
+    const {region} = pageContext
+    return  (
+        <Layout type="noNav" padding_top="0" region={region}>
+            <DerivedFXHero
+                title="_t_Derived_t_"
+                description="_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_"
+                is_derived_row={region === 'row'}
+            />
+            <NavTab route_from="basket-indices" />
+            <BasketIndices simple_step_content={simple_step_content_basket} />
+            <SignupPublic />
+        </Layout>
+    )
+}
 
 export default WithIntl()(BasketPage)
 

themes/gatsby-theme-deriv/src/pages/markets/commodities/index.tsx

@@ -1,30 +1,21 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Commodities from '../components/markets/_commodities'
 import { DerivedFXHero } from '../components/sections/_hero_derived_fx'
 import { simple_step_content_commodities } from '../static/content/_commodities'
 import SignupPublic from 'features/components/templates/signup/with-banner'
 import Layout from 'components/layout/layout'
 import { WithIntl } from 'components/localization'
 import { SEO } from 'components/containers'
-import useRegion from 'components/hooks/use-region'
 import { TGatsbyHead } from 'features/types'
-import { TString } from 'types/generics'
 
-const CommoditiesPage = () => {
-    const { is_eu } = useRegion()
-    const [description, setDescription] = useState<TString>(
-        '_t_Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our high leverage and competitive spreads._t_',
-    )
-
-    useEffect(() => {
-        if (is_eu)
-            setDescription(
-                '_t_Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our competitive spreads._t_',
-            )
-    }, [is_eu])
+const CommoditiesPage = ({pageContext}: TGatsbyHead) => {
+    const {region} = pageContext
+    const description = region === 'eu'?
+    '_t_Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our competitive spreads._t_':
+    '_t_Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our high leverage and competitive spreads._t_'
 
     return (
-        <Layout type="noNav" padding_top="0">
+        <Layout type="noNav" padding_top="0" region={region}>
             <DerivedFXHero title="_t_Commodities_t_" description={description} is_commodities />
             <Commodities simple_step_content={simple_step_content_commodities} />
             <SignupPublic />

themes/gatsby-theme-deriv/src/pages/markets/components/helper/_available-platforms.tsx

@@ -12,7 +12,7 @@ import DBot from 'images/svg/custom/rebranding/deriv-bot-icon.svg'
 import DMT5 from 'images/svg/custom/rebranding/dmt5-icon.svg'
 import DTrader from 'images/svg/custom/rebranding/dtrader-icon.svg'
 import DerivGo from 'images/svg/custom/rebranding/deriv-go-icon.svg'
-import useRegion from 'components/hooks/use-region'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type AvailablePlatformsProps = {
     dmt5?: boolean
@@ -93,12 +93,10 @@ const AvailablePlatforms = ({
     tablet_direction,
     m_top,
 }: AvailablePlatformsProps) => {
-    const { is_eu } = useRegion()
-    const [show_derivx, setShowDerivX] = useState(true)
+
+    const { region } = useBuildVariant()
+    const show_derivx = region === 'row' ? true : false
 
-    useEffect(() => {
-        if (is_eu) setShowDerivX(false)
-    }, [is_eu])
     const deriv_mt5_name = 'Deriv MT5'
     const deriv_go_name = 'Deriv GO'
 

themes/gatsby-theme-deriv/src/pages/markets/components/helper/_available-trades_desktop.tsx

@@ -5,11 +5,11 @@ import { SectionContainer, Flex, Container } from 'components/containers'
 import { Header } from 'components/elements'
 import { Localize } from 'components/localization'
 import device from 'themes/device'
-import useRegion from 'components/hooks/use-region'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import { isBrowser } from 'common/utility'
 import { TString } from 'types/generics'
 import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type CardProps = {
     active_tab: string
@@ -201,19 +201,15 @@ const AvailableTradesDesktop = ({
     Multipliers,
     display_title,
 }: AvailableTradesProps) => {
-    const { is_eu } = useRegion()
+    const { region } = useBuildVariant()
     const [tab, setTab] = useState('cfds')
     const params = new URLSearchParams(isBrowser() && location.search)
-    const [show_digital_options, setShowDigitalOptions] = useState(true)
+    const show_digital_options = region === 'row' ? true : false
 
     useEffect(() => {
         setTab(params.get('tab') || 'cfds')
     }, [params])
 
-    useEffect(() => {
-        if (is_eu) setShowDigitalOptions(false)
-    }, [is_eu])
-
     const { is_deriv_go } = usePlatformQueryParam()
 
     return (

themes/gatsby-theme-deriv/src/pages/markets/components/markets/_basket-indices.tsx

@@ -15,10 +15,10 @@ import { Localize, localize } from 'components/localization'
 import Typography from 'features/components/atoms/typography'
 import LinkButton from 'features/components/atoms/link-button'
 import Flex from 'features/components/atoms/flex-box'
-import useRegion from 'components/hooks/use-region'
 import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn'
 import OtherMarketsSlider from 'features/components/molecules/other-markets-slider'
 import { TSimpleStepContent } from 'pages/markets/static/content/_types'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
@@ -28,10 +28,10 @@ type BasketIndicesProps = {
 }
 
 const BasketIndices = ({ simple_step_content }: BasketIndicesProps) => {
-    const { is_eu, is_row } = useRegion()
+    const { region } = useBuildVariant()
     return (
         <>
-            {is_row && (
+            {region === 'row' && (
                 <>
                     <TradeDetails description="_t_Trade your favourite currency against a basket of major currencies and benefit from reduced risk and volatility._t_" />
                     <AvailableTrades
@@ -69,7 +69,7 @@ const BasketIndices = ({ simple_step_content }: BasketIndicesProps) => {
                         </LinkButton.Primary>
                     </Flex.Box>
                     <FullWidthMultiColumn header="_t_Why trade baskets on Deriv_t_">
-                        {(!is_eu ? basket_indices_content : basket_indices_content_eu).map(
+                        {(region === 'row' ? basket_indices_content : basket_indices_content_eu).map(
                             ({ alt, src, text }) => (
                                 <StyledBox
                                     key={text}
@@ -94,7 +94,7 @@ const BasketIndices = ({ simple_step_content }: BasketIndicesProps) => {
                     <OtherMarketsSlider current_market="synthetic" />
                 </>
             )}
-            {is_eu && <PageNotFound />}
+            {region === 'eu' && <PageNotFound region={region}/>}
         </>
     )
 }

themes/gatsby-theme-deriv/src/pages/markets/components/markets/_commodities.tsx

@@ -11,10 +11,10 @@ import Typography from 'features/components/atoms/typography'
 import LinkButton from 'features/components/atoms/link-button'
 import Flex from 'features/components/atoms/flex-box'
 import { Localize, localize } from 'components/localization'
-import useRegion from 'components/hooks/use-region'
 import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn'
 import OtherMarketsSlider from 'features/components/molecules/other-markets-slider'
 import { TSimpleStepContent } from 'pages/markets/static/content/_types'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
@@ -24,13 +24,9 @@ type CommoditiesProps = {
 }
 
 const Commodities = ({ simple_step_content }: CommoditiesProps) => {
-    const { is_eu } = useRegion()
-    const [show_digital_options, setShowDigitalOptions] = useState(true)
-
-    useEffect(() => {
-        if (is_eu) setShowDigitalOptions(false)
-    }, [is_eu])
-
+    const { region } = useBuildVariant()
+    const show_digital_options = region === 'row' ? true : false
+
     simple_step_content[1].text =
         '_t_Open a real account, make a deposit, and start trading commodities and other markets. _t_'
 

themes/gatsby-theme-deriv/src/pages/markets/components/markets/_cryptocurrencies.tsx

@@ -11,7 +11,6 @@ import TightSpread from 'images/svg/markets/tight-spread-new.svg'
 import CryptoPairs from 'images/svg/markets/crypto-pairs-new.svg'
 import ZeroCommission from 'images/svg/markets/zero-commission-new.svg'
 import Leverage from 'images/svg/stock-indices/stocks-high-leverage.svg'
-import useRegion from 'components/hooks/use-region'
 import Typography from 'features/components/atoms/typography'
 import LinkButton from 'features/components/atoms/link-button'
 import Flex from 'features/components/atoms/flex-box'
@@ -21,6 +20,7 @@ import OtherMarketsSlider from 'features/components/molecules/other-markets-slid
 import { TMarket, TSimpleStepContent } from 'pages/markets/static/content/_types'
 import { TSmartContent } from 'types/generics'
 import useVisibleContent from 'components/hooks/use-visible-content'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
@@ -85,9 +85,9 @@ const crypto_content: SmartMarketItem[] = [
 ]
 
 const Cryptocurrencies = ({ simple_step_content }: CryptocurrenciesProps) => {
-    const { is_eu } = useRegion()
+    const { region } = useBuildVariant()
     const { is_deriv_go } = usePlatformQueryParam()
-    const visible_items = useVisibleContent({ content: crypto_content, config: { is_eu } })
+    const visible_items = useVisibleContent({ content: crypto_content, config: { is_eu : region === 'eu' ? true : false } })
 
     return (
         <>

themes/gatsby-theme-deriv/src/pages/markets/components/markets/_forex.tsx

@@ -12,11 +12,11 @@ import { StyledBox } from '../../static/style/_markets-style'
 import Typography from 'features/components/atoms/typography'
 import LinkButton from 'features/components/atoms/link-button'
 import Flex from 'features/components/atoms/flex-box'
-import useRegion from 'components/hooks/use-region'
 import { Localize, localize } from 'components/localization'
 import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn'
 import OtherMarketsSlider from 'features/components/molecules/other-markets-slider'
 import { TSimpleStepContent } from 'pages/markets/static/content/_types'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
@@ -26,20 +26,12 @@ type ForexProps = {
 }
 
 const Forex = ({ simple_step_content }: ForexProps) => {
-    const { is_eu } = useRegion()
-    const [content, setContent] = useState(forex_content)
-    const [cfds, setCfds] = useState(forex_cfds)
-    const [show_digital_options, setShowDigitalOptions] = useState(true)
-    const [multiplier, setMultiplier] = useState(forex_multiplier)
+    const { region } = useBuildVariant()
 
-    useEffect(() => {
-        if (is_eu) {
-            setContent(forex_content_eu)
-            setCfds(forex_cfds_eu)
-            setShowDigitalOptions(false)
-            setMultiplier(forex_multiplier_eu)
-        }
-    }, [is_eu])
+    const content = region === 'eu' ? forex_content_eu : forex_content
+    const cfds = region === 'eu' ? forex_cfds_eu : forex_cfds
+    const show_digital_options = region === 'eu' ? false : true
+    const multiplier = region === 'eu' ? forex_multiplier_eu : forex_multiplier
 
     return (
         <>