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

src/App.vue

@@ -12,6 +12,7 @@ import emitter from "@/event-bus"
 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',
@@ -28,7 +29,8 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       userToken: 'user/getUserToken',
-      instanceUrl: 'user/getInstanceUrl'
+      instanceUrl: 'user/getInstanceUrl',
+      currentEComStore: 'user/getCurrentEComStore'
     })
   },
   methods: {
@@ -84,6 +86,12 @@ export default defineComponent({
       });
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
+
+    if(this.userToken) {
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+        .catch((error) => console.error(error));
+    }
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);

src/adapter/index.ts

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

src/components/Picklist-detail-item.vue

@@ -5,8 +5,8 @@
     </ion-thumbnail>  
     <ion-label>
       <p class="caption">{{ getProduct(picklistItem.productId).parentProductName}}</p>
-      <h2>{{ getProduct(picklistItem.productId).productName}}</h2>
-      <h2>{{ picklistItem.productId }}</h2>
+      <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(picklistItem.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(picklistItem.productId)) : getProduct(picklistItem.productId).productName }}</h2>
+      <h2>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(picklistItem.productId)) }}</h2>
       <p>{{ $t("Color") }} : {{ $filters.getFeatures(getProduct(picklistItem.productId).featureHierarchy, '1/COLOR/') }}</p>
       <p>{{ $t("Size") }} : {{ $filters.getFeatures(getProduct(picklistItem.productId).featureHierarchy, '1/SIZE/') }}</p>
     </ion-label>
@@ -16,9 +16,9 @@
 
 <script lang="ts">
 import { IonCheckbox, IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex';
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'PicklistDetailItem',
@@ -37,7 +37,12 @@ export default defineComponent({
   },
   setup() {
     const store = useStore(); 
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
     return {
+      getProductIdentificationValue,
+      productIdentificationPref,
       store
     }
   }

src/main.ts

@@ -30,7 +30,7 @@ import i18n from './i18n'
 import store from './store'
 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, {
@@ -46,7 +46,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/services/UserService.ts

@@ -1,5 +1,6 @@
 import { api, client } from '@/adapter'
 import store from '@/store';
+import { hasError } from '@/utils';
 
 const login = async (username: string, password: string): Promise <any> => {
   return api({
@@ -23,6 +24,46 @@ const checkPermission = async (payload: any): 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", 
@@ -49,5 +90,6 @@ export const UserService = {
     getAvailableTimeZones,
     getProfile,
     setUserTimeZone,
-    checkPermission
+    checkPermission,
+    getCurrentEComStore
 }

src/store/modules/user/UserState.ts

@@ -4,4 +4,5 @@ export default interface UserState {
     currentFacility: object;
     instanceUrl: string;
     picklistItemSortBy: string;
+    currentEComStore: any;
 }

src/store/modules/user/actions.ts

@@ -7,7 +7,7 @@ import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon';
 import { logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
-import { useAuthStore } from '@hotwax/dxp-components'
+import { useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import router from '@/router';
 
@@ -36,7 +36,7 @@ const actions: ActionTree<UserState, RootState> = {
           if (checkPermissionResponse.status === 200 && !hasError(checkPermissionResponse) && checkPermissionResponse.data && checkPermissionResponse.data.hasPermission) {
             commit(types.USER_TOKEN_CHANGED, { newToken: token })
             updateToken(token)
-            await dispatch('getProfile')
+            await dispatch('getProfile', token)
           } else {
             const permissionError = 'You do not have permission to access the app.';
             showToast(translate(permissionError));
@@ -46,7 +46,7 @@ const actions: ActionTree<UserState, RootState> = {
         } else {
           commit(types.USER_TOKEN_CHANGED, { newToken: token })
           updateToken(token)
-          await dispatch('getProfile')
+          await dispatch('getProfile', token)
         }
 
         // accessing picklist ID from router as route cannot be accessed here
@@ -115,14 +115,25 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Get User profile
    */
-  async getProfile ( { commit }) {
+  async getProfile ( { commit }, token) {
     const resp = await UserService.getProfile()
     if (resp.status === 200) {
       if (resp.data.userTimeZone) {
         Settings.defaultZone = resp.data.userTimeZone;
       }
       commit(types.USER_INFO_UPDATED, resp.data);
-      commit(types.USER_CURRENT_FACILITY_UPDATED, resp.data.facilities.length > 0 ? resp.data.facilities[0] : {});
+
+      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));
     }
   },
 
@@ -141,8 +152,15 @@ const actions: ActionTree<UserState, RootState> = {
     },
 
   // 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));
   },
 
   /**

src/store/modules/user/getters.ts

@@ -15,6 +15,9 @@ const getters: GetterTree <UserState, RootState> = {
     getUserProfile (state) {
         return state.current
     },
+    getCurrentEComStore(state) {
+        return state.currentEComStore;
+    },
     getCurrentFacility (state) {
         return state.currentFacility;
     },
@@ -24,6 +27,11 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getPicklistItemSortBy (state) {
         return state.picklistItemSortBy;
-    }
+    },
+    getBaseUrl(state) {
+        let baseURL = process.env.VUE_APP_BASE_URL;
+        if (!baseURL) baseURL = state.instanceUrl;
+        return baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
+    },
 }
 export default getters;

src/store/modules/user/index.ts

@@ -10,6 +10,7 @@ const userModule: Module<UserState, RootState> = {
     state: {
       token: '',
       current: null,
+      currentEComStore: {},
       currentFacility: {},
       instanceUrl: '',
       picklistItemSortBy: 'productName'

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

@@ -5,3 +5,4 @@ export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_SORTBY_UPDATED = SN_USER + '/SORTBY_UPDATED'
+export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'

src/store/modules/user/mutations.ts

@@ -22,6 +22,9 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_SORTBY_UPDATED] (state, payload) {
         state.picklistItemSortBy = payload
+    },
+    [types.USER_CURRENT_ECOM_STORE_UPDATED] (state, payload) {
+        state.currentEComStore = payload
     }
 }
 export default mutations;

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>