Merge pull request #49 from hirad-rewok/Hirad/82846/MT5-Account-Type-…

…Modal

Hirad/82846/MT5-Account-Type-Modal

packages/appstore/src/components/modals/account-type-modal/account-type-modal.scss

@@ -0,0 +1,62 @@
+.account-type-wrapper {
+    display: flex;
+}
+
+.account-type--custom-exit {
+    display: none;
+}
+
+.account-type-card {
+    border: solid 1px var(--border-normal);
+    border-radius: 0.8rem;
+    display: flex;
+    align-self: center;
+    justify-content: space-evenly;
+    flex-direction: column;
+    min-height: 24rem;
+    width: 27.6em;
+    position: relative;
+    padding: 1.6rem;
+    @include mobile {
+        margin-bottom: 2rem;
+    }
+
+    &:hover {
+        box-shadow: 0 2px 8px 0 var(--shadow-menu);
+    }
+
+    &--disabled {
+        border: solid 1px var(--border-disabled);
+    }
+
+    @include desktop {
+        height: auto;
+        margin: 0 0.8rem;
+    }
+
+    &__wrapper {
+        display: flex;
+        height: 100%;
+        justify-content: center;
+
+        @include mobile {
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+    &--selected {
+        border: solid 1px $color-blue;
+        border-radius: $BORDER_RADIUS;
+    }
+    &__image,
+    &__header {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__description {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 1rem;
+    }
+}

packages/appstore/src/components/modals/account-type-modal/account-type-modal.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { Button, Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { observer } from 'mobx-react-lite';
+import classNames from 'classnames';
+import { useStores } from 'Stores/index';
+import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
+import { TModalContent, TAccountType, TAccountCard, TTradingPlatformAvailableAccount } from './types';
+import { TIconTypes } from 'Types';
+
+const derived_account: TAccountType = {
+    title_and_type: 'Derived',
+    icon: 'Derived',
+    description: 'Trade CFDs on MT5 with Derived indices that simulate real-world market movements.',
+};
+
+const financial_account: TAccountType = {
+    title_and_type: 'Financial',
+    icon: 'Financial',
+    description: 'Trade CFDs on MT5 with forex, stocks & indices, commodities, and cryptocurrencies.',
+};
+
+const AccountCard = ({ selectAccountTypeCard, account_type_card, title_and_type, description, icon }: TAccountCard) => {
+    const cardSelection = (cardType: string) => {
+        selectAccountTypeCard(account_type_card === cardType ? '' : cardType);
+    };
+    return (
+        <div
+            className={classNames('account-type-card', {
+                'account-type-card--selected': account_type_card === title_and_type,
+            })}
+            onClick={() => cardSelection(title_and_type)}
+        >
+            <div className='account-type-card__image'>
+                <TradigPlatformIconProps icon={icon as TIconTypes} size={64} />
+            </div>
+            <div className='account-type-card__header'>
+                <Text as='h2' weight='bold'>
+                    {localize(`${title_and_type}`)}
+                </Text>
+            </div>
+            <div className='account-type-card__description'>
+                <Text as='p' size='xxs' align='center'>
+                    {localize(`${description}`)}
+                </Text>
+            </div>
+        </div>
+    );
+};
+
+const ModalContent = ({
+    account_type_card,
+    selectAccountTypeCard,
+    is_financial_available,
+    is_synthetic_available,
+}: TModalContent) => {
+    return (
+        <div className='account-type-card__wrapper'>
+            {is_synthetic_available && (
+                <AccountCard
+                    account_type_card={account_type_card}
+                    selectAccountTypeCard={() => selectAccountTypeCard(`${derived_account.title_and_type}`)}
+                    description={derived_account.description}
+                    title_and_type={derived_account.title_and_type}
+                    icon={derived_account.icon}
+                />
+            )}
+            {is_financial_available && (
+                <AccountCard
+                    account_type_card={account_type_card}
+                    selectAccountTypeCard={() => selectAccountTypeCard(`${financial_account.title_and_type}`)}
+                    description={financial_account.description}
+                    title_and_type={financial_account.title_and_type}
+                    icon={financial_account.icon}
+                />
+            )}
+        </div>
+    );
+};
+
+const MT5AccountTypeModal = () => {
+    const { traders_hub, ui, client, modules } = useStores();
+    const {
+        is_account_type_modal_visible,
+        toggleAccountTypeModalVisibility,
+        account_type_card,
+        selectAccountTypeCard,
+    } = traders_hub;
+    const { toggleJurisdictionModal, setAccountType, account_type } = modules.cfd;
+    const { trading_platform_available_accounts } = client;
+    const { enableApp, disableApp } = ui;
+    const is_financial_available = trading_platform_available_accounts.some(
+        (available_account: TTradingPlatformAvailableAccount) => available_account.market_type === 'financial'
+    );
+
+    const is_synthetic_available = trading_platform_available_accounts.some(
+        (available_account: TTradingPlatformAvailableAccount) => available_account.market_type === 'gaming'
+    );
+
+    const set_account_type = () =>
+        account_type_card === 'Derived'
+            ? setAccountType({ category: 'real', type: 'synthetic' })
+            : setAccountType({ category: 'real', type: 'financial' });
+
+    return (
+        <div>
+            <React.Suspense fallback={<UILoader />}>
+                <DesktopWrapper>
+                    <Modal
+                        className='account-type-modal'
+                        disableApp={disableApp}
+                        enableApp={enableApp}
+                        exit_classname='account-type--custom-exit'
+                        is_open={is_account_type_modal_visible}
+                        title={localize(`Select Deriv MT5's account type`)}
+                        toggleModal={toggleAccountTypeModalVisibility}
+                        type='button'
+                        height='664px'
+                        width={'1200px'}
+                    >
+                        <ModalContent
+                            account_type_card={account_type_card}
+                            selectAccountTypeCard={selectAccountTypeCard}
+                            is_financial_available={is_financial_available}
+                            is_synthetic_available={is_synthetic_available}
+                        />
+                        <Modal.Footer has_separator>
+                            <Button
+                                disabled={!account_type_card}
+                                primary
+                                onClick={() => {
+                                    set_account_type();
+                                    toggleAccountTypeModalVisibility();
+                                    toggleJurisdictionModal();
+                                }}
+                            >
+                                {localize(`Next`)}
+                            </Button>
+                        </Modal.Footer>
+                    </Modal>
+                </DesktopWrapper>
+                <MobileWrapper>
+                    <MobileDialog
+                        portal_element_id='deriv_app'
+                        title={localize(`Select Deriv MT5's account type`)}
+                        visible={is_account_type_modal_visible}
+                        onClose={toggleAccountTypeModalVisibility}
+                    >
+                        <ModalContent
+                            account_type_card={account_type_card}
+                            selectAccountTypeCard={selectAccountTypeCard}
+                            is_financial_available={is_financial_available}
+                            is_synthetic_available={is_synthetic_available}
+                        />
+                        <Modal.Footer has_separator>
+                            <Button
+                                style={{ width: '100%' }}
+                                disabled={!account_type_card}
+                                primary
+                                onClick={() => {
+                                    set_account_type();
+                                    toggleAccountTypeModalVisibility();
+                                    toggleJurisdictionModal();
+                                }}
+                            >
+                                {localize(`Next`)}
+                            </Button>
+                        </Modal.Footer>
+                    </MobileDialog>
+                </MobileWrapper>
+            </React.Suspense>
+        </div>
+    );
+};
+export default observer(MT5AccountTypeModal);

packages/appstore/src/components/modals/account-type-modal/index.ts

@@ -0,0 +1,4 @@
+import AccountTypeModal from './account-type-modal';
+import './account-type-modal.scss';
+
+export default AccountTypeModal;

packages/appstore/src/components/modals/account-type-modal/types.ts

@@ -0,0 +1,37 @@
+export type TModalContent = {
+    account_type_card: string;
+    selectAccountTypeCard: React.Dispatch<React.SetStateAction<string>>;
+    is_financial_available: boolean;
+    is_synthetic_available: boolean;
+};
+
+export type TAccountType = {
+    title_and_type: string;
+    description: string;
+    icon: string;
+};
+
+export type TAccountCard = {
+    account_type_card: string;
+    title_and_type: string;
+    description: string;
+    icon: string;
+    selectAccountTypeCard: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export type TTradingPlatformAvailableAccount = {
+    market_type: 'financial' | 'gaming';
+    name: string;
+    requirements: {
+        after_first_deposit: {
+            financial_assessment: string[];
+        };
+        compliance: {
+            mt5: string[];
+            tax_information: string[];
+        };
+        signup: string[];
+    };
+    shortcode: 'bvi' | 'labuan' | 'svg' | 'vanuatu';
+    sub_account_type: string;
+};

packages/appstore/src/components/modals/modal-manager.tsx

@@ -12,6 +12,7 @@ import {
     MT5TradeModal,
     CFDPasswordManagerModal,
 } from '@deriv/cfd';
+import MT5AccountTypeModal from './account-type-modal';
 import RegulatorsCompareModal from './regulators-compare-modal';
 import { useStores } from 'Stores';
 import { TOpenAccountTransferMeta } from 'Types';
@@ -54,6 +55,7 @@ const ModalManager = () => {
             />
             <CFDPasswordManagerModal context={store} platform={platform} toggleModal={togglePasswordManagerModal} />
             <ResetTradingPasswordModal context={store} />
+            <MT5AccountTypeModal />
             <RegulatorsCompareModal />
         </React.Fragment>
     );

packages/appstore/src/types/common.types.ts

@@ -87,6 +87,24 @@ export type TStaticAccountProps = {
     type: TMarketType;
 };
 
+export type TIconTypes =
+    | 'Derived'
+    | 'Financial'
+    | 'BinaryBot'
+    | 'BinaryBotBlue'
+    | 'DBot'
+    | 'Demo'
+    | 'DerivGo'
+    | 'DerivGoBlack'
+    | 'DerivLogo'
+    | 'DerivTradingLogo'
+    | 'DerivX'
+    | 'DropDown'
+    | 'DTrader'
+    | 'Options'
+    | 'SmartTrader'
+    | 'SmartTraderBlue'
+    | 'CFDs';
 export interface AvailableAccount {
     name: string;
     sub_title?: string;

packages/core/src/Stores/traders-hub-store.js

@@ -17,6 +17,8 @@ export default class TradersHubStore extends BaseStore {
     selected_account_type = 'demo';
     is_regulators_compare_modal_visible = false;
     is_tour_open = false;
+    is_account_type_modal_visible = false;
+    account_type_card = '';
     selected_platform_type = 'options';
     active_index = 0;
 
@@ -30,14 +32,17 @@ export default class TradersHubStore extends BaseStore {
             available_mt5_accounts: observable,
             is_regulators_compare_modal_visible: observable,
             selected_account_type: observable,
+            account_type_card: observable,
             selected_platform_type: observable,
             selected_region: observable,
             is_tour_open: observable,
             selectAccountType: action.bound,
+            selectAccountTypeCard: action.bound,
             selectRegion: action.bound,
             setTogglePlatformType: action.bound,
             setActiveIndex: action.bound,
             toggleIsTourOpen: action.bound,
+            toggleAccountTypeModalVisibility: action.bound,
             handleTabItemClick: action.bound,
             toggleRegulatorsCompareModal: action.bound,
             has_any_real_account: computed,
@@ -67,6 +72,10 @@ export default class TradersHubStore extends BaseStore {
         this.selected_account_type = account_type;
     }
 
+    selectAccountTypeCard(account_type_card) {
+        this.account_type_card = account_type_card;
+    }
+
     selectRegion(region) {
         this.selected_region = region;
     }
@@ -86,6 +95,9 @@ export default class TradersHubStore extends BaseStore {
         this.available_platforms = appstore_platforms;
     }
 
+    toggleAccountTypeModalVisibility() {
+        this.is_account_type_modal_visible = !this.is_account_type_modal_visible;
+    }
     get is_eu_selected() {
         return this.selected_region === 'EU';
     }