Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Maryia/used local state for setting selected card & updated flow #17

Merged
merged 3 commits into from
Jul 11, 2022
Merged

Maryia/used local state for setting selected card & updated flow #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53489f9
Maryia/used local state for setting selected card & updated flow
maryia-deriv Jul 8, 2022
07d1fb4
Merge branch 'task_push_labuan_bvi_vanuatu' of github.com:amina-deriv…
maryia-deriv Jul 11, 2022
9e97732
fix: for tests
maryia-deriv Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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