Implemented: product identifier component and product store selector from the dxp-components (#220)

package.json

@@ -16,8 +16,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.15.4",
-    "@hotwax/oms-api": "^1.15.1",
+    "@hotwax/dxp-components": "^1.16.0",
+    "@hotwax/oms-api": "^1.16.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",
     "@ionic/vue-router": "~7.6.0",

src/App.vue

@@ -15,8 +15,9 @@ import emitter from "@/event-bus"
 import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { showToast } from "@/utils";
-import { translate } from "@hotwax/dxp-components";
+import { translate, useProductIdentificationStore, useUserStore } from "@hotwax/dxp-components";
 import { useRouter } from 'vue-router';
+import logger from '@/logger';
 
 export default defineComponent({
   name: 'App',
@@ -100,6 +101,12 @@ export default defineComponent({
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
     emitter.on('playAnimation', this.playAnimation);
+
+    if(this.userToken) {
+      const currentEComStore : any = useUserStore().getCurrentEComStore;
+      await useProductIdentificationStore().getIdentificationPref(currentEComStore.productStoreId)
+        .catch((error) => logger.error(error));
+    }
   },
   created() {
     initialise({

src/adapter/index.ts

@@ -2,7 +2,11 @@ import {
   api,
   client,
   getConfig,
+  getEComStoresByFacility,
+  getProductIdentificationPref,
+  getUserPreference,
   hasError,
+  fetchGoodIdentificationTypes,
   fetchProducts,
   initialise,
   logout,
@@ -12,14 +16,20 @@ import {
   updateToken,
   updateInstanceUrl,
   setUserTimeZone,
-  getAvailableTimeZones
+  getAvailableTimeZones,
+  setProductIdentificationPref,
+  setUserPreference
 } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getEComStoresByFacility,
+  getProductIdentificationPref,
+  getUserPreference,
   hasError,
+  fetchGoodIdentificationTypes,
   fetchProducts,
   initialise,
   logout,
@@ -29,5 +39,7 @@ export {
   updateToken,
   updateInstanceUrl,
   setUserTimeZone,
-  getAvailableTimeZones
+  getAvailableTimeZones,
+  setProductIdentificationPref,
+  setUserPreference
 }

src/authorization/Actions.ts

@@ -1,3 +1,4 @@
 export default {
-  'APP_COMMERCE_VIEW': 'APP_COMMERCE_VIEW'
+  'APP_COMMERCE_VIEW': 'APP_COMMERCE_VIEW',
+  'APP_PRODUCT_IDENTIFIER_UPDATE': 'APP_PRODUCT_IDENTIFIER_UPDATE',
 }

src/authorization/Rules.ts

@@ -1,5 +1,6 @@
 export default {
   "APP_INVENTORY_VIEW": "MDM_IMP_INVENTORY_VIEW", 
   "IMPORT_APP_VIEW": "IMPORT_APP_VIEW",
-  "APP_COMMERCE_VIEW": "COMMERCEUSER_VIEW"
+  "APP_COMMERCE_VIEW": "COMMERCEUSER_VIEW",
+  "APP_PRODUCT_IDENTIFIER_UPDATE":"COMMON_ADMIN",
 } as any 

src/components/PurchaseOrderDetail.vue

@@ -27,8 +27,8 @@
               <DxpShopifyImg :src="item.imageUrl" size="small" />
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
-              <h3>{{ item.pseudoId }}</h3>
-              <p v-if="item.initialSKU">{{ item.initialSKU }}</p>
+              <h3>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.pseudoId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.pseudoId)) : item.pseudoId }}</h3>
+              <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.pseudoId)) }}</p>
             </ion-label>
           </ion-item>
           <ion-chip outline class="tablet">
@@ -69,7 +69,8 @@ import { defineComponent } from "@vue/runtime-core";
 import { mapGetters, useStore } from "vuex";
 import ProductPopover from '@/components/ProductPopover.vue'
 import { DateTime } from 'luxon';
-import { translate } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, translate, useProductIdentificationStore } from "@hotwax/dxp-components";
+import { computed } from "vue";
 
 export default defineComponent({
   name: "PurchaseOrderDetails",
@@ -158,10 +159,15 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
+
     return {
+      getProductIdentificationValue,
       sendOutline,
       store,
       ellipsisVerticalOutline,
+      productIdentificationPref,
       translate
     }
   }

src/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "All": "All",
   "App": "App",
   "Apply": "Apply",
@@ -25,6 +26,7 @@
   "Changes to the date time format will cause edits done to your PO to be reverted.": "Changes to the date time format will cause edits done to your PO to be reverted.",
   "Configure date time format": "Configure date time format",
   "Check sample": "Check sample",
+  "Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Completed": "Completed",
   "Confirm": "Confirm",
@@ -123,9 +125,12 @@
   "Please upload a valid reset inventory csv to continue": "Please upload a valid reset inventory csv to continue",
   "PO External Order ID": "PO External Order ID",
   "Preorder": "Preorder",
+  "Primary": "Primary",
   "Product Identification": "Product Identification",
+  "Product Identifier": "Product Identifier",
   "Product SKU": "Product SKU",
   "Product store": "Product store",
+  "Product Store": "Product Store",
   "Product not found": "Product not found",
   "Purchase order": "Purchase order",
   "Purchase orders": "Purchase orders",
@@ -154,12 +159,14 @@
   "Search": "Search",
   "Search products": "Search products",
   "Search time zones": "Search time zones",
+  "Secondary": "Secondary",
   "Seems like uploaded file has missing products, checked with initial records.": "Seems like uploaded file has missing products, checked with initial {initialCount} records.",
   "Schedule": "Schedule",
   "Select": "Select",
   "Select mapping": "Select mapping",
   "Select SKU": "Select SKU",
   "Select all the fields to continue": "Select all the fields to continue",
+  "Select store": "Select store",
   "Select time zone": "Select time zone",
   "Select time": "Select time",
   "Select the column index for the following information in the uploaded CSV.": "Select the column index for the following information in the uploaded CSV.",
@@ -180,6 +187,7 @@
   "Shopify product UPC": "Shopify product UPC",
   "Start with Ionic": "Start with Ionic",
   "STAY": "STAY",
+  "Store": "Store",
   "store name": "store name",
   "The inventory has been updated successfully": "The inventory has been updated successfully",
   "The PO has been uploaded successfully": "The PO has been uploaded successfully",

src/main.ts

@@ -32,9 +32,8 @@ import permissionActions from '@/authorization/Actions';
 import logger from './logger';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
-import { getConfig, initialise } from '@hotwax/oms-api';
 import localeMessages from './locales';
-import { setUserTimeZone, getAvailableTimeZones} from '@/adapter'
+import { fetchGoodIdentificationTypes, getAvailableTimeZones, getConfig, getEComStoresByFacility, getProductIdentificationPref, getUserPreference, initialise, setProductIdentificationPref, setUserPreference, setUserTimeZone } from '@/adapter'
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -57,11 +56,17 @@ const app = createApp(App)
     logout,
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
+    fetchGoodIdentificationTypes,
     getConfig,
+    getEComStoresByFacility,
+    getProductIdentificationPref,
+    getUserPreference,
     initialise,
     localeMessages,
     setUserTimeZone,
     getAvailableTimeZones,
+    setProductIdentificationPref,
+    setUserPreference,
     hasPermission
   });
 

src/services/UserService.ts

@@ -1,6 +1,7 @@
 import { api, client } from '@/adapter'
 import store from '@/store';
 import { hasError } from '@/adapter';
+import logger from '@/logger';
 
 const login = async (username: string, password: string): Promise <any> => {
   return api({
@@ -141,10 +142,37 @@ const getUserPermissions = async (payload: any, token: any): Promise<any> => {
   }
 }
 
+async function getEComStores(): Promise<any> {
+  const params = {
+    "viewSize": 200,
+    "fieldList": ["productStoreId", "storeName"],
+    "entityName": "ProductStore",
+    "distinct": "Y",
+    "noConditionFind": "Y"
+  };
+
+  try {
+    const resp = await api({
+      url: "performFind",
+      method: "get",
+      params
+    }) as any;
+    if(!hasError(resp)) {
+      return Promise.resolve(resp.data.docs?.length ? resp.data.docs : []);
+    } else {
+      throw resp.data
+    }
+  } catch(error) {
+    logger.error(error)
+    return Promise.resolve([])
+  }
+}
+
 export const UserService = {
     createFieldMapping,
     deleteFieldMapping,
     login,
+    getEComStores,
     getFieldMappings,
     getProfile,
     getUserPermissions,

src/store/modules/user/actions.ts

@@ -6,7 +6,7 @@ import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import logger from "@/logger";
-import { useAuthStore, translate } from '@hotwax/dxp-components';
+import { useAuthStore, translate, useUserStore, useProductIdentificationStore } from '@hotwax/dxp-components';
 import emitter from '@/event-bus'
 import {
   getServerPermissionsFromRules,
@@ -62,6 +62,14 @@ const actions: ActionTree<UserState, RootState> = {
 
         await dispatch('getProfile')
         dispatch('setPreferredDateTimeFormat', process.env.VUE_APP_DATE_FORMAT ? process.env.VUE_APP_DATE_FORMAT : 'MM/dd/yyyy');
+
+        const ecomStores = await UserService.getEComStores()
+        useUserStore().eComStores = ecomStores
+        await useUserStore().getEComStorePreference("SELECTED_BRAND")
+        const preferredStore: any = useUserStore().getCurrentEComStore
+
+        await useProductIdentificationStore().getIdentificationPref(preferredStore.productStoreId)
+          .catch((error) => logger.error(error));
       }
     } catch (err: any) {
       showToast(translate('Something went wrong'));

src/views/InventoryReview.vue

@@ -61,8 +61,8 @@
                 <DxpShopifyImg :src="item.imageUrl" size="small" />
               </ion-thumbnail>
               <ion-label class="ion-text-wrap">
-                <h3>{{ item.pseudoId }}</h3>
-                <p v-if="item.initialSKU">{{ item.initialSKU }}</p>
+                <h3>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.pseudoId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.pseudoId)) : item.pseudoId }}</h3>
+                <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.pseudoId)) }}</p>
               </ion-label>
             </ion-item>
 
@@ -95,10 +95,10 @@
 </template>   
 <script lang="ts">
 import { UploadService } from "@/services/UploadService";
-import { DxpShopifyImg, translate } from "@hotwax/dxp-components";
+import { DxpShopifyImg, getProductIdentificationValue, translate, useProductIdentificationStore } from "@hotwax/dxp-components";
 import ProductPopover from '@/components/ProductPopover.vue'
 import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue'
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router';
 import { jsonToCsv, showToast } from '@/utils';
@@ -323,21 +323,25 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
 
     return {
       businessOutline,
       calculatorOutline,
       chevronForwardOutline,
       checkboxOutline,
       ellipsisVerticalOutline,
+      getProductIdentificationValue,
       locationOutline,
       arrowUndoOutline,
       shirtOutline,
       cloudUploadOutline,
       warningOutline,
+      productIdentificationPref,
       router,
       store,
-      translate
+      translate 
     }
   }
 });