Implemented: centralized product store selector (#193)

src/components/DxpMenuFooterNavigation.vue

@@ -40,13 +40,15 @@
 import { IonFooter, IonItem, IonLabel, IonNote, IonSelect, IonSelectOption, IonToolbar } from '@ionic/vue';
 import { appContext, useAuthStore } from "../index";
 import { computed } from 'vue';
+import { useUserStore } from 'src/store/user'
 
 const authStore = useAuthStore();
+const userStore = useUserStore()
 const appState = appContext.config.globalProperties.$store;
 const instanceUrl = computed(() => authStore.getOms); 
 const userAppState = computed(() => ({ 
   userProfile: appState.getters['user/getUserProfile'],
-  currentEComStore: appState.getters['user/getCurrentEComStore'],
+  currentEComStore: userStore.getCurrentEComStore,
   shopifyConfigs: appState.getters['user/getShopifyConfigs'],
   currentShopifyConfig: appState.getters['user/getCurrentShopifyConfig']
 }));

src/components/DxpProductIdentifier.vue

@@ -27,23 +27,24 @@
 
 <script setup lang="ts">
 import { IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
-import { appContext } from 'src';
 import { useProductIdentificationStore } from 'src/store/productIdentification';
+import { useUserStore } from 'src/store/user'
 import { computed, onMounted } from 'vue';
+import { appContext } from "../index";
 
 const productIdentificationStore = useProductIdentificationStore();
+const userStore = useUserStore()
 
-const appState = appContext.config.globalProperties.$store
-const eComStore = computed(() => appState.getters['user/getCurrentEComStore'])
+const currentEComStore = computed(() =>  userStore.getCurrentEComStore)
 const productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
 const productIdentificationOptions = productIdentificationStore.getProductIdentificationOptions;
 
 onMounted(() => {
-  productIdentificationStore.getIdentificationPref(eComStore.value.productStoreId);
+  productIdentificationStore.getIdentificationPref(currentEComStore.value.productStoreId);
 })
 
 function setProductIdentificationPref(value: string | any, id: string) {
-  productIdentificationStore.setProductIdentificationPref(id, value, eComStore.value.productStoreId)
+  productIdentificationStore.setProductIdentificationPref(id, value, currentEComStore.value.productStoreId)
 }
 
 </script>

src/components/DxpProductStoreSelector.vue

@@ -0,0 +1,40 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-subtitle>
+        {{ $t("Product Store") }}
+      </ion-card-subtitle>
+      <ion-card-title>
+        {{ $t("Store") }}
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      {{ $t('A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.') }}
+    </ion-card-content>
+
+    <ion-item lines="none">
+      <ion-select :label="$t('Select store')" interface="popover" :placeholder="$t('store name')" :value="currentEComStore?.productStoreId" @ionChange="updateEComStore($event.target.value)">
+        <ion-select-option v-for="store in (eComStores ? eComStores : [])" :key="store.productStoreId" :value="store.productStoreId">{{ store.storeName }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { useUserStore } from 'src';
+import { computed } from 'vue';
+
+const userStore = useUserStore();
+const emit = defineEmits(["updateEComStore"])
+
+const eComStores = computed(() => userStore.getProductStores); 
+const currentEComStore = computed(() => userStore.getCurrentEComStore);
+
+async function updateEComStore(eComStoreId: any) {
+  const selectedProductStore = eComStores.value.find((store: any) => store.productStoreId == eComStoreId)
+  await userStore.setEComStorePreference(selectedProductStore)
+  emit('updateEComStore', selectedProductStore)
+}
+</script>

src/components/index.ts

@@ -23,6 +23,7 @@ export { default as DxpLogin } from './DxpLogin.vue';
 export { default as DxpMenuFooterNavigation } from './DxpMenuFooterNavigation.vue';
 export { default as DxpOmsInstanceNavigator } from './DxpOmsInstanceNavigator.vue'
 export { default as DxpProductIdentifier } from "./DxpProductIdentifier.vue";
+export { default as DxpProductStoreSelector } from "./DxpProductStoreSelector.vue"
 export { default as DxpShopifyImg } from './DxpShopifyImg.vue';
 export { default as DxpUserProfile } from './DxpUserProfile.vue'
 export { default as DxpTimeZoneSwitcher } from './DxpTimeZoneSwitcher.vue'

src/index.ts

@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { DxpAppVersionInfo, DxpFacilitySwitcher, DxpGitBookSearch, DxpImage, DxpLanguageSwitcher, DxpLogin, DxpMenuFooterNavigation, DxpOmsInstanceNavigator, DxpProductIdentifier, DxpShopifyImg, DxpTimeZoneSwitcher, DxpUserProfile } from "./components";
+import { DxpAppVersionInfo, DxpFacilitySwitcher, DxpGitBookSearch, DxpImage, DxpLanguageSwitcher, DxpLogin, DxpMenuFooterNavigation, DxpOmsInstanceNavigator, DxpProductIdentifier, DxpProductStoreSelector, DxpShopifyImg, DxpTimeZoneSwitcher, DxpUserProfile } from "./components";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
@@ -26,6 +26,7 @@ let shopifyImgContext = {} as any
 let appContext = {} as any
 let productIdentificationContext = {} as any
 let facilityContext = {} as any
+let productStoreContext = {} as any
 let notificationContext = {} as any
 let gitBookContext = {} as any
 let userContext = {} as any
@@ -76,6 +77,7 @@ export let dxpComponents = {
     app.component('DxpMenuFooterNavigation', DxpMenuFooterNavigation)
     app.component('DxpOmsInstanceNavigator', DxpOmsInstanceNavigator)
     app.component('DxpProductIdentifier', DxpProductIdentifier)
+    app.component('DxpProductStoreSelector', DxpProductStoreSelector)
     app.component('DxpShopifyImg', DxpShopifyImg)
     app.component('DxpTimeZoneSwitcher', DxpTimeZoneSwitcher)
     app.component('DxpUserProfile', DxpUserProfile)
@@ -102,7 +104,11 @@ export let dxpComponents = {
     facilityContext.getUserFacilities = options.getUserFacilities
     facilityContext.setUserPreference = options.setUserPreference
     facilityContext.getUserPreference = options.getUserPreference
-
+
+    productStoreContext.getEComStoresByFacility = options.getEComStoresByFacility
+    productStoreContext.setUserPreference = options.setUserPreference
+    productStoreContext.getUserPreference = options.getUserPreference
+
     notificationContext.addNotification = options.addNotification
     notificationContext.appFirebaseConfig = options.appFirebaseConfig
     notificationContext.appFirebaseVapidKey = options.appFirebaseVapidKey
@@ -145,6 +151,7 @@ export {
   notificationContext,
   productIdentificationContext,
   facilityContext,
+  productStoreContext,
   shopifyImgContext,
   translate,
   useAuthStore,

src/store/user.ts

@@ -3,12 +3,15 @@ import { i18n, translate, userContext, useAuthStore } from "../../src";
 import { DateTime } from "luxon";
 import { showToast } from "src/utils";
 import { facilityContext } from "../index";
+import { productStoreContext } from "../index";
 
 declare let process: any;
 
 export const useUserStore = defineStore('user', {
   state: () => {
     return {
+      eComStores: [],
+      currentEComStore: {} as any,
       localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en-US": "English" },
       locale: 'en-US',
       currentTimeZoneId: '',
@@ -23,7 +26,9 @@ export const useUserStore = defineStore('user', {
     getTimeZones: (state) => state.timeZones,
     getCurrentTimeZone: (state) => state.currentTimeZoneId,
     getFacilites: (state) => state.facilities,
-    getCurrentFacility: (state) => state.currentFacility
+    getCurrentFacility: (state) => state.currentFacility,
+    getProductStores: (state) => state.eComStores,
+    getCurrentEComStore: (state) => state.currentEComStore,
   },
   actions: {
     async setLocale(locale: string) {
@@ -79,7 +84,7 @@ export const useUserStore = defineStore('user', {
     updateTimeZone(tzId: string) {
       this.currentTimeZoneId = tzId
     },
-
+    // Facility api calls - retrieve user facilities & get/set preferred facility
     async getUserFacilities(partyId: any, facilityGroupId: any, isAdminUser: boolean) {
       const authStore = useAuthStore();
 
@@ -91,7 +96,25 @@ export const useUserStore = defineStore('user', {
       }
       return this.facilities
     },
+    async getFacilityPreference(userPrefTypeId: any) {
+      const authStore = useAuthStore();
 
+      if (!this.facilities.length) {
+        return;
+      }
+      let preferredFacility = this.facilities[0];
+
+      try {
+        let preferredFacilityId = await facilityContext.getUserPreference(authStore.getToken.value, authStore.getBaseUrl, userPrefTypeId);
+        if(preferredFacilityId) {
+          const facility = this.facilities.find((facility: any) => facility.facilityId === preferredFacilityId);
+          facility && (preferredFacility = facility)
+        }
+      } catch (error) {
+        console.error(error);
+      }
+      this.currentFacility = preferredFacility;
+    },
     async setFacilityPreference(payload: any) {
 
       try {
@@ -104,26 +127,49 @@ export const useUserStore = defineStore('user', {
       }
       this.currentFacility = payload;
     },
-
-    async getFacilityPreference(userPrefTypeId: any) {
+    // ECom store api calls - fetch stores by facility & get/set user store preferences
+    async getEComStoresByFacility(facilityId?: any) {
+      const authStore = useAuthStore();
+
+      try {
+        const response = await productStoreContext.getEComStoresByFacility(authStore.getToken.value, authStore.getBaseUrl, 100, facilityId);
+        this.eComStores = response;
+      } catch (error) {
+        console.error(error);
+      }
+      return this.eComStores
+    },
+    async getEComStorePreference(userPrefTypeId: any) {
       const authStore = useAuthStore();
 
-      if (!this.facilities.length) {
+      if(!this.eComStores.length) {
         return;
       }
-      let preferredFacility = this.facilities[0];
-
+      let preferredStore = this.eComStores[0];
       try {
-        let preferredFacilityId = await facilityContext.getUserPreference(authStore.getToken.value, authStore.getBaseUrl, userPrefTypeId);
-        if(preferredFacilityId) {
-          const facility = this.facilities.find((facility: any) => facility.facilityId === preferredFacilityId);
-          facility && (preferredFacility = facility)
+        let preferredStoreId = await productStoreContext.getUserPreference(authStore.getToken.value, authStore.getBaseUrl, userPrefTypeId);
+
+        if(preferredStoreId) {
+          const store = this.eComStores.find((store: any) => store.productStoreId === preferredStoreId);
+          store && (preferredStore = store)
         }
       } catch (error) {
         console.error(error);
       }
-      this.currentFacility = preferredFacility;
+      this.currentEComStore = preferredStore;
     },
+    async setEComStorePreference(payload: any) {
+
+      try {
+        await productStoreContext.setUserPreference({
+          userPrefTypeId: 'SELECTED_BRAND',
+          userPrefValue: payload.productStoreId
+        }) 
+      } catch (error) {
+        console.error('error', error)
+      }
+      this.currentEComStore = payload;
+    }
   },
   persist: true
 })