Skip to content

Commit

Permalink
Merge pull request #34 from amina-deriv/amina/feature/90115/update_ju…
Browse files Browse the repository at this point in the history
…risdiction

Amina/feature/90115/update jurisdiction
  • Loading branch information
shaheer-deriv authored May 31, 2023
2 parents 7223b71 + ea8ac5d commit d2b543e
Show file tree
Hide file tree
Showing 76 changed files with 72,067 additions and 26,452 deletions.
92,042 changes: 68,734 additions & 23,308 deletions package-lock.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { localize } from '@deriv/translations';
type TIdvSubmitComplete = {
needs_poa: boolean;
is_from_external: boolean;
redirect_button: React.ReactNode;
redirect_button: React.ReactElement;
};

const IdvSubmitComplete = ({ needs_poa, is_from_external, redirect_button }: TIdvSubmitComplete) => {
Expand All @@ -30,7 +30,7 @@ const IdvSubmitComplete = ({ needs_poa, is_from_external, redirect_button }: TId
{poa_button}
</React.Fragment>
) : (
redirect_button
<div className='proof-of-identity__redirection'>{redirect_button}</div>
)}
</div>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import DerivPassword from '../deriv-password';
import { WS } from '@deriv/shared';

jest.mock('Assets/ic-brand-deriv-red.svg', () => () => 'BrandDerivRed');

jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
WS: {
verifyEmail: jest.fn(),
},
}));

describe('<DerivPassword />', () => {
let mock_props = {
email: 'mf@deriv.com',
is_social_signup: false,
social_identity_provider: undefined,
landing_company_shortcode: 'maltainvest',
};

let modal_root_el;

beforeAll(() => {
modal_root_el = document.createElement('div');
modal_root_el.setAttribute('id', 'modal_root');
document.body.appendChild(modal_root_el);
});

afterAll(() => {
document.body.removeChild(modal_root_el);
});
it('Should render properly', async () => {
render(<DerivPassword {...mock_props} />);
expect(
screen.getByRole('heading', {
name: /deriv password/i,
})
).toBeInTheDocument();
// expect BrandDerivRed not to be in the document
expect(screen.queryByText(/BrandDerivRed/i)).toBeInTheDocument();
// expect button with text change password to be in the document
expect(screen.getByRole('button', { name: /change password/i })).toBeInTheDocument();
// expect button with text unlink from to not be in the document
expect(screen.queryByText(/unlink from/i)).not.toBeInTheDocument();
});

it('displays the correct platform information for non-MF clients', () => {
render(<DerivPassword {...mock_props} landing_company_shortcode='svg' />);
const popover_wrapper = screen.getAllByTestId('dt_popover_wrapper');
// expect popover to have length of 4
expect(popover_wrapper).toHaveLength(4);
// expect button with text change password to be in the document
expect(screen.getByRole('button', { name: /change password/i })).toBeInTheDocument();
});

it('displays the correct platform information for MF clients', () => {
render(<DerivPassword {...mock_props} />);
const popover_wrapper = screen.getAllByTestId('dt_popover_wrapper');
// expect popover to have length of 4
expect(popover_wrapper).toHaveLength(1);
// expect button with text change password to be in the document
expect(screen.getByRole('button', { name: /change password/i })).toBeInTheDocument();
});

it('displays a change password button for non-social signups', () => {
render(<DerivPassword {...mock_props} />);
const change_password_button = screen.getByRole('button', {
name: /change password/i,
});
expect(change_password_button).toBeInTheDocument();
});

it('should invoke verifyEmail when change password is clicked', async () => {
render(<DerivPassword {...mock_props} />);
const ele_change_btn = screen.getByRole('button', {
name: /change password/i,
});
fireEvent.click(ele_change_btn);
expect(screen.queryByText(/we’ve sent you an email/i)).toBeInTheDocument();
expect(screen.getByText(/please click on the link in the email to reset your password\./i)).toBeInTheDocument();
await waitFor(() => {
expect(WS.verifyEmail).toHaveBeenCalled();
});
});

it('displays a button to unlink social identity provider', async () => {
const social_props = {
...mock_props,
is_social_signup: true,
social_identity_provider: 'apple',
};
render(<DerivPassword {...social_props} />);
const unlink_button = screen.getByText(/unlink from/i);
expect(unlink_button).toBeInTheDocument();
fireEvent.click(unlink_button);

await waitFor(() => {
expect(WS.verifyEmail).toHaveBeenCalled();
});
});
});
80 changes: 51 additions & 29 deletions packages/account/src/Sections/Security/Passwords/deriv-password.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import FormSubHeader from 'Components/form-sub-header';
import SentEmailModal from 'Components/sent-email-modal';
import DerivComLogo from 'Assets/ic-brand-deriv-red.svg';

const DerivPassword = ({ email, is_social_signup, social_identity_provider }) => {
const DerivPassword = ({ email, is_social_signup, social_identity_provider, landing_company_shortcode }) => {
const [is_sent_email_modal_open, setIsSentEmailModalOpen] = React.useState(false);

const onClickSendEmail = () => {
Expand All @@ -26,23 +26,36 @@ const DerivPassword = ({ email, is_social_signup, social_identity_provider }) =>
const platform_name_smarttrader = getPlatformSettings('smarttrader').name;
const platform_name_trader = getPlatformSettings('trader').name;

const is_mf = landing_company_shortcode === 'maltainvest';

return (
<React.Fragment>
<FormSubHeader title={localize('Deriv password')} />
<div className='account__passwords-wrapper'>
<React.Fragment>
<Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
<Localize
i18n_default_text='Use the <0>Deriv password</0> to log in to {{brand_website_name}}, {{platform_name_go}}, {{platform_name_trader}}, {{platform_name_smarttrader}}, and {{platform_name_dbot}}.'
components={[<strong key={0} />]}
values={{
brand_website_name,
platform_name_trader,
platform_name_dbot,
platform_name_smarttrader,
platform_name_go,
}}
/>
{is_mf ? (
<Localize
i18n_default_text='Use the <0>Deriv password</0> to log in to {{brand_website_name}} and {{platform_name_trader}}.'
components={[<strong key={0} />]}
values={{
brand_website_name,
platform_name_trader,
}}
/>
) : (
<Localize
i18n_default_text='Use the <0>Deriv password</0> to log in to {{brand_website_name}}, {{platform_name_go}}, {{platform_name_trader}}, {{platform_name_smarttrader}}, and {{platform_name_dbot}}.'
components={[<strong key={0} />]}
values={{
brand_website_name,
platform_name_trader,
platform_name_dbot,
platform_name_smarttrader,
platform_name_go,
}}
/>
)}
</Text>
<Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
<Localize
Expand All @@ -64,23 +77,31 @@ const DerivPassword = ({ email, is_social_signup, social_identity_provider }) =>
description='trader'
/>
</Popover>
<Popover alignment='bottom' message={platform_name_dbot}>
<Icon icon={`${getPlatformSettings('dbot').icon}-dashboard`} size={32} description='dbot' />
</Popover>
<Popover alignment='bottom' message={platform_name_smarttrader}>
<Icon
icon={`${getPlatformSettings('smarttrader').icon}-dashboard`}
size={32}
description='smarttrader'
/>
</Popover>
<Popover alignment='bottom' message={platform_name_go}>
<Icon
icon={`${getPlatformSettings('go').icon}-dashboard`}
size={32}
description='derivgo'
/>
</Popover>
{!is_mf && (
<React.Fragment>
<Popover alignment='bottom' message={platform_name_dbot}>
<Icon
icon={`${getPlatformSettings('dbot').icon}-dashboard`}
size={32}
description='dbot'
/>
</Popover>
<Popover alignment='bottom' message={platform_name_smarttrader}>
<Icon
icon={`${getPlatformSettings('smarttrader').icon}-dashboard`}
size={32}
description='smarttrader'
/>
</Popover>
<Popover alignment='bottom' message={platform_name_go}>
<Icon
icon={`${getPlatformSettings('go').icon}-dashboard`}
size={32}
description='derivgo'
/>
</Popover>
</React.Fragment>
)}
</div>
</React.Fragment>
{is_social_signup ? (
Expand Down Expand Up @@ -140,6 +161,7 @@ DerivPassword.propTypes = {
is_dark_mode_on: PropTypes.bool,
is_social_signup: PropTypes.bool,
social_identity_provider: PropTypes.string,
landing_company_shortcode: PropTypes.string,
};

export default DerivPassword;
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Passwords = ({
is_mt5_password_not_set,
is_dxtrade_password_not_set,
is_from_derivgo,
landing_company_shortcode,
}) => {
const [is_loading, setIsLoading] = React.useState(true);

Expand All @@ -43,6 +44,7 @@ const Passwords = ({
is_dark_mode_on={is_dark_mode_on}
is_social_signup={is_social_signup}
social_identity_provider={social_identity_provider}
landing_company_shortcode={landing_company_shortcode}
/>
{!is_from_derivgo && (mt5_login_list?.length > 0 || !is_mt5_password_not_set) && (
<PasswordsPlatform
Expand Down Expand Up @@ -72,6 +74,7 @@ Passwords.propTypes = {
is_mt5_password_not_set: PropTypes.bool,
is_dxtrade_password_not_set: PropTypes.bool,
is_from_derivgo: PropTypes.bool,
landing_company_shortcode: PropTypes.string,
};

export default connect(({ client, ui, common }) => ({
Expand All @@ -86,4 +89,5 @@ export default connect(({ client, ui, common }) => ({
is_mt5_password_not_set: client.is_mt5_password_not_set,
is_dxtrade_password_not_set: client.is_dxtrade_password_not_set,
is_from_derivgo: common.is_from_derivgo,
landing_company_shortcode: client.landing_company_shortcode,
}))(Passwords);
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const ProofOfAddressContainer = ({
onClick={() => {
const url = platforms[from_platform.ref]?.url;
window.location.href = url;
window.localStorage.removeItem('config.platform');
}}
>
<Localize i18n_default_text='Back to {{platform_name}}' values={{ platform_name: from_platform.name }} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Button, Loading } from '@deriv/components';
import { WS, getPlatformRedirect, platforms } from '@deriv/shared';
import { identity_status_codes, service_code } from './proof-of-identity-utils';

import DemoMessage from 'Components/demo-message';
import ErrorMessage from 'Components/error-component';
import Expired from 'Components/poi/status/expired';
Expand Down Expand Up @@ -98,22 +97,22 @@ const ProofOfIdentityContainer = ({
return <NotRequired />;
}

const redirect_button = should_show_redirect_btn ? (
<Button
primary
className='proof-of-identity__redirect'
onClick={() => {
if (platforms[from_platform.ref].is_hard_redirect) {
const url = platforms[from_platform.ref]?.url;
window.location.href = url;
} else {
routeBackTo(from_platform.route);
}
}}
>
const onClickRedirectButton = () => {
const platform = platforms[from_platform.ref];
const { is_hard_redirect = false, url = '' } = platform ?? {};
if (is_hard_redirect) {
window.location.href = url;
window.localStorage.removeItem('config.platform');
} else {
routeBackTo(from_platform.route);
}
};

const redirect_button = should_show_redirect_btn && (
<Button primary className='proof-of-identity__redirect' onClick={onClickRedirectButton}>
<Localize i18n_default_text='Back to {{platform_name}}' values={{ platform_name: from_platform.name }} />
</Button>
) : null;
);

if (
identity_status === identity_status_codes.none ||
Expand Down
14 changes: 13 additions & 1 deletion packages/account/src/Styles/account.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2276,6 +2276,19 @@ $MIN_HEIGHT_FLOATING: calc(
}
}

&__redirection {
.dc-btn {
margin-top: 3.2rem;
height: 4rem;

@include mobile {
margin: 1.6rem 0;
padding: 1.6rem;
width: 100%;
}
}
}

&__country-text {
margin-bottom: 1.6rem;
}
Expand All @@ -2284,7 +2297,6 @@ $MIN_HEIGHT_FLOATING: calc(
@include mobile {
width: 94%;
text-align: center;
margin-bottom: 9rem;
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
margin-bottom: 0.5rem;
margin-left: 2rem;
cursor: not-allowed;
pointer-events: none;

&--blurry {
opacity: 0.2;
Expand All @@ -70,6 +71,7 @@
margin-bottom: 0.5rem;
margin-left: 2rem;
cursor: not-allowed;
pointer-events: none;

&--blurry {
opacity: 0.2;
Expand All @@ -82,8 +84,9 @@
}

&-get {
cursor: not-allowed;
margin-left: 1rem;
user-select: none;
pointer-events: none;
&--blurry {
opacity: 0.2;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
}
&--deposit-button {
cursor: not-allowed;
pointer-events: none;
&-blurry {
opacity: 0.2;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
&--active,
&--blurry {
cursor: not-allowed;
pointer-events: none;
}
&--blurry {
opacity: 0.2;
Expand Down
2 changes: 1 addition & 1 deletion packages/appstore/src/constants/trading-hub-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export const getTradingHubContents = (): TTradingHubContents => ({
/>
),
footer_header: localize('Start trading'),
footer_text: localize('Click ‘Trade’ to start trading with your account'),
footer_text: localize('Click ‘Open’ to start trading with your account'),
has_next_content: true,
next_content: localize('Start trading'),
},
Expand Down
Loading

0 comments on commit d2b543e

Please sign in to comment.