Hasan/EU etf landing page

crowdin/messages.json

@@ -2293,7 +2293,6 @@
   "-1829383827": "Contact us",
   "-1236814682": "Deriv life",
   "-2115275974": "CFDs",
-  "-931599668": "ETF",
   "-1879666853": "Deriv MT5",
   "-1290112064": "Deriv EZ",
   "-319687255": "Deriv GO",

src/features/components/molecules/other-markets-slider/data.ts

@@ -85,7 +85,6 @@ export const other_markets_items: SmartOtherMarketsItem[] = [
         },
         visibility: {
             current_market: 'etfs',
-            is_eu: false,
         },
     },
     {

src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx

@@ -6,13 +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'
 
 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 } })
     return (
         <Container.Fixed
             as="section"
@@ -39,7 +43,7 @@ const TradeBenefitWrapper = ({ data, header }: TradeBenefitWrapperProps) => {
                 gap="12x"
                 lg={{ direction: 'row', padding_inline: '20x', pb: '20x' }}
             >
-                {data.map((item) => (
+                {visible_trade_benefits.map((item) => (
                     <TradeBenefit key={item.id} item={item.data} />
                 ))}
             </Flex.Box>

src/features/components/organisms/markets/trade-tab/trades-available-wrapper.tsx

@@ -7,6 +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'
 
 interface TradesAvailableWrapperProps {
     header?: TString
@@ -15,6 +17,13 @@ interface TradesAvailableWrapperProps {
 
 const TradesAvailableWrapper = ({ item }: TradesAvailableWrapperProps) => {
     const [current_tab, setCurrentTab] = useState('_t_CFDs_t_')
+    const { is_eu } = useRegion()
+    const available_trade_items = useVisibleContent({
+        content: item.trade_items,
+        config: {
+            is_eu,
+        },
+    })
 
     return (
         <Flex.Box direction="col" gap="10x" md={{ gap: '20x' }} align="center" justify="center">
@@ -48,7 +57,7 @@ const TradesAvailableWrapper = ({ item }: TradesAvailableWrapperProps) => {
                             <Localize translate_text="_t_Available on_t_" />
                         </Typography.Paragraph>
                         <Flex.Box direction="row" gap="12x" justify="center">
-                            {item.trade_items.map((data) => {
+                            {available_trade_items.map(({ data }) => {
                                 return (
                                     <Link url={data.link} key={data.name} no_hover>
                                         <Flex.Box direction="row" justify="center" align="center">

src/features/components/organisms/markets/trade-tab/types.ts

@@ -1,14 +1,21 @@
 import { LinkUrlType } from 'features/types'
-import { TString } from 'types/generics'
+import { TSmartContent, TString } from 'types/generics'
 
-export type TradeItems = {
+export type TradeItem = {
     icon: string
     name: TString
     link: LinkUrlType
 }
+
+interface TradeItemConfig {
+    is_eu: boolean
+}
+
+export type SmartTradeItem = TSmartContent<TradeItem, TradeItemConfig>
+
 export type TradeType = {
     trade_name?: TString
     trade_description_1?: TString
     trade_description_2?: TString
-    trade_items?: Array<TradeItems>
+    trade_items: SmartTradeItem[]
 }

src/features/components/templates/footer/data.ts

@@ -105,12 +105,9 @@ const marketsLinks: SmartFooterLink[] = [
     {
         id: 3,
         data: {
-            text: '_t_ETF_t_',
+            text: '_t_ETFs_t_',
             url: { type: 'internal', to: '/markets/exchange-traded-funds/' },
         },
-        visibility: {
-            is_row: true,
-        },
     },
     {
         id: 4,

src/features/components/templates/navigation/main-nav/content/market/index.ts

@@ -106,9 +106,6 @@ export const marketSectionContent: SmartNavSectionColumns[] = [
                         title: '_t_Exchange-traded funds (ETFs)_t_',
                         url: { type: 'internal', to: '/markets/exchange-traded-funds/' },
                     },
-                    visibility: {
-                        is_row: true,
-                    },
                 },
             ],
             no_divider: true,

src/features/components/templates/navigation/template/market-bottom-nav/data.ts

@@ -45,9 +45,6 @@ export const marketItems: MarketTradeTypeItem[] = [
                 to: '/markets/exchange-traded-funds/',
             },
         },
-        visibility: {
-            is_eu: false,
-        },
     },
     {
         id: 4,

src/features/components/templates/navigation/template/market-bottom-nav/index.tsx

@@ -2,15 +2,11 @@ import React from 'react'
 import { marketItems } from './data'
 import BottomNavItem from './bottom-nav.item'
 import { container } from './styles.module.scss'
-import useVisibleContent from 'components/hooks/use-visible-content'
-import useRegion from 'components/hooks/use-region'
 
 const MarketBottomNav = () => {
-    const { is_eu } = useRegion()
-    const visible_items = useVisibleContent({ content: marketItems, config: { is_eu } })
     return (
         <div className={container}>
-            {visible_items.map((item) => (
+            {marketItems.map((item) => (
                 <BottomNavItem key={item.id} item={item.data} />
             ))}
         </div>

src/features/pages/markets/etf/trades-available/data.tsx

@@ -11,19 +11,28 @@ export const trade_types: TradeType[] = [
             '_t_On Deriv, you can trade CFDs with high leverage, enabling you to pay just a fraction of the contract’s value. It will amplify your potential gain and also increase your potential loss._t_',
         trade_items: [
             {
-                icon: MT5,
-                name: '_t_Deriv MT5_t_',
-                link: {
-                    type: 'internal',
-                    to: '/dmt5',
+                id: 1,
+                data: {
+                    icon: MT5,
+                    name: '_t_Deriv MT5_t_',
+                    link: {
+                        type: 'internal',
+                        to: '/dmt5',
+                    },
                 },
             },
             {
-                icon: DerivX,
-                name: '_t_Deriv X_t_',
-                link: {
-                    type: 'internal',
-                    to: '/derivx',
+                id: 2,
+                data: {
+                    icon: DerivX,
+                    name: '_t_Deriv X_t_',
+                    link: {
+                        type: 'internal',
+                        to: '/derivx',
+                    },
+                },
+                visibility: {
+                    is_eu: false,
                 },
             },
         ],

src/features/pages/markets/etf/why-trade/data.tsx

@@ -37,6 +37,9 @@ export const ETFTradeBenefitItems: BenefitTradeTypeItem[] = [
 
             icon_src: ETF4,
         },
+        visibility: {
+            is_eu: false,
+        },
     },
     {
         id: 4,

src/pages/dmt5/_what-is-trader.tsx

@@ -44,13 +44,7 @@ const WhatIsTrader = () => {
                 <Localize translate_text="_t_What is Deriv MT5_t_" />
             </StyledHeader>
             <StyledText max_width="80.2rem" align="center" as="p" type="paragraph-1">
-                <Localize
-                    translate_text={
-                        is_eu
-                            ? '_t_Deriv MT5 gives you access to multiple asset classes – forex, stocks & indices, cryptocurrencies, commodities, and derived indices – on a single platform. With exclusive access to innovative assets, Deriv brings the MT5 experience to a superior level for both new and experienced traders._t_'
-                            : '_t_Deriv MT5 gives you access to multiple asset classes – forex, stocks & indices, cryptocurrencies, commodities, exchange-traded funds, and derived indices — on a single platform. With exclusive access to innovative trade types, Deriv brings the MT5 experience to a superior level for both new and experienced traders._t_'
-                    }
-                />
+                <Localize translate_text="_t_Deriv MT5 gives you access to multiple asset classes – forex, stocks & indices, cryptocurrencies, commodities, exchange-traded funds, and derived indices — on a single platform. With exclusive access to innovative trade types, Deriv brings the MT5 experience to a superior level for both new and experienced traders._t_" />
             </StyledText>
         </Section>
     )

src/pages/markets/exchange-traded-funds/index.tsx

@@ -1,20 +1,11 @@
 import React from 'react'
 import { WithIntl } from 'components/localization'
 import ETFMarket from 'features/pages/markets/etf'
-import ProtectedRoute from 'features/components/molecules/protected-route'
-import useRegion from 'components/hooks/use-region'
 import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
 
 const ETFMarketPage = () => {
-    const { is_eu, is_region_loading } = useRegion()
-    return (
-        <ProtectedRoute
-            is_page_visible={!is_eu}
-            component={<ETFMarket />}
-            is_loading={is_region_loading}
-        />
-    )
+    return <ETFMarket />
 }
 
 export default WithIntl()(ETFMarketPage)

src/pages/trade-types/cfds/_available-markets.tsx

@@ -125,7 +125,7 @@ const available_markets: TAvailableMarkets[] = [
     },
 ]
 
-const eu_restricted_markets = ['ETFs', 'Basket Indices']
+const eu_restricted_markets = ['Basket Indices']
 
 const eu_available_markets = available_markets.filter(
     (el) => !eu_restricted_markets.includes(el.name),