Merge pull request #204 from amansinghbais/inventory-count/#178-produ…

…ctIdentifier

Implemented: product identifier component in settings page from dxp-components (dxp-178)

package.json

@@ -18,7 +18,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.7.5",
+    "@hotwax/dxp-components": "^1.8.0",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",

src/App.vue

@@ -22,6 +22,7 @@ import TabBar from "./components/TabBar.vue"
 import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { useProductIdentificationStore } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'App',
@@ -77,6 +78,10 @@ export default defineComponent({
       });
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
+
+    // Get product identification from api using dxp-component
+    await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+      .catch((error) => console.error(error));
   },
   created() {
     initialise({
@@ -107,7 +112,8 @@ export default defineComponent({
     },
     ...mapGetters({
       userToken: 'user/getUserToken',
-      instanceUrl: 'user/getInstanceUrl'
+      instanceUrl: 'user/getInstanceUrl',
+      currentEComStore: 'user/getCurrentEComStore'
     })
   },
   setup() {

src/adapter/index.ts

@@ -1,13 +1,15 @@
-import { api, client, getConfig, getUserFacilities, initialise, logout, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getConfig, getProductIdentificationPref, getUserFacilities, initialise, logout, resetConfig, setProductIdentificationPref, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getProductIdentificationPref,
   getUserFacilities,
   initialise,
   logout,
   resetConfig,
+  setProductIdentificationPref,
   updateInstanceUrl,
   updateToken
 }

src/components/ProductListItem.vue

@@ -4,23 +4,23 @@
       <ShopifyImg :src="product.mainImageUrl" size="small" />
     </ion-thumbnail>
     <ion-label>
-      <p>{{ product.productName }}</p>
-      <h3>{{ product.sku }}</h3>
+      <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, product) }}</p>
+      <h3>{{ getProductIdentificationValue(productIdentificationPref.primaryId, product) ? getProductIdentificationValue(productIdentificationPref.primaryId, product) : product.productName }}</h3>
       <p>{{$filters.getFeature(product.featureHierarchy, '1/COLOR/')}} {{$filters.getFeature(product.featureHierarchy, '1/COLOR/') && $filters.getFeature(product.featureHierarchy, '1/SIZE/')? "|" : ""}} {{$filters.getFeature(product.featureHierarchy, '1/SIZE/')}}</p>
     </ion-label>
   </ion-item>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import {
   IonItem,
   IonThumbnail,
   IonLabel
 } from '@ionic/vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex';
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: "ProductListItem",
@@ -39,8 +39,12 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     
     return {
+      getProductIdentificationValue,
+      productIdentificationPref,
       router,
       store
     }

src/main.ts

@@ -33,7 +33,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 } from '@/adapter'
+import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -53,7 +53,9 @@ const app = createApp(App)
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig,
-    initialise
+    getProductIdentificationPref,
+    initialise,
+    setProductIdentificationPref
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/store/modules/user/actions.ts

@@ -13,7 +13,7 @@ import {
   resetPermissions,
   setPermissions
 } from '@/authorization'
-import { useAuthStore } from '@hotwax/dxp-components'
+import { useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import store from '@/store'
 
@@ -91,6 +91,10 @@ const actions: ActionTree<UserState, RootState> = {
       commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
       commit(types.USER_VIEW_QOH_CNFG_UPDATED, { currentQOHViewConfig, viewQOH: currentQOHViewConfig.settingValue == "true" })
       commit(types.USER_TOKEN_CHANGED, { newToken: token })
+
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(currentEComStore?.productStoreId)
+        .catch((error) => console.error(error));
     } catch (err: any) {
       // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
       // TODO Check if handling of specific status codes is required.

src/views/Settings.vue

@@ -61,6 +61,8 @@
         <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
       </div>
       <section>
+        <ProductIdentifier />
+
         <ion-card>
           <ion-card-header>
             <ion-card-title>

src/views/Upload.vue

@@ -13,8 +13,8 @@
             <ShopifyImg :src="product.mainImageUrl" size="small"/>
           </ion-thumbnail>
           <ion-label @click="viewProduct(product)">
-            <p class="overline">{{ product.productName }}</p>
-            <h2>{{ product.sku }}</h2>
+            <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, product) }}</p>
+            <h2>{{  getProductIdentificationValue(productIdentificationPref.primaryId, product) ? getProductIdentificationValue(productIdentificationPref.primaryId, product) : product.productName }}</h2>
           </ion-label>
           <ion-badge slot="end" color="dark">{{ product.quantity }}</ion-badge>
         </ion-item>
@@ -66,11 +66,11 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { colorPaletteOutline, resize, cloudUploadOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { getProductIdentificationValue, ShopifyImg , useProductIdentificationStore } from '@hotwax/dxp-components';
 import { Actions, hasPermission } from '@/authorization';
 import { showToast } from '@/utils';
 
@@ -138,15 +138,19 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const router = useRouter();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
 
     return {
       Actions,
+      cloudUploadOutline,
+      colorPaletteOutline,
+      getProductIdentificationValue,
       hasPermission,
-      store,
+      productIdentificationPref,
       router,
-      colorPaletteOutline,
       resize,
-      cloudUploadOutline
+      store,
     };
   },
 });

src/views/count.vue

@@ -15,8 +15,8 @@
         <div class="product-info">
           <ion-item lines="none">
             <ion-label>
-              <p class="overline">{{ product.productName }}</p>
-              <h2>{{ product.sku }}</h2>
+              <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, product) }}</p>
+              <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, product) ? getProductIdentificationValue(productIdentificationPref.primaryId, product) : product.productName  }}</h2>
             </ion-label>
           </ion-item>
 
@@ -124,13 +124,13 @@
     IonToolbar,
     pickerController
   } from "@ionic/vue";
-  import { defineComponent } from "vue";
+  import { computed, defineComponent } from "vue";
   import { cloudUploadOutline, colorPaletteOutline, locationOutline, resize, saveOutline } from "ionicons/icons";
   import { mapGetters, useStore } from "vuex";
   import { hasError, showToast } from "@/utils";
   import { translate } from "@/i18n";
   import { useRouter } from "vue-router";
-  import { ShopifyImg } from "@hotwax/dxp-components";
+  import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
   import { UtilService } from "@/services/UtilService";
   import { ProductService } from '@/services/ProductService';
   import { StockService } from '@/services/StockService';
@@ -372,13 +372,17 @@
     setup() {
       const store = useStore();
       const router = useRouter();
+      const productIdentificationStore = useProductIdentificationStore();
+      let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
   
       return {
         Actions,
         cloudUploadOutline,
         colorPaletteOutline,
+        getProductIdentificationValue,
         hasPermission,
         locationOutline,
+        productIdentificationPref,
         resize,
         router,
         saveOutline,