From 8d6a05c4ba31ebbb0213763e52439ac7ada489d3 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Wed, 6 Nov 2024 16:26:52 +0530 Subject: [PATCH] Issue featPS-2306: add telemetry events for center, manage user and master data --- src/components/ActionIcon.tsx | 62 ++++++++- src/components/AddNewCenters.tsx | 22 +++- src/components/CommonUserModal.tsx | 43 +++++++ src/components/HeaderComponent.tsx | 59 ++++++++- src/components/ReassignCenterModal.tsx | 2 +- src/components/UserTable.tsx | 62 ++++++++- src/components/layouts/header/Profile.tsx | 21 +++- src/components/layouts/header/SearchBar.tsx | 18 +++ src/pages/_app.tsx | 48 ++++++- src/pages/block.tsx | 133 ++++++++++++++++++++ src/pages/centers.tsx | 113 +++++++++++++++++ src/pages/district.tsx | 108 ++++++++++++++++ src/pages/facilitator.tsx | 22 +++- src/pages/learners.tsx | 22 +++- src/pages/state.tsx | 22 +++- src/pages/team-leader.tsx | 22 +++- src/utils/app.constant.ts | 6 + src/utils/telemetry.js | 14 +-- 18 files changed, 778 insertions(+), 21 deletions(-) diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx index e8d009b4..6936a990 100644 --- a/src/components/ActionIcon.tsx +++ b/src/components/ActionIcon.tsx @@ -9,6 +9,8 @@ import cohortIcon from '../../public/images/apartment.svg'; import Image from "next/image"; +import { TelemetryEventType } from "@/utils/app.constant"; +import { telemetryFactory } from "@/utils/telemetry"; interface ActionCellProps { onEdit: (rowData: any) => void; @@ -45,6 +47,24 @@ const ActionIcon: React.FC = ({ { onEdit(rowData); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: rowData?.cohortId?'click-edit-delete-action:'+rowData?.cohortId:rowData?.userId? 'edit-on-delete-action:'+rowData?.userId:'edit-on-delete-action', + + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }} sx={{ display: "flex", @@ -67,7 +87,27 @@ const ActionIcon: React.FC = ({ { + + console.log(rowData) + onDelete(rowData); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: rowData?.cohortId?'click-on-delete-action:'+rowData?.cohortId:rowData?.userId? 'click-on-delete-action:'+rowData?.userId:'click-on-delete-action', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }} sx={{ display: "flex", @@ -91,7 +131,27 @@ const ActionIcon: React.FC = ({ { if(reassignCohort) - reassignCohort(rowData); + { + reassignCohort(rowData); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-reassign-action:'+rowData?.userId, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + } + }} sx={{ display: "flex", diff --git a/src/components/AddNewCenters.tsx b/src/components/AddNewCenters.tsx index a35f2868..864b3f0d 100644 --- a/src/components/AddNewCenters.tsx +++ b/src/components/AddNewCenters.tsx @@ -5,7 +5,7 @@ import { } from "@/components/GeneratedSchemas"; import SimpleModal from "@/components/SimpleModal"; import { getFormRead } from "@/services/CreateUserService"; -import { CohortTypes, FormContext, FormContextType, apiCatchingDuration } from "@/utils/app.constant"; +import { CohortTypes, FormContext, FormContextType, TelemetryEventType, apiCatchingDuration } from "@/utils/app.constant"; import { useLocationState } from "@/utils/useLocationState"; import { Box, Button, Typography } from "@mui/material"; import { IChangeEvent } from "@rjsf/core"; @@ -19,6 +19,7 @@ import { createCohort } from "@/services/CohortService/cohortService"; import useSubmittedButtonStore from "@/utils/useSharedState"; import FrameworkCategories from "./FrameworkCategories"; import { useQuery } from "@tanstack/react-query"; +import { telemetryFactory } from "@/utils/telemetry"; interface CustomField { fieldId: string; @@ -227,6 +228,25 @@ const AddNewCenters: React.FC = ({ const cohortData = await createCohort(cohortDetails); if (cohortData) { showToastMessage(t("CENTERS.CENTER_CREATED_SUCCESSFULLY"), "success"); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'center-created-successfully', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + createCenterStatus? setCreateCenterStatus(false):setCreateCenterStatus(true) setOpenAddNewCohort(false); onClose(); diff --git a/src/components/CommonUserModal.tsx b/src/components/CommonUserModal.tsx index 89e263b5..5a0cbe57 100644 --- a/src/components/CommonUserModal.tsx +++ b/src/components/CommonUserModal.tsx @@ -21,6 +21,7 @@ import { Role, RoleId, Status, + TelemetryEventType, apiCatchingDuration, } from "@/utils/app.constant"; import { useLocationState } from "@/utils/useLocationState"; @@ -39,6 +40,7 @@ import { showToastMessage } from "./Toastify"; import { cohortMemberList } from "@/services/UserList"; import CustomModal from "./CustomModal"; import { setConfig } from "next/config"; +import { telemetryFactory } from "@/utils/telemetry"; interface UserModalProps { open: boolean; @@ -372,6 +374,27 @@ const CommonUserModal: React.FC = ({ : "TEAM_LEADERS.TEAM_LEADER_UPDATED_SUCCESSFULLY"; showToastMessage(t(messageKey), "success"); + + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: userType+'updated-successfully', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + } else { const response = await createUser(apiBody); console.log(response); @@ -380,6 +403,26 @@ const CommonUserModal: React.FC = ({ if (userType === FormContextType.STUDENT) { showToastMessage(t(messageKey), "success"); + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: userType+'created-successfully', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + } } else { showToastMessage(t("COMMON.SOMETHING_WENT_WRONG"), "error"); diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index f0983877..77031ddd 100644 --- a/src/components/HeaderComponent.tsx +++ b/src/components/HeaderComponent.tsx @@ -13,7 +13,7 @@ import Select from "@mui/material/Select"; import { useTheme } from "@mui/material/styles"; import { useTranslation } from "next-i18next"; import { useEffect, useState } from "react"; -import { QueryKeys, Role, Status } from "@/utils/app.constant"; +import { QueryKeys, Role, Status, TelemetryEventType } from "@/utils/app.constant"; import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord"; import { getCenterList, @@ -28,6 +28,7 @@ import { formatedBlocks, formatedDistricts } from "@/services/formatedCohorts"; import { useRouter } from "next/router"; import useSubmittedButtonStore from "@/utils/useSharedState"; import { userAgent } from "next/server"; +import { telemetryFactory } from "@/utils/telemetry"; interface State { value: string; @@ -189,6 +190,26 @@ const HeaderComponent = ({ console.log(error); } handleDistrictChange(selected, selectedCodes); + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'filter-by-district:'+selected[0], + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const handleBlockChangeWrapper = async ( @@ -233,12 +254,48 @@ const HeaderComponent = ({ console.log(dataArray); setAllCenters(cohortInfo); handleBlockChange(selected, selectedCodes); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'filter-by-block:'+selected[0], + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; const handleCenterChangeWrapper = ( selected: string[], selectedCodes: string[] ) => { handleCenterChange(selected, selectedCodes); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'filter-by-center:'+selected[0], + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; useEffect(() => { diff --git a/src/components/ReassignCenterModal.tsx b/src/components/ReassignCenterModal.tsx index 889857d7..148a207f 100644 --- a/src/components/ReassignCenterModal.tsx +++ b/src/components/ReassignCenterModal.tsx @@ -462,7 +462,7 @@ console.log(filters) value: cohort.value, })); -const formattedBlocks = filteredCBlocks.map(location => ({ +const formattedBlocks = filteredCBlocks?.map(location => ({ ...location, label: location.label ? location.label.split(' ') diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx index f7d98dba..bfe0f872 100644 --- a/src/components/UserTable.tsx +++ b/src/components/UserTable.tsx @@ -1,7 +1,7 @@ import DeleteUserModal from "@/components/DeleteUserModal"; import HeaderComponent from "@/components/HeaderComponent"; import PageSizeSelector from "@/components/PageSelector"; -import { FormContextType, SORT, Status } from "@/utils/app.constant"; +import { FormContextType, SORT, Status, TelemetryEventType } from "@/utils/app.constant"; import DeleteIcon from "@mui/icons-material/Delete"; import EditIcon from "@mui/icons-material/Edit"; import Box from "@mui/material/Box"; @@ -33,6 +33,7 @@ import { getCenterList, getStateBlockDistrictList } from "@/services/MasterDataS import { updateCohortMemberStatus } from "@/services/CohortService/cohortService"; import useSubmittedButtonStore from "@/utils/useSharedState"; import { useRouter } from "next/router"; +import { telemetryFactory } from "@/utils/telemetry"; type UserDetails = { userId: any; username: any; @@ -251,6 +252,25 @@ const UserTable: React.FC = ({ value: number ) => { setPageOffset(value - 1); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'change-page-number:'+value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const PagesSelector = () => ( @@ -351,6 +371,26 @@ const UserTable: React.FC = ({ }); } console.log(filters); + + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'changed-tab-to:'+newValue, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; const handleDistrictChange = (selected: string[], code: string[]) => { @@ -602,6 +642,26 @@ console.log(code[0]) } setSelectedSort(event.target?.value as string); + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'sort-by:'+event.target?.value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const mapFields = (formFields: any, response: any) => { let initialFormData: any = {}; diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx index 3d2d9fc9..11076041 100644 --- a/src/components/layouts/header/Profile.tsx +++ b/src/components/layouts/header/Profile.tsx @@ -1,5 +1,5 @@ import CommonUserModal from "@/components/CommonUserModal"; -import { FormContextType, Role } from "@/utils/app.constant"; +import { FormContextType, Role, TelemetryEventType } from "@/utils/app.constant"; import AccountCircleIcon from "@mui/icons-material/AccountCircle"; import FeatherIcon from "feather-icons-react"; import { useTranslation } from "next-i18next"; @@ -15,6 +15,7 @@ import MailIcon from "@mui/icons-material/Mail"; import PhoneIcon from "@mui/icons-material/Phone"; import { Box, Button, Divider, Menu, Typography } from "@mui/material"; import { useRouter } from "next/router"; +import { telemetryFactory } from "@/utils/telemetry"; const Profile = () => { const [anchorEl4, setAnchorEl4] = React.useState(null); const [profileClick, setProfileClick] = React.useState(false); @@ -39,6 +40,24 @@ const Profile = () => { const handleClick4 = (event: React.MouseEvent) => { setAnchorEl4(event.currentTarget); setProfileClick(true); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-profile', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; const handleClose4 = () => { diff --git a/src/components/layouts/header/SearchBar.tsx b/src/components/layouts/header/SearchBar.tsx index 59e339e4..b84f7168 100644 --- a/src/components/layouts/header/SearchBar.tsx +++ b/src/components/layouts/header/SearchBar.tsx @@ -4,6 +4,8 @@ import { IconButton, InputBase, Paper, useMediaQuery } from "@mui/material"; import { styled } from "@mui/system"; import React, { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; +import { TelemetryEventType } from "@/utils/app.constant"; +import { telemetryFactory } from "@/utils/telemetry"; interface SearchBarProps { onSearch: (keyword: string) => void; @@ -40,6 +42,22 @@ const SearchBar: React.FC = ({ onSearch, placeholder }) => { const delayDebounceFn = setTimeout(() => { if (keyword.trim().length >= 3 && validateKeyword(keyword)) { onSearch(keyword); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'search-input:'+keyword, + type: TelemetryEventType.SEARCH, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); } }, 500); // Debounce delay of 500ms diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 44525359..3877b981 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,7 +3,8 @@ import "@/styles/globals.css"; import type { AppProps } from "next/app"; import { appWithTranslation } from "next-i18next"; -import { initGA } from "../utils/googleAnalytics"; +import { initGA, logPageView } from '../utils/googleAnalytics'; + import { useEffect, useState } from "react"; import { AuthProvider } from "../context/AuthContext"; import { ToastContainer } from "react-toastify"; @@ -19,17 +20,56 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query" import { ReactQueryDevtools } from "@tanstack/react-query-devtools" import "react-circular-progressbar/dist/styles.css"; +import { useRouter } from "next/router"; +import { TelemetryEventType } from "@/utils/app.constant"; function App({ Component, pageProps }: AppProps) { + const router = useRouter(); + useEffect(() => { telemetryFactory.init(); }, []); + + useEffect(() => { + // Initialize GA only once if (!window.GA_INITIALIZED) { - initGA(`G-6NVMB20J4Z`); - window.GA_INITIALIZED = true; + initGA(`${process.env.NEXT_PUBLIC_MEASUREMENT_ID}`) + window.GA_INITIALIZED = true; } - }); + + const handleRouteChange = (url: string) => { + const windowUrl = url; + const cleanedUrl = windowUrl.replace(/^\//, ''); + + const telemetryImpression = { + context: { + env: cleanedUrl, + cdata: [], + }, + edata: { + type: TelemetryEventType.VIEW, + subtype: '', + pageid: cleanedUrl, + uri: '', + }, + }; + telemetryFactory.impression(telemetryImpression); + + logPageView(url); + }; + + // Log initial page load + handleRouteChange(window.location.pathname); + + // Subscribe to route changes and log page views + router.events.on('routeChangeComplete', handleRouteChange); + + // Clean up the subscription on unmount + return () => { + router.events.off('routeChangeComplete', handleRouteChange); + }; + }, [router.events]); const renderComponent = () => { if (pageProps.noLayout) { diff --git a/src/pages/block.tsx b/src/pages/block.tsx index 34a035f9..32887cc0 100644 --- a/src/pages/block.tsx +++ b/src/pages/block.tsx @@ -30,6 +30,7 @@ import { Storage, Numbers, QueryKeys, + TelemetryEventType, } from "@/utils/app.constant"; import { getUserDetailsInfo } from "@/services/UserList"; import { @@ -38,6 +39,7 @@ import { } from "@/services/CohortService/cohortService"; import { getBlockTableData } from "@/data/tableColumns"; import { Theme } from "@mui/system"; +import { telemetryFactory } from "@/utils/telemetry"; type StateDetail = { name: string | undefined; @@ -485,6 +487,24 @@ const Block: React.FC = () => { event.target.value === "Z-A" ? SORT.DESCENDING : SORT.ASCENDING; setSortBy(["name", sortOrder]); setSelectedSort(event.target.value); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'sort-by:'+event.target?.value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const handleStateChange = async (event: SelectChangeEvent) => { @@ -510,6 +530,25 @@ const Block: React.FC = () => { if (selectedDistrict) { await getCohortSearchBlock(selectedDistrict); } + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'filter-by-district:'+event.target.value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; useEffect(() => { @@ -591,6 +630,26 @@ const Block: React.FC = () => { queryKey: [QueryKeys.FIELD_OPTION_READ, newValue], queryFn: () => getCohortList({ status: newValue }), }); + + + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'changed-tab-to:'+newValue, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; const handleConfirmDelete = async () => { @@ -603,6 +662,24 @@ const Block: React.FC = () => { ) ); showToastMessage(t("COMMON.BLOCK_DELETED_SUCCESS"), "success"); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'block-deletion-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); } catch (error) { console.error("Error deleting state", error); showToastMessage(t("COMMON.BLOCK_DELETED_FAILURE"), "error"); @@ -643,6 +720,25 @@ const Block: React.FC = () => { value: number ) => { setPageOffset(value - 1); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'change-page-number:'+value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const PagesSelector = () => ( @@ -672,6 +768,24 @@ const Block: React.FC = () => { setEditState(null); setSelectedStateForEdit(null); setModalOpen(true); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; //create cohort @@ -776,6 +890,25 @@ const Block: React.FC = () => { await fetchBlocks(); await getCohortSearchBlock(selectedDistrict); showToastMessage(t("COMMON.BLOCK_UPDATED_SUCCESS"), "success"); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'block-update-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + } else if (cohortCreateResponse.responseCode === 409) { showToastMessage(t("COMMON.BLOCK_DUPLICATION_FAILURE"), "error"); } diff --git a/src/pages/centers.tsx b/src/pages/centers.tsx index e0928eae..f18c8fa5 100644 --- a/src/pages/centers.tsx +++ b/src/pages/centers.tsx @@ -21,6 +21,7 @@ import { SORT, Status, Storage, + TelemetryEventType, apiCatchingDuration, } from "@/utils/app.constant"; import EditIcon from "@mui/icons-material/Edit"; @@ -46,6 +47,7 @@ import DynamicForm from "@/components/DynamicForm"; import useSubmittedButtonStore from "@/utils/useSharedState"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useRouter } from "next/router"; +import { telemetryFactory } from "@/utils/telemetry"; type cohortFilterDetails = { type?: string; status?: any; @@ -404,6 +406,25 @@ const response= await fetchCohortMemberList(data); value: number ) => { setPageOffset(value - 1); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'change-page-number:'+value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const PagesSelector = () => ( @@ -646,6 +667,24 @@ const response= await fetchCohortMemberList(data); const resp = await updateCohortUpdate(selectedCohortId, cohortDetails); if (resp?.responseCode === 200) { showToastMessage(t("CENTERS.CENTER_DELETE_SUCCESSFULLY"), "success"); + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'delete-center-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); const cohort = cohortData?.find( (item: any) => item.cohortId == selectedCohortId ); @@ -674,6 +713,25 @@ const response= await fetchCohortMemberList(data); } } setSelectedSort(event.target.value); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'sort-by:'+event.target?.value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const handleSearch = (keyword: string) => { @@ -730,6 +788,23 @@ const response= await fetchCohortMemberList(data); }; }); } + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'changed-tab-to:'+newValue, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; const handleEdit = async (rowData: any) => { @@ -871,6 +946,25 @@ const response= await fetchCohortMemberList(data); const resp = await updateCohortUpdate(selectedCohortId, cohortDetails); if (resp?.responseCode === 200 || resp?.responseCode === 201) { showToastMessage(t("CENTERS.CENTER_UPDATE_SUCCESSFULLY"), "success"); + + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'center-updated-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); setLoading(false); } else { showToastMessage(t("CENTERS.CENTER_UPDATE_FAILED"), "error"); @@ -888,6 +982,25 @@ const response= await fetchCohortMemberList(data); }; const handleAddUserClick = () => { + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + setOpenAddNewCohort(true); }; diff --git a/src/pages/district.tsx b/src/pages/district.tsx index fa5519b5..ceec010f 100644 --- a/src/pages/district.tsx +++ b/src/pages/district.tsx @@ -24,6 +24,7 @@ import { SORT, Status, Storage, + TelemetryEventType, } from "@/utils/app.constant"; import { transformLabel } from "@/utils/Helper"; import { Pagination, Typography, useMediaQuery } from "@mui/material"; @@ -38,6 +39,7 @@ import { useTranslation } from "next-i18next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import React, { useEffect, useState } from "react"; import KaTableComponent from "../components/KaTableComponent"; +import { telemetryFactory } from "@/utils/telemetry"; type StateDetail = { stateCode: string | undefined; @@ -369,6 +371,23 @@ const response= await getCohortList(reqParams) ) ); showToastMessage(t("COMMON.DISTRICT_DELETED_SUCCESS"), "success"); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'delete-district-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); } catch (error) { showToastMessage(t("COMMON.DISTRICT_DELETED_FAILURE"), "error"); } @@ -447,6 +466,23 @@ const response= await getCohortList(reqParams) if (cohortCreateResponse) { filteredCohortOptionData(); showToastMessage(t("COMMON.DISTRICT_ADDED_SUCCESS"), "success"); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'district-created-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); } else if (cohortCreateResponse.responseCode === 409) { showToastMessage(t("COMMON.DISTRICT_DUPLICATION_FAILURE"), "error"); } @@ -511,6 +547,24 @@ const response= await getCohortList(reqParams) }); showToastMessage(t("COMMON.DISTRICT_UPDATED_SUCCESS"), "success"); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'district-updated-success', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + } else if (cohortCreateResponse.responseCode === 409) { showToastMessage(t("COMMON.DISTRICT_DUPLICATION_FAILURE"), "error"); } @@ -535,6 +589,23 @@ const response= await getCohortList(reqParams) event.target.value === "Z-A" ? SORT.DESCENDING : SORT.ASCENDING; setSortBy(["name", sortOrder]); setSelectedSort(event.target.value); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'sort-by:'+event.target?.value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }; const handlePaginationChange = ( @@ -542,6 +613,25 @@ const response= await getCohortList(reqParams) value: number ) => { setPageOffset(value - 1); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'change-page-number:'+value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; function transformLabels(label: string) { @@ -651,6 +741,24 @@ const response= await getCohortList(reqParams) handleAddUserClick={() => { setModalOpen(true); setSelectedStateForEdit(null); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); }} > {loading ? ( diff --git a/src/pages/facilitator.tsx b/src/pages/facilitator.tsx index f2a75665..f74dd3c2 100644 --- a/src/pages/facilitator.tsx +++ b/src/pages/facilitator.tsx @@ -2,9 +2,10 @@ import React from "react"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import UserTable from "@/components/UserTable"; import { useTranslation } from "next-i18next"; -import { Role, FormContextType } from "@/utils/app.constant"; +import { Role, FormContextType, TelemetryEventType } from "@/utils/app.constant"; import CommonUserModal from "@/components/CommonUserModal"; import useSubmittedButtonStore from "@/utils/useSharedState"; +import { telemetryFactory } from "@/utils/telemetry"; const Facilitator: React.FC = () => { const { t } = useTranslation(); @@ -25,6 +26,25 @@ const Facilitator: React.FC = () => { }; const handleAddFaciliatorClick = () => { + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + handleOpenAddFacilitatorModal(); }; return ( diff --git a/src/pages/learners.tsx b/src/pages/learners.tsx index 4046f892..82e3f68e 100644 --- a/src/pages/learners.tsx +++ b/src/pages/learners.tsx @@ -2,9 +2,10 @@ import React from "react"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import UserTable from "@/components/UserTable"; import { useTranslation } from "next-i18next"; -import { Role, FormContextType } from "@/utils/app.constant"; +import { Role, FormContextType, TelemetryEventType } from "@/utils/app.constant"; import CommonUserModal from "@/components/CommonUserModal"; import useSubmittedButtonStore from "@/utils/useSharedState"; +import { telemetryFactory } from "@/utils/telemetry"; const Learners: React.FC = () => { const { t } = useTranslation(); @@ -23,6 +24,25 @@ const Learners: React.FC = () => { setOpenAddLearnerModal(false); }; const handleAddLearnerClick = () => { + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + handleOpenAddLearnerModal(); }; return ( diff --git a/src/pages/state.tsx b/src/pages/state.tsx index 4bae39c4..a1b126c3 100644 --- a/src/pages/state.tsx +++ b/src/pages/state.tsx @@ -10,7 +10,7 @@ import { deleteOption, getStateBlockDistrictList, } from "@/services/MasterDataService"; -import { Numbers, QueryKeys, SORT } from "@/utils/app.constant"; +import { Numbers, QueryKeys, SORT, TelemetryEventType } from "@/utils/app.constant"; import { transformLabel } from "@/utils/Helper"; import { Box, @@ -27,6 +27,7 @@ import { useQueryClient } from "@tanstack/react-query"; import { getStateDataMaster } from "@/data/tableColumns"; import { Theme } from "@mui/system"; import Loader from "@/components/Loader"; +import { telemetryFactory } from "@/utils/telemetry"; export interface StateDetail { updatedAt: any; @@ -267,6 +268,25 @@ const State: React.FC = () => { value: number ) => { setPageOffset(value - 1); + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'change-page-number:'+value, + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + }; const PagesSelector = () => ( diff --git a/src/pages/team-leader.tsx b/src/pages/team-leader.tsx index 6277123e..14a364b5 100644 --- a/src/pages/team-leader.tsx +++ b/src/pages/team-leader.tsx @@ -2,13 +2,33 @@ import React from "react"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import UserTable from "@/components/UserTable"; import { useTranslation } from "next-i18next"; -import { Role, FormContextType } from "@/utils/app.constant"; +import { Role, FormContextType, TelemetryEventType } from "@/utils/app.constant"; import CommonUserModal from "@/components/CommonUserModal"; import useSubmittedButtonStore from "@/utils/useSharedState"; +import { telemetryFactory } from "@/utils/telemetry"; const TeamLeader: React.FC = () => { const { t } = useTranslation(); const handleAddTeamLeaderClick = () => { + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + handleOpenAddTeamLeaderModal(); }; const [submitValue, setSubmitValue] = React.useState(false); diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index c2daa57b..117b4a46 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -31,7 +31,13 @@ export enum FormContext { COHORTS="cohorts" } +export enum TelemetryEventType { + CLICK = 'CLICK', + SEARCH = 'SEARCH', + VIEW = 'VIEW', + RADIO="RADIO" +} export enum FormContextType { STUDENT = "STUDENT", TEACHER = "TEACHER", diff --git a/src/utils/telemetry.js b/src/utils/telemetry.js index 51eab7a3..32ea7f28 100644 --- a/src/utils/telemetry.js +++ b/src/utils/telemetry.js @@ -48,13 +48,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: {}, + }); + } } },