Implemented: added product identifier in setting page (hotwax#220)

src/App.vue

@@ -15,7 +15,7 @@ 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 } from "@hotwax/dxp-components";
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -100,6 +100,11 @@ export default defineComponent({
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
     emitter.on('playAnimation', this.playAnimation);
+
+    if(this.userToken) {
+      await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+        .catch((error) => console.log(error));
+    }
   },
   created() {
     initialise({
@@ -132,7 +137,8 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       userToken: 'user/getUserToken',
-      instanceUrl: 'user/getInstanceUrl'
+      instanceUrl: 'user/getInstanceUrl',
+      currentEComStore: 'user/getCurrentEComStore',
     })
   },
   setup(){

src/adapter/index.ts

@@ -2,6 +2,7 @@ import {
   api,
   client,
   getConfig,
+  getProductIdentificationPref,
   hasError,
   fetchProducts,
   initialise,
@@ -12,13 +13,15 @@ import {
   updateToken,
   updateInstanceUrl,
   setUserTimeZone,
+  setProductIdentificationPref,
   getAvailableTimeZones
 } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getProductIdentificationPref,
   hasError,
   fetchProducts,
   initialise,
@@ -29,5 +32,6 @@ export {
   updateToken,
   updateInstanceUrl,
   setUserTimeZone,
+  setProductIdentificationPref,
   getAvailableTimeZones
 }

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>
+              {{ getProduct.state.cached(item.productId)}}
+              <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}</h2>
             </ion-label>
           </ion-item>
           <ion-chip outline class="tablet">
@@ -67,9 +67,10 @@ import {
 import { sendOutline, ellipsisVerticalOutline } from 'ionicons/icons';
 import { defineComponent } from "@vue/runtime-core";
 import { mapGetters, useStore } from "vuex";
+import { computed } from 'vue'
 import ProductPopover from '@/components/ProductPopover.vue'
 import { DateTime } from 'luxon';
-import { translate } from "@hotwax/dxp-components";
+import { translate, getProductIdentificationValue, useProductIdentificationStore } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "PurchaseOrderDetails",
@@ -158,11 +159,15 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
     return {
       sendOutline,
       store,
       ellipsisVerticalOutline,
-      translate
+      translate,
+      productIdentificationPref,
+      getProductIdentificationValue
     }
   }
 })

src/main.ts

@@ -34,7 +34,7 @@ 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 { setUserTimeZone, getAvailableTimeZones , getProductIdentificationPref , setProductIdentificationPref} from '@/adapter'
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -60,7 +60,9 @@ const app = createApp(App)
     initialise,
     localeMessages,
     setUserTimeZone,
-    getAvailableTimeZones
+    getAvailableTimeZones,
+    getProductIdentificationPref,
+    setProductIdentificationPref
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/services/UserService.ts

@@ -13,6 +13,46 @@ const login = async (username: string, password: string): Promise <any> => {
   });
 }
 
+const getCurrentEComStore = async (token: any, facilityId: any): Promise<any> => {
+
+  // If the facilityId is not provided, it may be case of user not associated with any facility or the logout
+  if (!facilityId) {
+    return Promise.resolve({});
+  }
+
+  const baseURL = store.getters['user/getBaseUrl'];
+  try {
+    const data = {
+      "inputFields": {
+        "facilityId": facilityId,
+      },
+      "fieldList": ["defaultCurrencyUomId", "productStoreId"],
+      "entityName": "ProductStoreFacilityDetail",
+      "noConditionFind": "Y",
+      "filterByDate": 'Y',
+      "viewSize": 1
+    }
+    const resp = await client({
+      url: "performFind",
+      method: "post",
+      data,
+      baseURL,
+      headers: {
+        Authorization:  'Bearer ' + token,
+        'Content-Type': 'application/json'
+      }
+    });
+    if (hasError(resp)) {
+      throw resp.data;
+    }
+
+    return Promise.resolve(resp.data.docs?.length ? resp.data.docs[0] : {});
+  } catch(error: any) {
+    console.error(error)
+    return Promise.resolve({})
+  }
+}
+
 const getProfile = async (): Promise <any>  => {
     return api({
       url: "user-profile", 
@@ -148,5 +188,6 @@ export const UserService = {
     getFieldMappings,
     getProfile,
     getUserPermissions,
-    updateFieldMapping
+    updateFieldMapping,
+    getCurrentEComStore
 }

src/store/modules/product/getters.ts

@@ -5,7 +5,8 @@ import RootState from "../../RootState";
 const getters: GetterTree<ProductState, RootState> = {
   getProduct: (state) => (productId: string) => {
     // Returning empty object so that it doesn't breaks the UI
+    console.log(state.cached)
     return state.cached[productId] ? state.cached[productId] : {};
-  }
+  },
 };
 export default getters;

src/store/modules/user/UserState.ts

@@ -13,4 +13,5 @@ export default interface UserState {
         value: object;
     };
     permissions: any; 
+    currentEComStore: any;
 }

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 , useProductIdentificationStore } from '@hotwax/dxp-components';
 import emitter from '@/event-bus'
 import {
   getServerPermissionsFromRules,
@@ -60,9 +60,15 @@ const actions: ActionTree<UserState, RootState> = {
         commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
         commit(types.USER_TOKEN_CHANGED, { newToken: token })
 
-        await dispatch('getProfile')
+        await dispatch('getProfile' , token)
         dispatch('setPreferredDateTimeFormat', process.env.VUE_APP_DATE_FORMAT ? process.env.VUE_APP_DATE_FORMAT : 'MM/dd/yyyy');
       }
+      else {
+        commit(types.USER_TOKEN_CHANGED, { newToken: token })
+        updateToken(token)
+        await dispatch('getProfile')
+        await dispatch('getProfile', token)
+      }
     } catch (err: any) {
       showToast(translate('Something went wrong'));
       logger.error("error", err);
@@ -129,21 +135,40 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Get User profile
    */
-  async getProfile ( { commit, dispatch }) {
+  async getProfile ( { commit, dispatch }, token) {
     const resp = await UserService.getProfile()
     if (resp.status === 200) {
       dispatch('getFieldMappings')
       commit(types.USER_INFO_UPDATED, resp.data);
+      const currentFacility = resp.data.facilities.length > 0 ? resp.data.facilities[0] : {};
+
+      commit(types.USER_CURRENT_FACILITY_UPDATED, currentFacility);
+
+      // get and set current ecom store in state
+      const currentEComStore = await UserService.getCurrentEComStore(token, currentFacility?.facilityId);
+      commit(types.USER_CURRENT_ECOM_STORE_UPDATED, currentEComStore);
+
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(currentEComStore?.productStoreId)
+        .catch((error) => console.error(error));
     }
   },
 
   /**
    * update current facility information
    */
-  async setFacility ({ commit }, payload) {
+  async setFacility ({ commit, state }, payload) {
     commit(types.USER_CURRENT_FACILITY_UPDATED, payload.facility);
+
+    // get and set current ecom store in state
+    const currentEComStore = await UserService.getCurrentEComStore(state.token, payload.facility.facilityId);
+    commit(types.USER_CURRENT_ECOM_STORE_UPDATED, currentEComStore);
+
+    await useProductIdentificationStore().getIdentificationPref(currentEComStore?.productStoreId)
+      .catch((error) => console.error(error));
   },
 
+
   setPreferredDateTimeFormat ({ commit }, payload) {
     commit(types.USER_DATETIME_FORMAT_UPDATED, payload)
   },

src/store/modules/user/getters.ts

@@ -12,11 +12,14 @@ const getters: GetterTree <UserState, RootState> = {
     getBaseUrl(state) {
         let baseURL = process.env.VUE_APP_BASE_URL;
         if (!baseURL) baseURL = state.instanceUrl;
-        return baseURL.startsWith('http') ? baseURL.includes('/api') ? baseURL : `${baseURL}/api/` : `https://${baseURL}.hotwax.io/api/`;
+        return baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
     },
     getUserToken (state) {
         return state.token
     },
+    getCurrentEComStore(state) {
+        return state.currentEComStore;
+    },
     getUserProfile (state) {
         return state.current
     },

src/store/modules/user/index.ts

@@ -11,6 +11,7 @@ const userModule: Module<UserState, RootState> = {
       token: '',
       current: null,
       currentFacility: {},
+      currentEComStore: {},
       instanceUrl: '',
       fieldMappings: {},
       preferredDateTimeFormat: '',

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

@@ -10,3 +10,4 @@ export const USER_CURRENT_FIELD_MAPPING_UPDATED = SN_USER + '/_CURRENT_FIELD_MAP
 export const USER_FIELD_MAPPINGS_UPDATED = SN_USER + '/FIELD_MAPPINGS_UPDATED'
 export const USER_FIELD_MAPPING_CREATED = SN_USER + '/FIELD_MAPPING_CREATED'
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
+export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'

src/store/modules/user/mutations.ts

@@ -20,6 +20,9 @@ const mutations: MutationTree <UserState> = {
     [types.USER_INSTANCE_URL_UPDATED] (state, payload) {
         state.instanceUrl = payload;
     },
+    [types.USER_CURRENT_ECOM_STORE_UPDATED] (state, payload) {
+        state.currentEComStore = payload
+    },
     [types.USER_PWA_STATE_UPDATED] (state, payload) {
         state.pwaState.registration = payload.registration;
         state.pwaState.updateExists = payload.updateExists;

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>
+                <p>{{ getProductIdentificationValue(productIdentificationPref.primaryId, item) ? getProductIdentificationValue(productIdentificationPref.primaryId, item) : item.productName }}</p>
+                <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, item) }}</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, translate , getProductIdentificationValue , useProductIdentificationStore} from "@hotwax/dxp-components";
 import ProductPopover from '@/components/ProductPopover.vue'
 import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue'
-import { defineComponent } from 'vue';
+import { defineComponent , computed } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router';
 import { jsonToCsv, showToast } from '@/utils';
@@ -323,6 +323,8 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     
     return {
       businessOutline,
@@ -337,7 +339,9 @@ export default defineComponent({
       warningOutline,
       router,
       store,
-      translate
+      translate,
+      getProductIdentificationValue,
+      productIdentificationPref,
     }
   }
 });

src/views/Settings.vue

@@ -45,6 +45,7 @@
       <DxpAppVersionInfo />
       
       <section>
+        <DxpProductIdentifier />
         <DxpTimeZoneSwitcher @timeZoneUpdated="timeZoneUpdated" />
         <ion-card>
           <ion-card-header>
@@ -87,7 +88,7 @@ import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { DateTime } from 'luxon';
 import Image from '@/components/Image.vue';
-import { translate } from '@hotwax/dxp-components';
+import { DxpProductIdentifier, translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'Settings',