Implemented product identifier using dxp-component

package.json

@@ -17,6 +17,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
+    "@hotwax/dxp-components": "^1.3.2",
     "@hotwax/oms-api": "^1.6.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/App.vue

@@ -10,13 +10,14 @@
 <script lang="ts">
 import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/vue';
 import Menu from '@/components/Menu.vue';
-import { defineComponent } from 'vue';
+import { defineComponent, provide, ref } from 'vue';
 import { loadingController } from '@ionic/vue';
 import emitter from "@/event-bus"
 import { mapGetters, useStore } from "vuex";
 import { Settings } from 'luxon';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { useProductIdentificationStore } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'App',
@@ -94,15 +95,17 @@ export default defineComponent({
       // TODO: fetch product identifications from enumeration instead of storing it in env
       this.store.dispatch('util/setProductIdentifications', process.env.VUE_APP_PRDT_IDENT ? JSON.parse(process.env.VUE_APP_PRDT_IDENT) : [])
     }
-
-    if(this.userProfile) {
-      this.store.dispatch('user/getProductIdentificationPref', this.currentEComStore.productStoreId);
-    }
     // Handles case when user resumes or reloads the app
     // Luxon timezzone should be set with the user's selected timezone
     if (this.userProfile && this.userProfile.userTimeZone) {
       Settings.defaultZone = this.userProfile.userTimeZone;
     }
+
+    // Get product identification from api using dxp-component and set the state if eComStore is defined
+    if (this.currentEComStore.productStoreId) {
+      await useProductIdentificationStore().getIdentificationPref(this.currentEComStore.productStoreId)
+        .catch((error) => console.error(error));
+    }
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);
@@ -113,6 +116,25 @@ export default defineComponent({
     const store = useStore();
     const router = useRouter();
 
+    /* Start Product Identifier */
+
+    const productIdentificationStore = useProductIdentificationStore();
+
+    // Reactive state for productIdentificationPref
+    let productIdentificationPref = ref(
+      productIdentificationStore.$state.productIdentificationPref
+    );
+
+    // Providing productIdentificationPref to child components
+    provide('productIdentificationPref', productIdentificationPref);
+
+    // Subscribing to productIdentificationStore state change and changing value productIdentificationPref 
+    productIdentificationStore.$subscribe((mutation: any, state) => {
+        productIdentificationPref.value = state.productIdentificationPref;
+    });
+
+    /* End Product Identifier */
+
     return {
       router,
       store

src/main.ts

@@ -32,6 +32,8 @@ import store from './store'
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
+import { dxpComponents } from '@hotwax/dxp-components';
+import { setProductIdentificationPref, getProductIdentificationPref } from '@hotwax/oms-api';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -43,12 +45,17 @@ const app = createApp(App)
   .use(permissionPlugin, {
     rules: permissionRules,
     actions: permissionActions
+  })
+  .use(dxpComponents, {
+    defaultImgUrl: require("@/assets/images/defaultImage.png"),
+    setProductIdentificationPref,
+    getProductIdentificationPref
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {
   formatDate(value: any, inFormat?: string, outFormat?: string) {
-    if(inFormat){
+    if (inFormat) {
       return DateTime.fromFormat(value, inFormat).toFormat(outFormat ? outFormat : 'MM-DD-YYYY');
     }
     return DateTime.fromISO(value).toFormat(outFormat ? outFormat : 'MM-DD-YYYY');
@@ -61,7 +68,7 @@ app.config.globalProperties.$filters = {
     return DateTime.fromISO(value, { zone: "utc" }).setZone(userProfile.userTimeZone).toFormat(outFormat ? outFormat : 'MM-dd-yyyy')
   },
   getFeature(featureHierarchy: any, featureKey: string) {
-    let  featureValue = ''
+    let featureValue = ''
     if (featureHierarchy) {
       const feature = featureHierarchy.find((featureItem: any) => featureItem.startsWith(featureKey))
       const featureSplit = feature ? feature.split('/') : [];

src/services/UserService.ts

@@ -132,32 +132,6 @@ const getPreferredStore = async (token: any): Promise<any> => {
   }
 }
 
-const updateProductIdentificationPref = async (payload: any): Promise<any> => {
-  return api({
-    url: "service/updateProductStoreSetting",
-    method: "post",
-    data: payload
-  });
-}
-
-const createProductIdentificationPref = async (payload: any): Promise<any> => {
-  return api({
-    url: "service/createProductStoreSetting",
-    method: "post",
-    data: payload
-  });
-}
-
-const getProductIdentificationPref = async (payload: any): Promise<any> => {
-  return api({
-    url: "performFind",
-    //TODO Due to security reasons service model OMS 1.0 does not support sending parameters in get request that's why we use post here
-    method: "post",
-    data: payload,
-    cache: true
-  });
-}
-
 const getUserPermissions = async (payload: any, token: any): Promise<any> => {
   const baseURL = store.getters['user/getBaseUrl'];
   let serverPermissions = [] as any;
@@ -255,9 +229,6 @@ export const UserService = {
     setUserTimeZone,
     getFacilityLocations,
     getEComStores,
-    getProductIdentificationPref,
-    createProductIdentificationPref,
-    updateProductIdentificationPref,
     setUserPreference,
     getPreferredStore,
     checkPermission

src/store/modules/user/UserState.ts

@@ -5,6 +5,5 @@ export default interface UserState {
     currentEComStore: object;
     instanceUrl: string;
     facilityLocationsByFacilityId: any;
-    productIdentificationPref: any;
     permissions: any;
 }