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

package.json

@@ -18,8 +18,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.12.2",
-    "@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,8 +1,9 @@
-import { api, client, getConfig, getProductIdentificationPref, getUserFacilities, initialise, logout, resetConfig, setProductIdentificationPref, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getAvailableTimeZones, getConfig, getProductIdentificationPref, getUserFacilities, initialise, logout, resetConfig, setProductIdentificationPref, updateInstanceUrl, updateToken, setUserTimeZone } from '@hotwax/oms-api'
 
 export {
   api,
   client,
+  getAvailableTimeZones,
   getConfig,
   getProductIdentificationPref,
   getUserFacilities,
@@ -11,5 +12,6 @@ export {
   resetConfig,
   setProductIdentificationPref,
   updateInstanceUrl,
-  updateToken
+  updateToken,
+  setUserTimeZone
 }

src/locales/en.json

@@ -3,6 +3,8 @@
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Authenticating": "Authenticating",
   "Back to Launchpad": "Back to Launchpad",
+  "Browser TimeZone": "Browser TimeZone",
+  "Browser time zone": "Browser time zone",
   "Built: ": "Built: {builtDateTime}",
   "Camera permission denied.": "Camera permission denied.",
   "Cancel": "Cancel",
@@ -54,7 +56,9 @@
   "Search time zones": "Search time zones",
   "Secondary": "Secondary",
   "Select facility": "Select facility",
+  "Selected TimeZone": "Selected TimeZone",
   "Select time zone": "Select time zone",
+  "Select a different time zone": "Select a different time zone",
   "Set facility": "Set facility",
   "Settings": "Settings",
   "Shopify Config": "Shopify Config",

src/main.ts

@@ -33,7 +33,7 @@ import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
-import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter';
+import { getConfig, getAvailableTimeZones, getProductIdentificationPref, initialise, setProductIdentificationPref, setUserTimeZone } from '@/adapter';
 import localeMessages from './locales';
 
 const app = createApp(App)
@@ -57,7 +57,9 @@ const app = createApp(App)
     getProductIdentificationPref,
     initialise,
     localeMessages,
-    setProductIdentificationPref
+    setProductIdentificationPref,
+    getAvailableTimeZones,
+    setUserTimeZone,
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/services/UserService.ts

@@ -41,20 +41,6 @@ const checkPermission = async (payload: any): 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 getQOHViewConfig = async (token: any, productStoreId: any): Promise<any> => {
   // If the productStoreId is not provided, it may be case of facility not associated with any productStore
   if (!productStoreId) {
@@ -225,12 +211,10 @@ const getCurrentEComStore = async (token: any, facilityId: any): Promise<any> =>
 
 export const UserService = {
     login,
-    getAvailableTimeZones,
     getCurrentEComStore,
     getQOHViewConfig,
     getUserPermissions,
     getUserProfile,
-    setUserTimeZone,
     checkPermission,
     updateQOHViewConfig
 }

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 { getUserFacilities, logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
@@ -157,16 +157,13 @@
   /**
    * 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;
     },
+
 
   // update current facility information
   async setFacility ({ commit, dispatch, state }, payload) {

src/views/Settings.vue

@@ -58,21 +58,7 @@
 
       <section>
         <DxpProductIdentifier />
-
-        <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"/>
         <ion-card>
           <ion-card-header>
             <ion-card-title>
@@ -93,13 +79,12 @@
 </template>
 
 <script lang="ts">
-import { alertController, IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, modalController } from '@ionic/vue';
+import { alertController, IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { codeWorkingOutline, ellipsisVertical, personCircleOutline, storefrontOutline, openOutline} from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import Image from '@/components/Image.vue'
-import TimeZoneModal from '@/views/TimezoneModal.vue';
 import { Actions, hasPermission } from '@/authorization'
 import { UserService } from '@/services/UserService'
 import { hasError, showToast } from '@/utils';
@@ -119,7 +104,6 @@ export default defineComponent({
     IonHeader, 
     IonIcon,
     IonItem, 
-    IonLabel,
     IonPage, 
     IonSelect,
     IonSelectOption,
@@ -239,11 +223,9 @@ export default defineComponent({
       });
       await alert.present();
     },
-    async changeTimeZone() {
-      const timeZoneModal = await modalController.create({
-        component: TimeZoneModal,
-      });
-      return timeZoneModal.present();
+
+    async timeZoneUpdated(tzId: string) {
+      await this.store.dispatch("user/setUserTimeZone", tzId)
     },
     logout () {
       if (Object.keys(this.uploadProducts).length > 0) {