From 7936677fd804033ef43e0e2cd9fd8154901009a9 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Wed, 22 May 2024 09:16:13 -0500
Subject: [PATCH] WIP(shops): empty states and deselect UX

---
 .../components/avatarModal/extra-settings.vue |  5 ++++
 .../client/src/components/creatorIntro.vue    | 30 +++++++++++++++----
 .../shops/market/equipmentSection.vue         | 14 ++++++++-
 .../client/src/mixins/avatarEditUtilities.js  |  3 ++
 website/client/src/store/actions/user.js      |  4 +++
 website/common/locales/en/gear.json           |  4 ++-
 6 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/website/client/src/components/avatarModal/extra-settings.vue b/website/client/src/components/avatarModal/extra-settings.vue
index b821ba919e..470abd7ffb 100644
--- a/website/client/src/components/avatarModal/extra-settings.vue
+++ b/website/client/src/components/avatarModal/extra-settings.vue
@@ -208,6 +208,11 @@ export default {
 
       for (const key of keys) {
         const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
+        const newKey = `headAccessory_special_${key}`;
+        option.click = () => {
+          const type = this.user.preferences.costume ? 'costume' : 'equipped';
+          return this.equip(newKey, type);
+        };
 
         options.push(option);
       }
diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index cff5f47a8f..56d871bb44 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -176,10 +176,16 @@
             :id="bg.key"
             :key="bg.key"
             class="background-item"
-            :class="{selected: bg.key === user.preferences.background}"
+            :class="{ selected: bg.key === user.preferences.background }"
             @click="unlock('background.' + bg.key)"
           >
             <div
+              v-if="bg.key === ''"
+              class="incentive-background deselect"
+            >
+            </div>
+            <div
+              v-else
               class="incentive-background"
               :class="`background_${bg.key}`"
             >
@@ -264,7 +270,7 @@
           >
             <strong>{{ $t('monthlyBackgrounds') }}</strong>
           </div>
-          <div class="d-flex background-row justify-content-center mx-auto mb-4">
+          <div class="d-flex background-row justify-content-left mx-auto mb-4">
             <div
               v-for="(bg) in monthlyBackgrounds"
               :id="bg.key"
@@ -789,7 +795,7 @@
 
     #backgrounds {
       .background-row {
-        width: 85%;
+        width: 82%;
         flex-wrap: wrap;
       }
 
@@ -803,8 +809,19 @@
           background-position: -4px -4px;
         }
 
-        &:not(:first-of-type):not(:nth-of-type(9n)) {
-          margin-left: 24px;
+        .deselect {
+          height: 4px;
+          display: block;
+          opacity: 0.24;
+          background: red;
+          transform: rotate(-45deg);
+          top: 0;
+          margin-top: 32px;
+          margin-left: -1px;
+        }
+
+        &:not(:nth-of-type(8n)) {
+          margin-right: 24px;
         }
 
         &:nth-of-type(n+9) {
@@ -1009,7 +1026,7 @@ export default {
       allBackgrounds: content.backgroundsFlat,
       monthlyBackgrounds: [],
       standardBackgrounds: [],
-      standardBackgroundMax: 0,
+      standardBackgroundMax: 1,
       timeTravelBackgrounds: [],
 
       icons: Object.freeze({
@@ -1084,6 +1101,7 @@ export default {
       }
     });
     this.monthlyBackgrounds = orderBy(this.monthlyBackgrounds, bg => bg.key, 'desc');
+    this.standardBackgrounds.splice(0, 0, { key: '', notes: () => this.$t('noBackground') });
     if (this.editing) this.modalPage = 2;
   },
   methods: {
diff --git a/website/client/src/components/shops/market/equipmentSection.vue b/website/client/src/components/shops/market/equipmentSection.vue
index 4bc28229c1..419dd288f5 100644
--- a/website/client/src/components/shops/market/equipmentSection.vue
+++ b/website/client/src/components/shops/market/equipmentSection.vue
@@ -42,7 +42,7 @@
       :item-width="94"
       :item-margin="24"
       :type="'gear'"
-      :no-items-label="$t('noGearItemsOfClass')"
+      :no-items-label="noItemsLabel"
     >
       <template
         slot="item"
@@ -77,6 +77,7 @@
 import _filter from 'lodash/filter';
 import _orderBy from 'lodash/orderBy';
 import shops from '@/../../common/script/libs/shops';
+import { remainingGearInSet } from '@/../../common/script/count';
 import { getClassName } from '@/../../common/script/libs/getClassName';
 import { mapState } from '@/libs/store';
 import LayoutSection from '@/components/ui/layoutSection';
@@ -136,6 +137,17 @@ export default {
       userItems: 'user.data.items',
       userStats: 'user.data.stats',
     }),
+    armoireCount () {
+      return remainingGearInSet(this.userItems.gear.owned, 'armoire');
+    },
+    noItemsLabel () {
+      if (this.armoireCount > 0) {
+        return `${this.$t('gearItemsCompleted', { klass: this.$t(this.selectedGroupGearByClass) })}
+          ${this.$t('moreArmoireGearAvailable', { armoireCount: this.armoireCount })}`;
+      }
+      return `${this.$t('gearItemsCompleted', { klass: this.$t(this.selectedGroupGearByClass) })}
+        ${this.$t('moreArmoireComing')}`;
+    },
     marketGearCategories () {
       return shops.getMarketGearCategories(this.user).map(c => {
         c.id = c.identifier;
diff --git a/website/client/src/mixins/avatarEditUtilities.js b/website/client/src/mixins/avatarEditUtilities.js
index 19e4606bbd..00539be959 100644
--- a/website/client/src/mixins/avatarEditUtilities.js
+++ b/website/client/src/mixins/avatarEditUtilities.js
@@ -120,6 +120,9 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
     async unlock (path) {
       const fullSet = path.indexOf(',') !== -1;
       const isBackground = path.indexOf('background.') !== -1;
+      if (isBackground && path === 'background.') {
+        return this.set({ 'preferences.background': '' });
+      }
 
       let cost;
 
diff --git a/website/client/src/store/actions/user.js b/website/client/src/store/actions/user.js
index e26b8109ba..88dc2f03df 100644
--- a/website/client/src/store/actions/user.js
+++ b/website/client/src/store/actions/user.js
@@ -1,3 +1,4 @@
+import getProps from 'lodash/get';
 import setProps from 'lodash/set';
 import axios from 'axios';
 
@@ -47,6 +48,9 @@ export async function set (store, changes) {
           tagsIndexesToRemove.forEach(i => task.tags.splice(i, 1));
         });
       });
+    } else if ((key.startsWith('preferences.hair') || key.startsWith('preferences.chair'))
+      && getProps(user, key) === changes[key]) {
+      setProps(user, key, key.startsWith('preferences.chair') ? 'none' : 0);
     } else {
       setProps(user, key, changes[key]);
     }
diff --git a/website/common/locales/en/gear.json b/website/common/locales/en/gear.json
index 5bcbe7f09a..8fca1db0d2 100644
--- a/website/common/locales/en/gear.json
+++ b/website/common/locales/en/gear.json
@@ -9,7 +9,9 @@
   "mysterySets": "Mystery Sets",
   "gearNotOwned": "You do not own this item.",
   "noGearItemsOfType": "You don't own any of these.",
-  "noGearItemsOfClass": "You already have all your class equipment! More will be released during the Grand Galas, near the solstices and equinoxes.",
+  "gearItemsCompleted": "You own all <%= klass %> gear! New gear is released during the seasonal Galas.",
+  "moreArmoireGearAvailable": "Until then, there's <%= armoireCount %> pieces of gear in the Enchanted Armoire to find!",
+  "moreArmoireGearComing": "The Enchanted Armoire gets new stock every month too!",
   "classLockedItem": "This item is only available to a specific class. At level 10 or above, you can change your class under the User icon > Settings > Character Build!",
   "tierLockedItem": "This item is only available once you've purchased the previous items in sequence. Keep working your way up!",