Skip to content

Commit

Permalink
Fasih/COJ-1146/ Updated modal content and design (binary-com#16267)
Browse files Browse the repository at this point in the history 
* chore: updated modal content and design

* chore: removed unused code

* chore: fixed multiple markets name issue

* chore: fixed test

* chore: fixed popup closing issue and textual issue

* chore: updated test according to text

* chore: fixed mobile botton issue
  • Loading branch information
@fasihali-deriv
fasihali-deriv committed Aug 8, 2024
1 parent b9b7efa commit cd6418c
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 109 deletions.
11 changes: 8 additions & 3 deletions packages/appstore/src/components/cfds-listing/cfds-listing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1530,9 +1530,11 @@
padding: 0.8rem 2rem 2.4rem;
}
&__body {
padding: 8.9rem 2.4rem;
&-has-open-positions {
padding: 6rem 2.4rem;
padding: 5.2rem 2.4rem;
&-bullets--list {
list-style: disc;
margin-top: 1rem;
margin-inline-start: 2rem;
}
}
&__title {
Expand Down Expand Up @@ -1573,6 +1575,9 @@
width: 100%;
}
}
@include mobile-screen {
bottom: 4rem;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions ...src/components/modals/open-positions-svg-modal/__test__/open-positions-svg-modal.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ describe('<OpenPositionsSVGModal/>', () => {
};
renderComponent({ props: new_mock_props });
const modal_content = screen.getByText(
/Your MT5 Standard SVG account will be archived after 30 days of inactivity. You can still access your trade history until the account is archived./
/Your MT5 Standard SVG account will be archived after 60 days of inactivity. You can still access your trade history until the account is archived./
);
expect(modal_content).toBeInTheDocument();
});
Expand All @@ -166,7 +166,7 @@ describe('<OpenPositionsSVGModal/>', () => {
};
renderComponent({ props: new_mock_props });
const modal_content = screen.getByText(
/Your MT5 Financial SVG account will be archived after 30 days of inactivity. You can still access your trade history until the account is archived./
/Your MT5 Financial SVG account will be archived after 60 days of inactivity. You can still access your trade history until the account is archived./
);
expect(modal_content).toBeInTheDocument();
});
Expand Down
2 changes: 1 addition & 1 deletion ...ages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const OpenPositionsSVGModal = ({ market_type, status, is_modal_open, setModalOpe
/>
) : (
<Localize
i18n_default_text='Your {{from_account}} account will be archived after 30 days of inactivity. You can still access your trade history until the account is archived.'
i18n_default_text='Your {{from_account}} account will be archived after 60 days of inactivity. You can still access your trade history until the account is archived.'
values={{
from_account: getMT5AccountTitle({
account_type: market_type,
Expand Down
40 changes: 13 additions & 27 deletions ...src/Components/migration-success-modal/__tests__/migration-success-modal-content.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';
import { render, screen, within } from '@testing-library/react';
import { StoreProvider, mockStore } from '@deriv/stores';
import { CFDStoreProvider } from '../../../Stores/Modules/CFD/Helpers/useCfdStores';
import MigrationSuccessModalContent from '../migration-success-modal-content';
Expand All @@ -14,53 +14,39 @@ const wrapper = ({ children }) => (
);
describe('<MigrationSuccessModal />', () => {
const props: React.ComponentProps<typeof MigrationSuccessModalContent> = {
has_open_positions: false,
icon: 'icon',
eligible_account_to_migrate: 'BVI',
directToCashier: jest.fn(),
closePopupModal: jest.fn(),
jurisdiction_market_name: ['Financial'],
};
it('component should be rendered', () => {
render(<MigrationSuccessModalContent {...props} />, { wrapper });

expect(
screen.getByRole('heading', {
name: /success!/i,
name: /Upgrade complete/i,
})
).toBeInTheDocument();

expect(screen.getByText(/your new account\(s\) are ready for trading\./i)).toBeInTheDocument();
expect(
screen.getByText(/for new trades, please transfer your funds into the new account\(s\)\./i)
).toBeInTheDocument();
});
const account_text = screen.getByText(/Start trading with your new/i);
const strong_text = within(account_text).getByText(/MT5 Financial BVI/i);

it('should not render open position banner if has_open_positions is false', () => {
render(<MigrationSuccessModalContent {...props} />, { wrapper });
expect(account_text).toBeInTheDocument();
expect(strong_text.tagName).toBe('STRONG');

expect(
screen.queryByText(/you can continue with the open positions on your current account\(s\)\./i)
).not.toBeInTheDocument();

const button = screen.getByRole('button', {
name: /transfer now/i,
});

userEvent.click(button);
expect(props.directToCashier).toHaveBeenCalled();
});

it('should render open position banner if has_open_positions is true', () => {
render(<MigrationSuccessModalContent {...props} has_open_positions />, { wrapper });
expect(screen.getByText(/Important: Your account./i)).toBeInTheDocument();

expect(
screen.getByText(/you can continue with the open positions on your current account\(s\)\./i)
screen.getByText(/You can manage your existing positions, but you can't start a new trade./i)
).toBeInTheDocument();

expect(screen.getByText(/We'll close accounts with no open positions after 60 days./i)).toBeInTheDocument();

const button = screen.getByRole('button', {
name: /ok/i,
});

userEvent.click(button);
expect(props.directToCashier).toHaveBeenCalled();
expect(props.closePopupModal).toHaveBeenCalled();
});
});
121 changes: 69 additions & 52 deletions packages/cfd/src/Components/migration-success-modal/migration-success-modal-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,104 @@ import { InlineMessage, Text, Button, Modal, Icon } from '@deriv/components';
import { Jurisdiction, CFD_PLATFORMS, getCFDPlatformNames, getFormattedJurisdictionCode } from '@deriv/shared';

type TMigrationSuccessModalContent = {
has_open_positions: boolean;
icon?: string;
eligible_account_to_migrate: string;
directToCashier: () => void;
closePopupModal: () => void;
jurisdiction_market_name: Array<string>;
};

const MigrationSuccessModalContent = observer(
({ has_open_positions, icon, eligible_account_to_migrate, directToCashier }: TMigrationSuccessModalContent) => {
({
icon,
eligible_account_to_migrate,
jurisdiction_market_name,
closePopupModal,
}: TMigrationSuccessModalContent) => {
const { ui } = useStore();
const { is_mobile } = ui;

const platform = getCFDPlatformNames(CFD_PLATFORMS.MT5);
const text_size = is_mobile ? 'xxs' : 'xs';
const information_text_size = is_mobile ? 'xxxs' : 'xxs';
const getFormattedAccounts = () =>
jurisdiction_market_name.length > 1
? {
type_1: jurisdiction_market_name[0],
type_2: jurisdiction_market_name[1],
}
: {
type_1: jurisdiction_market_name[0],
};
return (
<div className='cfd-success-dialog-migration__modal-content'>
<Modal.Body
className={classNames('cfd-success-dialog-migration__body', {
'cfd-success-dialog-migration__body-has-open-positions': has_open_positions,
})}
>
<Modal.Body className={classNames('cfd-success-dialog-migration__body')}>
<div className='cfd-success-dialog-migration__icon-area'>
{icon && <Icon icon={icon} size={128} />}
</div>
<div>
<Text as='h2' weight='bold' className='cfd-success-dialog-migration__title'>
<Localize i18n_default_text='Success!' />
<Localize i18n_default_text='Upgrade complete' />
</Text>
<div className='cfd-success-dialog-migration__content-wrapper'>
<Text size={text_size} as='p' align='center'>
<Localize
i18n_default_text='Your new <0>{{platform}} {{eligible_account_to_migrate}}</0> account(s) are ready for trading.'
values={{
platform,
eligible_account_to_migrate,
}}
components={[<strong key={0} />]}
/>
</Text>
<Text
size={text_size}
as='p'
align='center'
className='cfd-success-dialog-migration__content-wrapper__desc'
>
<Localize
i18n_default_text='For new trades, please transfer your funds into the new <0>{{platform}} {{eligible_account_to_migrate}}</0> account(s).'
values={{
platform,
eligible_account_to_migrate,
}}
components={[<strong key={0} />]}
/>
</Text>
</div>
</div>
{has_open_positions && (
<div className='cfd-success-dialog-migration__inline-msg'>
<InlineMessage
type='information'
size='sm'
message={
{jurisdiction_market_name.length > 1 ? (
<Localize
i18n_default_text='You can continue with the open positions on your current <0>{{platform}} {{existing_account}}</0> account(s).'
i18n_default_text='Start trading with your new <0>{{platform}} {{type_1}}</0> and <0>{{type_2}} {{eligible_account_to_migrate}}</0> accounts.'
values={{
platform,
existing_account: getFormattedJurisdictionCode(Jurisdiction.SVG),
eligible_account_to_migrate,
...getFormattedAccounts(),
}}
components={[<strong key={0} />]}
/>
}
/>
) : (
<Localize
i18n_default_text='Start trading with your new <0>{{platform}} {{type_1}} {{eligible_account_to_migrate}}</0> account.'
values={{
platform,
eligible_account_to_migrate,
...getFormattedAccounts(),
}}
components={[<strong key={0} />]}
/>
)}
</Text>
<div className='cfd-success-dialog-migration__inline-msg'>
<InlineMessage
type='information'
size='sm'
title={
<Localize
i18n_default_text='Important: Your <0>{{platform}} {{existing_account}}</0> account.'
values={{
platform,
existing_account: getFormattedJurisdictionCode(Jurisdiction.SVG),
}}
components={[<strong key={0} />]}
/>
}
message={
<Text
as='ul'
size={information_text_size}
className={'cfd-success-dialog-migration__body-bullets--list'}
>
<li>
<Localize i18n_default_text="You can manage your existing positions, but you can't start a new trade." />
</li>
<li>
<Localize i18n_default_text="We'll close accounts with no open positions after 60 days." />
</li>
</Text>
}
/>
</div>
</div>
)}
</div>
</Modal.Body>
<Modal.Footer has_separator className='cfd-success-dialog-migration-footer'>
<Button has_effect onClick={directToCashier} primary large>
{has_open_positions ? (
<Localize i18n_default_text='OK' />
) : (
<Localize i18n_default_text='Transfer now' />
)}
<Button has_effect onClick={closePopupModal} primary large>
<Localize i18n_default_text='OK' />
</Button>
</Modal.Footer>
</div>
Expand Down
32 changes: 8 additions & 24 deletions packages/cfd/src/Components/migration-success-modal/migration-success-modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { Modal, PageOverlay } from '@deriv/components';
import { Jurisdiction, MT5_ACCOUNT_STATUS, routes } from '@deriv/shared';
import { Jurisdiction, getFormattedJurisdictionMarketTypes } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { getFormattedJurisdictionCode } from '../../Stores/Modules/CFD/Helpers/cfd-config';

import { useCfdStore } from '../../Stores/Modules/CFD/Helpers/useCfdStores';
import MigrationSuccessModalContent from './migration-success-modal-content';

Expand All @@ -13,34 +13,18 @@ type TMigrationSuccessModal = {
};

const MigrationSuccessModal = observer(({ is_open, closeModal }: TMigrationSuccessModal) => {
const history = useHistory();
const { ui, client } = useStore();
const { mt5_login_list } = client;
const { ui } = useStore();
const { is_mobile, setMT5MigrationModalEnabled } = ui;
const { migrated_mt5_accounts, setIsFromMt5MigrationModal } = useCfdStore();

const has_migrated_mt5_accounts = !!migrated_mt5_accounts.length;
const eligible_account_to_migrate = getFormattedJurisdictionCode(
migrated_mt5_accounts.map(account => Object.values(account?.to_account ?? {})?.[0])?.[0]
);
const has_open_positions = React.useMemo(
() =>
mt5_login_list.some(account =>
migrated_mt5_accounts.some(
migrated_acc =>
migrated_acc.login_id === account.login &&
account.status === MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION
)
),
[mt5_login_list, migrated_mt5_accounts]
);

const directToCashier = () => {
closeMigrationModals();
if (!has_open_positions) {
history.push(routes.cashier_acc_transfer);
}
};
const jurisdiction_market_name = migrated_mt5_accounts.map(account =>
getFormattedJurisdictionMarketTypes(Object.keys(account?.to_account ?? {})?.[0])
);

const closeMigrationModals = () => {
setIsFromMt5MigrationModal(false);
Expand Down Expand Up @@ -75,10 +59,10 @@ const MigrationSuccessModal = observer(({ is_open, closeModal }: TMigrationSucce

const ModalContent = () => (
<MigrationSuccessModalContent
directToCashier={directToCashier}
closePopupModal={closeMigrationModals}
icon={getMigrationIcon()}
eligible_account_to_migrate={eligible_account_to_migrate}
has_open_positions={has_open_positions}
jurisdiction_market_name={jurisdiction_market_name}
/>
);

Expand Down

0 comments on commit cd6418c

Please sign in to comment.