diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx index eb3d417ec9e9..515cb9618963 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx +++ b/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 (
@@ -34,7 +58,7 @@ const WalletsBannerUnsuccessful = observer(() => { line_height='s' size={is_desktop ? 'xs' : 'xxxs'} weight='bold' - onClick={() => toggleWalletsUpgrade(true)} + onClick={onWalletsUpgradeHandler} />, ]} /> diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx index 019ec23214d3..79880cf0cccd 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx +++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx @@ -1,8 +1,22 @@ 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; }; @@ -10,7 +24,17 @@ type TProps = { const WalletsBannerUpgrade: React.FC = 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 (
@@ -30,7 +54,7 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => { text={localize("Let's go")} primary large - onClick={() => toggleWalletsUpgrade(true)} + onClick={onWalletsUpgradeHandler} />
{ - 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 (
diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx index fdd6d6010f5f..a03297237aa5 100644 --- a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx +++ b/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 (
diff --git a/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx b/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx index 41fa94b2148d..b6156ad53c73 100644 --- a/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx +++ b/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx @@ -1,4 +1,5 @@ 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'; @@ -6,26 +7,47 @@ 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 ( { - 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} diff --git a/packages/wallets/package.json b/packages/wallets/package.json index 2879b97b317b..00ff0bd924f6 100644 --- a/packages/wallets/package.json +++ b/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", diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx index fcbe3ab9108d..8202469ae25a 100644 --- a/packages/wallets/src/AppContent.tsx +++ b/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 (