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

package.json

@@ -16,11 +16,11 @@
     "@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",
-    "@ionic/core": "^7.6.0",
-    "@ionic/vue": "^7.6.0",
-    "@ionic/vue-router": "^7.6.0",
+    "@hotwax/dxp-components": "^1.13.0",
+    "@hotwax/oms-api": "^1.14.0",
+    "@ionic/core": "^7.8.1",
+    "@ionic/vue": "^7.8.1",
+    "@ionic/vue-router": "^7.8.1",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
     "boon-js": "^2.0.3",

src/adapter/index.ts

@@ -1,9 +1,10 @@
-import { api, client, getConfig, getTelecomCountryCode, getUserFacilities, hasError, initialise, logout, resetConfig, setUserLocale, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getAvailableTimeZones, getConfig, getTelecomCountryCode, getUserFacilities, hasError, initialise, logout, resetConfig, setUserLocale, updateInstanceUrl, updateToken, setUserTimeZone } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getAvailableTimeZones,
   getTelecomCountryCode,
   getUserFacilities,
   hasError,
@@ -12,5 +13,6 @@ export {
   resetConfig,
   setUserLocale,
   updateInstanceUrl,
-  updateToken
+  updateToken,
+  setUserTimeZone
 }

src/locales/en.json

@@ -31,6 +31,8 @@
   "Auto release": "Auto release",
   "Back to Launchpad": "Back to Launchpad",
   "Backorder parking": "Backorder parking",
+  "Browser TimeZone": "Browser TimeZone",
+  "Browser time zone": "Browser time zone",
   "Built: ": "Built: { builtDateTime }",
   "Brokering queue": "Brokering queue",
   "Cancel": "Cancel",
@@ -313,6 +315,7 @@
   "Search groups": "Search groups",
   "Search time zones": "Search time zones",
   "Select time zone": "Select time zone",
+  "Select a different time zone": "Select a different time zone",
   "Select type": "Select type",
   "Select product stores": "Select product stores",
   "Select which channels this facility publishes inventory too.": "Select which channels this facility publishes inventory too.",
@@ -324,6 +327,7 @@
   "Settings": "Settings",
   "Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.": "Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.",
   "Setup Store": "Setup Store",
+  "Selected TimeZone": "Selected TimeZone",
   "Shipping name": "Shipping name",
   "Shopify": "Shopify",
   "Shopify facility": "Shopify facility",

src/main.ts

@@ -32,7 +32,7 @@ import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'; 
 import { login, logout, loader } from '@/utils/user';
-import { getConfig, initialise, setUserLocale } from './adapter';
+import { getConfig, initialise, setUserLocale, setUserTimeZone, getAvailableTimeZones } from './adapter';
 import localeMessages from '@/locales';
 
 const app = createApp(App)
@@ -58,7 +58,9 @@ const app = createApp(App)
   initialise,
   localeMessages,
   setUserLocale,
-  showToast
+  showToast,
+  setUserTimeZone, 
+  getAvailableTimeZones,
   });
 
 router.isReady().then(() => {

src/services/UserService.ts

@@ -12,22 +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 getUserPermissions = async (payload: any, token: any): Promise<any> => {
   const baseURL = store.getters['user/getBaseUrl'];
   let serverPermissions = [] as any;
@@ -319,13 +303,11 @@ export const UserService = {
   isRoleTypeExists,
   isUserLoginIdExists,
   login,
-  getAvailableTimeZones,
   getUserProfile,
   getUserPermissions,
   fetchLogoImageForParties,
   fetchUserContactDetails,
   fetchUserLoginAndPartyDetails,
   sendResetPasswordEmail,
-  setUserTimeZone,
   updateUserLoginStatus
 }

src/store/modules/user/actions.ts

@@ -5,7 +5,7 @@
 import * as types from './mutation-types'
 import { showToast } from '@/utils'
 import { Settings } from 'luxon'
 import { hasError, logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import logger from '@/logger'
 import { getServerPermissionsFromRules, prepareAppPermissions, resetPermissions, setPermissions } from '@/authorization'
 import { translate, useAuthStore, useUserStore } from '@hotwax/dxp-components'
@@ -125,22 +125,11 @@
   /**
    * Update user timeZone
    */
-  async setUserTimeZone({ state, commit }, payload) {
+  async setUserTimeZone ( { state, commit }, timeZoneId) {
     const current: any = state.current;
-    if(current.userTimeZone !== payload.tzId) {
-      try {
-        const resp = await UserService.setUserTimeZone(payload)
-        if (resp.status === 200 && !hasError(resp)) {
-          const current: any = state.current;
-          current.userTimeZone = payload.tzId;
-          commit(types.USER_INFO_UPDATED, current);
-          Settings.defaultZone = current.userTimeZone;
-          showToast(translate("Time zone updated successfully"));
-        }
-      } catch(err) {
-        logger.error('Failed to update timeZone')
-      }
-    }
+    current.userTimeZone = timeZoneId;
+    commit(types.USER_INFO_UPDATED, current);
+    Settings.defaultZone = current.userTimeZone;
   },
 
   // Set User Instance Url

src/views/Settings.vue

@@ -44,23 +44,7 @@
       <DxpAppVersionInfo />
 
       <section>
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              {{ translate('Timezone') }}
-            </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            {{ translate('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">{{ translate("Change") }}</ion-button>
-          </ion-item>
-        </ion-card>
-
+        <DxpTimeZoneSwitcher @timeZoneUpdated="timeZoneUpdated" />
         <DxpLanguageSwitcher />
       </section>
     </ion-content>
@@ -72,25 +56,21 @@ import {
   IonAvatar,
   IonButton, 
   IonCard, 
-  IonCardContent,
   IonCardHeader,
   IonCardTitle,
   IonCardSubtitle,
   IonContent,
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonPage,
   IonTitle,
   IonToolbar,
-  modalController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { codeWorkingOutline, ellipsisVerticalOutline, globeOutline, openOutline, timeOutline } from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
-import TimezoneModal from '@/components/TimezoneModal.vue'
 import { translate } from '@hotwax/dxp-components';
 import { Actions, hasPermission } from '@/authorization'
 import { DateTime } from 'luxon';
@@ -102,15 +82,13 @@ export default defineComponent({
     IonAvatar,
     IonButton,
     IonCard,
-    IonCardContent,
     IonCardHeader,
     IonCardTitle,
     IonCardSubtitle,
     IonContent,
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonPage,
     IonTitle,
     IonToolbar,
@@ -148,11 +126,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)
     },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);