Suisin/chore: add analytics to track error events (deriv-com#17070)

* chore: add analytics to track error events * chore: update tracking negative scenario events actions and subform * chore: change error_message to error_code * chore: update session timeout tracking event
heorhi-deriv · Oct 17, 2024 · 477c7f3 · 477c7f3
1 parent 4d74694
commit 477c7f3
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 8 deletions.
diff --git a/...es/account/src/Sections/Profile/PhoneVerification/__test__/session-timeout-modal.spec.tsx b/...es/account/src/Sections/Profile/PhoneVerification/__test__/session-timeout-modal.spec.tsx
@@ -26,7 +26,7 @@ describe('SessionTimeoutModal', () => {
     const renderComponent = () => {
         render(
             <StoreProvider store={mock_store}>
-                <SessionTimeoutModal />
+                <SessionTimeoutModal is_at_otp_verification />
             </StoreProvider>
         );
     };

diff --git a/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx b/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
@@ -9,7 +9,6 @@ import { VERIFICATION_SERVICES } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Button, Snackbar, Text, TextFieldAddon } from '@deriv-com/quill-ui';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import PhoneVerificationCard from './phone-verification-card';
 import { validatePhoneNumber } from './validation';
 
 type TConfirmPhoneNumber = {
@@ -54,14 +53,20 @@ const ConfirmPhoneNumber = observer(({ show_confirm_phone_number, setOtpVerifica
 
     useEffect(() => {
         if (email_otp_error) {
+            trackPhoneVerificationEvents({
+                action: 'error',
+                subform_name: 'verify_phone_screen',
+                //@ts-expect-error will fix this later
+                error_code: email_otp_error.code,
+            });
             invalidate('get_settings').then(() => setIsButtonLoading(false));
         }
         if (is_email_verified) {
             setIsButtonLoading(false);
             setOtpVerification({ show_otp_verification: true, phone_verification_type });
             setShouldShowPhoneNumberOTP(true);
         }
-    }, [is_email_verified, email_otp_error, invalidate]);
+    }, [is_email_verified, email_otp_error, invalidate, trackPhoneVerificationEvents]);
 
     const handleOnChangePhoneNumber = (e: ChangeEvent<HTMLInputElement>) => {
         setPhoneNumber(e.target.value);

diff --git a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
@@ -61,6 +61,17 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
         });
     }, [invalidate]);
 
+    useEffect(() => {
+        if (email_otp_error) {
+            trackPhoneVerificationEvents({
+                action: 'error',
+                subform_name: should_show_phone_number_otp ? 'verify_phone_otp_screen' : 'verify_email_screen',
+                // @ts-expect-error will remove once solved
+                error_code: email_otp_error.code,
+            });
+        }
+    }, [email_otp_error, trackPhoneVerificationEvents, should_show_phone_number_otp]);
+
     useEffect(() => {
         if (should_show_phone_number_otp) {
             trackPhoneVerificationEvents({

diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx
@@ -101,7 +101,9 @@ const PhoneVerificationPage = observer(() => {
                 should_show_verification_link_expired_modal={should_show_verification_link_expired_modal}
                 setShouldShowVerificationLinkExpiredModal={setShouldShowVerificationLinkExpiredModal}
             />
-            {!should_show_verification_link_expired_modal && <SessionTimeoutModal />}
+            {!should_show_verification_link_expired_modal && (
+                <SessionTimeoutModal is_at_otp_verification={otp_verification.show_otp_verification} />
+            )}
             <CancelPhoneVerificationModal />
             {isDesktop && (
                 <div className='phone-verification__redirect_button'>

diff --git a/packages/account/src/Sections/Profile/PhoneVerification/session-timeout-modal.tsx b/packages/account/src/Sections/Profile/PhoneVerification/session-timeout-modal.tsx
@@ -1,25 +1,42 @@
 import { useHistory } from 'react-router';
-import { usePhoneNumberVerificationSessionTimer } from '@deriv/hooks';
+import { usePhoneNumberVerificationSessionTimer, usePhoneVerificationAnalytics } from '@deriv/hooks';
 import { routes } from '@deriv/shared';
 import { Modal, Text } from '@deriv-com/quill-ui';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import { observer, useStore } from '@deriv/stores';
 import { useEffect } from 'react';
 
-const SessionTimeoutModal = observer(() => {
+const SessionTimeoutModal = observer(({ is_at_otp_verification }: { is_at_otp_verification: boolean }) => {
     const { isMobile } = useDevice();
     const history = useHistory();
     const { localize } = useTranslations();
     const { should_show_session_timeout_modal } = usePhoneNumberVerificationSessionTimer();
     const { ui } = useStore();
-    const { is_phone_verification_completed, setShouldShowPhoneNumberOTP, setIsForcedToExitPnv } = ui;
+    const {
+        is_phone_verification_completed,
+        setShouldShowPhoneNumberOTP,
+        setIsForcedToExitPnv,
+        should_show_phone_number_otp,
+    } = ui;
+    const { trackPhoneVerificationEvents } = usePhoneVerificationAnalytics();
+
+    const getSubformName = () => {
+        if (is_at_otp_verification) {
+            return should_show_phone_number_otp ? 'verify_phone_otp_screen' : 'verify_email_screen';
+        }
+        return 'verify_phone_screen';
+    };
 
     useEffect(() => {
         if (should_show_session_timeout_modal) {
             setIsForcedToExitPnv(true);
+            trackPhoneVerificationEvents({
+                action: 'open_session_expired_popup',
+                subform_name: getSubformName(),
+            });
         }
-    }, [should_show_session_timeout_modal]);
+    }, [should_show_session_timeout_modal, trackPhoneVerificationEvents]);
 
     const redirectBackToPersonalDetails = () => {
         setIsForcedToExitPnv(false);

diff --git a/packages/hooks/src/useRequestPhoneNumberOTP.tsx b/packages/hooks/src/useRequestPhoneNumberOTP.tsx
@@ -3,6 +3,7 @@ import { useMutation } from '@deriv/api';
 import { getCarriers, getUseRequestPhoneNumberOTPErrorMessage, VERIFICATION_SERVICES } from '@deriv/shared';
 import useSettings from './useSettings';
 import { useStore } from '@deriv/stores';
+import usePhoneVerificationAnalytics from './usePhoneVerificationAnalytics';
 
 type TFormatError = {
     code: string;
@@ -27,6 +28,7 @@ const useRequestPhoneNumberOTP = () => {
     const {
         mutation: { mutateAsync: updateSettings },
     } = useSettings();
+    const { trackPhoneVerificationEvents } = usePhoneVerificationAnalytics();
 
     React.useEffect(() => {
         //@ts-expect-error will fix this later
@@ -72,6 +74,12 @@ const useRequestPhoneNumberOTP = () => {
                 payload: value,
             });
         } catch (err) {
+            trackPhoneVerificationEvents({
+                action: 'error',
+                subform_name: 'verify_phone_screen',
+                // @ts-expect-error will remove once solved
+                error_code: err.code,
+            });
             formatError(err as TFormatError);
             error = err;
         }

diff --git a/packages/hooks/src/useSendOTPVerificationCode.tsx b/packages/hooks/src/useSendOTPVerificationCode.tsx
@@ -5,6 +5,7 @@ import useRequestPhoneNumberOTP from './useRequestPhoneNumberOTP';
 import { useStore } from '@deriv/stores';
 import useSettings from './useSettings';
 import { emailOTPErrorMessage, phoneOTPErrorMessage } from '@deriv/shared';
+import usePhoneVerificationAnalytics from './usePhoneVerificationAnalytics';
 
 /** A hook for verifying Phone Number OTP and Email OTP */
 const useSendOTPVerificationCode = () => {
@@ -29,6 +30,7 @@ const useSendOTPVerificationCode = () => {
         requestOnSMS,
         requestOnWhatsApp,
     } = useRequestPhoneNumberOTP();
+    const { trackPhoneVerificationEvents } = usePhoneVerificationAnalytics();
 
     type OTPErrorCode =
         | 'PhoneCodeExpired'
@@ -69,6 +71,12 @@ const useSendOTPVerificationCode = () => {
     // Usage in useEffect
     useEffect(() => {
         if (phone_otp_error) {
+            trackPhoneVerificationEvents({
+                action: 'error',
+                subform_name: 'verify_phone_otp_screen',
+                // @ts-expect-error will remove once solved
+                error_code: phone_otp_error.code,
+            });
             // @ts-expect-error will remove once solved
             formatOtpError(phone_otp_error);
         } else if (email_otp_error) {