Merge pull request binary-com#51 from hamza-deriv/hamza/ompare-accoun…

…t-bug-fixes

fix: renamed variable + icons

packages/cfd/src/Assets/svgs/trading-instruments/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import DerivedFX from './ic-appstore-derived-fx.svg';
-import Synthetics from './ic-appstore-synthetics.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';
-import Forex from './ic-appstore-forex.svg';
-import Cryptocurrencies from './ic-appstore-cryptocurrencies.svg';
-import ETF from './ic-appstore-etf.svg';
+import DerivedFX from './ic-instrument-derived-fx.svg';
+import Synthetics from './ic-instrument-synthetics.svg';
+import Baskets from './ic-instrument-baskets.svg';
+import Stocks from './ic-instrument-stocks.svg';
+import StockIndices from './ic-instrument-stock-indices.svg';
+import Commodities from './ic-instrument-commodities.svg';
+import Forex from './ic-instrument-forex.svg';
+import Cryptocurrencies from './ic-instrument-cryptocurrencies.svg';
+import ETF from './ic-instrument-etf.svg';
 
 export type IconProps<T> = {
     icon: T;

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx

@@ -17,7 +17,7 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp
     const history = useHistory();
 
     const market_type = getMarketType(trading_platforms);
-    const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode);
+    const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode);
     const {
         modules: { cfd },
         common,
@@ -63,7 +63,7 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp
     let is_account_added = false;
 
     if (trading_platforms.platform === CFD_PLATFORMS.MT5) {
-        is_account_added = isMt5AccountAdded(current_list, jurisdiction_shortcode, is_demo);
+        is_account_added = isMt5AccountAdded(current_list, market_type_shortcode, is_demo);
     } else if (trading_platforms.platform === CFD_PLATFORMS.DXTRADE) {
         is_account_added = isDxtradeAccountAdded(current_list, is_demo);
     }
@@ -91,8 +91,8 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const account_status_response = getAccountVerficationStatus(
-        jurisdiction_shortcode,
+    const is_account_status_verified = getAccountVerficationStatus(
+        market_type_shortcode,
         poi_or_poa_not_submitted,
         poi_acknowledged_for_vanuatu_maltainvest,
         poi_acknowledged_for_bvi_labuan,
@@ -108,7 +108,7 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp
         setAppstorePlatform(trading_platforms.platform);
         if (trading_platforms.platform === CFD_PLATFORMS.MT5) {
             setJurisdictionSelectedShortcode(trading_platforms.shortcode);
-            if (account_status_response) {
+            if (is_account_status_verified) {
                 setAccountType(type_of_account);
                 enableCFDPasswordModal();
             } else {

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx

@@ -6,8 +6,8 @@ import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare
 
 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);
+    const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode);
+    const juridisction_data = getJuridisctionDescription(market_type_shortcode);
     return (
         <div
             className={classNames('compare-cfd-account-text-container', {

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx

@@ -8,15 +8,15 @@ import { getAccountCardTitle, getMarketType, getAccountIcon } from '../../Helper
 
 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 market_type_shortcode = market_type.concat('_', trading_platforms.shortcode);
     const jurisdiction_card_icon =
         trading_platforms.platform === 'dxtrade'
             ? getAccountIcon(trading_platforms.platform)
             : getAccountIcon(market_type);
     const jurisdiction_card_title =
         trading_platforms.platform === 'dxtrade'
             ? getAccountCardTitle(trading_platforms.platform, is_demo)
-            : getAccountCardTitle(jurisdiction_shortcode, is_demo);
+            : getAccountCardTitle(market_type_shortcode, is_demo);
     const labuan_jurisdiction_message = localize(
         'Choosing this jurisdiction will give you a Financial STP account. Your trades will go directly to the market and have tighter spreads.'
     );
@@ -29,7 +29,7 @@ const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }:
                     <Text as='h1' weight='bold' size='xs' align='center'>
                         {jurisdiction_card_title}
                     </Text>
-                    {jurisdiction_shortcode === 'financial_labuan' && (
+                    {market_type_shortcode === 'financial_labuan' && (
                         <Popover
                             alignment={isMobile ? 'top' : 'right'}
                             className='cfd-compare-account-labuan-tooltip'

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss

@@ -31,12 +31,12 @@
             height: 80rem;
             width: 100%;
         }
-        &__eu {
+        &__card-count {
             display: flex;
             justify-content: center;
             margin-left: 13rem;
             &--mobile {
-                margin-left: 25%;
+                margin-left: 10.5rem;
             }
         }
     }

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx

@@ -7,7 +7,7 @@ import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import CFDCompareAccountsCard from './cfd-compare-accounts-card';
 import {
-    getSortedAvailableAccounts,
+    getSortedCFDAvailableAccounts,
     getEUAvailableAccounts,
     getMT5DemoData,
     getDxtradeDemoData,
@@ -22,28 +22,36 @@ const CompareCFDs = observer(() => {
     const { is_demo, is_eu_user, available_dxtrade_accounts } = traders_hub;
 
     const sorted_available_accounts = !is_eu_user
-        ? getSortedAvailableAccounts(trading_platform_available_accounts)
+        ? getSortedCFDAvailableAccounts(trading_platform_available_accounts)
         : getEUAvailableAccounts(trading_platform_available_accounts);
+
     // Check if dxtrade data is available
     const has_dxtrade_account_available = available_dxtrade_accounts.length > 0;
 
-    const sorted_available_eu_accounts =
+    const sorted_cfd_available_eu_accounts =
         is_eu_user && sorted_available_accounts.length ? [...sorted_available_accounts] : [];
 
     // Getting real accounts data
-    const all_real_sorted_available_accounts = !is_eu_user
+    const all_real_sorted_cfd_available_accounts = !is_eu_user
         ? [...sorted_available_accounts]
-        : [...sorted_available_eu_accounts];
+        : [...sorted_cfd_available_eu_accounts];
 
     // Getting demo accounts data
-    const demo_available_accounts = [
-        ...getMT5DemoData(all_real_sorted_available_accounts).concat(
-            getDxtradeDemoData(all_real_sorted_available_accounts)
+    const demo_cfd_available_accounts = [
+        ...getMT5DemoData(all_real_sorted_cfd_available_accounts).concat(
+            getDxtradeDemoData(all_real_sorted_cfd_available_accounts)
         ),
     ];
 
-    const all_available_accounts =
-        is_demo && demo_available_accounts.length > 0 ? demo_available_accounts : all_real_sorted_available_accounts;
+    const all_cfd_available_accounts =
+        is_demo && demo_cfd_available_accounts.length > 0
+            ? demo_cfd_available_accounts
+            : all_real_sorted_cfd_available_accounts;
+
+    // Calculate the card count for alignment of card in center
+    const card_count = has_dxtrade_account_available
+        ? all_cfd_available_accounts.length + 1
+        : all_cfd_available_accounts.length;
 
     const DesktopHeader = (
         <div className='compare-cfd-header'>
@@ -78,12 +86,12 @@ const CompareCFDs = observer(() => {
                     <PageOverlay header={DesktopHeader} is_from_app={routes.traders_hub} />
                     <div
                         className={classNames('compare-cfd-account-container', {
-                            'compare-cfd-account-container__eu': is_eu_user,
+                            'compare-cfd-account-container__card-count': card_count < 4,
                         })}
                     >
                         <div className='card-list'>
                             <CFDCompareAccountsCarousel>
-                                {all_available_accounts.map(item => (
+                                {all_cfd_available_accounts.map(item => (
                                     <CFDCompareAccountsCard
                                         trading_platforms={item}
                                         key={item.market_type + item.shortcode}
@@ -92,7 +100,7 @@ const CompareCFDs = observer(() => {
                                     />
                                 ))}
                                 {/* Renders Deriv X data */}
-                                {all_available_accounts.length > 0 && has_dxtrade_account_available && (
+                                {all_cfd_available_accounts.length > 0 && has_dxtrade_account_available && (
                                     <CFDCompareAccountsCard
                                         trading_platforms={dxtrade_data}
                                         is_eu_user={is_eu_user}
@@ -120,11 +128,11 @@ const CompareCFDs = observer(() => {
                 >
                     <div
                         className={classNames('compare-cfd-account-container', {
-                            'compare-cfd-account-container__eu--mobile': is_eu_user,
+                            'compare-cfd-account-container__card-count--mobile': card_count < 2,
                         })}
                     >
                         <CFDCompareAccountsCarousel>
-                            {all_available_accounts.map(item => (
+                            {all_cfd_available_accounts.map(item => (
                                 <CFDCompareAccountsCard
                                     trading_platforms={item}
                                     key={item.market_type + item.shortcode}
@@ -133,7 +141,7 @@ const CompareCFDs = observer(() => {
                                 />
                             ))}
                             {/* Renders Deriv X data */}
-                            {all_available_accounts.length > 0 && has_dxtrade_account_available && (
+                            {all_cfd_available_accounts.length > 0 && has_dxtrade_account_available && (
                                 <CFDCompareAccountsCard
                                     trading_platforms={dxtrade_data}
                                     is_eu_user={is_eu_user}

packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx

@@ -16,6 +16,7 @@ const InstrumentsIconWithLabel = ({ icon, text, highlighted, className, is_aster
             <Text
                 as='p'
                 weight='bolder'
+                line_height='xs'
                 size='xxs'
                 align='center'
                 color='general'

packages/cfd/src/Helpers/compare-accounts-config.ts

@@ -12,10 +12,10 @@ const getHighlightedIconLabel = (
     is_demo?: boolean
 ): TInstrumentsIcon[] => {
     const market_type = getMarketType(trading_platforms);
-    const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode);
+    const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode);
     // Forex for these: MT5 Financial Vanuatu, MT5 Financial Labuan
     const forex_label =
-        jurisdiction_shortcode === 'financial_labuan' || jurisdiction_shortcode === 'financial_vanuatu' || is_demo
+        market_type_shortcode === 'financial_labuan' || market_type_shortcode === 'financial_vanuatu' || is_demo
             ? localize('Forex')
             : localize('Forex: standard/micro');
 
@@ -225,7 +225,7 @@ const getJuridisctionDescription = (shortcode: string) => {
 };
 
 // Sort the MT5 accounts in the order of derived, financial and swap-free
-const getSortedAvailableAccounts = (available_accounts: TModifiedTradingPlatformAvailableAccount[]) => {
+const getSortedCFDAvailableAccounts = (available_accounts: TModifiedTradingPlatformAvailableAccount[]) => {
     const swap_free_accounts = available_accounts
         .filter(item => item.market_type === 'all')
         .map(item => ({ ...item, platform: 'mt5' } as const));
@@ -267,7 +267,7 @@ const dxtrade_data: TModifiedTradingPlatformAvailableAccount = {
 
 // Check whether the POA POI status are completed for different jurisdictions
 const getAccountVerficationStatus = (
-    jurisdiction_shortcode: string,
+    market_type_shortcode: string,
     poi_or_poa_not_submitted: boolean,
     poi_acknowledged_for_vanuatu_maltainvest: boolean,
     poi_acknowledged_for_bvi_labuan: boolean,
@@ -278,7 +278,7 @@ const getAccountVerficationStatus = (
     has_submitted_personal_details: boolean,
     is_demo?: boolean
 ) => {
-    switch (jurisdiction_shortcode) {
+    switch (market_type_shortcode) {
         case 'synthetic_svg':
         case 'financial_svg':
         case 'all_svg':
@@ -367,7 +367,7 @@ export {
     getMarketType,
     getAccountIcon,
     getPlatformLabel,
-    getSortedAvailableAccounts,
+    getSortedCFDAvailableAccounts,
     getEUAvailableAccounts,
     dxtrade_data,
     getHeaderColor,