Skip to content

Commit

Permalink
feat: add region and shortcode label (binary-com#64)
Browse files Browse the repository at this point in the history 
* feat: add region and shortcode label

* chore: hide region for derived bvi

* fix: make short_code_and_region optional;

* refactor: based on code reviews

* chore: split shortcode and region into seperate vvariables
  • Loading branch information
@jim-deriv
jim-deriv committed Dec 23, 2022
1 parent d88fbda commit ebddf0c
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 21 deletions.
35 changes: 23 additions & 12 deletions packages/appstore/src/components/cfds-listing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const CFDsListing = () => {
has_any_real_account,
startTrade,
is_eu_user,
is_demo,
is_real,
getExistingAccounts,
getAccount,
} = traders_hub;
Expand All @@ -35,12 +35,24 @@ const CFDsListing = () => {

const accounts_sub_text = is_eu ? 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();
const getShortCodeAndRegion = (account: TDetailsOfEachMT5Loginid) => {
let short_code_and_region;
if (is_real && !is_eu_user) {
const short_code =
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();

const region =
account.market_type !== 'financial' && account.landing_company_short !== 'bvi'
? ` - ${account?.server_info?.geolocation?.region}`
: '';

short_code_and_region = `${short_code}${region}`;
}
return short_code_and_region;
};

return (
Expand Down Expand Up @@ -78,7 +90,7 @@ const CFDsListing = () => {
</div>
)}

{!is_demo && has_no_real_account && (
{is_real && has_no_real_account && (
<div className='cfd-full-row'>
<AddOptionsAccount />
</div>
Expand All @@ -103,9 +115,10 @@ const CFDsListing = () => {
existing_account.display_balance,
true
)} ${existing_account.currency}`}
short_code_and_region={getShortCodeAndRegion(existing_account)}
platform={account.platform}
description={existing_account.display_login}
key={`trading_app_card_${account.name}`}
key={`trading_app_card_${existing_account.display_login}`}
type='transfer_trade'
availability={selected_region}
onAction={() => {
Expand Down Expand Up @@ -159,10 +172,9 @@ const CFDsListing = () => {
)} ${existing_account.currency}`}
description={existing_account.display_login}
platform={account.platform}
key={`trading_app_card_${account.name}`}
key={`trading_app_card_${existing_account.display_login}`}
type='transfer_trade'
availability={selected_region}
is_disabled={!is_demo ? !has_no_real_account : account.is_disabled}
onAction={() => {
startTrade(account.platform, existing_account);
}}
Expand All @@ -174,7 +186,6 @@ const CFDsListing = () => {
name={account.name}
platform={account.platform}
description={account.description}
is_disabled={account.is_disabled}
onAction={() => {
getAccount(account.market_type, account.platform);
}}
Expand Down
8 changes: 8 additions & 0 deletions packages/appstore/src/components/containers/trading-app-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@
margin-left: 1.6rem;
padding: 0 2rem 0 0;
width: 100%;
&__short-code {
padding: 0.4rem;
height: fit-content;
width: fit-content;
margin-left: 1rem;
background-color: var(--icon-grey-background);
border-radius: 4px;
}
}

&__actions {
Expand Down
20 changes: 16 additions & 4 deletions packages/appstore/src/components/containers/trading-app-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { platform_config, mf_platform_config, BrandConfig } from 'Constants/plat
import './trading-app-card.scss';
import TradingAppCardActions, { Actions } from './trading-app-card-actions';
import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
import { isMobile } from '@deriv/shared';
import { useStores } from 'Stores/index';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
Expand All @@ -19,6 +18,7 @@ const TradingAppCard = ({
onAction,
sub_title,
has_divider,
short_code_and_region,
}: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
const { client } = useStores();

Expand All @@ -34,9 +34,21 @@ const TradingAppCard = ({
<TradigPlatformIconProps icon={icon} size={48} />
</div>
<div className={classNames('trading-app-card__details', { 'trading-app-card--divider': has_divider })}>
<Text className='title' size='xs' line_height='s'>
{sub_title}
</Text>
<div>
<Text className='title' size='xs' line_height='s'>
{sub_title}
</Text>
{short_code_and_region && (
<Text
weight='bolder'
size='xxxs'
line_height='s'
className='trading-app-card__details__short-code'
>
{short_code_and_region}
</Text>
)}
</div>
<Text className='title' size='xs' line_height='s' weight='bold'>
{name}
</Text>
Expand Down
1 change: 1 addition & 0 deletions packages/appstore/src/types/common.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export type TCategotyTypes = Record<TAccountCategory, boolean>;
export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & {
display_login?: string;
landing_company_short?: string;
short_code_and_region?: string;
};

export type TTradingPlatformAvailableAccount = {
Expand Down
17 changes: 12 additions & 5 deletions packages/core/src/Stores/traders-hub-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export default class TradersHubStore extends BaseStore {
toggleRegulatorsCompareModal: action.bound,
has_any_real_account: computed,
is_demo: computed,
is_real: computed,
is_eu_selected: computed,
getAvailableDxtradeAccounts: action.bound,
getAvailableCFDAccounts: action.bound,
Expand All @@ -63,11 +64,12 @@ export default class TradersHubStore extends BaseStore {
this.selected_region,
this.root_store.client.is_eu,
this.root_store.client.is_switching,
this.root_store.client.mt5_login_list,
this.root_store.client.dxtrade_accounts_list,
],
() => {
this.getAvailablePlatforms();
this.getAvailableCFDAccounts();
this.getAvailableDxtradeAccounts();
}
);

Expand Down Expand Up @@ -223,15 +225,16 @@ export default class TradersHubStore extends BaseStore {
getExistingAccounts(platform, market_type) {
const { current_list } = this.root_store.modules.cfd;
const current_list_keys = Object.keys(current_list);
const selected_account_type = this.selected_account_type;
const existing_accounts = current_list_keys
.filter(key => {
if (platform === CFD_PLATFORMS.MT5) {
return key.startsWith(`${platform}.${this.selected_account_type}.${market_type}`);
return key.startsWith(`${platform}.${selected_account_type}.${market_type}`);
}
if (platform === CFD_PLATFORMS.DXTRADE && market_type === 'all') {
return key.startsWith(`${platform}.${this.selected_account_type}.${platform}@${market_type}`);
return key.startsWith(`${platform}.${selected_account_type}.${platform}@${market_type}`);
}
return key.startsWith(`${platform}.${this.selected_account_type}.${market_type}@${market_type}`);
return key.startsWith(`${platform}.${selected_account_type}.${market_type}@${market_type}`);
})
.reduce((_acc, cur) => {
_acc.push(current_list[cur]);
Expand All @@ -250,8 +253,12 @@ export default class TradersHubStore extends BaseStore {
get is_demo() {
return this.selected_account_type === 'demo';
}
get is_real() {
return this.selected_account_type === 'real';
}
get is_eu_user() {
return this.selected_region === 'EU';
const { is_eu } = this.root_store.client;
return this.selected_region === 'EU' || is_eu;
}
setActiveIndex(active_index) {
this.active_index = active_index;
Expand Down

0 comments on commit ebddf0c

Please sign in to comment.