TP-69871 | added clickstream events for Cosmos Sync Block longhorn (#1089)

* TP-69871 | added clickstream events for Cosmos Sync Block longhorn

* TP-69871 | added clickstream event

* TP-69871 | prettier

src/pages/LonghornBlock/LonghornWarning.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import ModalWarning from './ModalWarning';
 import DraggableWarning from './DraggableWarning';
 import Overlay from '@cp/src/components/Overlay/Overlay';
@@ -14,16 +14,19 @@ import { CALL_BRIDGE_STATUSES } from '@cp/pages/CaseDetails/feedbackForm/interfa
 import { RootState } from '@cp/src/store';
 import { ExtensionHandler } from '@cp/utils/extension.utils';
 import { useNavigate } from 'react-router-dom';
+import { addClickstreamEvent } from '@cp/src/service/clickStreamEventService';
+import { AgentTrackingEvents } from '@cp/src/service/clickStream.constant';
 
 const LonghornWarning = () => {
-  const [isDraggableWarningVIsible, setIsDraggableWarningVIsible] = useState(false);
+  const [isDraggableWarningVisible, setIsDraggableWarningVisible] = useState(false);
   const lastSyncTimeStamp = useSelector((state: RootState) => state.common.lastSyncTimestamp);
   const timeRemaining = Date.now() - lastSyncTimeStamp;
   const timeRemainingInSeconds = Number((timeRemaining / 1000).toFixed(0));
   const initialRemainingTime = COUNTDOWN_INTERVAL_BEFORE_BLOCKING - timeRemainingInSeconds;
   const [localTimeLeft, setLocalTimeLeft] = useState(initialRemainingTime);
   const handleOnClose = () => {
-    setIsDraggableWarningVIsible(true);
+    addClickstreamEvent(AgentTrackingEvents.LH_COSMOS_SYNC_WARNING_CTA_BUTTON_CLICKED);
+    setIsDraggableWarningVisible(true);
   };
   const dispatch = useDispatch();
   const slashCallStatus = useSelector((store: RootState) => store.common.slashCallStatus);
@@ -45,15 +48,19 @@ const LonghornWarning = () => {
     dispatch(setCosmosSyncBlockStatus(CosmosSyncBlockStatus.BLOCKED));
     ExtensionHandler.setAvailability(false);
     ExtensionHandler.blockSlash();
-    setIsDraggableWarningVIsible(false);
+    setIsDraggableWarningVisible(false);
   };
 
+  useEffect(() => {
+    addClickstreamEvent(AgentTrackingEvents.LH_COSMOS_SYNC_WARNING_MODAL_LOADED);
+  }, []);
+
   return (
     <>
-      {isDraggableWarningVIsible ? (
+      {isDraggableWarningVisible ? (
         <DraggableWarning timeLeft={localTimeLeft} />
       ) : (
-        <Overlay visible={!isDraggableWarningVIsible}>
+        <Overlay visible={!isDraggableWarningVisible}>
           <ModalWarning handleOnClose={handleOnClose} timeLeft={localTimeLeft} />
         </Overlay>
       )}

src/pages/LonghornBlock/index.tsx

@@ -1,11 +1,16 @@
+import { useEffect } from 'react';
 import Content from './Content';
 import Footer from './Footer';
 import Header from './Header';
 import styles from './index.module.scss';
-import { useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
+import { addClickstreamEvent } from '@cp/src/service/clickStreamEventService';
+import { AgentTrackingEvents } from '@cp/src/service/clickStream.constant';
 
 const LonghornBlock = () => {
+  useEffect(() => {
+    addClickstreamEvent(AgentTrackingEvents.LH_COSMOS_SYNC_AGENT_BLOCKED);
+  }, []);
+
   return (
     <div className="flex justify-center items-center h-[100%] flex-col mt-[64px]">
       <div className={styles.cardContainer}>

src/service/clickStream.constant.ts

@@ -1527,6 +1527,18 @@ export const AgentTrackingEvents = {
   LH_MAP_AGENT_REDIRECTION_ICON_CLICKED: {
     name: 'LH_MAP_AGENT_REDIRECTION_CLICKED',
     description: 'Map agent redirection icon clicked'
+  },
+  LH_COSMOS_SYNC_AGENT_BLOCKED: {
+    name: 'LH_COSMOS_SYNC_AGENT_BLOCKED',
+    description: 'Agent blocked due to failure of cosmos sync'
+  },
+  LH_COSMOS_SYNC_WARNING_MODAL_LOADED: {
+    name: 'LH_COSMOS_SYNC_WARNING_MODAL_LOADED',
+    description: 'Cosmos sync warning modal appeared'
+  },
+  LH_COSMOS_SYNC_WARNING_CTA_BUTTON_CLICKED: {
+    name: 'LH_COSMOS_SYNC_WARNING_CTA_CLICKED',
+    description: 'Agent clicked on the CTA in the cosmos sync warning modal'
   }
 };