diff --git a/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx b/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx new file mode 100644 index 000000000000..c5eb2ecea2a8 --- /dev/null +++ b/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import AfterSignupFlow from '../after-signup-flow'; +import { render } from '@testing-library/react'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import { useContentFlag, useGrowthbookGetFeatureValue } from '@deriv/hooks'; + +jest.mock('@deriv/hooks', () => ({ + ...jest.requireActual('@deriv/hooks'), + useContentFlag: jest.fn(() => ({ is_cr_demo: true, is_eu_demo: false })), + useGrowthbookGetFeatureValue: jest.fn(() => [false, true]), +})); + +describe('AfterSignupFlow', () => { + const mockedOpenRealAccountSignup = jest.fn(); + const mockedSetIsFromSignupAccount = jest.fn(); + const mockedSetIsSetupRealAccountOrGoToDemoModalVisible = jest.fn(); + + const mockDefault = mockStore({ + client: { + is_logged_in: true, + has_active_real_account: false, + }, + ui: { + is_from_signup_account: true, + openRealAccountSignup: mockedOpenRealAccountSignup, + setIsFromSignupAccount: mockedSetIsFromSignupAccount, + }, + traders_hub: { + setIsSetupRealAccountOrGoToDemoModalVisible: mockedSetIsSetupRealAccountOrGoToDemoModalVisible, + }, + }); + + const wrapper = (mock: ReturnType = mockDefault) => { + const Component = ({ children }: { children: JSX.Element }) => ( + {children} + ); + return Component; + }; + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('check if growthbook feature flags are false', () => { + (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValue([false, true]); + + render(, { + wrapper: wrapper(), + }); + + expect(mockedOpenRealAccountSignup).not.toBeCalled(); + expect(mockedSetIsFromSignupAccount).not.toBeCalled(); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).not.toBeCalled(); + }); + + it('check if growthbook feature flags "direct-real-account-creation-flow" is true for is_cr_demo = true', () => { + (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValueOnce([true, true]); + (useContentFlag as jest.Mock).mockReturnValue({ is_cr_demo: true, is_eu_demo: false }); + + render(, { + wrapper: wrapper(), + }); + + expect(mockedOpenRealAccountSignup).toBeCalled(); + expect(mockedSetIsFromSignupAccount).toBeCalled(); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).not.toBeCalled(); + }); + + it('check if growthbook feature flags "direct-real-account-creation-flow" is true for is_eu_demo = true', () => { + (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValueOnce([true, true]); + (useContentFlag as jest.Mock).mockReturnValue({ is_cr_demo: false, is_eu_demo: true }); + + render(, { + wrapper: wrapper(), + }); + + expect(mockedOpenRealAccountSignup).toBeCalled(); + expect(mockedSetIsFromSignupAccount).toBeCalled(); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).not.toBeCalled(); + }); + + it('check if growthbook feature flags "show_setup_real_or_go_demo" is true', () => { + (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValueOnce([false, true]); + (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValueOnce([true, true]); + + render(, { + wrapper: wrapper(), + }); + + expect(mockedOpenRealAccountSignup).not.toBeCalled(); + expect(mockedSetIsFromSignupAccount).toBeCalled(); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalled(); + }); +}); diff --git a/packages/appstore/src/components/after-signup-flow/after-signup-flow.tsx b/packages/appstore/src/components/after-signup-flow/after-signup-flow.tsx new file mode 100644 index 000000000000..3aa8a77474d2 --- /dev/null +++ b/packages/appstore/src/components/after-signup-flow/after-signup-flow.tsx @@ -0,0 +1,57 @@ +import React, { useEffect } from 'react'; +import { useContentFlag, useGrowthbookGetFeatureValue } from '@deriv/hooks'; +import { observer, useStore } from '@deriv/stores'; +import { Jurisdiction } from '@deriv/shared'; + +const AfterSignupFlow = observer(() => { + const { client, ui, traders_hub } = useStore(); + const { openRealAccountSignup, is_from_signup_account, setIsFromSignupAccount } = ui; + const { is_logged_in, has_active_real_account } = client; + const { setIsSetupRealAccountOrGoToDemoModalVisible } = traders_hub; + + const { is_cr_demo, is_eu_demo } = useContentFlag(); + + const [direct_to_real_account_creation] = useGrowthbookGetFeatureValue({ + featureFlag: 'direct-real-account-creation-flow', + defaultValue: false, + }); + + const [show_setup_real_or_go_demo] = useGrowthbookGetFeatureValue({ + featureFlag: 'show_setup_real_or_go_demo', + defaultValue: false, + }); + + useEffect(() => { + if (!has_active_real_account && is_from_signup_account && is_logged_in) { + // move the user directly to setup real account + if (direct_to_real_account_creation && !show_setup_real_or_go_demo) { + if (is_cr_demo) { + openRealAccountSignup(Jurisdiction.SVG); + setIsFromSignupAccount(false); + } else if (is_eu_demo) { + openRealAccountSignup(Jurisdiction.MALTA_INVEST); + setIsFromSignupAccount(false); + } + } + + // show setup real or go to demo modal for user + if (!direct_to_real_account_creation && show_setup_real_or_go_demo) { + setIsSetupRealAccountOrGoToDemoModalVisible(true); + setIsFromSignupAccount(false); + } + } + }, [ + is_cr_demo, + is_eu_demo, + has_active_real_account, + is_from_signup_account, + is_logged_in, + direct_to_real_account_creation, + openRealAccountSignup, + setIsFromSignupAccount, + ]); + + return null; +}); + +export default AfterSignupFlow; diff --git a/packages/appstore/src/components/after-signup-flow/index.ts b/packages/appstore/src/components/after-signup-flow/index.ts new file mode 100644 index 000000000000..8c5b9c5d85d0 --- /dev/null +++ b/packages/appstore/src/components/after-signup-flow/index.ts @@ -0,0 +1,3 @@ +import AfterSignupFlow from './after-signup-flow'; + +export default AfterSignupFlow; diff --git a/packages/appstore/src/components/app.scss b/packages/appstore/src/components/app.scss index e35fda25eefd..ff1c99927009 100644 --- a/packages/appstore/src/components/app.scss +++ b/packages/appstore/src/components/app.scss @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap'); + .dashboard { @include desktop-screen { height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT}); diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx index dbba5d70699e..4d50c27b99b4 100644 --- a/packages/appstore/src/components/modals/modal-manager.tsx +++ b/packages/appstore/src/components/modals/modal-manager.tsx @@ -168,6 +168,17 @@ const CTraderTransferModal = makeLazyLoader( () => )(); +const SetupRealAccountOrGoToDemoModal = makeLazyLoader( + () => + moduleLoader( + () => + import( + /* webpackChunkName: "modal_setup-real-account-or-go-to-demo" */ './setup-real-account-or-go-to-demo-modal' + ) + ), + () => +)(); + type TCurrentList = DetailsOfEachMT5Loginid & { enabled: number; }; @@ -221,6 +232,7 @@ const ModalManager = () => { is_failed_verification_modal_visible, is_regulators_compare_modal_visible, is_wallet_migration_failed, + is_setup_real_account_or_go_to_demo_modal_visible, } = traders_hub; const [password_manager, setPasswordManager] = React.useState<{ @@ -351,6 +363,7 @@ const ModalManager = () => { {(is_eligible || is_real_wallets_upgrade_on || is_in_progress) && } )} + {is_setup_real_account_or_go_to_demo_modal_visible && } ); }; diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx new file mode 100644 index 000000000000..03574635a65d --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx @@ -0,0 +1,148 @@ +import React from 'react'; +import { SetupRealAccountOrGoToDemoModalContent } from '../setup-real-account-or-go-to-demo-modal-content'; +import { render, screen } from '@testing-library/react'; +import { Analytics } from '@deriv-com/analytics'; +import { useContentFlag } from '@deriv/hooks'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import userEvent from '@testing-library/user-event'; +import { Jurisdiction } from '@deriv/shared'; + +jest.mock('@deriv/hooks', () => ({ + ...jest.requireActual('@deriv/hooks'), + useContentFlag: jest.fn(() => ({ is_cr_demo: true, is_eu_demo: false })), +})); + +jest.mock('@deriv-com/analytics', () => ({ + ...jest.requireActual('@deriv-com/analytics'), + Analytics: { + trackEvent: jest.fn(), + }, +})); + +describe('SetupRealAccountOrGoToDemoModalContent', () => { + const mockedOpenRealAccountSignup = jest.fn(); + const mockedSetIsFromSignupAccount = jest.fn(); + const mockedSetIsSetupRealAccountOrGoToDemoModalVisible = jest.fn(); + const mockTrack = Analytics.trackEvent; + + const mockDefault = mockStore({ + ui: { + is_from_signup_account: true, + openRealAccountSignup: mockedOpenRealAccountSignup, + setIsFromSignupAccount: mockedSetIsFromSignupAccount, + }, + traders_hub: { + is_setup_real_account_or_go_to_demo_modal_visible: true, + setIsSetupRealAccountOrGoToDemoModalVisible: mockedSetIsSetupRealAccountOrGoToDemoModalVisible, + }, + }); + + const wrapper = (mock: ReturnType = mockDefault) => { + const Component = ({ children }: { children: JSX.Element }) => ( + {children} + ); + return Component; + }; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('Should render correctly in desktop', () => { + const { container } = render(, { + wrapper: wrapper(), + }); + + const title = screen.getByText(/start your trading journey/i); + + expect(container).toBeInTheDocument(); + expect(title).toBeInTheDocument(); + }); + + it('Should render correctly in responsive', () => { + const { container } = render(, { + wrapper: wrapper(), + }); + + const title = screen.getByText(/start your trading journey/i); + + expect(container).toBeInTheDocument(); + expect(title).toBeInTheDocument(); + }); + + it('User click "setup real account" button when is_cr_demo = true', () => { + (useContentFlag as jest.Mock).mockReturnValue({ is_cr_demo: true, is_eu_demo: false }); + + const { container } = render(, { + wrapper: wrapper(), + }); + + const setup_btn = screen.getByRole('button', { + name: /set up your real account/i, + }); + + expect(container).toBeInTheDocument(); + + userEvent.click(setup_btn); + + expect(mockTrack).toBeCalledTimes(1); + + expect(mockedOpenRealAccountSignup).toBeCalledTimes(1); + expect(mockedOpenRealAccountSignup).toBeCalledWith(Jurisdiction.SVG); + + expect(mockedSetIsFromSignupAccount).toBeCalledTimes(1); + expect(mockedSetIsFromSignupAccount).toBeCalledWith(false); + + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledTimes(1); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledWith(false); + }); + + it('User click "setup real account" button when is_eu_demo = true', () => { + (useContentFlag as jest.Mock).mockReturnValue({ is_cr_demo: false, is_eu_demo: true }); + + const { container } = render(, { + wrapper: wrapper(), + }); + + const setup_btn = screen.getByRole('button', { + name: /set up your real account/i, + }); + + expect(container).toBeInTheDocument(); + + userEvent.click(setup_btn); + + expect(mockTrack).toBeCalledTimes(1); + + expect(mockedOpenRealAccountSignup).toBeCalledTimes(1); + expect(mockedOpenRealAccountSignup).toBeCalledWith(Jurisdiction.MALTA_INVEST); + + expect(mockedSetIsFromSignupAccount).toBeCalledTimes(1); + expect(mockedSetIsFromSignupAccount).toBeCalledWith(false); + + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledTimes(1); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledWith(false); + }); + + it('User click "take me to demo" button', () => { + const { container } = render(, { + wrapper: wrapper(), + }); + + const demo_btn = screen.getByRole('button', { + name: /take me to demo/i, + }); + + expect(container).toBeInTheDocument(); + + userEvent.click(demo_btn); + + expect(mockTrack).toBeCalledTimes(1); + + expect(mockedSetIsFromSignupAccount).toBeCalledTimes(1); + expect(mockedSetIsFromSignupAccount).toBeCalledWith(false); + + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledTimes(1); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledWith(false); + }); +}); diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal.spec.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal.spec.tsx new file mode 100644 index 000000000000..4afb3380862f --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal.spec.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import SetupRealAccountOrGoToDemoModal from '../setup-real-account-or-go-to-demo-modal'; +import { render, screen } from '@testing-library/react'; +import { Analytics } from '@deriv-com/analytics'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import { useDevice } from '@deriv-com/ui'; + +jest.mock('@deriv-com/ui', () => ({ + useDevice: jest.fn(() => ({ isMobile: false })), +})); + +jest.mock('@deriv-com/analytics', () => ({ + ...jest.requireActual('@deriv-com/analytics'), + Analytics: { + trackEvent: jest.fn(), + }, +})); + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + Modal: jest.fn(() =>
desktop modal
), + MobileDialog: jest.fn(() =>
responsive modal
), +})); + +jest.mock('../setup-real-account-or-go-to-demo-modal-content', () => ({ + __esModule: true, + default: () => undefined, + SetupRealAccountOrGoToDemoModalContent: () => 'Content', +})); + +describe('SetupRealAccountOrGoToDemoModal', () => { + const mockDefault = mockStore({}); + + const wrapper = (mock: ReturnType = mockDefault) => { + const Component = ({ children }: { children: JSX.Element }) => ( + {children} + ); + return Component; + }; + + it('should render correctly in desktop', () => { + const { container } = render(, { + wrapper: wrapper(), + }); + + expect(container).toBeInTheDocument(); + expect(screen.getByText(/desktop modal/i)).toBeInTheDocument(); + }); + + it('should render correctly in responsive', () => { + (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true }); + + const { container } = render(, { + wrapper: wrapper(), + }); + + expect(container).toBeInTheDocument(); + expect(screen.getByText(/responsive modal/i)).toBeInTheDocument(); + }); + + it('Analytics should be called one time if "is_setup_real_account_or_go_to_demo_modal_visible" = true', () => { + const mock = mockStore({ traders_hub: { is_setup_real_account_or_go_to_demo_modal_visible: true } }); + + const mockTrack = Analytics.trackEvent; + + render(, { + wrapper: wrapper(mock), + }); + + expect(mockTrack).toBeCalledTimes(1); + }); +}); diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/index.ts b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/index.ts new file mode 100644 index 000000000000..500309362987 --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/index.ts @@ -0,0 +1,3 @@ +import SetupRealAccountOrGoToDemoModal from './setup-real-account-or-go-to-demo-modal'; + +export default SetupRealAccountOrGoToDemoModal; diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx new file mode 100644 index 000000000000..90f85d287c71 --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { Analytics } from '@deriv-com/analytics'; +import { observer, useStore } from '@deriv/stores'; +import { Localize } from '@deriv/translations'; +import { Button, Icon, Text } from '@deriv/components'; +import { useContentFlag } from '@deriv/hooks'; +import { Jurisdiction } from '@deriv/shared'; + +type TModalContent = { + is_responsive?: boolean; +}; + +export const SetupRealAccountOrGoToDemoModalContent = observer(({ is_responsive = false }: TModalContent) => { + const { ui, traders_hub } = useStore(); + const { openRealAccountSignup, setIsFromSignupAccount } = ui; + const { setIsSetupRealAccountOrGoToDemoModalVisible } = traders_hub; + + const { is_cr_demo, is_eu_demo } = useContentFlag(); + + const onSetupRealAccountButtonClick = () => { + Analytics.trackEvent('ce_tradershub_popup', { + // @ts-expect-error 'click_download' property is changed to 'click_cta' + action: 'click_cta', + form_name: 'traders_hub_default', + account_mode: 'demo', + popup_name: 'setup_real_or_go_demo', + popup_type: 'with_cta', + // 'cta_name' property type will be added later + cta_name: 'setup_real', + }); + + setIsSetupRealAccountOrGoToDemoModalVisible(false); + + if (is_cr_demo) { + openRealAccountSignup(Jurisdiction.SVG); + setIsFromSignupAccount(false); + } else if (is_eu_demo) { + openRealAccountSignup(Jurisdiction.MALTA_INVEST); + setIsFromSignupAccount(false); + } + }; + + const onToDemoButtonClick = () => { + Analytics.trackEvent('ce_tradershub_popup', { + // @ts-expect-error 'click_download' property type is changed to 'click_cta' + action: 'click_cta', + form_name: 'traders_hub_default', + account_mode: 'demo', + popup_name: 'setup_real_or_go_demo', + popup_type: 'with_cta', + // 'cta_name' property type will be added later + cta_name: 'go_demo', + }); + + setIsFromSignupAccount(false); + setIsSetupRealAccountOrGoToDemoModalVisible(false); + }; + + return ( +
+ + + + +
+ + +
+
+ ); +}); diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss new file mode 100644 index 000000000000..b1f1a8a8204b --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss @@ -0,0 +1,43 @@ +.setup-real-account-or-go-to-demo-modal { + display: flex; + flex-direction: column; + align-items: center; + padding: 2.4rem; + + @include mobile-screen { + padding: 1.6rem; + width: 100%; + } + + &__responsive-header { + border-bottom: unset; + } + + &__title { + font-family: 'Ubuntu', sans-serif; + margin-block-start: 2.4rem; + + @include mobile-screen { + margin-block-start: 1.6rem; + } + } + + &__buttons { + display: flex; + flex-direction: column; + gap: 0.8rem; + margin-block-start: 2.4rem; + width: 100%; + + @include mobile-screen { + margin-block-start: 4rem; + } + } +} + +.dc-mobile-dialog__setup-real-account-or-go-to-demo-modal__responsive-wrapper { + height: calc(100% - 2 * $MOBILE_HEADER_HEIGHT) !important; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx new file mode 100644 index 000000000000..77b34aeadf1b --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx @@ -0,0 +1,48 @@ +import React, { Fragment, useEffect } from 'react'; +import { Analytics } from '@deriv-com/analytics'; +import { useDevice } from '@deriv-com/ui'; +import { observer, useStore } from '@deriv/stores'; +import { Modal, MobileDialog } from '@deriv/components'; +import { SetupRealAccountOrGoToDemoModalContent } from './setup-real-account-or-go-to-demo-modal-content'; +import './setup-real-account-or-go-to-demo-modal.scss'; + +const SetupRealAccountOrGoToDemoModal = observer(() => { + const { isMobile } = useDevice(); + const { traders_hub } = useStore(); + const { is_setup_real_account_or_go_to_demo_modal_visible } = traders_hub; + + useEffect(() => { + if (is_setup_real_account_or_go_to_demo_modal_visible) { + Analytics.trackEvent('ce_tradershub_popup', { + action: 'open', + form_name: 'traders_hub_default', + account_mode: 'demo', + popup_name: 'setup_real_or_go_demo', + popup_type: 'with_cta', + }); + } + }, [is_setup_real_account_or_go_to_demo_modal_visible]); + + return ( + + {isMobile ? ( + + + + ) : ( + + + + )} + + ); +}); + +export default SetupRealAccountOrGoToDemoModal; diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx index 718df1476b81..6f1d1ec74ddc 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -9,6 +9,7 @@ import ModalManager from 'Components/modals/modal-manager'; import MainTitleBar from 'Components/main-title-bar'; import OptionsAndMultipliersListing from 'Components/options-multipliers-listing'; import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader'; +import AfterSignupFlow from 'Components/after-signup-flow'; import { useContentFlag, useGrowthbookGetFeatureValue } from '@deriv/hooks'; import classNames from 'classnames'; import './traders-hub.scss'; @@ -43,12 +44,7 @@ const OrderedPlatformSections = observer( const TradersHub = observer(() => { const { isDesktop } = useDevice(); const { traders_hub, client, ui } = useStore(); - const { - notification_messages_ui: Notifications, - openRealAccountSignup, - is_from_signup_account, - setIsFromSignupAccount, - } = ui; + const { notification_messages_ui: Notifications } = ui; const { is_landing_company_loaded, is_logged_in, @@ -56,13 +52,12 @@ const TradersHub = observer(() => { is_logging_in, is_account_setting_loaded, is_mt5_allowed, - has_active_real_account, website_status, has_any_real_account, is_eu, } = client; - const { is_cr_demo, is_eu_demo, is_eu_real } = useContentFlag(); + const { is_eu_demo, is_eu_real } = useContentFlag(); const { selected_platform_type, setTogglePlatformType, is_eu_user } = traders_hub; const traders_hub_ref = React.useRef(null); @@ -70,36 +65,11 @@ const TradersHub = observer(() => { (!is_switching && !is_logging_in && is_account_setting_loaded && is_landing_company_loaded) || checkServerMaintenance(website_status); - const [direct_to_real_account_creation] = useGrowthbookGetFeatureValue({ - featureFlag: 'direct-real-account-creation-flow', - defaultValue: false, - }); - React.useEffect(() => { if (is_eu_user) { setTogglePlatformType('cfd'); } - if (!has_active_real_account && is_from_signup_account && is_logged_in) { - if (direct_to_real_account_creation && is_cr_demo) { - openRealAccountSignup('svg'); - setIsFromSignupAccount(false); - } else if (is_eu_demo) { - openRealAccountSignup('maltainvest'); - setIsFromSignupAccount(false); - } - } - }, [ - is_cr_demo, - is_eu_demo, - has_active_real_account, - is_eu_user, - is_from_signup_account, - is_logged_in, - direct_to_real_account_creation, - openRealAccountSignup, - setIsFromSignupAccount, - setTogglePlatformType, - ]); + }, [is_eu_user, setTogglePlatformType]); React.useEffect(() => { if (is_eu_user) setTogglePlatformType('cfd'); @@ -180,6 +150,7 @@ const TradersHub = observer(() => { return ( + {can_show_notify && }
\ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index 4b7471be4457..fe5b53669902 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -1,5 +1,6 @@ // auto-generated file. DO NOT MODIFY. +import './appstore/ic-appstore-account.svg'; import './appstore/ic-appstore-add-rounded.svg'; import './appstore/ic-appstore-add-square.svg'; import './appstore/ic-appstore-add.svg'; diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx index 139c94675db1..3e53db9973da 100644 --- a/packages/core/src/App/Containers/Modals/app-modals.jsx +++ b/packages/core/src/App/Containers/Modals/app-modals.jsx @@ -89,7 +89,7 @@ const AppModals = observer(() => { is_trading_experience_incomplete, should_show_effortless_login_modal, } = client; - const { content_flag } = traders_hub; + const { content_flag, is_setup_real_account_or_go_to_demo_modal_visible } = traders_hub; const { is_from_derivgo } = common; const { is_account_needed_modal_on, @@ -142,7 +142,8 @@ const AppModals = observer(() => { !should_show_appropriateness_warning_modal && !should_show_risk_warning_modal && !is_from_signup_account && - !is_real_acc_signup_on; + !is_real_acc_signup_on && + !is_setup_real_account_or_go_to_demo_modal_visible; const should_show_trading_assessment_existing_user_form = is_logged_in && diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index 3bb639260a38..0402f27da23b 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -42,6 +42,7 @@ export default class TradersHubStore extends BaseStore { active_modal_wallet_id; is_cfd_restricted_country = false; is_financial_restricted_country = false; + is_setup_real_account_or_go_to_demo_modal_visible = false; constructor(root_store) { const local_storage_properties = [ @@ -79,6 +80,7 @@ export default class TradersHubStore extends BaseStore { is_wallet_migration_failed: observable, is_cfd_restricted_country: observable, is_financial_restricted_country: observable, + is_setup_real_account_or_go_to_demo_modal_visible: observable, closeModal: action.bound, content_flag: computed, getAccount: action.bound, @@ -124,6 +126,7 @@ export default class TradersHubStore extends BaseStore { toggleWalletsUpgrade: action.bound, setWalletsMigrationFailedPopup: action.bound, cleanup: action.bound, + setIsSetupRealAccountOrGoToDemoModalVisible: action.bound, }); reaction( @@ -861,4 +864,8 @@ export default class TradersHubStore extends BaseStore { this.available_platforms = []; } } + + setIsSetupRealAccountOrGoToDemoModalVisible(value) { + this.is_setup_real_account_or_go_to_demo_modal_visible = value; + } } diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index 6915385f96ff..cd1f6c164721 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -549,6 +549,8 @@ const mock = (): TStores & { is_mock: boolean } => { startTrade: jest.fn(), showTopUpModal: jest.fn(), is_regulators_compare_modal_visible: false, + is_setup_real_account_or_go_to_demo_modal_visible: false, + setIsSetupRealAccountOrGoToDemoModalVisible: jest.fn(), }, notifications: { addNotificationMessage: jest.fn(), diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 1485da396eb3..d762ab07cf3a 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -1109,6 +1109,8 @@ type TTradersHubStore = { getAccount: () => void; showTopUpModal: (existing_account?: DetailsOfEachMT5Loginid) => void; is_regulators_compare_modal_visible: boolean; + is_setup_real_account_or_go_to_demo_modal_visible: boolean; + setIsSetupRealAccountOrGoToDemoModalVisible: (value: boolean) => void; }; type TContractReplay = {