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

.env.example

@@ -10,4 +10,4 @@ VUE_APP_MAPPING_PO={"orderId": { "label": "Order ID", "required": true }, "produ
 VUE_APP_MAPPING_RSTINV={"productIdentification": { "label": "Product Identification", "required": true }, "quantity": { "label": "Quantity", "required": true }, "facility": { "label": "Facility ID", "required": true }}
 VUE_APP_MAPPING_RSTSTK={"productIdentification": { "label": "Product Identification", "required": true }, "restockQuantity": { "label": "Restock quantity", "required": true }}
 VUE_APP_DEFAULT_LOG_LEVEL="error"
-VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
+VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"    

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,12 @@ export default defineComponent({
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
     emitter.on('playAnimation', this.playAnimation);
+
+    if(this.userToken) {
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+        .catch((error) => console.log(error));
+    }
   },
   created() {
     initialise({
@@ -132,7 +138,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,9 @@
               <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>
+              {{ productIdentificationPref.primaryId }} {{ getProduct(item.pseudoId) }}
+              <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.pseudoId)) }}</h2>
+              <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.pseudoId)) }}</p> 
             </ion-label>
           </ion-item>
           <ion-chip outline class="tablet">
@@ -67,9 +68,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 +160,16 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
+    console.log("productIdentificationPref" , productIdentificationPref.value)
     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,66 @@ 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 getUserProfile = async (token: any): Promise<any> => {
+  const baseURL = store.getters['user/getBaseUrl'];
+  try {
+    const resp = await client({
+      url: "user-profile",
+      method: "get",
+      baseURL,
+      headers: {
+        Authorization:  'Bearer ' + token,
+        'Content-Type': 'application/json'
+      }
+    });
+    if(hasError(resp)) return Promise.reject("Error getting user profile");
+    return Promise.resolve(resp.data)
+  } catch(error: any) {
+    return Promise.reject(error)
+  }
+}
+
+
 const getProfile = async (): Promise <any>  => {
     return api({
       url: "user-profile", 
@@ -36,6 +96,14 @@ const updateFieldMapping = async (payload: any): Promise <any> => {
   });
 }
 
+const setUserPreference = async (payload: any): Promise<any> => {
+  return api({
+    url: "service/setUserPreference",
+    method: "post",
+    data: payload
+  });
+}
+
 const deleteFieldMapping = async (payload: any): Promise <any> => {
   return api({
     url: "/service/deleteDataManagerMapping",
@@ -148,5 +216,8 @@ export const UserService = {
     getFieldMappings,
     getProfile,
     getUserPermissions,
-    updateFieldMapping
+    updateFieldMapping,
+    getCurrentEComStore,
+    getUserProfile,
+    setUserPreference
 }

src/store/modules/product/getters.ts

@@ -6,6 +6,6 @@ const getters: GetterTree<ProductState, RootState> = {
   getProduct: (state) => (productId: string) => {
     // Returning empty object so that it doesn't breaks the UI
     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,
@@ -24,7 +24,6 @@ const actions: ActionTree<UserState, RootState> = {
     try {
       const { token, oms } = payload;
       dispatch("setUserInstanceUrl", oms);
-
       if(token) {
         const permissionId = process.env.VUE_APP_PERMISSION_ID;
 
@@ -52,17 +51,22 @@ const actions: ActionTree<UserState, RootState> = {
             return Promise.reject(new Error(permissionError));
           }
         }
-
         updateToken(token)
         setPermissions(appPermissions);
 
         // TODO user single mutation
         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,11 +133,24 @@ 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
+      const productIdentificationStore = useProductIdentificationStore();
+      await productIdentificationStore.getIdentificationPref(currentEComStore?.productStoreId)
+        .catch((error) => console.error(error));
+      console.log('productIdentificationStore', productIdentificationStore)
     }
   },
 
@@ -144,6 +161,7 @@ const actions: ActionTree<UserState, RootState> = {
     commit(types.USER_CURRENT_FACILITY_UPDATED, payload.facility);
   },
 
+
   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;