Merge pull request #133 from sanskar345/dxp-components/#126

Implemented: menu footer navigation component (#126)

src/components/MenuFooterNavigation.vue

@@ -0,0 +1,53 @@
+<template>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-item lines="none">
+        <ion-label class="ion-text-wrap">
+          <p class="overline">{{ instanceUrl }}</p>
+        </ion-label>
+        <ion-note slot="end">{{ userAppState.userProfile?.userTimeZone }}</ion-note>
+      </ion-item>
+      <!-- showing product stores only when there are multiple options to choose from. -->
+      <ion-item v-if="userAppState.userProfile?.stores?.length > 2" lines="none">
+        <!-- WHY EVENTS ($emit) IS USED WITH ION CHANGE: https://michaelnthiessen.com/pass-function-as-prop/ -->
+        <ion-select interface="popover" :value="userAppState.currentEComStore.productStoreId" @ionChange="$emit('updateEcomStore', $event)">
+          <ion-select-option v-for="store in userAppState.userProfile.stores" :key="store.productStoreId" :value="store.productStoreId">{{ store.storeName }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+      <ion-item v-else lines="none">
+        <ion-label class="ion-text-wrap">
+          {{ userAppState.currentEComStore.storeName }}
+        </ion-label>
+      </ion-item>
+      <!-- similarly, showing shopify configs only when there are multiple options to choose from 
+      but if both product store and config have multiple options, then only option to choose
+      product store will be visible -->
+      <ion-item v-if="userAppState.shopifyConfigs?.length > 1 && userAppState.userProfile?.stores?.length < 3" lines="none">
+        <ion-select interface="popover" :value="userAppState.currentShopifyConfig?.shopifyConfigId" @ionChange="$emit('updateShopifyConfig', $event)">
+          <ion-select-option v-for="shopifyConfig in userAppState.shopifyConfigs" :key="shopifyConfig.shopifyConfigId" :value="shopifyConfig.shopifyConfigId">{{ shopifyConfig.name ? shopifyConfig.name : shopifyConfig.shopifyConfigName }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+      <ion-item v-else lines="none">
+        <ion-label class="ion-text-wrap">
+          <p>{{ userAppState.currentShopifyConfig.name ? userAppState.currentShopifyConfig.name : userAppState.currentShopifyConfig.shopifyConfigName }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script setup lang="ts">
+import { IonFooter, IonItem, IonLabel, IonNote, IonSelect, IonSelectOption, IonToolbar } from '@ionic/vue';
+import { appContext, useAuthStore } from "../index";
+import { computed } from 'vue';
+
+const authStore = useAuthStore();
+const appState = appContext.config.globalProperties.$store;
+const instanceUrl = computed(() => authStore.getOms); 
+const userAppState = computed(() => ({ 
+  userProfile: appState.getters['user/getUserProfile'],
+  currentEComStore: appState.getters['user/getCurrentEComStore'],
+  shopifyConfigs: appState.getters['user/getShopifyConfigs'],
+  currentShopifyConfig: appState.getters['user/getCurrentShopifyConfig']
+}));
+</script>

src/components/index.ts

@@ -18,6 +18,7 @@ export { default as DxpImage } from './DxpImage.vue';
 export { default as DxpUserProfile } from './DxpUserProfile.vue'
 export { default as AppVersionInfo } from './AppVersionInfo.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
+export { default as MenuFooterNavigation } from './MenuFooterNavigation.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as Scanner } from './Scanner.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 { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, MenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -48,6 +48,7 @@ export let dxpComponents = {
     app.component('DxpUserProfile', DxpUserProfile)
     app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
+    app.component('MenuFooterNavigation', MenuFooterNavigation)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
     app.component('Scanner', Scanner)