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

package.json

@@ -19,8 +19,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.3",
-    "@hotwax/dxp-components": "1.5.3",
-    "@hotwax/oms-api": "^1.9.0",
+    "@hotwax/dxp-components": "file:../dxp-components",
+    "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",

src/App.vue

@@ -24,6 +24,7 @@ import { mapGetters, useStore } from 'vuex';
 import { Settings } from 'luxon'
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { useProductIdentificationStore } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "App",
@@ -43,7 +44,8 @@ export default defineComponent({
     ...mapGetters({
       userProfile: 'user/getUserProfile',
       userToken: 'user/getUserToken',
-      instanceUrl: 'user/getInstanceUrl'
+      instanceUrl: 'user/getInstanceUrl',
+      currentEComStore: 'user/getCurrentEComStore'
     })
   },
   methods: {
@@ -101,6 +103,10 @@ export default defineComponent({
     if (this.userProfile && this.userProfile.userTimeZone) {
       Settings.defaultZone = this.userProfile.userTimeZone;
     }
+
+    // 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/main.ts

@@ -33,7 +33,7 @@ import { login, logout, loader } from './user-utils';
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
-import { getConfig, initialise } from '@/adapter'
+import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter'
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -52,8 +52,10 @@ const app = createApp(App)
     logout,
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
-    getConfig: getConfig,
-    initialise: initialise
+    getConfig,
+    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

@@ -7,7 +7,7 @@ import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon'
 import { updateInstanceUrl, updateToken, resetConfig, logout } from '@/adapter'
-import { useAuthStore } from '@hotwax/dxp-components';
+import { useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { getServerPermissionsFromRules, prepareAppPermissions, resetPermissions, setPermissions } from '@/authorization'
 import emitter from '@/event-bus'
 
@@ -21,58 +21,62 @@ const actions: ActionTree<UserState, RootState> = {
     const { token, oms } = payload;
     dispatch("setUserInstanceUrl", oms);
     try {
-        if (token) {
-          // Getting the permissions list from server
-          const permissionId = process.env.VUE_APP_PERMISSION_ID;
-
-          // Prepare permissions list
-          const serverPermissionsFromRules = getServerPermissionsFromRules();
-          if (permissionId) serverPermissionsFromRules.push(permissionId);
-
-          const serverPermissions = await UserService.getUserPermissions({
-            permissionIds: serverPermissionsFromRules
-          }, token);
-          const appPermissions = prepareAppPermissions(serverPermissions);
-
-          // Checking if the user has permission to access the app
-          // If there is no configuration, the permission check is not enabled
-          if (permissionId) {
-            // As the token is not yet set in the state passing token headers explicitly
-            // TODO Abstract this out, how token is handled should be part of the method not the callee
-            const hasPermission = appPermissions.some((appPermissionId: any) => appPermissionId === permissionId );
-            // If there are any errors or permission check fails do not allow user to login
-            if (hasPermission) {
-              const permissionError = 'You do not have permission to access the app.';
-              showToast(translate(permissionError));
-              console.error("error", permissionError);
-              return Promise.reject(new Error(permissionError));
-            }
+      if (token) {
+        // Getting the permissions list from server
+        const permissionId = process.env.VUE_APP_PERMISSION_ID;
+
+        // Prepare permissions list
+        const serverPermissionsFromRules = getServerPermissionsFromRules();
+        if (permissionId) serverPermissionsFromRules.push(permissionId);
+
+        const serverPermissions = await UserService.getUserPermissions({
+          permissionIds: serverPermissionsFromRules
+        }, token);
+        const appPermissions = prepareAppPermissions(serverPermissions);
+
+        // Checking if the user has permission to access the app
+        // If there is no configuration, the permission check is not enabled
+        if (permissionId) {
+          // As the token is not yet set in the state passing token headers explicitly
+          // TODO Abstract this out, how token is handled should be part of the method not the callee
+          const hasPermission = appPermissions.some((appPermissionId: any) => appPermissionId === permissionId );
+          // If there are any errors or permission check fails do not allow user to login
+          if (hasPermission) {
+            const permissionError = 'You do not have permission to access the app.';
+            showToast(translate(permissionError));
+            console.error("error", permissionError);
+            return Promise.reject(new Error(permissionError));
           }
+        }
 
-          // Getting user profile
-          const userProfile = await UserService.getUserProfile(token);
-          userProfile.stores = await UserService.getEComStores(token, userProfile.partyId);
-          
-          // Getting user preferred store
-          let preferredStore = userProfile.stores[0];
-          const preferredStoreId =  await UserService.getPreferredStore(token);
-          if (preferredStoreId) {
-            const store = userProfile.stores.find((store: any) => store.productStoreId === preferredStoreId);
-            store && (preferredStore = store)
-          }
+        // Getting user profile
+        const userProfile = await UserService.getUserProfile(token);
+        userProfile.stores = await UserService.getEComStores(token, userProfile.partyId);
+
+        // Getting user preferred store
+        let preferredStore = userProfile.stores[0];
+        const preferredStoreId =  await UserService.getPreferredStore(token);
+        if (preferredStoreId) {
+          const store = userProfile.stores.find((store: any) => store.productStoreId === preferredStoreId);
+          store && (preferredStore = store)
+        }
 
-          setPermissions(appPermissions);
-          if (userProfile.userTimeZone) {
-            Settings.defaultZone = userProfile.userTimeZone;
-          }
+        // Get product identification from api using dxp-component
+        await useProductIdentificationStore().getIdentificationPref(preferredStoreId)
+          .catch((error) => console.error(error));
 
-          // TODO user single mutation
-          commit(types.USER_CURRENT_ECOM_STORE_UPDATED,  preferredStore);
-          commit(types.USER_INFO_UPDATED, userProfile);
-          commit(types.USER_TOKEN_CHANGED, { newToken: token });
-          commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
-          updateToken(token);
+        setPermissions(appPermissions);
+        if (userProfile.userTimeZone) {
+          Settings.defaultZone = userProfile.userTimeZone;
         }
+
+        // TODO user single mutation
+        commit(types.USER_CURRENT_ECOM_STORE_UPDATED, preferredStore);
+        commit(types.USER_INFO_UPDATED, userProfile);
+        commit(types.USER_TOKEN_CHANGED, { newToken: token });
+        commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
+        updateToken(token);
+      }
     } catch (err: any) {
       showToast(translate('Something went wrong'));
       console.error("error", err);
@@ -152,6 +156,10 @@ const actions: ActionTree<UserState, RootState> = {
         'userPrefTypeId': 'SELECTED_BRAND',
         'userPrefValue': payload.eComStore.productStoreId
       });
+
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(payload.eComStore.productStoreId)
+        .catch((error) => console.error(error));
     },
 
   /**

src/views/catalog-product-details.vue

@@ -17,8 +17,8 @@
 
         <div class="product-info" v-if="Object.keys(currentVariant).length">
           <div class="ion-padding">
-            <h4>{{ currentVariant.parentProductName }}</h4>
-            <p>{{ currentVariant.sku }}</p>
+            <h4>{{ getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) ? getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) : currentVariant.productName }}</h4>
+            <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, currentVariant) }}</p>
           </div>
 
           <div class="product-features">
@@ -388,7 +388,7 @@ import {
   IonRow,
   popoverController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import {
   alertCircleOutline,
   checkmarkCircleOutline,
@@ -397,7 +397,7 @@ import {
   shirtOutline
 } from "ionicons/icons";
 import { useStore } from "@/store";
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 import { mapGetters } from "vuex";
 import { showToast, getFeature, hasError } from "@/utils";
 import { translate } from "@/i18n";
@@ -436,7 +436,7 @@ export default defineComponent({
     IonToggle,
     IonToolbar,
     IonTitle,
-    IonRow,
+    IonRow
   },
   data() {
     return {
@@ -1125,13 +1125,18 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const router = useRouter();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
     return {
       alertCircleOutline,
       Actions,
       checkmarkCircleOutline,
       chevronForwardOutline,
       copyOutline,
+      getProductIdentificationValue,
       hasPermission,
+      productIdentificationPref,
       router,
       shirtOutline,
       store

src/views/catalog.vue

@@ -52,8 +52,8 @@
               <ShopifyImg :src="product.mainImageUrl" size="small"/>
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
-              <h5>{{ product.parentProductName }}</h5>
-              <p>{{ product.sku }}</p>
+              <h5>{{ getProductIdentificationValue(productIdentificationPref.primaryId, product) ? getProductIdentificationValue(productIdentificationPref.primaryId, product) : product.productName }}</h5>
+              <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, product) }}</p>
             </ion-label>
           </ion-item>
 
@@ -106,10 +106,10 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { useRouter } from "vue-router";
 import { useStore } from "@/store";
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { mapGetters } from 'vuex';
 import { DateTime } from 'luxon';
 import { JobService } from '@/services/JobService';
@@ -269,8 +269,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/views/orders.vue

@@ -120,7 +120,7 @@
                   <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"></ShopifyImg>
                 </ion-thumbnail>
                 <ion-label>
-                  <h2>{{ item.parentProductName ? item.parentProductName :item.productName }}</h2>
+                  <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, item) ? getProductIdentificationValue(productIdentificationPref.primaryId, item) : item.productName }}</h2>
                   <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')">{{ $t("Color") }} : {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/') }}</p>
                   <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')">{{ $t("Size") }} : {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/') }}</p>
                 </ion-label>
@@ -202,7 +202,7 @@ import {
   modalController,
   popoverController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import WarehouseModal from "./warehouse-modal.vue";
 import BackgroundJobModal from "./background-job-modal.vue";
 import PromiseDateModal from "./promise-date-modal.vue";
@@ -222,7 +222,7 @@ import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { showToast } from '@/utils'
 import { Plugins } from '@capacitor/core';
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 import emitter from "@/event-bus";
 
 const { Clipboard } = Plugins;
@@ -475,17 +475,22 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
     return {
-      store,
-      pricetag,
-      ribbon,
-      ellipsisVertical,
-      send,
       business,
       calendar,
+      close,
       closeCircle,
+      ellipsisVertical,
+      getProductIdentificationValue,
       hourglass,
-      close,
+      pricetag,
+      productIdentificationPref,
+      ribbon,
+      send,
+      store
     };
   },
 });