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

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',
@@ -114,6 +114,9 @@ export default defineComponent({
     if (this.userProfile && this.userProfile.userTimeZone) {
       Settings.defaultZone = this.userProfile.userTimeZone;
     }
+
+    await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+      .catch((error) => console.log(error))
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);

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

@@ -23,8 +23,8 @@
           <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
         </ion-thumbnail>
         <ion-label>
-          <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}</h2>
-          <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
+          <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) || getProduct(item.productId).productName }}</h2>
+          <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId))}}</p>
         </ion-label>
         <ion-buttons>
           <ion-checkbox aria-label="itemStatus" slot="end" :modelValue="isPOItemStatusPending(item) ? item.isChecked : true" :disabled="isPOItemStatusPending(item) ? false : true" />
@@ -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/actions.ts

@@ -12,7 +12,7 @@ import {
   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 actions: ActionTree<UserState, RootState> = {
       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;
@@ -163,7 +168,7 @@ const actions: ActionTree<UserState, RootState> = {
       '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 @@ const actions: ActionTree<UserState, RootState> = {
       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/views/AddProductModal.vue

@@ -20,8 +20,8 @@
           </ion-thumbnail>
           <ion-label>
             <!-- Honouring the identifications set by the user on the settings page -->
-            <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.productId)) : getProduct(product.productId).productName }}</h2>
-            <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(product.productId)) }}</p>
+            <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.productId)) || getProduct(product.productId).productName }}</h2>
+            <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(product.productId))}}</p>
           </ion-label>
           <ion-icon v-if="isProductAvailableInShipment(product.productId)" color="success" :icon="checkmarkCircle" />
           <ion-button v-else fill="outline" @click="addtoShipment(product)">{{ translate("Add to Shipment") }}</ion-button>
@@ -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
     };
   },
 });

src/views/AddProductToPOModal.vue

@@ -19,8 +19,8 @@
           </ion-thumbnail>
           <ion-label>
             <!-- Honouring the identifications set by the user on the settings page -->
-            <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.productId)) : getProduct(product.productId).productName }}</h2>
-            <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(product.productId)) }}</p>
+            <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.productId)) || getProduct(product.productId).productName }}</h2>
+            <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(product.productId))}}</p>
           </ion-label>
           <ion-icon v-if="isProductAvailableInOrder(product.productId)" color="success" :icon="checkmarkCircle" />
           <ion-button v-else fill="outline" @click="addtoOrder(product)">{{ translate("Add to Purchase Order") }}</ion-button>
@@ -56,11 +56,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({
@@ -160,12 +160,15 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
     return {
       closeOutline,
       checkmarkCircle,
       store,
       translate,
       getProductIdentificationValue,
+      productIdentificationPref
     };
   },
 });

src/views/PurchaseOrderDetail.vue

@@ -56,8 +56,8 @@
                   <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
                 </ion-thumbnail>
                 <ion-label class="ion-text-wrap">
-                  <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}</h2>
-                  <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
+                  <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) || getProduct(item.productId).productName }}</h2>
+                  <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId))}}</p>
                 </ion-label>
               </ion-item>
             </div>
@@ -177,10 +177,10 @@ import {
   alertController,
   modalController
 } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { addOutline, cameraOutline, checkmarkDone, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline } from 'ionicons/icons';
 import ReceivingHistoryModal from '@/views/ReceivingHistoryModal.vue'
-import { DxpShopifyImg, translate, getProductIdentificationValue } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { useStore, mapGetters } from 'vuex';
 import { useRouter } from 'vue-router';
 import Scanner from "@/components/Scanner.vue"
@@ -389,6 +389,8 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const router = useRouter();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
 
     return {
       Actions,
@@ -406,7 +408,8 @@ export default defineComponent({
       store,
       timeOutline,
       translate,
-      getProductIdentificationValue
+      getProductIdentificationValue,
+      productIdentificationPref,
     };
   },
 });