Move from deprecated moment#zone to moment#utcOffset (#12207)

* Issue 10209 - Remove read usages of zone

* Issue 10209 - Add coverage on daysSince and startOfDay cron utility functions

* Issue 10209 - Add unit test for daysUserHasMissed method

* Issue 10209 - Remove usages of deprecated `moment.js#zone` method.

* Issue 10209 - Add helper function to centralise logic

Also simplify timezoneOffsetToUtc function in site.vue

* Issue 10209 - Also add getUtcOffset as method on user

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/app.vue

@@ -297,7 +297,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(['isUserLoggedIn', 'browserTimezoneOffset', 'isUserLoaded', 'notificationsRemoved']),
+    ...mapState(['isUserLoggedIn', 'browserTimezoneUtcOffset', 'isUserLoaded', 'notificationsRemoved']),
     ...mapState({ user: 'user.data' }),
     isStaticPage () {
       return this.$route.meta.requiresLogin === false;
@@ -493,9 +493,10 @@ export default {
         this.hideLoadingScreen();
 
         // Adjust the timezone offset
-        if (this.user.preferences.timezoneOffset !== this.browserTimezoneOffset) {
+        const browserTimezoneOffset = -this.browserTimezoneUtcOffset;
+        if (this.user.preferences.timezoneOffset !== browserTimezoneOffset) {
           this.$store.dispatch('user:set', {
-            'preferences.timezoneOffset': this.browserTimezoneOffset,
+            'preferences.timezoneOffset': browserTimezoneOffset,
           });
         }
 

website/client/src/components/settings/site.vue

@@ -559,6 +559,7 @@ import resetModal from './resetModal';
 import deleteModal from './deleteModal';
 import { SUPPORTED_SOCIAL_NETWORKS } from '@/../../common/script/constants';
 import changeClass from '@/../../common/script/ops/changeClass';
+import getUtcOffset from '@/../../common/script/fns/getUtcOffset';
 import notificationsMixin from '../../mixins/notifications';
 import sounds from '../../libs/sounds';
 import { buildAppleAuthUrl } from '../../libs/auth';
@@ -616,17 +617,8 @@ export default {
       return ['off', ...this.content.audioThemes];
     },
     timezoneOffsetToUtc () {
-      let offset = this.user.preferences.timezoneOffset;
-      const sign = offset > 0 ? '-' : '+';
-
-      offset = Math.abs(offset) / 60;
-
-      const hour = Math.floor(offset);
-
-      const minutesInt = (offset - hour) * 60;
-      const minutes = minutesInt < 10 ? `0${minutesInt}` : minutesInt;
-
-      return `UTC${sign}${hour}:${minutes}`;
+      const offsetString = moment().utcOffset(getUtcOffset(this.user)).format('Z');
+      return `UTC${offsetString}`;
     },
     dayStart () {
       return this.user.preferences.dayStart;

website/client/src/libs/auth.js

@@ -8,13 +8,14 @@ export function setUpAxios (AUTH_SETTINGS) { // eslint-disable-line import/prefe
     AUTH_SETTINGS = JSON.parse(AUTH_SETTINGS); // eslint-disable-line no-param-reassign
   }
 
-  const browserTimezoneOffset = moment().zone();
+  const browserTimezoneUtcOffset = moment().utcOffset();
 
   if (AUTH_SETTINGS.auth && AUTH_SETTINGS.auth.apiId && AUTH_SETTINGS.auth.apiToken) {
     axios.defaults.headers.common['x-api-user'] = AUTH_SETTINGS.auth.apiId;
     axios.defaults.headers.common['x-api-key'] = AUTH_SETTINGS.auth.apiToken;
 
-    axios.defaults.headers.common['x-user-timezoneOffset'] = browserTimezoneOffset;
+    // Communicate in "old" timezone variant for backwards compatibility
+    axios.defaults.headers.common['x-user-timezoneOffset'] = -browserTimezoneUtcOffset;
 
     return true;
   }

website/client/src/store/index.js

@@ -17,8 +17,8 @@ const IS_TEST = process.env.NODE_ENV === 'test'; // eslint-disable-line no-proce
 // before trying to load data
 let isUserLoggedIn = false;
 
-// eg, 240 - this will be converted on server as -(offset/60)
-const browserTimezoneOffset = moment().zone();
+// eg, -240 - this will be converted on server as (offset/60)
+const browserTimezoneUtcOffset = moment().utcOffset();
 
 axios.defaults.headers.common['x-client'] = 'habitica-web';
 
@@ -71,7 +71,7 @@ export default function () {
       // store the timezone offset in case it's different than the one in
       // user.preferences.timezoneOffset and change it after the user is synced
       // in app.vue
-      browserTimezoneOffset,
+      browserTimezoneUtcOffset,
       tasks: asyncResourceFactory(), // user tasks
       // @TODO use asyncresource?
       completedTodosStatus: 'NOT_LOADED',