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

.env.example

@@ -5,6 +5,5 @@ VUE_APP_BASE_URL=
 VUE_APP_VIEW_SIZE=10
 VUE_APP_PERMISSION_ID="RECEIVING_APP_VIEW"
 VUE_APP_ALIAS={}
-VUE_APP_PRDT_IDENT=["productId", "groupId", "groupName", "internalName", "parentProductName", "sku", "title", "SHOPIFY_PROD_SKU", "ERP_ID", "UPCA"]
 VUE_APP_DEFAULT_LOG_LEVEL="error"
 VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"

src/App.vue

@@ -17,7 +17,7 @@ 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 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       currentEComStore: 'user/getCurrentEComStore',
-      productIdentifications: 'util/getProductIdentifications',
       userProfile: 'user/getUserProfile',
       userToken: 'user/getUserToken',
       instanceUrl: 'user/getInstanceUrl'
@@ -100,15 +99,13 @@ export default defineComponent({
     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) : [])
+  async mounted(){
+    if(this.userToken) {
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+        .catch((error) => console.error(error));
     }
 
-    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) {

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({
@@ -93,7 +93,6 @@ export default defineComponent({
       getProduct: 'product/getProduct',
       getPOItemAccepted: 'order/getPOItemAccepted',
       order: 'order/getCurrent',
-      productIdentificationPref: 'user/getProductIdentificationPref',
       purchaseOrders: 'order/getPurchaseOrders'
     })
   },
@@ -206,6 +205,8 @@ export default defineComponent({
   setup() {
     const router = useRouter()
     const store = useStore()
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
 
     return {
       arrowBackOutline,
@@ -218,7 +219,8 @@ export default defineComponent({
       saveOutline,
       store,
       translate,
-      getProductIdentificationValue
+      getProductIdentificationValue,
+      productIdentificationPref
     };
   }
 });

src/locales/en.json

@@ -32,7 +32,6 @@
   "Failed to receive shipment": "Failed to receive shipment",
   "Failed to receive some of the items": "Failed to receive some of the items",
   "Failed to update force scan preference.": "Failed to update force scan preference.",
-  "Failed to update product identifier preference": "Failed to update product identifier preference",
   "facility location": "facility location",
   "Facility locations were not found corresponding to destination facility of return shipment. Please add facility locations to avoid receive return shipment failure.": "Facility locations were not found corresponding to destination facility of return shipment. Please add facility locations to avoid receive return shipment failure.",
   "Failed to update barcode identification preference.": "Failed to update barcode identification preference.",
@@ -73,9 +72,9 @@
   "primary identifier": "primary identifier",
   "Primary identifier": "Primary identifier",
   "Primary Product Identifier": "Primary Product Identifier",
+  "Primary": "Primary",
   "Proceed": "Proceed",
   "Product Identifier": "Product Identifier",
-  "Product identifier preference updated": "Product identifier preference updated",
   "Product is already received:": "Product is already received: {itemName}",
   "Purchase Order": "Purchase Order",
   "Purchase Order Details": "Purchase Order Details",
@@ -111,6 +110,7 @@
   "Search returns": "Search returns",
   "Search time zones": "Search time zones",
   "Search SKU or product name": "Search SKU or product name",
+  "Secondary": "Secondary",
   "Secondary Product Identifier": "Secondary Product Identifier",
   "Select": "Select",
   "Select all": "Select all",

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/services/UserService.ts

@@ -96,31 +96,6 @@ const setUserPreference = async (payload: 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'];
@@ -217,9 +192,6 @@ export const UserService = {
     getUserPermissions,
     getFacilityLocations,
     getEComStores,
-    getProductIdentificationPref,
-    createProductIdentificationPref,
-    updateProductIdentificationPref,
     setUserPreference,
     checkPermission
 }

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;
@@ -89,8 +94,6 @@
       // Get facility location of selected facility
       dispatch('getFacilityLocations', currentFacility.facilityId);
       // TODO: fetch product identifications from enumeration instead of storing it in env
-      this.dispatch('util/setProductIdentifications', process.env.VUE_APP_PRDT_IDENT ? JSON.parse(process.env.VUE_APP_PRDT_IDENT) : [])
-      dispatch('getProductIdentificationPref', currentEComStore?.productStoreId);
       this.dispatch('util/getForceScanSetting', currentEComStore?.productStoreId);
       this.dispatch('util/getBarcodeIdentificationPref', currentEComStore?.productStoreId);
     } catch (err: any) {
@@ -135,7 +138,6 @@
 
     // TODO add any other tasks if need
     commit(types.USER_END_SESSION)
-    this.dispatch('util/setProductIdentifications', [])
     this.dispatch('order/clearPurchaseOrders');
     this.dispatch('util/updateForceScanStatus', false)
     this.dispatch('util/updateBarcodeIdentificationPref', "")
@@ -157,13 +159,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 +237,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;
     }