WIP(customizations): load hair colors

website/client/src/components/shops/customizations/index.vue

@@ -66,6 +66,7 @@
                 :price="ctx.item.value"
                 :price-type="ctx.item.currency"
                 :empty-item="false"
+                :show-popover="Boolean(ctx.item.text)"
               />
             </template>
           </item-rows>
@@ -127,7 +128,7 @@ export default {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
     imageURLs () {
-      const currentEvent = this.currentEventList.find(event => Boolean(event.season));
+      const currentEvent = this.currentEventList?.find(event => Boolean(event.season));
       if (!currentEvent) {
         return {
           background: 'url(/static/npc/normal/market_background.png)',

website/client/src/components/shops/shopItem.vue

@@ -142,6 +142,11 @@
     &.locked .price {
       opacity: 0.5;
     }
+
+   .hair {
+      height: 68px;
+      margin-left: -24px;
+    }
   }
 
   .image {

website/common/script/libs/getItemInfo.js

@@ -379,6 +379,15 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       };
       break;
     }
+    case 'hairColor': {
+      itemInfo = {
+        key: item.key,
+        class: `hair hair_bangs_${user.preferences.hair.bangs}_${item.key}`,
+        value: item.price,
+        currency: 'gems',
+      };
+      break;
+    }
   }
 
   if (itemInfo) {

website/common/script/libs/shops.js

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import values from 'lodash/values';
 import map from 'lodash/map';
 import keys from 'lodash/keys';
@@ -546,21 +547,39 @@ shops.getBackgroundShopSets = function getBackgroundShopSets (language) {
 shops.getCustomizationsShopCategories = function getCustomizationsShopCategories (user, language) {
   const categories = [];
   const officialPinnedItems = getOfficialPinnedItems();
+
   const backgroundsCategory = {
     identifier: 'backgrounds',
     text: i18n.t('backgrounds', language),
   };
-
   backgroundsCategory.items = values(content.backgroundsFlat)
-    .filter(bg => !user.purchased.background[bg.key] && (!bg.currency || bg.currency === 'gems'))
+    .filter(bg => !user.purchased.background[bg.key] && (!bg.currency || bg.currency === 'gems')
+      && !(bg.price === 0))
     .map(bg => getItemInfo(user, 'background', bg, officialPinnedItems, language));
   categories.push(backgroundsCategory);
 
   const hairColorsCategory = {
     identifier: 'hairColors',
     text: i18n.t('hairColors', language),
-    items: [],
   };
+  hairColorsCategory.items = values(content.appearances.hair.color)
+    .filter(color => {
+      const { hair } = user.purchased;
+      if (hair && hair.color && hair.color[color.key]) {
+        return false;
+      }
+      if (color.set) {
+        if (color.set.availableFrom) {
+          return moment().isBetween(color.set.availableFrom, color.set.availableUntil);
+        }
+        if (color.set.availableUntil) {
+          return moment().isBefore(color.set.availableTo);
+        }
+        return true;
+      }
+      return false;
+    })
+    .map(color => getItemInfo(user, 'hairColor', color, officialPinnedItems, language));
   categories.push(hairColorsCategory);
 
   const hairStylesCategory = {