From 0aa9d4d1d53eec50d9a6962cea7f8c5741a6c398 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Mon, 11 Mar 2024 16:09:16 -0500
Subject: [PATCH] WIP(shops): start wiring up buy modals

---
 website/client/src/assets/scss/button.scss       |  3 +--
 .../src/components/avatarModal/body-settings.vue |  4 ++--
 .../components/avatarModal/customize-options.vue |  4 ++--
 .../components/avatarModal/extra-settings.vue    |  4 ++--
 .../src/components/avatarModal/hair-settings.vue |  4 ++--
 .../src/components/avatarModal/skin-settings.vue |  4 ++--
 website/client/src/components/creatorIntro.vue   |  4 ++--
 website/client/src/components/shops/buyModal.vue | 16 +++++-----------
 .../components/shops/customizations/index.vue    |  7 +++++--
 website/client/src/components/shops/shopItem.vue |  2 ++
 website/client/src/components/ui/itemRows.vue    |  8 --------
 .../client/src/components/ui/showMoreButton.vue  |  2 +-
 website/client/src/mixins/avatarEditUtilities.js |  2 +-
 website/common/script/libs/shops.js              |  2 +-
 14 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index f61e0b495a..62eb95422f 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -218,13 +218,12 @@
 .btn-show-more {
   display: block;
   width: 100%;
-  margin-top: 12px;
   padding: 8px;
   font-size: 14px;
   line-height: 1.43;
   font-weight: bold;
   text-align: center;
-  background: $gray-600;
+  background: $gray-500;
   color: $gray-200 !important; // Otherwise it gets ignored when used on an A element
   box-shadow: none;
 
diff --git a/website/client/src/components/avatarModal/body-settings.vue b/website/client/src/components/avatarModal/body-settings.vue
index 1d908c3b64..b69118c890 100644
--- a/website/client/src/components/avatarModal/body-settings.vue
+++ b/website/client/src/components/avatarModal/body-settings.vue
@@ -35,7 +35,7 @@
 import appearance from '@/../../common/script/content/appearance';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -51,7 +51,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',
diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue
index 3d155dbc98..338ef86264 100644
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/website/client/src/components/avatarModal/customize-options.vue
@@ -67,11 +67,11 @@
 <script>
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 
 export default {
   mixins: [
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: ['items', 'currentValue', 'fullSet'],
   data () {
diff --git a/website/client/src/components/avatarModal/extra-settings.vue b/website/client/src/components/avatarModal/extra-settings.vue
index 8aa269fa38..b1d4f3b613 100644
--- a/website/client/src/components/avatarModal/extra-settings.vue
+++ b/website/client/src/components/avatarModal/extra-settings.vue
@@ -60,7 +60,7 @@
 import appearance from '@/../../common/script/content/appearance';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -76,7 +76,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',
diff --git a/website/client/src/components/avatarModal/hair-settings.vue b/website/client/src/components/avatarModal/hair-settings.vue
index 3d41a52ee1..11623fe072 100644
--- a/website/client/src/components/avatarModal/hair-settings.vue
+++ b/website/client/src/components/avatarModal/hair-settings.vue
@@ -81,7 +81,7 @@ import appearance from '@/../../common/script/content/appearance';
 import appearanceSets from '@/../../common/script/content/appearance/sets';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -97,7 +97,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',
diff --git a/website/client/src/components/avatarModal/skin-settings.vue b/website/client/src/components/avatarModal/skin-settings.vue
index 3fff874fa5..45fb5ee206 100644
--- a/website/client/src/components/avatarModal/skin-settings.vue
+++ b/website/client/src/components/avatarModal/skin-settings.vue
@@ -36,7 +36,7 @@ import appearance from '@/../../common/script/content/appearance';
 import appearanceSets from '@/../../common/script/content/appearance/sets';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -56,7 +56,7 @@ export default {
   mixins: [
     subPageMixin,
     userStateMixin,
-    avatarEditorUtilies,
+    avatarEditorUtilities,
   ],
   props: [
     'editing',
diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index 30e0aac32e..c70a9121c8 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -1187,7 +1187,7 @@ import gold from '@/assets/svg/gold.svg';
 import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
-import { avatarEditorUtilies } from '../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 
 export default {
   components: {
@@ -1201,7 +1201,7 @@ export default {
     toggleSwitch,
     usernameForm,
   },
-  mixins: [guide, notifications, avatarEditorUtilies],
+  mixins: [guide, notifications, avatarEditorUtilities],
   data () {
     const backgroundShopSets = shops.getBackgroundShopSets();
 
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 838989164e..b46308e163 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -89,19 +89,19 @@
           v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
           class="purchase-amount"
         >
-          <!-- this is where the pretty item cost element lives -->
-          <div class="item-cost">
+          <div class="item-cost justify-content-center my-3">
             <span
-              class="cost"
+              class="cost d-flex mx-auto"
               :class="getPriceClass()"
             >
               <span
-                class="svg-icon inline icon-24"
+                class="svg-icon icon-24 my-auto mr-1"
                 aria-hidden="true"
                 v-html="icons[getPriceClass()]"
               >
               </span>
               <span
+                class="my-auto"
                 :class="getPriceClass()"
               >{{ item.value }}</span>
             </span>
@@ -452,14 +452,11 @@
     }
 
     .item-cost {
-      display: inline-flex;
-      margin: 16px 0;
-      align-items: center;
       height: 40px;
     }
 
     .cost {
-      display: inline-block;
+      width: fit-content;
       font-family: sans-serif;
       font-size: 1.25rem;
       font-weight: bold;
@@ -470,19 +467,16 @@
       &.gems {
         color: $green-10;
         background-color: rgba(36, 204, 143, 0.15);
-        align-items: center;
       }
 
       &.gold {
         color: $yellow-5;
         background-color: rgba(255, 190, 93, 0.15);
-        align-items: center;
       }
 
       &.hourglasses {
         color: $hourglass-color;
         background-color: rgba(41, 149, 205, 0.15);
-        align-items: center;
       }
     }
 
diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue
index 45f54fae95..a7d0233b3b 100644
--- a/website/client/src/components/shops/customizations/index.vue
+++ b/website/client/src/components/shops/customizations/index.vue
@@ -38,7 +38,6 @@
       <div class="p-4">
         <h1
           v-once
-          class="mb-4"
         >
           {{ $t('customizations') }}
         </h1>
@@ -46,7 +45,7 @@
           v-for="category in categories"
           :key="category.identifier"
         >
-          <h2 class="mb-3">
+          <h2 class="mb-3 mt-4">
             {{ category.text }}
           </h2>
           <item-rows
@@ -67,6 +66,7 @@
                 :price-type="ctx.item.currency"
                 :empty-item="false"
                 :show-popover="Boolean(ctx.item.text)"
+                @click="selectItem(ctx.item)"
               />
             </template>
           </item-rows>
@@ -190,6 +190,9 @@ export default {
       return category.items.filter(item => !searchBy
         || item.text.toLowerCase().includes(searchBy));
     },
+    selectItem (item) {
+      this.$root.$emit('buyModal::showItem', item);
+    },
   },
 };
 </script>
diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue
index f2c1d3734d..22e6d78a08 100644
--- a/website/client/src/components/shops/shopItem.vue
+++ b/website/client/src/components/shops/shopItem.vue
@@ -193,6 +193,7 @@
     font-size: 12px;
     font-weight: bold;
     line-height: 1.33;
+    margin-bottom: 1px;
 
     &.gems {
       color: $green-1;
@@ -367,6 +368,7 @@ export default {
       this.$emit('click', {});
     },
     blur () {
+      if (!this.$refs?.popover) return;
       this.$refs.popover.$emit('enable');
     },
     getPrice () {
diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue
index 498fadff2e..0dae56b50e 100644
--- a/website/client/src/components/ui/itemRows.vue
+++ b/website/client/src/components/ui/itemRows.vue
@@ -22,20 +22,12 @@
       :show-all="showAll"
       @click="toggleItemsToShow()"
     />
-    <div
-      v-else
-      class="fill-height"
-    ></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .fill-height {
-    height: 38px; // button + margin + padding
-  }
-
   .item-rows {
     margin-right: -1.5rem;
   }
diff --git a/website/client/src/components/ui/showMoreButton.vue b/website/client/src/components/ui/showMoreButton.vue
index fb0fdd8496..097d4ffa74 100644
--- a/website/client/src/components/ui/showMoreButton.vue
+++ b/website/client/src/components/ui/showMoreButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn btn-flat btn-show-more mb-4"
+    class="btn btn-flat btn-show-more mt-2"
     @click="$emit('click')"
   >
     <span class="button-text">
diff --git a/website/client/src/mixins/avatarEditUtilities.js b/website/client/src/mixins/avatarEditUtilities.js
index 207defffd6..b09e30fd47 100644
--- a/website/client/src/mixins/avatarEditUtilities.js
+++ b/website/client/src/mixins/avatarEditUtilities.js
@@ -9,7 +9,7 @@ import appearanceSets from '@/../../common/script/content/appearance/sets';
 
 import { userStateMixin } from './userState';
 
-export const avatarEditorUtilies = { // eslint-disable-line import/prefer-default-export
+export const avatarEditorUtilities = { // eslint-disable-line import/prefer-default-export
   mixins: [userStateMixin],
   data () {
     return {
diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js
index c82138a3d0..d6339619c2 100644
--- a/website/common/script/libs/shops.js
+++ b/website/common/script/libs/shops.js
@@ -549,7 +549,7 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
   const officialPinnedItems = getOfficialPinnedItems();
 
   const backgroundsCategory = {
-    identifier: 'backgrounds',
+    identifier: 'background',
     text: i18n.t('backgrounds', language),
   };
   backgroundsCategory.items = values(content.backgroundsFlat)