Merge pull request binary-com#5 from likhith-deriv/feat--new_flow_mf_…

…account

Feat  new flow mf account

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

@@ -2,27 +2,30 @@ import React from 'react';
 import { Button, Icon, Modal, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 
-const RiskToleranceWarningModal = ({ show_risk_modal, setShowRiskModal }) => (
-    <Modal
-        width='44rem'
-        height='44rem'
-        title={localize('Risk Tolerance Warning')}
-        is_open={show_risk_modal}
-        className='risk-acceptance'
-    >
-        <Modal.Body className='risk-acceptance__body'>
-            <Icon icon='IcRedWarning' size={63} />
-            <Text as='p' size='xs'>
-                <Localize
-                    i18n_default_text='CFDs and other financial instruments come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs and other financial instruments work and whether you can afford to take the high risk of losing your money. <0/><1/> To continue, kindly note that you would need to wait 24 hours before you can proceed further.'
-                    components={[<br key={0} />, <br key={1} />]}
-                />
-            </Text>
-        </Modal.Body>
-        <Modal.Footer>
-            <Button type='button' large text={localize('OK')} primary onClick={() => setShowRiskModal(false)} />
-        </Modal.Footer>
-    </Modal>
-);
+const RiskToleranceWarningModal = ({ show_risk_modal, setShowRiskModal, title }) => {
+    return (
+        <Modal
+            width='44rem'
+            height='44rem'
+            title={title}
+            is_open={show_risk_modal}
+            className='risk-acceptance'
+            has_close_icon={false}
+        >
+            <Modal.Body className='risk-acceptance__body'>
+                <Icon icon='IcRedWarning' size={63} />
+                <Text as='p' size='xs'>
+                    <Localize
+                        i18n_default_text='CFDs and other financial instruments come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs and other financial instruments work and whether you can afford to take the high risk of losing your money. <0/><1/> To continue, kindly note that you would need to wait 24 hours before you can proceed further.'
+                        components={[<br key={0} />, <br key={1} />]}
+                    />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button type='button' large text={localize('OK')} primary onClick={() => setShowRiskModal(false)} />
+            </Modal.Footer>
+        </Modal>
+    );
+};
 
 export default RiskToleranceWarningModal;

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

@@ -1,9 +1,8 @@
 import { Button, Modal, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
 import React from 'react';
 
-const TestWarningModal = ({ show_risk_modal, onAccept, onDecline, set_real_account_signup_data }) => {
+const TestWarningModal = ({ show_risk_modal, onAccept, onDecline }) => {
     return (
         <Modal
             width='44rem'
@@ -25,29 +24,15 @@ const TestWarningModal = ({ show_risk_modal, onAccept, onDecline, set_real_accou
                 </Text>
             </Modal.Body>
             <Modal.Footer>
-                <Button
-                    type='button'
-                    large
-                    text={localize('Decline')}
-                    secondary
-                    onClick={() => {
-                        onDecline({ ...set_real_account_signup_data, accept_risk: 0 });
-                    }}
-                />
-                <Button
-                    type='button'
-                    large
-                    text={localize('Accept')}
-                    primary
-                    onClick={() => {
-                        onAccept({ ...set_real_account_signup_data, accept_risk: 1 });
-                    }}
-                />
+                <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 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

@@ -1,8 +1,23 @@
 import React from 'react';
 import { Modal, Text, Icon, Button } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+
+const VerifiedAccountModal = ({ onSubmit, onCancel, fetchFinancialAssessment, setCFDScore, cfd_score }) => {
+    React.useEffect(() => {
+        const fetchFinancialScore = async () => {
+            try {
+                const response = await fetchFinancialAssessment();
+                console.log('Response: ', response);
+                setCFDScore(response?.cfd_score ?? 0);
+            } catch (err) {
+                console.log('Error: ', err);
+            }
+        };
+
+        fetchFinancialScore();
+    }, []);
 
-const VerifiedAccountModal = ({ onSubmit, onCancel }) => {
     return (
         <Modal width='44rem' height='30.4rem' is_vertical_centered is_open={true} className='verified_account'>
             <Modal.Body>
@@ -22,4 +37,10 @@ const VerifiedAccountModal = ({ onSubmit, onCancel }) => {
     );
 };
 
+// export default connect(({ client }) => ({
+//     fetchFinancialAssessment: client.fetchFinancialAssessment,
+//     setCFDScore: client.setCFDScore,
+//     cfd_score: client.cfd_score,
+// }))(VerifiedAccountModal);
+
 export default VerifiedAccountModal;

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

@@ -4,6 +4,7 @@ import MT5AccountNeededModal from 'App/Components/Elements/Modals/mt5-account-ne
 import RedirectNoticeModal from 'App/Components/Elements/Modals/RedirectNotice';
 import { connect } from 'Stores/connect';
 import { moduleLoader } from '@deriv/shared';
+import { VerifiedAccountModal } from '@deriv/account';
 
 const AccountSignupModal = React.lazy(() =>
     moduleLoader(() => import(/* webpackChunkName: "account-signup-modal" */ '../AccountSignupModal'))
@@ -42,8 +43,10 @@ const AppModals = ({
     is_close_uk_account_modal_visible,
     is_eu,
     is_logged_in,
-    cfd_score,
     has_maltainvest_account,
+    fetchFinancialAssessment,
+    cfd_score,
+    setCFDScore,
 }) => {
     const url_params = new URLSearchParams(useLocation().search);
     const url_action_param = url_params.get('action');
@@ -90,9 +93,15 @@ const AppModals = ({
         ComponentToLoad = <RealityCheckModal />;
     }
 
-    if (has_maltainvest_account && cfd_score === 0) {
+    if (is_logged_in && has_maltainvest_account) {
         //TODO: Invoke Trading investment assessment modal
-        // ComponentToLoad = <RealityCheckModal />;
+        ComponentToLoad = (
+            <VerifiedAccountModal
+                fetchFinancialAssessment={fetchFinancialAssessment}
+                setCFDScore={setCFDScore}
+                cfd_score={cfd_score}
+            />
+        );
     }
 
     return (
@@ -113,6 +122,8 @@ export default connect(({ client, ui }) => ({
     is_eu: client.is_eu,
     is_logged_in: client.is_logged_in,
     is_reality_check_visible: client.is_reality_check_visible,
-    cfd_score: client.cfd_score,
     has_maltainvest_account: client.has_maltainvest_account,
+    fetchFinancialAssessment: client.fetchFinancialAssessment,
+    setCFDScore: client.setCFDScore,
+    cfd_score: client.cfd_score,
 }))(AppModals);

packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js

@@ -19,13 +19,13 @@ const shouldShowPersonalAndAddressDetailsAndCurrency = ({ real_account_signup_ta
 
 export const getItems = props => {
     return [
-        ...(shouldShowPersonalAndAddressDetailsAndCurrency(props)
-            ? [currencySelectorConfig(props, CurrencySelector)]
-            : []),
-        ...(shouldShowPersonalAndAddressDetailsAndCurrency(props)
-            ? [personalDetailsConfig(props, PersonalDetails)]
-            : []),
-        ...(shouldShowPersonalAndAddressDetailsAndCurrency(props) ? [addressDetailsConfig(props, AddressDetails)] : []),
+        // ...(shouldShowPersonalAndAddressDetailsAndCurrency(props)
+        //     ? [currencySelectorConfig(props, CurrencySelector)]
+        //     : []),
+        // ...(shouldShowPersonalAndAddressDetailsAndCurrency(props)
+        //     ? [personalDetailsConfig(props, PersonalDetails)]
+        //     : []),
+        // ...(shouldShowPersonalAndAddressDetailsAndCurrency(props) ? [addressDetailsConfig(props, AddressDetails)] : []),
         ...(shouldShowTradingAssessment(props) ? [tradingAssessmentConfig(props, TradingAssessmentNewUser)] : []),
         termsOfUseConfig(props, TermsOfUse),
     ];

packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx

@@ -189,14 +189,14 @@ const AccountWizard = props => {
     const submitForm = (payload = undefined) => {
         let clone = { ...form_values() };
         delete clone?.tax_identification_confirm; // This is a manual field and it does not require to be sent over
-
+        props.setRealAccountFormData(clone);
         if (payload) {
             clone = {
                 ...clone,
                 ...payload,
             };
         }
-        props.setRealAccountSignupData(clone);
+        console.log('Get clone: ', clone);
 
         return props.realAccountSignup(clone);
     };
@@ -238,10 +238,12 @@ const AccountWizard = props => {
 
     const createRealAccount = (payload = undefined) => {
         props.setLoading(true);
+        let form_data = { ...form_values() };
         submitForm(payload)
             .then(response => {
                 // TODO: Code for Success response
                 console.log('Response: ', response); // eslint-disable-line no-console
+                props.setShouldShowVerifiedAccount(true);
                 // props.setIsRiskWarningVisible(false);
                 // if (props.real_account_signup_target === 'maltainvest') {
                 //     props.onFinishSuccess(response.new_account_maltainvest.currency.toLowerCase());
@@ -253,22 +255,26 @@ const AccountWizard = props => {
             })
             .catch(error => {
                 // TODO: Code for Error response
+                console.log('Check data: ', form_data);
                 console.log('Error: ', error); // eslint-disable-line no-console
-
                 // if (error.code === 'show risk disclaimer') {
                 //     props.setIsRiskWarningVisible(true);
                 //     setShouldAcceptFinancialRisk(true);
                 // } else {
                 //     props.onError(error, state_items);
                 // }
-                if (error.code === 'AppropriatenessTestFailed' && payload.risk_tolerance === 'No') {
-                    props.closeRealAccountSignup();
-                    props.setShouldShowRiskToleranceWarningModal(true);
-                } else {
-                    props.closeRealAccountSignup();
+                if (error.code === 'AppropriatenessTestFailed') {
+                    if (form_data?.risk_tolerance === 'No') {
+                        props.setShouldShowRiskToleranceWarningModal(true);
+                    } else {
+                        props.setShouldShowAppropriatenessTestWarningModal(true);
+                    }
                 }
             })
-            .finally(() => props.setLoading(false));
+            .finally(() => {
+                props.closeRealAccountSignup();
+                props.setLoading(false);
+            });
     };
 
     const onAcceptRisk = () => {
@@ -286,15 +292,6 @@ const AccountWizard = props => {
         return <AcceptRiskForm onConfirm={onAcceptRisk} onClose={onDeclineRisk} />;
     }
 
-    // if (should_display_appropriateness_warning) {
-    //     return (
-    //         <RiskToleranceWarningModal
-    //             show_risk_modal={should_display_appropriateness_warning}
-    //             setShowRiskModal={setShouldDisplayAppropriatenessWarning}
-    //         />
-    //     );
-    // }
-
     if (!mounted) return null;
     if (!finished) {
         const wizard_steps = state_items.map((step, step_index) => {
@@ -359,7 +356,6 @@ AccountWizard.propTypes = {
     residence: PropTypes.string,
     residence_list: PropTypes.array,
     setShouldShowRiskToleranceWarningModal: PropTypes.func,
-    setRealAccountSignupData: PropTypes.func,
 };
 
 export default connect(({ client, notifications, ui }) => ({
@@ -381,5 +377,6 @@ export default connect(({ client, notifications, ui }) => ({
     fetchFinancialAssessment: client.fetchFinancialAssessment,
     financial_assessment: client.financial_assessment,
     setShouldShowRiskToleranceWarningModal: ui.setShouldShowRiskToleranceWarningModal,
-    setRealAccountSignupData: ui.setRealAccountSignupData,
+    setShouldShowVerifiedAccount: ui.setShouldShowVerifiedAccount,
+    setShouldShowAppropriatenessTestWarningModal: ui.setShouldShowAppropriatenessTestWarningModal,
 }))(AccountWizard);

packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx

@@ -119,11 +119,16 @@ const RealAccountSignup = ({
     setShouldShowCooldownWarningModal,
     set_should_show_verified_account,
     setShouldShowVerifiedAccount,
+    fetchFinancialAssessment,
+    cfd_score,
+    setCFDScore,
 }) => {
     const [current_action, setCurrentAction] = React.useState(null);
     const [is_loading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [is_risk_warning_visible, setIsRiskWarningVisible] = React.useState(false);
+    const [real_account_form_data, setRealAccountFormData] = React.useState({});
+    const [risk_warning_title, setRiskWarningTitle] = React.useState('');
     const [modal_content] = React.useState([
         {
             action: 'signup',
@@ -137,6 +142,7 @@ const RealAccountSignup = ({
                     onError={showErrorModal}
                     onClose={closeModal}
                     realAccountSignup={realAccountSignup}
+                    setRealAccountFormData={setRealAccountFormData}
                 />
             ),
             title: WizardHeading,
@@ -344,6 +350,8 @@ const RealAccountSignup = ({
 
     //Reset Form data
     React.useEffect(() => {
+        console.log('Comp re-rendered');
+        setRiskWarningTitle(localize('Risk Tolerance Warning'));
         return () => setRealAccountSignupData(null);
     }, []);
 
@@ -419,10 +427,10 @@ const RealAccountSignup = ({
         getActiveModalIndex()
     );
 
-    const handleOnAccept = async form_value => {
+    const handleOnAccept = async () => {
         try {
-            console.log('handleOnAccept: ', form_value);
-            // const response = await realAccountSignup(form_value);
+            console.log('handleOnAccept: ', { ...real_account_form_data });
+            const response = await realAccountSignup({ ...real_account_form_data, accept_risk: 1 });
             setShouldShowVerifiedAccount(true);
             setShouldShowAppropriatenessTestWarningModal(false);
             // TODO: Show Welcome Modal
@@ -431,14 +439,17 @@ const RealAccountSignup = ({
         }
     };
 
-    const handleOnDecline = async form_value => {
+    const handleOnDecline = async () => {
         try {
-            console.log('HandleOnDecline: ', form_value);
-            // const response = await realAccountSignup(form_value);
-            setShouldShowCooldownWarningModal(true);
-            setShouldShowAppropriatenessTestWarningModal(false);
+            console.log('HandleOnDecline: ', { ...real_account_form_data });
+            const response = await realAccountSignup({ ...real_account_form_data, accept_risk: 0 });
             // TODO: Show CoolDown Modal
         } catch (sign_up_error) {
+            setRiskWarningTitle(localize('24-hour Cool Down Warning'));
+            if (sign_up_error.code === 'AppropriatenessTestFailed') {
+                setShouldShowAppropriatenessTestWarningModal(false);
+                setShouldShowRiskToleranceWarningModal(true);
+            }
             // TODO: Handle Error case
         }
     };
@@ -449,6 +460,7 @@ const RealAccountSignup = ({
             <RiskToleranceWarningModal
                 show_risk_modal={should_show_risk_tolerance_warning_modal}
                 setShowRiskModal={setShouldShowRiskToleranceWarningModal}
+                title={risk_warning_title}
             />
         );
     } else if (should_show_appropriateness_test_warning_modal) {
@@ -473,6 +485,9 @@ const RealAccountSignup = ({
                     /*TODO: Redirect to POI */
                 }}
                 onCancel={setShouldShowVerifiedAccount}
+                fetchFinancialAssessment={fetchFinancialAssessment}
+                setCFDScore={setCFDScore}
+                cfd_score={cfd_score}
             />
         );
     }
@@ -601,4 +616,7 @@ export default connect(({ ui, client, common, modules }) => ({
     setShouldShowCooldownWarningModal: ui.setShouldShowCooldownWarningModal,
     set_should_show_verified_account: ui.set_should_show_verified_account,
     setShouldShowVerifiedAccount: ui.setShouldShowVerifiedAccount,
+    fetchFinancialAssessment: client.fetchFinancialAssessment,
+    setCFDScore: client.setCFDScore,
+    cfd_score: client.cfd_score,
 }))(withRouter(RealAccountSignup));