diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx index bc6f5b8ee75c..c047ed588b30 100644 --- a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx +++ b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx @@ -52,9 +52,6 @@ describe('', () => { 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 = { @@ -87,7 +84,6 @@ describe('', () => { 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(); @@ -133,7 +129,8 @@ describe('', () => { 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); @@ -157,7 +154,6 @@ describe('', () => { await waitFor(() => { svgCommonRenderCheck(); }); - expect(screen.queryByText(verification_info)).not.toBeInTheDocument(); const inputs: HTMLTextAreaElement[] = screen.getAllByRole('textbox'); expect(inputs).toHaveLength(5); diff --git a/packages/account/src/Components/address-details/address-details.tsx b/packages/account/src/Components/address-details/address-details.tsx index 2f5dcbc550f5..151a56a4b3a3 100644 --- a/packages/account/src/Components/address-details/address-details.tsx +++ b/packages/account/src/Components/address-details/address-details.tsx @@ -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'; @@ -142,31 +141,11 @@ const AddressDetails = observer( is_disabled={is_desktop} > - {is_eu_user ? ( -
- - } - title={localize('Why do we collect this?')} - /> -
- ) : ( - - - - - + {is_mobile && ( + + )} -
', () => { 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(); @@ -49,7 +46,6 @@ describe('', () => { fireEvent.click(usd); expect(usd.checked).toEqual(true); - expect(screen.getByText(msg)).toBeInTheDocument(); expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); }; const store = mockStore({ @@ -240,7 +236,7 @@ describe('', () => { 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(); @@ -300,7 +296,7 @@ describe('', () => { }, }; 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', () => { @@ -316,7 +312,7 @@ describe('', () => { }, }; renderComponent({ store_config: new_store }); - runCommonTests(msg); + runCommonTests(); }); it('should render Fiat currencies when is_mt5_allowed and is_eu are true', () => { @@ -331,7 +327,7 @@ describe('', () => { }, }; renderComponent({ store_config: new_store }); - runCommonTests(msg); + runCommonTests(); }); it('should render Fiat currencies when is_mt5_allowed is true', () => { @@ -343,7 +339,7 @@ describe('', () => { }, }; renderComponent({ store_config: new_store }); - runCommonTests(msg); + runCommonTests(); }); it('should render Cryptocurrencies and submit the form ', async () => { @@ -382,7 +378,7 @@ describe('', () => { 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(); diff --git a/packages/account/src/Components/currency-selector/currency-selector.tsx b/packages/account/src/Components/currency-selector/currency-selector.tsx index 9256a224e2c7..7421f7fb00b4 100644 --- a/packages/account/src/Components/currency-selector/currency-selector.tsx +++ b/packages/account/src/Components/currency-selector/currency-selector.tsx @@ -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'; @@ -164,13 +157,6 @@ const CurrencySelector = observer( return localize('Next'); }; - const description = ( -
- - -
- ); - return ( {reorderCurrencies(fiat as keyof typeof reorderCurrencies).map( avbl_currency => ( @@ -241,7 +225,6 @@ const CurrencySelector = observer( 'crypto' ).length } - description={description} > {reorderCurrencies( crypto as keyof typeof reorderCurrencies, diff --git a/packages/account/src/Components/currency-selector/radio-button-group.tsx b/packages/account/src/Components/currency-selector/radio-button-group.tsx index f51563f7306c..0608ff612260 100644 --- a/packages/account/src/Components/currency-selector/radio-button-group.tsx +++ b/packages/account/src/Components/currency-selector/radio-button-group.tsx @@ -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; }; /** diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx index f7f1c0418b09..be4d03b6a268 100644 --- a/packages/account/src/Components/personal-details/personal-details.jsx +++ b/packages/account/src/Components/personal-details/personal-details.jsx @@ -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'; @@ -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'; @@ -190,26 +182,6 @@ const PersonalDetails = observer( height_offset='100px' is_disabled={isDesktop()} > - {is_eu_user && ( -
- - } - title={localize('Why do we collect this?')} - /> -
- )} - {!is_eu_user && !is_rendered_for_idv && ( - - - - )} ', () => { 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(); 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(); diff --git a/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-content.jsx b/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-content.jsx index 365ffadf7b4b..1eb55ade91e6 100644 --- a/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-content.jsx +++ b/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-content.jsx @@ -3,63 +3,70 @@ import { localize } from '@deriv/translations'; import { Modal, FormSubmitButton, Text } from '@deriv/components'; import { routes, isNavigationFromExternalPlatform } from '@deriv/shared'; import { Analytics } from '@deriv-com/analytics'; +import { useStore, observer } from '@deriv/stores'; -const WarningMessageModal = ({ - is_closing_create_real_account_modal, - setIsClosingCreateRealAccountModal, - closeRealAccountSignup, - routing_history, - real_account_signup_target, -}) => { - const closeModal = () => { - real_account_signup_target !== 'maltainvest' && - Analytics.trackEvent('ce_real_account_signup_form', { - action: 'close', - form_source: document.referrer, - form_name: 'real_account_signup_form', - }); +const WarningMessageModal = observer( + ({ + is_closing_create_real_account_modal, + setIsClosingCreateRealAccountModal, + closeRealAccountSignup, + routing_history, + real_account_signup_target, + }) => { + const { traders_hub } = useStore(); + const { selectAccountType } = traders_hub; + const closeModal = async () => { + real_account_signup_target !== 'maltainvest' && + Analytics.trackEvent('ce_real_account_signup_form', { + action: 'close', + form_source: document.referrer, + form_name: 'real_account_signup_form', + }); - setIsClosingCreateRealAccountModal(false); + await selectAccountType('demo'); - closeRealAccountSignup(); + setIsClosingCreateRealAccountModal(false); - if (isNavigationFromExternalPlatform(routing_history, routes.smarttrader)) { - window.location = routes.smarttrader; - } + closeRealAccountSignup(); - if (isNavigationFromExternalPlatform(routing_history, routes.binarybot)) { - window.location = routes.binarybot; - } - }; + if (isNavigationFromExternalPlatform(routing_history, routes.smarttrader)) { + window.location = routes.smarttrader; + } - return ( - -
- - {localize('Stop creating an account?')} - -
- - {localize('If you hit Yes, the info you entered will be lost.')} + if (isNavigationFromExternalPlatform(routing_history, routes.binarybot)) { + window.location = routes.binarybot; + } + }; + + return ( + +
+ + {localize('Take me to Demo account')} +
+ + {localize('I will setup my real account later.')} + +
+ setIsClosingCreateRealAccountModal(false)} + onCancel={closeModal} + />
- setIsClosingCreateRealAccountModal(false)} - onCancel={closeModal} - /> -
- - ); -}; + + ); + } +); export default WarningMessageModal; diff --git a/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-modal.scss b/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-modal.scss index 26b9baf55fd9..a69a2a91111e 100644 --- a/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-modal.scss +++ b/packages/core/src/App/Containers/WarningCloseCreateRealAccountModal/warning-close-create-real-account-modal.scss @@ -5,7 +5,7 @@ padding: 2.4rem; width: 44rem; @include mobile { - width: unset; + max-width: 35rem; } .dc-form-submit-button { diff --git a/packages/core/src/sass/details-form.scss b/packages/core/src/sass/details-form.scss index f582f529c8bf..77616889b902 100644 --- a/packages/core/src/sass/details-form.scss +++ b/packages/core/src/sass/details-form.scss @@ -156,6 +156,9 @@ .dc-page-error__container { height: 100%; } + &__heading { + margin: 1.6rem; + } &__description { margin: 1.6rem auto; width: 45%;