Implemented: timeZone switcher component from dxp package(dxp/262)

package.json

@@ -19,8 +19,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "1.12.1",
-    "@hotwax/oms-api": "^1.10.0",
+    "@hotwax/dxp-components": "file:../dxp-components",
+    "@hotwax/oms-api": "file:../oms-api",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",

src/adapter/index.ts

@@ -1,4 +1,4 @@
-import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken,  setUserTimeZone, getAvailableTimeZones } from '@hotwax/oms-api'
 
 export {
   api,
@@ -8,5 +8,7 @@ export {
   logout,
   resetConfig,
   updateInstanceUrl,
-  updateToken
+  updateToken,
+  setUserTimeZone,
+  getAvailableTimeZones
 }

src/main.ts

@@ -32,7 +32,7 @@ import { login, logout, loader } from './user-utils';
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
-import { getConfig, initialise } from '@/adapter'
+import { getConfig, initialise,  setUserTimeZone, getAvailableTimeZones } from '@/adapter'
 import localeMessages from './i18n/locales';
 
 const app = createApp(App)
@@ -54,7 +54,9 @@ const app = createApp(App)
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig: getConfig,
     initialise: initialise,
-    localeMessages
+    localeMessages,
+    setUserTimeZone,
+    getAvailableTimeZones
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/services/UserService.ts

@@ -12,20 +12,6 @@ const login = async (username: string, password: string): Promise <any> => {
     }
   });
 }
-const getAvailableTimeZones = async (): Promise <any>  => {
-  return api({
-    url: "getAvailableTimeZones",
-    method: "get",
-    cache: true
-  });
-}
-const setUserTimeZone = async (payload: any): Promise <any>  => {
-  return api({
-    url: "setUserTimeZone",
-    method: "post",
-    data: payload
-  });
-}
 
 const setUserPreference = async (payload: any): Promise<any> => {
   return api({
@@ -204,12 +190,10 @@ const getUserProfile = async (token: any): Promise<any> => {
 }
 
 export const UserService = {
-  getAvailableTimeZones,
   getEComStores,
   getPreferredStore,
   getUserProfile,
   getUserPermissions,
   login,
   setUserPreference,
-  setUserTimeZone,
 }

src/store/modules/user/actions.ts

@@ -136,16 +136,12 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Update user timeZone
    */
-     async setUserTimeZone ( { state, commit }, payload) {
-      const resp = await UserService.setUserTimeZone(payload)
-      if (resp.status === 200 && !hasError(resp)) {
-        const current: any = state.current;
-        current.userTimeZone = payload.timeZoneId;
-        commit(types.USER_INFO_UPDATED, current);
-        Settings.defaultZone = current.userTimeZone;
-        showToast(translate("Time zone updated successfully"));
-      }
-    },
+  async setUserTimeZone ( { state, commit }, timeZoneId) {
+    const current: any = state.current;
+    current.userTimeZone = timeZoneId;
+    commit(types.USER_INFO_UPDATED, current);
+    Settings.defaultZone = current.userTimeZone;
+  },
 
   /**
    * Set user's selected Ecom store

src/views/settings.vue

@@ -65,22 +65,7 @@
       <DxpAppVersionInfo />
 
       <section>
-        <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>
+        <DxpTimeZoneSwitcher @timeZoneUpdated="timeZoneUpdated" />
       </section>
     </ion-content>
   </ion-page>
@@ -102,17 +87,14 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonMenuButton,
   IonPage,
   IonSelect,
   IonSelectOption,
   IonTitle,
-  IonToolbar,
-  modalController } from "@ionic/vue";
+  IonToolbar } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { mapGetters } from 'vuex'
-import TimeZoneModal from '@/views/timezone-modal.vue'
 import Image from '@/components/Image.vue';
 
 export default defineComponent({
@@ -130,7 +112,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonMenuButton,
     IonPage,
     IonSelect,
@@ -167,11 +148,8 @@ export default defineComponent({
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
     },
-    async changeTimeZone() {
-      const timeZoneModal = await modalController.create({
-        component: TimeZoneModal,
-      });
-      return timeZoneModal.present();
+    async timeZoneUpdated(tzId: string) {
+      await this.store.dispatch("user/setUserTimeZone", tzId)
     },
     updateBrand(event: any) {
       if(event.detail.value && this.userProfile && this.currentEComStore?.productStoreId !== event.detail.value) {