Add in amplititude

client/package.json

@@ -9,6 +9,7 @@
   "proxy": "http://localhost:4000",
   "dependencies": {
     "@ant-design/pro-layout": "^7.22.4",
+    "@amplitude/analytics-browser": "^2.23.1",
     "@apollo/client": "^3.13.6",
     "@emotion/is-prop-valid": "^1.3.1",
     "@fingerprintjs/fingerprintjs": "^4.6.1",

client/src/firebase/firebase.utils.js

@@ -4,6 +4,7 @@ import { getAuth, updatePassword, updateProfile } from "@firebase/auth";
 import { getFirestore } from "@firebase/firestore";
 import { getMessaging, getToken, onMessage } from "@firebase/messaging";
 import { store } from "../redux/store";
+import * as amplitude from '@amplitude/analytics-browser';
 
 const config = JSON.parse(import.meta.env.VITE_APP_FIREBASE_CONFIG);
 initializeApp(config);
@@ -71,25 +72,31 @@ onMessage(messaging, (payload) => {
 });
 
 export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
-  const state = stateProp || store.getState();
-  const eventParams = {
-    shop: (state.user && state.user.bodyshop && state.user.bodyshop.shopname) || null,
-    user: (state.user && state.user.currentUser && state.user.currentUser.email) || null,
-    ...additionalParams
-  };
-  // axios.post("/ioevent", {
-  //   useremail: (state.user && state.user.currentUser && state.user.currentUser.email) || null,
-  //   bodyshopid: (state.user && state.user.bodyshop && state.user.bodyshop.id) || null,
-  //   operationName: eventName,
-  //   variables: additionalParams,
-  //   dbevent: false,
-  //   env: `master-AIO|${import.meta.env.VITE_APP_GIT_SHA_DATE}`
-  // });
-  // console.log(
-  //   "%c[Analytics]",
-  //   "background-color: green ;font-weight:bold;",
-  //   eventName,
-  //   eventParams
-  // );
-  logEvent(analytics, eventName, eventParams);
+  try {
+
+    const state = stateProp || store.getState();
+    const eventParams = {
+      shop: (state.user && state.user.bodyshop && state.user.bodyshop.shopname) || null,
+      user: (state.user && state.user.currentUser && state.user.currentUser.email) || null,
+      ...additionalParams
+    };
+    // axios.post("/ioevent", {
+    //   useremail: (state.user && state.user.currentUser && state.user.currentUser.email) || null,
+    //   bodyshopid: (state.user && state.user.bodyshop && state.user.bodyshop.id) || null,
+    //   operationName: eventName,
+    //   variables: additionalParams,
+    //   dbevent: false,
+    //   env: `master-AIO|${import.meta.env.VITE_APP_GIT_SHA_DATE}`
+    // });
+    // console.log(
+    //   "%c[Analytics]",
+    //   "background-color: green ;font-weight:bold;",
+    //   eventName,
+    //   eventParams
+    // );
+    logEvent(analytics, eventName, eventParams);
+    amplitude.track(eventName, eventParams);
+  } finally {
+    //If it fails, just keep going.
+  }
 };

client/src/index.jsx

@@ -14,7 +14,7 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
-
+import * as amplitude from "@amplitude/analytics-browser";
 window.global ||= window;
 
 registerSW({ immediate: true });
@@ -23,10 +23,10 @@ registerSW({ immediate: true });
 // Dinero.globalLocale = "en-CA";
 Dinero.globalRoundingMode = "HALF_EVEN";
 
+amplitude.init("6228a598e57cd66875cfd41604f1f891", {});
 const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
 
 const router = sentryCreateBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />));
-
 if (import.meta.env.DEV) {
   let styles =
     "font-weight: bold; font-size: 50px;color: red;  6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) ";

client/src/redux/user/user.sagas.js

@@ -48,6 +48,7 @@ import {
   validatePasswordResetSuccess
 } from "./user.actions";
 import UserActionTypes from "./user.types";
+import * as amplitude from '@amplitude/analytics-browser';
 
 const fpPromise = FingerprintJS.load();
 
@@ -82,8 +83,6 @@ export function* onCheckUserSession() {
 
 export function* isUserAuthenticated() {
   try {
-    logImEXEvent("redux_auth_check");
-
     const user = yield getCurrentUser();
     if (!user) {
       yield put(unauthorizedUser());
@@ -91,6 +90,7 @@ export function* isUserAuthenticated() {
     }
 
     LogRocket.identify(user.email);
+    amplitude.setUserId(user.email)
 
     const eulaQuery = yield client.query({
       query: QUERY_EULA,
@@ -136,7 +136,8 @@ export function* signOutStart() {
         imexshopid: state.user.bodyshop.imexshopid,
         type: "messaging"
       });
-    } catch (error) {
+      amplitude.reset();
+    } catch {
       console.log("No FCM token. Skipping unsubscribe.");
     }
 
@@ -161,7 +162,7 @@ export function* updateUserDetails(userDetails) {
       type: "success",
       message: i18next.t("profile.successes.updated")
     });
-  } catch (error) {
+  } catch {
     //yield put(signOutFailure(error.message));
   }
 }
@@ -268,7 +269,7 @@ export function* signInSuccessSaga({ payload }) {
 
   setUserId(analytics, payload.email);
   setUserProperties(analytics, payload);
-  yield logImEXEvent("redux_sign_in_success");
+  yield;
 }
 
 export function* onSendPasswordResetStart() {
@@ -335,6 +336,7 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
     }
 
     try {
+      amplitude.setGroup('Shop', payload.shopname);
       window.$crisp.push(["set", "user:company", [payload.shopname]]);
       window.$crisp.push(["set", "session:segments", [[`region:${payload.region_config}`]]]);
       if (authRecord[0] && authRecord[0].user.validemail) {