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

src/components/OmsInstanceNavigator.vue

@@ -0,0 +1,37 @@
+<template>
+  <!-- Todo: need to add translation to all the text once implemented in dxp-component -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-subtitle>
+        {{ "OMS instance" }}
+      </ion-card-subtitle>
+      <ion-card-title>
+        {{ authStore.getOms }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{ '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(authStore.getToken.value, authStore.getOms)" fill="clear">
+      {{ '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 { useAuthStore } from "../store/auth";
+
+const authStore = useAuthStore()
+</script>

src/components/index.ts

@@ -14,5 +14,7 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-export { default as ProductIdentifier } from "./ProductIdentifier.vue";
+import OmsInstanceNavigator from './OmsInstanceNavigator.vue';
+import ProductIdentifier from './ProductIdentifier.vue';
 
+export { OmsInstanceNavigator, ProductIdentifier };

src/index.ts

@@ -8,7 +8,7 @@ import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import { ProductIdentifier } from "./components";
+import { OmsInstanceNavigator, ProductIdentifier } from "./components";
 
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin
@@ -30,8 +30,9 @@ export let dxpComponents = {
     app.use(pinia);
 
     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
@@ -58,11 +59,12 @@ export {
   initialiseFirebaseApp,
   Login,
   loginContext,
-  productIdentificationContext,
   noitificationContext,
+  OmsInstanceNavigator,
+  ProductIdentifier,
+  productIdentificationContext,
   ShopifyImg,
   shopifyImgContext,
   useProductIdentificationStore,
   useAuthStore,
-  ProductIdentifier
 }