Fasih/DPROD-3321/Multiple build for market pages (binary-com#7218)

* chore: create themes and sites dir * chore: created row and eu sites directiory * chore: created gatsby-theme-deriv directory * chore: moved src into deriv theme directory * chore: moved types into deriv theme directory * chore: moved static and gatsby files into deriv theme directory * chore: moved storybook and favicons files into deriv theme directory * chore: added eslint to theme * chore: added typescript to theme * chore: added workspaces * chore: added eslint script * chore: added stylelint script * chore: added prettier script * chore: added prettier and git ignore * chore: udpated jest configure * chore: fixed checkbox test * chore: added codegen script * chore: added storybook script * chore: added react packages * chore: moved packages to theme * chore: added theme config and options * chore: added row script * chore: moved i18 files to theme * chore: updated favicon path in gatsby config * chore: moved babel tailwind and js config file to theme * chore: added clean script * chore: updated eslint and tsconfig to fix alias import error * chore: added theme to sites * chore: fixed sass classnames issue * chore: updated tailwind config * chore: fixed env issue * chore: fixed eslint issues * chore: added build script * chore: fixed html minification issue * chore: fixed html minification issue * chore: updated partytown scripts * chore: updated serve scripts * chore: updated htaccess script * chore: updated translation scripts * chore: updated link generate workflow * chore: updated link generate workflow * chore: added new workflow * chore: removed workflow * empty: 🚀 to redeploy and trigger build * feat: added region conditions on home and header nav * chore: test workflow * chore: merge cleanup * chore: added region based data for homepage * chore: added a different port to eu serve * chore: test workflow * empty: 🚀 to redeploy and trigger build * empty: 🚀 to redeploy and trigger build * empty: 🚀 to redeploy and trigger build * chore: test workflow * chore: test workflow * chore: removed * empty: 🚀 to redeploy and trigger build * chore: removed workflow * feat: added conditions * feat: added more eu conditions * feat: added eu preview link file * feat: udpated region condition * feat: remove use effect and add normal conditions * feat: removed unsued code --------- Co-authored-by: hasan-deriv <[email protected]> Co-authored-by: fasihali-deriv <[email protected]> Co-authored-by: Hasan Mobarak <[email protected]> Co-authored-by: Muhammad Fasih Ali Naqvi <[email protected]>
hasan-deriv · Mar 5, 2024 · e94426e · e94426e
1 parent aa6cea0
commit e94426e
Show file tree

Hide file tree

Showing 28 changed files with 4,882 additions and 4,870 deletions.
diff --git a/.github/workflows/generate-preview-link-eu.yml b/.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

diff --git a/...eriv/src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx b/...eriv/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"

diff --git a/...me-deriv/src/features/components/organisms/markets/trade-tab/trades-available-wrapper.tsx b/...me-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

diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx b/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()

diff --git a/themes/gatsby-theme-deriv/src/features/pages/markets/etf/index.tsx b/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>

diff --git a/themes/gatsby-theme-deriv/src/features/types/index.ts b/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 =

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/basket-indices/index.tsx b/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)
 

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/commodities/index.tsx b/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 />

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/helper/_available-platforms.tsx b/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'
 

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/helper/_available-trades_desktop.tsx b/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 (

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/markets/_basket-indices.tsx b/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}/>}
         </>
     )
 }

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/markets/_commodities.tsx b/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_'
 

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/markets/_cryptocurrencies.tsx b/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 (
         <>

diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/markets/_forex.tsx b/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 (
         <>