feat: 🔥 remove tour guide from tradershub

henry-deriv · May 13, 2024 · fed9653 · fed9653
1 parent b7a10b0
commit fed9653
Show file tree

Hide file tree

Showing 15 changed files with 15 additions and 333 deletions.
diff --git a/packages/appstore/src/constants/tour-steps-config.tsx b/packages/appstore/src/constants/tour-steps-config.tsx
diff --git a/packages/appstore/src/constants/tour-steps-styles.ts b/packages/appstore/src/constants/tour-steps-styles.ts
diff --git a/packages/appstore/src/modules/onboarding/onboarding.tsx b/packages/appstore/src/modules/onboarding/onboarding.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { routes, ContentFlag } from '@deriv/shared';
+import { routes } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
 import OnboardingSkeleton from '../../components/loader';
 import TradingPlatformIcon from 'Assets/svgs/trading-platform';
@@ -9,29 +9,15 @@ import './onboarding.scss';
 const Onboarding = observer(() => {
     const history = useHistory();
 
-    const { traders_hub, client, ui } = useStore();
+    const { traders_hub, client } = useStore();
     const { is_landing_company_loaded, is_logged_in, setPrevAccountType } = client;
-    const { content_flag, is_demo_low_risk, selectAccountType, toggleIsTourOpen } = traders_hub;
-    const { is_from_signup_account } = ui;
+    const { is_demo_low_risk, selectAccountType } = traders_hub;
 
     useEffect(() => {
         if (is_logged_in && is_landing_company_loaded) {
             history.push(routes.traders_hub);
-            if (is_from_signup_account && content_flag !== ContentFlag.EU_DEMO) {
-                toggleIsTourOpen(true);
-            }
         }
-    }, [
-        is_logged_in,
-        is_landing_company_loaded,
-        is_from_signup_account,
-        content_flag,
-        is_demo_low_risk,
-        history,
-        toggleIsTourOpen,
-        selectAccountType,
-        setPrevAccountType,
-    ]);
+    }, [is_logged_in, is_landing_company_loaded, is_demo_low_risk, history, selectAccountType, setPrevAccountType]);
 
     if (is_logged_in && !is_landing_company_loaded) return <OnboardingSkeleton />;
 

diff --git a/packages/appstore/src/modules/tour-guide/tour-guide.tsx b/packages/appstore/src/modules/tour-guide/tour-guide.tsx
diff --git a/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx b/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx
@@ -7,7 +7,6 @@ jest.mock('Components/modals/modal-manager', () => jest.fn(() => 'mockedModalMan
 jest.mock('Components/main-title-bar', () => jest.fn(() => 'mockedMainTitleBar'));
 jest.mock('Components/cfds-listing', () => jest.fn(() => 'mockedCFDsListing'));
 jest.mock('Components/options-multipliers-listing', () => jest.fn(() => 'mocked<OptionsAndMultipliersListing>'));
-jest.mock('../../tour-guide/tour-guide', () => jest.fn(() => 'mocked<TourGuide>'));
 
 describe('TradersHub', () => {
     const render_container = (mock_store_override = {}) => {

diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx
@@ -9,7 +9,6 @@ import MainTitleBar from 'Components/main-title-bar';
 import OptionsAndMultipliersListing from 'Components/options-multipliers-listing';
 import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader';
 import classNames from 'classnames';
-import TourGuide from '../tour-guide/tour-guide';
 import './traders-hub.scss';
 import { useContentFlag, useGrowthbookFeatureFlag } from '@deriv/hooks';
 
@@ -34,22 +33,13 @@ const TradersHub = observer(() => {
     } = client;
 
     const { is_cr_demo, is_eu_demo, is_eu_real } = useContentFlag();
-    const { selected_platform_type, setTogglePlatformType, is_tour_open, is_eu_user } = traders_hub;
+    const { selected_platform_type, setTogglePlatformType, is_eu_user } = traders_hub;
     const traders_hub_ref = React.useRef<HTMLDivElement>(null);
 
     const can_show_notify =
         (!is_switching && !is_logging_in && is_account_setting_loaded && is_landing_company_loaded) ||
         checkServerMaintenance(website_status);
 
-    const [scrolled, setScrolled] = React.useState(false);
-
-    const handleScroll = React.useCallback(() => {
-        const element = traders_hub_ref?.current;
-        if (element && is_tour_open) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-    }, [is_tour_open]);
-
     const direct_to_real_account_creation = useGrowthbookFeatureFlag({
         featureFlag: 'direct-real-account-creation-flow',
         defaultValue: false,
@@ -83,14 +73,7 @@ const TradersHub = observer(() => {
 
     React.useEffect(() => {
         if (is_eu_user) setTogglePlatformType('cfd');
-        const timer = setTimeout(() => {
-            handleScroll();
-            setTimeout(() => {
-                setScrolled(true);
-            }, 200);
-        }, 100);
-        return () => clearTimeout(timer);
-    }, [handleScroll, is_eu_user, is_tour_open, setTogglePlatformType]);
+    }, [is_eu_user, setTogglePlatformType]);
 
     React.useLayoutEffect(() => {
         startPerformanceEventTimer('option_multiplier_section_loading_time');
@@ -181,7 +164,6 @@ const TradersHub = observer(() => {
                         {getOrderedPlatformSections()}
                     </MobileWrapper>
                     <ModalManager />
-                    {scrolled && <TourGuide />}
                 </div>
             </Div100vhContainer>
             {is_eu_user && (

diff --git a/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx b/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx
@@ -5,9 +5,7 @@ import { routes } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 
 import { BinaryLink } from 'App/Components/Routes';
-
 import ShowNotifications from './show-notifications';
-import TradersHubOnboarding from './traders-hub-onboarding';
 import { useFeatureFlags } from '@deriv/hooks';
 
 type TDefaultMobileLinks = {
@@ -18,9 +16,6 @@ const DefaultMobileLinks = React.memo(({ handleClickCashier }: TDefaultMobileLin
     const { is_next_wallet_enabled } = useFeatureFlags();
     return (
         <React.Fragment>
-            <div className='traders-hub-header__menu-right--items--onboarding'>
-                <TradersHubOnboarding />
-            </div>
             <div className='traders-hub-header__menu-right--items--notifications'>
                 <ShowNotifications />
             </div>

diff --git a/packages/core/src/App/Containers/Layout/header/traders-hub-header.tsx b/packages/core/src/App/Containers/Layout/header/traders-hub-header.tsx
@@ -13,7 +13,6 @@ import { BinaryLink } from 'App/Components/Routes';
 import DerivBrandLogo from 'Assets/SvgComponents/header/deriv-rebranding-logo.svg';
 import DefaultMobileLinks from './default-mobile-links';
 import ShowNotifications from './show-notifications';
-import TradersHubOnboarding from './traders-hub-onboarding';
 import TradersHubHomeButton from './traders-hub-home-button';
 
 type TPlatformConfig = typeof platform_config;
@@ -140,9 +139,6 @@ const TradersHubHeader = observer(() => {
                     <div className='traders-hub-header__menu-right'>
                         <div className='traders-hub-header__divider' />
                         <div className='traders-hub-header__menu-right--items'>
-                            <div className='traders-hub-header__menu-right--items--onboarding'>
-                                <TradersHubOnboarding />
-                            </div>
                             <div className='traders-hub-header__menu-right--items--notifications'>
                                 <ShowNotifications />
                             </div>