Skip to content

Commit

Permalink
Maryia/used local state for setting selected card & updated flow (#17)
Browse files Browse the repository at this point in the history 
* Maryia/used local state for setting selected card & updated flow

* fix: for tests
  • Loading branch information
@maryia-deriv
maryia-deriv committed Jul 11, 2022
1 parent 54dfe8d commit d50a81a
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 44 deletions.
10 changes: 5 additions & 5 deletions packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const mock_connect_props = {
demo: '',
real: '',
},
setMT5TradeAccount: jest.fn(),
};

jest.mock('Stores/connect.js', () => ({
Expand Down Expand Up @@ -51,6 +52,7 @@ describe('<CFDDemoAccountDisplay />', () => {
maltainvest: false,
svg: true,
},
toggleMT5TradeModal: jest.fn(),
};
});

Expand Down Expand Up @@ -201,17 +203,15 @@ describe('<CFDDemoAccountDisplay />', () => {
checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
expect(screen.getAllByRole('button', { name: /add demo account/i }).length).toBe(1);
const dmt5_top_up_button = screen.getByRole('button', { name: /top up/i });
const dmt5_trade_button = screen.getByRole('link', { name: /trade/i });
expect(dmt5_trade_button).toHaveAttribute(
'href',
'https://trade.mql5.com/trade?servers=Deriv-Demo&trade_server=Deriv-Demo&login=20103240'
);
const dmt5_trade_button = screen.getByRole('button', { name: /trade/i });

fireEvent.click(dmt5_top_up_button);
expect(props.openAccountTransfer).toHaveBeenCalledWith(props.current_list['mt5.demo.financial@p01_ts02'], {
category: 'demo',
type: 'financial',
});
fireEvent.click(dmt5_trade_button);
expect(props.toggleMT5TradeModal).toHaveBeenCalledTimes(1);

rerender(
<CFDDemoAccountDisplay
Expand Down
10 changes: 5 additions & 5 deletions packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const mock_connect_props = {
demo: '',
real: '',
},
setMT5TradeAccount: jest.fn(),
};

jest.mock('Stores/connect.js', () => ({
Expand Down Expand Up @@ -57,6 +58,7 @@ describe('<CFDRealAccountDisplay />', () => {
svg: true,
},
toggleAccountsDialog: jest.fn(),
toggleMT5TradeModal: jest.fn(),
toggleShouldShowRealAccountsList: jest.fn(),
};
});
Expand Down Expand Up @@ -289,17 +291,15 @@ describe('<CFDRealAccountDisplay />', () => {
checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
expect(screen.getAllByRole('button', { name: /add real account/i }).length).toBe(1);
const dmt5_top_up_button = screen.getByRole('button', { name: /top up/i });
const dmt5_trade_button = screen.getByRole('link', { name: /trade/i });
expect(dmt5_trade_button).toHaveAttribute(
'href',
'https://trade.mql5.com/trade?servers=Deriv-Server&trade_server=Deriv-Server&login=1927245'
);
const dmt5_trade_button = screen.getByRole('button', { name: /trade/i });

fireEvent.click(dmt5_top_up_button);
expect(props.openAccountTransfer).toHaveBeenCalledWith(props.current_list['mt5.real.financial@p01_ts01'], {
category: 'real',
type: 'financial',
});
fireEvent.click(dmt5_trade_button);
expect(props.toggleMT5TradeModal).toHaveBeenCalledTimes(1);

rerender(
<CFDRealAccountDisplay
Expand Down
37 changes: 18 additions & 19 deletions packages/cfd/src/Containers/jurisdiction-modal-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ type TAvailableAccountAPI = [

type TJurisdictionModalContent = {
account_type: string;
jurisdiction_selected_card: string | undefined;
selectTypeOfCard: (card_type: string | undefined) => string | undefined;
jurisdiction_selected_card: string;
setJurisdictionSelectedCard: (card_type: string) => void;
synthetic_available_accounts: TAvailableAccountAPI;
financial_available_accounts: TAvailableAccountAPI;
poa_status: string;
Expand All @@ -41,15 +41,15 @@ type TJurisdictionModalContent = {
};

type TJurisdictionCard = {
jurisdiction_selected_card: string | undefined;
jurisdiction_selected_card: string;
synthetic_available_accounts: TAvailableAccountAPI;
financial_available_accounts: TAvailableAccountAPI;
account_type: string;
poa_status: string;
poi_status: string;
is_fully_authenticated: boolean;
is_pending_authentication: boolean;
selectTypeOfCard: (card_type: string | undefined) => string | undefined;
setJurisdictionSelectedCard: (card_type: string) => void;
type_of_card: string;
disabled: boolean;
poa_failed: boolean;
Expand All @@ -65,7 +65,7 @@ const JurisdictionCard = ({
poi_status,
is_fully_authenticated,
is_pending_authentication,
selectTypeOfCard,
setJurisdictionSelectedCard,
type_of_card,
disabled,
poa_failed,
Expand All @@ -87,9 +87,9 @@ const JurisdictionCard = ({

const cardSelection = (cardType: string) => {
if (jurisdiction_selected_card === cardType) {
selectTypeOfCard(undefined);
setJurisdictionSelectedCard('');
} else {
selectTypeOfCard(cardType);
setJurisdictionSelectedCard(cardType);
}
};

Expand Down Expand Up @@ -218,7 +218,7 @@ const JurisdictionCard = ({
const JurisdictionModalContent = ({
jurisdiction_selected_card,
account_type,
selectTypeOfCard,
setJurisdictionSelectedCard,
synthetic_available_accounts,
financial_available_accounts,
poa_status,
Expand All @@ -235,6 +235,7 @@ const JurisdictionModalContent = ({
}: TJurisdictionModalContent) => {
const poa_none = poa_status === PoaStatusCodes.none;
const poi_none = poi_status === PoaStatusCodes.none;
const poi_poa_verified = poi_status === PoaStatusCodes.verified && poa_status === PoaStatusCodes.verified;

const cardsToBeShown = (type_of_card: string) => {
const is_available =
Expand Down Expand Up @@ -341,7 +342,7 @@ const JurisdictionModalContent = ({
is_pending_authentication={is_pending_authentication}
poa_status={poa_status}
poi_status={poi_status}
selectTypeOfCard={selectTypeOfCard}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
disabled={disableCard('bvi')}
poa_failed={poa_failed}
poi_failed={poi_failed}
Expand All @@ -359,7 +360,7 @@ const JurisdictionModalContent = ({
account_type={account_type}
poa_status={poa_status}
poi_status={poi_status}
selectTypeOfCard={selectTypeOfCard}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
disabled={disableCard('mf')}
poa_failed={poa_failed}
poi_failed={poi_failed}
Expand All @@ -377,7 +378,7 @@ const JurisdictionModalContent = ({
account_type={account_type}
poa_status={poa_status}
poi_status={poi_status}
selectTypeOfCard={selectTypeOfCard}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
disabled={disableCard('vanuatu')}
poa_failed={poa_failed}
poi_failed={poi_failed}
Expand All @@ -394,7 +395,7 @@ const JurisdictionModalContent = ({
account_type={account_type}
poa_status={poa_status}
poi_status={poi_status}
selectTypeOfCard={selectTypeOfCard}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
disabled={disableCard('labuan')}
poa_failed={poa_failed}
poi_failed={poi_failed}
Expand All @@ -412,26 +413,24 @@ const JurisdictionModalContent = ({
account_type={account_type}
poa_status={poa_status}
poi_status={poi_status}
selectTypeOfCard={selectTypeOfCard}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
disabled={disableCard('svg')}
poa_failed={poa_failed}
poi_failed={poi_failed}
/>
)}
</div>
<ModalFootNote />
{((is_eu && is_fully_authenticated && jurisdiction_selected_card === 'malta') ||
(is_fully_authenticated && jurisdiction_selected_card === 'bvi') ||
(is_fully_authenticated && jurisdiction_selected_card === 'vanuatu') ||
jurisdiction_selected_card === 'labuan') && <ModalCheckbox is_checked={checked} onCheck={setChecked} />}
{is_fully_authenticated &&
poi_poa_verified &&
jurisdiction_selected_card &&
jurisdiction_selected_card !== 'svg' && <ModalCheckbox is_checked={checked} onCheck={setChecked} />}
</>
);
};

export default connect(({ modules: { cfd }, client }: RootStore) => ({
account_status: client.account_status,
selectTypeOfCard: cfd.selectTypeOfCard,
jurisdiction_selected_card: cfd.jurisdiction_selected_card,
real_financial_accounts_existing_data: cfd.real_financial_accounts_existing_data,
real_synthetic_accounts_existing_data: cfd.real_synthetic_accounts_existing_data,
}))(JurisdictionModalContent);
25 changes: 18 additions & 7 deletions packages/cfd/src/Containers/jurisdiction-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & {
disableApp: () => void;
enableApp: () => void;
has_real_mt5_login: boolean;
is_authentication_needed: boolean;
is_jurisdiction_modal_visible: boolean;
is_loading: boolean;
is_eu: boolean;
is_eu_country: boolean;
residence: string;
jurisdiction_selected_card: string;
toggleCFDPersonalDetailsModal: () => void;
toggleJurisdictionModal: () => void;
trading_platform_available_accounts: TTradingPlatformAvailableAccount[];
Expand All @@ -68,9 +68,9 @@ const JurisdictionModal = ({
disableApp,
enableApp,
has_real_mt5_login,
is_authentication_needed,
is_jurisdiction_modal_visible,
is_eu,
jurisdiction_selected_card,
toggleCFDPersonalDetailsModal,
toggleJurisdictionModal,
trading_platform_available_accounts,
Expand All @@ -79,7 +79,8 @@ const JurisdictionModal = ({
openPasswordModal,
toggleCFDVerificationModal,
}: TJurisdictionModalProps) => {
const [checked, setChecked] = React.useState<boolean>(false);
const [jurisdiction_selected_card, setJurisdictionSelectedCard] = React.useState('');
const [checked, setChecked] = React.useState(false);

const financial_available_accounts = trading_platform_available_accounts.filter(
available_account => available_account.market_type === 'financial'
Expand Down Expand Up @@ -124,7 +125,7 @@ const JurisdictionModal = ({
if (is_eu) {
if (poi_poa_verified) {
openPasswordModal(type_of_account);
} else {
} else if (is_authentication_needed) {
toggleCFDVerificationModal();
}
} else if (jurisdiction_selected_card === 'svg') {
Expand All @@ -140,9 +141,12 @@ const JurisdictionModal = ({
} else {
openPasswordModal(type_of_account);
}
} else {
} else if (is_authentication_needed) {
toggleCFDVerificationModal();
} else {
openPasswordModal(type_of_account);
}
setJurisdictionSelectedCard('');
};

const buttonText = () => {
Expand Down Expand Up @@ -174,6 +178,8 @@ const JurisdictionModal = ({
>
<JurisdictionModalContent
financial_available_accounts={financial_available_accounts}
jurisdiction_selected_card={jurisdiction_selected_card}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
synthetic_available_accounts={synthetic_available_accounts}
account_type={account_type.type}
authentication_status={authentication_status}
Expand Down Expand Up @@ -205,7 +211,10 @@ const JurisdictionModal = ({
portal_element_id='deriv_app'
title={modal_title}
visible={is_jurisdiction_modal_visible}
onClose={toggleJurisdictionModal}
onClose={() => {
toggleJurisdictionModal();
setJurisdictionSelectedCard('');
}}
footer={
<Button
style={{ width: '100%' }}
Expand All @@ -221,6 +230,8 @@ const JurisdictionModal = ({
>
<JurisdictionModalContent
financial_available_accounts={financial_available_accounts}
jurisdiction_selected_card={jurisdiction_selected_card}
setJurisdictionSelectedCard={setJurisdictionSelectedCard}
synthetic_available_accounts={synthetic_available_accounts}
account_type={account_type.type}
authentication_status={authentication_status}
Expand Down Expand Up @@ -248,6 +259,7 @@ export default connect(({ modules, ui, client }: RootStore) => ({
disableApp: ui.disableApp,
enableApp: ui.enableApp,
has_real_mt5_login: client.has_real_mt5_login,
is_authentication_needed: client.is_authentication_needed,
is_jurisdiction_modal_visible: modules.cfd.is_jurisdiction_modal_visible,
trading_platform_available_accounts: client.trading_platform_available_accounts,
is_loading: client.is_populating_mt5_account_list,
Expand All @@ -258,7 +270,6 @@ export default connect(({ modules, ui, client }: RootStore) => ({
is_fully_authenticated: client.is_fully_authenticated,
is_pending_authentication: client.is_pending_authentication,
toggleJurisdictionModal: modules.cfd.toggleJurisdictionModal,
jurisdiction_selected_card: modules.cfd.jurisdiction_selected_card,
residence: client.residence,
toggleCFDVerificationModal: modules.cfd.toggleCFDVerificationModal,
}))(JurisdictionModal);
8 changes: 0 additions & 8 deletions packages/cfd/src/Stores/Modules/CFD/cfd-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ export default class CFDStore extends BaseStore {
@observable is_cfd_password_modal_enabled = false;
@observable is_cfd_reset_password_modal_enabled = false;
@observable jurisdiction_selected_card = undefined;
@observable 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.
Expand Down Expand Up @@ -181,12 +179,6 @@ export default class CFDStore extends BaseStore {
this.is_cfd_password_modal_enabled = true;
}

@action.bound
selectTypeOfCard(card_type) {
this.jurisdiction_selected_card = undefined;
this.jurisdiction_selected_card = card_type;
}

@action.bound
getName() {
const { first_name } = this.root_store.client.account_settings && this.root_store.client.account_settings;
Expand Down

0 comments on commit d50a81a

Please sign in to comment.