diff --git a/src/App.vue b/src/App.vue index 288ee016..eceede3e 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() { @@ -121,29 +121,12 @@ export default defineComponent({ OfflineHelper.register(); const { t, locale } = useI18n(); const router = useRouter(); - - const productIdentificationStore = useProductIdentificationStore(); - - // Reactive state for productIdentificationPref - let productIdentificationPref = ref( - productIdentificationStore.$state.productIdentificationPref - ); - - // Providing productIdentificationPref to all child components. - provide('productIdentificationPref', productIdentificationPref); - - // Subscribing to productIdentification state change and changing value productIdentificationPref - productIdentificationStore.$subscribe((mutation: any, state) => { - productIdentificationPref.value = state.productIdentificationPref; - }); - return { router, TaskQueue, OfflineHelper, t, locale, - productIdentificationPref, store }; }, diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts index efc38307..418c0500 100644 --- a/src/store/modules/user/actions.ts +++ b/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,64 @@ const actions: ActionTree = { 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; - } + 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); + // 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); + + // 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')); console.error("error", err); @@ -152,6 +158,12 @@ const actions: ActionTree = { 'userPrefTypeId': 'SELECTED_BRAND', 'userPrefValue': payload.eComStore.productStoreId }); + + // Get product identification from api using dxp-component and set the state if eComStore is defined + if (payload.eComStore.productStoreId) { + await useProductIdentificationStore().getIdentificationPref(payload.eComStore.productStoreId) + .catch((error) => console.error(error)); + } }, /** diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue index 6208f550..906af14d 100644 --- a/src/views/catalog-product-details.vue +++ b/src/views/catalog-product-details.vue @@ -388,7 +388,7 @@ import { IonRow, popoverController, } from "@ionic/vue"; -import { defineComponent, inject } from "vue"; +import { computed, defineComponent } from "vue"; import { alertCircleOutline, checkmarkCircleOutline, @@ -397,7 +397,7 @@ import { shirtOutline } from "ionicons/icons"; import { useStore } from "@/store"; -import { getProductIdentificationValue, 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"; @@ -463,7 +463,7 @@ export default defineComponent({ product: "product/getCurrentCatalogProduct", currentEComStore: 'user/getCurrentEComStore', getCtgryAndBrkrngJob: "job/getCtgryAndBrkrngJob", - getInventoryConfig: "util/getInventoryConfig" + getInventoryConfig: "util/getInventoryConfig", }) }, async ionViewWillEnter() { @@ -1125,10 +1125,9 @@ export default defineComponent({ setup() { const store = useStore(); const router = useRouter(); - - // Injected product preference from App.view - const productIdentificationPref: any = inject("productIdentificationPref") - + const productIdentificationStore = useProductIdentificationStore(); + let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref) + return { alertCircleOutline, Actions, diff --git a/src/views/catalog.vue b/src/views/catalog.vue index 0041af9a..f4dc2a40 100644 --- a/src/views/catalog.vue +++ b/src/views/catalog.vue @@ -106,10 +106,10 @@ import { IonTitle, IonToolbar, } from '@ionic/vue'; -import { defineComponent, inject } from 'vue'; +import { computed, defineComponent } from 'vue'; import { useRouter } from "vue-router"; import { useStore } from "@/store"; -import { getProductIdentificationValue, 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,9 +269,8 @@ export default defineComponent({ setup() { const router = useRouter(); const store = useStore(); - - // Injected product preference from App.view - const productIdentificationPref: any = inject("productIdentificationPref") + const productIdentificationStore = useProductIdentificationStore(); + let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref) return { getProductIdentificationValue, diff --git a/src/views/orders.vue b/src/views/orders.vue index 35e115c8..154794db 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -202,7 +202,7 @@ import { modalController, popoverController, } from "@ionic/vue"; -import { defineComponent, inject } 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 { getProductIdentificationValue, ShopifyImg } from "@hotwax/dxp-components"; +import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components"; import emitter from "@/event-bus"; const { Clipboard } = Plugins; @@ -475,10 +475,8 @@ export default defineComponent({ }, setup() { const store = useStore(); - - // Injected product preference from App.view - const productIdentificationPref: any = inject("productIdentificationPref") - + const productIdentificationStore = useProductIdentificationStore(); + let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref) return { business,