diff --git a/public/assets/icons/ic-currency-eur-check.svg b/public/assets/icons/ic-currency-eur-check.svg
new file mode 100644
index 00000000..4bdbb38e
--- /dev/null
+++ b/public/assets/icons/ic-currency-eur-check.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/app-root.tsx b/src/app/app-root.tsx
index cc80f567..2b47fc6d 100644
--- a/src/app/app-root.tsx
+++ b/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 = () => {
+
);
diff --git a/src/components/shared_ui/modal/modal.scss b/src/components/shared_ui/modal/modal.scss
index 35e66d8a..d17909e4 100644
--- a/src/components/shared_ui/modal/modal.scss
+++ b/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;
diff --git a/src/components/trading-assesment-modal/index.tsx b/src/components/trading-assesment-modal/index.tsx
new file mode 100644
index 00000000..c777a6d2
--- /dev/null
+++ b/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 (
+
+
+
+
+ ]} />
+
+
+ ]}
+ />
+
+
+
+
+
+ );
+});
+
+export default TradingAssesmentModal;
diff --git a/src/stores/client-store.ts b/src/stores/client-store.ts
index e4392c7d..697068f1 100644
--- a/src/stores/client-store.ts
+++ b/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;
diff --git a/src/stores/ui-store.ts b/src/stores/ui-store.ts
index 874f7da4..c2d485de 100644
--- a/src/stores/ui-store.ts
+++ b/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;