Client Fixes (#9120)

* unduplicate logout code

* re-enable debug menu

* fix pets badge and equipping mounts

* close gift modal after sending gems

* armoire notifications

website/client/app.vue

@@ -147,11 +147,7 @@ export default {
         // Check for conditions to reset the user auth
         const invalidUserMessage = [this.$t('invalidCredentials'), 'Missing authentication headers.'];
         if (invalidUserMessage.indexOf(error.response.data.message) !== -1) {
-          localStorage.removeItem('habit-mobile-settings');
-          localStorage.removeItem('hello');
-          this.$store.state.isUserLoggedIn = false;
-          window.location.href = '/static/home';
-          return Promise.reject(error);
+          this.$store.dispatch('auth:logout');
         }
 
         // Don't show errors from getting user details. These users have delete their account,

website/client/components/achievements/questInvitation.vue

@@ -49,7 +49,6 @@ import bModal from 'bootstrap-vue/lib/components/modal';
 
 import quests from 'common/script/content/quests';
 import { mapState } from 'client/libs/store';
-import revive from '../../../common/script/ops/revive';
 import percent from '../../../common/script/libs/percent';
 import {maxHealth} from '../../../common/script/index';
 
@@ -73,11 +72,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('hide::modal', 'death');
-    },
-    revive () {
-      // @TODO: Post
-      revive(this.user);
+      this.$root.$emit('hide::modal', 'quest-invitation');
     },
   },
 };

website/client/components/appFooter.vue

@@ -82,7 +82,7 @@
     .row
       .col-4
         | © 2017 Habitica. All rights reserved.
-        // .debug.float-left(v-if="!IS_PRODUCTION && isUserLoaded")
+        .debug.float-left(v-if="!IS_PRODUCTION && isUserLoaded")
           button.btn.btn-primary(@click="debugMenuShown = !debugMenuShown") Toggle Debug Menu
           .debug-group(v-if="debugMenuShown")
             a.btn.btn-default(@click="setHealthLow()") Health = 1

website/client/components/creatorIntro.vue

@@ -1350,7 +1350,15 @@ export default {
         cost = fullSet ? 1.25 : 0.5; // (Hair, skin, etc) 5G per set, 2G per individual
       }
 
-      let loginIncentives = ['background.blue', 'background.green', 'background.red', 'background.purple', 'background.yellow', 'background.violet'];
+      let loginIncentives = [
+        'background.blue',
+        'background.green',
+        'background.red',
+        'background.purple',
+        'background.yellow',
+        'background.violet',
+      ];
+
       if (loginIncentives.indexOf(path) === -1) {
         if (fullSet) {
           if (confirm(this.$t('purchaseFor', {cost: cost * 4})) !== true) return;

website/client/components/inventory/stable/index.vue

@@ -113,7 +113,7 @@
                 div(v-else)
                   h4.popover-content-title {{ item.name }}
               template(slot="itemBadge", scope="context")
-              starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
+                starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
 
         .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
           | {{ showMore === petGroup.key ? $t('showLess') : $t('showMore') }}

website/client/components/inventory/stable/mountItem.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  .item-wrapper(:id="itemId")
+  .item-wrapper(@click="click()", :id="itemId")
     .item(
       :class="{'item-empty': emptyItem}",
     )
@@ -48,5 +48,10 @@ div
         itemId: uuid.v4(),
       });
     },
+    methods: {
+      click () {
+        this.$emit('click', {});
+      },
+    },
   };
 </script>

website/client/components/payments/sendGemsModal.vue

@@ -141,6 +141,7 @@ export default {
         gemAmount: this.gift.gems.amount,
       });
       this.text(this.$t('sentGems'));
+      this.close();
     },
     close () {
       this.$root.$emit('hide::modal', 'send-gems');

website/client/components/shops/shopItem.vue

@@ -4,7 +4,6 @@ div
     .item(:class="getItemClasses()")
       slot(name="itemBadge", :item="item", :emptyItem="emptyItem")
 
-
       span.badge.badge-pill.badge-item.badge-clock(
         v-if="item.event && showEventBadge",
       )
@@ -19,7 +18,6 @@ div
           slot(name="itemImage", :item="item")
           span.svg-icon.inline.icon-48(v-if="item.key == 'gem'", v-html="icons.gems")
 
-
         div.price
           span.svg-icon.inline.icon-16(v-html="icons[currencyClass]")
 

website/client/components/snackbars/notification.vue

@@ -123,6 +123,7 @@ export default {
     };
   },
   created () {
+    // @TODO the notifications always close even if timeout is false
     let timeout = this.notification.hasOwnProperty('timeout') ? this.notification.timeout : true;
     if (timeout) {
       let delay = this.notification.delay || 1000;

website/client/mixins/notifications.js

@@ -1,5 +1,6 @@
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from 'client/libs/store';
+import { getDropClass } from 'client/libs/notifications';
 
 export default {
   computed: {
@@ -14,32 +15,7 @@ export default {
       this.notify(message, 'crit', 'glyphicon glyphicon-certificate');
     },
     drop (val, item) {
-      let dropClass = '';
-      if (item) {
-        switch (item.type) {
-          case 'Egg':
-            dropClass = `Pet_Egg_${item.key}`;
-            break;
-          case 'HatchingPotion':
-            dropClass = `Pet_HatchingPotion_${item.key}`;
-            break;
-          case 'Food':
-            dropClass = `Pet_Food_${item.key}`;
-            break;
-          case 'armor':
-          case 'back':
-          case 'body':
-          case 'eyewear':
-          case 'head':
-          case 'headAccessory':
-          case 'shield':
-          case 'weapon':
-            dropClass = `shop_${item.key}`;
-            break;
-          default:
-            dropClass = 'glyphicon glyphicon-gift';
-        }
-      }
+      let dropClass = getDropClass({key: item.key, type: item.type});
       this.notify(val, 'drop', dropClass);
     },
     quest (type, val) {

website/client/store/actions/shops.js

@@ -8,6 +8,7 @@ import sellOp from 'common/script/ops/sell';
 import unlockOp from 'common/script/ops/unlock';
 import buyArmoire from 'common/script/ops/buyArmoire';
 import rerollOp from 'common/script/ops/reroll';
+import { getDropClass } from 'client/libs/notifications';
 
 export function buyItem (store, params) {
   const user = store.state.user.data;
@@ -78,10 +79,14 @@ export function genericPurchase (store, params) {
 
       // @TODO: We might need to abstract notifications to library rather than mixin
       if (buyResult[1]) {
+        const resData = buyResult[0];
+        const item = resData.armoire;
+
         store.state.notificationStore.push({
           title: '',
           text: buyResult[1],
-          type: 'drop',
+          type: item.type === 'experience' ? 'xp' : 'drop',
+          icon: item.type === 'experience' ? null : getDropClass({type: item.type, key: item.dropKey}),
           timeout: true,
         });
       }