[WALL] george / WALL-4402 / feat(wallets): ✨ add analytics to track w…

…allets events (deriv-com#16004)

* feat(wallets): ✨ add wallet migration analytic

* chore: 🔇 suppress ts error

* chore: align with master

* fix: prettified code

* chore: fix isOpen condition appear twice

packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx

@@ -1,12 +1,36 @@
 import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
 import { Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 
+const trackAnalyticsEvent = (
+    action: TEvents['ce_tradershub_banner']['action'],
+    account_mode: TEvents['ce_tradershub_banner']['account_mode']
+) => {
+    Analytics.trackEvent('ce_tradershub_banner', {
+        action,
+        form_name: 'ce_tradershub_banner',
+        account_mode,
+        banner_name: 'setup_unsuccessful_wallets_step_3_2',
+        banner_type: 'with_cta',
+    });
+};
+
 const WalletsBannerUnsuccessful = observer(() => {
     const { traders_hub, ui } = useStore();
     const { is_desktop } = ui;
-    const { toggleWalletsUpgrade } = traders_hub;
+    const { is_demo, toggleWalletsUpgrade } = traders_hub;
+    const account_mode = is_demo ? 'demo' : 'real';
+
+    React.useEffect(() => {
+        trackAnalyticsEvent('open', account_mode);
+    }, [account_mode]);
+
+    const onWalletsUpgradeHandler = () => {
+        toggleWalletsUpgrade(true);
+        trackAnalyticsEvent('click_cta', account_mode);
+    };
 
     return (
         <div className='wallets-banner wallets-banner-unsuccessful'>
@@ -34,7 +58,7 @@ const WalletsBannerUnsuccessful = observer(() => {
                                 line_height='s'
                                 size={is_desktop ? 'xs' : 'xxxs'}
                                 weight='bold'
-                                onClick={() => toggleWalletsUpgrade(true)}
+                                onClick={onWalletsUpgradeHandler}
                             />,
                         ]}
                     />

packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx

@@ -1,16 +1,40 @@
 import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
 import { Button, Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 
+const trackAnalyticsEvent = (
+    action: TEvents['ce_tradershub_banner']['action'],
+    account_mode: TEvents['ce_tradershub_banner']['account_mode']
+) => {
+    Analytics.trackEvent('ce_tradershub_banner', {
+        action,
+        form_name: 'ce_tradershub_banner',
+        account_mode,
+        banner_name: 'lets_go_wallets_step_1_2',
+        banner_type: 'with_cta',
+    });
+};
+
 type TProps = {
     is_upgrading: boolean;
 };
 
 const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
     const { traders_hub, ui } = useStore();
     const { is_desktop, is_mobile } = ui;
-    const { toggleWalletsUpgrade } = traders_hub;
+    const { is_demo, toggleWalletsUpgrade } = traders_hub;
+    const account_mode = is_demo ? 'demo' : 'real';
+
+    React.useEffect(() => {
+        trackAnalyticsEvent('open', account_mode);
+    }, [account_mode]);
+
+    const onWalletsUpgradeHandler = () => {
+        toggleWalletsUpgrade(true);
+        trackAnalyticsEvent('click_cta', account_mode);
+    };
 
     return (
         <div className='wallets-banner wallets-banner-upgrade'>
@@ -30,7 +54,7 @@ const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
                     text={localize("Let's go")}
                     primary
                     large
-                    onClick={() => toggleWalletsUpgrade(true)}
+                    onClick={onWalletsUpgradeHandler}
                 />
             </div>
             <Icon

packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
+import { Analytics } from '@deriv-com/analytics';
 import { Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 
 const WalletsBannerUpgrading = observer(() => {
-    const { ui } = useStore();
+    const { traders_hub, ui } = useStore();
+    const { is_demo } = traders_hub;
     const { is_desktop, is_mobile } = ui;
 
+    React.useEffect(() => {
+        Analytics.trackEvent('ce_tradershub_banner', {
+            action: 'open',
+            form_name: 'ce_tradershub_banner',
+            account_mode: is_demo ? 'demo' : 'real',
+            banner_name: 'setting_up_wallets_step_2',
+            banner_type: 'without_url',
+        });
+    }, [is_demo]);
+
     return (
         <div className='wallets-banner wallets-banner-upgrading'>
             <div className='wallets-banner__content wallets-banner-upgrading__content'>

packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
 import classNames from 'classnames';
 import { Stream } from '@cloudflare/stream-react';
 import { Button, Text, Modal } from '@deriv/components';
@@ -7,13 +8,34 @@ import { observer, useStore } from '@deriv/stores';
 import { useWalletMigration } from '@deriv/hooks';
 import './wallets-upgrade-modal.scss';
 
+const trackAnalyticsEvent = (
+    action: TEvents['ce_tradershub_popup']['action'],
+    account_mode: TEvents['ce_tradershub_popup']['account_mode']
+) => {
+    Analytics.trackEvent('ce_tradershub_popup', {
+        action,
+        form_name: 'ce_tradershub_popup',
+        account_mode,
+        popup_name: 'introducing_wallets_step_1',
+        popup_type: 'with_cta',
+    });
+};
+
 const WalletsUpgradeModal = observer(() => {
     const { traders_hub, ui } = useStore();
-    const { is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
+    const { is_demo, is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
     const { is_desktop } = ui;
     const { is_eligible, startMigration } = useWalletMigration();
+    const account_mode = is_demo ? 'demo' : 'real';
     const isWalletMigrationModalClosed = localStorage.getItem('is_wallet_migration_modal_closed');
     const [modalOpen, setModalOpen] = React.useState(!isWalletMigrationModalClosed);
+    const is_open = (is_eligible && modalOpen) || is_real_wallets_upgrade_on;
+
+    React.useEffect(() => {
+        if (is_open) {
+            trackAnalyticsEvent('open', account_mode);
+        }
+    }, [account_mode, is_open]);
 
     const closeModal = () => {
         setModalOpen(false);
@@ -24,15 +46,21 @@ const WalletsUpgradeModal = observer(() => {
     const handleMigration = () => {
         closeModal();
         startMigration();
+        trackAnalyticsEvent('click_cta', account_mode);
+    };
+
+    const onToggleModalHandler = () => {
+        closeModal();
+        trackAnalyticsEvent('close', account_mode);
     };
 
     return (
         <Modal
             className='wallets-upgrade-modal'
-            is_open={(is_eligible && modalOpen) || is_real_wallets_upgrade_on}
+            is_open={is_open}
             width={is_desktop ? '77.6rem' : '32.8rem'}
             title=' '
-            toggleModal={closeModal}
+            toggleModal={onToggleModalHandler}
         >
             <Modal.Body>
                 <div className='wallets-upgrade-modal__content'>

packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx

@@ -1,31 +1,53 @@
 import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
 import Cookies from 'js-cookie';
 import { Dialog, Icon, Text } from '@deriv/components';
 import { redirectToLogin, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { getLanguage, localize, Localize } from '@deriv/translations';
 import './wallets-upgrade-logout-modal.scss';
 
+const trackAnalyticsEvent = (
+    action: TEvents['ce_tradershub_popup']['action'],
+    account_mode: TEvents['ce_tradershub_popup']['account_mode']
+) => {
+    Analytics.trackEvent('ce_tradershub_popup', {
+        action,
+        form_name: 'ce_tradershub_popup',
+        account_mode,
+        popup_name: 'almost_there_wallets_step_3_1',
+        popup_type: 'with_cta',
+    });
+};
+
 const WalletsUpgradeLogoutModal = observer(() => {
     const { client, ui } = useStore();
-    const { logout } = client;
+    const { is_virtual, logout } = client;
     const { is_desktop } = ui;
+    const account_mode = is_virtual ? 'demo' : 'real';
+
+    React.useEffect(() => {
+        trackAnalyticsEvent('open', account_mode);
+    }, [account_mode]);
+
+    const onConfirmHandler = () => {
+        Cookies.set('recent_wallets_migration', 'true', {
+            path: '/', // not available on other subdomains
+            expires: 0.5, // 12 hours expiration time
+            secure: true,
+        });
+        logout().then(() => {
+            window.location.href = routes.traders_hub;
+            redirectToLogin(false, getLanguage());
+        });
+        trackAnalyticsEvent('click_cta', account_mode);
+    };
 
     return (
         <Dialog
             className='wallets-upgrade-logout-modal'
             confirm_button_text={localize('Log out')}
-            onConfirm={() => {
-                Cookies.set('recent_wallets_migration', 'true', {
-                    path: '/', // not available on other subdomains
-                    expires: 0.5, // 12 hours expiration time
-                    secure: true,
-                });
-                logout().then(() => {
-                    window.location.href = routes.traders_hub;
-                    redirectToLogin(false, getLanguage());
-                });
-            }}
+            onConfirm={onConfirmHandler}
             is_closed_on_confirm
             is_visible
             dismissable={false}

packages/wallets/package.json

@@ -15,6 +15,7 @@
         "translate": "sh ./scripts/update-translations.sh"
     },
     "dependencies": {
+        "@deriv-com/analytics": "1.5.9",
         "@deriv-com/ui": "^1.28.3",
         "@deriv-com/utils": "^0.0.25",
         "@deriv/api-v2": "^1.0.0",

packages/wallets/src/AppContent.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Analytics } from '@deriv-com/analytics';
 import { defineViewportHeight } from './utils/utils';
 import { WalletLanguageSidePanel } from './components';
 import { Router } from './routes';
@@ -27,6 +28,15 @@ const AppContent: React.FC = () => {
         defineViewportHeight();
     }, []);
 
+    useEffect(() => {
+        // TODO: remove `@ts-expect-error` after @deriv-com/analytics version update
+        //@ts-expect-error temporary suppress ts error until we update @deriv-com/analytics to the latest version
+        Analytics.trackEvent('ce_wallets_homepage_form', {
+            action: 'open',
+            form_name: 'ce_wallets_homepage_form',
+        });
+    }, []);
+
     return (
         <div className='wallets-app' key={`wallets_app_${i18n.language}`}>
             <div className='wallets-modal-show-header-root' id='wallets_modal_show_header_root' />