From 0806391ab89c1c2c462f6081dca0f70d7232e38c Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Tue, 27 Jul 2021 08:23:20 -0500
Subject: [PATCH] feat(teams): Day Start and adjust uncheck wording

---
 .../client/src/assets/scss/create-task.scss   | 94 ++++++++++---------
 .../group-plans/taskInformation.vue           | 84 ++++++++++-------
 website/client/src/components/tasks/user.vue  | 54 +++++------
 website/common/locales/en/groups.json         |  5 +-
 website/server/controllers/api-v3/groups.js   |  7 +-
 5 files changed, 134 insertions(+), 110 deletions(-)

diff --git a/website/client/src/assets/scss/create-task.scss b/website/client/src/assets/scss/create-task.scss
index c97d9afb05..5689228c5f 100644
--- a/website/client/src/assets/scss/create-task.scss
+++ b/website/client/src/assets/scss/create-task.scss
@@ -1,9 +1,47 @@
 .create-task-area {
   position: absolute;
-  right: 24px;
+  right: 12px;
   top: -24px;
   z-index: 998;
   align-items: center;
+
+  .dropdown {
+    border-radius: 2px;
+    box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
+    background-color: $white;
+    margin-top: 2px;
+
+    .dropdown-item:hover {
+      .svg-icon {
+        color: $purple-300;
+      }
+    }
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+      color: $gray-200;
+
+      &.icon-habit {
+        width: 24px;
+        height: 16px;
+      }
+
+      &.icon-daily {
+        width: 24px;
+        height: 20px;
+      }
+
+      &.icon-todo {
+        width: 20px;
+        height: 20px;
+      }
+
+      &.icon-reward {
+        width: 24px;
+        height: 18px;
+      }
+    }
+  }
 }
 
 .slide-tasks-btns-leave-active, .slide-tasks-btns-enter-active {
@@ -18,69 +56,33 @@
 }
 
 .diamond-btn {
-  margin-left: 24px;
+  margin-left: 8px;
   background: $white;
   width: 40px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 4px;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  border-radius: 2px;
+  box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
   cursor: pointer;
   color: $gray-200;
-  transform: rotate(45deg);
 
   &:hover:not(.create-btn) {
     color: $purple-400;
     box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
   }
-
-  .svg-icon {
-    width: 20px;
-    height: 20px;
-    transform: rotate(-45deg);
-
-    &.icon-habit {
-      width: 24px;
-      height: 16px;
-    }
-
-    &.icon-daily {
-      width: 21.6px;
-      height: 18px;
-    }
-
-    &.icon-todo {
-      width: 18px;
-      height: 18px;
-    }
-
-    &.icon-reward {
-      width: 23.4px;
-      height: 18px;
-    }
-  }
 }
 
 .create-btn {
   color: $white;
-  background-color: $green-100;
-  height: 48px;
-  width: 48px;
+  background-color: $purple-200;
+  height: 32px;
+  width: 112px;
 
   .svg-icon {
-    width: 16px;
-    height: 16px;
-    transform: rotate(-45deg);
-    transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
-  }
-
-  &.open {
-    background: $gray-200 !important;
-
-    .svg-icon {
-      transform: rotate(-90deg);
-    }
+    color: $purple-500;
+    width: 10px;
+    height: 10px;
   }
 }
diff --git a/website/client/src/components/group-plans/taskInformation.vue b/website/client/src/components/group-plans/taskInformation.vue
index e5867f8168..e6c1197b14 100644
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -25,32 +25,17 @@
         >
       </div>
       <div
-        v-if="canCreateTasks"
         class="create-task-area d-flex"
       >
-        <transition name="slide-tasks-btns">
-          <div
-            v-if="openCreateBtn"
-            class="d-flex"
-          >
-            <div
-              v-for="type in columns"
-              :key="type"
-              v-b-tooltip.hover.bottom="$t(type)"
-              class="create-task-btn diamond-btn"
-              @click="createTask(type)"
-            >
-              <div
-                class="svg-icon"
-                :class="`icon-${type}`"
-                v-html="icons[type]"
-              ></div>
-            </div>
-          </div>
-        </transition>
+        <div
+          class="day-start d-flex align-items-center"
+          v-html="$t('dayStart', { startTime: groupStartTime } )"
+        >
+        </div>
         <div
           id="create-task-btn"
-          class="create-btn diamond-btn btn btn-success"
+          v-if="canCreateTasks"
+          class="create-btn diamond-btn btn"
           :class="{open: openCreateBtn}"
           @click="openCreateBtn = !openCreateBtn"
         >
@@ -58,14 +43,30 @@
             class="svg-icon"
             v-html="icons.positive"
           ></div>
+          <div class="ml-2"> {{ $t('addTask') }} </div>
         </div>
-        <b-tooltip
-          v-if="!openCreateBtn"
-          target="create-task-btn"
-          placement="bottom"
+        <div
+          v-if="openCreateBtn"
+          class="dropdown"
         >
-          {{ $t('create') }}
-        </b-tooltip>
+          <div
+            v-for="type in columns"
+            :key="type"
+            @click="createTask(type)"
+            class="dropdown-item d-flex pl-2 py-1"
+          >
+            <div class="w-25 d-flex align-items-center justify-content-center">
+              <div
+                class="svg-icon m-auto"
+                :class="`icon-${type}`"
+                v-html="icons[type]"
+              ></div>
+            </div>
+            <div class="w-75 ml-1">
+              {{ $t(type) }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="row">
@@ -95,11 +96,20 @@
   }
 
   .create-task-area {
-    top: 1rem;
-  }
+    top: 1.5rem;
+    right: 2.25rem;
 
-  .tasks-navigation {
-    margin-bottom: 40px;
+    .day-start {
+      height: 2rem;
+      padding: 0.25rem 0.75rem;
+      border-radius: 2px;
+      color: $gray-100;
+      background-color: $gray-600;
+    }
+
+    .dropdown {
+      margin-right: 0.25rem;
+    }
   }
 
   .positive {
@@ -116,6 +126,7 @@ import Vue from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
 import findIndex from 'lodash/findIndex';
 import groupBy from 'lodash/groupBy';
+import moment from 'moment';
 import taskDefaults from '@/../../common/script/libs/taskDefaults';
 import TaskColumn from '../tasks/column';
 import TaskModal from '../tasks/taskModal';
@@ -207,6 +218,15 @@ export default {
       return (this.group.leader && this.group.leader._id === this.user._id)
         || (this.group.managers && Boolean(this.group.managers[this.user._id]));
     },
+    groupStartTime () {
+      if (!this.group || !this.group.cron) return null;
+      const { dayStart, timezoneOffset } = this.group.cron;
+      const meridian = dayStart < 12 ? 'AM' : 'PM';
+      let hour = dayStart % 12;
+      if (!hour) hour = 12;
+      const timezone = moment().utcOffset(-timezoneOffset).format('Z');
+      return `${hour} ${meridian} UTC${timezone}`;
+    },
   },
   watch: {
     // call again the method if the route changes (when this route is already active)
diff --git a/website/client/src/components/tasks/user.vue b/website/client/src/components/tasks/user.vue
index 9e73cbe263..c93c76d5e4 100644
--- a/website/client/src/components/tasks/user.vue
+++ b/website/client/src/components/tasks/user.vue
@@ -160,30 +160,10 @@
             </div>
           </div>
         </div>
-        <div class="create-task-area d-flex">
-          <transition name="slide-tasks-btns">
-            <div
-              v-if="openCreateBtn"
-              class="d-flex"
-            >
-              <div
-                v-for="type in columns"
-                :key="type"
-                v-b-tooltip.hover.bottom="$t(type)"
-                class="create-task-btn diamond-btn"
-                @click="createTask(type)"
-              >
-                <div
-                  class="svg-icon"
-                  :class="`icon-${type}`"
-                  v-html="icons[type]"
-                ></div>
-              </div>
-            </div>
-          </transition>
+        <div class="create-task-area">
           <div
             id="create-task-btn"
-            class="create-btn diamond-btn btn btn-success"
+            class="create-btn diamond-btn btn"
             :class="{open: openCreateBtn}"
             @click="openCreateBtn = !openCreateBtn"
           >
@@ -191,14 +171,30 @@
               class="svg-icon"
               v-html="icons.positive"
             ></div>
+            <div class="ml-2"> {{ $t('addTask') }} </div>
           </div>
-          <b-tooltip
-            v-if="!openCreateBtn"
-            target="create-task-btn"
-            placement="bottom"
+          <div
+            v-if="openCreateBtn"
+            class="dropdown"
           >
-            {{ $t('addTask') }}
-          </b-tooltip>
+            <div
+              v-for="type in columns"
+              :key="type"
+              @click="createTask(type)"
+              class="dropdown-item d-flex pl-2 py-1"
+            >
+              <div class="w-25 d-flex align-items-center justify-content-center">
+                <div
+                  class="svg-icon m-auto"
+                  :class="`icon-${type}`"
+                  v-html="icons[type]"
+                ></div>
+              </div>
+              <div class="w-75 ml-1">
+                {{ $t(type) }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="row tasks-columns">
@@ -345,7 +341,7 @@
   }
 
   .create-task-area {
-    top: -2.5rem;
+    top: 1px;
   }
 
   .drag {
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index dac19498fe..ac91d4774f 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -199,7 +199,7 @@
   "yourTaskHasBeenApproved": "Your task <span class=\"notification-green notification-bold\"><%- taskText %></span> has been approved.",
   "thisTaskApproved": "This task was approved",
   "taskClaimed": "<%- userName %> has claimed the task <span class=\"notification-bold\"><%- taskText %></span>.",
-  "taskNeedsWork": "<span class=\"notification-bold\"><%- managerName %></span> marked <span class=\"notification-bold\"><%- taskText %></span> as needing additional work.",
+  "taskNeedsWork": "<span class=\"notification-bold\"><%- taskText %></span> was unchecked by <span class=\"notification-bold\"><%- managerName %></span>. Your rewards for completing the task were reverted.",
   "userHasRequestedTaskApproval": "<span class=\"notification-bold\"><%- user %></span> requests approval for <span class=\"notification-bold\"><%- taskName %></span>",
   "approve": "Approve",
   "approveTask": "Approve Task",
@@ -363,5 +363,6 @@
   "managerNotes": "Manager's Notes",
   "assignedDateOnly": "Assigned on <strong><%= date %></strong>",
   "assignedDateAndUser": "Assigned by <strong>@<%- username %></strong> on <strong><%= date %></strong>",
-  "claimRewards": "Claim Rewards"
+  "claimRewards": "Claim Rewards",
+  "dayStart": "<strong>Day start</strong>: <%= startTime %>"
 }
diff --git a/website/server/controllers/api-v3/groups.js b/website/server/controllers/api-v3/groups.js
index 5a3bc2424c..2c90dab8f2 100644
--- a/website/server/controllers/api-v3/groups.js
+++ b/website/server/controllers/api-v3/groups.js
@@ -415,8 +415,13 @@ api.getGroup = {
     }
 
     // Instead of populate we make a find call manually because of https://github.com/Automattic/mongoose/issues/3833
-    const leader = await User.findById(groupJson.leader).select(nameFields).exec();
+    const leader = await User.findById(groupJson.leader).select(`${nameFields} preferences.timezoneOffset preferences.dayStart`).exec();
     if (leader) groupJson.leader = leader.toJSON({ minimize: true });
+    if (groupJson.purchased.plan.planId) {
+      groupJson.cron.timezoneOffset = leader.preferences.timezoneOffset;
+      groupJson.cron.dayStart = leader.preferences.dayStart;
+    }
+    delete groupJson.leader.preferences;
 
     res.respond(200, groupJson);
   },