Amir/CRO-284/Add tracking for tradershub onboarding flow (deriv-com#1…

…1550)

* feat: add tracking for tradershub onboarding flow

* chore: remove analytics package from appstore package

* chore: update analytics pakage

* chore: move tradershub tracking hook to appstore package

* fix: import path issue on test cases

* chore: use event name variable instead of string literal

* chore: remove unnecessary depenedcy from array

__mocks__/globals.js

@@ -8,6 +8,7 @@ jest.mock('@deriv/analytics', () => ({
         trackEvent: jest.fn(),
         pageView: jest.fn(),
         reset: jest.fn(),
+        setAttributes: jest.fn(),
     },
 }));
 

package.json

@@ -92,7 +92,7 @@
     },
     "dependencies": {
         "@babel/preset-typescript": "^7.16.5",
-        "@deriv/analytics": "^1.3.8",
+        "@deriv/analytics": "^1.4.1",
         "@sendbird/chat": "^4.9.7",
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^27.3.1",

packages/appstore/jest.config.js

@@ -10,6 +10,7 @@ module.exports = {
         '^Constants/(.*)$': '<rootDir>/src/constants/$1',
         '^Services/(.*)$': '<rootDir>/src/services/$1',
         '^Stores/(.*)$': '<rootDir>/src/stores/$1',
+        '^Hooks/(.*)$': '<rootDir>/src/hooks/$1',
         '^Types/(.*)$': '<rootDir>/src/types/$1',
         '^Utils/(.*)$': '<rootDir>/src/utils/$1',
     },

packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx

@@ -77,7 +77,12 @@ const CardsSliderSwiper = observer(() => {
                 <div className='wallet-cards-carousel__container'>{slider}</div>
             </div>
             <div className='wallet-cards-carousel__pagination'>
-                <ProgressBarTracker step={active_index} steps_list={steps} is_transition setStep={setActiveIndex} />
+                <ProgressBarTracker
+                    step={active_index}
+                    steps_list={steps}
+                    is_transition
+                    onStepChange={setActiveIndex}
+                />
             </div>
         </React.Fragment>
     );

packages/appstore/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-tradershub-tracking';

packages/appstore/src/hooks/use-tradershub-tracking.ts

@@ -0,0 +1,113 @@
+import { Analytics } from '@deriv/analytics';
+import { useStore } from '@deriv/stores';
+import { useCallback, useEffect, useMemo } from 'react';
+
+// This hook is used to track the onboarding form in TradersHub
+export const useTradersHubTracking = () => {
+    const { traders_hub, ui, client } = useStore();
+
+    const { is_mobile } = ui;
+
+    const { loginid } = client;
+
+    const { is_first_time_visit } = traders_hub;
+
+    const form_source = useMemo(
+        () => (is_first_time_visit ? 'tradershub_first_entrance' : 'tradershub_dashboard_form'),
+        [is_first_time_visit]
+    );
+
+    const event_name = 'ce_tradershub_onboarding_form';
+
+    useEffect(() => {
+        Analytics.setAttributes({
+            device_type: is_mobile ? 'mobile' : 'desktop',
+            account_type: loginid?.slice(0, 2),
+        });
+    }, [is_mobile, loginid]);
+
+    const trackDotNavigation = useCallback(
+        (step: number) => {
+            Analytics.trackEvent(event_name, {
+                action: 'choose_step_navigation',
+                form_source,
+                step_num: step,
+                step_codename: `${step}_step`,
+            });
+        },
+        [form_source]
+    );
+
+    const trackLastStep = useCallback(() => {
+        Analytics.trackEvent(event_name, {
+            action: 'close',
+            form_source,
+            step_num: 7,
+            step_codename: '7_step',
+        });
+    }, [form_source]);
+
+    const trackStepBack = useCallback(
+        (new_step: number) => {
+            Analytics.trackEvent(event_name, {
+                action: 'step_back',
+                form_source,
+                step_num: new_step,
+                step_codename: `${new_step}_step`,
+            });
+        },
+        [form_source]
+    );
+
+    const trackStepForward = useCallback(
+        (new_step: number) => {
+            Analytics.trackEvent(event_name, {
+                action: 'step_passed',
+                form_source,
+                step_num: new_step,
+                step_codename: `${new_step}_step`,
+            });
+        },
+        [form_source]
+    );
+
+    const trackOnboardingClose = useCallback(
+        (current_step: number) => {
+            Analytics.trackEvent(event_name, {
+                action: 'close',
+                form_source,
+                step_num: current_step,
+                step_codename: `${current_step}_step`,
+            });
+        },
+        [form_source]
+    );
+
+    const trackOnboardingRestart = useCallback(() => {
+        Analytics.trackEvent(event_name, {
+            action: 'open',
+            form_source: 'repeat_tour',
+            step_num: 7,
+            step_codename: `7_step`,
+        });
+    }, []);
+
+    const trackOnboardingOpen = useCallback(() => {
+        Analytics.trackEvent(event_name, {
+            action: 'open',
+            form_source,
+            step_num: 1,
+            step_codename: '1_step',
+        });
+    }, [form_source]);
+
+    return {
+        trackDotNavigation,
+        trackLastStep,
+        trackStepBack,
+        trackStepForward,
+        trackOnboardingClose,
+        trackOnboardingOpen,
+        trackOnboardingRestart,
+    };
+};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { localize } from '@deriv/translations';
 import { isDesktop, routes, ContentFlag } from '@deriv/shared';
 import { Button, Text, Icon, ProgressBarTracker } from '@deriv/components';
@@ -7,6 +7,7 @@ import { getTradingHubContents } from 'Constants/trading-hub-content';
 import { useHistory } from 'react-router-dom';
 import EmptyOnboarding from './empty-onboarding';
 import { useStore, observer } from '@deriv/stores';
+import { useTradersHubTracking } from 'Hooks/index';
 
 type TOnboardingProps = {
     contents: Record<
@@ -32,13 +33,23 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
     const { content_flag, is_demo_low_risk, selectAccountType, toggleIsTourOpen } = traders_hub;
     const [step, setStep] = React.useState<number>(1);
 
+    const { trackOnboardingOpen, trackStepBack, trackStepForward, trackOnboardingClose, trackDotNavigation } =
+        useTradersHubTracking();
+
     const prevStep = () => {
-        if (step > 1) setStep(step - 1);
+        if (step > 1) {
+            trackStepBack(step);
+            setStep(step - 1);
+        }
     };
 
     const nextStep = () => {
-        if (step < steps_list.length) setStep(step + 1);
+        if (step < steps_list.length) {
+            setStep(step + 1);
+            trackStepForward(step);
+        }
         if (step === steps_list.length) {
+            trackStepForward(step);
             toggleIsTourOpen(true);
             history.push(routes.traders_hub);
             if (is_demo_low_risk) {
@@ -49,11 +60,18 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
     };
 
     const handleCloseButton = async () => {
+        trackOnboardingClose(step);
+
         toggleIsTourOpen(false);
         history.push(routes.traders_hub);
         await selectAccountType(prev_account_type);
     };
 
+    const handleOnboardingStepChange = (step_num: number) => {
+        setStep(step_num);
+        trackDotNavigation(step_num);
+    };
+
     const eu_user =
         content_flag === ContentFlag.LOW_RISK_CR_EU ||
         content_flag === ContentFlag.EU_REAL ||
@@ -72,6 +90,12 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
 
     const footer_description = is_eu_user ? eu_footer_text : footer_text;
 
+    useEffect(() => {
+        if (is_logged_in && is_landing_company_loaded) {
+            trackOnboardingOpen();
+        }
+    }, [is_logged_in, is_landing_company_loaded, trackOnboardingOpen]);
+
     if (!is_logged_in || !is_landing_company_loaded) {
         return <EmptyOnboarding />;
     }
@@ -118,7 +142,11 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
                             <Button secondary onClick={prevStep} style={step === 1 ? { visibility: 'hidden' } : {}}>
                                 {localize('Back')}
                             </Button>
-                            <ProgressBarTracker step={step} steps_list={steps_list} setStep={setStep} />
+                            <ProgressBarTracker
+                                step={step}
+                                steps_list={steps_list}
+                                onStepChange={handleOnboardingStepChange}
+                            />
                             <Button primary onClick={nextStep} className='onboarding-footer-buttons--full-size'>
                                 {contents[onboarding_step]?.has_next_content
                                     ? contents[onboarding_step]?.next_content
@@ -129,7 +157,11 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
                     {is_mobile && (
                         <React.Fragment>
                             <div className='onboarding-footer__progress-bar'>
-                                <ProgressBarTracker step={step} steps_list={steps_list} setStep={setStep} />
+                                <ProgressBarTracker
+                                    step={step}
+                                    steps_list={steps_list}
+                                    onStepChange={handleOnboardingStepChange}
+                                />
                             </div>
                             <div
                                 className='onboarding-footer-buttons'

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

@@ -13,6 +13,7 @@ import {
 import { useStores } from 'Stores/index';
 import { routes, ContentFlag } from '@deriv/shared';
 import { SpanButton } from '@deriv/components';
+import { useTradersHubTracking } from 'Hooks/index';
 
 const TourGuide = () => {
     const { traders_hub, ui, client } = useStores();
@@ -23,6 +24,7 @@ const TourGuide = () => {
         content_flag,
         is_onboarding_visited,
         selectAccountType,
+        setIsFirstTimeVisit,
     } = traders_hub;
     const { is_dark_mode_on } = ui;
     const { prev_account_type } = client;
@@ -32,9 +34,12 @@ const TourGuide = () => {
     const tour_step_locale = getTourStepLocale();
     const high_risk_tour_step_locale = getTourStepLocale();
 
+    const { trackLastStep, trackStepForward, trackOnboardingRestart } = useTradersHubTracking();
+
     tour_step_locale.last = (
         <div
             onClick={() => {
+                trackLastStep();
                 setIsOnboardingVisited(true);
                 toggleIsTourOpen(false);
                 selectAccountType(prev_account_type);
@@ -47,6 +52,7 @@ const TourGuide = () => {
     high_risk_tour_step_locale.last = (
         <div
             onClick={() => {
+                trackLastStep();
                 setIsOnboardingVisited(true);
                 toggleIsTourOpen(false);
             }}
@@ -57,13 +63,21 @@ const TourGuide = () => {
 
     if (joyride_index === 0) {
         tour_step_locale.next = (
-            <div>
+            <div
+                onClick={() => {
+                    trackStepForward(7);
+                }}
+            >
                 <Localize i18n_default_text='Next' />
             </div>
         );
 
         high_risk_tour_step_locale.next = (
-            <div>
+            <div
+                onClick={() => {
+                    trackStepForward(7);
+                }}
+            >
                 <Localize i18n_default_text='Next' />
             </div>
         );
@@ -77,6 +91,8 @@ const TourGuide = () => {
                 secondary
                 medium
                 onClick={() => {
+                    trackOnboardingRestart();
+                    setIsFirstTimeVisit(false);
                     history.push(routes.onboarding);
                     toggleIsTourOpen(true);
                 }}
@@ -91,6 +107,8 @@ const TourGuide = () => {
             secondary
             medium
             onClick={() => {
+                trackOnboardingRestart();
+                setIsFirstTimeVisit(false);
                 history.push(routes.onboarding);
                 toggleIsTourOpen(true);
             }}

packages/appstore/tsconfig.json

@@ -10,6 +10,7 @@
             "Constants/*": ["src/constants/*"],
             "Modules/*": ["src/modules/*"],
             "Services/*": ["src/services/*"],
+            "Hooks/*": ["src/hooks/*"],
             "Stores/*": ["src/stores/*"],
             "Stores": ["src/stores/index"],
             "Types": ["src/types"],

packages/appstore/webpack.config.js

@@ -60,6 +60,7 @@ module.exports = function (env) {
                 Stores: path.resolve(__dirname, 'src/stores'),
                 Types: path.resolve(__dirname, 'src/types'),
                 Utils: path.resolve(__dirname, 'src/utils'),
+                Hooks: path.resolve(__dirname, 'src/hooks'),
             },
             extensions: ['.ts', '.tsx', '.js'],
         },

packages/bot-web-ui/src/components/dashboard/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx

@@ -60,7 +60,7 @@ const BotBuilderTourMobile = observer(() => {
                                 <ProgressBarTracker
                                     step={tour_step}
                                     steps_list={BOT_BUILDER_MOBILE.map(v => v.tour_step_key.toString())}
-                                    setStep={setTourStep}
+                                    onStepChange={setTourStep}
                                 />
                             }
                         </div>

packages/bot-web-ui/src/components/dashboard/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx

@@ -135,7 +135,7 @@ const OnboardingTourMobile = observer(() => {
                     <ProgressBarTracker
                         step={tour_step}
                         steps_list={DBOT_ONBOARDING_MOBILE.map(v => v.tour_step_key.toString())}
-                        setStep={setStep}
+                        onStepChange={setStep}
                     />
                 </div>
                 <div className='dbot-slider__button-group'>