Implemented: support for using api and client methods from OMS api package (#85zrm1ktj)

package.json

@@ -19,17 +19,15 @@
     "@casl/vue": "^2.2.0",
     "@hotwax/apps-theme": "^1.1.0",
     "@hotwax/app-version-info": "^1.0.0",
+    "@hotwax/oms-api": "^1.5.1",
     "@ionic/core": "6.2.9",
     "@ionic/vue": "6.2.9",
     "@ionic/vue-router": "6.2.9",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
-    "axios": "^0.21.4",
-    "axios-cache-adapter": "^2.7.3",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
-    "http-status-codes": "^2.1.4",
     "luxon": "^3.2.0",
     "mitt": "^2.1.0",
     "qs": "^6.10.3",

src/App.vue

@@ -15,6 +15,9 @@ import { loadingController } from '@ionic/vue';
 import { mapGetters, useStore } from 'vuex';
 import emitter from "@/event-bus"
 import { Settings } from 'luxon'
+import { init, resetConfig } from '@/adapter'
+import { useRouter } from 'vue-router';
+
 export default defineComponent({
   name: 'App',
   components: {
@@ -25,12 +28,15 @@ export default defineComponent({
   },
   data() {
     return {
-      loader: null as any
+      loader: null as any,
+      maxAge: process.env.VUE_APP_CACHE_MAX_AGE ? parseInt(process.env.VUE_APP_CACHE_MAX_AGE) : 0
     }
   },
   computed: {
     ...mapGetters({
       userProfile: 'user/getUserProfile',
+      userToken: 'user/getUserToken',
+      instanceUrl: 'user/getInstanceUrl'
     })
   },
   methods: {
@@ -73,8 +79,15 @@ export default defineComponent({
       createAnimation()
         .addAnimation([gapAnimation, revealAnimation])
         .play();
+    },
+    async unauthorized() {
+      this.store.dispatch("user/logout");
+      this.router.push("/login")
     }
   },
+  created() {
+    init(this.userToken, this.instanceUrl, this.maxAge)
+  },
   async mounted() {
     this.loader = await loadingController
       .create({
@@ -85,6 +98,7 @@ export default defineComponent({
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
     emitter.on('playAnimation', this.playAnimation);
+    emitter.on('unauthorized', this.unauthorized);
     // Handles case when user resumes or reloads the app
     if (this.userProfile) {
       // Luxon timezone should be set with the user's selected timezone
@@ -95,11 +109,15 @@ export default defineComponent({
     emitter.off('presentLoader', this.presentLoader);
     emitter.off('dismissLoader', this.dismissLoader);
     emitter.off('playAnimation', this.playAnimation);
+    emitter.off('unauthorized', this.unauthorized);
+    resetConfig()
   },
   setup(){
     const store = useStore();
+    const router = useRouter();
     return {
       store,
+      router
     }
   },
 });

src/adapter/index.ts

@@ -0,0 +1,10 @@
+import { api, client, init, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+
+export {
+  api,
+  client,
+  init,
+  resetConfig,
+  updateInstanceUrl,
+  updateToken
+}

src/services/JobService.ts

@@ -1,4 +1,4 @@
-import api from '@/api'
+import { api } from '@/adapter';
 
 const fetchJobInformation = async (payload: any): Promise <any>  => {
   return api({

src/services/ProductService.ts

@@ -1,4 +1,4 @@
-import api from '@/api';
+import { api } from '@/adapter';
 
 const fetchProducts = async (query: any): Promise <any>  => {
   return api({

src/services/UserService.ts

@@ -1,4 +1,4 @@
-import api, {client} from '@/api'
+import { api, client } from '@/adapter';
 import store from '@/store';
 import { hasError } from '@/utils'
 

src/services/UtilService.ts

@@ -1,4 +1,4 @@
-import api from '@/api'
+import { api } from '@/adapter';
 
 const getServiceStatusDesc = async (payload: any): Promise<any> => {
   return api({

src/services/WebhookService.ts

@@ -1,4 +1,4 @@
-import api from '@/api'
+import { api } from '@/adapter';
 import { showToast } from '@/utils';
 import { translate } from "@/i18n";
 import store from '@/store';

src/store/modules/user/actions.ts

@@ -7,6 +7,7 @@ import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon'
 import { getServerPermissionsFromRules, prepareAppPermissions, resetPermissions, setPermissions } from '@/authorization'
+import { updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 
 import logger from "@/logger";
 
@@ -102,7 +103,7 @@ const actions: ActionTree<UserState, RootState> = {
       commit(types.USER_CURRENT_SHOPIFY_CONFIG_UPDATED, currentShopifyConfig);
       commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
       commit(types.USER_TOKEN_CHANGED, { newToken: token })
-
+      updateToken(resp.data.token)
       // Getting service status description
       // TODO check if we could move it to logic for fetching jobs
       this.dispatch('util/getServiceStatusDesc')
@@ -129,6 +130,7 @@ const actions: ActionTree<UserState, RootState> = {
     // TODO add any other tasks if need
     dispatch('job/clearJobState', null, { root: true });
     commit(types.USER_END_SESSION)
+    resetConfig();
     resetPermissions();
   },
 
@@ -170,6 +172,7 @@ const actions: ActionTree<UserState, RootState> = {
    */
   setUserInstanceUrl ({ commit }, payload){
     commit(types.USER_INSTANCE_URL_UPDATED, payload)
+    updateInstanceUrl(payload)
   },