Skip to content

Commit

Permalink
Maryia/feat: add new dmt5 accounts to account switcher (#3)
Browse files Browse the repository at this point in the history 
* Maryia/add new dmt5 accounts to account switcher

* feat: showing add financial and synthetic accounts while still can add

* feat: removed server badge from account display, from url hash on redirect & from cashier transfer form

* removed extra tradingPlatformAvailableAccounts call

* connected account switcher to jurisdiction modal

* ensured that eu and dxtrade follow the old flow upon clicking Add real/demo account buttons

* showing jurisdiction modal to mf clients as well

* removed extra api call and changes from jurisdiction modal

* finalized account switcher

* added types to jurisdiction modal

* fixed modal title for eu/non-eu
  • Loading branch information
@maryia-deriv
maryia-deriv committed Jun 27, 2022
1 parent bc6cc4c commit 708b76d
Show file tree
Hide file tree
Showing 13 changed files with 188 additions and 179 deletions.
102 changes: 31 additions & 71 deletions packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,51 +19,31 @@ import PercentageSelector from 'Components/percentage-selector';
import RecentTransaction from 'Components/recent-transaction';
import './account-transfer-form.scss';

const AccountOption = ({ mt5_login_list, account, idx, is_dark_mode_on }) => {
let server;

if (account.is_mt) {
server = mt5_login_list.find(mt5_account => mt5_account.login === account.value);
}

return (
<React.Fragment key={idx}>
{(account.currency || account.platform_icon) && (
<div>
<Icon
icon={account.platform_icon || `IcCurrency-${account.currency.toLowerCase()}`}
className='account-transfer-form__currency-icon'
/>
</div>
)}

<div className='account-transfer-form__currency-wrapper'>
<Text size='xxs' line_height='xs' styles={{ color: 'inherit', fontWeight: 'inherit' }}>
{account.is_dxtrade || account.is_mt ? account.text : getCurrencyName(account.currency)}
</Text>
<Text size='xxxs' align='left' color='less-prominent'>
{account.value}
</Text>
const AccountOption = ({ account, idx }) => (
<React.Fragment key={idx}>
{(account.currency || account.platform_icon) && (
<div>
<Icon
icon={account.platform_icon || `IcCurrency-${account.currency.toLowerCase()}`}
className='account-transfer-form__currency-icon'
/>
</div>
)}

{(server?.market_type === 'gaming' || server?.market_type === 'synthetic') && (
<Text color={is_dark_mode_on ? 'general' : 'colored-background'} size='xxs' className='badge-server'>
{server.server_info.geolocation.region}&nbsp;
{server.server_info.geolocation.sequence !== 1 ? server.server_info.geolocation.sequence : ''}
</Text>
)}

<span className='account-transfer-form__balance'>
<Money
amount={account.balance}
currency={account.currency}
has_sign={account.balance < 0}
show_currency
/>
</span>
</React.Fragment>
);
};
<div className='account-transfer-form__currency-wrapper'>
<Text size='xxs' line_height='xs' styles={{ color: 'inherit', fontWeight: 'inherit' }}>
{account.is_dxtrade || account.is_mt ? account.text : getCurrencyName(account.currency)}
</Text>
<Text size='xxxs' align='left' color='less-prominent'>
{account.value}
</Text>
</div>

<span className='account-transfer-form__balance'>
<Money amount={account.balance} currency={account.currency} has_sign={account.balance < 0} show_currency />
</span>
</React.Fragment>
);

const AccountTransferBullet = ({ children }) => (
<div className='account-transfer-form__bullet-wrapper'>
Expand Down Expand Up @@ -236,9 +216,7 @@ const AccountTransferForm = ({
error,
is_crypto,
is_dxtrade_allowed,
is_dark_mode_on,
minimum_fee,
mt5_login_list,
onChangeConverterFromAmount,
onChangeConverterToAmount,
onChangeTransferFrom,
Expand Down Expand Up @@ -320,35 +298,19 @@ const AccountTransferForm = ({
dxtrade_accounts_to = [];

accounts_list.forEach((account, idx) => {
const text = (
<AccountOption
mt5_login_list={mt5_login_list}
idx={idx}
account={account}
is_dark_mode_on={is_dark_mode_on}
/>
);
const text = <AccountOption idx={idx} account={account} />;
const value = account.value;
const account_server = mt5_login_list.find(server => server.login === account.value);

const is_cfd_account = account.is_mt || account.is_dxtrade;
let server_region = '';
if (account_server?.market_type === 'gaming' || account_server?.market_type === 'synthetic') {
server_region = `[${account_server.server_info.geolocation.region}${
account_server.server_info.geolocation.sequence !== 1
? account_server.server_info.geolocation.sequence
: ''
}]`;
}

getAccounts('from', account).push({
text,
value,
is_mt: account.is_mt,
is_dxtrade: account.is_dxtrade,
nativepicker_text: `${
is_cfd_account ? account.market_type : getCurrencyName(account.currency)
} ${server_region} (${account.balance} ${is_cfd_account ? account.currency : account.text})`,
nativepicker_text: `${is_cfd_account ? account.market_type : getCurrencyName(account.currency)} (${
account.balance
} ${is_cfd_account ? account.currency : account.text})`,
});
const is_selected_from = account.value === selected_from.value;

Expand All @@ -370,9 +332,9 @@ const AccountTransferForm = ({
is_mt: account.is_mt,
is_dxtrade: account.is_dxtrade,
disabled: is_disabled,
nativepicker_text: `${
is_cfd_account ? account.market_type : getCurrencyName(account.currency)
} ${server_region} (${account.balance} ${is_cfd_account ? account.currency : account.text})`,
nativepicker_text: `${is_cfd_account ? account.market_type : getCurrencyName(account.currency)} (${
account.balance
} ${is_cfd_account ? account.currency : account.text})`,
});
}
});
Expand Down Expand Up @@ -702,7 +664,7 @@ AccountTransferForm.propTypes = {
validateTransferToAmount: PropTypes.func,
};

export default connect(({ client, modules, ui }) => ({
export default connect(({ client, modules }) => ({
account_limits: client.account_limits,
accounts_list: modules.cashier.account_transfer.accounts_list,
account_transfer_amount: modules.cashier.account_transfer.account_transfer_amount,
Expand All @@ -712,10 +674,8 @@ export default connect(({ client, modules, ui }) => ({
converter_to_error: modules.cashier.crypto_fiat_converter.converter_to_error,
crypto_transactions: modules.cashier.transaction_history.crypto_transactions,
is_crypto: modules.cashier.general_store.is_crypto,
is_dark_mode_on: ui.is_dark_mode_on,
is_dxtrade_allowed: client.is_dxtrade_allowed,
minimum_fee: modules.cashier.account_transfer.minimum_fee,
mt5_login_list: client.mt5_login_list,
onChangeConverterFromAmount: modules.cashier.crypto_fiat_converter.onChangeConverterFromAmount,
onChangeConverterToAmount: modules.cashier.crypto_fiat_converter.onChangeConverterToAmount,
onChangeTransferFrom: modules.cashier.account_transfer.onChangeTransferFrom,
Expand Down
2 changes: 1 addition & 1 deletion packages/cfd/src/Components/cfd-account-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ const CFDAccountCard = ({
<Money
amount={existing_data.display_balance}
currency={existing_data.currency}
has_sign={existing_data.balance && existing_data.balance < 0}
has_sign={!!existing_data.balance && existing_data.balance < 0}
show_currency
/>
</Text>
Expand Down
5 changes: 4 additions & 1 deletion packages/cfd/src/Components/cfd-demo-account-display.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { general_messages } from '../Constants/cfd-shared-strings';
import Loading from '../templates/_common/components/loading';
import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types';
import { TTradingPlatformAccounts } from './props.types';
import { TObjectCFDAccount } from 'Containers/cfd-dashboard';

type TStandPoint = {
financial_company: string;
Expand All @@ -32,7 +33,7 @@ type TCFDDemoAccountDisplayProps = {
is_logged_in: boolean;
isSyntheticCardVisible: (account_category: string) => boolean;
isFinancialCardVisible: () => boolean;
onSelectAccount: (objCFDAccount: { category: string; type: string; set_password?: number }) => void;
onSelectAccount: (objCFDAccount: TObjectCFDAccount) => void;
openAccountTransfer: (
data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts,
meta: TOpenAccountTransferMeta
Expand Down Expand Up @@ -75,6 +76,7 @@ const CFDDemoAccountDisplay = ({
onSelectAccount({
category: 'demo',
type: 'financial',
platform,
});
}
};
Expand Down Expand Up @@ -119,6 +121,7 @@ const CFDDemoAccountDisplay = ({
onSelectAccount({
category: 'demo',
type: 'synthetic',
platform,
})
}
onPasswordManager={openPasswordManager}
Expand Down
7 changes: 4 additions & 3 deletions packages/cfd/src/Components/cfd-real-account-display.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CFDAccountCard } from './cfd-account-card';
import { general_messages } from '../Constants/cfd-shared-strings';
import { DetailsOfEachMT5Loginid, ResidenceList, LandingCompany, GetSettings } from '@deriv/api-types';
import { TExistingData, TTradingPlatformAccounts } from './props.types.js';
import { TObjectCFDAccount } from 'Containers/cfd-dashboard';

type TStandPoint = {
financial_company: string;
Expand Down Expand Up @@ -42,7 +43,7 @@ type TCFDRealAccountDisplayProps = {
is_virtual: boolean;
isFinancialCardVisible: () => boolean;
landing_companies: LandingCompany;
onSelectAccount: (objCFDAccount: { category: string; type: string; set_password?: number }) => void;
onSelectAccount: (objCFDAccount: TObjectCFDAccount) => void;
openAccountTransfer: (
data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts,
meta: TOpenAccountTransferMeta
Expand Down Expand Up @@ -153,14 +154,14 @@ const CFDRealAccountDisplay = ({
if (is_eu && standpoint.malta && !has_malta_account) {
openAccountNeededModal('malta', localize('Deriv Synthetic'), localize('DMT5 Synthetic'));
} else {
onSelectAccount({ type: 'synthetic', category: 'real' });
onSelectAccount({ type: 'synthetic', category: 'real', platform });
}
};
const onSelectRealFinancial = () => {
if (is_eu && !has_maltainvest_account) {
openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('real CFDs'));
} else {
onSelectAccount({ type: 'financial', category: 'real' });
onSelectAccount({ type: 'financial', category: 'real', platform });
}
};

Expand Down
4 changes: 3 additions & 1 deletion packages/cfd/src/Containers/cfd-dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,14 @@ type TMt5StatusServerType = {

type TMt5StatusServer = Record<'demo' | 'real', TMt5StatusServerType[]>;

export type TObjectCFDAccount = { category: string; type: string; set_password?: number; platform?: string };

type TCFDDashboardProps = {
account_settings: { residence: string };
account_status: object;
beginRealSignupForMt5: () => void;
country: string;
createCFDAccount: (objCFDAccount: { category: string; type: string; set_password?: number }) => void;
createCFDAccount: (objCFDAccount: TObjectCFDAccount) => void;
current_list: Array<DetailsOfEachMT5Loginid> & { [key: string]: DetailsOfEachMT5Loginid };
dxtrade_accounts_list_error: null;
isAccountOfTypeDisabled: (
Expand Down
53 changes: 32 additions & 21 deletions packages/cfd/src/Containers/jurisdiction-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,23 @@ import { CFD_PLATFORMS } from '@deriv/shared';
import { LandingCompany } from '@deriv/api-types';
import JurisdictionModalContent from './jurisdiction-modal-content';

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;
};

type TCompareAccountsReusedProps = {
landing_companies: LandingCompany;
platform: string;
Expand All @@ -29,7 +46,7 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & {
residence: string;
jurisdiction_selected_card: boolean;
toggleJurisdictionModal: () => void;
tradingPlatformAvailableAccounts: any[];
tradingPlatformAvailableAccounts: TTradingPlatformAvailableAccount[];
};

const JurisdictionModal = ({
Expand All @@ -45,13 +62,19 @@ const JurisdictionModal = ({
toggleJurisdictionModal,
tradingPlatformAvailableAccounts,
}: TJurisdictionModalProps) => {
const financial_available_accounts = tradingPlatformAvailableAccounts
.filter(available_account => available_account.market_type === 'financial')
.map((acc: any[]) => acc);
const financial_available_accounts = tradingPlatformAvailableAccounts.filter(
available_account => available_account.market_type === 'financial'
);

const synthetic_available_accounts = tradingPlatformAvailableAccounts.filter(
available_account => available_account.market_type === 'gaming'
);

const synthetic_available_accounts = tradingPlatformAvailableAccounts
.filter(available_account => available_account.market_type === 'gaming')
.map((acc: any[]) => acc);
const modal_title = is_eu
? localize('Jurisdiction for your DMT5 CFDs account')
: localize('Choose a jurisdiction for your DMT5 {{account_type}} account', {
account_type: account_type === 'synthetic' ? 'Synthetic' : 'Financial',
});

const poa_status = authentication_status?.document_status;
const poi_status = authentication_status?.identity_status;
Expand All @@ -62,26 +85,14 @@ const JurisdictionModal = ({
className='cfd-compare-accounts-modal__wrapper'
style={{ marginTop: platform === CFD_PLATFORMS.DXTRADE ? '5rem' : '2.4rem' }}
>
<Button
className='cfd-dashboard__welcome-message--button'
has_effect
text={'Jurisdiction modal'}
onClick={toggleJurisdictionModal}
secondary
disabled={is_loading}
/>
<React.Suspense fallback={<UILoader />}>
<DesktopWrapper>
<Modal
className='cfd-dashboard__compare-accounts'
disableApp={disableApp}
enableApp={enableApp}
is_open={is_jurisdiction_modal_visible}
title={localize(
`Choose a jurisdiction for your ${is_eu ? 'CFDs' : 'DMT5'} ${
account_type === 'synthetic' ? 'Synthetic' : 'Financial'
} account`
)}
title={modal_title}
toggleModal={toggleJurisdictionModal}
type='button'
height='696px'
Expand Down Expand Up @@ -127,7 +138,7 @@ const JurisdictionModal = ({
};

export default connect(({ modules, ui, client }: RootStore) => ({
account_type: modules.cfd.account_type,
account_type: modules.cfd.account_type.type,
authentication_status: client.authentication_status,
disableApp: ui.disableApp,
enableApp: ui.enableApp,
Expand Down
17 changes: 10 additions & 7 deletions packages/cfd/src/Stores/Modules/CFD/cfd-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ export default class CFDStore extends BaseStore {
checkShouldOpenAccount() {
const account_type = sessionStorage.getItem('open_cfd_account_type');
if (account_type) {
const [category, type, set_password] = account_type.split('.');
this.createCFDAccount({ category, type, set_password });
const [category, platform, type, set_password] = account_type.split('.');
this.createCFDAccount({ category, platform, type, set_password });
sessionStorage.removeItem('open_cfd_account_type');
}
}
Expand Down Expand Up @@ -126,17 +126,20 @@ export default class CFDStore extends BaseStore {
}

@action.bound
createCFDAccount({ category, type, set_password }) {
createCFDAccount({ category, platform, type, set_password }) {
this.clearCFDError();
this.setAccountType({
category,
type,
});

if (category === 'real') {
this.realCFDSignup(set_password);
if (platform === CFD_PLATFORMS.DXTRADE) {
if (category === 'real') {
this.realCFDSignup(set_password);
} else {
this.demoCFDSignup();
}
} else {
this.demoCFDSignup();
this.toggleJurisdictionModal();
}
}

Expand Down
Loading

0 comments on commit 708b76d

Please sign in to comment.