Added some booking related analytics events

frontend/src/analytics/AnalyticsEvent.ts

@@ -4,7 +4,14 @@ export enum AnalyticsEventEnum {
     BOOKING_END,
     BOOKING_ADD_TIME,
     BOOKING_DEDUCT_TIME,
-    BUILDING_SELECT
+    BUILDING_SELECT,
+    QUICK_DURATION_SELECTION,
+    TIME_CONTROL_ADD_FIFTEEN,
+    TIME_CONTROL_DEDUCT_FIFTEEN,
+    TIME_CONTROL_NEXT_THIRTY_MINUTES,
+    TIME_CONTROL_NEXT_FULL_HOUR,
+    TIME_CONTROL_WHOLE_SLOT,
+    STARTING_TIME_SELECTION
 }
 
 // Defines the common event names to use across all analytics services
@@ -13,5 +20,14 @@ export const analyticsEventMap: { [key in AnalyticsEventEnum]: string } = {
     [AnalyticsEventEnum.BOOKING_END]: 'bookingEnd',
     [AnalyticsEventEnum.BOOKING_ADD_TIME]: 'bookingAddTime',
     [AnalyticsEventEnum.BOOKING_DEDUCT_TIME]: 'bookingDeductTime',
-    [AnalyticsEventEnum.BUILDING_SELECT]: 'buildingSelect'
+    [AnalyticsEventEnum.BUILDING_SELECT]: 'buildingSelect',
+    [AnalyticsEventEnum.QUICK_DURATION_SELECTION]: 'quickDurationSelection',
+    [AnalyticsEventEnum.TIME_CONTROL_ADD_FIFTEEN]: 'timeControlAddFifteen',
+    [AnalyticsEventEnum.TIME_CONTROL_DEDUCT_FIFTEEN]:
+        'timeControlDeductFifteen',
+    [AnalyticsEventEnum.TIME_CONTROL_NEXT_THIRTY_MINUTES]:
+        'timeControlNextThirtyMinutes',
+    [AnalyticsEventEnum.TIME_CONTROL_NEXT_FULL_HOUR]: 'timeControlNextFullHour',
+    [AnalyticsEventEnum.TIME_CONTROL_WHOLE_SLOT]: 'timeControlWholeSlot',
+    [AnalyticsEventEnum.STARTING_TIME_SELECTION]: 'startingTimeSelection'
 };

frontend/src/analytics/googleAnalytics/googleAnalyticsEvents.ts

@@ -7,6 +7,15 @@ export interface GoogleAnalyticsEvent {
     eventObject: object;
 }
 
+export class GenericGoogleAnalyticsEvent implements GoogleAnalyticsEvent {
+    eventObject: object = {};
+    eventType: AnalyticsEventEnum;
+
+    constructor(eventType: AnalyticsEventEnum) {
+        this.eventType = eventType;
+    }
+}
+
 export class BookingEvent implements GoogleAnalyticsEvent {
     eventType: AnalyticsEventEnum = AnalyticsEventEnum.BOOKING;
     eventObject: object;
@@ -68,3 +77,25 @@ export class ChooseBuildingEvent implements GoogleAnalyticsEvent {
         };
     }
 }
+
+export class QuickDurationEvent implements GoogleAnalyticsEvent {
+    eventType: AnalyticsEventEnum = AnalyticsEventEnum.QUICK_DURATION_SELECTION;
+    eventObject: object;
+
+    constructor(quickDuration: String) {
+        this.eventObject = {
+            quickDuration: quickDuration
+        };
+    }
+}
+
+export class StartingTimeSelectionEvent implements GoogleAnalyticsEvent {
+    eventType: AnalyticsEventEnum = AnalyticsEventEnum.STARTING_TIME_SELECTION;
+    eventObject: object;
+
+    constructor(startingTime: String) {
+        this.eventObject = {
+            startingTime: startingTime
+        };
+    }
+}

frontend/src/components/BookingDrawer/BookingDrawer.tsx

@@ -10,6 +10,13 @@ import { theme } from '../../theme';
 import DurationPicker from './DurationPicker';
 import BottomDrawer, { DrawerContent } from '../BottomDrawer/BottomDrawer';
 import { dateTimeToTimeString } from '../util/Time';
+import { triggerGoogleAnalyticsEvent } from '../../analytics/googleAnalytics/googleAnalyticsService';
+import {
+    GenericGoogleAnalyticsEvent,
+    QuickDurationEvent
+} from '../../analytics/googleAnalytics/googleAnalyticsEvents';
+import { triggerClarityEvent } from '../../analytics/clarityService';
+import { AnalyticsEventEnum } from '../../analytics/AnalyticsEvent';
 
 const MIN_DURATION = 15;
 
@@ -359,9 +366,16 @@ const BookingDrawer = (props: Props) => {
     });
 
     const handleDurationChange = (newDuration: number) => {
+        // In case of "custom" duration, the newDuration will be -1
         if (newDuration !== -1) {
             setBookingDuration(newDuration);
+            triggerGoogleAnalyticsEvent(
+                new QuickDurationEvent(newDuration.toString())
+            );
+        } else {
+            triggerGoogleAnalyticsEvent(new QuickDurationEvent('Custom'));
         }
+        triggerClarityEvent(AnalyticsEventEnum.QUICK_DURATION_SELECTION);
         setAdditionalDuration(0);
     };
 
@@ -371,14 +385,38 @@ const BookingDrawer = (props: Props) => {
     const [showAlert, setShowAlert] = useState<boolean>(false);
 
     const handleAdditionalTime = (minutes: number) => {
+        let analyticsEvent: AnalyticsEventEnum;
+        if (minutes == -15) {
+            analyticsEvent = AnalyticsEventEnum.TIME_CONTROL_DEDUCT_FIFTEEN;
+        } else {
+            analyticsEvent = AnalyticsEventEnum.TIME_CONTROL_ADD_FIFTEEN;
+        }
+        triggerGoogleAnalyticsEvent(
+            new GenericGoogleAnalyticsEvent(analyticsEvent)
+        );
+        triggerClarityEvent(analyticsEvent);
         onAddTime(minutes);
     };
 
     const handleNextHalfHour = () => {
+        triggerGoogleAnalyticsEvent(
+            new GenericGoogleAnalyticsEvent(
+                AnalyticsEventEnum.TIME_CONTROL_NEXT_THIRTY_MINUTES
+            )
+        );
+        triggerClarityEvent(
+            AnalyticsEventEnum.TIME_CONTROL_NEXT_THIRTY_MINUTES
+        );
         onAddTimeUntilHalf();
     };
 
     const handleNextFullHour = () => {
+        triggerGoogleAnalyticsEvent(
+            new GenericGoogleAnalyticsEvent(
+                AnalyticsEventEnum.TIME_CONTROL_NEXT_FULL_HOUR
+            )
+        );
+        triggerClarityEvent(AnalyticsEventEnum.TIME_CONTROL_NEXT_FULL_HOUR);
         onAddTimeUntilFull();
     };
 
@@ -494,6 +532,16 @@ const BookingDrawer = (props: Props) => {
         }
     }, [startingTime]);
 
+    const bookWholeFreeSlot = () => {
+        triggerGoogleAnalyticsEvent(
+            new GenericGoogleAnalyticsEvent(
+                AnalyticsEventEnum.TIME_CONTROL_WHOLE_SLOT
+            )
+        );
+        triggerClarityEvent(AnalyticsEventEnum.TIME_CONTROL_WHOLE_SLOT);
+        handleUntilNext(getTimeAvailableMinutes(room));
+    };
+
     return (
         <BottomDrawer
             headerTitle={getName(room)}
@@ -586,9 +634,7 @@ const BookingDrawer = (props: Props) => {
                     <Row>
                         <DrawerButtonSecondary
                             aria-label="Book the whole free slot"
-                            onClick={() =>
-                                handleUntilNext(getTimeAvailableMinutes(room))
-                            }
+                            onClick={bookWholeFreeSlot}
                             sx={{
                                 margin: 0
                             }}

frontend/src/components/BookingView/StartingTimePicker.tsx

@@ -5,6 +5,10 @@ import { Box, styled, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import { formatTimeToHalfAndFullHours } from '../util/Time';
 import AlertBox from '../util/alertBox';
+import { triggerGoogleAnalyticsEvent } from '../../analytics/googleAnalytics/googleAnalyticsService';
+import { StartingTimeSelectionEvent } from '../../analytics/googleAnalytics/googleAnalyticsEvents';
+import { triggerClarityEvent } from '../../analytics/clarityService';
+import { AnalyticsEventEnum } from '../../analytics/AnalyticsEvent';
 
 const StartingTimeButton = styled(ToggleButton)(() => ({}));
 const StartingTimePickerContent = styled(Box)(({ theme }) => ({}));
@@ -37,12 +41,22 @@ const StartingTimePicker = (props: StartingTimePickerProps) => {
         event: React.MouseEvent<HTMLElement>,
         newStartingTime: string
     ) => {
-        if (newStartingTime !== null) {
-            if (newStartingTime !== 'Custom') {
-                setStartingTime(newStartingTime);
-            } else {
-                setExpandTimePickerDrawer(true);
-            }
+        // Also handle the case when the starting time would be null (shouldnt happen)
+        // Adding this to analytics will let us see these erroneous events as well
+        const testId = event.currentTarget.getAttribute('data-testid');
+        triggerGoogleAnalyticsEvent(
+            new StartingTimeSelectionEvent(testId ? testId : '')
+        );
+        triggerClarityEvent(AnalyticsEventEnum.STARTING_TIME_SELECTION);
+
+        if (newStartingTime == null) {
+            return;
+        }
+
+        if (newStartingTime !== 'Custom') {
+            setStartingTime(newStartingTime);
+        } else {
+            setExpandTimePickerDrawer(true);
         }
     };
 
@@ -83,28 +97,28 @@ const StartingTimePicker = (props: StartingTimePickerProps) => {
                     fullWidth
                 >
                     <StartingTimeButton
-                        data-testid="StartingTimePicker1"
+                        data-testid="StartingTimePickerNow"
                         value={startingTimeNow}
                         aria-label={startingTimeNow}
                     >
                         {startingTimeNow}
                     </StartingTimeButton>
                     <StartingTimeButton
-                        data-testid="StartingTimePicker2"
+                        data-testid="StartingTimePickerNext"
                         value={startingTime2}
                         aria-label={startingTime2}
                     >
                         {startingTime2}
                     </StartingTimeButton>
                     <StartingTimeButton
-                        data-testid="StartingTimePicker3"
+                        data-testid="StartingTimePickerSecond"
                         value={startingTime3}
                         aria-label={startingTime3}
                     >
                         {startingTime3}
                     </StartingTimeButton>
                     <StartingTimeButton
-                        data-testid="StartingTimePicker4"
+                        data-testid="StartingTimePickerThird"
                         value={startingTime4}
                         aria-label={startingTime4}
                     >