Merge pull request #129 from mayuran-deriv/mayuran/new-pop-up-trading

[BOT]/Mayuran/BOT-2370/new pop up trading

src/app/app-root.tsx

@@ -2,6 +2,7 @@ import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import ErrorBoundary from '@/components/error-component/error-boundary';
 import ErrorComponent from '@/components/error-component/error-component';
+import TradingAssesmentModal from '@/components/trading-assesment-modal';
 import { api_base } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
 import { localize } from '@deriv-com/translations';
@@ -62,6 +63,7 @@ const AppRoot = () => {
             <ErrorBoundary root_store={store}>
                 <ErrorComponentWrapper />
                 <AppContent />
+                <TradingAssesmentModal />
             </ErrorBoundary>
         </Suspense>
     );

src/components/shared_ui/modal/modal.scss

@@ -15,6 +15,18 @@
         background-color: var(--general-main-2);
         box-shadow: 0 4px 6px 0 var(--shadow-menu);
 
+        &_trade-modal-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+                .currency-icon {
+                    display: flex;
+                    justify-content: center;
+                    margin-bottom: 4rem;
+                }
+
+        }
+
         &--is-vertical-centered {
             position: absolute;
             top: 50vh;

src/components/trading-assesment-modal/index.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import Button from '@/components/shared_ui/button';
+import Modal from '@/components/shared_ui/modal';
+import Text from '@/components/shared_ui/text';
+import { useStore } from '@/hooks/useStore';
+import { Icon } from '@/utils/tmp/dummy';
+import { Localize, localize } from '@deriv-com/translations';
+import { ContentFlag } from '../shared';
+
+const TradingAssesmentModal: React.FC = observer(() => {
+    const store = useStore();
+    const { client, ui } = store;
+
+    const { is_trading_experience_incomplete, content_flag, is_logged_in, accounts, loginid } = client;
+
+    const { is_trading_assessment_for_new_user_enabled } = ui;
+
+    const should_show_trading_assessment_existing_user_form = useMemo(() => {
+        return (
+            is_logged_in &&
+            accounts?.[loginid]?.landing_company_name === 'maltainvest' &&
+            !is_trading_assessment_for_new_user_enabled &&
+            is_trading_experience_incomplete &&
+            content_flag !== ContentFlag.LOW_RISK_CR_EU &&
+            content_flag !== ContentFlag.LOW_RISK_CR_NON_EU
+        );
+    }, [
+        is_logged_in,
+        is_trading_assessment_for_new_user_enabled,
+        is_trading_experience_incomplete,
+        content_flag,
+        accounts,
+        loginid,
+    ]);
+    return (
+        <Modal
+            is_open={should_show_trading_assessment_existing_user_form || false}
+            width='44rem'
+            className='trade-modal-wrapper'
+        >
+            <Modal.Body>
+                <Icon icon={'ic-currency-eur-check'} className='currency-icon' size={95} />
+                <Text as='p' align='center' weight='bold' className='verified-account__text'>
+                    <Localize i18n_default_text='Trading Experience Assessment<0/>' components={[<br key={0} />]} />
+                </Text>
+                <Text as='p' size='xs' align='center'>
+                    <Localize
+                        i18n_default_text='As per our regulatory obligations, we are required to assess your trading knowledge and experience.<0/><0/>Please click ‘OK’ to continue'
+                        components={[<br key={0} />]}
+                    />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button
+                    type='button'
+                    large
+                    text={localize('OK')}
+                    primary
+                    onClick={() => {
+                        window.location.assign('https://app.deriv.com/account/trading-assessment');
+                    }}
+                />
+            </Modal.Footer>
+        </Modal>
+    );
+});
+
+export default TradingAssesmentModal;

src/stores/client-store.ts

@@ -68,6 +68,7 @@ export default class ClientStore {
             setLoginId: action,
             setWebsiteStatus: action,
             setUpgradeableLandingCompanies: action,
+            is_trading_experience_incomplete: computed,
             is_cr_account: computed,
         });
     }
@@ -85,6 +86,9 @@ export default class ClientStore {
     get is_bot_allowed() {
         return this.isBotAllowed();
     }
+    get is_trading_experience_incomplete() {
+        return this.account_status?.status?.some(status => status === 'trading_experience_not_complete');
+    }
 
     get is_eu() {
         if (!this.landing_companies) return false;

src/stores/ui-store.ts

@@ -8,6 +8,7 @@ export default class UiStore {
     is_dark_mode_on = localStorage.getItem('theme') === 'dark';
     account_switcher_disabled_message = '';
     show_prompt = false;
+    is_trading_assessment_for_new_user_enabled = false;
 
     // TODO: fix - need to implement this feature
     is_onscreen_keyboard_active = false;
@@ -24,6 +25,8 @@ export default class UiStore {
             setDevice: action,
             setAccountSwitcherDisabledMessage: action,
             setPromptHandler: action,
+            setIsTradingAssessmentForNewUserEnabled: action.bound,
+            is_trading_assessment_for_new_user_enabled: observable,
         });
     }
 
@@ -38,6 +41,9 @@ export default class UiStore {
             this.account_switcher_disabled_message = '';
         }
     };
+    setIsTradingAssessmentForNewUserEnabled(value: boolean) {
+        this.is_trading_assessment_for_new_user_enabled = value;
+    }
 
     setDarkMode = (value: boolean) => {
         this.is_dark_mode_on = value;