implemented: mix-panel functionality to track events like print-picklist , force scan toggle button

package.json

@@ -16,7 +16,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.14.1",
+    "@hotwax/dxp-components": "../dxp-components",
     "@hotwax/oms-api": "^1.14.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",

src/store/modules/user/actions.ts

@@ -6,7 +6,7 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 import { showToast } from '@/utils'
 import { hasError } from '@/adapter'
-import { translate } from '@hotwax/dxp-components'
+import { translate , addMixPanelUser , addMixPanelEvent } from '@hotwax/dxp-components'
 import { DateTime, Settings } from 'luxon';
 import { logout, updateInstanceUrl, updateToken, resetConfig, getUserFacilities, getNotificationEnumIds,
   getNotificationUserPrefTypeIds, storeClientRegistrationToken } from '@/adapter'
@@ -53,6 +53,18 @@ const actions: ActionTree<UserState, RootState> = {
       }
 
       const userProfile = await UserService.getUserProfile(token);
+
+      // tracking login action for fulfillment app in mix-panel 
+      const appName = 'fulfillment';
+      const user = userProfile;
+      addMixPanelUser(user.userId, {
+        '$userLoginId': user.userLoginId,
+        '$email': user.email,
+        'app_name': appName,
+      });
+      addMixPanelEvent('Login-fulfillment', {
+        '$app_name': appName,
+      })
 
       //fetching user facilities
       const isAdminUser = appPermissions.some((appPermission: any) => appPermission?.action === "APP_STOREFULFILLMENT_ADMIN" );

src/views/OpenOrders.vue

@@ -179,7 +179,7 @@ import { prepareOrderQuery } from '@/utils/solrHelper';
 import ViewSizeSelector from '@/components/ViewSizeSelector.vue'
 import emitter from '@/event-bus';
 import logger from '@/logger';
-import { translate } from '@hotwax/dxp-components';
+import { translate , addMixPanelEvent , addMixPanelUser } from '@hotwax/dxp-components';
 import { UserService } from '@/services/UserService';
 import { Actions, hasPermission } from '@/authorization'
 import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
@@ -215,6 +215,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters({
+      userProfile: 'user/getUserProfile',   
       currentFacility: 'user/getCurrentFacility',
       openOrders: 'order/getOpenOrders',
       getProduct: 'product/getProduct',
@@ -299,6 +300,14 @@ export default defineComponent({
       const assignPickerModal = await modalController.create({
         component: AssignPickerModal
       });
+
+      const user = this.userProfile
+      // tracking event for Print Picklist button
+      addMixPanelEvent('Print Picklist clicked', {
+        '$userLoginId': user.userLoginId,
+        '$app_name': 'fulfillment',
+      })
+
       return assignPickerModal.present();
     },
     async fetchShipmentMethods() {

src/views/Settings.vue

@@ -223,14 +223,15 @@ import { useRouter } from 'vue-router';
 import { UserService } from '@/services/UserService';
 import { showToast } from '@/utils';
 import { hasError, removeClientRegistrationToken, subscribeTopic, unsubscribeTopic } from '@/adapter'
-import { translate } from '@hotwax/dxp-components';
+import { translate, addMixPanelEvent, addMixPanelUser } from '@hotwax/dxp-components';
 import logger from '@/logger';
 import { Actions, hasPermission } from '@/authorization'
 import { DateTime } from 'luxon';
 import Image from '@/components/Image.vue';
 import OrderLimitPopover from '@/components/OrderLimitPopover.vue'
 import emitter from "@/event-bus"
 import { generateTopicName } from "@/utils/firebase";
+import store from '@/store';
 
 
 
@@ -552,6 +553,14 @@ export default defineComponent({
     async updateForceScanStatus(event: any) {
       event.stopImmediatePropagation();
 
+      // tracking login action for fulfillment app in mix-panel 
+      const user = this.userProfile;
+      // event tracking for Force Scan toggle - data send to mix-panel 
+      addMixPanelEvent('Force Scan toggled', {
+        '$userLoginId': user.userLoginId,
+        '$app_name': 'fulfillment',
+      })
+
       this.store.dispatch("util/setForceScanSetting", !this.isForceScanEnabled)
     },
     async setEComStore(event: any) {