clarity implemented

Author: walker-sean

src/frontend/src/app/AppAuthenticated.tsx

@@ -34,6 +34,7 @@ import { useHomePageContext } from './HomePageContext';
 import { useCurrentOrganization } from '../hooks/organizations.hooks';
 import Statistics from '../pages/StatisticsPage/Statistics';
 import RetrospectiveGanttChartPage from '../pages/RetrospectivePage/Retrospective';
+import { useClarity } from './ClarityProvider';
 
 interface AppAuthenticatedProps {
   userId: string;

src/frontend/src/app/AppContextUser.tsx

@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
 /*
  * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
  * See the LICENSE file in the repository root folder for details.
@@ -7,13 +9,33 @@ import { createContext } from 'react';
 import { AuthenticatedUser } from 'shared';
 import LoadingIndicator from '../components/LoadingIndicator';
 import { useAuth } from '../hooks/auth.hooks';
+import { useClarity } from './ClarityProvider';
+import { fullNamePipe } from '../utils/pipes';
+import { useGetUsersTeams } from '../hooks/teams.hooks';
+import ErrorPage from '../pages/ErrorPage';
 
 export const UserContext = createContext<AuthenticatedUser | undefined>(undefined);
 
 const AppContextUser: React.FC = (props) => {
   const auth = useAuth();
+  const clarity = useClarity();
+  const { data: teams, isLoading: teamsIsLoading, isError: teamsIsError, error: teamsError } = useGetUsersTeams();
+
+  if (!auth.user || teamsIsLoading || !teams) return <LoadingIndicator />;
+
+  if (teamsIsError) return <ErrorPage message={teamsError.message} />;
 
-  if (!auth.user) return <LoadingIndicator />;
+  if (import.meta.env.VITE_REACT_APP_CLARITY_PROJECT_ID) {
+    clarity('consent');
+    clarity('identify', auth.user.email, uuidv4(), undefined, fullNamePipe(auth.user));
+    clarity('set', 'role', auth.user.role);
+    clarity('set', 'finishlineUserId', auth.user.userId);
+    clarity(
+      'set',
+      'team',
+      teams.map((team) => team.teamName)
+    );
+  }
 
   return <UserContext.Provider value={auth.user}>{props.children}</UserContext.Provider>;
 };

src/frontend/src/app/ClarityProvider.tsx

@@ -22,7 +22,7 @@ declare global {
 }
 
 // Your Microsoft Clarity project ID is read from VITE_REACT_APP_CLARITY_PROJECT_ID
-const CLARITY_PROJECT_ID = import.meta.env.VITE_REACT_APP_CLARITY_PROJECT_ID as string;
+const CLARITY_PROJECT_ID = import.meta.env.VITE_REACT_APP_CLARITY_PROJECT_ID as string | undefined;
 
 // Type for the Clarity function
 type ClarityFn = (...args: any[]) => void;
@@ -36,7 +36,13 @@ export const ClarityContext = createContext<ClarityFn | undefined>(undefined);
  * Returns the Clarity function from context. Use this to call Clarity API methods.
  * Example: const clarity = useClarity();
  */
-export const useClarity = () => useContext(ClarityContext);
+export const useClarity = () => {
+  const context = useContext(ClarityContext);
+  if (context === undefined) {
+    throw new Error('useClarity must be used within a ClarityProvider');
+  }
+  return context;
+};
 
 /**
  * ClarityProvider component
@@ -47,7 +53,7 @@ export const useClarity = () => useContext(ClarityContext);
 const ClarityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   useEffect(() => {
     // Inject the Clarity script only once, if not already present
-    if (typeof window !== 'undefined' && !window.clarity) {
+    if (typeof window !== 'undefined' && !window.clarity && CLARITY_PROJECT_ID) {
       (function (c: any, l: Document, a: string, r: string, i: string) {
         c[a] =
           c[a] ||