Improved: migrated from moment to luxon for timezones (#92)

package.json

@@ -22,9 +22,8 @@
     "@ionic/vue-router": "^7.6.0",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
+    "luxon": "^3.2.0",
     "mitt": "^2.1.0",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.33",
     "vue": "^3.2.26",
     "vue-i18n": "~9.1.6",
     "vue-router": "^4.0.12",
@@ -33,6 +32,7 @@
   },
   "devDependencies": {
     "@capacitor/cli": "^2.4.7",
+    "@types/luxon": "^3.2.0",
     "@intlify/vue-i18n-loader": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",

src/App.vue

@@ -7,12 +7,26 @@
 <script lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { Settings } from 'luxon';
+import { mapGetters } from 'vuex';
 
 export default defineComponent({
   name: 'App',
   components: {
     IonApp,
     IonRouterOutlet
   },
+  computed: {
+    ...mapGetters({
+      userProfile: 'user/getUserProfile',
+    })
+  },
+  mounted() {
+    // Handles case when user resumes or reloads the app
+    // Luxon timezzone should be set with the user's selected timezone
+    if (this.userProfile && this.userProfile.userTimeZone) {
+      Settings.defaultZone = this.userProfile.userTimeZone;
+    }
+  }
 });
 </script>

src/main.ts

@@ -1,8 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router';
-import moment from 'moment'
-import "moment-timezone";
+import { DateTime } from 'luxon';  
 
 
 import { IonicVue } from '@ionic/vue';
@@ -47,17 +46,19 @@ const app = createApp(App)
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {
-  formatDate(value: any, inFormat?: string, outFormat?: string) {
-    // TODO Use Loxon instead
+  formatDate(value: any, inFormat?: string, outFormat = "MM-dd-yyyy") {
     // TODO Make default format configurable and from environment variables
-    return moment(value, inFormat).format(outFormat ? outFormat : 'MM-DD-YYYY');
+    if(inFormat){
+      return DateTime.fromFormat(value, inFormat).toFormat(outFormat);
+    }
+    return DateTime.fromISO(value).toFormat(outFormat);
   },
-  formatUtcDate(value: any, inFormat?: string, outFormat?: string) {
+  formatUtcDate(value: any, inFormat?: any, outFormat = "MM-dd-yyyy") {
     // TODO Use Loxon instead
     // TODO Make default format configurable and from environment variables
     const userProfile = store.getters['user/getUserProfile'];
     // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
-    return moment.utc(value, inFormat).tz(userProfile.userTimeZone).format(outFormat ? outFormat : 'MM-DD-YYYY');
+    return DateTime.utc(value, inFormat).setZone(userProfile.userTimeZone).toFormat(outFormat)
   },
   getFeature(featureHierarchy: any, featureKey: string) {
     let  featureValue = ''

src/store/modules/user/actions.ts

@@ -5,9 +5,8 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
-import moment from 'moment';
+import { DateTime } from 'luxon'
 import emitter from '@/event-bus'
-import "moment-timezone";
 import { updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import { prepareAppPermissions, setPermissions } from '@/authorization'
 import { OrderService } from '@/services/OrderService'
@@ -88,7 +87,7 @@ const actions: ActionTree<UserState, RootState> = {
   async getProfile ( { commit }) {
     const resp = await UserService.getProfile()
     if (resp.status === 200) {
-      const localTimeZone = moment.tz.guess();
+      const localTimeZone = DateTime.now().zoneName;
       if (resp.data.userTimeZone !== localTimeZone) {
         emitter.emit('timeZoneDifferent', { profileTimeZone: resp.data.userTimeZone, localTimeZone});
       }

src/views/Order.vue

@@ -12,7 +12,7 @@
                 {{ order.customerName }}
                 <p>{{ order.id }}</p>
               </ion-label>
-              <ion-note slot="end">{{ $filters.formatDate(order.orderDate) }}</ion-note>
+              <ion-note slot="end">{{ $filters.formatDate(order.orderDate, "yyyy-MM-dd HH:mm:ss") }}</ion-note>
             </ion-item>
           </ion-card>
 
@@ -609,10 +609,6 @@ export default defineComponent({
         const itemsForCancellation = shipGroup.items.filter((item: any) => item.isItemCancelled);
         const itemsWithFacility = shipGroup.items.filter((item: any) => item.selectedFacilityId)
         const itemsForShipping = shipGroup.items.filter((item: any) => !(item.isItemCancelled || item.selectedFacilityId))
-        console.log(itemsForCancellation);
-        console.log(itemsWithFacility);
-        console.log(itemsForShipping);
-        
 
         if(itemsForCancellation.length) {
           isUpdated = await this.cancelShipGroup(shipGroup, itemsForCancellation)