Revert "feat: 🔥 remove tour guide from tradershub"

This reverts commit fed9653.

packages/appstore/src/constants/tour-steps-config.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Step, Locale } from 'react-joyride';
+import { Text, SpanButton, Icon } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
+import 'Components/toggle-account-type/toggle-account-type.scss';
+
+const stepProps = {
+    disableBeacon: true,
+    disableOverlayClose: true,
+};
+
+export const tour_step_config: Step[] = [
+    {
+        title: (
+            <React.Fragment>
+                <Text as='p' weight='bold' color='brand-red-coral'>
+                    <Localize i18n_default_text='Switch accounts' />
+                </Text>
+                <div className='toggle-account-type__divider' />
+            </React.Fragment>
+        ),
+        content: (
+            <Text as='p'>
+                <Localize i18n_default_text='You can switch between real and demo accounts.' />
+            </Text>
+        ),
+        target: '.account-type-dropdown--parent',
+        ...stepProps,
+    },
+    {
+        title: (
+            <React.Fragment>
+                <Text as='p' weight='bold' color='brand-red-coral'>
+                    <Localize i18n_default_text='Choice of regulation' />
+                </Text>
+                <div className='toggle-account-type__divider' />
+            </React.Fragment>
+        ),
+        content: (
+            <Text as='p'>
+                <Localize
+                    i18n_default_text='You can create real accounts under EU or non-EU regulation. Click the <0><0/> icon to learn more about these accounts.'
+                    components={[
+                        <Text key={0}>
+                            <Icon icon='IcInfoOutline' />
+                        </Text>,
+                    ]}
+                />
+            </Text>
+        ),
+        target: isMobile() ? '.main-title-bar-mobile--regulator' : '.regulators-switcher__container',
+        ...stepProps,
+    },
+    {
+        title: (
+            <React.Fragment>
+                <Text as='p' weight='bold' color='brand-red-coral'>
+                    <Localize i18n_default_text="Trader's Hub tour" />
+                </Text>
+                <div className='toggle-account-type__divider' />
+            </React.Fragment>
+        ),
+        content: (
+            <Text as='p'>
+                <Localize i18n_default_text='Click here if you ever need to repeat this tour.' />
+            </Text>
+        ),
+        target: '.traders-hub-header__tradershub--onboarding--logo',
+        ...stepProps,
+    },
+];
+
+export const tour_step_config_high_risk: Step[] = [
+    {
+        title: (
+            <React.Fragment>
+                <Text as='p' weight='bold' color='brand-red-coral'>
+                    <Localize i18n_default_text='Switch accounts' />
+                </Text>
+                <div className='toggle-account-type__divider' />
+            </React.Fragment>
+        ),
+        content: (
+            <Text as='p'>
+                <Localize i18n_default_text='You can switch between real and demo accounts.' />
+            </Text>
+        ),
+        target: '.account-type-dropdown--parent',
+        ...stepProps,
+    },
+    {
+        title: (
+            <React.Fragment>
+                <Text as='p' weight='bold' color='brand-red-coral'>
+                    <Localize i18n_default_text="Trader's Hub tour" />
+                </Text>
+                <div className='toggle-account-type__divider' />
+            </React.Fragment>
+        ),
+        content: (
+            <Text as='p'>
+                <Localize i18n_default_text='Click here if you ever need to repeat this tour.' />
+            </Text>
+        ),
+        target: '.traders-hub-header__tradershub--onboarding--logo',
+        ...stepProps,
+    },
+];
+
+export const getHighRiskTourStepLocale = (): Locale => ({
+    back: <SpanButton has_effect text={localize('Repeat tour')} secondary medium />,
+    last: <Localize i18n_default_text='OK' />,
+    next: <Localize i18n_default_text='Next' />,
+});
+
+export const getTourStepLocale = (): Locale => ({
+    back: <SpanButton has_effect text={localize('Back')} secondary medium />,
+    last: <Localize i18n_default_text='OK' />,
+    next: <Localize i18n_default_text='Next' />,
+});

packages/appstore/src/constants/tour-steps-styles.ts

@@ -0,0 +1,44 @@
+import { Styles } from 'react-joyride';
+
+type TJoyrideStyles = Pick<Styles, 'options' | 'tooltipTitle' | 'tooltipContent' | 'buttonNext'>;
+
+const tourStyles = {
+    options: {
+        width: 350,
+    },
+    tooltipTitle: {
+        color: 'var(--brand-red-coral)',
+        textAlign: 'left',
+    },
+    tooltipContent: {
+        textAlign: 'left',
+        fontSize: '1.6rem',
+        padding: '3rem 0 1.6rem 0',
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
+    },
+    buttonNext: {
+        padding: '0.9rem',
+        fontSize: '1.5rem',
+        fontWeight: 'bold',
+        outline: 'none',
+    },
+} as const;
+
+export const tour_styles: TJoyrideStyles = {
+    options: tourStyles.options,
+    tooltipTitle: tourStyles.tooltipTitle,
+    tooltipContent: tourStyles.tooltipContent,
+    buttonNext: tourStyles.buttonNext,
+};
+
+export const tour_styles_dark_mode: TJoyrideStyles = {
+    options: {
+        ...tourStyles.options,
+        backgroundColor: 'var(--general-section-3)',
+        arrowColor: 'var(--general-section-3)',
+    },
+    tooltipTitle: tourStyles.tooltipTitle,
+    tooltipContent: tourStyles.tooltipContent,
+    buttonNext: tourStyles.buttonNext,
+};

packages/appstore/src/modules/onboarding/onboarding.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { routes } from '@deriv/shared';
+import { routes, ContentFlag } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
 import OnboardingSkeleton from '../../components/loader';
 import TradingPlatformIcon from 'Assets/svgs/trading-platform';
@@ -9,15 +9,29 @@ import './onboarding.scss';
 const Onboarding = observer(() => {
     const history = useHistory();
 
-    const { traders_hub, client } = useStore();
+    const { traders_hub, client, ui } = useStore();
     const { is_landing_company_loaded, is_logged_in, setPrevAccountType } = client;
-    const { is_demo_low_risk, selectAccountType } = traders_hub;
+    const { content_flag, is_demo_low_risk, selectAccountType, toggleIsTourOpen } = traders_hub;
+    const { is_from_signup_account } = ui;
 
     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_demo_low_risk, history, selectAccountType, setPrevAccountType]);
+    }, [
+        is_logged_in,
+        is_landing_company_loaded,
+        is_from_signup_account,
+        content_flag,
+        is_demo_low_risk,
+        history,
+        toggleIsTourOpen,
+        selectAccountType,
+        setPrevAccountType,
+    ]);
 
     if (is_logged_in && !is_landing_company_loaded) return <OnboardingSkeleton />;
 

packages/appstore/src/modules/tour-guide/tour-guide.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import Joyride, { CallBackProps, STATUS, EVENTS, ACTIONS } from 'react-joyride';
+import { observer } from 'mobx-react-lite';
+import {
+    tour_step_config,
+    getTourStepLocale,
+    tour_step_config_high_risk,
+    getHighRiskTourStepLocale,
+} from 'Constants/tour-steps-config';
+import { tour_styles, tour_styles_dark_mode } from 'Constants/tour-steps-styles';
+import { useStores } from 'Stores/index';
+import { ContentFlag } from '@deriv/shared';
+import { useTradersHubTracking } from 'Hooks/index';
+import { localize } from '@deriv/translations';
+import { SpanButton } from '@deriv/components';
+
+const TourGuide = () => {
+    const { traders_hub, ui } = useStores();
+    const { is_tour_open, toggleIsTourOpen, content_flag, setIsFirstTimeVisit } = traders_hub;
+    const { is_dark_mode_on, should_trigger_tour_guide, setShouldTriggerTourGuide } = ui;
+
+    const [joyride_index, setJoyrideIndex] = React.useState(0);
+    const tour_step_locale = getTourStepLocale();
+    const high_risk_tour_step_locale = getHighRiskTourStepLocale();
+    const low_risk = content_flag === ContentFlag.LOW_RISK_CR_NON_EU || content_flag === ContentFlag.LOW_RISK_CR_EU;
+
+    const { trackLastStep, trackStepForward, trackOnboardingRestart } = useTradersHubTracking();
+
+    const handleNextAction = (index: number) => {
+        trackStepForward(7);
+        setJoyrideIndex(index + 1);
+    };
+
+    const handlePrevAction = (index: number) => {
+        if (tour_step_config.length === joyride_index + 1) {
+            trackLastStep();
+            trackOnboardingRestart();
+            setIsFirstTimeVisit(false);
+            setJoyrideIndex(0);
+        } else {
+            setJoyrideIndex(index - 1);
+        }
+    };
+
+    const callbackHandle = (data: CallBackProps) => {
+        const { action, index, type, status } = data;
+        const finishedStatuses: string[] = [STATUS.FINISHED];
+        const skipTypes: string[] = [EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND];
+
+        if (finishedStatuses.includes(status)) {
+            toggleIsTourOpen(false);
+            setShouldTriggerTourGuide(false);
+            setJoyrideIndex(0);
+            return;
+        }
+
+        if (!skipTypes.includes(type)) {
+            return;
+        }
+
+        if (action === ACTIONS.NEXT) {
+            handleNextAction(index);
+        } else if (action === ACTIONS.PREV) {
+            handlePrevAction(index);
+        }
+    };
+
+    if (tour_step_config.length === joyride_index + 1) {
+        tour_step_locale.back = <SpanButton has_effect text={localize('Repeat tour')} secondary medium />;
+    }
+
+    return (
+        <Joyride
+            run={is_tour_open || should_trigger_tour_guide}
+            continuous
+            disableScrolling
+            hideCloseButton
+            disableCloseOnEsc
+            steps={low_risk ? tour_step_config : tour_step_config_high_risk}
+            stepIndex={joyride_index}
+            locale={low_risk ? tour_step_locale : high_risk_tour_step_locale}
+            styles={is_dark_mode_on ? tour_styles_dark_mode : tour_styles}
+            floaterProps={{ disableAnimation: true }}
+            callback={callbackHandle}
+        />
+    );
+};
+export default observer(TourGuide);

packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx

@@ -7,6 +7,7 @@ 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 = {}) => {

packages/appstore/src/modules/traders-hub/index.tsx

@@ -9,6 +9,7 @@ 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';
 
@@ -33,13 +34,22 @@ const TradersHub = observer(() => {
     } = client;
 
     const { is_cr_demo, is_eu_demo, is_eu_real } = useContentFlag();
-    const { selected_platform_type, setTogglePlatformType, is_eu_user } = traders_hub;
+    const { selected_platform_type, setTogglePlatformType, is_tour_open, 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,
@@ -73,7 +83,14 @@ const TradersHub = observer(() => {
 
     React.useEffect(() => {
         if (is_eu_user) setTogglePlatformType('cfd');
-    }, [is_eu_user, setTogglePlatformType]);
+        const timer = setTimeout(() => {
+            handleScroll();
+            setTimeout(() => {
+                setScrolled(true);
+            }, 200);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [handleScroll, is_eu_user, is_tour_open, setTogglePlatformType]);
 
     React.useLayoutEffect(() => {
         startPerformanceEventTimer('option_multiplier_section_loading_time');
@@ -164,6 +181,7 @@ const TradersHub = observer(() => {
                         {getOrderedPlatformSections()}
                     </MobileWrapper>
                     <ModalManager />
+                    {scrolled && <TourGuide />}
                 </div>
             </Div100vhContainer>
             {is_eu_user && (

packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx

@@ -5,7 +5,9 @@ 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 = {
@@ -16,6 +18,9 @@ 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>

packages/core/src/App/Containers/Layout/header/traders-hub-header.tsx

@@ -13,6 +13,7 @@ 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;
@@ -139,6 +140,9 @@ 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>