feat: incorporated welcome modal to existing user MF flow

packages/account/build/webpack.config.js

@@ -57,10 +57,10 @@ module.exports = function (env) {
             'terms-of-use-config': 'Configs/terms-of-use-config',
             'trading-assessment-config': 'Configs/trading-assessment-config',
             'trading-assessment-new-user': 'Components/trading-assessment/trading-assessment-new-user.jsx',
-            'trading-assessment-existing-user': 'Components/trading-assessment/trading-assessment-existing-user.jsx',
             'risk-tolerance-warning-modal': 'Components/trading-assessment/risk-tolerance-warning-modal.jsx',
             'verified-account-modal': 'Components/trading-assessment/verified-account-modal.jsx',
             'test-warning-modal': 'Components/trading-assessment/test-warning-modal.jsx',
+            'trading-assessment-form': 'Components/trading-assessment/trading-assessment-form.jsx',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

packages/account/src/Components/trading-assessment/index.js

@@ -1,6 +1,5 @@
 export { default as TradingAssessmentNewUser } from './trading-assessment-new-user.jsx';
-export { default as TradingAssessmentExistingUser } from './trading-assessment-existing-user.jsx';
 export { default as RiskToleranceWarningModal } from './risk-tolerance-warning-modal.jsx';
-// export { default as CoolDownWarningModal } from './cooldown-warning-modal.jsx';
 export { default as VerifiedAccountModal } from './verified-account-modal.jsx';
 export { default as TestWarningModal } from './test-warning-modal.jsx';
+export { default as TradingAssessmentForm } from './trading-assessment-form';

packages/account/src/Components/trading-assessment/risk-tolerance-warning-modal.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Icon, Modal, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 
-const RiskToleranceWarningModal = ({ show_risk_modal, setShowRiskModal, title }) => {
+const RiskToleranceWarningModal = ({ show_risk_modal, setShowRiskModal, title, button_text }) => {
     return (
         <Modal
             width='44rem'
@@ -22,7 +22,13 @@ const RiskToleranceWarningModal = ({ show_risk_modal, setShowRiskModal, title })
                 </Text>
             </Modal.Body>
             <Modal.Footer>
-                <Button type='button' large text={localize('OK')} primary onClick={() => setShowRiskModal(false)} />
+                <Button
+                    type='button'
+                    large
+                    text={button_text ?? localize('OK')}
+                    primary
+                    onClick={() => setShowRiskModal(false)}
+                />
             </Modal.Footer>
         </Modal>
     );

packages/account/src/Components/trading-assessment/test-warning-modal.jsx

@@ -2,7 +2,7 @@ import { Button, Modal, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import React from 'react';
 
-const TestWarningModal = ({ show_risk_modal, onAccept, onDecline }) => {
+const TestWarningModal = ({ show_risk_modal, body_content, footer_content }) => {
     return (
         <Modal
             width='44rem'
@@ -12,7 +12,8 @@ const TestWarningModal = ({ show_risk_modal, onAccept, onDecline }) => {
             className='risk-tolerance'
         >
             <Modal.Body>
-                <Text as='p' size='xs'>
+                {body_content}
+                {/* <Text as='p' size='xs'>
                     <Localize i18n_default_text='In providing our services to you, we are required to obtain information from you in order to assess whether a given product or service is appropriate for you and whether you possess the experience and knowledge to understand the risks involved.' />
                 </Text>
                 <Text as='p' size='xs'>
@@ -23,18 +24,16 @@ const TestWarningModal = ({ show_risk_modal, onAccept, onDecline }) => {
                 </Text>
                 <Text as='p' size='xs'>
                     <Localize i18n_default_text='By clicking ‘Accept’ and proceeding with the account opening, you should note that you may be exposing yourself to risks. These risks, which may be significant, include the risk of losing the entire sum invested, and you may not have the knowledge and experience to properly assess or mitigate them.' />
-                </Text>
+                </Text> */}
             </Modal.Body>
             <Modal.Footer>
-                <Button type='button' large text={localize('Decline')} secondary onClick={onDecline} />
-                <Button type='button' large text={localize('Accept')} primary onClick={onAccept} />
+                {footer_content}
+                {/* 
+                    <Button type='button' large text={localize('Decline')} secondary onClick={onDecline} />
+                <Button type='button' large text={localize('Accept')} primary onClick={onAccept} /> */}
             </Modal.Footer>
         </Modal>
     );
 };
 
-// export default connect(({ ui }) => ({
-//     real_account_signup_data: ui.real_account_signup_data,
-// }))(TestWarningModal);
-
 export default TestWarningModal;

packages/account/src/Components/trading-assessment/verified-account-modal.jsx

@@ -2,21 +2,7 @@ import React from 'react';
 import { Modal, Text, Icon, Button } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 
-const VerifiedAccountModal = ({ onSubmit, onCancel, fetchFinancialAssessment, setCFDScore }) => {
-    React.useEffect(() => {
-        const fetchFinancialScore = async () => {
-            try {
-                const response = await fetchFinancialAssessment();
-                console.log('fetchFinancialAssessment: ', response);
-                setCFDScore(response?.cfd_score ?? 0);
-            } catch (err) {
-                console.log('Error: ', err);
-            }
-        };
-
-        fetchFinancialScore();
-    }, []);
-
+const VerifiedAccountModal = ({ onSubmit, onCancel }) => {
     return (
         <Modal width='44rem' is_open={true} className='center-risk-modal'>
             <Modal.Body>

packages/account/src/Configs/trading-assessment-config.js

@@ -288,6 +288,7 @@ export const trading_assessment_form_config = {
 };
 
 const tradingAssessmentConfig = ({ real_account_signup_target }, TradingAssessmentNewUser) => {
+    console.log('real_account_signup_target: ', real_account_signup_target);
     return {
         header: {
             active_title: localize('Complete your trading assessment'),

packages/core/src/App/Containers/Modals/app-modals.jsx

@@ -6,6 +6,7 @@ import { connect } from 'Stores/connect';
 import { moduleLoader } from '@deriv/shared';
 import TradingExperienceModal from './trading-experience-modal';
 import CooldownWarningModal from './cooldown-warning-modal';
+import TradingAssessmentExistingUser from './trading-assessment-existing-user';
 
 const AccountSignupModal = React.lazy(() =>
     moduleLoader(() => import(/* webpackChunkName: "account-signup-modal" */ '../AccountSignupModal'))
@@ -45,11 +46,8 @@ const AppModals = ({
     is_eu,
     is_logged_in,
     has_maltainvest_account,
-    fetchFinancialAssessment,
-    cfd_score,
-    setCFDScore,
-    setShouldShowVerifiedAccount,
     should_show_cooldown_warning_modal,
+    should_show_trade_assessment_form,
 }) => {
     const url_params = new URLSearchParams(useLocation().search);
     const url_action_param = url_params.get('action');
@@ -100,20 +98,13 @@ const AppModals = ({
         ComponentToLoad = <CooldownWarningModal />;
     }
 
-    // if (is_logged_in && has_maltainvest_account) {
-    //     //TODO: Invoke Trading investment assessment modal
-    //     ComponentToLoad = (
-    //         <TradingExperienceModal
-    //             fetchFinancialAssessment={fetchFinancialAssessment}
-    //             setCFDScore={setCFDScore}
-    //             cfd_score={cfd_score ?? 1}
-    //             onCancel={setShouldShowVerifiedAccount}
-    //             onSubmit={() => {
-    //                 history.push(routes.proof_of_identity);
-    //             }}
-    //         />
-    //     );
-    // }
+    if (is_logged_in && has_maltainvest_account) {
+        ComponentToLoad = <TradingExperienceModal />;
+    }
+
+    if (should_show_trade_assessment_form) {
+        ComponentToLoad = <TradingAssessmentExistingUser />;
+    }
 
     return (
         <>
@@ -139,4 +130,5 @@ export default connect(({ client, ui }) => ({
     cfd_score: client.cfd_score,
     setShouldShowVerifiedAccount: ui.setShouldShowVerifiedAccount,
     should_show_cooldown_warning_modal: ui.should_show_cooldown_warning_modal,
+    should_show_trade_assessment_form: ui.should_show_trade_assessment_form,
 }))(AppModals);

packages/account/src/Components/trading-assessment/completed-assessment-modal.jsx → packages/core/src/App/Containers/Modals/completed-assessment-modal.jsx

@@ -1,5 +1,5 @@
 import { Button, Icon, Modal, Text } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { Localize, localize } from '@deriv/translations';
 import React from 'react';
 
 const CompletedAssessmentModal = () => {

packages/core/src/App/Containers/Modals/trading-assessment-existing-user.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Button, Modal, DesktopWrapper, MobileDialog, MobileWrapper, Text } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import {
+    RiskToleranceWarningModal,
+    TradingAssessmentForm,
+    TestWarningModal,
+    tradingAssessmentConfig,
+} from '@deriv/account';
+
+const TradingAssessmentExistingUser = ({
+    should_show_trade_assessment_form,
+    setFinancialAndTradingAssessment,
+    should_show_risk_tolerance_warning_modal,
+    setShouldShowRiskToleranceWarningModal,
+    should_show_appropriateness_test_warning_modal,
+    setShouldShowAppropriatenessTestWarningModal,
+}) => {
+    const [form_values, setStateItems] = React.useState({});
+
+    const { form_value, props } = tradingAssessmentConfig({ real_account_signup_target: 'maltainvest' }, null);
+
+    React.useEffect(() => {
+        const initial_fields = form_value;
+        setStateItems(initial_fields);
+    }, []);
+
+    const handleSubmit = async values => {
+        const form_payload = {
+            trading_experience_maltainvest: { ...values },
+        };
+        try {
+            const response = await setFinancialAndTradingAssessment(form_payload);
+        } catch (error) {
+            if (error.code === 'AppropriatenessTestFailed') {
+                //pass
+                setShouldShowRiskToleranceWarningModal(true);
+            }
+        }
+    };
+
+    const handleAcceptAppropriatenessTestWarning = () => {
+        setShouldShowAppropriatenessTestWarningModal(false);
+    };
+
+    if (should_show_risk_tolerance_warning_modal) {
+        <RiskToleranceWarningModal
+            show_risk_modal={should_show_risk_tolerance_warning_modal}
+            setShowRiskModal={setShouldShowRiskToleranceWarningModal}
+            title={localize('Risk Tolerance Warning')}
+            button_text={localize('Yes, I understand the risk.')}
+        />;
+    } else if (should_show_appropriateness_test_warning_modal) {
+        return (
+            <TestWarningModal
+                show_risk_modal={should_show_appropriateness_test_warning_modal}
+                body_content={
+                    <Text as='p' size='xs'>
+                        <Localize
+                            i18n_default_text='In providing our services to you, we are required to ask you for some information to assess if a given product or service is appropriate for you and whether you have the experience and knowledge to understand the risks involved.<0/><1/>'
+                            components={[<br key={0} />, <br key={1} />]}
+                        />
+                        <Localize
+                            i18n_default_text='Based on your answers, it looks like you have insufficient knowledge and experience in trading CFDs. CFD trading is risky and you could potentially lose all of your capital.'
+                            components={[<br key={0} />, <br key={1} />]}
+                        />
+                        <Localize i18n_default_text='Please note that by clicking ‘OK’, you may be exposing yourself to risks. You may not have the knowledge or experience to properly assess or mitigate these risks, which may be significant, including the risk of losing the entire sum you have invested' />
+                    </Text>
+                }
+                footer_content={
+                    <React.Fragment>
+                        <Button
+                            type='button'
+                            large
+                            text={localize('OK')}
+                            primary
+                            onClick={handleAcceptAppropriatenessTestWarning}
+                        />
+                    </React.Fragment>
+                }
+            />
+        );
+    }
+
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <Modal
+                    is_open={should_show_trade_assessment_form}
+                    title={localize('Trading Experience Assessment')}
+                    width='904px'
+                    has_close_icon={false}
+                >
+                    <TradingAssessmentForm
+                        assessment_questions={props.assessment_questions}
+                        form_values={form_values}
+                        onSubmit={handleSubmit}
+                    />
+                </Modal>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <MobileDialog
+                    visible={should_show_trade_assessment_form}
+                    title={localize('Trading Experience Assessment')}
+                    portal_element_id='modal_root'
+                >
+                    <TradingAssessmentForm
+                        assessment_questions={props.assessment_questions}
+                        value={form_values}
+                        onSubmit={handleSubmit}
+                    />
+                </MobileDialog>
+            </MobileWrapper>
+        </React.Fragment>
+    );
+};
+
+export default connect(({ client, ui }) => ({
+    setFinancialAndTradingAssessment: client.setFinancialAndTradingAssessment,
+    should_show_risk_tolerance_warning_modal: client.should_show_risk_tolerance_warning_modal,
+    setShouldShowRiskToleranceWarningModal: client.setShouldShowRiskToleranceWarningModal,
+    should_show_appropriateness_test_warning_modal: ui.should_show_appropriateness_test_warning_modal,
+    setShouldShowAppropriatenessTestWarningModal: ui.setShouldShowAppropriatenessTestWarningModal,
+    should_show_trade_assessment_form: ui.should_show_trade_assessment_form,
+}))(TradingAssessmentExistingUser);