Merge pull request #103 from farabi-deriv/farabi/bot-2289/update-all-…

…tracking-services

Farabi/bot-2289/update-all-tracking-services

src/analytics/constants.ts

@@ -0,0 +1,31 @@
+import { TFormValues } from '../pages/bot-builder/quick-strategy/types';
+
+export const form_name = 'ce_bot_form';
+export const STORED_ITEM_NOT_FOUND = 'No results found';
+
+export enum ACTION {
+    OPEN = 'open',
+    CLOSE = 'close',
+    RUN_BOT = 'run_bot',
+    RUN_QUICK_STRATEGY = 'run_quick_strategy',
+    EDIT_QUICK_STRATEGY = 'edit_quick_strategy',
+    SELECT_QUICK_STRATEGY_GUIDE = 'select_quick_strategy_guide',
+    SWITCH_QUICK_STRATEGY_TAB = 'switch_quick_strategy_tab',
+    DASHBOARD_CLICK = 'dashboard_click',
+    UPLOAD_STRATEGY_START = 'upload_strategy_start',
+    UPLOAD_STRATEGY_COMPLETED = 'upload_strategy_completed',
+    UPLOAD_STRATEGY_FAILED = 'upload_strategy_failed',
+    GOOGLE_DRIVE_CONNECT = 'google_drive_connect',
+    GOOGLE_DRIVE_DISCONNECT = 'google_drive_disconnect',
+    SWITCH_LOAD_STRATEGY_TAB = 'switch_load_strategy_tab',
+    ANNOUNCEMENT_CLICK = 'announcement_click',
+    ANNOUNCEMENT_ACTION = 'announcement_action',
+}
+
+export type TFormStrategy = {
+    form_values: TFormValues;
+} & TSelectedStrategy;
+
+export type TSelectedStrategy = {
+    selected_strategy: string;
+};

src/analytics/rudderstack-bot-builder.ts

@@ -0,0 +1,12 @@
+import { Analytics, TEvents } from '@deriv-com/analytics';
+import { ACTION, form_name } from './constants';
+
+export const rudderStackSendSwitchLoadStrategyTabEvent = ({ load_strategy_tab }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.SWITCH_LOAD_STRATEGY_TAB,
+        form_name,
+        load_strategy_tab,
+        subform_name: 'load_strategy',
+        subpage_name: 'bot_builder',
+    });
+};

src/analytics/rudderstack-common-events.ts

@@ -0,0 +1,108 @@
+import { Analytics, TEvents } from '@deriv-com/analytics';
+import { ACTION, form_name, TFormStrategy } from './constants';
+import { getRsStrategyType } from './utils';
+
+export const rudderStackSendOpenEvent = ({
+    subpage_name,
+    subform_source,
+    subform_name,
+    load_strategy_tab,
+}: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.OPEN,
+        form_name,
+        subpage_name,
+        subform_name,
+        subform_source,
+        load_strategy_tab,
+    });
+};
+
+export const rudderStackSendCloseEvent = ({
+    subform_name,
+    quick_strategy_tab,
+    selected_strategy,
+    load_strategy_tab,
+    announcement_name,
+}: TEvents['ce_bot_form'] & TFormStrategy) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.CLOSE,
+        form_name,
+        subform_name,
+        quick_strategy_tab,
+        strategy_name: getRsStrategyType(selected_strategy),
+        load_strategy_tab,
+        announcement_name,
+    });
+};
+
+export const rudderStackSendRunBotEvent = ({ subpage_name }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.RUN_BOT,
+        form_name,
+        subpage_name,
+    });
+};
+
+export const rudderStackSendUploadStrategyStartEvent = ({ upload_provider, upload_id }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.UPLOAD_STRATEGY_START,
+        form_name,
+        subform_name: 'load_strategy',
+        subpage_name: 'bot_builder',
+        upload_provider,
+        upload_id,
+    });
+};
+
+export const rudderStackSendUploadStrategyCompletedEvent = ({
+    upload_provider,
+    upload_id,
+    upload_type,
+}: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.UPLOAD_STRATEGY_COMPLETED,
+        form_name,
+        subform_name: 'load_strategy',
+        subpage_name: 'bot_builder',
+        upload_provider,
+        upload_id,
+        upload_type,
+    });
+};
+
+export const rudderStackSendUploadStrategyFailedEvent = ({
+    upload_provider,
+    upload_id,
+    upload_type,
+    error_message,
+    error_code,
+}: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.UPLOAD_STRATEGY_FAILED,
+        form_name,
+        subform_name: 'load_strategy',
+        subpage_name: 'bot_builder',
+        upload_provider,
+        upload_id,
+        upload_type,
+        error_message,
+        error_code,
+    });
+};
+
+export const rudderStackSendGoogleDriveConnectEvent = () => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.GOOGLE_DRIVE_CONNECT,
+        form_name,
+        subpage_name: 'bot_builder',
+    });
+};
+
+export const rudderStackSendGoogleDriveDisconnectEvent = () => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.GOOGLE_DRIVE_DISCONNECT,
+        form_name,
+        subpage_name: 'bot_builder',
+    });
+};

src/analytics/rudderstack-dashboard.ts

@@ -0,0 +1,35 @@
+import { Analytics, TEvents } from '@deriv-com/analytics';
+import { ACTION, form_name } from './constants';
+
+export const rudderStackSendDashboardClickEvent = ({ dashboard_click_name, subpage_name }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.DASHBOARD_CLICK,
+        form_name,
+        subpage_name,
+        dashboard_click_name,
+    });
+};
+
+export const rudderStackSendAnnouncementClickEvent = ({ announcement_name }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.ANNOUNCEMENT_CLICK,
+        form_name,
+        subform_name: 'announcements',
+        subform_source: 'dashboard',
+        announcement_name,
+    });
+};
+
+export const rudderStackSendAnnouncementActionEvent = ({
+    announcement_name,
+    announcement_action,
+}: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.ANNOUNCEMENT_ACTION,
+        form_name,
+        subform_name: 'announcements',
+        subform_source: 'dashboard',
+        announcement_name,
+        announcement_action,
+    });
+};

src/analytics/rudderstack-quick-strategy.ts

@@ -0,0 +1,38 @@
+import { Analytics, TEvents } from '@deriv-com/analytics';
+import { ACTION, form_name, type TFormStrategy } from './constants';
+import { getRsStrategyType, getTradeParameterData } from './utils';
+
+export const rudderStackSendQsRunStrategyEvent = ({
+    form_values,
+    selected_strategy,
+}: TEvents['ce_bot_form'] & TFormStrategy) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.RUN_QUICK_STRATEGY,
+        form_name,
+        subform_name: 'quick_strategy',
+        strategy_name: getRsStrategyType(selected_strategy),
+        ...getTradeParameterData({ form_values, selected_strategy }),
+    });
+};
+
+export const rudderStackSendQsEditStrategyEvent = ({
+    form_values,
+    selected_strategy,
+}: TEvents['ce_bot_form'] & TFormStrategy) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.EDIT_QUICK_STRATEGY,
+        form_name,
+        subform_name: 'quick_strategy',
+        strategy_name: getRsStrategyType(selected_strategy),
+        ...getTradeParameterData({ form_values, selected_strategy }),
+    });
+};
+
+export const rudderStackSendQsSelectedTabEvent = ({ quick_strategy_tab }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.SWITCH_QUICK_STRATEGY_TAB,
+        form_name,
+        subform_name: 'quick_strategy',
+        quick_strategy_tab,
+    });
+};

src/analytics/rudderstack-tutorials.ts

@@ -0,0 +1,21 @@
+import { Analytics, TEvents } from '@deriv-com/analytics';
+import { ACTION, form_name, TSelectedStrategy } from './constants';
+import { getRsStrategyType } from './utils';
+
+export const rudderStackSendSelectQsStrategyGuideEvent = ({ selected_strategy }: TSelectedStrategy) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.SELECT_QUICK_STRATEGY_GUIDE,
+        form_name,
+        subpage_name: 'tutorials',
+        strategy_name: getRsStrategyType(selected_strategy),
+    });
+};
+
+export const rudderStackSendTutorialSearchEvent = ({ search_term }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: 'search',
+        form_name: 'ce_bot_form',
+        subpage_name: 'tutorials',
+        search_term,
+    });
+};

src/pages/bot-builder/quick-strategy/analytics/utils.ts → src/analytics/utils.ts

@@ -1,37 +1,34 @@
-import { STRATEGIES } from '../config';
+import { STRATEGIES } from '../pages/bot-builder/quick-strategy/config';
 import { STORED_ITEM_NOT_FOUND, TFormStrategy } from './constants';
 
+export const rudderstack_text_error = 'Rudderstack: unable to get dropdown text';
+
 export const getRsDropdownTextFromLocalStorage = () => {
     try {
         return JSON.parse(localStorage?.getItem('qs-analytics') ?? '{}');
     } catch (error) {
         // eslint-disable-next-line no-console
-        console.error('Rudderstack: unable to get dropdown text');
+        console.error(rudderstack_text_error);
         return {};
     }
 };
 
 const hasStoredText = (parameter: string) => parameter && parameter !== STORED_ITEM_NOT_FOUND;
 
-export const getRsStrategyType = (selected_strategy: string) => STRATEGIES()[selected_strategy]?.rs_strategy_name;
+export const getRsStrategyType = (selected_strategy: string) => STRATEGIES[selected_strategy]?.rs_strategy_name;
 
 export const getQsActiveTabString = (tab: string) => (tab === 'TRADE_PARAMETERS' ? 'trade parameters' : 'learn more');
 
-export const getSubpageName = () => {
-    const pathname = window.location.hash;
-    switch (pathname) {
-        case 'dashboard':
-            return 'dashboard';
-        case 'charts':
-            return 'charts';
-        case 'tutorials':
-            return 'tutorials';
-        default:
-            return 'bot_builder';
-    }
-};
+enum LOAD_MODAL_TABS_VALUE {
+    recent = 'recent',
+    local = 'local',
+    google_drive = 'google drive',
+}
+export const LOAD_MODAL_TABS = Object.values(LOAD_MODAL_TABS_VALUE);
 
 export const getTradeParameterData = ({ form_values }: TFormStrategy) => {
+    if (!form_values) return;
+
     const { symbol, tradetype, type, stake } = form_values;
     const stored_texts = getRsDropdownTextFromLocalStorage();
 
@@ -42,3 +39,17 @@ export const getTradeParameterData = ({ form_values }: TFormStrategy) => {
         initial_stake: hasStoredText(stored_texts?.stake) ? stored_texts?.stake : stake,
     };
 };
+
+export const getStrategyType = (block_string: string | ArrayBuffer) => {
+    try {
+        const xmlDoc = new DOMParser().parseFromString(block_string.toString(), 'application/xml');
+        if (xmlDoc.getElementsByTagName('xml').length) {
+            const root = xmlDoc.documentElement;
+            const isDbotValue = root.getAttribute('is_dbot');
+            return isDbotValue === 'true' ? 'new' : 'old';
+        }
+        return 'old';
+    } catch (e) {
+        return 'old';
+    }
+};

src/components/layout/header/header.scss

@@ -42,15 +42,15 @@
 
 .deriv-account-switcher {
     &__button {
+        margin-inline-end: 0.8rem;
+
         .deriv-context-menu {
             box-shadow: 0 0 2px 0 var(--du-shadow-box, #00000014);
         }
 
         .deriv-account-switcher__balance + svg > path {
             fill: var(--text-general);
         }
-
-        margin-inline-end: 0.8rem;
     }
 
     &__balance {

src/components/load-modal/google-drive/google-drive.tsx

@@ -7,6 +7,10 @@ import { useStore } from '@/hooks/useStore';
 import { DerivLightGoogleDriveIcon } from '@deriv/quill-icons/Illustration';
 import { Localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
+import {
+    rudderStackSendGoogleDriveConnectEvent,
+    rudderStackSendGoogleDriveDisconnectEvent,
+} from '../../../analytics/rudderstack-common-events';
 import './google-drive.scss';
 
 const GoogleDrive: React.FC = observer(() => {
@@ -38,6 +42,7 @@ const GoogleDrive: React.FC = observer(() => {
                         <Button
                             onClick={() => {
                                 signOut();
+                                rudderStackSendGoogleDriveDisconnectEvent();
                             }}
                             has_effect
                             secondary
@@ -80,6 +85,7 @@ const GoogleDrive: React.FC = observer(() => {
                         <Button
                             onClick={() => {
                                 signIn();
+                                rudderStackSendGoogleDriveConnectEvent();
                             }}
                             has_effect
                             primary