[WIP] new client - seasonal-shop (#9018)

* extract seasonal-shop config - use summer season items (to work on)

* add suggested border to shopItems

* refactor getOfficialPinnedItems (now includes the seasonal gear)

* refactor shops.getSeasonalShop - add featured items to result - add the set to special equipment items

* feat(content): Fall 2017 seasonal gear
Also adds set keys for all prior seasonal gear.

* show item limited time (buyModal & shopItem)

* select seasonal fall sets

* WIP(seasonal-shop): placeholder Fall 2017 items

* fix lint

* sprites

* styling + fix purchase of seasonal spells

* compile sprites

* fixes: check isPinned with officialItems

* enable purchase of seasonal items for testing

* fix shop apis

* add featuredItems to market

* quest shop: add featuredItems to api

* tiem travelers shop: add featuredItems to api

* fix gear types filter

* feat(content): Fall 2017 compleat

* chore(sprites): compile

* show opened shop state (npc+background)

* add opened seasonal npc

* current seasonal users class set = purchase by gold - lock other sets of the current season

* hide event badge in seasonal shop - dot only for suggested items - cursor: pointer on shopItems

* refresh rewards column list (seasonal gear won't refresh it on purchase)

* fix duplicate seasonal gear -> remove special items from the old reward gear (which is used to reset the pinned gears)

* every current season gear is purchased by gold - prevent buyModal on locked items

* use the current event date range

* list seasonal sets by event date

* use custom method instead of updateStore to list the pinnable gear

* change daterange to 10-31

* fix start quest modal from items - disable invite quest button if a quest is already active

* toggle pin in buy-dialogs

* check if the item is not undefined/null - renamed the watch function

website/client/components/shops/shopItem.vue

@@ -1,12 +1,18 @@
 <template lang="pug">
 div
   .item-wrapper(@click="click()", :id="itemId")
-    .item(
-      :class="{'item-empty': emptyItem, 'highlight-border': highlightBorder}",
-    )
+    .item(:class="getItemClasses()")
       slot(name="itemBadge", :item="item", :emptyItem="emptyItem")
+
+
+      span.badge.badge-pill.badge-item.badge-clock(
+        v-if="item.event && showEventBadge",
+      )
+        span.svg-icon.inline.clock(v-html="icons.clock")
+
       div.shop-content
         span.svg-icon.inline.lock(v-if="item.locked" v-html="icons.lock")
+        span.suggestedDot(v-if="item.isSuggested")
 
         div.image
           div(:class="item.class", v-once)
@@ -31,6 +37,8 @@ div
         h4.popover-content-title(v-once) {{ item.text }}
         .popover-content-text(v-if="showNotes", v-once) {{ item.notes }}
 
+      div(v-if="item.event") {{ limitedString }}
+
 </template>
 
 <style lang="scss" scoped>
@@ -44,6 +52,10 @@ div
     min-height: 106px;
   }
 
+  .item:not(.locked) {
+    cursor: pointer;
+  }
+
   .item.item-empty {
     border-radius: 2px;
     background-color: #f9f9f9;
@@ -102,6 +114,34 @@ div
     top: 8px;
     margin-top: 0;
   }
+
+  span.badge.badge-pill.badge-item.badge-clock {
+    height: 24px;
+    width: 24px;
+    background-color: $purple-300;
+    position: absolute;
+    left: -8px;
+    top: -12px;
+    margin-top: 0;
+    padding: 4px;
+  }
+
+  span.svg-icon.inline.clock {
+    height: 16px;
+    width: 16px;
+  }
+
+  .suggestedDot {
+    width: 6px;
+    height: 6px;
+    background-color: $suggested-item-color;
+    border-radius: 4px;
+
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    margin-top: 0;
+  }
 </style>
 
 <script>
@@ -112,9 +152,14 @@ div
   import svgGold from 'assets/svg/gold.svg';
   import svgHourglasses from 'assets/svg/hourglass.svg';
   import svgLock from 'assets/svg/lock.svg';
+  import svgClock from 'assets/svg/clock.svg';
 
   import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
 
+  import moment from 'moment';
+
+  import seasonalShopConfig from 'common/script/libs/shops-seasonal.config';
+
   export default {
     components: {
       bPopover,
@@ -128,6 +173,7 @@ div
           gold: svgGold,
           lock: svgLock,
           hourglasses: svgHourglasses,
+          clock: svgClock,
         },
       });
     },
@@ -155,6 +201,10 @@ div
         type: Boolean,
         default: true,
       },
+      showEventBadge: {
+        type: Boolean,
+        default: true,
+      },
     },
     computed: {
       showNotes () {
@@ -167,6 +217,9 @@ div
           return 'gold';
         }
       },
+      limitedString () {
+        return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
+      },
     },
     methods: {
       click () {
@@ -179,6 +232,14 @@ div
           return this.price;
         }
       },
+      getItemClasses () {
+        return {
+          'item-empty': this.emptyItem,
+          'highlight-border': this.highlightBorder,
+          suggested: this.item.isSuggested,
+          locked: this.item.locked,
+        };
+      },
     },
   };
 </script>