Implemented: centralized OMS instance navigation component in dxp-components (#140)

src/components/OmsInstanceNavigator.vue

@@ -0,0 +1,40 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-subtitle>
+        {{ $t('OMS instance') }}
+      </ion-card-subtitle>
+      <ion-card-title>
+        {{ authStore.getOms }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{ $t('This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.') }}
+    </ion-card-content>
+    <ion-button @click="goToOms(token.value, oms)" fill="clear">
+      {{ $t('Go to OMS') }}
+      <ion-icon slot="end" :icon="openOutline" />
+    </ion-button>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { 
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonIcon
+} from '@ionic/vue';
+import { goToOms } from '../utils';
+import { openOutline } from 'ionicons/icons'
+import { computed } from 'vue';
+import { useAuthStore } from "../store/auth";
+
+const authStore = useAuthStore();
+
+const token = computed(() => authStore.getToken)
+const oms = computed(() => authStore.getOms)
+</script>

src/components/index.ts

@@ -16,4 +16,5 @@ import '@ionic/vue/css/display.css';
 
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
+export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.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 { LanguageSwitcher, ProductIdentifier, ShopifyImg } from "./components";
+import { LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -43,8 +43,9 @@ export let dxpComponents = {
 
     app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
-    app.component('ShopifyImg', ShopifyImg)
+    app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
+    app.component('ShopifyImg', ShopifyImg)
 
     loginContext.login = options.login
     loginContext.logout = options.logout
@@ -70,19 +71,20 @@ export let dxpComponents = {
 }
 
 export {
-  Login,
-  ShopifyImg,
   appContext,
   goToOms,
   i18n,
+  initialiseFirebaseApp,
+  Login,
   loginContext,
+  noitificationContext,
+  OmsInstanceNavigator,
+  ProductIdentifier,
   productIdentificationContext,
+  ShopifyImg,
   shopifyImgContext,
   translate,
   useAuthStore,
   useProductIdentificationStore,
-  useUserStore,
-  initialiseFirebaseApp,
-  noitificationContext,
-  ProductIdentifier
+  useUserStore
 }