binary-com · Feb 23, 2022 · Jan 20, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022
@@ -36,6 +36,9 @@ const getDomainAppID = () => {
     else return deriv_com_app_id
 }
 
+export const eu_domains = ['eu', 'staging-eu']
+export const uk_domains = ['uk', 'staging-uk']
+
 // URL
 export const domain_full_url = `https://${getDomainUrl()}`
 export const deriv_app_id = getDomainAppID()

@@ -8,7 +8,7 @@ import CssGrid, { CssGridColumn } from './css-grid'
 import SEO from './seo'
 import Show from './show'
 import Box from './box'
-import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK } from './visibility'
+import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK, UKEU } from './visibility'
 
 export {
     Container,
@@ -26,6 +26,7 @@ export {
     Mobile,
     EU,
     UK,
+    UKEU,
     ROW,
     NonUK,
     NonEU,

@@ -1,8 +1,9 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState, useContext } from 'react'
 import styled from 'styled-components'
 import { size } from 'themes/device'
 import { useBrowserResize } from 'components/hooks/use-browser-resize'
 import { DerivStore } from 'store'
+import { eu_domains, uk_domains } from 'common/constants'
 
 type ResponsiveContainerProps = {
     children: ReactElement
@@ -26,6 +27,7 @@ const DesktopLayer = styled.div<LayerProps>`
         display: none;
     }
 `
+
 const MobileLayer = styled.div<LayerProps>`
     @media (min-width: ${({ breakpoint }) => breakpoint}px) {
         display: none;
@@ -38,11 +40,12 @@ const domainBasedCheck = () => {
 
     useEffect(() => {
         if (window) {
-            const host_name = window.location.hostname
-            if (host_name.includes('eu')) {
+            const subdomain = window.location.hostname.split('.').slice(0, -2).join('.')
+
+            if (eu_domains.includes(subdomain)) {
                 setEuDomain(true)
             }
-            if (host_name.includes('uk')) {
+            if (uk_domains.includes(subdomain)) {
                 setUkDomain(true)
             }
         }
@@ -65,6 +68,20 @@ const deviceRenderer = (): boolean => {
     return is_loaded
 }
 
+export const getCountryRule = () => {
+    const { is_eu_domain, is_uk_domain } = domainBasedCheck()
+    const { is_eu_country, is_uk_country } = useContext<StoreDataType>(DerivStore)
+
+    const is_eu = (is_eu_country || is_eu_domain) && !is_uk_country
+    const is_uk = is_uk_country || is_uk_domain
+    const is_non_uk = !is_uk
+    const is_non_eu = !is_eu
+    const is_eu_uk = !(!is_eu && !is_uk)
+    const is_row = !is_eu_uk
+
+    return { is_eu, is_uk, is_non_uk, is_non_eu, is_eu_uk, is_row }
+}
+
 export const Desktop = ({
     children,
     breakpoint = DEFAULT_BREAKPOINT,
@@ -74,7 +91,7 @@ export const Desktop = ({
     const [is_mobile] = useBrowserResize(breakpoint_size)
     const is_loaded = deviceRenderer()
 
-    const desktop_view = is_mobile ? <></> : <div className={className}>{children}</div>
+    const desktop_view = is_mobile ? <></> : <>{children}</>
 
     return is_loaded ? (
         desktop_view
@@ -102,47 +119,37 @@ export const Mobile = ({
 }
 
 export const EU = ({ children }: ResponsiveContainerProps) => {
-    const { is_eu_domain } = domainBasedCheck()
-    const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_eu = is_eu_country || is_eu_domain
+    const { is_eu } = getCountryRule()
 
     return is_eu ? <>{children}</> : null
 }
 
 export const NonEU = ({ children }: ResponsiveContainerProps) => {
-    const { is_eu_domain } = domainBasedCheck()
-    const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
+    const { is_non_eu } = getCountryRule()
 
-    const is_eu = is_eu_domain || is_eu_country
-
-    return !is_eu ? <>{children}</> : null
+    return is_non_eu ? <>{children}</> : null
 }
 
 export const UK = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk_domain } = domainBasedCheck()
-    const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_uk = is_uk_country || is_uk_domain
+    const { is_uk } = getCountryRule()
 
     return is_uk ? <>{children}</> : null
 }
 
 export const NonUK = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk_domain } = domainBasedCheck()
-    const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
+    const { is_non_uk } = getCountryRule()
 
-    const is_uk = is_uk_domain || is_uk_country
+    return is_non_uk ? <>{children}</> : null
+}
 
-    return !is_uk ? <>{children}</> : null
+export const UKEU = ({ children }: ResponsiveContainerProps) => {
+    const { is_eu_uk } = getCountryRule()
+
+    return is_eu_uk ? <>{children}</> : null
 }
 
 export const ROW = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk_domain, is_eu_domain } = domainBasedCheck()
-    const { is_uk_country, is_eu_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_uk = is_uk_country || is_uk_domain
-    const is_eu = is_eu_domain || is_eu_country
+    const { is_row } = getCountryRule()
 
-    return !is_eu && !is_uk ? <>{children}</> : null
+    return is_row ? <>{children}</> : null
 }
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { SectionContainer, Flex, FlexGridContainer, EU, NonEU } from 'components/containers'
+import { SectionContainer, Flex, FlexGridContainer, EU, NonEU, ROW } from 'components/containers'
 import {
     Text,
     Card,
@@ -12,6 +12,7 @@ import {
     Divider,
 } from 'components/elements'
 import { localize, LocalizedLink, Localize } from 'components/localization'
+import { getCountryRule } from 'components/containers/visibility'
 import { binary_bot_url } from 'common/constants'
 import device from 'themes/device'
 // icons
@@ -286,7 +287,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
                             onClick={onClick}
                             to="/trade-types/cfds/"
                         />
-                        <NonEU>
+                        <ROW>
                             <NavCard
                                 aria_label="Options"
                                 icon={() => <img src={Options} alt="" width="32" height="32" />}
@@ -297,7 +298,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
                                 onClick={onClick}
                                 to="/trade-types/options/"
                             />
-                        </NonEU>
+                        </ROW>
                         <NavCard
                             aria_label="Multipliers"
                             icon={() => <img src={Multipliers} alt="" width="32" height="32" />}
@@ -324,7 +325,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
                     onClick={onClick}
                     to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}
                 />
-                <NonEU>
+                <ROW>
                     <>
                         <NavCard
                             aria_label="Derivx"
@@ -351,7 +352,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
                             otherLinkProps={{ rel: 'noopener noreferrer' }}
                         />
                     </>
-                </NonEU>
+                </ROW>
             </Flex>
             <Flex direction="column" wrap="wrap" jc="flex-start">
                 <EmptySpace />
@@ -365,7 +366,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
                     onClick={onClick}
                     to="/dtrader/"
                 />
-                <NonEU>
+                <ROW>
                     <>
                         <NavCard
                             aria_label="Deriv GO"
@@ -401,7 +402,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
                             otherLinkProps={{ rel: 'noopener noreferrer' }}
                         />
                     </>
-                </NonEU>
+                </ROW>
             </Flex>
         </Flex>
     )
@@ -413,62 +414,68 @@ NavPlatform.propTypes = {
     onClick: PropTypes.func,
 }
 
-export const NavMarket = ({ onClick, is_ppc }) => (
-    <Flex direction="column" wrap="wrap" jc="flex-start">
-        <NavCard
-            aria_label="Forex"
-            icon={() => <img src={Forex} alt="" width="32" height="32" />}
-            content={
-                <Localize translate_text="Trade the world’s largest financial market with popular forex pairs." />
-            }
-            title={<Localize translate_text="Forex" />}
-            onClick={onClick}
-            to="/markets/forex/"
-        />
-        {!is_ppc && (
+export const NavMarket = ({ onClick, is_ppc }) => {
+    const { is_not_uk } = getCountryRule()
+
+    return (
+        <Flex direction="column" wrap="wrap" jc="flex-start">
             <NavCard
-                aria_label="Synthetic indices"
-                icon={() => <img src={SyntheticIndices} alt="" width="32" height="32" />}
+                aria_label="Forex"
+                icon={() => <img src={Forex} alt="" width="32" height="32" />}
                 content={
-                    <Localize translate_text="Enjoy synthetic markets that emulate real-world market movements." />
+                    <Localize translate_text="Trade the world’s largest financial market with popular forex pairs." />
                 }
-                title={<Localize translate_text="Synthetic indices" />}
+                title={<Localize translate_text="Forex" />}
                 onClick={onClick}
-                to="/markets/synthetic/"
+                to="/markets/forex/"
             />
-        )}
-        <NavCard
-            aria_label="Stocks & indices"
-            icon={() => <img src={StockIndices} alt="" width="32" height="32" />}
-            content={
-                <Localize translate_text="Predict broader market trends and diversify your risk with stocks & indices." />
-            }
-            title={<Localize translate_text="Stocks & indices" />}
-            onClick={onClick}
-            to="/markets/stock/"
-        />
-        <NavCard
-            aria_label="Cryptocurrencies"
-            icon={() => <img src={Cryptocurrencies} alt="" width="32" height="32" />}
-            content={
-                <Localize translate_text="Trade with leverage on the price movement of popular crypto-fiat pairs." />
-            }
-            title={<Localize translate_text="Cryptocurrencies" />}
-            onClick={onClick}
-            to="/markets/cryptocurrencies/"
-        />
-        <NavCard
-            aria_label="Commodities"
-            icon={() => <img src={Commodities} alt="" width="32" height="32" />}
-            content={
-                <Localize translate_text="Trade natural resources that are central to the world's economy." />
-            }
-            title={<Localize translate_text="Commodities" />}
-            onClick={onClick}
-            to="/markets/commodities/"
-        />
-    </Flex>
-)
+            {!is_ppc && is_not_uk && (
+                <NavCard
+                    aria_label="Synthetic indices"
+                    icon={() => <img src={SyntheticIndices} alt="" width="32" height="32" />}
+                    content={
+                        <Localize translate_text="Enjoy synthetic markets that emulate real-world market movements." />
+                    }
+                    title={<Localize translate_text="Synthetic indices" />}
+                    onClick={onClick}
+                    to="/markets/synthetic/"
+                />
+            )}
+            <NavCard
+                aria_label="Stocks & indices"
+                icon={() => <img src={StockIndices} alt="" width="32" height="32" />}
+                content={
+                    <Localize translate_text="Predict broader market trends and diversify your risk with stocks & indices." />
+                }
+                title={<Localize translate_text="Stocks & indices" />}
+                onClick={onClick}
+                to="/markets/stock/"
+            />
+            {is_not_uk && (
+                <NavCard
+                    aria_label="Cryptocurrencies"
+                    icon={() => <img src={Cryptocurrencies} alt="" width="32" height="32" />}
+                    content={
+                        <Localize translate_text="Trade with leverage on the price movement of popular crypto-fiat pairs." />
+                    }
+                    title={<Localize translate_text="Cryptocurrencies" />}
+                    onClick={onClick}
+                    to="/markets/cryptocurrencies/"
+                />
+            )}
+            <NavCard
+                aria_label="Commodities"
+                icon={() => <img src={Commodities} alt="" width="32" height="32" />}
+                content={
+                    <Localize translate_text="Trade natural resources that are central to the world's economy." />
+                }
+                title={<Localize translate_text="Commodities" />}
+                onClick={onClick}
+                to="/markets/commodities/"
+            />
+        </Flex>
+    )
+}
 
 NavMarket.propTypes = {
     is_ppc: PropTypes.bool,

@@ -140,7 +140,6 @@ export const Carousel = ({
         chevron_style || {}
     const is_arrow = prevBtnEnabled || nextBtnEnabled
     const { nav_color, bottom_offset, height } = navigation_style || {}
-
     return (
         <div style={container_style}>
             <Embla>