Implemented: product identifier component receiving app from dxp-components(#267)

src/App.vue

@@ -14,10 +14,10 @@
 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 { translate } from "@hotwax/dxp-components"
+import { translate , useProductIdentificationStore } from "@hotwax/dxp-components"
 
 export default defineComponent({
   name: 'App',
@@ -36,7 +36,6 @@
   computed: {
     ...mapGetters({
       currentEComStore: 'user/getCurrentEComStore',
-      productIdentifications: 'util/getProductIdentifications',
       userProfile: 'user/getUserProfile',
       userToken: 'user/getUserToken',
       instanceUrl: 'user/getInstanceUrl'
@@ -100,21 +99,6 @@
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
   },
-  async mounted() {
-    if(this.productIdentifications.length <= 0) {
-      // 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;
-    }
-  },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);
     emitter.off('dismissLoader', this.dismissLoader);

src/adapter/index.ts

@@ -1,17 +1,19 @@
 import { api, client, getConfig, getUserFacilities, hasError, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserTimeZone,
-  getAvailableTimeZones } from '@hotwax/oms-api'
+  getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref} from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
   getUserFacilities,
+  getProductIdentificationPref,
   hasError,
   initialise,
   logout,
   resetConfig,
   updateInstanceUrl,
   updateToken,
   setUserTimeZone,
+  setProductIdentificationPref,
   getAvailableTimeZones
 }

src/components/ClosePurchaseOrderModal.vue

@@ -62,10 +62,10 @@ import {
 } from '@ionic/vue';
 import { Actions, hasPermission } from '@/authorization'
 import { closeOutline, checkmarkCircle, arrowBackOutline, saveOutline } from 'ionicons/icons';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { mapGetters, useStore } from 'vuex'
 import { OrderService } from "@/services/OrderService";
-import { DxpShopifyImg, translate, getProductIdentificationValue } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -206,6 +206,8 @@ export default defineComponent({
   setup() {
     const router = useRouter()
     const store = useStore()
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
 
     return {
       arrowBackOutline,
@@ -218,7 +220,8 @@ export default defineComponent({
       saveOutline,
       store,
       translate,
-      getProductIdentificationValue
+      getProductIdentificationValue,
+      productIdentificationPref
     };
   }
 });

src/main.ts

@@ -32,7 +32,7 @@ import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
-import { getConfig, initialise, setUserTimeZone, getAvailableTimeZones } from '@/adapter'
+import { getConfig, initialise, setUserTimeZone, getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref } from '@/adapter'
 import localeMessages from './locales';
 
 const app = createApp(App)
@@ -53,9 +53,11 @@ const app = createApp(App)
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig,
+    getProductIdentificationPref,
     initialise,
     localeMessages,
     setUserTimeZone,
+    setProductIdentificationPref,
     getAvailableTimeZones
   });
 

src/store/modules/user/UserState.ts

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

src/store/modules/user/actions.ts

@@ -12,7 +12,7 @@
   resetPermissions,
   setPermissions
 } from '@/authorization'
-import { translate, useAuthStore } from '@hotwax/dxp-components'
+import { translate, useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import store from '@/store'
 
@@ -74,6 +74,11 @@
       const currentFacility = userProfile.facilities[0];
       const currentEComStore = await UserService.getEComStores(token, currentFacility.facilityId);
 
+      const productStoreId = currentEComStore?.productStoreId;
+
+      await useProductIdentificationStore().getIdentificationPref(productStoreId)
+        .catch((error) => console.error(error));
+
       setPermissions(appPermissions);
       if (userProfile.userTimeZone) {
         Settings.defaultZone = userProfile.userTimeZone;
@@ -157,13 +162,13 @@
   /**
    *  update current eComStore information
   */
   async setEComStore({ commit, dispatch }, payload) {
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, payload.eComStore);
     await UserService.setUserPreference({
       'userPrefTypeId': 'SELECTED_BRAND',
       'userPrefValue': payload.eComStore.productStoreId
     });
-    await dispatch('getProductIdentificationPref', payload.eComStore.productStoreId);
+    await useProductIdentificationStore().getIdentificationPref(payload.eComStore.productStoreId);
     this.dispatch('util/getForceScanSetting', payload.ecomStore.productStoreId)
     this.dispatch('util/getBarcodeIdentificationPref', payload.ecomStore.productStoreId)
   },
@@ -235,119 +240,6 @@
       return [];
     }
   },
-
-  async setProductIdentificationPref({ commit, state }, payload) {
-    let prefValue = JSON.parse(JSON.stringify(state.productIdentificationPref))
-    const eComStoreId = (state.currentEComStore as any).productStoreId
-
-    let fromDate;
-
-    try {
-      const resp = await UserService.getProductIdentificationPref({
-        "inputFields": {
-          "productStoreId": eComStoreId,
-          "settingTypeEnumId": "PRDT_IDEN_PREF"
-        },
-        "filterByDate": 'Y',
-        "entityName": "ProductStoreSetting",
-        "fieldList": ["fromDate"],
-        "viewSize": 1
-      }) as any
-      if(resp.status == 200 && resp.data.count > 0) {
-        fromDate = resp.data.docs[0].fromDate
-      }
-    } catch(err) {
-      console.error(err)
-    }
-
-    // when selecting none as ecom store, not updating the pref as it's not possible to save pref with empty productStoreId
-    if(!(state.currentEComStore as any).productStoreId || !fromDate) {
-      showToast(translate('Unable to update product identifier preference'))
-      commit(types.USER_PREF_PRODUCT_IDENT_CHANGED, prefValue)
-      return;
-    }
-
-    prefValue[payload.id] = payload.value
-
-    const params = {
-      "fromDate": fromDate,
-      "productStoreId": eComStoreId,
-      "settingTypeEnumId": "PRDT_IDEN_PREF",
-      "settingValue": JSON.stringify(prefValue)
-    }
-
-    try {
-      const resp = await UserService.updateProductIdentificationPref(params) as any
-
-      if(resp.status == 200) {
-        showToast(translate('Product identifier preference updated'))
-      } else {
-        showToast(translate('Failed to update product identifier preference'))
-        prefValue = JSON.parse(JSON.stringify(state.productIdentificationPref))
-      }
-    } catch(err) {
-      showToast(translate('Failed to update product identifier preference'))
-      prefValue = JSON.parse(JSON.stringify(state.productIdentificationPref))
-      console.error(err)
-    }
-    commit(types.USER_PREF_PRODUCT_IDENT_CHANGED, prefValue)
-  },
-
-  async createProductIdentificationPref({ commit, state }) {
-    const prefValue = {
-      primaryId: 'productId',
-      secondaryId: ''
-    }
-
-    const params = {
-      "fromDate": Date.now(),
-      "productStoreId": (state.currentEComStore as any).productStoreId,
-      "settingTypeEnumId": "PRDT_IDEN_PREF",
-      "settingValue": JSON.stringify(prefValue)
-    }
-
-    try {
-      await UserService.createProductIdentificationPref(params) as any
-    } catch(err) {
-      console.error(err)
-    }
-
-    // not checking for resp success and fail case as every time we need to update the state with the
-    // default value when creating a pref
-    commit(types.USER_PREF_PRODUCT_IDENT_CHANGED, prefValue)
-  },
-
-  async getProductIdentificationPref({ commit, dispatch }, eComStoreId) {
-
-    // when selecting none as ecom store, not fetching the pref as it returns all the entries with the pref id
-    if(!eComStoreId) {
-      commit(types.USER_PREF_PRODUCT_IDENT_CHANGED, {'primaryId': 'productId', 'secondaryId': ''})
-      return;
-    }
-
-    const payload = {
-      "inputFields": {
-        "productStoreId": eComStoreId,
-        "settingTypeEnumId": "PRDT_IDEN_PREF"
-      },
-      "filterByDate": 'Y',
-      "entityName": "ProductStoreSetting",
-      "fieldList": ["settingValue", "fromDate"],
-      "viewSize": 1
-    }
-
-    try {
-      const resp = await UserService.getProductIdentificationPref(payload) as any
-      if(resp.status == 200 && resp.data.count > 0) {
-        const respValue = JSON.parse(resp.data.docs[0].settingValue)
-        commit(types.USER_PREF_PRODUCT_IDENT_CHANGED, {'primaryId': respValue['primaryId'], 'secondaryId': respValue['secondaryId']})
-      } else if(resp.status == 200 && resp.data.error) {
-        dispatch('createProductIdentificationPref')
-      }
-    } catch(err) {
-      console.error(err)
-    }
-  },
 
   updatePwaState({ commit }, payload) {
     commit(types.USER_PWA_STATE_UPDATED, payload);

src/store/modules/user/getters.ts

@@ -36,9 +36,6 @@ const getters: GetterTree <UserState, RootState> = {
     getFacilityLocationsByFacilityId: (state) => (facilityId: string) => {
         return state.facilityLocationsByFacilityId[facilityId];
     },
-    getProductIdentificationPref: (state) => {
-        return state.productIdentificationPref;
-    },
     getPwaState(state) {
         return state.pwaState;
     }

src/store/modules/user/index.ts

@@ -15,10 +15,6 @@ const userModule: Module<UserState, RootState> = {
       permissions: [],
       instanceUrl: '',
       facilityLocationsByFacilityId: {},
-      productIdentificationPref: {
-        primaryId: 'productId',
-        secondaryId: ''
-      },
       pwaState: {
         updateExists: false,
         registration: null,

src/store/modules/user/mutation-types.ts

@@ -6,6 +6,5 @@ export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATE
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
 export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
 export const USER_FACILITY_LOCATIONS_BY_FACILITY_ID = SN_USER + '/FACILITY_LOCATIONS_BY_FACILITY_ID'
-export const USER_PREF_PRODUCT_IDENT_CHANGED = SN_USER + '/PREF_PRODUCT_IDENT_CHANGED'
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'

src/store/modules/user/mutations.ts

@@ -28,9 +28,6 @@ const mutations: MutationTree <UserState> = {
     [types.USER_FACILITY_LOCATIONS_BY_FACILITY_ID] (state, payload) {
         state.facilityLocationsByFacilityId[payload.facilityId] = payload.facilityLocations;
     },
-    [types.USER_PREF_PRODUCT_IDENT_CHANGED](state, payload) {
-        state.productIdentificationPref = payload
-    },
     [types.USER_PERMISSIONS_UPDATED] (state, payload) {
         state.permissions = payload
     },

src/store/modules/util/UtilState.ts

@@ -1,6 +1,5 @@
 export default interface UtilState {
     status: any;
-    productIdentifications: Array<string>;
     isForceScanEnabled: boolean;
     barcodeIdentificationPref: any;
 }

src/store/modules/util/actions.ts

@@ -47,9 +47,6 @@ const actions: ActionTree<UtilState, RootState> = {
     }
     return cachedStatus;
   },
-  async setProductIdentifications({ commit }, payload) {
-    commit(types.UTIL_PRODUCT_IDENT_UPDATED, payload)
-  },
 
   async getForceScanSetting({ commit, dispatch }, eComStoreId) {
     const payload = {

src/store/modules/util/getters.ts

@@ -6,9 +6,6 @@ const getters: GetterTree <UtilState, RootState> = {
   getStatusDesc: (state) => (statusId: string) => {
     return state.status[statusId]
   },
-  getProductIdentifications: (state) => {
-    return state.productIdentifications
-  },
   isForceScanEnabled(state) {
     return state.isForceScanEnabled
   },

src/store/modules/util/index.ts

@@ -9,7 +9,6 @@ const utilModule: Module<UtilState, RootState> = {
     namespaced: true,
     state: {
       status: {},
-      productIdentifications: [],
       isForceScanEnabled: false,
       barcodeIdentificationPref: ""
     },

src/store/modules/util/mutations.ts

@@ -6,9 +6,6 @@ const mutations: MutationTree <UtilState> = {
   [types.UTIL_STATUS_UPDATED](state, payload) {
     state.status = payload
   },
-  [types.UTIL_PRODUCT_IDENT_UPDATED](state, payload) {
-    state.productIdentifications = payload
-  },
   [types.UTIL_FORCE_SCAN_STATUS_UPDATED](state, payload) {
     state.isForceScanEnabled = payload
   },

src/views/AddProductModal.vue

@@ -65,11 +65,11 @@ import {
   IonToolbar,
   modalController,
 } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { DxpShopifyImg, translate, getProductIdentificationValue } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
 
 export default defineComponent({
@@ -169,12 +169,16 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
     return {
       closeOutline,
       checkmarkCircle,
       store,
       translate,
-      getProductIdentificationValue
+      getProductIdentificationValue,
+      productIdentificationPref
     };
   },
 });