From 26a18244b72d91836f87ca5e3f1fea0f34ed1fca Mon Sep 17 00:00:00 2001 From: Hasan Mobarak <126637868+hasan-deriv@users.noreply.github.com> Date: Fri, 20 Oct 2023 17:42:42 +0800 Subject: [PATCH] Hasan/EU etf landing page (#5632) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: enable etf in nav for eu * feat: enable etf in market nav for eu * feat: removed eu condition for etf * feat: added visibility condition to available trade items * feat: added visibility condition to available trade benefits * feat: removed visibility condition from footer etf link * feat: removed visibility condition from other markets etf * feat: added hide in condition to markets * feat: removed hide in condition * empty: ๐Ÿš€ to redeploy and trigger build * fix: update dmt5 and cfd --- crowdin/messages.json | 1 - .../molecules/other-markets-slider/data.ts | 1 - .../trade-benefit-wrapper.tsx | 6 +++- .../trade-tab/trades-available-wrapper.tsx | 11 ++++++- .../organisms/markets/trade-tab/types.ts | 13 +++++++-- .../components/templates/footer/data.ts | 5 +--- .../main-nav/content/market/index.ts | 3 -- .../template/market-bottom-nav/data.ts | 3 -- .../template/market-bottom-nav/index.tsx | 6 +--- .../markets/etf/trades-available/data.tsx | 29 ++++++++++++------- .../pages/markets/etf/why-trade/data.tsx | 3 ++ src/pages/dmt5/_what-is-trader.tsx | 8 +---- .../markets/exchange-traded-funds/index.tsx | 11 +------ .../trade-types/cfds/_available-markets.tsx | 2 +- 14 files changed, 52 insertions(+), 50 deletions(-) diff --git a/crowdin/messages.json b/crowdin/messages.json index 7936daefc24..589cfb200a6 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -2329,7 +2329,6 @@ "-1829383827": "Contact us", "-1236814682": "Deriv life", "-2115275974": "CFDs", - "-931599668": "ETF", "-1879666853": "Deriv MT5", "-1290112064": "Deriv EZ", "-319687255": "Deriv GO", diff --git a/src/features/components/molecules/other-markets-slider/data.ts b/src/features/components/molecules/other-markets-slider/data.ts index 5e33205ce86..b08d990c88f 100644 --- a/src/features/components/molecules/other-markets-slider/data.ts +++ b/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, }, }, { diff --git a/src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx b/src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx index 1140c8a1f28..4734cdc0b1a 100644 --- a/src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx +++ b/src/features/components/organisms/markets/greyed-container/trade-benefit-wrapper.tsx @@ -6,6 +6,8 @@ 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[] @@ -13,6 +15,8 @@ interface TradeBenefitWrapperProps { } const TradeBenefitWrapper = ({ data, header }: TradeBenefitWrapperProps) => { + const { is_eu } = useRegion() + const visible_trade_benefits = useVisibleContent({ content: data, config: { is_eu } }) return ( { gap="12x" lg={{ direction: 'row', padding_inline: '20x', pb: '20x' }} > - {data.map((item) => ( + {visible_trade_benefits.map((item) => ( ))} diff --git a/src/features/components/organisms/markets/trade-tab/trades-available-wrapper.tsx b/src/features/components/organisms/markets/trade-tab/trades-available-wrapper.tsx index f87124d8ea2..860d7db5118 100644 --- a/src/features/components/organisms/markets/trade-tab/trades-available-wrapper.tsx +++ b/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 ( @@ -48,7 +57,7 @@ const TradesAvailableWrapper = ({ item }: TradesAvailableWrapperProps) => { - {item.trade_items.map((data) => { + {available_trade_items.map(({ data }) => { return ( diff --git a/src/features/components/organisms/markets/trade-tab/types.ts b/src/features/components/organisms/markets/trade-tab/types.ts index a43e16ef275..88d0ab0805a 100644 --- a/src/features/components/organisms/markets/trade-tab/types.ts +++ b/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 + export type TradeType = { trade_name?: TString trade_description_1?: TString trade_description_2?: TString - trade_items?: Array + trade_items: SmartTradeItem[] } diff --git a/src/features/components/templates/footer/data.ts b/src/features/components/templates/footer/data.ts index c9a1790379b..f426f817204 100644 --- a/src/features/components/templates/footer/data.ts +++ b/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, diff --git a/src/features/components/templates/navigation/main-nav/content/market/index.ts b/src/features/components/templates/navigation/main-nav/content/market/index.ts index dd6c537575b..fc10176bfd4 100644 --- a/src/features/components/templates/navigation/main-nav/content/market/index.ts +++ b/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, diff --git a/src/features/components/templates/navigation/template/market-bottom-nav/data.ts b/src/features/components/templates/navigation/template/market-bottom-nav/data.ts index 13729e0bca8..45e5e6533e5 100644 --- a/src/features/components/templates/navigation/template/market-bottom-nav/data.ts +++ b/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, diff --git a/src/features/components/templates/navigation/template/market-bottom-nav/index.tsx b/src/features/components/templates/navigation/template/market-bottom-nav/index.tsx index a63a6f0a158..c1ed79a5b50 100644 --- a/src/features/components/templates/navigation/template/market-bottom-nav/index.tsx +++ b/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 (
- {visible_items.map((item) => ( + {marketItems.map((item) => ( ))}
diff --git a/src/features/pages/markets/etf/trades-available/data.tsx b/src/features/pages/markets/etf/trades-available/data.tsx index 050962dbc44..6ff54e25756 100644 --- a/src/features/pages/markets/etf/trades-available/data.tsx +++ b/src/features/pages/markets/etf/trades-available/data.tsx @@ -12,19 +12,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, }, }, { diff --git a/src/features/pages/markets/etf/why-trade/data.tsx b/src/features/pages/markets/etf/why-trade/data.tsx index b094cfded50..359b2a79b45 100644 --- a/src/features/pages/markets/etf/why-trade/data.tsx +++ b/src/features/pages/markets/etf/why-trade/data.tsx @@ -45,6 +45,9 @@ export const ETFTradeBenefitItems: BenefitTradeTypeItem[] = [ alt: '_t_powerful and intuitive platforms_t_', }, }, + visibility: { + is_eu: false, + }, }, { id: 4, diff --git a/src/pages/dmt5/_what-is-trader.tsx b/src/pages/dmt5/_what-is-trader.tsx index d5a13857347..642d390b88d 100644 --- a/src/pages/dmt5/_what-is-trader.tsx +++ b/src/pages/dmt5/_what-is-trader.tsx @@ -44,13 +44,7 @@ const WhatIsTrader = () => { - + ) diff --git a/src/pages/markets/exchange-traded-funds/index.tsx b/src/pages/markets/exchange-traded-funds/index.tsx index 6d552338b53..6ae023b88a4 100644 --- a/src/pages/markets/exchange-traded-funds/index.tsx +++ b/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 ( - } - is_loading={is_region_loading} - /> - ) + return } export default WithIntl()(ETFMarketPage) diff --git a/src/pages/trade-types/cfds/_available-markets.tsx b/src/pages/trade-types/cfds/_available-markets.tsx index 3a7f1b2333e..87b785e469f 100644 --- a/src/pages/trade-types/cfds/_available-markets.tsx +++ b/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),