Oct 19 fixes (#9234)

* Add more checks for user achievements

* Began to add ajax request for bailey

* Prevented purchase of locked item

* Refactored notifications to have unique id and use actions

* Added feature banner when gear is bought

* Removed debug code

* Mark group notifications as read

* Fixed lint issues

* Added gem icon to purchase all

website/client/app.vue

@@ -172,7 +172,7 @@ export default {
           return Promise.resolve(error);
         }
 
-        this.$store.state.notificationStore.push({
+        this.$store.dispatch('snackbars:add', {
           title: 'Habitica',
           text: error.response.data.message,
           type: 'error',

website/client/components/achievements/newStuff.vue

@@ -22,6 +22,7 @@
 </style>
 
 <script>
+  // import axios from 'axios';
   import bModal from 'bootstrap-vue/lib/components/modal';
   import { mapState } from 'client/libs/store';
   import markdown from 'client/directives/markdown';
@@ -38,6 +39,16 @@
     directives: {
       markdown,
     },
+    mounted () {
+      this.$root.$on('show::modal', async (modalId) => {
+        if (modalId !== 'new-stuff') return;
+        // Request the lastest news, but not locally incase they don't refresh
+        // let response = await axios.get('/static/new-stuff');
+      });
+    },
+    destroyed () {
+      this.$root.$off('show::modal');
+    },
     methods: {
       close () {
         this.$root.$emit('hide::modal', 'new-stuff');

website/client/components/creatorIntro.vue

@@ -58,8 +58,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='item.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!userOwnsSet("shirt", specialShirtKeys)')
-            button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("shirt", specialShirtKeys)', @click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }}
     #skin.section.customize-section(v-if='activeTopPage === "skin"')
       .row.sub-menu.col-6.offset-3.text-center
         .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
@@ -77,8 +80,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-        .col-12.text-center
+        .col-12.text-center(v-if='!hideSet(set) && !userOwnsSet("skin", set.keys)')
-          button.btn.btn-secondary.purchase-all(v-if='!hideSet(set) && !userOwnsSet("skin", set.keys)', @click='unlock(`skin.${set.keys.join(",skin.")}`)') {{ $t('purchaseAll') }}
+          .gem-lock
+            .svg-icon.gem(v-html='icons.gem')
+            span 5
+          button.btn.btn-secondary.purchase-all(@click='unlock(`skin.${set.keys.join(",skin.")}`)') {{ $t('purchaseAll') }}
     #hair.section.customize-section(v-if='activeTopPage === "hair"')
       .row.sub-menu.text-center
         .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
@@ -104,8 +110,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")')
-            button.btn.btn-secondary.purchase-all(v-if='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")', @click='unlock(`hair.color.${set.keys.join(",hair.color.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.color.${set.keys.join(",hair.color.")}`)') {{ $t('purchaseAll') }}
       #style.row(v-if='activeSubPage === "style"')
         .col-12.customize-options(v-if='editing')
           .head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
@@ -115,8 +124,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair3Keys, "base")')
-            button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair3Keys, "base")', @click='unlock(`hair.base.${baseHair3Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.base.${baseHair3Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in baseHair4',
             :class='{active: option.active, locked: option.locked}')
@@ -124,8 +136,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair4Keys, "base")')
-            button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair4Keys, "base")', @click='unlock(`hair.base.${baseHair4Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.base.${baseHair4Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
       #bangs.row(v-if='activeSubPage === "bangs"')
         .col-12.customize-options
           .head_0.option(@click='set({"preferences.hair.bangs": 0})',
@@ -146,8 +161,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair2Keys, "base")')
-            button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair2Keys, "base")', @click='unlock(`hair.base.${baseHair2Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.base.${baseHair2Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
       #facialhair.row(v-if='activeSubPage === "facialhair"')
         .col-12.customize-options(v-if='editing')
           .head_0.option(@click='set({"preferences.hair.beard": 0})', :class="[{ active: user.preferences.hair.beard === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
@@ -157,8 +175,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair5Keys, "beard")')
-            button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair5Keys, "beard")', @click='unlock(`hair.beard.${baseHair5Keys.join(",hair.beard.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.beard.${baseHair5Keys.join(",hair.beard.")}`)') {{ $t('purchaseAll') }}
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in baseHair6',
             :class='{active: option.active, locked: option.locked}')
@@ -166,8 +187,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair6Keys, "mustache")')
-            button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair6Keys, "mustache")', @click='unlock(`hair.mustache.${baseHair6Keys.join(",hair.mustache.")}`)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.mustache.${baseHair6Keys.join(",hair.mustache.")}`)') {{ $t('purchaseAll') }}
     #extra.section.container.customize-section(v-if='activeTopPage === "extra"')
       .row.sub-menu
         .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
@@ -191,8 +215,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             .gem-lock(v-if='option.locked')
               .svg-icon.gem(v-html='icons.gem')
               span 2
-          .col-12.text-center
+          .col-12.text-center(v-if='!animalEarsOwned')
-            button.btn.btn-secondary.purchase-all(v-if='!animalEarsOwned', @click='unlock(animalEarsUnlockString)') {{ $t('purchaseAll') }}
+            .gem-lock
+              .svg-icon.gem(v-html='icons.gem')
+              span 5
+            button.btn.btn-secondary.purchase-all(@click='unlock(animalEarsUnlockString)') {{ $t('purchaseAll') }}
       #wheelchairs.row(v-if='activeSubPage === "wheelchair"')
         .col-12.customize-options
           .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
@@ -258,7 +285,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
           .col-12.text-center(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"')
             .gem-amount
               .svg-icon.gem(v-html='icons.gem')
-              span 15
+              span 5
             button.btn.btn-secondary(@click='unlock(setKeys("background", set.items))') Purchase Set
 
   .container.interests-section(v-if='modalPage === 3 && !editing')
@@ -531,28 +558,35 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     margin-bottom: .5em;
     margin-right: .5em;
 
-    .gem-lock {
-      .svg-icon {
-        width: 16px;
-      }
-
-      span {
-        color: #24cc8f;
-        font-weight: bold;
-        margin-left: .5em;
-      }
-
-      .svg-icon, span {
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-
     .sprite.customize-option {
       margin: 0 auto;
     }
   }
 
+  .text-center .gem-lock {
+    display: inline-block;
+    margin-right: 1em;
+    margin-bottom: 1.6em;
+    vertical-align: bottom;
+  }
+
+  .gem-lock {
+    .svg-icon {
+      width: 16px;
+    }
+
+    span {
+      color: #24cc8f;
+      font-weight: bold;
+      margin-left: .5em;
+    }
+
+    .svg-icon, span {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+
   .option.active {
     border: 4px solid $purple-200;
     border-radius: 4px;

website/client/components/notificationMenu.vue

@@ -42,16 +42,11 @@ div.item-with-icon.item-notifications.dropdown
         span {{message.name}}
       span.clear-button(@click='clearMessages(message.key)', :popover="$t('clear')",
         popover-placement='right', popover-trigger='mouseenter', popover-append-to-body='true') Clear
-    a.dropdown-item(v-for='(notification, index) in user.groupNotifications', @click='viewGroupApprovalNotification(notification, index, true)')
+    a.dropdown-item(v-for='notification in groupNotifications', :key='notification.id')
       span(:class="groupApprovalNotificationIcon(notification)")
-      span
+      span {{notification.data.message}}
-        | {{notification.data.message}}
+      span.clear-button(@click='viewGroupApprovalNotification(notification)', :popover="$t('clear')",
-      a.dropdown-item(@click='viewGroupApprovalNotification(notification, $index)',
+        popover-placement='right', popover-trigger='mouseenter', popover-append-to-body='true') Clear
-        :popover="$t('clear')",
-        popover-placement='right',
-        popover-trigger='mouseenter',
-        popover-append-to-body='true')
-        span.glyphicon.glyphicon-remove-circle
 </template>
 
 <style lang='scss' scoped>
@@ -159,6 +154,7 @@ div.item-with-icon.item-notifications.dropdown
 </style>
 
 <script>
+import axios from 'axios';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 
@@ -194,6 +190,9 @@ export default {
       }
       return userNewMessages;
     },
+    groupNotifications () {
+      return this.$store.state.groupNotifications;
+    },
     notificationsCount () {
       let count = 0;
 
@@ -217,6 +216,8 @@ export default {
         count += Object.keys(this.userNewMessages).length;
       }
 
+      count += this.groupNotifications.length;
+
       return count;
     },
   },
@@ -236,8 +237,8 @@ export default {
         return unallocatedValue;
       } else if (!isEmpty(user.newMessages)) {
         return messageValue;
-      } else if (!isEmpty(user.groupNotifications)) {
+      } else if (!isEmpty(this.groupNotifications)) {
-        let groupNotificationTypes = map(user.groupNotifications, 'type');
+        let groupNotificationTypes = map(this.groupNotifications, 'type');
         if (groupNotificationTypes.indexOf('GROUP_TASK_APPROVAL') !== -1) {
           return groupApprovalRequested;
         } else if (groupNotificationTypes.indexOf('GROUP_TASK_APPROVED') !== -1) {
@@ -303,11 +304,14 @@ export default {
     hasNoNotifications () {
       return this.selectNotificationValue(false, false, false, false, false, true, false, false);
     },
-    viewGroupApprovalNotification (notification, index, navigate) {
+    viewGroupApprovalNotification (notification) {
-      // @TODO: USe notifications: User.readNotification(notification.id);
+      this.$store.state.groupNotifications = this.groupNotifications.filter(groupNotif => {
-      this.user.groupNotifications.splice(index, 1);
+        return groupNotif.id !== notification.id;
-      return navigate; // @TODO: remove
+      });
-      // @TODO: this.$router.go if (navigate) go('options.social.guilds.detail', {gid: notification.data.groupId});
+
+      axios.post('/api/v3/notifications/read', {
+        notificationIds: [notification.id],
+      });
     },
     groupApprovalNotificationIcon (notification) {
       if (notification.type === 'GROUP_TASK_APPROVAL') {

website/client/components/notifications.vue

@@ -276,8 +276,8 @@ export default {
       if (after === before || after === false) return;
       this.$root.$emit('show::modal', 'armoire-empty');
     },
-    questCompleted (after) {
+    questCompleted () {
-      if (!after) return;
+      if (!this.questCompleted) return;
       this.$root.$emit('show::modal', 'quest-completed');
     },
     invitedToQuest (after) {
@@ -291,6 +291,26 @@ export default {
       this.$store.dispatch('user:fetch'),
       this.$store.dispatch('tasks:fetchUserTasks'),
     ]).then(() => {
+      this.checkUserAchievements();
+
+      // @TODO: This is a timeout to ensure dom is loaded
+      window.setTimeout(() => {
+        this.initTour();
+        if (this.user.flags.tour.intro === this.TOUR_END || !this.user.flags.welcomed) return;
+        this.goto('intro', 0);
+      }, 2000);
+
+      this.runYesterDailies();
+
+      // Do not remove the event listener as it's live for the entire app lifetime
+      document.addEventListener('mousemove', () => this.checkNextCron());
+      document.addEventListener('touchstart', () => this.checkNextCron());
+      document.addEventListener('mousedown', () => this.checkNextCron());
+      document.addEventListener('keydown', () => this.checkNextCron());
+    });
+  },
+  methods: {
+    checkUserAchievements () {
       // List of prompts for user on changes. Sounds like we may need a refactor here, but it is clean for now
       if (this.user.flags.newStuff) {
         this.$root.$emit('show::modal', 'new-stuff');
@@ -313,24 +333,7 @@ export default {
       if (this.userClassSelect) {
         this.$root.$emit('show::modal', 'choose-class');
       }
-
+    },
-      // @TODO: This is a timeout to ensure dom is loaded
-      window.setTimeout(() => {
-        this.initTour();
-        if (this.user.flags.tour.intro === this.TOUR_END || !this.user.flags.welcomed) return;
-        this.goto('intro', 0);
-      }, 2000);
-
-      this.runYesterDailies();
-
-      // Do not remove the event listener as it's live for the entire app lifetime
-      document.addEventListener('mousemove', () => this.checkNextCron());
-      document.addEventListener('touchstart', () => this.checkNextCron());
-      document.addEventListener('mousedown', () => this.checkNextCron());
-      document.addEventListener('keydown', () => this.checkNextCron());
-    });
-  },
-  methods: {
     showLevelUpNotifications (newlevel) {
       this.lvl();
       this.playSound('Level_Up');
@@ -417,8 +420,7 @@ export default {
       this.scheduleNextCron();
     },
     transferGroupNotification (notification) {
-      if (!this.user.groupNotifications) this.user.groupNotifications = [];
+      this.$store.state.groupNotifications.push(notification);
-      this.user.groupNotifications.push(notification);
     },
     async handleUserNotifications (after) {
       if (!after || after.length === 0 || !Array.isArray(after)) return;
@@ -426,7 +428,7 @@ export default {
       let notificationsToRead = [];
       let scoreTaskNotification = [];
 
-      this.user.groupNotifications = []; // Flush group notifictions
+      this.$store.state.groupNotifications = []; // Flush group notifictions
 
       after.forEach((notification) => {
         if (this.lastShownNotifications.indexOf(notification.id) !== -1) {
@@ -578,6 +580,8 @@ export default {
       }
 
       this.user.notifications = []; // reset the notifications
+
+      this.checkUserAchievements();
     },
   },
 };

website/client/components/payments/amazonModal.vue

@@ -2,8 +2,6 @@
   b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='md')
     h2.text-center Continue with Amazon
     #AmazonPayButton
-    | {{amazonPayments}}
-    | {{amazonLoggedIn}}
     #AmazonPayWallet(v-if="amazonLoggedIn", style="width: 400px; height: 228px;")
     #AmazonPayRecurring(v-if="amazonLoggedIn && amazonPayments.type === 'subscription'",
                         style="width: 400px; height: 140px;")

website/client/components/shops/seasonal/index.vue

@@ -40,6 +40,10 @@
               span.rectangle
               span.text(v-once) {{ $t('featuredset', { name: seasonal.featured.text }) }}
               span.rectangle
+            div.featured-label.with-border(v-else)
+              span.rectangle
+              span.text(v-once) {{ $t('featuredItems') }}
+              span.rectangle
 
             div.items.margin-center
               shopItem(
@@ -264,6 +268,11 @@
   }
 </style>
 
+<style scoped>
+  .margin-center {
+    margin: 0 auto;
+  }
+</style>
 
 <script>
   import {mapState} from 'client/libs/store';

website/client/components/snackbars/notification.vue

@@ -135,9 +135,7 @@ export default {
   },
   watch: {
     show () {
-      setTimeout(() => {
+      this.$store.dispatch('snackbars:remove', this.notification);
-        this.$store.state.notificationStore.splice(0, 1);
-      }, 1000);
     },
   },
   computed: {

website/client/components/snackbars/notifications.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .notifications
-  div(v-for='notification in notifications')
+  div(v-for='notification in notifications', :key='notification.uuid')
     notification(:notification='notification')
 </template>
 

website/client/components/tasks/column.vue

@@ -11,7 +11,7 @@
       ) {{ $t(filter.label) }}
   .tasks-list(ref="tasksWrapper")
     input.quick-add(
-      v-if="isUser", :placeholder="quickAddPlaceholder", 
+      v-if="isUser", :placeholder="quickAddPlaceholder",
       v-model="quickAddText", @keyup.enter="quickAdd",
       ref="quickAdd",
     )
@@ -455,6 +455,8 @@ export default {
       }
     },
     openBuyDialog (rewardItem) {
+      if (rewardItem.locked) return;
+
       // Buy armoire and health potions immediately
       let itemsToPurchaseImmediately = ['potion', 'armoire'];
       if (itemsToPurchaseImmediately.indexOf(rewardItem.key) !== -1) {

website/client/mixins/notifications.js

@@ -65,7 +65,7 @@ export default {
       return round(number, nDigits);
     },
     notify (html, type, icon, sign) {
-      this.notifications.push({
+      this.$store.dispatch('snackbars:add', {
         title: '',
         text: html,
         type,

website/client/store/actions/index.js

@@ -14,6 +14,7 @@ import * as notifications from './notifications';
 import * as tags from './tags';
 import * as hall from './hall';
 import * as shops from './shops';
+import * as snackbars from './snackbars';
 
 // Actions should be named as 'actionName' and can be accessed as 'namespace:actionName'
 // Example: fetch in user.js -> 'user:fetch'
@@ -33,6 +34,7 @@ const actions = flattenAndNamespace({
   tags,
   hall,
   shops,
+  snackbars,
 });
 
 export default actions;

website/client/store/actions/shops.js

@@ -92,7 +92,7 @@ export async function genericPurchase (store, params) {
         }
 
         // @TODO: We might need to abstract notifications to library rather than mixin
-        store.state.notificationStore.push({
+        store.dispatch('snackbars:add', {
           title: '',
           text: isExperience ? item.value : item.dropText,
           type: isExperience ? 'xp' : 'drop',

website/client/store/actions/snackbars.js

@@ -0,0 +1,13 @@
+import uuid from 'uuid';
+
+export function add (store, payload) {
+  let notification = Object.assign({}, payload);
+  notification.uuid = uuid();
+  store.state.notificationStore.push(notification);
+}
+
+export function remove (store, payload) {
+  store.state.notificationStore = store.state.notificationStore.filter(notification => {
+    return notification.uuid !== payload.uuid;
+  });
+}

website/client/store/index.js

@@ -136,6 +136,7 @@ export default function () {
       equipmentDrawerOpen: true,
       recentlyPurchased: {},
       groupPlans: [],
+      groupNotifications: [],
     },
   });