Skip to content

Commit

Permalink
Merge pull request #8 from niloo-fs/mobx-cfd
Browse files Browse the repository at this point in the history 
mobx migration to version 6 for cfd
  • Loading branch information
@niloofar-deriv
niloofar-deriv committed Jun 8, 2022
2 parents 08e0428 + df45dc9 commit 677fb19
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 75 deletions.
114 changes: 65 additions & 49 deletions packages/cfd/src/Stores/Modules/CFD/cfd-store.js
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,96 @@
import { action, computed, observable, runInAction } from 'mobx';
import { action, computed, observable, runInAction, makeObservable, override } from 'mobx';
import { getAccountListKey, getAccountTypeFields, CFD_PLATFORMS, WS } from '@deriv/shared';
import BaseStore from 'Stores/base-store';
import { getDxCompanies, getMtCompanies } from './Helpers/cfd-config';

export default class CFDStore extends BaseStore {
@observable is_compare_accounts_visible = false;
@observable account_type = {
is_compare_accounts_visible = false;
account_type = {
category: undefined,
type: undefined,
};

@observable new_account_response = {};
@observable map_type = {};
@observable has_cfd_error = false;
@observable error_message = '';
new_account_response = {};
map_type = {};
has_cfd_error = false;
error_message = '';

@observable is_cfd_success_dialog_enabled = false;
@observable is_mt5_financial_stp_modal_open = false;
@observable is_cfd_password_modal_enabled = false;
@observable is_cfd_reset_password_modal_enabled = false;
is_cfd_success_dialog_enabled = false;
is_mt5_financial_stp_modal_open = false;
is_cfd_password_modal_enabled = false;
is_cfd_reset_password_modal_enabled = false;

@observable is_cfd_pending_dialog_open = false;
is_cfd_pending_dialog_open = false;

@observable current_account = undefined; // this is a tmp value, don't rely on it, unless you set it first.
current_account = undefined; // this is a tmp value, don't rely on it, unless you set it first.

@observable error_type = undefined;
error_type = undefined;

constructor({ root_store }) {
super({ root_store });

makeObservable(this, {
is_compare_accounts_visible: observable,
account_type: observable,
new_account_response: observable,
map_type: observable,
has_cfd_error: observable,
error_message: observable,
is_cfd_success_dialog_enabled: observable,
is_mt5_financial_stp_modal_open: observable,
is_cfd_password_modal_enabled: observable,
is_cfd_reset_password_modal_enabled: observable,
is_cfd_pending_dialog_open: observable,
current_account: observable,
error_type: observable,
has_cfd_account: computed,
account_title: computed,
current_list: computed,
onMount: action.bound,
onUnmount: override,
checkShouldOpenAccount: action.bound,
realAccountSignupEndListener: action.bound,
resetFormErrors: action.bound,
clearCFDError: action.bound,
createCFDAccount: action.bound,
disableCFDPasswordModal: action.bound,
enableCFDPasswordModal: action.bound,
getName: action.bound,
openMT5Account: action.bound,
openCFDAccount: action.bound,
beginRealSignupForMt5: action.bound,
enableMt5FinancialStpModal: action.bound,
setAccountType: action.bound,
setCurrentAccount: action.bound,
setError: action.bound,
setCFDNewAccount: action.bound,
setCFDSuccessDialog: action.bound,
storeProofOfAddress: action.bound,
getAccountStatus: action.bound,
creatMT5Password: action.bound,
submitMt5Password: action.bound,
createCFDPassword: action.bound,
submitCFDPassword: action.bound,
toggleCompareAccountsModal: action.bound,
disableMt5FinancialStpModal: action.bound,
topUpVirtual: action.bound,
closeCFDPendingDialog: action.bound,
openPendingDialog: action.bound,
sendVerifyEmail: action.bound,
setCFDPasswordResetModal: action.bound,
});
}

@computed
get has_cfd_account() {
return this.current_list.length > 0;
}

@computed
get account_title() {
return this.account_type.category
? getMtCompanies(this.root_store.client.is_eu)[this.account_type.category][this.account_type.type].title
: '';
}

@computed
get current_list() {
const list = [];

Expand Down Expand Up @@ -73,22 +121,19 @@ export default class CFDStore extends BaseStore {
return getDxCompanies();
}

@action.bound
onMount() {
this.checkShouldOpenAccount();
this.onRealAccountSignupEnd(this.realAccountSignupEndListener);
this.root_store.ui.is_cfd_page = true;
}

@action.bound
onUnmount() {
this.disposeRealAccountSignupEnd();
this.root_store.ui.is_cfd_page = false;
}

// other platforms can redirect to here using account switcher's `Add` account button
// so in that case we should open the corresponding account opening modal on load/component update
@action.bound
checkShouldOpenAccount() {
const account_type = sessionStorage.getItem('open_cfd_account_type');
if (account_type) {
Expand All @@ -98,7 +143,6 @@ export default class CFDStore extends BaseStore {
}
}

@action.bound
realAccountSignupEndListener() {
const post_signup = JSON.parse(sessionStorage.getItem('post_real_account_signup'));
if (post_signup && post_signup.category && post_signup.type) {
Expand All @@ -108,20 +152,17 @@ export default class CFDStore extends BaseStore {
return Promise.resolve();
}

@action.bound
resetFormErrors() {
this.error_message = '';
this.error_type = undefined;
this.has_cfd_error = false;
}

@action.bound
clearCFDError() {
this.resetFormErrors();
this.is_cfd_password_modal_enabled = false;
}

@action.bound
createCFDAccount({ category, type, set_password }) {
this.clearCFDError();
this.setAccountType({
Expand All @@ -140,17 +181,14 @@ export default class CFDStore extends BaseStore {
this.enableCFDPasswordModal();
}

@action.bound
disableCFDPasswordModal() {
this.is_cfd_password_modal_enabled = false;
}

@action.bound
enableCFDPasswordModal() {
this.is_cfd_password_modal_enabled = true;
}

@action.bound
getName() {
const { first_name } = this.root_store.client.account_settings && this.root_store.client.account_settings;
const title = this.mt5_companies[this.account_type.category][this.account_type.type].title;
Expand All @@ -159,7 +197,6 @@ export default class CFDStore extends BaseStore {
return first_name ? [first_name, title].join(' ') : title;
}

@action.bound
openMT5Account(values) {
const name = this.getName();
const leverage = this.mt5_companies[this.account_type.category][this.account_type.type].leverage;
Expand All @@ -175,7 +212,6 @@ export default class CFDStore extends BaseStore {
});
}

@action.bound
openCFDAccount(values) {
return WS.tradingPlatformNewAccount({
password: values.password,
Expand All @@ -185,7 +221,6 @@ export default class CFDStore extends BaseStore {
});
}

@action.bound
beginRealSignupForMt5() {
sessionStorage.setItem('post_real_account_signup', JSON.stringify(this.account_type));
this.root_store.ui.openRealAccountSignup();
Expand All @@ -211,44 +246,37 @@ export default class CFDStore extends BaseStore {
}
}

@action.bound
enableMt5FinancialStpModal() {
if (this.account_type.category === 'real' && this.account_type.type === 'financial_stp') {
this.is_mt5_financial_stp_modal_open = true;
}
}

@action.bound
setAccountType(account_type) {
this.account_type = account_type;
}

@action.bound
setCurrentAccount(data, meta) {
this.current_account = {
...meta,
...data,
};
}

@action.bound
setError(state, obj) {
this.has_cfd_error = state;
this.error_message = obj ? obj.message : '';
this.error_type = obj?.code ?? undefined;
}

@action.bound
setCFDNewAccount(cfd_new_account) {
this.new_account_response = cfd_new_account;
}

@action.bound
setCFDSuccessDialog(value) {
this.is_cfd_success_dialog_enabled = !!value;
}

@action.bound
storeProofOfAddress(file_uploader_ref, values, { setStatus }) {
return new Promise((resolve, reject) => {
setStatus({ msg: '' });
Expand Down Expand Up @@ -284,7 +312,6 @@ export default class CFDStore extends BaseStore {
});
}

@action.bound
async getAccountStatus(platform) {
const should_load_account_status =
(platform === CFD_PLATFORMS.MT5 && this.root_store.client.is_mt5_password_not_set) ||
Expand All @@ -295,7 +322,6 @@ export default class CFDStore extends BaseStore {
}
}

@action.bound
async creatMT5Password(values, actions) {
const response = await WS.tradingPlatformPasswordChange({
new_password: values.password,
Expand All @@ -311,7 +337,6 @@ export default class CFDStore extends BaseStore {
return false;
}

@action.bound
async submitMt5Password(values, actions) {
if (this.root_store.client.is_mt5_password_not_set) {
const has_error = await this.creatMT5Password(values, actions);
Expand Down Expand Up @@ -342,7 +367,6 @@ export default class CFDStore extends BaseStore {
}
}

@action.bound
async createCFDPassword(values, actions) {
const response = await WS.tradingPlatformPasswordChange({
new_password: values.password,
Expand All @@ -359,7 +383,6 @@ export default class CFDStore extends BaseStore {
return false;
}

@action.bound
async submitCFDPassword(values, actions) {
if (this.root_store.client.is_dxtrade_password_not_set) {
const has_error = await this.createCFDPassword(values, actions);
Expand Down Expand Up @@ -388,17 +411,14 @@ export default class CFDStore extends BaseStore {
}
}

@action.bound
toggleCompareAccountsModal() {
this.is_compare_accounts_visible = !this.is_compare_accounts_visible;
}

@action.bound
disableMt5FinancialStpModal() {
this.is_mt5_financial_stp_modal_open = false;
}

@action.bound
async topUpVirtual(platform) {
this.root_store.ui.setTopUpInProgress(true);
let response;
Expand Down Expand Up @@ -465,12 +485,10 @@ export default class CFDStore extends BaseStore {
this.root_store.ui.setTopUpInProgress(false);
}

@action.bound
closeCFDPendingDialog() {
this.is_cfd_pending_dialog_open = false;
}

@action.bound
openPendingDialog() {
setTimeout(
runInAction(() => {
Expand All @@ -480,12 +498,10 @@ export default class CFDStore extends BaseStore {
);
}

@action.bound
sendVerifyEmail() {
return WS.verifyEmail(this.root_store.client.email, 'trading_platform_investor_password_reset');
}

@action.bound
setCFDPasswordResetModal(val) {
this.is_cfd_reset_password_modal_enabled = !!val;
}
Expand Down
Loading

0 comments on commit 677fb19

Please sign in to comment.