Implemented instance url flow

src/api/index.ts

@@ -69,7 +69,9 @@ const api = async (customConfig: any) => {
         data: customConfig.data,
         params: customConfig.params
     }
-    const baseURL = process.env.VUE_APP_BASE_URL;
+
+    let baseURL = store.getters['user/getInstanceUrl'];
+    baseURL = baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
     if (baseURL) config.baseURL = baseURL;
 
     if(customConfig.cache) config.adapter = axiosCache.adapter;

src/i18n/locales/en.json

@@ -25,6 +25,7 @@
     "Enter an order ID, product name, style name, SKU, customer name, UPCA or external ID":"Enter an order ID, product name, style name, SKU, customer name, UPCA or external ID",
     "How are orders released?":"How are orders released?",
     "in stock": "in stock",
+    "Instance Url": "Instance Url",
     "Item cancelled successfully": "Item cancelled successfully",
     "items preordered": "items preordered",
     "Item promise date updated successfully": "Item promise date updated successfully",

src/store/modules/user/UserState.ts

@@ -2,4 +2,5 @@ export default interface UserState {
     token: string;
     current: object | null;
     selectedBrand: string;
+    instanceUrl: string;
 }

src/store/modules/user/actions.ts

@@ -84,6 +84,13 @@ const actions: ActionTree<UserState, RootState> = {
       // Reset all the current queries
       this.dispatch("product/resetProductList")
       this.dispatch("order/resetOrderQuery")
+    },
+
+  /**
+    * Set User Instance Url
+    */
+     setUserInstanceUrl ({ state, commit }, payload){
+      commit(types.USER_INSTANCE_URL_UPDATED, payload)
     }
 }
 export default actions;

src/store/modules/user/getters.ts

@@ -17,6 +17,9 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getSelectedBrand (state) {
         return state.selectedBrand
+    },
+    getInstanceUrl (state) {
+        return state.instanceUrl;
     }
 }
 export default getters;

src/store/modules/user/index.ts

@@ -10,7 +10,8 @@ const userModule: Module<UserState, RootState> = {
     state: {
       token: '',
       current: null,
-      selectedBrand: ''
+      selectedBrand: '',
+      instanceUrl: '',
     },
     getters,
     actions,

src/store/modules/user/mutation-types.ts

@@ -2,4 +2,5 @@ export const SN_USER = 'user'
 export const USER_TOKEN_CHANGED = SN_USER + '/TOKEN_CHANGED'
 export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
-export const USER_BRAND_UPDATED = SN_USER + '/BRAND_UPDATED'
+export const USER_BRAND_UPDATED = SN_USER + '/BRAND_UPDATED'
+export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 

src/store/modules/user/mutations.ts

@@ -16,5 +16,8 @@ const mutations: MutationTree <UserState> = {
     [types.USER_BRAND_UPDATED] (state, payload) {
         state.selectedBrand = payload
     },
+    [types.USER_INSTANCE_URL_UPDATED] (state, payload) {
+        state.instanceUrl = payload;
+    }
 }
 export default mutations;

src/views/login.vue

@@ -5,13 +5,17 @@
         <form class="login-container" @keyup.enter="login(form)" @submit.prevent="login(form)">
           <img src="../assets/images/hc.png"/>
 
+          <ion-item lines="full">
+            <ion-label>{{ $t("Instance Url") }}</ion-label>
+            <ion-input name="instanceUrl" v-model="instanceUrl" id="instanceUrl" type="text" required />
+          </ion-item>
           <ion-item lines="full">
             <ion-label>{{ $t("Username") }}</ion-label>
-            <ion-input name="username" v-model="username" id="username"  type="text" required></ion-input>
+            <ion-input name="username" v-model="username" id="username"  type="text" required />
           </ion-item>
           <ion-item lines="none">
             <ion-label>{{ $t("Password") }}</ion-label>
-            <ion-input name="password" v-model="password" id="password" type="password" required></ion-input>
+            <ion-input name="password" v-model="password" id="password" type="password" required />
           </ion-item>
 
           <div class="ion-padding">
@@ -34,6 +38,7 @@ import {
 import { defineComponent } from "vue";
 import { useRouter } from "vue-router";
 import { useStore } from "./../store";
+import { mapGetters } from 'vuex';
 
 export default defineComponent({
   name: "login",
@@ -48,11 +53,21 @@ export default defineComponent({
   data() {
     return {
       username: "",
-      password: ""
+      password: "",
+      instanceUrl: ""
     };
   },
+  computed: {
+    ...mapGetters({
+      currentInstanceUrl: 'user/getInstanceUrl'
+    })
+  },
+  mounted() {
+    this.instanceUrl= this.currentInstanceUrl;
+  },
   methods: {
     login: function () {
+       this.store.dispatch("user/setUserInstanceUrl", this.instanceUrl)
       const { username, password } = this;
       this.store.dispatch("user/login", { username, password }).then((data: any) => {
         if (data.token) {