Merge pull request binary-com#48 from hamza-deriv/hamza/WALL-1217/Add…

…-EU-Flow feat: Eu flow for DIEL
shontzu-deriv · Jun 30, 2023 · 64761a9 · 64761a9
2 parents 321418a + d6c0d86
commit 64761a9
Show file tree

Hide file tree

Showing 13 changed files with 199 additions and 149 deletions.
diff --git a/...nstruments/ic-appstore-basket-indices.svg → ...ading-instruments/ic-appstore-baskets.svg b/...nstruments/ic-appstore-basket-indices.svg → ...ading-instruments/ic-appstore-baskets.svg
diff --git a/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx b/packages/cfd/src/Assets/svgs/trading-instruments/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import DerivedFX from './ic-appstore-derived-fx.svg';
 import Synthetics from './ic-appstore-synthetics.svg';
-import BasketIndices from './ic-appstore-basket-indices.svg';
+import Baskets from './ic-appstore-baskets.svg';
 import Stocks from './ic-appstore-stocks.svg';
 import StockIndices from './ic-appstore-stock-indices.svg';
 import Commodities from './ic-appstore-commodities.svg';
@@ -19,7 +19,7 @@ export type IconProps<T> = {
 export const InstrumentsIcons = {
     DerivedFX,
     Synthetics,
-    BasketIndices,
+    Baskets,
     Stocks,
     StockIndices,
     Commodities,

diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts
@@ -264,11 +264,11 @@ export type TTradingPlatformAccounts = {
     platform?: 'dxtrade' | string;
 };
 
-export type TIconData = {
+export type TInstrumentsIcon = {
     icon:
         | 'DerivedFX'
         | 'Synthetics'
-        | 'BasketIndices'
+        | 'Baskets'
         | 'Stocks'
         | 'StockIndices'
         | 'Commodities'
@@ -277,6 +277,8 @@ export type TIconData = {
         | 'ETF';
     text: string;
     highlighted: boolean;
+    className?: string;
+    is_asterik?: boolean;
 };
 
 export type TAvailableCFDAccounts = {
@@ -290,6 +292,8 @@ export type TAvailableCFDAccounts = {
 
 export type TCompareAccountsCard = {
     trading_platforms: TModifiedTradingPlatformAvailableAccount;
+    is_eu_user?: boolean;
+    is_demo?: boolean;
 };
 
 export type TJurisdictionData = Record<

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx
@@ -8,7 +8,7 @@ import { GetSettings, GetAccountSettingsResponse } from '@deriv/api-types';
 import { TCompareAccountsCard } from 'Components/props.types';
 import { getMarketType, getAccountVerficationStatus, isMt5AccountAdded } from '../../Helpers/compare-accounts-config';
 
-const CFDCompareAccountsButton = observer(({ trading_platforms }: TCompareAccountsCard) => {
+const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TCompareAccountsCard) => {
     const history = useHistory();
 
     const market_type = getMarketType(trading_platforms);
@@ -17,7 +17,6 @@ const CFDCompareAccountsButton = observer(({ trading_platforms }: TCompareAccoun
         modules: { cfd },
         common,
         client,
-        traders_hub,
     } = useStore();
 
     const {
@@ -27,7 +26,6 @@ const CFDCompareAccountsButton = observer(({ trading_platforms }: TCompareAccoun
         toggleCFDVerificationModal,
         current_list,
     } = cfd;
-    const { is_demo } = traders_hub;
     const { setAppstorePlatform } = common;
 
     const {
@@ -89,8 +87,8 @@ const CFDCompareAccountsButton = observer(({ trading_platforms }: TCompareAccoun
         poa_pending,
         should_restrict_bvi_account_creation,
         should_restrict_vanuatu_account_creation,
-        is_demo,
-        has_submitted_personal_details
+        has_submitted_personal_details,
+        is_demo
     );
 
     const onClickAdd = () => {

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Text } from '@deriv/components';
 import { CFD_PLATFORMS } from '@deriv/shared';
-import { Localize } from '@deriv/translations';
+import { localize, Localize } from '@deriv/translations';
 import { TCompareAccountsCard } from 'Components/props.types';
 import CFDInstrumentsLabelHighlighted from './cfd-instruments-label-highlighted';
 import CFDCompareAccountsDescription from './cfd-compare-accounts-description';
 import CFDCompareAccountsTitleIcon from './cfd-compare-accounts-title-icon';
 import CFDCompareAccountsPlatformLabel from './cfd-compare-accounts-platform-label';
 import CFDCompareAccountsButton from './cfd-compare-accounts-button';
 
-const CFDCompareAccountsCard = ({ trading_platforms }: TCompareAccountsCard) => {
+const CFDCompareAccountsCard = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => {
     return (
         <div className='compare-cfd-account-main-container'>
             <div className='compare-cfd-account-card-container'>
@@ -20,10 +20,21 @@ const CFDCompareAccountsCard = ({ trading_platforms }: TCompareAccountsCard) =>
                         <Localize i18n_default_text='New!' />
                     </Text>
                 )}
-                <CFDCompareAccountsTitleIcon trading_platforms={trading_platforms} />
-                <CFDCompareAccountsDescription trading_platforms={trading_platforms} />
+                <CFDCompareAccountsTitleIcon
+                    trading_platforms={trading_platforms}
+                    is_eu_user={is_eu_user}
+                    is_demo={is_demo}
+                />
+                <CFDCompareAccountsDescription trading_platforms={trading_platforms} is_demo={is_demo} />
                 <CFDInstrumentsLabelHighlighted trading_platforms={trading_platforms} />
-                <CFDCompareAccountsButton trading_platforms={trading_platforms} />
+                {is_eu_user && (
+                    <div className='compare-cfd-account-card-container__eu-clients'>
+                        <Text color='red' size='xxs' weight='bold'>
+                            {localize('*Boom 300 and Crash 300 Index')}
+                        </Text>
+                    </div>
+                )}
+                <CFDCompareAccountsButton trading_platforms={trading_platforms} is_demo={is_demo} />
             </div>
         </div>
     );

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
 import { TCompareAccountsCard } from 'Components/props.types';
 import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare-accounts-config';
 
-const CFDCompareAccountsDescription = observer(({ trading_platforms }: TCompareAccountsCard) => {
-    const { traders_hub } = useStore();
-    const { is_demo } = traders_hub;
+const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareAccountsCard) => {
     const market_type = getMarketType(trading_platforms);
     const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode);
     const juridisction_data = getJuridisctionDescription(jurisdiction_shortcode);
@@ -63,6 +60,6 @@ const CFDCompareAccountsDescription = observer(({ trading_platforms }: TCompareA
             )}
         </div>
     );
-});
+};
 
 export default CFDCompareAccountsDescription;
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-platform-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-platform-label.tsx
@@ -5,7 +5,7 @@ import { TCompareAccountsCard } from 'Components/props.types';
 import { getPlatformLabel, getHeaderColor, platfromsHeaderLabel } from '../../Helpers/compare-accounts-config';
 
 const CFDCompareAccountsPlatformLabel = ({ trading_platforms }: TCompareAccountsCard) => {
-    const platform_label = getPlatformLabel(trading_platforms.platform || '');
+    const platform_label = getPlatformLabel(trading_platforms.platform);
     const header_color = getHeaderColor(platform_label);
 
     return (

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
 import { Text, Popover } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { observer, useStore } from '@deriv/stores';
 import TradigPlatformIconProps from '../../Assets/svgs/trading-platform';
 import { TCompareAccountsCard } from 'Components/props.types';
 import { getAccountCardTitle, getMarketType, getAccountIcon } from '../../Helpers/compare-accounts-config';
 
-const CFDCompareAccountsTitleIcon = observer(({ trading_platforms }: TCompareAccountsCard) => {
-    const { traders_hub } = useStore();
-    const { is_demo } = traders_hub;
-    const market_type = getMarketType(trading_platforms);
+const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => {
+    const market_type = !is_eu_user ? getMarketType(trading_platforms) : 'CFDs';
     const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode);
     const jurisdiction_card_icon =
         trading_platforms.platform === 'dxtrade'
@@ -48,6 +45,6 @@ const CFDCompareAccountsTitleIcon = observer(({ trading_platforms }: TCompareAcc
             <hr className='compare-cfd-account-underline' />
         </React.Fragment>
     );
-});
+};
 
 export default CFDCompareAccountsTitleIcon;
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss
@@ -47,6 +47,11 @@
         @include mobile {
             width: 17rem;
         }
+        &__eu-clients {
+            position: relative;
+            top: 0.5rem;
+            text-align: center;
+        }
         &__banner {
             position: absolute;
             z-index: 1;
@@ -126,3 +131,12 @@
     display: flex;
     gap: 2rem;
 }
+
+.trading-instruments {
+    &__span {
+        position: relative;
+        top: 0.2rem;
+        font-size: 1.6rem;
+        color: var(--text-red);
+    }
+}
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
@@ -7,6 +7,7 @@ import { observer, useStore } from '@deriv/stores';
 import CFDCompareAccountsCard from './cfd-compare-accounts-card';
 import {
     getSortedAvailableAccounts,
+    getEUAvailableAccounts,
     getDxtradeAccountAvailabaility,
     prepareDxtradeData,
     getMT5DemoData,
@@ -17,19 +18,24 @@ const CompareCFDs = observer(() => {
     const store = useStore();
     const { client, traders_hub } = store;
     const { trading_platform_available_accounts } = client;
-    const { available_cfd_accounts, is_demo } = traders_hub;
+    const { available_cfd_accounts, is_demo, is_eu_user } = traders_hub;
 
-    const sorted_available_accounts = getSortedAvailableAccounts(trading_platform_available_accounts);
+    const sorted_available_accounts = !is_eu_user
+        ? getSortedAvailableAccounts(trading_platform_available_accounts)
+        : getEUAvailableAccounts(trading_platform_available_accounts);
 
     const has_dxtrade_account_available = getDxtradeAccountAvailabaility(available_cfd_accounts);
 
     const dxtrade_data = available_cfd_accounts.filter(accounts => accounts.platform === CFD_PLATFORMS.DXTRADE);
     const { name, market_type } = dxtrade_data[0];
     const dxtrade_account = prepareDxtradeData(name, market_type);
 
-    const all_real_sorted_available_accounts = has_dxtrade_account_available
-        ? [...sorted_available_accounts, dxtrade_account]
-        : [...sorted_available_accounts];
+    const sorted_available_eu_accounts =
+        is_eu_user && sorted_available_accounts.length ? [...sorted_available_accounts] : [];
+    const all_real_sorted_available_accounts =
+        has_dxtrade_account_available && !is_eu_user
+            ? [...sorted_available_accounts, dxtrade_account]
+            : [...sorted_available_eu_accounts];
 
     const demo_available_accounts = getMT5DemoData(all_real_sorted_available_accounts);
     const all_available_accounts =
@@ -50,7 +56,12 @@ const CompareCFDs = observer(() => {
             </div>
             <h1 className='compare-cfd-header-title'>
                 <Text size='m' weight='bold' color='prominent'>
-                    <Localize i18n_default_text='Compare CFDs accounts' />
+                    <Localize
+                        i18n_default_text='Compare CFDs {{demo_title}} accounts'
+                        values={{
+                            demo_title: is_demo ? localize('demo') : '',
+                        }}
+                    />
                 </Text>
             </h1>
         </div>
@@ -68,6 +79,8 @@ const CompareCFDs = observer(() => {
                                     <CFDCompareAccountsCard
                                         trading_platforms={item}
                                         key={item.market_type + item.shortcode}
+                                        is_eu_user={is_eu_user}
+                                        is_demo={is_demo}
                                     />
                                 ))}
                             </CFDCompareAccountsCarousel>
@@ -88,6 +101,8 @@ const CompareCFDs = observer(() => {
                                 <CFDCompareAccountsCard
                                     trading_platforms={item}
                                     key={item.market_type + item.shortcode}
+                                    is_eu_user={is_eu_user}
+                                    is_demo={is_demo}
                                 />
                             ))}
                         </CFDCompareAccountsCarousel>

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import InstumentsIconWithLabel from './instruments-icon-with-label';
-import { TIconData, TCompareAccountsCard } from 'Components/props.types';
+import { TInstrumentsIcon, TCompareAccountsCard } from 'Components/props.types';
 import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config';
 
 const CFDInstrumentsLabelHighlighted = ({ trading_platforms }: TCompareAccountsCard) => {
-    const iconData: TIconData[] = [...getHighlightedIconLabel(trading_platforms)];
+    const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms)];
 
     return (
         <div className={'compare-cfd-account-outline'}>

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx
@@ -1,23 +1,8 @@
 import React from 'react';
+import { TInstrumentsIcon } from 'Components/props.types';
 import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments';
 
-type TIconProps = {
-    icon:
-        | 'DerivedFX'
-        | 'Synthetics'
-        | 'BasketIndices'
-        | 'Stocks'
-        | 'StockIndices'
-        | 'Commodities'
-        | 'Forex'
-        | 'Cryptocurrencies'
-        | 'ETF';
-    text: string;
-    highlighted: boolean;
-    className?: string;
-};
-
-const InstumentsIconWithLabel = ({ icon, text, highlighted, className }: TIconProps) => {
+const InstumentsIconWithLabel = ({ icon, text, highlighted, className, is_asterik }: TInstrumentsIcon) => {
     return (
         <div
             style={{
@@ -34,6 +19,11 @@ const InstumentsIconWithLabel = ({ icon, text, highlighted, className }: TIconPr
             >
                 {text}
             </span>
+            {is_asterik && (
+                <span className='trading-instruments__span' style={{ display: is_asterik ? 'block' : 'none' }}>
+                    *
+                </span>
+            )}
         </div>
     );
 };