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

package.json

@@ -17,14 +17,14 @@
     "@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",
-    "boon-js": "^2.0.3",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
+    "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
     "luxon": "^3.2.0",

src/adapter/index.ts

@@ -10,7 +10,9 @@ import {
   Product,
   resetConfig,
   updateToken,
-  updateInstanceUrl
+  updateInstanceUrl,
+  setUserTimeZone,
+  getAvailableTimeZones
 } from '@hotwax/oms-api'
 
 export {
@@ -25,5 +27,7 @@ export {
   Product,
   resetConfig,
   updateToken,
-  updateInstanceUrl
+  updateInstanceUrl,
+  setUserTimeZone,
+  getAvailableTimeZones
 }

src/locales/en.json

@@ -10,6 +10,8 @@
   "Authenticating": "Authenticating",
   "Backorder": "Backorder",
   "Blank": "Blank",
+  "Browser TimeZone": "Browser TimeZone",
+  "Browser time zone": "Browser time zone",
   "Buffer days": "Buffer days",
   "Built: ": "Built: {builtDateTime}",
   "Bulk adjustment": "Bulk adjustment",
@@ -147,6 +149,8 @@
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Select CSV": "Select CSV",
   "Settings": "Settings",
+  "Selected TimeZone": "Selected TimeZone",
+  "Select a different time zone": "Select a different time zone",
   "Shopify product SKU": "Shopify product SKU",
   "Shopify product UPC": "Shopify product UPC",
   "Start with Ionic": "Start with Ionic",

src/main.ts

@@ -35,6 +35,7 @@ import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
 import { getConfig, initialise } from '@hotwax/oms-api';
 import localeMessages from './locales';
+import { setUserTimeZone, getAvailableTimeZones} from '@/adapter'
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -58,7 +59,9 @@ const app = createApp(App)
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig,
     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

@@ -19,21 +19,7 @@ const getProfile = async (): Promise <any>  => {
       method: "get",
     });
 }
-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 createFieldMapping = async (payload: any): Promise <any> => {
   return api({
     url: "/service/createDataManagerMapping",
@@ -159,10 +145,8 @@ export const UserService = {
     createFieldMapping,
     deleteFieldMapping,
     login,
-    getAvailableTimeZones,
     getFieldMappings,
     getProfile,
     getUserPermissions,
-    setUserTimeZone,
     updateFieldMapping
 }

src/store/modules/user/actions.ts

@@ -9,6 +9,7 @@
 import logger from "@/logger";
 import { useAuthStore } from '@hotwax/dxp-components';
 import emitter from '@/event-bus'
+import { Settings } from 'luxon';
 import {
   getServerPermissionsFromRules,
   prepareAppPermissions,
@@ -150,16 +151,10 @@
   /**
    * Update user timeZone
    */
-  async setUserTimeZone({ state, commit }, payload) {
+  async setUserTimeZone ( { state, commit }, timeZoneId) {
     const current: any = state.current;
-    if(current.userTimeZone !== payload.tzId) {
-      const resp = await UserService.setUserTimeZone(payload)
-      if (resp.status === 200 && !hasError(resp)) {
-        current.userTimeZone = payload.tzId;
-        commit(types.USER_INFO_UPDATED, current);
-        showToast(translate("Time zone updated successfully"));
-      }
-    }
+    current.userTimeZone = timeZoneId;
+    commit(types.USER_INFO_UPDATED, current);
   },
 
   /**

src/views/Settings.vue

@@ -45,22 +45,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" />
         <ion-card>
           <ion-card-header>
             <ion-card-subtitle>
@@ -95,12 +80,11 @@
 </template>
 
 <script lang="ts">
-import { IonAvatar, IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonInput, IonLabel, IonMenuButton, IonPage, IonTitle, IonToolbar, modalController } from '@ionic/vue';
+import { IonAvatar, IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonInput, IonLabel, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { codeWorkingOutline, ellipsisVertical, personCircleOutline, openOutline, saveOutline, timeOutline } from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
-import TimeZoneModal from '@/views/TimezoneModal.vue';
 import { DateTime } from 'luxon';
 import Image from '@/components/Image.vue';
 
@@ -152,11 +136,8 @@ export default defineComponent({
       this.store.dispatch('user/setPreferredDateTimeFormat', this.dateTimeFormat);
       this.parseSampleDateTime();
     },
-    async changeTimeZone() {
-      const timeZoneModal = await modalController.create({
-        component: TimeZoneModal,
-      });
-      return timeZoneModal.present();
+    async timeZoneUpdated(tzId: string) {
+      await this.store.dispatch("user/setUserTimeZone", tzId)
     },
     parseSampleDateTime(){
       this.sampleDateTime = DateTime.now().toFormat(this.dateTimeFormat);