Merge pull request #44 from amina-deriv/amina/wall-810/user_skip_acco…

…unt_creation Amina/fix: onboarding skip flow
amina-deriv · Jun 14, 2023 · 7f84017 · 7f84017
2 parents 57007f3 + 73c29e3
commit 7f84017
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git a/packages/appstore/src/modules/onboarding/onboarding.tsx b/packages/appstore/src/modules/onboarding/onboarding.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { localize } from '@deriv/translations';
+import { useHasActiveRealAccount } from '@deriv/hooks';
 import { isMobile, isDesktop, routes, ContentFlag } from '@deriv/shared';
 import { Button, Text, Icon, ProgressBarOnboarding } from '@deriv/components';
 import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
@@ -30,8 +31,9 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
     const { traders_hub, client, ui } = useStores();
     const { toggleIsTourOpen, selectAccountType, is_demo_low_risk, content_flag } = traders_hub;
     const { is_eu_country, is_logged_in, is_landing_company_loaded, prev_account_type, setPrevAccountType } = client;
-    const { setIsFromSignupAccount } = ui;
+    const { is_from_signup_account } = ui;
     const [step, setStep] = React.useState<number>(1);
+    const has_active_real_account = useHasActiveRealAccount();
 
     const prevStep = () => {
         if (step > 1) setStep(step - 1);
@@ -52,16 +54,18 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
     const handleCloseButton = async () => {
         toggleIsTourOpen(false);
         history.push(routes.traders_hub);
-        await selectAccountType(prev_account_type);
+        if (has_active_real_account) {
+            await selectAccountType(prev_account_type);
+        } else {
+            await selectAccountType('demo');
+        }
     };
 
     const eu_user =
         content_flag === ContentFlag.LOW_RISK_CR_EU ||
         content_flag === ContentFlag.EU_REAL ||
         content_flag === ContentFlag.EU_DEMO;
 
-    const eu_user_closed_real_account_first_time =
-        localStorage.getItem('eu_user_closed_real_account_first_time') || false;
     const is_eu_user = (is_logged_in && eu_user) || (!is_logged_in && is_eu_country);
     const onboarding_step = number_of_steps[step - 1];
 
@@ -79,8 +83,7 @@ const Onboarding = ({ contents = getTradingHubContents() }: TOnboardingProps) =>
         return <EmptyOnboarding />;
     }
 
-    if (is_logged_in && !eu_user_closed_real_account_first_time) {
-        setIsFromSignupAccount(true);
+    if (is_logged_in && is_from_signup_account && is_eu_user) {
         history.push(routes.traders_hub);
     }
 

diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx
@@ -7,7 +7,7 @@ import TourGuide from 'Modules/tour-guide/tour-guide';
 import OptionsAndMultipliersListing from 'Components/options-multipliers-listing';
 import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader';
 import { useStores } from 'Stores/index';
-import { isDesktop, routes, ContentFlag, LocalStore } from '@deriv/shared';
+import { isDesktop, routes, ContentFlag } from '@deriv/shared';
 import { DesktopWrapper, MobileWrapper, ButtonToggle, Div100vhContainer, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import classNames from 'classnames';
@@ -16,7 +16,13 @@ import './traders-hub.scss';
 
 const TradersHub = () => {
     const { traders_hub, client, ui } = useStores();
-    const { notification_messages_ui: Notifications, openRealAccountSignup, is_from_signup_account, is_mobile } = ui;
+    const {
+        notification_messages_ui: Notifications,
+        openRealAccountSignup,
+        is_from_signup_account,
+        is_mobile,
+        setIsFromSignupAccount,
+    } = ui;
     const {
         is_landing_company_loaded,
         is_logged_in,
@@ -28,7 +34,6 @@ const TradersHub = () => {
     const { selected_platform_type, setTogglePlatformType, is_tour_open, content_flag, is_eu_user } = traders_hub;
     const traders_hub_ref = React.useRef<HTMLDivElement>(null);
 
-    const eu_user_closed_real_account_first_time = LocalStore.get('eu_user_closed_real_account_first_time');
     const can_show_notify = !is_switching && !is_logging_in && is_account_setting_loaded && is_landing_company_loaded;
 
     const [scrolled, setScrolled] = React.useState(false);
@@ -45,13 +50,10 @@ const TradersHub = () => {
             !has_active_real_account &&
             is_logged_in &&
             is_from_signup_account &&
-            !eu_user_closed_real_account_first_time
+            content_flag === ContentFlag.EU_DEMO
         ) {
-            if (is_eu_user) {
-                openRealAccountSignup('maltainvest');
-            } else {
-                openRealAccountSignup('svg');
-            }
+            openRealAccountSignup('maltainvest');
+            setIsFromSignupAccount(false);
         }
     }, []);
 

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -13,7 +13,14 @@ import CitizenshipForm from '../CitizenshipModal/set-citizenship-form.jsx';
 import 'Sass/app/modules/account-signup.scss';
 import validateSignupFields from './validate-signup-fields.jsx';
 
-const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, residence_list }) => {
+const AccountSignup = ({
+    enableApp,
+    isModalVisible,
+    clients_country,
+    onSignup,
+    residence_list,
+    setIsFromSignupAccount,
+}) => {
     const signupInitialValues = { citizenship: '', password: '', residence: '' };
     const { is_appstore } = React.useContext(PlatformContext);
     const [api_error, setApiError] = React.useState(false);
@@ -62,6 +69,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
             setApiError(error);
         } else {
             isModalVisible(false);
+            setIsFromSignupAccount(true);
             enableApp();
         }
     };
@@ -157,6 +165,7 @@ AccountSignup.propTypes = {
     onSignup: PropTypes.func,
     residence_list: PropTypes.array,
     isModalVisible: PropTypes.func,
+    setIsFromSignupAccount: PropTypes.func,
 };
 
 const AccountSignupModal = ({
@@ -170,6 +179,7 @@ const AccountSignupModal = ({
     onSignup,
     residence_list,
     toggleAccountSignupModal,
+    setIsFromSignupAccount,
 }) => {
     React.useEffect(() => {
         // a logged in user should not be able to create a new account
@@ -193,6 +203,7 @@ const AccountSignupModal = ({
                 residence_list={residence_list}
                 isModalVisible={toggleAccountSignupModal}
                 enableApp={enableApp}
+                setIsFromSignupAccount={setIsFromSignupAccount}
             />
         </Dialog>
     );
@@ -209,6 +220,7 @@ AccountSignupModal.propTypes = {
     onSignup: PropTypes.func,
     residence_list: PropTypes.arrayOf(PropTypes.object),
     toggleAccountSignupModal: PropTypes.func,
+    setIsFromSignupAccount: PropTypes.func,
 };
 
 export default connect(({ ui, client }) => ({
@@ -222,4 +234,5 @@ export default connect(({ ui, client }) => ({
     residence_list: client.residence_list,
     clients_country: client.clients_country,
     logout: client.logout,
+    setIsFromSignupAccount: ui.setIsFromSignupAccount,
 }))(AccountSignupModal);
diff --git a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { Button, Text, Modal, DesktopWrapper, MobileDialog, MobileWrapper } from '@deriv/components';
-import { routes } from '@deriv/shared';
+import { ContentFlag, routes } from '@deriv/shared';
 import { RiskToleranceWarningModal, TestWarningModal } from '@deriv/account';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
@@ -85,6 +85,7 @@ const WizardHeading = ({ country_standpoint, currency, is_isle_of_man_residence,
 const RealAccountSignup = ({
     available_crypto_currencies,
     closeRealAccountSignup,
+    content_flag,
     country_standpoint,
     currency,
     deposit_real_account_signup_target,
@@ -114,6 +115,7 @@ const RealAccountSignup = ({
     state_value,
     is_trading_experience_incomplete,
     is_trading_assessment_for_new_user_enabled,
+    toggleIsTourOpen,
 }) => {
     const [current_action, setCurrentAction] = React.useState(null);
     const [is_loading, setIsLoading] = React.useState(false);
@@ -415,6 +417,10 @@ const RealAccountSignup = ({
 
         if (modal_content[getActiveModalIndex()].action === 'signup') {
             setIsClosingCreateRealAccountModal(true);
+            if ([ContentFlag.EU_REAL, ContentFlag.EU_DEMO].includes(content_flag)) {
+                toggleIsTourOpen(true);
+            }
+
             return;
         }
         closeRealAccountSignup();
@@ -671,6 +677,7 @@ export default connect(({ ui, client, traders_hub, modules }) => ({
     available_crypto_currencies: client.available_crypto_currencies,
     cfd_score: client.cfd_score,
     closeRealAccountSignup: ui.closeRealAccountSignup,
+    content_flag: traders_hub.content_flag,
     country_standpoint: client.country_standpoint,
     currency: client.currency,
     deposit_real_account_signup_target: ui.deposit_real_account_signup_target,
@@ -700,4 +707,5 @@ export default connect(({ ui, client, traders_hub, modules }) => ({
     state_value: ui.real_account_signup,
     show_eu_related_content: traders_hub.show_eu_related_content,
     is_trading_assessment_for_new_user_enabled: ui.is_trading_assessment_for_new_user_enabled,
+    toggleIsTourOpen: traders_hub.toggleIsTourOpen,
 }))(withRouter(RealAccountSignup));
diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js
@@ -688,7 +688,7 @@ export default class NotificationStore extends BaseStore {
     resetVirtualBalanceNotification(loginid) {
         const { accounts, is_logged_in } = this.root_store.client;
         if (!is_logged_in) return;
-        if (!accounts[loginid].is_virtual) return;
+        if (!accounts[loginid]?.is_virtual) return;
         const min_reset_limit = 1000;
         const max_reset_limit = 999000;
         const balance = parseInt(accounts[loginid].balance);

diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
@@ -425,10 +425,6 @@ export default class UIStore extends BaseStore {
     }
 
     setIsClosingCreateRealAccountModal(is_closing_create_real_account_modal) {
-        if (!LocalStore.get('eu_user_closed_real_account_first_time')) {
-            this.root_store.traders_hub.toggleIsTourOpen(true);
-            LocalStore.set('eu_user_closed_real_account_first_time', true);
-        }
         this.is_closing_create_real_account_modal = is_closing_create_real_account_modal;
     }