Merge pull request binary-com#51 from jim-deriv/Jim/82833/create-a-re…

…usable-platform-app-container-2

Jim/82833/create a reusable platform app container 2

packages/appstore/src/components/cfds-listing/index.tsx

@@ -1,23 +1,51 @@
 import React from 'react';
 import { Text, StaticUrl } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { localize, Localize } from '@deriv/translations';
 import ListingContainer from 'Components/containers/listing-container';
 import './cfds-listing.scss';
 import { useStores } from 'Stores/index';
 import { observer } from 'mobx-react-lite';
 import AddOptionsAccount from 'Components/add-options-account';
-import { isMobile } from '@deriv/shared';
+import { isMobile, formatMoney } from '@deriv/shared';
+import TradingAppCard from 'Components/containers/trading-app-card';
+import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
 
 const CFDsListing = () => {
     const { tradinghub } = useStores();
-    const is_real = tradinghub.selected_account_type === 'real';
-    const has_no_real_account = !tradinghub.has_any_real_account;
+    const {
+        available_dxtrade_accounts,
+        available_mt5_accounts,
+        selected_region,
+        has_any_real_account,
+        startTrade,
+        is_eu_user,
+        is_demo,
+        getExistingAccounts,
+        getAccount,
+    } = tradinghub;
+    const has_no_real_account = !has_any_real_account;
+
+    const accounts_sub_text = is_eu_user ? localize('Account Information') : localize('Compare accounts');
+
+    const getShortCode = (account: TDetailsOfEachMT5Loginid) => {
+        return account.landing_company_short &&
+            account.landing_company_short !== 'svg' &&
+            account.landing_company_short !== 'bvi'
+            ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1)
+            : account.landing_company_short?.toUpperCase();
+    };
     return (
         <ListingContainer
             title={
                 !isMobile() && (
                     <Text size='sm' line_height='m' weight='bold'>
-                        <Localize i18n_default_text='CFD Listing' />
+                        <Localize
+                            i18n_default_text='CFDs<0>{{accounts_sub_text}}</0>'
+                            values={{ accounts_sub_text }}
+                            components={[
+                                <Text key={0} color='red' size='xxxs' weight='bold' styles={{ marginLeft: '1rem' }} />,
+                            ]}
+                        />
                     </Text>
                 )
             }
@@ -32,13 +60,98 @@ const CFDsListing = () => {
                 </Text>
             }
         >
-            {is_real && has_no_real_account && (
+            {!is_demo && has_no_real_account && (
                 <div className='cfd-full-row'>
                     <AddOptionsAccount />
                 </div>
             )}
 
-            <div className='cfds-listing'>CFD Listing</div>
+            <div className='cfd-full-row' style={{ paddingTop: '2rem' }}>
+                <Text size='xs' line_height='m' weight='bold'>
+                    {localize('Deriv MT5')}
+                </Text>
+            </div>
+            {available_mt5_accounts?.map((account: AvailableAccount) => {
+                const existing_accounts = getExistingAccounts(account.platform, account.market_type);
+                const has_existing_accounts = existing_accounts.length > 0;
+                return has_existing_accounts ? (
+                    existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                        <TradingAppCard
+                            icon={account.icon}
+                            sub_title={account.name}
+                            name={`${formatMoney(existing_account.currency, existing_account.display_balance, true)} ${
+                                existing_account.currency
+                            }`}
+                            platform={account.platform}
+                            description={existing_account.display_login}
+                            key={`trading_app_card_${account.name}`}
+                            type='transfer_trade'
+                            availability={selected_region}
+                            onAction={() => {
+                                startTrade(account.platform, existing_account);
+                            }}
+                        />
+                    ))
+                ) : (
+                    <TradingAppCard
+                        icon={account.icon}
+                        name={account.name}
+                        platform={account.platform}
+                        description={account.description}
+                        key={`trading_app_card_${account.name}`}
+                        type='get'
+                        availability={selected_region}
+                        onAction={() => {
+                            getAccount(account.market_type, account.platform);
+                        }}
+                    />
+                );
+            })}
+            <div className='cfd-full-row'>
+                <hr className='divider' />
+            </div>
+            {available_dxtrade_accounts?.length > 0 && (
+                <div className='cfd-full-row'>
+                    <Text size='xs' line_height='m' weight='bold'>
+                        {localize('Other CFDs')}
+                    </Text>
+                </div>
+            )}
+            {available_dxtrade_accounts?.map((account: AvailableAccount) => {
+                const existing_accounts = getExistingAccounts(account.platform, account.market_type);
+                const has_existing_accounts = existing_accounts.length > 0;
+                return has_existing_accounts ? (
+                    existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                        <TradingAppCard
+                            icon={account.icon}
+                            sub_title={account.name}
+                            name={`${formatMoney(existing_account.currency, existing_account.display_balance, true)} ${
+                                existing_account.currency
+                            }`}
+                            description={existing_account.display_login}
+                            platform={account.platform}
+                            key={`trading_app_card_${account.name}`}
+                            type='transfer_trade'
+                            availability={selected_region}
+                            is_disabled={!is_demo ? !has_no_real_account : account.is_disabled}
+                        />
+                    ))
+                ) : (
+                    <TradingAppCard
+                        icon={account.icon}
+                        name={account.name}
+                        platform={account.platform}
+                        description={account.description}
+                        is_disabled={account.is_disabled}
+                        onAction={() => {
+                            getAccount(account.market_type, account.platform);
+                        }}
+                        key={`trading_app_card_${account.name}`}
+                        type='get'
+                        availability={selected_region}
+                    />
+                );
+            })}
         </ListingContainer>
     );
 };

packages/appstore/src/components/containers/listing-container.scss

@@ -46,18 +46,17 @@
     }
 }
 
-.full-row {
-    width: 100%;
+.cfd-full-row {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
     grid-column: 1 / span 3;
-    gap: 1.6rem 4.8rem;
 }
 
-.cfd-full-row {
-    display: grid;
+.divider {
     width: 100%;
-    grid-column: 1 / span 3;
+    height: 1px;
+    background-color: var(--general-hover);
+    border: none;
 }
 
 .options {

packages/appstore/src/components/containers/trading-app-card-actions.tsx

@@ -1,23 +1,30 @@
 import { Button } from '@deriv/components';
 import { localize } from '@deriv/translations';
+import TradeButton from 'Components/trade-button/trade-button';
+import TransferTradeButtonGroup from 'Components/transfer-trade-button-group';
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 export type Actions = {
-    type: 'get' | 'none' | 'trade';
+    type: 'get' | 'none' | 'trade' | 'dxtrade' | 'transfer_trade' | 'dxtrade_transfer_trade';
     link_to?: string;
+    is_disabled?: boolean;
+    onAction?: () => void;
 };
 
-const TradingAppCardActions = ({ type, link_to }: Actions) => {
+const TradingAppCardActions = ({ type, link_to, is_disabled, onAction }: Actions) => {
     switch (type) {
         case 'get':
-            return <Button primary_light>{localize('Get')}</Button>;
-        case 'trade':
             return (
-                <Link to={link_to}>
-                    <Button primary>Trade</Button>
-                </Link>
+                <Button primary_light disabled={is_disabled} onClick={() => onAction?.()}>
+                    {localize('Get')}
+                </Button>
             );
+        case 'trade':
+            return <TradeButton link_to={link_to} onAction={onAction} />;
+        case 'dxtrade':
+            return <TradeButton link_to={link_to} />;
+        case 'transfer_trade':
+            return <TransferTradeButtonGroup link_to={link_to} onAction={onAction} />;
         case 'none':
         default:
             return null;

packages/appstore/src/components/containers/trading-app-card.scss

@@ -1,7 +1,6 @@
 .trading-app-card {
     display: inline-flex;
     align-items: center;
-    width: 100%;
     height: 8.8rem;
 
     &__details {
@@ -10,12 +9,7 @@
         flex-direction: column;
         height: 100%;
         margin-left: 1.6rem;
-
-        .title {
-        }
-
-        .description {
-        }
+        padding: 0 2rem;
     }
 
     &__actions {

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -4,13 +4,30 @@ import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
 import { platform_config, BrandConfig } from 'Constants/platform-config';
 import './trading-app-card.scss';
 import TradingAppCardActions, { Actions } from './trading-app-card-actions';
+import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
+import { isMobile } from '@deriv/shared';
 
-const TradingAppCard = ({ name, icon, type }: Actions & BrandConfig) => {
-    const { app_desc, link_to } = platform_config.find(config => config.name === name) || platform_config[0];
+const TradingAppCard = ({
+    name,
+    icon,
+    type,
+    description,
+    is_disabled,
+    onAction,
+    sub_title,
+}: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
+    const { app_desc, link_to } = platform_config.find(config => config.name === name) || {
+        app_desc: description,
+        link_to: '',
+    };
+    const icon_size = isMobile() ? 48 : 64;
     return (
         <div className='trading-app-card'>
-            <TradigPlatformIconProps icon={icon} size={48} />
+            <TradigPlatformIconProps icon={icon} size={icon_size} />
             <div className='trading-app-card__details'>
+                <Text className='title' size='xs' line_height='s'>
+                    {sub_title}
+                </Text>
                 <Text className='title' size='xs' line_height='s' weight='bold'>
                     {name}
                 </Text>
@@ -19,7 +36,7 @@ const TradingAppCard = ({ name, icon, type }: Actions & BrandConfig) => {
                 </Text>
             </div>
             <div className='trading-app-card__actions'>
-                <TradingAppCardActions type={type} link_to={link_to} />
+                <TradingAppCardActions type={type} link_to={link_to} is_disabled={is_disabled} onAction={onAction} />
             </div>
         </div>
     );

packages/appstore/src/components/main-title-bar/account-type-dropdown.scss

@@ -1,23 +1,41 @@
 .account-type-dropdown {
-    padding: 2px 8px 2px 2px;
-    border-radius: 4px;
+    &--parent {
+        padding: 0;
+        border: none;
+    }
     font-size: 1.4rem;
     font-weight: 700;
     line-height: 2rem;
     text-transform: capitalize;
-    border: 1px solid;
+    border: 2px solid;
 
-    &:focus {
+    &:focus,
+    &:hover {
         outline: none;
     }
 
-    &--real {
-        border-color: var(--status-info);
+    &--real,
+    &--real:focus,
+    &--real:hover {
+        border: 2px solid var(--status-info);
         color: var(--status-info);
     }
 
-    &--demo {
-        border-color: var(--status-success);
+    &--demo,
+    &--demo:focus,
+    &--demo:hover {
+        border: 2px solid var(--status-success);
         color: var(--status-success);
     }
 }
+.dc-dropdown {
+    &-container {
+        min-width: 8rem;
+        width: 8rem;
+    }
+    &__display {
+        &-text {
+            color: currentColor;
+        }
+    }
+}

packages/appstore/src/components/main-title-bar/account-type-dropdown.tsx

@@ -1,28 +1,26 @@
-import { account_types, AccountType } from 'Constants/platform-config';
+import { account_types } from 'Constants/platform-config';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import classNames from 'classnames';
 import React from 'react';
 import './account-type-dropdown.scss';
+import { Dropdown } from '@deriv/components';
 
 const AccountTypeDropdown = () => {
     const { tradinghub } = useStores();
 
     return (
-        <select
-            className={classNames(
-                'account-type-dropdown',
-                `account-type-dropdown--${tradinghub.selected_account_type}`
-            )}
-            value={tradinghub.selected_account_type}
-            onChange={e => tradinghub.selectAccountType(e.target.value)}
-        >
-            {account_types.map((account_type: AccountType) => (
-                <option key={account_type} className='account-type-dropdown__item' value={account_type}>
-                    {account_type}
-                </option>
-            ))}
-        </select>
+        <div className={classNames('account-type-dropdown--parent')}>
+            <Dropdown
+                value={tradinghub.selected_account_type}
+                classNameDisplay={classNames(
+                    'account-type-dropdown',
+                    `account-type-dropdown--${tradinghub.selected_account_type}`
+                )}
+                list={account_types}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => tradinghub.selectAccountType(e.target.value)}
+            />
+        </div>
     );
 };
 

packages/appstore/src/components/trade-button/index.ts

@@ -0,0 +1,4 @@
+import TradeButton from './trade-button';
+import './trade-button.scss';
+
+export default TradeButton;

packages/appstore/src/components/trade-button/trade-button.scss

@@ -0,0 +1,6 @@
+.trade-button {
+    width: 100%;
+    margin: 0.5rem 0;
+    padding: 0;
+    display: flex;
+}