feat: ✨ incorporated FA to MF real account creation

packages/account/src/Components/financial-details/__tests__/financial-details.spec.js

@@ -18,22 +18,6 @@ const fields_enums = {
         { value: 'account turnover 1', text: 'account turnover 1' },
         { value: 'account turnover 2', text: 'account turnover 2' },
     ],
-    binary_options_trading_experience_enum: [
-        { value: 'binary options trading experience 1', text: 'binary options trading experience 1' },
-        { value: 'binary options trading experience 2', text: 'binary options trading experience 2' },
-    ],
-    binary_options_trading_frequency_enum: [
-        { value: 'binary options trading frequency 1', text: 'binary options trading frequency 1' },
-        { value: 'binary options trading frequency 2', text: 'binary options trading frequency 2' },
-    ],
-    cfd_trading_experience_enum: [
-        { value: 'cfd trading experience 1', text: 'cfd trading experience 1' },
-        { value: 'cfd trading experience 2', text: 'cfd trading experience 2' },
-    ],
-    cfd_trading_frequency_enum: [
-        { value: 'cfd trading frequency 1', text: 'cfd trading frequency 1' },
-        { value: 'cfd trading frequency 2', text: 'cfd trading frequency 2' },
-    ],
     education_level_enum: [
         { value: 'education level 1', text: 'education level 1' },
         { value: 'education level 2', text: 'education level 2' },
@@ -42,22 +26,10 @@ const fields_enums = {
         { value: 'employment industry 1', text: 'employment industry 1' },
         { value: 'employment industry 2', text: 'employment industry 2' },
     ],
-    employment_status_enum: [
-        { value: 'employment status 1', text: 'employment status 1' },
-        { value: 'employment status 2', text: 'employment status 2' },
-    ],
     estimated_worth_enum: [
         { value: 'estimated worth 1', text: 'estimated worth 1' },
         { value: 'estimated worth 2', text: 'estimated worth 2' },
     ],
-    forex_trading_experience_enum: [
-        { value: 'forex trading experience 1', text: 'forex trading experience 1' },
-        { value: 'forex trading experience 2', text: 'forex trading experience 2' },
-    ],
-    forex_trading_frequency_enum: [
-        { value: 'forex trading frequency 1', text: 'forex trading frequency 1' },
-        { value: 'forex trading frequency 2', text: 'forex trading frequency 2' },
-    ],
     income_source_enum: [
         { value: 'income source 1', text: 'income source 1' },
         { value: 'income source 2', text: 'income source 2' },
@@ -70,14 +42,7 @@ const fields_enums = {
         { value: 'occupation 1', text: 'occupation 1' },
         { value: 'occupation 2', text: 'occupation 2' },
     ],
-    other_instruments_trading_experience_enum: [
-        { value: 'other instruments trading experience 1', text: 'other instruments trading experience 1' },
-        { value: 'other instruments trading experience 2', text: 'other instruments trading experience 2' },
-    ],
-    other_instruments_trading_frequency_enum: [
-        { value: 'other instruments trading frequency 1', text: 'other instruments trading frequency 1' },
-        { value: 'other instruments trading frequency 2', text: 'other instruments trading frequency 2' },
-    ],
+
     source_of_wealth_enum: [
         { value: 'source of wealth 1', text: 'source of wealth 1' },
         { value: 'source of wealth 2', text: 'source of wealth 2' },
@@ -101,51 +66,24 @@ describe('<FinancialDetails />', () => {
     });
 
     const fieldsRenderCheck = () => {
-        expect(screen.getAllByText('(All fields are required)').length).toBe(2);
         expect(screen.getByText('Anticipated annual turnover')).toBeInTheDocument();
-        expect(screen.getByText('Employment Status')).toBeInTheDocument();
         expect(screen.getByText('Estimated net worth')).toBeInTheDocument();
-        expect(screen.getByText('Financial information')).toBeInTheDocument();
         expect(screen.getByText('Industry of employment')).toBeInTheDocument();
         expect(screen.getByText('Level of education')).toBeInTheDocument();
         expect(screen.getByText('Net annual income')).toBeInTheDocument();
         expect(screen.getByText('Occupation')).toBeInTheDocument();
         expect(screen.getByText('Source of income')).toBeInTheDocument();
         expect(screen.getByText('Source of wealth')).toBeInTheDocument();
-        expect(screen.getByText("We're legally obliged to ask for your financial information.")).toBeInTheDocument();
-
-        expect(screen.getByText('CFD trading experience')).toBeInTheDocument();
-        expect(screen.getByText('CFD trading frequency')).toBeInTheDocument();
-        expect(screen.getByText('Digital options trading experience')).toBeInTheDocument();
-        expect(screen.getByText('Digital options trading frequency')).toBeInTheDocument();
-        expect(screen.getByText('Experience with trading other financial instruments')).toBeInTheDocument();
-        expect(screen.getByText('Forex trading experience')).toBeInTheDocument();
-        expect(screen.getByText('Forex trading frequency')).toBeInTheDocument();
-        expect(screen.getByText('Tell us about your trading experience.')).toBeInTheDocument();
-        expect(screen.getByText('Trading experience')).toBeInTheDocument();
-    };
-
-    const fieldsNotRenderCheck = () => {
-        expect(screen.queryByText('Employment Status')).not.toBeInTheDocument();
-        expect(screen.queryByText('Financial information')).not.toBeInTheDocument();
-        expect(screen.queryByText('Forex trading experience')).not.toBeInTheDocument();
-        expect(screen.queryByText('Tell us about your trading experience.')).not.toBeInTheDocument();
-        expect(screen.queryByText('Trading experience')).not.toBeInTheDocument();
-        expect(
-            screen.queryByText("We're legally obliged to ask for your financial information.")
-        ).not.toBeInTheDocument();
     };
 
     it('should render "FinancialDetails" for desktop', () => {
-        const { container } = render(<FinancialDetails {...mock_props} />);
+        render(<FinancialDetails {...mock_props} />);
 
         fieldsRenderCheck();
 
         const inputs = screen.getAllByTestId('dti_dropdown_display');
-        expect(inputs.length).toBe(17);
+        expect(inputs.length).toBe(8);
 
-        expect(container.querySelector('.dc-form-submit-button')).toBeInTheDocument();
-        expect(container.querySelector('.dc-modal-footer')).toBeInTheDocument();
         expect(screen.getByText('Next')).toBeInTheDocument();
         expect(screen.getByText('Previous')).toBeInTheDocument();
     });
@@ -154,15 +92,13 @@ describe('<FinancialDetails />', () => {
         isDesktop.mockReturnValue(false);
         isMobile.mockReturnValue(true);
 
-        const { container } = render(<FinancialDetails {...mock_props} />);
+        render(<FinancialDetails {...mock_props} />);
 
         fieldsRenderCheck();
 
         const inputs = screen.getAllByRole('combobox');
-        expect(inputs.length).toBe(17);
+        expect(inputs.length).toBe(8);
 
-        expect(container.querySelector('.dc-form-submit-button')).toBeInTheDocument();
-        expect(container.querySelector('.dc-modal-footer')).not.toBeInTheDocument();
         expect(screen.getByText('Next')).toBeInTheDocument();
         expect(screen.getByText('Previous')).toBeInTheDocument();
     });
@@ -190,57 +126,25 @@ describe('<FinancialDetails />', () => {
         const select_inputs = screen.getAllByRole('combobox');
 
         const account_turnover_select = select_inputs.find(option => option.name === 'account_turnover');
-        const binary_options_trading_experience_select = select_inputs.find(
-            option => option.name === 'binary_options_trading_experience'
-        );
-        const binary_options_trading_frequency_select = select_inputs.find(
-            option => option.name === 'binary_options_trading_frequency'
-        );
-        const cfd_trading_experience_select = select_inputs.find(option => option.name === 'cfd_trading_experience');
-        const cfd_trading_frequency_select = select_inputs.find(option => option.name === 'cfd_trading_frequency');
+
         const education_level_select = select_inputs.find(option => option.name === 'education_level');
         const employment_indystry_select = select_inputs.find(option => option.name === 'employment_industry');
-        const employment_status_select = select_inputs.find(option => option.name === 'employment_status');
         const estimated_worth_select = select_inputs.find(option => option.name === 'estimated_worth');
-        const forex_trading_experience_select = select_inputs.find(
-            option => option.name === 'forex_trading_experience'
-        );
-        const forex_trading_frequency_select = select_inputs.find(option => option.name === 'forex_trading_frequency');
         const income_source_select = select_inputs.find(option => option.name === 'income_source');
         const net_income_select = select_inputs.find(option => option.name === 'net_income');
         const occuppation_select = select_inputs.find(option => option.name === 'occupation');
-        const other_instruments_trading_experience_select = select_inputs.find(
-            option => option.name === 'other_instruments_trading_experience'
-        );
-        const other_instruments_trading_frequency_select = select_inputs.find(
-            option => option.name === 'other_instruments_trading_frequency'
-        );
+
         const source_of_wealth_select = select_inputs.find(option => option.name === 'source_of_wealth');
 
         fireEvent.change(account_turnover_select, { target: { value: 'account turnover 1' } });
-        fireEvent.change(binary_options_trading_experience_select, {
-            target: { value: 'binary options trading experience 2' },
-        });
-        fireEvent.change(binary_options_trading_frequency_select, {
-            target: { value: 'binary options trading frequency 2' },
-        });
-        fireEvent.change(cfd_trading_experience_select, { target: { value: 'cfd trading experience 1' } });
-        fireEvent.change(cfd_trading_frequency_select, { target: { value: 'cfd trading frequency 2' } });
+
         fireEvent.change(education_level_select, { target: { value: 'education level 2' } });
         fireEvent.change(employment_indystry_select, { target: { value: 'employment industry 1' } });
-        fireEvent.change(employment_status_select, { target: { value: 'employment status 2' } });
         fireEvent.change(estimated_worth_select, { target: { value: 'estimated worth 2' } });
-        fireEvent.change(forex_trading_experience_select, { target: { value: 'forex trading experience 2' } });
-        fireEvent.change(forex_trading_frequency_select, { target: { value: 'forex trading frequency 1' } });
         fireEvent.change(income_source_select, { target: { value: 'income source 1' } });
         fireEvent.change(net_income_select, { target: { value: 'net income 1' } });
         fireEvent.change(occuppation_select, { target: { value: 'occupation 2' } });
-        fireEvent.change(other_instruments_trading_experience_select, {
-            target: { value: 'other instruments trading experience 1' },
-        });
-        fireEvent.change(other_instruments_trading_frequency_select, {
-            target: { value: 'other instruments trading frequency 2' },
-        });
+
         fireEvent.change(source_of_wealth_select, { target: { value: 'source of wealth 1' } });
 
         const btns = screen.getAllByRole('button');

packages/account/src/Components/financial-details/financial-details.jsx

@@ -1,35 +1,31 @@
+import classNames from 'classnames';
 import { Formik } from 'formik';
 import React from 'react';
-import { AutoHeightWrapper, Div100vhContainer, FormSubmitButton, Modal, ThemedScrollbars } from '@deriv/components';
-
-import { localize } from '@deriv/translations';
+import {
+    AutoHeightWrapper,
+    Div100vhContainer,
+    FormSubmitButton,
+    Modal,
+    Text,
+    ThemedScrollbars,
+} from '@deriv/components';
 import { isDesktop, isMobile } from '@deriv/shared';
+import { Localize, localize } from '@deriv/translations';
 import {
     AccountTurnover,
-    BinaryOptionsTradingExperience,
-    BinaryOptionsTradingFrequency,
-    CFDTradingExperience,
-    CFDTradingFrequency,
+    IncomeSource,
     EducationLevel,
     EmploymentIndustry,
-    EmploymentStatus,
     EstimatedWorth,
-    ForexTradingExperience,
-    ForexTradingFrequency,
-    IncomeSource,
     NetIncome,
     Occupation,
-    OtherInstrumentsTradingExperience,
-    OtherInstrumentsTradingFrequency,
     SourceOfWealth,
 } from './financial-details-partials';
-import FormSubHeader from '../form-sub-header';
 import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
 
 const FinancialInformation = ({
     shared_props,
     income_source_enum,
-    employment_status_enum,
     employment_industry_enum,
     occupation_enum,
     source_of_wealth_enum,
@@ -39,13 +35,7 @@ const FinancialInformation = ({
     account_turnover_enum,
 }) => (
     <React.Fragment>
-        <FormSubHeader
-            title={localize('Financial information')}
-            subtitle={localize('(All fields are required)')}
-            description={localize("We're legally obliged to ask for your financial information.")}
-        />
         <IncomeSource {...shared_props} income_source_enum={income_source_enum} />
-        <EmploymentStatus {...shared_props} employment_status_enum={employment_status_enum} />
         <EmploymentIndustry {...shared_props} employment_industry_enum={employment_industry_enum} />
         <Occupation {...shared_props} occupation_enum={occupation_enum} />
         <SourceOfWealth {...shared_props} source_of_wealth_enum={source_of_wealth_enum} />
@@ -56,46 +46,6 @@ const FinancialInformation = ({
     </React.Fragment>
 );
 
-const TradingExperience = ({
-    shared_props,
-    forex_trading_experience_enum,
-    forex_trading_frequency_enum,
-    binary_options_trading_experience_enum,
-    binary_options_trading_frequency_enum,
-    cfd_trading_experience_enum,
-    cfd_trading_frequency_enum,
-    other_instruments_trading_experience_enum,
-    other_instruments_trading_frequency_enum,
-}) => (
-    <React.Fragment>
-        <FormSubHeader
-            title={localize('Trading experience')}
-            subtitle={localize('(All fields are required)')}
-            description={localize('Tell us about your trading experience.')}
-        />
-        <ForexTradingExperience {...shared_props} forex_trading_experience_enum={forex_trading_experience_enum} />
-        <ForexTradingFrequency {...shared_props} forex_trading_frequency_enum={forex_trading_frequency_enum} />
-        <BinaryOptionsTradingExperience
-            {...shared_props}
-            binary_options_trading_experience_enum={binary_options_trading_experience_enum}
-        />
-        <BinaryOptionsTradingFrequency
-            {...shared_props}
-            binary_options_trading_frequency_enum={binary_options_trading_frequency_enum}
-        />
-        <CFDTradingExperience {...shared_props} cfd_trading_experience_enum={cfd_trading_experience_enum} />
-        <CFDTradingFrequency {...shared_props} cfd_trading_frequency_enum={cfd_trading_frequency_enum} />
-        <OtherInstrumentsTradingExperience
-            {...shared_props}
-            other_instruments_trading_experience_enum={other_instruments_trading_experience_enum}
-        />
-        <OtherInstrumentsTradingFrequency
-            {...shared_props}
-            other_instruments_trading_frequency_enum={other_instruments_trading_frequency_enum}
-        />
-    </React.Fragment>
-);
-
 const FinancialDetails = props => {
     const handleCancel = values => {
         const current_step = props.getCurrentStep() - 1;
@@ -132,16 +82,26 @@ const FinancialDetails = props => {
                         {({ setRef, height }) => (
                             <form ref={setRef} onSubmit={handleSubmit}>
                                 <Div100vhContainer
-                                    className='details-form'
+                                    className={classNames('details-form', 'financial-assessment')}
                                     height_offset='110px'
                                     is_disabled={isDesktop()}
                                 >
+                                    <Text as='p' color='prominent' size='xxs' className='trading-assessment__side-note'>
+                                        <Localize
+                                            i18n_default_text='We collect information about your employment as part of our due
+                                        diligence obligations, as required by anti-money laundering legislation.'
+                                        />
+                                    </Text>
                                     <ThemedScrollbars autoHide={!(window.innerHeight < 890)} height={height - 77}>
-                                        <div className='details-form__elements  details-form__elements--wide'>
+                                        <div
+                                            className={classNames(
+                                                'details-form__elements',
+                                                'financial-assessment__form'
+                                            )}
+                                        >
                                             <FinancialInformation
                                                 shared_props={shared_props}
                                                 income_source_enum={props.income_source_enum}
-                                                employment_status_enum={props.employment_status_enum}
                                                 employment_industry_enum={props.employment_industry_enum}
                                                 occupation_enum={props.occupation_enum}
                                                 source_of_wealth_enum={props.source_of_wealth_enum}
@@ -150,25 +110,6 @@ const FinancialDetails = props => {
                                                 estimated_worth_enum={props.estimated_worth_enum}
                                                 account_turnover_enum={props.account_turnover_enum}
                                             />
-                                            <TradingExperience
-                                                shared_props={shared_props}
-                                                forex_trading_experience_enum={props.forex_trading_experience_enum}
-                                                forex_trading_frequency_enum={props.forex_trading_frequency_enum}
-                                                binary_options_trading_experience_enum={
-                                                    props.binary_options_trading_experience_enum
-                                                }
-                                                binary_options_trading_frequency_enum={
-                                                    props.binary_options_trading_frequency_enum
-                                                }
-                                                cfd_trading_experience_enum={props.cfd_trading_experience_enum}
-                                                cfd_trading_frequency_enum={props.cfd_trading_frequency_enum}
-                                                other_instruments_trading_experience_enum={
-                                                    props.other_instruments_trading_experience_enum
-                                                }
-                                                other_instruments_trading_frequency_enum={
-                                                    props.other_instruments_trading_frequency_enum
-                                                }
-                                            />
                                         </div>
                                     </ThemedScrollbars>
                                 </Div100vhContainer>