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.13.0",
+    "@hotwax/dxp-components": "1.13.0",
+    "@hotwax/oms-api": "1.14.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",
     "@ionic/vue-router": "^7.6.0",

src/adapter/index.ts

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

src/i18n/locales/en.json

@@ -21,6 +21,8 @@
     "back-order": "back-order",
     "Back-order": "Back-order",
     "Broker orders": "Broker orders",
+    "Browser TimeZone": "Browser TimeZone",
+    "Browser time zone": "Browser time zone",
     "Built: ": "Built: {builtDateTime}",
     "eCom Store": "eCom Store",
     "Cancel": "Cancel",
@@ -192,7 +194,9 @@
     "Selected variant not available": "Selected variant not available",
     "Selected variant not available. Reseting to first variant.": "Selected variant not available. Reseting to first variant.",
     "Select a new promise date for these orders. This new date will be used for allocating inventory and fulfilling these orders.": "Select a new promise date for these orders. This new date will be used for allocating inventory and fulfilling these orders.",
+    "Selected TimeZone": "Selected TimeZone",
     "Select time zone": "Select time zone",
+    "Select a different time zone": "Select a different time zone",
     "Service has been scheduled": "Service has been scheduled",
     "Settings": "Settings",
     "Ships from date": "Ships from date",

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, setUserLocale} from '@/adapter'
+import { getConfig, initialise,  setUserTimeZone, getAvailableTimeZones, setUserLocale} from '@/adapter'
 import localeMessages from './i18n/locales';
 
 const app = createApp(App)
@@ -56,7 +56,9 @@ const app = createApp(App)
     getConfig: getConfig,
     initialise: initialise,
     localeMessages,
-    setUserLocale
+    setUserLocale,
+    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

@@ -3,7 +3,7 @@
 import RootState from '@/store/RootState'
 import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon'
 import { updateInstanceUrl, updateToken, resetConfig, logout } from '@/adapter'
@@ -136,16 +136,12 @@
   /**
    * 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

@@ -64,22 +64,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>
@@ -101,17 +86,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({
@@ -129,7 +111,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonMenuButton,
     IonPage,
     IonSelect,
@@ -166,11 +147,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) {