WIP(shop): empty states for categories

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

@@ -825,20 +825,21 @@ export default {
         ) return;
       }
 
-      const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
-      if (
-        shouldConfirmPurchase
-        && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)
-      ) {
-        return;
-      }
-
       if (this.item.purchaseType === 'customization') {
         await this.unlock(this.item.path);
         this.sync();
-      } else if (this.genericPurchase) {
-        this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
-        this.purchased(this.item.text);
+      } else {
+        const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
+        if (
+          shouldConfirmPurchase
+          && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)
+        ) {
+          return;
+        }
+        if (this.genericPurchase) {
+          this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
+          this.purchased(this.item.text);
+        }
       }
 
       this.$emit('buyPressed', this.item);

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

@@ -55,6 +55,8 @@
             :item-width="94"
             :item-margin="24"
             :max-items-per-row="8"
+            :no-items-label="emptyStateString(category.identifier)"
+            @emptyClick="emptyClick(category.identifier, $event)"
           >
             <template
               slot="item"
@@ -183,6 +185,70 @@ export default {
       return category.items.filter(item => !searchBy
         || item.text.toLowerCase().includes(searchBy));
     },
+    emptyClick (identifier, event) {
+      if (event.target.tagName !== 'A') return;
+      this.$store.state.avatarEditorOptions.editingUser = true;
+      switch (identifier) {
+        case 'animalEars':
+          this.$store.state.avatarEditorOptions.startingPage = 'extra';
+          this.$store.state.avatarEditorOptions.subpage = 'ears';
+          break;
+        case 'animalTails':
+          this.$store.state.avatarEditorOptions.startingPage = 'extra';
+          this.$store.state.avatarEditorOptions.subpage = 'tails';
+          break;
+        case 'background':
+          this.$store.state.avatarEditorOptions.startingPage = 'background';
+          this.$store.state.avatarEditorOptions.subpage = '2024';
+          break;
+        case 'facialHair':
+          this.$store.state.avatarEditorOptions.startingPage = 'hair';
+          this.$store.state.avatarEditorOptions.subpage = 'beard';
+          break;
+        case 'hairColors':
+          this.$store.state.avatarEditorOptions.startingPage = 'hair';
+          this.$store.state.avatarEditorOptions.subpage = 'color';
+          break;
+        case 'hairStyles':
+          this.$store.state.avatarEditorOptions.startingPage = 'hair';
+          this.$store.state.avatarEditorOptions.subpage = 'style';
+          break;
+        case 'shirts':
+          this.$store.state.avatarEditorOptions.startingPage = 'body';
+          this.$store.state.avatarEditorOptions.subpage = 'shirt';
+          break;
+        case 'skins':
+          this.$store.state.avatarEditorOptions.startingPage = 'skin';
+          this.$store.state.avatarEditorOptions.subpage = 'color';
+          break;
+        default:
+          throw new Error(`Unknown identifier ${identifier}`);
+      }
+      this.$root.$emit('bv::show::modal', 'avatar-modal');
+    },
+    emptyStateString (identifier) {
+      const { $t } = this;
+      switch (identifier) {
+        case 'animalEars':
+          return $t('allCustomizationsOwned');
+        case 'animalTails':
+          return $t('allCustomizationsOwned');
+        case 'background':
+          return `${$t('allCustomizationsOwned')} ${$t('checkNextMonth')}`;
+        case 'facialHair':
+          return $t('allCustomizationsOwned');
+        case 'hairColors':
+          return `${$t('allCustomizationsOwned')} ${$t('checkNextSeason')}`;
+        case 'hairStyles':
+          return $t('allCustomizationsOwned');
+        case 'shirts':
+          return $t('allCustomizationsOwned');
+        case 'skins':
+          return `${$t('allCustomizationsOwned')} ${$t('checkNextSeason')}`;
+        default:
+          return `Unknown identifier ${identifier}`;
+      }
+    },
     selectItem (item) {
       this.$root.$emit('buyModal::showItem', item);
     },

website/client/src/components/ui/itemRows.vue

@@ -13,8 +13,11 @@
       </template>
     </div>
     <div v-if="items.length === 0">
-      <p v-once>
-        {{ noItemsLabel }}
+      <p
+        class="empty-state"
+        v-html="noItemsLabel"
+        @click.stop.prevent="$emit('emptyClick', $event)"
+      >
       </p>
     </div>
     <show-more-button
@@ -28,13 +31,17 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .item-rows {
-    max-width: 944px;
-  }
-
   .btn-show-more {
     max-width: 920px;
   }
+
+  .empty-state {
+    color: $gray-100;
+  }
+
+  .item-rows {
+    max-width: 944px;
+  }
 </style>
 
 <script>

website/client/src/store/index.js

@@ -91,7 +91,7 @@ export default function clientStore () {
       avatarEditorOptions: {
         editingUser: false,
         startingPage: '',
-        subPage: '',
+        subpage: '',
       },
       challengeOptions: {
         cloning: false,

website/common/locales/en/customizations.json

@@ -123,5 +123,8 @@
   "wolf": "Wolf",
   "yellow": "Yellow",
   "zombie": "Zombie",
-  "zombie2": "Undead"
+  "zombie2": "Undead",
+  "allCustomizationsOwned": "You own all of these items. You can try them on by <a href=''>customizing your avatar</a>.",
+  "checkNextMonth": "Be sure to check back later for next month's options!",
+  "checkNextSeason": "Be sure to check back later for next season's options!"
 }