[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/buyModal.vue

@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -59,6 +59,10 @@
           :class="{'notEnough': !this.enoughCurrency(getPriceClass(), item.value)}"
         ) {{ $t('buyNow') }}
 
+    div.limitedTime(v-if="item.event")
+      span.svg-icon.inline.icon-16(v-html="icons.clock")
+      span.limitedString {{ limitedString }}
+
     div.clearfix(slot="modal-footer")
       span.balance.float-left {{ $t('yourBalance') }}
       balanceInfo(
@@ -176,6 +180,31 @@
       pointer-events: none;
       opacity: 0.55;
     }
+
+    .limitedTime {
+      height: 32px;
+      background-color: #6133b4;
+      width: calc(100% + 30px);
+      margin: 0 -15px; // the modal content has its own padding
+
+      font-size: 12px;
+      line-height: 1.33;
+      text-align: center;
+      color: $white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .limitedString {
+        height: 16px;
+        margin-left: 8px;
+      }
+    }
+
+    .bordered {
+      margin-top: 8px;
+    }
   }
 </style>
 
@@ -188,6 +217,7 @@
   import svgGem from 'assets/svg/gem.svg';
   import svgHourglasses from 'assets/svg/hourglass.svg';
   import svgPin from 'assets/svg/pin.svg';
+  import svgClock from 'assets/svg/clock.svg';
 
   import BalanceInfo  from './balanceInfo.vue';
   import currencyMixin from './_currencyMixin';
@@ -200,6 +230,10 @@
   import Item from 'client/components/inventory/item';
   import Avatar from 'client/components/avatar';
 
+  import seasonalShopConfig from 'common/script/libs/shops-seasonal.config';
+
+  import moment from 'moment';
+
   export default {
     mixins: [currencyMixin, notifications],
     components: {
@@ -217,7 +251,10 @@
           gems: svgGem,
           hourglasses: svgHourglasses,
           pin: svgPin,
+          clock: svgClock,
         }),
+
+        isPinned: false,
       };
     },
     computed: {
@@ -244,6 +281,14 @@
           return this.item.notes;
         }
       },
+      limitedString () {
+        return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
+      },
+    },
+    watch: {
+      item: function itemChanged () {
+        this.isPinned = this.item && this.item.pinned;
+      },
     },
     methods: {
       onChange ($event) {
@@ -278,7 +323,9 @@
         this.$root.$emit('show::modal', 'buy-gems');
       },
       togglePinned () {
-        if (!this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path})) {
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
           this.text(this.$t('unpinnedItem', {item: this.item.text}));
         }
       },