Merge pull request binary-com#40 from hamza-deriv/hamza/WALL-628/comp…

…are-account-card-with-description

feat: description div added

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

@@ -3,6 +3,7 @@ import Derived from './ic-appstore-derived.svg';
 import Financial from './ic-appstore-financial.svg';
 import CFDs from './ic-appstore-cfds.svg';
 import SwapFree from './ic-appstore-swap-free.svg';
+import DerivX from './ic-appstore-deriv-x.svg';
 
 export interface IconProps<T> {
     icon: T;
@@ -16,6 +17,7 @@ export const PlatformIcons = {
     Financial,
     CFDs,
     SwapFree,
+    DerivX,
 };
 
 const TradingPlatformIcon = ({ icon, className, size, onClick }: IconProps<keyof typeof PlatformIcons>) => {

packages/cfd/src/Components/props.types.ts

@@ -68,6 +68,11 @@ export type TTradingPlatformAvailableAccount = {
     sub_account_type: string;
 };
 
+export type TModifiedTradingPlatformAvailableAccount = Omit<TTradingPlatformAvailableAccount, 'market_type'> & {
+    platform?: 'mt5' | 'dxtrade';
+    market_type: 'synthetic' | 'financial' | 'all' | 'gaming';
+};
+
 export type TCardFlipStatus = {
     svg: boolean;
     bvi: boolean;
@@ -251,3 +256,12 @@ export type TIconData = {
     text: string;
     highlighted: boolean;
 };
+
+export type TAvailableCFDAccounts = {
+    availability: 'Non-EU' | 'EU' | 'All';
+    description: string;
+    icon: 'Derived' | 'Financial' | 'DerivX' | 'SwapFree';
+    market_type: 'synthetic' | 'financial' | 'all' | 'gaming';
+    name: string;
+    platform: 'mt5' | 'dxtrade';
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TModifiedTradingPlatformAvailableAccount } 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';
+
+type TCFDCompareAccountsCardProps = {
+    trading_platforms: TModifiedTradingPlatformAvailableAccount;
+};
+
+const CFDCompareAccountsCard = ({ trading_platforms }: TCFDCompareAccountsCardProps) => {
+    return (
+        <div className='compare-cfd-account-main-container'>
+            <CFDCompareAccountsPlatformLabel trading_platforms={trading_platforms} />
+            <div className='compare-cfd-account-card-container'>
+                <CFDCompareAccountsTitleIcon trading_platforms={trading_platforms} />
+                <CFDCompareAccountsDescription trading_platforms={trading_platforms} />
+                <CFDInstrumentsLabelHighlighted trading_platforms={trading_platforms} />
+            </div>
+        </div>
+    );
+};
+
+export default CFDCompareAccountsCard;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { TModifiedTradingPlatformAvailableAccount } from 'Components/props.types';
+import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare-accounts-config';
+
+type TCFDCompareAccountsDescriptionProps = {
+    trading_platforms: TModifiedTradingPlatformAvailableAccount;
+};
+
+const CFDCompareAccountsDescription = ({ trading_platforms }: TCFDCompareAccountsDescriptionProps) => {
+    const market_type = getMarketType(trading_platforms);
+    const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode);
+    const juridisction_data = getJuridisctionDescription(jurisdiction_shortcode);
+    return (
+        <div className={'compare-cfd-account-text-container'}>
+            <div className='compare-cfd-account-text-container__separator'>
+                <Text as='h1' weight='bold' size='m' align='center'>
+                    {juridisction_data.leverage}
+                </Text>
+                <Text as='p' size='xxxs' align='center'>
+                    {juridisction_data.leverage_description}
+                </Text>
+            </div>
+            <div className='compare-cfd-account-text-container__separator'>
+                <Text as='h1' weight='bold' size='m' align='center'>
+                    {juridisction_data.spread}
+                </Text>
+                <Text as='p' size='xxxs' align='center'>
+                    {juridisction_data.spread_description}
+                </Text>
+            </div>
+            <div className='compare-cfd-account-text-container__separator'>
+                <Text as='h1' weight='bold' size='xxs' align='center'>
+                    {juridisction_data.counterparty_company}
+                </Text>
+                <Text as='p' size='xxxs' align='center'>
+                    {juridisction_data.counterparty_company_description}
+                </Text>
+            </div>
+            <div className='compare-cfd-account-text-container__separator'>
+                <Text as='h1' weight='bold' size='xxs' align='center'>
+                    {juridisction_data.jurisdiction}
+                </Text>
+                <Text as='p' size='xxxs' align='center'>
+                    {juridisction_data.jurisdiction_description}
+                </Text>
+            </div>
+            <div className='compare-cfd-account-text-container__separator'>
+                <Text as='h1' weight='bold' size='xxs' align='center'>
+                    {juridisction_data.regulator}
+                </Text>
+                <Text as='p' size='xxxs' align='center'>
+                    {juridisction_data.regulator_description}
+                </Text>
+            </div>
+        </div>
+    );
+};
+
+export default CFDCompareAccountsDescription;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import classNames from 'classnames';
+import { TModifiedTradingPlatformAvailableAccount } from 'Components/props.types';
+import { getPlatformLabel, getHeaderColor, platfromsHeaderLabel } from '../../Helpers/compare-accounts-config';
+
+type TCFDCompareAccountsPlatformLabelProps = {
+    trading_platforms: TModifiedTradingPlatformAvailableAccount;
+};
+
+const CFDCompareAccountsPlatformLabel = ({ trading_platforms }: TCFDCompareAccountsPlatformLabelProps) => {
+    const platform_label = getPlatformLabel(trading_platforms.platform || '');
+    const header_color = getHeaderColor(platform_label);
+
+    return (
+        <div
+            className={classNames('compare-cfd-account-platform-label', {
+                'compare-cfd-account-platform-label--other-cfds': platform_label === platfromsHeaderLabel.other_cfds,
+            })}
+        >
+            <Text as='p' weight='bold' size='xxxs' align='center' color={header_color}>
+                {platform_label}
+            </Text>
+        </div>
+    );
+};
+
+export default CFDCompareAccountsPlatformLabel;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import TradigPlatformIconProps from '../../Assets/svgs/trading-platform';
+import { TModifiedTradingPlatformAvailableAccount } from 'Components/props.types';
+import { getAccountCardTitle, getMarketType, getAccountIcon } from '../../Helpers/compare-accounts-config';
+
+type TCFDCompareAccountsTitleIconProps = {
+    trading_platforms: TModifiedTradingPlatformAvailableAccount;
+};
+
+const CFDCompareAccountsTitleIcon = ({ trading_platforms }: TCFDCompareAccountsTitleIconProps) => {
+    const market_type = getMarketType(trading_platforms);
+    const jurisdiction_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)
+            : getAccountCardTitle(jurisdiction_shortcode);
+
+    return (
+        <React.Fragment>
+            <div className={'compare-cfd-account-icon-title'}>
+                <TradigPlatformIconProps icon={jurisdiction_card_icon} size={48} />
+                <Text as='h1' weight='bold' size='xs' align='center'>
+                    {jurisdiction_card_title}
+                </Text>
+            </div>
+            <hr className='compare-cfd-account-underline' />
+        </React.Fragment>
+    );
+};
+
+export default CFDCompareAccountsTitleIcon;