From f9539b8befe8ee4d456f528e560de4e41ed33caf Mon Sep 17 00:00:00 2001 From: Rushikesh-Sonawane99 Date: Tue, 13 Aug 2024 15:12:35 +0530 Subject: [PATCH] git commit -m "Issue #PS-1632 chore: Added GA events on login, mark attendance and attendance-history and user create flow --- src/components/AddFacilitator.tsx | 9 ++++++++- src/components/AddLeanerModal.tsx | 8 ++++++++ src/components/CohortSelectionSection.tsx | 16 ++++++++-------- src/components/MarkBulkAttendance.tsx | 13 +++++++++++++ src/pages/attendance-history.tsx | 3 +++ src/pages/login.tsx | 14 +++++++++++++- src/pages/logout.tsx | 8 ++++++++ src/utils/telemetry.js | 15 ++++++++------- 8 files changed, 69 insertions(+), 17 deletions(-) diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx index 981bd058..98acee96 100644 --- 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 = ({ ) { 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 = ({ 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 = ({ } 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 index 76d8a23d..41fb347f 100644 --- 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 = ({ ); onLearnerAdded?.(); onClose(); + ReactGA.event('learner-creation-success', { + username: username, + }); const isQueue = false; const context = 'USER'; @@ -261,6 +265,10 @@ const AddLearnerModal: React.FC = ({ } 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 index 3a630b7c..592b04a8 100644 --- a/src/components/CohortSelectionSection.tsx +++ b/src/components/CohortSelectionSection.tsx @@ -130,23 +130,23 @@ const CohortSelectionSection: React.FC = ({ 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 = ({ 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 index 7b397eef..c1842d21 100644 --- 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 = ({ const [isAllAttendanceMarked, setIsAllAttendanceMarked] = React.useState(false); const [numberOfCohortMembers, setNumberOfCohortMembers] = React.useState(0); + const [teacherUserId, setTeacherUserId]= React.useState(''); const modalContainer = { position: 'absolute', @@ -137,10 +139,15 @@ const MarkBulkAttendance: React.FC = ({ ).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 = ({ } else { onSaveSuccess(true); } + ReactGA.event('attendance-marked/update-success', { + teacherId: teacherUserId, + }); onClose(); } @@ -353,6 +363,9 @@ const MarkBulkAttendance: React.FC = ({ 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 index f41597f0..05e30819 100644 --- 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 index 53ad7b8f..5d4affd3 100644 --- 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 index 3930a111..81837913 100644 --- 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 index 9d825d22..918fe85a 100644 --- 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: {}, + }); + } } },