Skip to content

Commit

Permalink
[TRAH-3250] thisyahlen / shahzaib - remove disclaimers from real acco…
Browse files Browse the repository at this point in the history 
…unt creation (binary-com#14836)

* chore: remove disclaimers from real account creation

* fix: tests

* chore: remove inline message disclaimer

* chore: update test

* chore: update content

* chore: change width for mobile

* chore: change width

* chore: add personal details message

* fix: poi test case

* chore: update address details heading

* chore: removed unused imports

---------

Co-authored-by: Shahzaib <shahzaib@deriv.com>
  • Loading branch information
@thisyahlen-deriv @shahzaib-deriv
thisyahlen-deriv and shahzaib-deriv committed May 21, 2024
1 parent c3ecc88 commit 7e49062
Show file tree
Hide file tree
Showing 10 changed files with 78 additions and 146 deletions.
8 changes: 2 additions & 6 deletions packages/account/src/Components/address-details/__tests__/address-details.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,6 @@ describe('<AddressDetails/>', () => {
const address_state = 'State/Province';
const address_town = 'Town/City';
const address_town_marked = 'Town/City*';
const use_address_info = /only use an address for which you have proof of residence/i;
const verification_info =
'We need this for verification. If the information you provide is fake or inaccurate, you won’t be able to deposit and withdraw.';

let modal_root_el: HTMLDivElement;
const mock_props: React.ComponentProps<typeof AddressDetails> = {
Expand Down Expand Up @@ -87,7 +84,6 @@ describe('<AddressDetails/>', () => {
expect(screen.getByLabelText(address_postcode)).toBeInTheDocument();
expect(screen.getByLabelText(address_state)).toBeInTheDocument();
expect(screen.getByLabelText(address_town_marked)).toBeInTheDocument();
expect(screen.getByText(use_address_info)).toBeInTheDocument();

expect(screen.queryByLabelText(address_line_1)).not.toBeInTheDocument();
expect(screen.queryByLabelText(address_line_2_marked)).not.toBeInTheDocument();
Expand Down Expand Up @@ -133,7 +129,8 @@ describe('<AddressDetails/>', () => {
await waitFor(() => {
svgCommonRenderCheck();
});
expect(screen.queryByText(verification_info)).not.toBeInTheDocument();

expect(screen.getByText('Complete your address details')).toBeInTheDocument();

const inputs: HTMLTextAreaElement[] = screen.getAllByRole('textbox');
expect(inputs).toHaveLength(5);
Expand All @@ -157,7 +154,6 @@ describe('<AddressDetails/>', () => {
await waitFor(() => {
svgCommonRenderCheck();
});
expect(screen.queryByText(verification_info)).not.toBeInTheDocument();

const inputs: HTMLTextAreaElement[] = screen.getAllByRole('textbox');
expect(inputs).toHaveLength(5);
Expand Down
27 changes: 3 additions & 24 deletions packages/account/src/Components/address-details/address-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
import { useStatesList } from '@deriv/hooks';
import { observer, useStore } from '@deriv/stores';
import { localize, Localize } from '@deriv/translations';
import InlineNoteWithIcon from '../inline-note-with-icon';
import { FormInputField } from '../forms/form-fields';
import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
Expand Down Expand Up @@ -142,31 +141,11 @@ const AddressDetails = observer(
is_disabled={is_desktop}
>
<ScrollToFieldWithError />
{is_eu_user ? (
<div className='details-form__banner-container'>
<InlineNoteWithIcon
icon='IcAlertWarning'
message={
<Localize i18n_default_text='For verification purposes as required by regulation. It’s your responsibility to provide accurate and complete answers. You can update personal details at any time in your account settings.' />
}
title={localize('Why do we collect this?')}
/>
</div>
) : (
<Text
as='p'
align='left'
size='xxs'
line_height='l'
className='details-form__description'
>
<strong>
<Localize i18n_default_text='Only use an address for which you have proof of residence - ' />
</strong>
<Localize i18n_default_text='a recent utility bill (e.g. electricity, water, gas, landline, or internet), bank statement, or government-issued letter with your name and this address.' />
{is_mobile && (
<Text size='xs' weight='bold' className='details-form__heading'>
<Localize i18n_default_text='Complete your address details' />
</Text>
)}

<ThemedScrollbars height={height} className='details-form__scrollbar'>
<div
className={classNames('details-form__elements', 'address-details-form', {
Expand Down
18 changes: 7 additions & 11 deletions packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,7 @@ describe('<CurrencySelector/>', () => {
set_currency: false,
};

const msg = 'Please note that you can only have 1 fiat account.';

const runCommonTests = (msg: string) => {
expect(screen.getByRole('heading', { name: /fiat currencies/i })).toBeInTheDocument();
const runCommonTests = () => {
expect(screen.getByRole('radio', { name: /us dollar \(usd\)/i })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: /euro \(eur\)/i })).toBeInTheDocument();

Expand All @@ -49,7 +46,6 @@ describe('<CurrencySelector/>', () => {
fireEvent.click(usd);
expect(usd.checked).toEqual(true);

expect(screen.getByText(msg)).toBeInTheDocument();
expect(screen.getByRole('button', { name: /next/i })).toBeEnabled();
};
const store = mockStore({
Expand Down Expand Up @@ -240,7 +236,7 @@ describe('<CurrencySelector/>', () => {
it('should render Fiat currencies and submit the form', async () => {
renderComponent({});

runCommonTests(msg);
runCommonTests();
fireEvent.click(screen.getByRole('button', { name: /next/i }));
await waitFor(() => {
expect(mock_props.onSubmit).toHaveBeenCalled();
Expand Down Expand Up @@ -300,7 +296,7 @@ describe('<CurrencySelector/>', () => {
},
};
renderComponent({ store_config: new_store });
runCommonTests(msg);
runCommonTests();
});

it('should render Fiat currencies when is_dxtrade_allowed,is_eu and is_mt5_allowed are true', () => {
Expand All @@ -316,7 +312,7 @@ describe('<CurrencySelector/>', () => {
},
};
renderComponent({ store_config: new_store });
runCommonTests(msg);
runCommonTests();
});

it('should render Fiat currencies when is_mt5_allowed and is_eu are true', () => {
Expand All @@ -331,7 +327,7 @@ describe('<CurrencySelector/>', () => {
},
};
renderComponent({ store_config: new_store });
runCommonTests(msg);
runCommonTests();
});

it('should render Fiat currencies when is_mt5_allowed is true', () => {
Expand All @@ -343,7 +339,7 @@ describe('<CurrencySelector/>', () => {
},
};
renderComponent({ store_config: new_store });
runCommonTests(msg);
runCommonTests();
});

it('should render Cryptocurrencies and submit the form ', async () => {
Expand Down Expand Up @@ -382,7 +378,7 @@ describe('<CurrencySelector/>', () => {

it('should submit the form when getCurrentStep is not passed ', async () => {
renderComponent({});
runCommonTests(msg);
runCommonTests();
fireEvent.click(screen.getByRole('button', { name: /next/i }));
await waitFor(() => {
expect(mock_props.onSubmit).toHaveBeenCalled();
Expand Down
21 changes: 2 additions & 19 deletions packages/account/src/Components/currency-selector/currency-selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,10 @@ import React from 'react';
import classNames from 'classnames';
import { Field, Formik, FormikHandlers, FormikState } from 'formik';
import { WebsiteStatus } from '@deriv/api-types';
import {
AutoHeightWrapper,
FormSubmitButton,
Div100vhContainer,
Modal,
ThemedScrollbars,
Icon,
} from '@deriv/components';
import { AutoHeightWrapper, FormSubmitButton, Div100vhContainer, Modal, ThemedScrollbars } from '@deriv/components';
import { reorderCurrencies, getAddressDetailsFields, CURRENCY_TYPE } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { localize, Localize } from '@deriv/translations';
import { localize } from '@deriv/translations';
import RadioButton from './radio-button';
import RadioButtonGroup from './radio-button-group';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
Expand Down Expand Up @@ -164,13 +157,6 @@ const CurrencySelector = observer(
return localize('Next');
};

const description = (
<div className='currency-selector__description--info'>
<Icon icon='IcInfoBlue' />
<Localize i18n_default_text='Please note that you can only have 1 fiat account.' />
</div>
);

return (
<Formik
initialValues={value}
Expand Down Expand Up @@ -207,10 +193,8 @@ const CurrencySelector = observer(
<React.Fragment>
<RadioButtonGroup
className='currency-selector__radio-group currency-selector__radio-group--with-margin'
label={localize('Fiat currencies')}
is_fiat
item_count={fiat.length}
description={description}
>
{reorderCurrencies(fiat as keyof typeof reorderCurrencies).map(
avbl_currency => (
Expand Down Expand Up @@ -241,7 +225,6 @@ const CurrencySelector = observer(
'crypto'
).length
}
description={description}
>
{reorderCurrencies(
crypto as keyof typeof reorderCurrencies,
Expand Down
4 changes: 2 additions & 2 deletions packages/account/src/Components/currency-selector/radio-button-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export type TRadioButtonGroup = {
is_fiat?: boolean;
is_title_enabled?: boolean;
item_count: number;
label: string;
description: React.ReactNode;
label?: string;
description?: React.ReactNode;
};

/**
Expand Down
30 changes: 1 addition & 29 deletions packages/account/src/Components/personal-details/personal-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import { Form, Formik } from 'formik';
import { Analytics } from '@deriv-com/analytics';
import {
AutoHeightWrapper,
Div100vhContainer,
FormSubmitButton,
Modal,
Text,
ThemedScrollbars,
} from '@deriv/components';
import { AutoHeightWrapper, Div100vhContainer, FormSubmitButton, Modal, ThemedScrollbars } from '@deriv/components';
import { getIDVNotApplicableOption, isDesktop, isMobile, removeEmptyPropertiesFromObject } from '@deriv/shared';
import { Localize, localize } from '@deriv/translations';
import { useStore, observer } from '@deriv/stores';
Expand All @@ -23,7 +16,6 @@ import PoiNameDobExample from '../../Assets/ic-poi-name-dob-example.svg';
import FormSubHeader from '../form-sub-header';
import IDVForm from '../forms/idv-form';
import PersonalDetailsForm from '../forms/personal-details-form';
import InlineNoteWithIcon from '../inline-note-with-icon';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';

Expand Down Expand Up @@ -190,26 +182,6 @@ const PersonalDetails = observer(
height_offset='100px'
is_disabled={isDesktop()}
>
{is_eu_user && (
<div className='details-form__banner-container'>
<InlineNoteWithIcon
icon='IcAlertWarning'
message={
<Localize i18n_default_text='For verification purposes as required by regulation. It’s your responsibility to provide accurate and complete answers. You can update personal details at any time in your account settings.' />
}
title={localize('Why do we collect this?')}
/>
</div>
)}
{!is_eu_user && !is_rendered_for_idv && (
<Text as='p' size='xxxs' align='center' className='details-form__description'>
<Localize
i18n_default_text={
'Any information you provide is confidential and will be used for verification purposes only.'
}
/>
</Text>
)}
<ThemedScrollbars
height={height}
onScroll={closeToolTip}
Expand Down
4 changes: 0 additions & 4 deletions ...rm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,11 @@ describe('<PoiConfirmWithExampleFormContainer/>', () => {
onFormConfirm: jest.fn(),
};
const clarification_message = /To avoid delays, enter your/;
const checkbox_label =
'I confirm that the name and date of birth above match my chosen identity document (see below)';

it('should render PersonalDetailsForm with image and checkbox', async () => {
render(<PoiConfirmWithExampleFormContainer {...mock_props} />);

expect(await screen.findByText('PoiNameDobExampleImage')).toBeInTheDocument();
expect(screen.getByText(clarification_message)).toBeInTheDocument();
expect(screen.getByText(checkbox_label)).toBeInTheDocument();
const checkbox_el: HTMLInputElement = screen.getByRole('checkbox');
expect(checkbox_el.checked).toBeFalsy();

Expand Down
Loading

0 comments on commit 7e49062

Please sign in to comment.