Updates notification text for armoire items in shops:genericPurchase. (#9240)

Adjusts column widths for 'drop' type notifications to prevent .text from overlapping .icon-item.
Adds new 'flavorMessage' property to Snackbar notifications, which overrides standard computed message.
Vertically center XP gain icon/amount.
Fixes unrelated typo in i18n key name.

website/client/components/snackbars/notification.vue

@@ -14,7 +14,7 @@ transition(name="fade")
       .text.col-7.offset-1
         div
           | {{message}}
-      .icon.col-4
+      .icon.col-4.d-flex.align-items-center
         div.svg-icon(v-html="icons.health", v-if='notification.type === "hp"')
         div.svg-icon(v-html="icons.gold", v-if='notification.type === "gp"')
         div.svg-icon(v-html="icons.star", v-if='notification.type === "xp"')
@@ -24,10 +24,10 @@ transition(name="fade")
       .text.col-12
         div(v-html='notification.text')
     .row(v-if='notification.type === "drop"')
-      .col-2
+      .col-3
         .icon-item
           div(:class='notification.icon')
-      .text.col-9
+      .text.col-8
         div(v-html='notification.text')
 </template>
 
@@ -150,6 +150,9 @@ export default {
   },
   computed: {
     message () {
+      if (this.notification.flavorMessage) {
+        return this.notification.flavorMessage;
+      }
       let localeKey = this.negative === 'negative' ? 'lost' : 'gained';
       if (this.notification.type === 'hp') localeKey += 'Health';
       if (this.notification.type === 'mp') localeKey += 'Mana';

website/client/store/actions/shops.js

@@ -59,6 +59,7 @@ async function buyArmoire (store, params) {
   if (buyResult) {
     const resData = buyResult;
     const item = resData.armoire;
+    const message = result.data.message;
 
     const isExperience = item.type === 'experience';
     if (item.type === 'gear') {
@@ -67,12 +68,22 @@ async function buyArmoire (store, params) {
     store.state.user.data.stats.gp -= armoire.value;
 
     // @TODO: We might need to abstract notifications to library rather than mixin
+    const notificationOptions = isExperience ?
+    {
+      text: `+ ${item.value}`,
+      type: 'xp',
+      flavorMessage: message,
+    } :
+    {
+      text: message,
+      type: 'drop',
+      icon: getDropClass({type: item.type, key: item.dropKey}),
+    };
+
     store.dispatch('snackbars:add', {
       title: '',
-      text: isExperience ? item.value : item.dropText,
-      type: isExperience ? 'xp' : 'drop',
-      icon: isExperience ? null : getDropClass({type: item.type, key: item.dropKey}),
       timeout: true,
+      ...notificationOptions,
     });
   }
 }

website/common/script/ops/buyArmoire.js

@@ -43,7 +43,7 @@ module.exports = function buyArmoire (user, req = {}, analytics) {
     drop = randomVal(eligibleEquipment);
 
     if (user.items.gear.owned[drop.key]) {
-      throw new NotAuthorized(i18n.t('equipmentAlradyOwned', req.language));
+      throw new NotAuthorized(i18n.t('equipmentAlreadyOwned', req.language));
     }
 
     user.items.gear.owned[drop.key] = true;