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

Suisin/coj406/upgrade your mt5 account popup #12271

Merged
merged 12 commits into from
Jan 4, 2024
Merged

Suisin/coj406/upgrade your mt5 account popup #12271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
91429fb
chore: update pop up modal to the follow the latest design
suisin-deriv Dec 13, 2023
f5b803e
Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…
suisin-deriv Dec 14, 2023
eb67556
chore: change text to hintbox
suisin-deriv Dec 14, 2023
8d2c3b4
chore: fix test cases
suisin-deriv Dec 29, 2023
9aef0cc
Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…
suisin-deriv Dec 29, 2023
9024120
chore: revert icon files
suisin-deriv Dec 29, 2023
1cf792a
chore: remove hard coded codes
suisin-deriv Dec 29, 2023
74a3b09
chore: update account migration title
suisin-deriv Jan 4, 2024
35ea382
Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…
suisin-deriv Jan 4, 2024
323fe3c
chore: update logic for account title
suisin-deriv Jan 4, 2024
bee8954
chore: update value to values
suisin-deriv Jan 4, 2024
a37c02e
Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…
suisin-deriv Jan 4, 2024
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
54 changes: 44 additions & 10 deletions ...ages/cfd/src/Containers/mt5-migration-modal/__test__/mt5-migration-account-icons.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import MT5MigrationAccountIcons from '../mt5-migration-account-icons';
import { render, screen } from '@testing-library/react';
import { StoreProvider, mockStore } from '@deriv/stores';
import { useMT5SVGEligibleToMigrate } from '@deriv/hooks';

jest.mock('@deriv/hooks', () => ({
...jest.requireActual('@deriv/hooks'),
Expand All @@ -10,39 +11,72 @@ jest.mock('@deriv/hooks', () => ({

const mock_store = mockStore({});

const mockUseMT5SVGEligibleToMigrate = useMT5SVGEligibleToMigrate as jest.MockedFunction<
typeof useMT5SVGEligibleToMigrate
>;

describe('MT5MigrationAccountIcons', () => {
type TMT5MigrationAccountIconsProps = React.ComponentProps<typeof MT5MigrationAccountIcons>;
const renderComponent = (
to: TMT5MigrationAccountIconsProps['to'],
type: TMT5MigrationAccountIconsProps['type']
) => {
let response: ReturnType<typeof useMT5SVGEligibleToMigrate>;

const renderComponent = () => {
const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock_store}>{children}</StoreProvider>
);
render(<MT5MigrationAccountIcons to={to} type={type} />, { wrapper });
mockUseMT5SVGEligibleToMigrate.mockReturnValue(response);
render(<MT5MigrationAccountIcons />, { wrapper });
};

beforeEach(() => {
response = {
eligible_account_to_migrate_label: 'bvi',
eligible_svg_to_bvi_derived_accounts: false,
eligible_svg_to_bvi_financial_accounts: false,
eligible_svg_to_vanuatu_derived_accounts: false,
eligible_svg_to_vanuatu_financial_accounts: false,
getEligibleAccountToMigrate: jest.fn(),
has_derived_and_financial_mt5: false,
has_derived_mt5_to_migrate: false,
has_svg_accounts_to_migrate: false,
no_of_svg_accounts_to_migrate: 0,
svg_accounts_to_migrate: [],
};
});

it('should render MT5MigrationAccountIcons for derived bvi account', () => {
renderComponent('bvi', 'derived');
response.eligible_svg_to_bvi_derived_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_to_bvi_derived')).toBeInTheDocument();
});

it('should render MT5MigrationAccountIcons for financial bvi account', () => {
renderComponent('bvi', 'financial');
response.eligible_svg_to_bvi_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_financial')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_to_bvi_financial')).toBeInTheDocument();
});

it('should render MT5MigrationAccountIcons for derived vanuatu account', () => {
renderComponent('vanuatu', 'derived');
response.eligible_svg_to_vanuatu_derived_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_to_vanuatu_derived')).toBeInTheDocument();
});

it('should render MT5MigrationAccountIcons for financial vanuatu account', () => {
renderComponent('vanuatu', 'financial');
response.eligible_svg_to_vanuatu_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_financial')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_to_vanuatu_financial')).toBeInTheDocument();
});

it('should render MT5MigrationAccountIcons for svg to bvi derived account and svg to bvi financial account', () => {
response.eligible_svg_to_bvi_derived_accounts = true;
response.eligible_svg_to_bvi_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_to_bvi_derived')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_from_svg_financial')).toBeInTheDocument();
expect(screen.getByTestId('dt_migrate_to_bvi_financial')).toBeInTheDocument();
});
});
34 changes: 16 additions & 18 deletions ...cfd/src/Containers/mt5-migration-modal/__test__/mt5-migration-front-side-content.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,20 @@ const mockUseMT5SVGEligibleToMigrate = useMT5SVGEligibleToMigrate as jest.Mocked
>;

describe('MT5MigrationFrontSideContent', () => {
let response: ReturnType<typeof useMT5SVGEligibleToMigrate>;
let migration_response: ReturnType<typeof useMT5SVGEligibleToMigrate>;

const renderComponent = () => {
const wrapper = ({ children }: { children: JSX.Element }) => (
<StoreProvider store={mock_store}>
<CFDStoreProvider>{children}</CFDStoreProvider>
</StoreProvider>
);
mockUseMT5SVGEligibleToMigrate.mockReturnValue(response);
mockUseMT5SVGEligibleToMigrate.mockReturnValue(migration_response);
render(<MT5MigrationFrontSideContent />, { wrapper });
};

beforeEach(() => {
response = {
migration_response = {
eligible_account_to_migrate_label: 'bvi',
eligible_svg_to_bvi_derived_accounts: false,
eligible_svg_to_bvi_financial_accounts: false,
Expand All @@ -54,47 +54,45 @@ describe('MT5MigrationFrontSideContent', () => {
const getByTextCaseInsensitive = (text: string) =>
screen.getByText(content => content.toLowerCase() === text.toLowerCase());
expect(
getByTextCaseInsensitive('We’re upgrading your SVG account(s) by moving them to the bvi jurisdiction.')
getByTextCaseInsensitive('We are giving you a new MT5 account(s) to enhance your trading experience')
).toBeInTheDocument();
expect(screen.getByText(/By clicking on/)).toBeInTheDocument();
const elements = screen.getAllByText(/Next/);
elements.forEach(element => {
expect(element).toBeInTheDocument();
});
expect(screen.getByText(/you agree to move your SVG MT5 account\(s\) under Deriv bvi Ltd/)).toBeInTheDocument();
expect(screen.getByText(/Your existing/i)).toBeInTheDocument();
expect(screen.getByText(/MT5 SVG/i)).toBeInTheDocument();
expect(screen.getByText(/account\(s\) will remain accessible/i)).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
});

it('should render svg to bvi derived Icons', () => {
response.eligible_svg_to_bvi_derived_accounts = true;
migration_response.eligible_svg_to_bvi_derived_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument;
expect(screen.getByTestId('dt_migrate_to_bvi_derived')).toBeInTheDocument;
});

it('should render svg to bvi financial Icons', () => {
response.eligible_svg_to_bvi_financial_accounts = true;
migration_response.eligible_svg_to_bvi_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_financial')).toBeInTheDocument;
expect(screen.getByTestId('dt_migrate_to_bvi_financial')).toBeInTheDocument;
});

it('should render svg to vanuatu derived Icons', () => {
response.eligible_svg_to_vanuatu_derived_accounts = true;
migration_response.eligible_svg_to_vanuatu_derived_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument;
expect(screen.getByTestId('dt_migrate_to_vanuatu_derived')).toBeInTheDocument;
});

it('should render svg to vanuatu financial Icons', () => {
response.eligible_svg_to_vanuatu_financial_accounts = true;
migration_response.eligible_svg_to_vanuatu_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_financial')).toBeInTheDocument;
expect(screen.getByTestId('dt_migrate_to_vanuatu_financial')).toBeInTheDocument;
});

it('should render both derived svg to bvi and financial svg to bvi Icons', () => {
response.eligible_svg_to_bvi_derived_accounts = true;
response.eligible_svg_to_bvi_financial_accounts = true;
migration_response.eligible_svg_to_bvi_derived_accounts = true;
migration_response.eligible_svg_to_bvi_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument;
expect(screen.getByTestId('dt_migrate_to_bvi_derived')).toBeInTheDocument;
Expand All @@ -103,8 +101,8 @@ describe('MT5MigrationFrontSideContent', () => {
});

it('should render both derived svg to vanuatu and financial svg to vanuatu Icons', () => {
response.eligible_svg_to_vanuatu_derived_accounts = true;
response.eligible_svg_to_vanuatu_financial_accounts = true;
migration_response.eligible_svg_to_vanuatu_derived_accounts = true;
migration_response.eligible_svg_to_vanuatu_financial_accounts = true;
renderComponent();
expect(screen.getByTestId('dt_migrate_from_svg_derived')).toBeInTheDocument;
expect(screen.getByTestId('dt_migrate_to_vanuatu_derived')).toBeInTheDocument;
Expand Down
89 changes: 50 additions & 39 deletions packages/cfd/src/Containers/mt5-migration-modal/mt5-migration-account-icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,61 @@
import React from 'react';
import { Icon } from '@deriv/components';
import { Jurisdiction, JURISDICTION_MARKET_TYPES } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { Icon, Text } from '@deriv/components';
import { Localize } from '@deriv/translations';
import { useMT5SVGEligibleToMigrate } from '@deriv/hooks';

type TMT5MigrationAccountIconsProps = {
to: typeof Jurisdiction[keyof typeof Jurisdiction];
type: typeof JURISDICTION_MARKET_TYPES[keyof typeof JURISDICTION_MARKET_TYPES];
};
const MT5MigrationAccountIcons = () => {
const {
eligible_svg_to_bvi_derived_accounts,
eligible_svg_to_bvi_financial_accounts,
eligible_svg_to_vanuatu_derived_accounts,
eligible_svg_to_vanuatu_financial_accounts,
no_of_svg_accounts_to_migrate,
} = useMT5SVGEligibleToMigrate();

const MT5MigrationAccountIcons = observer(({ to, type }: TMT5MigrationAccountIconsProps) => {
const { ui } = useStore();
const { is_mobile } = ui;
const getFromAccountIcon = () => {
switch (type) {
case JURISDICTION_MARKET_TYPES.DERIVED:
return 'IcMt5SvgDerived';
case JURISDICTION_MARKET_TYPES.FINANCIAL:
return 'IcMt5SvgFinancial';
default:
return '';
}
};
let existing_account_title = 'Existing account';
let new_account_title = 'New account';

const getToAccountIcon = () => {
const to_type = `${to}_${type}`;
switch (to_type) {
case `${Jurisdiction.BVI}_${JURISDICTION_MARKET_TYPES.DERIVED}`:
return 'IcMt5BviDerived';
case `${Jurisdiction.BVI}_${JURISDICTION_MARKET_TYPES.FINANCIAL}`:
return 'IcMt5BviFinancial';
case `${Jurisdiction.VANUATU}_${JURISDICTION_MARKET_TYPES.DERIVED}`:
return 'IcMt5VanuatuDerived';
case `${Jurisdiction.VANUATU}_${JURISDICTION_MARKET_TYPES.FINANCIAL}`:
return 'IcMt5VanuatuFinancial';
default:
return '';
}
};
if (no_of_svg_accounts_to_migrate > 1) {
existing_account_title = 'Existing accounts';
new_account_title = 'New accounts';
}

return (
<div className='mt5-migration-modal__migration_content-items__list'>
<Icon icon={getFromAccountIcon()} size={96} data_testid={`dt_migrate_from_svg_${type}`} />
<Icon icon={is_mobile ? 'IcLongArrowDown' : 'IcLongArrowRight'} size={24} />
<Icon icon={getToAccountIcon()} size={96} data_testid={`dt_migrate_to_${to}_${type}`} />
<div className='mt5-migration-modal__migration_content-items__list--container'>
<Text weight='bold' size='xs'>
<Localize i18n_default_text='{{existing_account_title}}' values={{ existing_account_title }} />
</Text>
<div className='mt5-migration-modal__migration_content-items__list--container__icons'>
{(eligible_svg_to_bvi_derived_accounts || eligible_svg_to_vanuatu_derived_accounts) && (
<Icon icon='IcMt5SvgDerived' size={96} data_testid='dt_migrate_from_svg_derived' />
)}
{(eligible_svg_to_bvi_financial_accounts || eligible_svg_to_vanuatu_financial_accounts) && (
<Icon icon='IcMt5SvgFinancial' size={96} data_testid='dt_migrate_from_svg_financial' />
)}
</div>
</div>
<div className='mt5-migration-modal__migration_content-items__list--container'>
<Text weight='bold' size='xs'>
<Localize i18n_default_text='{{new_account_title}}' values={{ new_account_title }} />
</Text>
<div className='mt5-migration-modal__migration_content-items__list--container__icons'>
{eligible_svg_to_bvi_derived_accounts && (
<Icon icon='IcMt5BviDerived' size={96} data_testid='dt_migrate_to_bvi_derived' />
)}
{eligible_svg_to_bvi_financial_accounts && (
<Icon icon='IcMt5BviFinancial' size={96} data_testid='dt_migrate_to_bvi_financial' />
)}
{eligible_svg_to_vanuatu_derived_accounts && (
<Icon icon='IcMt5VanuatuDerived' size={96} data_testid='dt_migrate_to_vanuatu_derived' />
)}
{eligible_svg_to_vanuatu_financial_accounts && (
<Icon icon='IcMt5VanuatuFinancial' size={96} data_testid='dt_migrate_to_vanuatu_financial' />
)}
</div>
</div>
</div>
);
});
};

export default MT5MigrationAccountIcons;
79 changes: 23 additions & 56 deletions packages/cfd/src/Containers/mt5-migration-modal/mt5-migration-front-side-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
import React from 'react';
import { Button, Modal, Text, StaticUrl } from '@deriv/components';
import { Button, Modal, Text, HintBox } from '@deriv/components';
import { useMT5SVGEligibleToMigrate } from '@deriv/hooks';
import {
getFormattedJurisdictionCode,
Jurisdiction,
JURISDICTION_MARKET_TYPES,
DBVI_COMPANY_NAMES,
CFD_PLATFORMS,
getCFDPlatformNames,
} from '@deriv/shared';
import { CFD_PLATFORMS, Jurisdiction, getCFDPlatformNames } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';
import MT5MigrationAccountIcons from './mt5-migration-account-icons';
Expand All @@ -21,14 +14,7 @@ const MT5MigrationFrontSideContent = observer(() => {
const { setAppstorePlatform } = common;
const { enableCFDPasswordModal, mt5_migration_error, setJurisdictionSelectedShortcode } = useCfdStore();
const content_size = is_mobile ? 'xxs' : 'xs';
const {
eligible_account_to_migrate_label,
eligible_svg_to_bvi_derived_accounts,
eligible_svg_to_bvi_financial_accounts,
eligible_svg_to_vanuatu_derived_accounts,
eligible_svg_to_vanuatu_financial_accounts,
getEligibleAccountToMigrate,
} = useMT5SVGEligibleToMigrate();
const { getEligibleAccountToMigrate } = useMT5SVGEligibleToMigrate();

const onConfirmMigration = () => {
setAppstorePlatform(CFD_PLATFORMS.MT5);
Expand All @@ -53,54 +39,35 @@ const MT5MigrationFrontSideContent = observer(() => {
<div className='mt5-migration-modal__description'>
<Text as='p' size={content_size} align='center'>
<Localize
i18n_default_text='We’re upgrading your {{from_account}} account(s) by moving them to the {{to_account}} jurisdiction.'
i18n_default_text='We are giving you a new {{platform}} account(s) to enhance your trading experience'
values={{
from_account: getFormattedJurisdictionCode(Jurisdiction.SVG),
to_account: eligible_account_to_migrate_label,
platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
}}
/>
</Text>
</div>
<div className='mt5-migration-modal__migration_content'>
<div className='mt5-migration-modal__migration_content-items'>
{eligible_svg_to_bvi_derived_accounts && (
<MT5MigrationAccountIcons to={Jurisdiction.BVI} type={JURISDICTION_MARKET_TYPES.DERIVED} />
)}
{eligible_svg_to_bvi_financial_accounts && (
<MT5MigrationAccountIcons to={Jurisdiction.BVI} type={JURISDICTION_MARKET_TYPES.FINANCIAL} />
)}
</div>
<div className='mt5-migration-modal__migration_content-items'>
{eligible_svg_to_vanuatu_derived_accounts && (
<MT5MigrationAccountIcons to={Jurisdiction.VANUATU} type={JURISDICTION_MARKET_TYPES.DERIVED} />
)}
{eligible_svg_to_vanuatu_financial_accounts && (
<MT5MigrationAccountIcons
to={Jurisdiction.VANUATU}
type={JURISDICTION_MARKET_TYPES.FINANCIAL}
/>
)}
<MT5MigrationAccountIcons />
</div>
</div>
<div className='mt5-migration-modal__message'>
<Text as='p' size={content_size} align='center'>
<Localize
i18n_default_text='By clicking on <0>"Next"</0> you agree to move your {{account}} {{platform}} account(s) under Deriv {{account_to_migrate}} Ltd’s <1>terms and conditions</1>.'
components={[
<strong key={0} />,
<StaticUrl
key={0}
className='link'
href={DBVI_COMPANY_NAMES[getEligibleAccountToMigrate()].tnc_url}
/>,
]}
values={{
account: Jurisdiction.SVG.toUpperCase(),
platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
account_to_migrate: eligible_account_to_migrate_label,
}}
/>
</Text>
<div className='mt5-migration-modal__migration_infobox'>
<HintBox
icon='IcInfoBlue'
message={
<Text as='p' size='xxxs'>
<Localize
i18n_default_text='Your existing <0>{{platform}} {{account}}</0> account(s) will remain accessible.'
components={[<strong key={0} />]}
values={{
account: Jurisdiction.SVG.toUpperCase(),
platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
}}
/>
</Text>
}
is_info
/>
</div>
<Modal.Footer has_separator>
<Button type='button' has_effect large primary onClick={onConfirmMigration}>
Expand Down
Loading