Show error message in empty market inventory drawer (#9041)

* client/tasks/user: (create dropdown) change icon color on menuitem hover

Previously the color was only changing when you hovered over the
text or icon.

This change changes the icon color when you hover anywhere over
the `menuitem`

* client/shops/market: fix search field in market

* Hide drawer sliders if number of items for type is empty
* Move drawer-help-text icon down to line up vertically with text
* Add TODO for error thrown when trying to sell special item types

* client/tasks/taskModal: display all selected tags for task

* i18n/groups: religous to religious

* client/shops/market: Add error message to empty drawer slider

* Create new locale file to hold inventory locales

* client/tasks/user: Revert change to create dropdown

* Revert tag changes

This will be picked up in a separate PR.

* Fix missing space before function paren

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

@@ -169,8 +169,10 @@
 
         div.fill-height
 
+      //- @TODO: Create new InventoryDrawer component and re-use in 'inventory/stable' component.
       drawer(
         :title="$t('quickInventory')"
+        :errorMessage="inventoryDrawerErrorMessage(selectedDrawerItemType)"
       )
         div(slot="drawer-header")
           drawer-header-tabs(
@@ -188,6 +190,7 @@
                 .popover-content-text(v-html="$t('petLikeToEatText')", v-once)
 
         drawer-slider(
+          v-if="hasOwnedItemsForType(selectedDrawerItemType)"
           :items="ownedItems(selectedDrawerItemType) || []",
           slot="drawer-slider",
           :itemWidth=94,
@@ -232,6 +235,14 @@
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/variables.scss';
 
+  .market .drawer-slider {
+    min-height: 60px;
+
+    .message {
+      top: 10px;
+    }
+  }
+
   .fill-height {
     height: 38px; // button + margin + padding
   }
@@ -611,6 +622,15 @@ export default {
             return mappedItems;
         }
       },
+      hasOwnedItemsForType (type) {
+        return this.ownedItems(type).length > 0;
+      },
+      inventoryDrawerErrorMessage (type) {
+        if (!this.hasOwnedItemsForType(type)) {
+          // @TODO: Change any places using similar locales from `pets.json` and use these new locales from 'inventory.json'
+          return this.$t('noItemsAvailableForType', { type: this.$t(`${type}ItemType`) });
+        }
+      },
       getItemClass (type, itemKey) {
         switch (type) {
           case 'food':

website/client/components/ui/drawer.vue

@@ -96,6 +96,8 @@
     float: right;
 
     .svg-icon {
+      position: relative;
+      top: 4px;
       margin-left: 8px;
     }
   }

website/common/locales/en/groups.json

@@ -141,7 +141,7 @@
   "report": "Report",
   "abuseFlag": "Report violation of Community Guidelines",
   "abuseFlagModalHeading": "Report <%= name %> for violation?",
-  "abuseFlagModalBody": "Are you sure you want to report this post? You should ONLY report a post that violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Inappropriately reporting a post is a violation of the Community Guidelines and may give you an infraction. Appropriate reasons to flag a post include but are not limited to:<br><br><ul style='margin-left: 10px;'><li>swearing, religous oaths</li><li>bigotry, slurs</li><li>adult topics</li><li>violence, including as a joke</li><li>spam, nonsensical messages</li></ul>",
+  "abuseFlagModalBody": "Are you sure you want to report this post? You should ONLY report a post that violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Inappropriately reporting a post is a violation of the Community Guidelines and may give you an infraction. Appropriate reasons to flag a post include but are not limited to:<br><br><ul style='margin-left: 10px;'><li>swearing, religious oaths</li><li>bigotry, slurs</li><li>adult topics</li><li>violence, including as a joke</li><li>spam, nonsensical messages</li></ul>",
   "abuseFlagModalButton": "Report Violation",
   "abuseReported": "Thank you for reporting this violation. The moderators have been notified.",
   "abuseAlreadyReported": "You have already reported this message.",

website/common/locales/en/inventory.json

@@ -0,0 +1,7 @@
+{
+  "noItemsAvailableForType": "You have no <%= type %>.",
+  "foodItemType": "Food",
+  "eggsItemType": "Eggs",
+  "hatchingPotionsItemType": "Hatching Potions",
+  "specialItemType": "Special items"
+}

website/common/script/ops/sell.js

@@ -9,6 +9,7 @@ import {
   BadRequest,
 } from '../libs/errors';
 
+// @TODO: 'special' type throws NotAuthorized error
 const ACCEPTEDTYPES = ['eggs', 'hatchingPotions', 'food'];
 
 module.exports = function sell (user, req = {}) {