Fixed: timeZone does not gets updated for user login, removed confirm alert, and added loading state

src/i18n/locales/en.json

@@ -8,7 +8,6 @@
     "All": "All",
     "App": "App",
     "Are you sure you want to update the promise date for these orders?": "Are you sure you want to update the promise date for these orders?",
-    "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
     "ATP": "ATP",
     "Auto": "Auto",
     "Auto releasing": "Auto releasing",
@@ -64,6 +63,7 @@
     "Enter a product name, style name, SKU, UPCA or external ID.": "Enter a product name, style name, SKU, UPCA or external ID.",
     "Enter an order ID, product name, style name, SKU, customer name, UPCA or external ID": "Enter an order ID, product name, style name, SKU, customer name, UPCA or external ID",
     "Excluded ATP": "Excluded ATP",
+    "Fetching TimeZones": "Fetching TimeZones",
     "from date": "from date",
     "Failed to update configuration": "Failed to update configuration",
     "Go to Launchpad": "Go to Launchpad",
@@ -232,7 +232,6 @@
     "Total PO ATP": "Total PO ATP",
     "Total PO items": "Total PO items",
     "Update promise date": "Update promise date",
-    "Update time zone": "Update time zone",
     "Username": "Username",
     "variant": "variant",
     "variants": "variants",

src/store/modules/user/actions.ts

@@ -136,14 +136,17 @@ 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 }, payload) {
+      const current: any = state.current;
+      // if set the same timezone again, no API call should happen
+      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);
+          Settings.defaultZone = current.userTimeZone;
+          showToast(translate("Time zone updated successfully"));
+        }
       }
     },
 

src/views/timezone-modal.vue

@@ -9,30 +9,38 @@
       <ion-title>{{ $t("Select time zone") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')" v-model="queryString" @ionChange="findTimeZone()" @keydown="preventSpecialCharacters($event)" />
     </ion-toolbar>
   </ion-header>
 
   <ion-content class="ion-padding">
-    <!-- Empty state -->
-    <div class="empty-state" v-if="filteredTimeZones.length === 0">
-      <p>{{ $t("No time zone found")}}</p>
-    </div>
+    <form @keyup.enter="setUserTimeZone">
+      <div class="empty-state" v-if="isLoading">
+        <ion-spinner name="crescent" />
+        <p>{{ $t("Fetching TimeZones") }}</p>
+      </div>
 
-    <!-- Timezones -->
-    <div v-else>
-      <ion-list>
-        <ion-radio-group value="rd" v-model="timeZoneId">
-          <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-            <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-            <ion-radio :value="timeZone.id" slot="start" />
-          </ion-item>
-        </ion-radio-group>
-      </ion-list>
-    </div>
-
+      <!-- Empty state -->
+      <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
+        <p>{{ $t("No time zone found") }}</p>
+      </div>
+
+      <!-- Timezones -->
+      <div v-else>
+        <ion-list>
+          <ion-radio-group value="rd" v-model="timeZoneId">
+            <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
+              <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
+              <ion-radio :value="timeZone.id" slot="start" />
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </div>
+    </form>
+
+    <!-- Defined ion-fab outside of form element as the fab button losoe its styling when wrapped inside form -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button :disabled="!timeZoneId" @click="saveAlert">
+      <ion-fab-button :disabled="!timeZoneId" @click="setUserTimeZone">
         <ion-icon :icon="save" />
       </ion-fab-button>
     </ion-fab>
@@ -54,10 +62,11 @@ import {
   IonRadioGroup,
   IonRadio,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
-  modalController,
-  alertController } from "@ionic/vue";
+  modalController
+} from "@ionic/vue";
 import { defineComponent } from "vue";
 import { close, save } from "ionicons/icons";
 import { useStore } from "@/store";
@@ -81,6 +90,7 @@ export default defineComponent({
     IonRadioGroup,
     IonRadio,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar 
   },
@@ -89,32 +99,14 @@ export default defineComponent({
       queryString: '',
       filteredTimeZones: [],
       timeZones: [],
-      timeZoneId: ''
+      timeZoneId: '',
+      isLoading: false
     }
   },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true });
     },
-    async saveAlert() {
-      const message = this.$t("Are you sure you want to change the time zone to?", { timeZoneId: this.timeZoneId });
-      const alert = await alertController.create({
-        header: this.$t("Update time zone"),
-        message,
-        buttons: [
-          {
-            text: this.$t("Cancel"),
-          },
-          {
-            text: this.$t("Confirm"),
-            handler: () => {
-              this.setUserTimeZone();
-            }
-          }
-        ],
-      });
-      return alert.present();
-    },
     preventSpecialCharacters($event: any) {
       // Searching special characters fails the API, hence, they must be omitted
       if(/[`!@#$%^&*()_+\-=\\|,.<>?~]/.test($event.key)) $event.preventDefault();
@@ -126,22 +118,28 @@ export default defineComponent({
       });
     },
     async getAvailableTimeZones() {
-      const resp = await UserService.getAvailableTimeZones()
-      if(resp.status === 200 && !hasError(resp)) {
-        // We are filtering valid the timeZones coming with response here
-        this.timeZones = resp.data.filter((timeZone: any) => {
-          return DateTime.local().setZone(timeZone.id).isValid;
-        });
-        this.findTimeZone();
+      this.isLoading = true;
+      try {
+        const resp = await UserService.getAvailableTimeZones()
+        if(resp.status === 200 && !hasError(resp)) {
+          // We are filtering valid the timeZones coming with response here
+          this.timeZones = resp.data.filter((timeZone: any) => {
+            return DateTime.local().setZone(timeZone.id).isValid;
+          });
+          this.findTimeZone();
+        }
+      } catch(err) {
+        console.error(err)
       }
+      this.isLoading = false;
     },
     async selectSearchBarText(event: any) {
       const element = await event.target.getInputElement()
       element.select();
     },
     async setUserTimeZone() {
       await this.store.dispatch("user/setUserTimeZone", {
-        "timeZoneId": this.timeZoneId
+        "tzId": this.timeZoneId
       })
       this.closeModal()
     }