Implemented: support to define the timezone selector in dxp(#139)

src/components/DxpTimeZoneSwitcher.vue

@@ -0,0 +1,43 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{ $t('Timezone') }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{ $t('The timezone you select is used to ensure automations you schedule are always accurate to the time you select.') }}
+    </ion-card-content>
+    <ion-item lines="none">
+      <ion-label> {{ userProfile && userProfile.userTimeZone ? userProfile.userTimeZone : '-' }} </ion-label>
+      <ion-button @click="changeTimeZone()" slot="end" fill="outline" color="dark">{{ $t("Change") }}</ion-button>
+    </ion-item>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import {
+  IonCard, 
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonItem,
+  IonLabel,
+  IonButton, 
+  modalController
+} from '@ionic/vue';
+import { appContext } from '../index';
+import { computed } from 'vue';
+import { defineAsyncComponent } from 'vue';
+import TimeZoneModal from './TimeZoneModal.vue';
+
+const appState = appContext.config.globalProperties.$store;
+const userProfile = computed(() => appState.getters['user/getUserProfile'])
+
+const changeTimeZone = async () => {
+  const timeZoneModal = await modalController.create({
+    component: defineAsyncComponent(() => import('./TimeZoneModal.vue')),
+  });
+  return timeZoneModal.present();
+}
+</script>

src/components/TimeZoneModal.vue

@@ -0,0 +1,11 @@
+<template>
+  <!-- <ion-page> -->
+    <ion-label>{{"Hello"}}</ion-label>
+  <!-- </ion-page> -->
+</template>
+
+<script setup lang="ts">
+import {
+  IonLabel
+} from '@ionic/vue';
+</script>

src/components/index.ts

@@ -23,3 +23,4 @@ export { default as DxpOmsInstanceNavigator } from './DxpOmsInstanceNavigator.vu
 export { default as DxpProductIdentifier } from "./DxpProductIdentifier.vue";
 export { default as DxpShopifyImg } from './DxpShopifyImg.vue';
 export { default as DxpUserProfile } from './DxpUserProfile.vue'
+export { default as DxpTimeZoneSwitcher } from './DxpTimeZoneSwitcher.vue'

src/index.ts

@@ -3,12 +3,13 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { DxpAppVersionInfo, DxpImage, DxpLanguageSwitcher, DxpLogin, DxpMenuFooterNavigation, DxpOmsInstanceNavigator, DxpProductIdentifier, DxpShopifyImg, DxpUserProfile } from "./components";
+import { DxpAppVersionInfo, DxpImage, DxpLanguageSwitcher, DxpLogin, DxpMenuFooterNavigation, DxpOmsInstanceNavigator, DxpProductIdentifier, DxpShopifyImg, DxpTimeZoneSwitcher, DxpUserProfile } from "./components";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createI18n } from 'vue-i18n'
 import { useUserStore } from "./store/user";
+import { IonicVue } from '@ionic/vue';
 
 import "./service-worker"
 
@@ -60,6 +61,9 @@ export let dxpComponents = {
     // registering pinia in the app
     app.use(pinia);
     app.use(i18n);
+    app.use(IonicVue, {
+      mode: 'md'
+    })
 
     app.component('DxpAppVersionInfo', DxpAppVersionInfo)
     app.component('DxpImage', DxpImage)
@@ -69,6 +73,7 @@ export let dxpComponents = {
     app.component('DxpOmsInstanceNavigator', DxpOmsInstanceNavigator)
     app.component('DxpProductIdentifier', DxpProductIdentifier)
     app.component('DxpShopifyImg', DxpShopifyImg)
+    app.component('DxpTimeZoneSwitcher', DxpTimeZoneSwitcher)
     app.component('DxpUserProfile', DxpUserProfile)
 
     showToast = options.showToast
@@ -109,6 +114,7 @@ export {
   DxpOmsInstanceNavigator,
   DxpProductIdentifier,
   DxpShopifyImg,
+  DxpTimeZoneSwitcher,
   DxpUserProfile,
   getProductIdentificationValue,
   goToOms,