[WALL] george / WALL-4522 / Add ce_cashier_deposit_onboarding_form an…

…alytics event (deriv-com#16089) * feat(cashier): ⚡ add ce_cashier_deposit_onboarding_form analytics event * feat(p2p): setup analytics in p2p * fix(cashier): 🚑 fix remounting of vertical tab routes/pages * chore: align package-lock with master * chore(cashier): ♻️ minor improvement, fix test * chore: deriv analytics version update * fix(cashier): 🐛 content remounting, p2p remounting
utkarsha-deriv · Jul 26, 2024 · a10f85c · a10f85c
1 parent 65ee6ec
commit a10f85c
Show file tree

Hide file tree

Showing 24 changed files with 268 additions and 122 deletions.
diff --git a/packages/cashier/package.json b/packages/cashier/package.json
@@ -37,6 +37,7 @@
         "url": "https://github.com/binary-com/deriv-app/issues"
     },
     "dependencies": {
+        "@deriv-com/analytics": "1.10.0",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",
         "@deriv/components": "^1.0.0",

diff --git a/...rc/components/deposit-sub-page-event-tracker/deposit-sub-page-analytics-event-tracker.tsx b/...rc/components/deposit-sub-page-event-tracker/deposit-sub-page-analytics-event-tracker.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { Analytics } from '@deriv-com/analytics';
+import { useStore } from '@deriv/stores';
+
+type TProps = { deposit_category: 'crypto' | 'fiat' | 'fiat_onramp' | 'payment_agent' | 'p2p' };
+
+const DepositSubPageAnalyticsEventTracker: React.FC<TProps> = ({ deposit_category }) => {
+    const { client } = useStore();
+    const { currency, loginid } = client;
+
+    useEffect(() => {
+        Analytics.trackEvent('ce_cashier_deposit_onboarding_form', {
+            action: 'open_deposit_subpage',
+            form_name: 'ce_cashier_deposit_onboarding_form',
+            currency,
+            deposit_category,
+            login_id: loginid,
+        });
+    }, [currency, deposit_category, loginid]);
+
+    return null;
+};
+
+export default DepositSubPageAnalyticsEventTracker;
diff --git a/packages/cashier/src/components/deposit-sub-page-event-tracker/index.ts b/packages/cashier/src/components/deposit-sub-page-event-tracker/index.ts
@@ -0,0 +1 @@
+export { default as DepositSubPageAnalyticsEventTracker } from './deposit-sub-page-analytics-event-tracker';
diff --git a/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx b/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx
@@ -11,6 +11,38 @@ import CashierProviders from '../../../cashier-providers';
 jest.mock('@deriv/hooks', () => {
     return {
         ...jest.requireActual('@deriv/hooks'),
+        usePaymentAgentList: jest.fn(() => ({
+            data: [
+                {
+                    currencies: 'USD',
+                    email: 'pa-test@email.com',
+                    further_information: 'Further information',
+                    max_withdrawal: '2000',
+                    min_withdrawal: '10',
+                    name: 'PA',
+                    paymentagent_loginid: 'CR9999999',
+                    phone_numbers: [
+                        {
+                            phone_number: '+987654321',
+                        },
+                    ],
+                    summary: '',
+                    supported_payment_methods: [
+                        {
+                            payment_method: 'Visa',
+                        },
+                    ],
+                    urls: [
+                        {
+                            url: 'https://test.test',
+                        },
+                    ],
+                    withdrawal_commission: '0',
+                },
+            ],
+            isLoading: false,
+            isSuccess: true,
+        })),
         usePaymentAgentTransferVisible: jest.fn(() => ({
             data: true,
             isLoading: false,
@@ -103,9 +135,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: false,
                     },
-                    payment_agent: {
-                        is_payment_agent_visible: false,
-                    },
                 },
             },
         });
@@ -153,9 +182,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
-                    payment_agent: {
-                        is_payment_agent_visible: true,
-                    },
                 },
             },
         });
@@ -206,9 +232,6 @@ describe('<Cashier />', () => {
     //                 transaction_history: {
     //                     is_transactions_crypto_visible: false,
     //                 },
-    //                 payment_agent: {
-    //                     is_payment_agent_visible: true,
-    //                 },
     //             },
     //         },
     //     });
@@ -259,9 +282,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
-                    payment_agent: {
-                        is_payment_agent_visible: true,
-                    },
                 },
             },
         });
@@ -311,9 +331,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
-                    payment_agent: {
-                        is_payment_agent_visible: true,
-                    },
                 },
             },
         });
@@ -364,9 +381,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
-                    payment_agent: {
-                        is_payment_agent_visible: true,
-                    },
                 },
             },
         });

diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx
@@ -16,11 +16,12 @@ import {
     useOnrampVisible,
     useAccountTransferVisible,
     useIsP2PEnabled,
+    usePaymentAgentList,
     usePaymentAgentTransferVisible,
     useP2PNotificationCount,
     useP2PSettings,
 } from '@deriv/hooks';
-import { getSelectedRoute, getStaticUrl, routes, setPerformanceValue, WS } from '@deriv/shared';
+import { getSelectedRoute, getStaticUrl, routes, setPerformanceValue, WS, matchRoute } from '@deriv/shared';
 import ErrorDialog from '../../components/error-dialog';
 import { TRoute } from '../../types';
 import { localize } from '@deriv/translations';
@@ -52,7 +53,7 @@ type TCashierOptions = {
 
 const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => {
     const { common, ui, client } = useStore();
-    const { withdraw, general_store, payment_agent } = useCashierStore();
+    const { withdraw, general_store } = useCashierStore();
     const { error } = withdraw;
     const {
         is_cashier_onboarding,
@@ -65,13 +66,18 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     } = general_store;
     const {
         data: is_payment_agent_transfer_visible,
-        isLoading: is_payment_agent_checking,
+        isLoading: is_payment_agent_transfer_checking,
         isSuccess: is_payment_agent_transfer_visible_is_success,
     } = usePaymentAgentTransferVisible();
-    const { is_payment_agent_visible } = payment_agent;
     const { is_from_derivgo } = common;
     const { is_cashier_visible: is_visible, is_mobile, toggleCashier, toggleReadyToDepositModal } = ui;
     const { currency, is_account_setting_loaded, is_logged_in, is_logging_in, is_svg, is_virtual } = client;
+    const {
+        data: paymentAgentList,
+        isLoading: is_payment_agent_list_loading,
+        isSuccess: is_payment_agent_list_success,
+    } = usePaymentAgentList(currency);
+    const is_payment_agent_visible = paymentAgentList && paymentAgentList.length > 0;
     const is_account_transfer_visible = useAccountTransferVisible();
     const is_onramp_visible = useOnrampVisible();
     const p2p_notification_count = useP2PNotificationCount();
@@ -240,15 +246,26 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         toggleReadyToDepositModal,
     ]);
 
-    if (
+    const is_p2p_loading = is_p2p_enabled_loading && !is_p2p_enabled_success;
+    const is_payment_agent_loading = is_payment_agent_list_loading && !is_payment_agent_list_success;
+    const is_cashier_loading =
         ((!is_logged_in || is_mobile) && is_logging_in) ||
         !is_account_setting_loaded ||
-        is_payment_agent_checking ||
-        (is_p2p_enabled_loading && !is_p2p_enabled_success)
-    ) {
+        is_payment_agent_transfer_checking ||
+        is_p2p_loading ||
+        is_payment_agent_loading;
+
+    if (is_cashier_loading) {
         return <Loading is_fullscreen />;
     }
 
+    // Calculation of `initial_tab_index` must be performed after cashier loading
+    // Because at this stage `getMenuOptions` list has all available routes
+    const initial_tab_index = Math.max(
+        getMenuOptions.findIndex(item => matchRoute(item, location.pathname)),
+        0
+    );
+
     // measure performance metrics (load cashier time)
     setPerformanceValue('load_cashier_time');
 
@@ -260,6 +277,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                     <DesktopWrapper>
                         <VerticalTab
                             current_path={location.pathname}
+                            initial_vertical_tab_index={initial_tab_index}
                             is_floating
                             setVerticalTabIndex={setTabIndex}
                             vertical_tab_index={is_default_route ? 0 : tab_index}

diff --git a/packages/cashier/src/modules/cashier-onboarding/cashier-onboarding.tsx b/packages/cashier/src/modules/cashier-onboarding/cashier-onboarding.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { Analytics } from '@deriv-com/analytics';
 import { useHasSetCurrency } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
 import { useHistory } from 'react-router';
@@ -16,12 +17,23 @@ import {
 
 const CashierOnboarding: React.FC = observer(() => {
     const history = useHistory();
-    const { ui } = useStore();
+    const { client, ui } = useStore();
+    const { loginid } = client;
     const { general_store } = useCashierStore();
     const { setIsCashierOnboarding } = general_store;
     const { toggleSetCurrencyModal } = ui;
     const has_set_currency = useHasSetCurrency();
 
+    useEffect(() => {
+        if (loginid) {
+            Analytics.trackEvent('ce_cashier_deposit_onboarding_form', {
+                action: 'open',
+                form_name: 'ce_cashier_deposit_onboarding_form',
+                login_id: loginid,
+            });
+        }
+    }, [loginid]);
+
     useEffect(() => {
         setIsCashierOnboarding(true);
 

diff --git a/...r-onboarding/components/cashier-onboarding-card/__test__/cashier-onboarding-card.test.tsx b/...r-onboarding/components/cashier-onboarding-card/__test__/cashier-onboarding-card.test.tsx
@@ -10,6 +10,7 @@ describe('CashierOnboardingCard', () => {
         const props: React.ComponentProps<typeof CashierOnboardingCard> = {
             title: 'foo',
             description: 'bar',
+            depositCategory: 'crypto',
             onClick: jest.fn(),
         };
 

diff --git a/...modules/cashier-onboarding/components/cashier-onboarding-card/cashier-onboarding-card.tsx b/...modules/cashier-onboarding/components/cashier-onboarding-card/cashier-onboarding-card.tsx
@@ -1,19 +1,33 @@
 import React from 'react';
+import { Analytics } from '@deriv-com/analytics';
 import { Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import './cashier-onboarding-card.scss';
 
 type TProps = {
     title: string;
     description: string;
+    depositCategory: 'crypto' | 'fiat' | 'fiat_onramp' | 'payment_agent' | 'p2p';
     onClick?: VoidFunction;
 };
 
 const CashierOnboardingCard: React.FC<React.PropsWithChildren<TProps>> = observer(
-    ({ title, description, onClick, children }) => {
-        const { ui } = useStore();
+    ({ title, description, depositCategory, onClick, children }) => {
+        const { client, ui } = useStore();
+        const { currency, loginid } = client;
         const { is_dark_mode_on, is_mobile } = ui;
 
+        const onClickHandler = () => {
+            onClick?.();
+            Analytics.trackEvent('ce_cashier_deposit_onboarding_form', {
+                action: 'click_deposit_card',
+                form_name: 'ce_cashier_deposit_onboarding_form',
+                deposit_category: depositCategory,
+                currency,
+                login_id: loginid,
+            });
+        };
+
         return (
             <div>
                 <Text size={is_mobile ? 's' : 'sm'} weight='bold' color='prominent'>
@@ -22,7 +36,7 @@ const CashierOnboardingCard: React.FC<React.PropsWithChildren<TProps>> = observe
                 <div
                     className='cashier-onboarding-card__container'
                     data-testid='dt_cashier_onboarding_card'
-                    onClick={onClick}
+                    onClick={onClickHandler}
                 >
                     <div className='cashier-onboarding-card__content'>
                         <Text size={is_mobile ? 'xxs' : 'xs'} className='cashier-onboarding-card__description'>

diff --git a/...r-onboarding/components/cashier-onboarding-crypto-card/cashier-onboarding-crypto-card.tsx b/...r-onboarding/components/cashier-onboarding-crypto-card/cashier-onboarding-crypto-card.tsx
@@ -36,6 +36,7 @@ const CashierOnboardingCryptoCard: React.FC = observer(() => {
         <CashierOnboardingCard
             title={localize('Deposit cryptocurrencies')}
             description={localize('We accept the following cryptocurrencies:')}
+            depositCategory='crypto'
             onClick={onClick}
         >
             <CashierOnboardingIconMarquee icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)} />

diff --git a/...shier-onboarding/components/cashier-onboarding-fiat-card/cashier-onboarding-fiat-card.tsx b/...shier-onboarding/components/cashier-onboarding-fiat-card/cashier-onboarding-fiat-card.tsx
@@ -42,20 +42,25 @@ const CashierOnboardingFiatCard: React.FC = observer(() => {
     };
 
     return (
-        <CashierOnboardingCard
-            title={localize('Deposit via bank wire, credit card, and e-wallet')}
-            description={localize('Deposit via the following payment methods:')}
-            onClick={is_dialog_visible ? undefined : onClick}
-        >
-            <CashierOnboardingIconMarquee icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)} />
+        <React.Fragment>
+            <CashierOnboardingCard
+                title={localize('Deposit via bank wire, credit card, and e-wallet')}
+                description={localize('Deposit via the following payment methods:')}
+                depositCategory='fiat'
+                onClick={is_dialog_visible ? undefined : onClick}
+            >
+                <CashierOnboardingIconMarquee
+                    icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)}
+                />
+            </CashierOnboardingCard>
             {can_switch_to_fiat_account && (
                 <SwitchToFiatAccountDialog
                     is_visible={is_dialog_visible}
                     onCancel={() => setIsDialogVisible(false)}
                     onSwitchDone={onSwitchDone}
                 />
             )}
-        </CashierOnboardingCard>
+        </React.Fragment>
     );
 });
 

diff --git a/...r-onboarding/components/cashier-onboarding-onramp-card/cashier-onboarding-onramp-card.tsx b/...r-onboarding/components/cashier-onboarding-onramp-card/cashier-onboarding-onramp-card.tsx
@@ -34,6 +34,7 @@ const CashierOnboardingOnrampCard: React.FC = observer(() => {
                     : localize('Buy cryptocurrencies via fiat onramp')
             }
             description={localize('Choose any of these exchanges to buy cryptocurrencies:')}
+            depositCategory='fiat_onramp'
             onClick={onClick}
         >
             <CashierOnboardingIconMarquee icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)} />

diff --git a/...cashier-onboarding/components/cashier-onboarding-p2p-card/cashier-onboarding-p2p-card.tsx b/...cashier-onboarding/components/cashier-onboarding-p2p-card/cashier-onboarding-p2p-card.tsx
@@ -46,21 +46,23 @@ const CashierOnboardingP2PCard: React.FC = observer(() => {
     if (!should_show_p2p_card) return null;
 
     return (
-        <CashierOnboardingCard
-            title={localize('Deposit with Deriv P2P')}
-            description={localize(
-                'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
-            )}
-            onClick={is_dialog_visible ? undefined : onClick}
-        >
+        <React.Fragment>
+            <CashierOnboardingCard
+                title={localize('Deposit with Deriv P2P')}
+                description={localize(
+                    'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
+                )}
+                depositCategory='p2p'
+                onClick={is_dialog_visible ? undefined : onClick}
+            />
             {can_switch_to_fiat_account && (
                 <SwitchToFiatAccountDialog
                     is_visible={is_dialog_visible}
                     onCancel={() => setIsDialogVisible(false)}
                     onSwitchDone={onSwitchDone}
                 />
             )}
-        </CashierOnboardingCard>
+        </React.Fragment>
     );
 });
 

diff --git a/...omponents/cashier-onboarding-payment-agent-card/cashier-onboarding-payment-agent-card.tsx b/...omponents/cashier-onboarding-payment-agent-card/cashier-onboarding-payment-agent-card.tsx
@@ -28,6 +28,7 @@ const CashierOnboardingPaymentAgentCard: React.FC = observer(() => {
             description={localize(
                 'Deposit in your local currency via an authorised, independent payment agent in your country.'
             )}
+            depositCategory='payment_agent'
             onClick={onClick}
         />
     );