git commit -m "Issue #PS-1632 chore: Added GA events on login, mark a…

…ttendance and attendance-history and user create flow
tekdi · Aug 13, 2024 · f9539b8 · f9539b8
1 parent 167bc13
commit f9539b8
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 17 deletions.
diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx
@@ -4,6 +4,7 @@ import {
 } from '@/components/GeneratedSchemas';
 import { FormContext, FormContextType, RoleId } from '@/utils/app.constant';
 import React, { useEffect } from 'react';
+import ReactGA from 'react-ga4';
 
 import DynamicForm from '@/components/DynamicForm';
 import SendCredentialModal from '@/components/SendCredentialModal';
@@ -196,7 +197,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
           ) {
             apiBody.customFields.push({
               fieldId: fieldId,
-              value: Array.isArray(fieldValue) ? fieldValue : [fieldValue], 
+              value: Array.isArray(fieldValue) ? fieldValue : [fieldValue],
             });
           } else {
             if (fieldSchema.checkbox && fieldSchema.type === 'array') {
@@ -272,6 +273,9 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
                     t('COMMON.FACILITATOR_ADDED_SUCCESSFULLY'),
                     'success'
                   );
+                  ReactGA.event('facilitator-created-successfully', {
+                    user_name: username,
+                  });
 
                   const isQueue = false;
                   const context = 'USER';
@@ -318,6 +322,9 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
               } catch (error) {
                 console.error(error);
                 showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
+                ReactGA.event('facilitator-creation-fail', {
+                  error: error,
+                });      
               }
             }
           } else {

diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
@@ -19,6 +19,7 @@ import SendCredentialModal from './SendCredentialModal';
 import FormButtons from './FormButtons';
 import { sendCredentialService } from '@/services/NotificationService';
 import useSubmittedButtonStore from '@/store/useSubmittedButtonStore';
+import ReactGA from 'react-ga4';
 
 interface AddLearnerModalProps {
   open: boolean;
@@ -217,6 +218,9 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
             );
             onLearnerAdded?.();
             onClose();
+            ReactGA.event('learner-creation-success', {
+              username: username,
+            });
 
             const isQueue = false;
             const context = 'USER';
@@ -261,6 +265,10 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({
       } catch (error) {
         showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
         setReloadProfile(true);
+        ReactGA.event('learner-creation-fail', {
+          error: error,
+        });
+
       }
     }
   };

diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
@@ -130,23 +130,23 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
           console.log('Response:', response);
           const cohortData = response[0];
           if (cohortData?.customField?.length) {
-            const district = cohortData.customField.find(
-              (item: CustomField) => item.label === 'DISTRICTS'
+            const district = cohortData?.customField?.find(
+              (item: CustomField) => item?.label === 'DISTRICTS'
             );
             setDistrictCode(district?.code);
             setDistrictId(district?.fieldId);
 
-            const state = cohortData.customField.find(
-              (item: CustomField) => item.label === 'STATES'
+            const state = cohortData?.customField?.find(
+              (item: CustomField) => item?.label === 'STATES'
             );
             setStateCode(state?.code);
             setStateId(state?.fieldId);
 
-            const blockField = cohortData?.customField.find(
-              (field: any) => field.label === 'BLOCKS'
+            const blockField = cohortData?.customField?.find(
+              (field: any) => field?.label === 'BLOCKS'
             );
             setBlockCode(blockField?.code);
-            setBlockId(blockField.fieldId);
+            setBlockId(blockField?.fieldId);
           }
 
           if (response && response?.length > 0) {
@@ -158,7 +158,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                 items.forEach((item) => {
                   const cohortType =
                     item?.customField?.find(
-                      (field) => field.label === 'TYPE_OF_COHORT'
+                      (field) => field?.label === 'TYPE_OF_COHORT'
                     )?.value || 'Unknown';
                   if (item?.cohortId && item?.name) {
                     nameTypePairs.push({

diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
@@ -21,6 +21,7 @@ import { showToastMessage } from './Toastify';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { Status } from '@/utils/app.constant';
+import ReactGA from 'react-ga4';
 
 interface MarkBulkAttendanceProps {
   open: boolean;
@@ -64,6 +65,7 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
   const [isAllAttendanceMarked, setIsAllAttendanceMarked] =
     React.useState(false);
   const [numberOfCohortMembers, setNumberOfCohortMembers] = React.useState(0);
+  const [teacherUserId, setTeacherUserId]= React.useState<string>('');
 
   const modalContainer = {
     position: 'absolute',
@@ -137,10 +139,15 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
       ).length
     );
   }
+
   useEffect(() => {
     submitBulkAttendanceAction(true, '', '');
     const getCohortMemberList = async () => {
       setLoading(true);
+      if (typeof window !== 'undefined' && window.localStorage) {
+        const storedUserID = localStorage.getItem('userId');
+        setTeacherUserId(storedUserID ?? '');
+      }
       try {
         if (classId) {
           const limit = 300;
@@ -343,6 +350,9 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
               } else {
                 onSaveSuccess(true);
               }
+              ReactGA.event('attendance-marked/update-success', {
+                teacherId: teacherUserId,
+              });
 
               onClose();
             }
@@ -353,6 +363,9 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
           console.error('Error fetching cohort list:', error);
           setLoading(false);
           showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
+          ReactGA.event('attendance-marked/update-fail', {
+            error: error
+          });
         }
         // handleClick({ vertical: 'bottom', horizontal: 'center' })();
       };

diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
@@ -97,6 +97,9 @@ const UserAttendanceHistory = () => {
 
   const handleOpen = () => {
     setOpen(true);
+    ReactGA.event('mark/modify-attendance-button-clicked-attendance-history', {
+      teacherId: userId,
+    });
   };
 
   const handleClose = () => {

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -125,6 +125,12 @@ const LoginPage = () => {
             const userResponse = await getUserId();
             localStorage.setItem('userId', userResponse?.userId);
             setUserId(userResponse?.userId);
+            logEvent({
+              action: 'login-success',
+              category: 'Login Page',
+              label: 'Login Success',
+              value: userResponse?.userId
+            });
             localStorage.setItem('state', userResponse?.state);
             localStorage.setItem('district', userResponse?.district);
             localStorage.setItem('role', userResponse?.tenantData[0]?.roleName);
@@ -156,6 +162,12 @@ const LoginPage = () => {
             t('LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT'),
             'error'
           );
+          logEvent({
+            action: 'login-fail',
+            category: 'Login Page',
+            label: 'Login Fail',
+            value: error.response
+          });
         } else {
           console.error('Error:', error);
           showToastMessage(
@@ -206,7 +218,7 @@ const LoginPage = () => {
     logEvent({
       action: 'forgot-password-link-clicked',
       category: 'Login Page',
-      label: 'Forgot Password Link Clicked',
+      label: 'Forgot Password Link Clicked', 
     });
   };
 

diff --git a/src/pages/logout.tsx b/src/pages/logout.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { logout } from '../services/LoginService';
 import { telemetryFactory } from '@/utils/telemetry';
+import ReactGA from 'react-ga4';
 
 function Logout() {
   const router = useRouter();
@@ -34,11 +35,18 @@ function Logout() {
 
       try {
         const refreshToken = localStorage.getItem('refreshToken');
+        const userId = localStorage.getItem('userId')
         if (refreshToken) {
           await logout(refreshToken);
+          ReactGA.event('logout-success', {
+            userId: userId
+          });
         }
       } catch (error) {
         console.log(error);
+        ReactGA.event('logout-fail', {
+          error: error
+        });
       }
     };
     userLogout();

diff --git a/src/utils/telemetry.js b/src/utils/telemetry.js
@@ -36,6 +36,7 @@ const telemetryConfig = {
   host: hostURL,
   endpoint: '/telemetry/v1/telemetry',
   tags: [],
+  enableValidation: true
 };
 
 if (typeof window !== 'undefined') {
@@ -48,13 +49,13 @@ export const telemetryFactory = {
   init: () => {
     if (typeof window !== 'undefined') {
       console.log('EkTelemetry', EkTelemetry);
-      // if (!CsTelemetryModule.instance.isInitialised) {
-      //   CsTelemetryModule.instance.init({});
-      //   CsTelemetryModule.instance.telemetryService.initTelemetry({
-      //     config: telemetryConfig,
-      //     userOrgDetails: {},
-      //   });
-      // }
+      if (!CsTelemetryModule.instance.isInitialised) {
+        CsTelemetryModule.instance.init({});
+        CsTelemetryModule.instance.telemetryService.initTelemetry({
+          config: telemetryConfig,
+          userOrgDetails: {},
+        });
+      }
     }
   },