fix most customizations not being pinnable (#15578)

* fix most customizations not being pinnable

* set correct pinTypes

* fix(pinning): correct purchase types for base hair and mustaches

* automatically unpin purchased customizations

* ability to pin customization items

* Fix pin not showing on buy modal

* Pin on buy modal tweak

---------

Co-authored-by: Kalista Payne <kalista@habitica.com>
Co-authored-by: Hafiz <hafizbhamidi@gmail.com>

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

@@ -281,6 +281,11 @@
     .badge-dialog {
       left: -8px;
       top: -8px;
+
+      .badge-pin {
+        width: 32px;
+        height: 32px;
+      }
     }
 
     .avatar {
@@ -903,8 +908,8 @@ export default {
     purchaseGems () {
       this.$root.$emit('bv::show::modal', 'buy-gems');
     },
-    togglePinned () {
-      this.isPinned = this.$store.dispatch('user:togglePinnedItem', { type: this.item.pinType, path: this.item.path });
+    async togglePinned () {
+      this.isPinned = await 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 }));

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

@@ -76,7 +76,21 @@
                 :empty-item="false"
                 :show-popover="Boolean(ctx.item.text)"
                 @click="selectItem(ctx.item)"
-              />
+              >
+                <template
+                  slot="itemBadge"
+                  slot-scope="slotProps"
+                >
+                  <span
+                    class="badge-top"
+                    @click.prevent.stop="togglePinned(slotProps.item)"
+                  >
+                    <pin-badge
+                      :pinned="slotProps.item.pinned"
+                    />
+                  </span>
+                </template>
+              </shop-item>
             </template>
           </item-rows>
         </div>
@@ -108,6 +122,16 @@
   }
 </style>
 
+<style lang="scss">
+  .market .badge-pin:not(.pinned) {
+    display: none;
+  }
+
+  .market .item:hover .badge-pin {
+    display: block;
+  }
+</style>
+
 <script>
 import find from 'lodash/find';
 import shops from '@/../../common/script/libs/shops';
@@ -118,7 +142,9 @@ import Checkbox from '@/components/ui/checkbox';
 import FilterGroup from '@/components/ui/filterGroup';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import ItemRows from '@/components/ui/itemRows';
+import PinBadge from '@/components/ui/pinBadge';
 import ShopItem from '../shopItem';
+import pinUtils from '@/mixins/pinUtils';
 
 export default {
   components: {
@@ -126,8 +152,10 @@ export default {
     FilterGroup,
     FilterSidebar,
     ItemRows,
+    PinBadge,
     ShopItem,
   },
+  mixins: [pinUtils],
   data () {
     return {
       searchText: null,
@@ -184,8 +212,12 @@ export default {
   methods: {
     customizationsItems (options = {}) {
       const { category, searchBy } = options;
-      return category.items.filter(item => !searchBy
-        || item.text.toLowerCase().includes(searchBy));
+      return category.items
+        .filter(item => !searchBy || item.text.toLowerCase().includes(searchBy))
+        .map(item => ({
+          ...item,
+          pinned: this.isPinned(item),
+        }));
     },
     emptyClick (identifier, event) {
       if (event.target.tagName !== 'A') return;

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -180,6 +180,11 @@
     .badge-dialog {
       left: -8px;
       top: -8px;
+
+      .badge-pin {
+        width: 32px;
+        height: 32px;
+      }
     }
 
     .modal-content {

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

@@ -16,7 +16,7 @@
 
   .badge-pin {
     background-color: $white;
-    color: $gray-200;
+    color: $gray-100;
     transition: none;
     display: flex;
     cursor: pointer;
@@ -32,8 +32,8 @@
     }
 
     .svg-icon {
-      width: 100%;
-      height: 100%;
+      width: 16px;
+      height: 16px;
     }
   }