Implemented: support for product identifier component using ionic(hot…

…wax#95)

src/components/ProductIdentifier.vue

@@ -0,0 +1,53 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{ 'Product Identifier' }}
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      {{ 'Choosing a product identifier allows you to view products with your preferred identifiers.' }}
+    </ion-card-content>
+
+    <ion-item>
+      <ion-label>{{ "Primary Product Identifier" }}</ion-label>
+      <ion-select interface="popover" :placeholder="'primary identifier'" :value="productIdentificationPref.primaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'primaryId')">
+        <ion-select-option v-for="identification in productIdentificationOptions" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ "Secondary Product Identifier" }}</ion-label>
+      <ion-select interface="popover" :placeholder="'secondary identifier'" :value="productIdentificationPref.secondaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'secondaryId')">
+        <ion-select-option v-for="identification in productIdentificationOptions" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
+        <ion-select-option value="">{{ "None" }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { appContext } from 'src';
+import { useProductIdentificationStore } from 'src/store/productIdentification';
+import { computed } from 'vue';
+
+const productIdentificationStore = useProductIdentificationStore();
+
+const appState = appContext.config.globalProperties.$store
+
+console.log('appState', appState)
+
+const eComStore = computed(() => appState.getters['user/getCurrentEComStore'])
+
+console.log(eComStore)
+
+const productIdentificationOptions = productIdentificationStore.getProductIdentificationOptions;
+
+const productIdentificationPref = productIdentificationStore.getProductIdentificationPref;
+
+function setProductIdentificationPref(value: string | any, id: string) {
+  console.log('value, id', value, id)
+}
+
+</script>

src/components/index.ts

@@ -14,3 +14,5 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+export { default as ProductIdentifier } from "./ProductIdentifier.vue";
+

src/index.ts

@@ -5,6 +5,7 @@ import Login from "./components/Login";
 import ShopifyImg from "./components/ShopifyImg";
 import { goToOms } from "./utils";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { ProductIdentifier } from "./components";
 
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin
@@ -26,6 +27,7 @@ export let dxpComponents = {
 
     app.component('Login', Login)
     app.component('ShopifyImg', ShopifyImg)
+    app.component('ProductIdentifier', ProductIdentifier)
 
     loginContext.login = options.login
     loginContext.logout = options.logout
@@ -49,5 +51,6 @@ export {
   ShopifyImg,
   goToOms,
   appContext,
-  productIdentificationContext
+  productIdentificationContext,
+  ProductIdentifier
 }

src/store/productIdentification.ts

@@ -17,6 +17,7 @@ export const useProductIdentificationStore = defineStore('productIdentification'
   },
   actions: {
     async setProductIdentificationPref(id: string, value: string, eComStoreId: string) {
+      console.log('inside pinia action', this.getProductIdentificationPref)
       const productIdentificationPref = JSON.parse(JSON.stringify(this.getProductIdentificationPref))
 
       // When eComStoreId is not available then make the values change to what selected previously
@@ -27,13 +28,16 @@ export const useProductIdentificationStore = defineStore('productIdentification'
 
       productIdentificationPref[id] = value
 
+      console.log('set product identification pref')
+
       try {
         this.productIdentificationPref = await productIdentificationContext.setProductIdentificationPref(eComStoreId, productIdentificationPref)
       } catch(err) {
         console.log('error', err)
       }
     },
     async getIdentificationPref(eComStoreId: string) {
+      console.log('fetching identification pref')
       // when selecting none as ecom store, not fetching the pref as it returns all the entries with the pref id
       if(!eComStoreId) {
         return this.productIdentificationPref = {

src/utils/index.ts

@@ -4,6 +4,27 @@ const goToOms = (token: string, oms: string) => {
   window.open(link, '_blank', 'noopener, noreferrer')
 }
 
+const getProductIdentificationValue = (productIdentifier: string, product: any) => {
+  // handled this case as on page load initially the data is not available, so not to execute furthur code
+  // untill product is not available
+  if(!Object.keys(product).length) {
+    return;
+  }
+
+  let value = product[productIdentifier]
+
+  // considered that the goodIdentification will always have values in the format "productIdentifier/value" and there will be no entry like "productIdentifier/"
+  const identification = product['goodIdentifications'].find((identification: string) => identification.startsWith(productIdentifier + "/"))
+
+  if(identification) {
+    const goodIdentification = identification.split('/')
+    value = goodIdentification[1]
+  }
+
+  return value;
+}
+
 export {
+  getProductIdentificationValue,
   goToOms
 }