@addev-be/ui 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -51,6 +51,7 @@
     "io-ts": "^2.2.21",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "react-router-dom": "^7.0.2",
     "rxjs": "^7.8.1",
     "uuid": "^10.0.0"
   }

package/src/providers/TrackingProvider/hooks.ts

@@ -0,0 +1,14 @@
+import { useContext, useEffect } from 'react';
+
+import { TrackingContext } from '.';
+import { useLocation } from 'react-router-dom';
+
+export const useLocationTracking = () => {
+  const { sendEvent } = useContext(TrackingContext);
+  const { pathname, search } = useLocation();
+  const pathWithSearch = `${pathname}${search}`;
+
+  useEffect(() => {
+    sendEvent('PageView', { path: pathWithSearch });
+  }, [pathWithSearch, sendEvent]);
+};

package/src/providers/TrackingProvider/index.tsx

@@ -0,0 +1,71 @@
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+import { useSendTrackingEventRequestHandler } from '../../services';
+
+export type TrackingContextType = {
+  sendEvent: (
+    name: string,
+    details?: Record<string, string | number | boolean | null>
+  ) => void;
+  enableTracking: () => void;
+  disableTracking: () => void;
+};
+
+export const TrackingContext = createContext<TrackingContextType>({
+  sendEvent: () => {},
+  enableTracking: () => {},
+  disableTracking: () => {},
+});
+
+export const TrackingProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [trackingEnabled, setTrackingEnabled] = useState(true);
+  const sendTrackingEvent = useSendTrackingEventRequestHandler();
+
+  const sendEvent = useCallback(
+    (
+      name: string,
+      details: Record<string, string | number | boolean | null> = {}
+    ) => {
+      if (trackingEnabled) {
+        sendTrackingEvent({
+          data: {
+            id: '',
+            name,
+            details,
+          },
+        });
+      }
+    },
+    [sendTrackingEvent, trackingEnabled]
+  );
+
+  const enableTracking = useCallback(() => {
+    setTrackingEnabled(true);
+  }, []);
+
+  const disableTracking = useCallback(() => {
+    setTrackingEnabled(false);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      sendEvent,
+      enableTracking,
+      disableTracking,
+    }),
+    [disableTracking, enableTracking, sendEvent]
+  );
+
+  return (
+    <TrackingContext.Provider value={value}>
+      {children}
+    </TrackingContext.Provider>
+  );
+};

package/src/providers/UiProviders/index.tsx

@@ -15,6 +15,7 @@ import {
 import { PortalsProvider } from '../PortalsProvider';
 import { SettingsProvider } from '../SettingsProvider';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { TrackingProvider } from '../TrackingProvider';
 import { defaultTheme } from '../ThemeProvider/defaultTheme';
 
 export type UiProvidersProps = PropsWithChildren<{
@@ -56,7 +57,9 @@ export const UiProviders: FC<UiProvidersProps> = ({ $darkMode, children }) => {
       <UiContext.Provider value={value}>
         <styles.Root ref={rootRef}>
           <SettingsProvider>
-            <PortalsProvider>{children}</PortalsProvider>
+            <TrackingProvider>
+              <PortalsProvider>{children}</PortalsProvider>
+            </TrackingProvider>
           </SettingsProvider>
         </styles.Root>
       </UiContext.Provider>

package/src/providers/index.ts

@@ -1,6 +1,8 @@
 export * from './AuthenticationProvider';
 export * from './PortalsProvider';
 export * from './ThemeProvider';
+export * from './TrackingProvider';
 export * from './UiProviders';
 
+export * from './TrackingProvider/hooks';
 export * from './hooks';

package/src/services/index.ts

@@ -4,10 +4,12 @@ export * from './hooks';
 export * from './globalSearch';
 
 export * from './requests/auth';
+export * from './requests/tracking';
 export * from './requests/users';
 export * from './requests/userProfiles';
 
 export * from './types/auth';
 export * from './types/base';
+export * from './types/tracking';
 export * from './types/users';
 export * from './types/userProfiles';

package/src/services/requests/tracking.ts

@@ -0,0 +1,12 @@
+import {
+  SendTrackingEventRequestDTO,
+  SendTrackingEventResponseDTO,
+} from '../types/tracking';
+
+import { useLoadingRequestHandler } from '../hooks';
+
+export const useSendTrackingEventRequestHandler = () =>
+  useLoadingRequestHandler<
+    SendTrackingEventRequestDTO,
+    SendTrackingEventResponseDTO
+  >('SendTrackingEvent');

package/src/services/types/tracking.ts

@@ -0,0 +1,39 @@
+import * as t from 'io-ts';
+
+import { baseModelDtoCodec } from './base';
+
+export const trackingEventDtoCodec = t.type(
+  {
+    ...baseModelDtoCodec.props,
+    name: t.string,
+    details: t.record(
+      t.string,
+      t.union([t.string, t.number, t.boolean, t.null])
+    ),
+  },
+  'TrackingEventDTO'
+);
+
+export type TrackingEventDTO = t.TypeOf<typeof trackingEventDtoCodec>;
+
+export const sendTrackingEventRequestDtoCodec = t.type(
+  {
+    data: trackingEventDtoCodec,
+  },
+  'SendTrackingEventRequestDTO'
+);
+
+export const sendTrackingEventResponseDtoCodec = t.type(
+  {
+    status: t.number,
+    data: trackingEventDtoCodec,
+  },
+  'SendTrackingEventResponseDTO'
+);
+
+export type SendTrackingEventRequestDTO = t.TypeOf<
+  typeof sendTrackingEventRequestDtoCodec
+>;
+export type SendTrackingEventResponseDTO = t.TypeOf<
+  typeof sendTrackingEventResponseDtoCodec
+>;