From 5d5aa7a537822b56357a56aef63af1ea066f7eb9 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 5 Oct 2023 15:49:53 +0530
Subject: [PATCH] Improved: code for handling when product dont have primaryId
 item (dxp/178)

---
 src/App.vue                           |  2 +-
 src/store/modules/user/actions.ts     | 10 ++++------
 src/views/catalog-product-details.vue |  2 +-
 src/views/catalog.vue                 |  2 +-
 src/views/orders.vue                  |  2 +-
 src/views/product-details.vue         | 10 +++++++---
 src/views/products.vue                | 14 +++++++++-----
 7 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3b3f4cbc..56c134b9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -107,7 +107,7 @@ export default defineComponent({
     // Get product identification from api using dxp-component and set the state if eComStore is defined
     if (this.currentEComStore.productStoreId) {
       await useProductIdentificationStore().getIdentificationPref(this.currentEComStore.productStoreId)
-      .catch((error) => console.error(error));
+        .catch((error) => console.error(error));
     }
   },
   unmounted() {
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 418c0500..b903dbe7 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -59,6 +59,10 @@ const actions: ActionTree<UserState, RootState> = {
         if (preferredStoreId) {
           const store = userProfile.stores.find((store: any) => store.productStoreId === preferredStoreId);
           store && (preferredStore = store)
+
+          // Get product identification from api using dxp-component and set the state if eComStore is defined
+          await useProductIdentificationStore().getIdentificationPref(preferredStoreId)
+            .catch((error) => console.error(error));
         }
 
         setPermissions(appPermissions);
@@ -72,12 +76,6 @@ const actions: ActionTree<UserState, RootState> = {
         commit(types.USER_TOKEN_CHANGED, { newToken: token });
         commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
         updateToken(token);
-
-        // Get product identification from api using dxp-component and set the state if eComStore is defined
-        if (preferredStoreId){
-          await useProductIdentificationStore().getIdentificationPref(preferredStoreId)
-          .catch((error) => console.error(error));
-        }
       }
     } catch (err: any) {
       showToast(translate('Something went wrong'));
diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index 82ce6c12..705beb93 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -17,7 +17,7 @@
 
         <div class="product-info" v-if="Object.keys(currentVariant).length">
           <div class="ion-padding">
-            <h4>{{ getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) }}</h4>
+            <h4>{{ getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) ? getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) : currentVariant.productName }}</h4>
             <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, currentVariant) }}</p>
           </div>
 
diff --git a/src/views/catalog.vue b/src/views/catalog.vue
index f4dc2a40..516193e6 100644
--- a/src/views/catalog.vue
+++ b/src/views/catalog.vue
@@ -52,7 +52,7 @@
               <ShopifyImg :src="product.mainImageUrl" size="small"/>
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
-              <h5>{{ getProductIdentificationValue(productIdentificationPref.primaryId, product) }}</h5>
+              <h5>{{ getProductIdentificationValue(productIdentificationPref.primaryId, product) ? getProductIdentificationValue(productIdentificationPref.primaryId, product) : product.productName }}</h5>
               <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, product) }}</p>
             </ion-label>
           </ion-item>
diff --git a/src/views/orders.vue b/src/views/orders.vue
index 154794db..ce53cd50 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -120,7 +120,7 @@
                   <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"></ShopifyImg>
                 </ion-thumbnail>
                 <ion-label>
-                  <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, item) }}</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>
diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index e37f4965..04c5fd65 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -26,7 +26,7 @@
 
         <div class="product-info">
           <ion-item lines="none" class="product-title">
-            <h1>{{ current.product.productName }}</h1>
+            <h1>{{ getProductIdentificationValue(productIdentificationPref.primaryId, current.product) ? getProductIdentificationValue(productIdentificationPref.primaryId, current.product) : current.product.productName }}</h1>
           </ion-item>
           <div class="product-features">
             <ion-list v-if="$filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/').length">
@@ -195,7 +195,7 @@ import {
   alertController,
   modalController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import {
   informationCircle,
   send,
@@ -213,7 +213,7 @@ import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { ProductService } from '@/services/ProductService'
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 import { sizeIndex } from "@/apparel-sorter"
 import { DateTime } from 'luxon';
 import emitter from "@/event-bus";
@@ -576,15 +576,19 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     return {
       informationCircle,
       send,
       business,
       closeCircle,
+      getProductIdentificationValue,
       hourglass,
       calendar,
       close,
       list,
+      productIdentificationPref,
       ribbon,
       refresh,
       store
diff --git a/src/views/products.vue b/src/views/products.vue
index d45fb701..e0f5c8dd 100644
--- a/src/views/products.vue
+++ b/src/views/products.vue
@@ -32,7 +32,7 @@
             <ShopifyImg :src="getProduct(product.groupValue).mainImageUrl" size="small"></ShopifyImg>
           </ion-thumbnail>
           <ion-label>
-            <h2>{{ getProduct(product.groupValue).productName}}</h2>
+            <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.groupValue)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.groupValue)) : getProduct(product.groupValue).productName }}</h2>
             <p v-for="(attribute, feature) in ($filters.groupFeatures(getProduct(product.groupValue).featureHierarchy))" :key="attribute" ><span class="sentence-case">{{ feature }}</span>: {{ attribute }}</p>
           </ion-label>
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ $t("pieces preordered") }}</ion-badge>
@@ -66,13 +66,13 @@ import {
   IonToolbar,
   modalController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import { hourglass } from "ionicons/icons";
 import { useRouter } from "vue-router";
 import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "settings",
@@ -159,10 +159,14 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     return {
-      router,
-      store,
+      getProductIdentificationValue,
       hourglass,
+      productIdentificationPref,
+      router,
+      store
     };
   },
 });