feat(onboarding): welcome modal

website/client/src/components/group-plans/groupPlansUpdateModal.vue

@@ -0,0 +1,203 @@
+<template>
+  <b-modal
+    id="group-plans-update"
+    title="New Shared Task Board"
+    size="lg"
+    hide-footer="hide-footer"
+  >
+    <div
+      slot="modal-header"
+      class="w-100 d-flex pt-2 justify-content-center"
+    >
+      <h2
+        class="mx-auto mt-4"
+        v-once
+      >
+        {{ $t('newGroupsWelcome') }}
+      </h2>
+      <div
+        class="svg-icon color close-x ml-auto my-auto"
+        aria-hidden="true"
+        tabindex="0"
+        @click="close()"
+        @keypress.enter="close()"
+        v-html="icons.close"
+      ></div>
+      <img
+        class="task-columns"
+        src="~@/assets/images/group-plans/task-columns.png"
+        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
+          ~@/assets/images/group-plans/task-columns@3x.png 3x"
+      >
+    </div>
+    <div
+      class="d-flex flex-column justify-content-center p-4"
+    >
+      <div class="d-flex align-items-center justify-content-center mb-3">
+        <div
+          class="svg-icon sparkles my-auto mr-3"
+          v-html="icons.sparkles"
+        >
+        </div>
+        <h3
+          class="my-auto"
+          v-once
+        >
+          {{ $t('newGroupsWhatsNew') }}
+        </h3>
+        <div
+          class="svg-icon sparkles my-auto ml-3 flip-x"
+          v-html="icons.sparkles"
+        >
+        </div>
+      </div>
+      <ul
+        class="mb-4 px-4"
+      >
+        <li>{{ $t('newGroupsBullet01') }}</li>
+        <li>{{ $t('newGroupsBullet02') }}</li>
+        <li>{{ $t('newGroupsBullet03') }}</li>
+        <li>{{ $t('newGroupsBullet04') }}</li>
+        <li>{{ $t('newGroupsBullet05') }}</li>
+        <li>{{ $t('newGroupsBullet06') }}</li>
+        <li>{{ $t('newGroupsBullet07') }}</li>
+        <li>{{ $t('newGroupsBullet08') }}</li>
+        <li>{{ $t('newGroupsBullet09') }}</li>
+        <li>{{ $t('newGroupsBullet10') }}
+          <ul class="p-0">
+            <li v-html="$t('newGroupsBullet10a')"></li>
+            <li v-html="$t('newGroupsBullet10b')"></li>
+            <li v-html="$t('newGroupsBullet10c')"></li>
+          </ul>
+        </li>
+      </ul>
+      <div
+        class="mx-auto"
+        v-html="$t('newGroupsVisitFAQ')"
+      ></div>
+      <div
+        class="mx-auto"
+      >
+        {{ $t('newGroupsEnjoy') }}
+      </div>
+    <button
+      class="btn btn-primary mt-4 mb-1 mx-auto"
+      @click="close()"
+      @keypress.enter="close()"
+    >
+      {{ $t('getStarted') }}
+    </button>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  #group-plans-update {
+    overflow-y: hidden;
+
+    .modal-content {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border: none;
+      box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
+    }
+
+    .modal-dialog {
+      max-width: 566px;
+      margin-top: 50vh;
+      transform: translateY(-50%);
+    }
+
+    .modal-header {
+      background-image: linear-gradient(64deg, $purple-200, $purple-300 55%);
+      height: 136px;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+    }
+
+    .modal-header, .modal-body, .modal-footer {
+      padding: 0px;
+      border: none;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+  h2 {
+    color: $white;
+    line-height: 28px;
+  }
+
+  li {
+    padding-left: 0.75rem;
+  }
+
+  ul {
+    line-height: 24px;
+    list-style-type: square;
+    li ul {
+      list-style-type: none;
+      li::before {
+        margin-right: 1rem;
+        font-size: 16px;
+        content: '▫';
+      }
+    }
+  }
+
+  .btn-primary {
+    width: max-content;
+  }
+
+  .close-x {
+    color: $purple-400;
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    opacity: 0.75;
+    cursor: pointer;
+    right: 18px;
+    top: 18px;
+
+    &:hover, &:focus {
+      opacity: 1;
+    }
+  }
+
+  .sparkles {
+    width: 32px;
+    height: 17px;
+
+    &.flip-x {
+      transform: scaleX(-1);
+    }
+  }
+
+  .task-columns {
+    position: absolute;
+    top: 84px;
+  }
+</style>
+
+<script>
+import closeIcon from '@/assets/svg/close.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: closeIcon,
+        sparkles,
+      }),
+    };
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'group-plans-update');
+    },
+  },
+};
+</script>

website/client/src/components/notifications.vue

@@ -32,11 +32,12 @@
     />
     <onboarding-complete />
     <first-drops />
+    <group-plans-update />
   </div>
 </template>
 
 <style lang='scss'>
-  .introjs-helperNumberLayer, .introjs-bullets {
+  .introjs-helperNumberLayer, .introjs-bullets, .introjs-skipbutton {
     display: none;
   }
 
@@ -62,9 +63,9 @@
     .npc_justin_textbox {
       position: absolute;
       right: 1em;
-      top: -3.6em;
+      top: -55px;
       width: 48px;
-      height: 52px;
+      height: 51px;
       background-image: url('~@/assets/images/justin_textbox.png');
     }
   }
@@ -95,7 +96,7 @@
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12) !important;
   }
 
-  .introjs-skipbutton.btn-primary, .introjs-donebutton.btn-primary {
+  .introjs-donebutton.btn-primary {
     color: #fff;
   }
 </style>
@@ -142,6 +143,7 @@ import loginIncentives from './achievements/login-incentives';
 import onboardingComplete from './achievements/onboardingComplete';
 import verifyUsername from './settings/verifyUsername';
 import firstDrops from './achievements/firstDrops';
+import groupPlansUpdate from './group-plans/groupPlansUpdateModal';
 
 const NOTIFICATIONS = {
   // general notifications
@@ -268,6 +270,7 @@ export default {
     genericAchievement,
     onboardingComplete,
     firstDrops,
+    groupPlansUpdate,
   },
   mixins: [notifications, guide],
   data () {

website/client/src/mixins/guide.js

@@ -136,8 +136,8 @@ export default {
         case 'patrons': return this.goto('hall', 0);
         case 'items': return this.goto('market', 0);
         case 'stable': return this.goto('pets', 0);
-        // @TODO: same page now case 'stable':     return this.goto('mounts', 0);
         case 'equipment': return this.goto('equipment', 0);
+        case 'groupPlanDetailTaskInformation': return this.alternativeModal('groupPlans', 'group-plans-update');
       }
 
       return null;
@@ -172,6 +172,10 @@ export default {
         this.markTourComplete(chapter);
       });
     },
+    alternativeModal (chapter, modal) {
+      this.$root.$emit('bv::show::modal', modal);
+      this.markTourComplete(chapter);
+    },
     markTourComplete (chapter) {
       const ups = {};
       const lastKnownStep = this.user.flags.tour[chapter];

website/common/locales/en/groups.json

@@ -370,5 +370,22 @@
   "viewStatus": "Status",
   "lastCompleted": "Last completed",
   "you": "<strong>You</strong>",
-  "chatTemporarilyUnavailable": "Chat is temporarily unavailable. Please try again later."
+  "chatTemporarilyUnavailable": "Chat is temporarily unavailable. Please try again later.",
+  "newGroupsWelcome": "Welcome to the New Shared Task Board!",
+  "newGroupsWhatsNew": "Check Out What's New:",
+  "newGroupsBullet01": "Interact with tasks directly from the shared task board",
+  "newGroupsBullet02": "Anyone can complete an unassigned task",
+  "newGroupsBullet03": "Shared tasks reset at the same time for everyone for easier collaboration",
+  "newGroupsBullet04": "Shared Dailies will not cause damage when missed or appear in the Record Yesterday’s Activity prompt",
+  "newGroupsBullet05": "Shared tasks will degrade in color if left incomplete to help track progress",
+  "newGroupsBullet06": "The task status view allows you to quickly see which assignee has completed a task",
+  "newGroupsBullet07": "Toggle the ability to display the shared tasks on your personal task board",
+  "newGroupsBullet08": "The group leader and managers can quickly add tasks from the top of the task columns",
+  "newGroupsBullet09": "A shared task can be unchecked to show it still needs work",
+  "newGroupsBullet10": "Assignment status determines completion condition:",
+  "newGroupsBullet10a": "<strong>Leave a task unassigned</strong> if any member can complete it",
+  "newGroupsBullet10b": "<strong>Assign a task to one member</strong> so only they can complete it",
+  "newGroupsBullet10c": "<strong>Assign a task to multiple members</strong> if they all need to complete it",
+  "newGroupsVisitFAQ": "Visit the <a href='/static/faq#group-plans'>FAQ</a> from the Help dropdown for more guidance.",
+  "newGroupsEnjoy": "We hope you enjoy the new Group Plans experience!"
 }

website/server/models/user/schema.js

@@ -236,6 +236,7 @@ export default new Schema({
       mounts: { $type: Number, default: -1 },
       hall: { $type: Number, default: -1 },
       equipment: { $type: Number, default: -1 },
+      groupPlans: { $type: Number, default: -1 },
     },
     tutorial: {
       common: {