From 2181ab971329f92709451aae645e03c4c6fa5651 Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Thu, 7 Apr 2022 21:37:07 +0200
Subject: [PATCH] Redesign: "Day Start Adjustment"  (#13910)

* Merge Custom Day Start and Timezone into one Component

* ui changes

* change translation text

* typo
---
 .../settings/dayStartAdjustment.vue           | 132 ++++++++++++++++++
 .../client/src/components/settings/site.vue   |  95 +------------
 website/common/locales/en/settings.json       |   6 +-
 3 files changed, 139 insertions(+), 94 deletions(-)
 create mode 100644 website/client/src/components/settings/dayStartAdjustment.vue

diff --git a/website/client/src/components/settings/dayStartAdjustment.vue b/website/client/src/components/settings/dayStartAdjustment.vue
new file mode 100644
index 0000000000..54d312740c
--- /dev/null
+++ b/website/client/src/components/settings/dayStartAdjustment.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <div>
+      <h5>{{ $t('dayStartAdjustment') }}</h5>
+      <div class="mb-4">
+        {{ $t('customDayStartInfo1') }}
+      </div>
+      <h3 v-once>{{ $t('adjustment') }}</h3>
+      <div class="form-horizontal">
+        <div class="form-group">
+          <div class="">
+            <select
+              v-model="newDayStart"
+              class="form-control"
+            >
+              <option
+                v-for="option in dayStartOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.name }}
+              </option>
+            </select>
+          </div>
+          <div>
+            <button
+              class="btn btn-primary full-width mt-3"
+              :disabled="newDayStart === user.preferences.dayStart"
+              @click="openDayStartModal()"
+            >
+              {{ $t('save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-horizontal">
+      <div class="form-group">
+        <small>
+          <p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p>
+          <p v-html="$t('timezoneInfo')"></p>
+        </small>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import moment from 'moment';
+import getUtcOffset from '../../../../common/script/fns/getUtcOffset';
+import { mapState } from '@/libs/store';
+
+export default {
+  name: 'dayStartAdjustment',
+  data () {
+    const dayStartOptions = [];
+    for (let number = 0; number <= 12; number += 1) {
+      const meridian = number < 12 ? 'AM' : 'PM';
+      const hour = number % 12;
+      const timeWithMeridian = `(${hour || 12}:00 ${meridian})`;
+      const option = {
+        value: number,
+        name: `+${number} hours ${timeWithMeridian}`,
+      };
+
+      if (number === 0) {
+        option.name = `Default ${timeWithMeridian}`;
+      }
+
+      dayStartOptions.push(option);
+    }
+
+    return {
+      newDayStart: 0,
+      dayStartOptions,
+    };
+  },
+  mounted () {
+    this.newDayStart = this.user.preferences.dayStart;
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+    timezoneOffsetToUtc () {
+      const offsetString = moment().utcOffset(getUtcOffset(this.user)).format('Z');
+      return `UTC${offsetString}`;
+    },
+    dayStart () {
+      return this.user.preferences.dayStart;
+    },
+  },
+  methods: {
+    async saveDayStart () {
+      this.user.preferences.dayStart = this.newDayStart;
+      await axios.post('/api/v4/user/custom-day-start', {
+        dayStart: this.newDayStart,
+      });
+      // @TODO
+      // Notification.text(response.data.data.message);
+    },
+    openDayStartModal () {
+      const nextCron = this.calculateNextCron();
+      // @TODO: Add generic modal
+      if (!window.confirm(this.$t('sureChangeCustomDayStartTime', { time: nextCron }))) return; // eslint-disable-line no-alert
+      this.saveDayStart();
+      // $rootScope.openModal('change-day-start', { scope: $scope });
+    },
+    calculateNextCron () {
+      let nextCron = moment()
+        .hours(this.newDayStart)
+        .minutes(0)
+        .seconds(0)
+        .milliseconds(0);
+
+      const currentHour = moment().format('H');
+      if (currentHour >= this.newDayStart) {
+        nextCron = nextCron.add(1, 'day');
+      }
+
+      return nextCron.format(`${this.user.preferences.dateFormat.toUpperCase()} @ h:mm a`);
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .full-width {
+    width: 100%;
+  }
+</style>
diff --git a/website/client/src/components/settings/site.vue b/website/client/src/components/settings/site.vue
index 9ee523384a..9abd220234 100644
--- a/website/client/src/components/settings/site.vue
+++ b/website/client/src/components/settings/site.vue
@@ -213,49 +213,7 @@
           {{ $t('enableClass') }}
         </button>
         <hr>
-        <div>
-          <h5>{{ $t('customDayStart') }}</h5>
-          <div class="alert alert-warning">
-            {{ $t('customDayStartInfo1') }}
-          </div>
-          <div class="form-horizontal">
-            <div class="form-group">
-              <div class="col-7">
-                <select
-                  v-model="newDayStart"
-                  class="form-control"
-                >
-                  <option
-                    v-for="option in dayStartOptions"
-                    :key="option.value"
-                    :value="option.value"
-                  >
-                    {{ option.name }}
-                  </option>
-                </select>
-              </div>
-              <div class="col-5">
-                <button
-                  class="btn btn-block btn-primary mt-1"
-                  :disabled="newDayStart === user.preferences.dayStart"
-                  @click="openDayStartModal()"
-                >
-                  {{ $t('saveCustomDayStart') }}
-                </button>
-              </div>
-            </div>
-          </div>
-          <hr>
-        </div>
-        <h5>{{ $t('timezone') }}</h5>
-        <div class="form-horizontal">
-          <div class="form-group">
-            <div class="col-12">
-              <p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p>
-              <p v-html="$t('timezoneInfo')"></p>
-            </div>
-          </div>
-        </div>
+        <day-start-adjustment />
       </div>
     </div>
     <div class="col-sm-6">
@@ -568,16 +526,15 @@
 
 <script>
 import hello from 'hellojs';
-import moment from 'moment';
 import axios from 'axios';
 import debounce from 'lodash/debounce';
 import { mapState } from '@/libs/store';
 import restoreModal from './restoreModal';
 import resetModal from './resetModal';
 import deleteModal from './deleteModal';
+import dayStartAdjustment from './dayStartAdjustment';
 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';
@@ -590,27 +547,15 @@ export default {
     restoreModal,
     resetModal,
     deleteModal,
+    dayStartAdjustment,
   },
   mixins: [notificationsMixin],
   data () {
-    const dayStartOptions = [];
-    for (let number = 0; number < 24; number += 1) {
-      const meridian = number < 12 ? 'AM' : 'PM';
-      const hour = number % 12;
-      const option = {
-        value: number,
-        name: `${hour || 12}:00 ${meridian}`,
-      };
-      dayStartOptions.push(option);
-    }
-
     return {
       SOCIAL_AUTH_NETWORKS: [],
       party: {},
       // Made available by the server as a script
       availableFormats: ['MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy/MM/dd'],
-      dayStartOptions,
-      newDayStart: 0,
       temporaryDisplayName: '',
       usernameUpdates: { username: '' },
       emailUpdates: {},
@@ -634,13 +579,6 @@ export default {
     availableAudioThemes () {
       return ['off', ...this.content.audioThemes];
     },
-    timezoneOffsetToUtc () {
-      const offsetString = moment().utcOffset(getUtcOffset(this.user)).format('Z');
-      return `UTC${offsetString}`;
-    },
-    dayStart () {
-      return this.user.preferences.dayStart;
-    },
     hasClass () {
       return this.$store.getters['members:hasClass'](this.user);
     },
@@ -690,7 +628,6 @@ export default {
     this.SOCIAL_AUTH_NETWORKS = SUPPORTED_SOCIAL_NETWORKS;
     // @TODO: We may need to request the party here
     this.party = this.$store.state.party;
-    this.newDayStart = this.user.preferences.dayStart;
     this.usernameUpdates.username = this.user.auth.local.username || null;
     this.temporaryDisplayName = this.user.profile.name;
     this.emailUpdates.newEmail = this.user.auth.local.email || null;
@@ -790,32 +727,6 @@ export default {
         return false;
       });
     },
-    calculateNextCron () {
-      let nextCron = moment().hours(this.newDayStart).minutes(0).seconds(0)
-        .milliseconds(0);
-
-      const currentHour = moment().format('H');
-      if (currentHour >= this.newDayStart) {
-        nextCron = nextCron.add(1, 'day');
-      }
-
-      return nextCron.format(`${this.user.preferences.dateFormat.toUpperCase()} @ h:mm a`);
-    },
-    openDayStartModal () {
-      const nextCron = this.calculateNextCron();
-      // @TODO: Add generic modal
-      if (!window.confirm(this.$t('sureChangeCustomDayStartTime', { time: nextCron }))) return; // eslint-disable-line no-alert
-      this.saveDayStart();
-      // $rootScope.openModal('change-day-start', { scope: $scope });
-    },
-    async saveDayStart () {
-      this.user.preferences.dayStart = this.newDayStart;
-      await axios.post('/api/v4/user/custom-day-start', {
-        dayStart: this.newDayStart,
-      });
-      // @TODO
-      // Notification.text(response.data.data.message);
-    },
     async changeLanguage (e) {
       const newLang = e.target.value;
       this.user.preferences.language = newLang;
diff --git a/website/common/locales/en/settings.json b/website/common/locales/en/settings.json
index 1a971676ab..f1147f768d 100644
--- a/website/common/locales/en/settings.json
+++ b/website/common/locales/en/settings.json
@@ -40,10 +40,12 @@
     "xml": "(XML)",
     "json": "(JSON)",
     "customDayStart": "Custom Day Start",
+    "adjustment": "Adjustment",
+    "dayStartAdjustment": "Day Start Adjustment",
     "sureChangeCustomDayStartTime": "Are you sure you want to change your Custom Day Start time? Your Dailies will next reset the first time you use Habitica after <%= time %>. Make sure you have completed your Dailies before then!",
     "customDayStartHasChanged": "Your custom day start has changed.",
     "nextCron": "Your Dailies will next reset the first time you use Habitica after <%= time %>. Make sure you have completed your Dailies before this time!",
-    "customDayStartInfo1": "Habitica defaults to check and reset your Dailies at midnight in your own time zone each day. You can customize that time here.",
+    "customDayStartInfo1": "Habitica checks and resets your Dailies at midnight in your own time zone each day. You can adjust when that happens past the default time here.",
     "misc": "Misc",
     "showHeader": "Show Header",
     "changePass": "Change Password",
@@ -166,7 +168,7 @@
     "amazonPayments": "Amazon Payments",
     "amazonPaymentsRecurring": "Ticking the checkbox below is necessary for your subscription to be created. It allows your Amazon account to be used for ongoing payments for <strong>this</strong> subscription. It will not cause your Amazon account to be automatically used for any future purchases.",
     "timezone": "Time Zone",
-    "timezoneUTC": "Habitica uses the time zone set on your PC, which is: <strong><%= utc %></strong>",
+    "timezoneUTC": "Your time zone is set by your computer, which is: <strong><%= utc %></strong>",
     "timezoneInfo": "If that time zone is wrong, first reload this page using your browser's reload or refresh button to ensure that Habitica has the most recent information. If it is still wrong, adjust the time zone on your PC and then reload this page again.<br><br> <strong>If you use Habitica on other PCs or mobile devices, the time zone must be the same on them all.</strong> If your Dailies have been resetting at the wrong time, repeat this check on all other PCs and on a browser on your mobile devices.",
     "push": "Push",
     "about": "About",