Implemented: centralized product store selector (hotwax#193)

src/components/Login.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue"
 import { initialiseFirebaseApp } from "../utils/firebase"
-import { loginContext as context, useAuthStore, appContext, loginContext, noitificationContext } from "../index"
+import { loginContext as context, useAuthStore, useUserStore, appContext, loginContext, noitificationContext } from "../index"
 import { DateTime } from "luxon"
 
 export default defineComponent({
@@ -15,12 +15,14 @@ export default defineComponent({
     return {
       errorMsg: '',
       authStore: {} as any,
+      userStore: {} as any,
       router: {} as any,
       route: {} as any,
     }
   },
   async mounted() {
     this.authStore = useAuthStore()
+    this.userStore = useUserStore()
     this.router = appContext.config.globalProperties.$router
     this.route = appContext.config.globalProperties.$route
 

src/components/ProductStoreSelector.vue

@@ -0,0 +1,41 @@
+<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-label> {{ $t("Select store") }} </ion-label>
+      <ion-select interface="popover" :placeholder="$t('store name')" :value="currentEComStore?.productStoreId"
+        @ionChange="setEComStore($event)">
+        <ion-select-option v-for="store in (productStores ? productStores : [])" :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 productStores = computed(() => userStore.current?.stores);
+const currentEComStore = computed(() => userStore.currentEComStore);
+
+const setEComStore = (event: any) => {
+  if (currentEComStore.value?.productStoreId !== event.detail.value) {
+    userStore.setEComStore({ eComStore: productStores.value.find((store: any) => store.productStoreId == event.detail.value) })
+  }
+}
+</script>

src/components/index.ts

@@ -18,5 +18,6 @@ export { default as AppVersionInfo } from './AppVersionInfo.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
+export { default as ProductStoreSelector } from "./ProductStoreSelector.vue";
 export { default as Scanner } from './Scanner.vue';
 export { default as ShopifyImg } from './ShopifyImg.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 { AppVersionInfo, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { AppVersionInfo, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ProductStoreSelector, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -46,6 +46,7 @@ export let dxpComponents = {
     app.component('Login', Login)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
+    app.component('ProductStoreSelector', ProductStoreSelector)
     app.component('Scanner', Scanner)
     app.component('ShopifyImg', ShopifyImg)
 

src/store/auth.ts

@@ -1,3 +1,5 @@
+declare const process: any;
+
 import { defineStore } from "pinia";
 import { DateTime } from 'luxon'
 
@@ -14,6 +16,11 @@ export const useAuthStore = defineStore('userAuth', {
   getters: {
     getToken: (state) => state.token,
     getOms: (state) => state.oms,
+    getBaseUrl: (state) => {
+      let baseURL = process.env.VUE_APP_BASE_URL;
+      if (!baseURL) baseURL = state.oms;
+      return baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
+    },
     isAuthenticated: (state) => {
       let isTokenExpired = false
       if (state.token.expiration) {

src/store/user.ts

@@ -1,20 +1,112 @@
 import { defineStore } from "pinia";
-import { i18n } from "../../src";
+import { appContext, i18n, useAuthStore } from "../../src";
+import { api, client, hasError } from '@hotwax/oms-api'
 
 declare let process: any;
 
 export const useUserStore = defineStore('user', {
   state: () => {
     return {
+      current: {} as any,
+      currentEComStore: {} as any,
       locale: 'en',
       localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" }
     }
   },
   getters: {
+    getCurrentEComStore: (state) => state.currentEComStore,
     getLocale: (state) => state.locale,
-    getLocaleOptions: (state) => state.localeOptions
+    getLocaleOptions: (state) => state.localeOptions,
+    getUserProfile: (state) => state.current
   },
   actions: {
+    async getEComStores(facilityId: string) {
+      const authStore = useAuthStore();
+
+      // If the facilities is not provided, it may be case of user not associated with any facility
+      if (!facilityId) {
+        this.current.stores = [];
+      }
+
+      try {
+        const params = {
+          "inputFields": {
+            "storeName_op": "not-empty",
+            "facilityId": facilityId
+          },
+          "fieldList": ["productStoreId", "storeName"],
+          "entityName": "ProductStoreFacilityDetail",
+          "distinct": "Y",
+          "noConditionFind": "Y",
+          "filterByDate": 'Y',
+        }
+        const resp = await client({
+          url: "performFind",
+          method: "get",
+          baseURL: authStore.getBaseUrl,
+          params,
+          headers: {
+            Authorization: 'Bearer ' + authStore.getToken.value,
+            'Content-Type': 'application/json'
+          }
+        });
+        if (hasError(resp) || resp.data.docs.length === 0) {
+          return Promise.reject(resp.data)
+        }
+        this.current.stores = resp.data.docs;
+      } catch (error: any) {
+        return Promise.reject(error)
+      }
+    },
+    async getPreferredStore() {
+      const authStore = useAuthStore();
+      let preferredStore = {} as any;
+
+      // Handling case if stores are not present, it may be case of user not associated with any facility
+      if(this.current.stores.length){
+        preferredStore = this.current.stores[0];
+        let preferredStoreId = '';
+
+        try {
+          const resp = await client({
+            url: "service/getUserPreference",
+            method: "post",
+            data: {
+              'userPrefTypeId': 'SELECTED_BRAND'
+            },
+            baseURL: authStore.getBaseUrl,
+            headers: {
+              Authorization: 'Bearer ' + authStore.getToken.value,
+              'Content-Type': 'application/json'
+            }
+          });
+          if (hasError(resp)) {
+            return Promise.reject(resp.data);
+          }
+          preferredStoreId = resp.data.userPrefValue;
+        } catch (error: any) {
+          return Promise.reject(error)
+        }
+
+        if (preferredStoreId) {
+          const store = this.current.stores.find((store: any) => store.productStoreId === preferredStoreId);
+          store && (preferredStore = store)
+        }
+      }
+
+      this.currentEComStore = preferredStore;
+    },
+    async setEComStore(payload: any) {
+      await api({
+        url: "service/setUserPreference",
+        method: "post",
+        data: {
+          'userPrefTypeId': 'SELECTED_BRAND',
+          'userPrefValue': payload.eComStore.productStoreId
+        }
+      });
+      this.currentEComStore = payload.eComStore;
+    },
     setLocale(payload: string) {
       // update locale in state and globally
       i18n.global.locale.value = payload