tried to make if/else logic simpler, ended up breaking everything.

website/client/src/components/shared/numberIncrement.vue

@@ -1,92 +1,146 @@
 <template>
-  <div class="d-flex flex-row align-items-center justify-content-center">
+  <div class="d-flex flex-row align-items-center justify-content-center number-increment">
     <!-- negative -->
+    <!-- buy modal -->
     <div
       v-if="buy-modal"
-      class="gray-circle"
-      @click="selectedAmountToBuy <= 0
-        ? selectedAmountToBuy = 0
-        : selectedAmountToBuy--"
     >
       <div
-        class="icon-negative"
-        v-html="icons.negative"
-      ></div>
-    </div>
-    <div
-      v-else-if="sell-modal"
-      class="gray-circle"
-      @click="selectedAmountToSell <= 0
-        ? selectedAmountToSell = 0
-        : selectedAmountToSell--"
-    >
-      <div
-        class="icon-negative"
-        v-html="icons.negative"
-      ></div>
-    </div>
-    <div
-      v-else
-      class="gray-circle"
-      @click="gift.gems.amount <= 0
-        ? gift.gems.amount = 0
-        : gift.gems.amount--"
-    >
-      <div
-        class="icon-negative"
-        v-html="icons.negative"
-      ></div>
-    </div>
-    <!-- quantity -->
-    <div class="input-group">
-      <div class="input-group-prepend input-group-icon align-items-center">
-        <div
-          v-if="send-gift"
-          class="icon-gem"
-          v-html="icons.gem"
-        ></div>
-        <div
-          v-else
-        >
-        </div>
-      </div>
-      <input
-        id="gemsForm"
-        v-model.number="variable"
-        class="form-control"
-        min="1"
+        class="gray-circle"
+        @click="selectedAmountToBuy--"
+        @keyup.native="preventNegative($event)"
       >
-    </div>
-    <!-- positive -->
-    <div
-      v-if="buy-modal"
-      class="gray-circle"
-      @click="selectedAmountToBuy++"
-    >
+        <div
+          class="icon-negative"
+          v-html="icons.svgNegative"
+        ></div>
+      </div>
+      <div class="input-group">
+        <div class="align-items-center">
+        </div>
+        <input
+          v-model="selectedAmountToBuy"
+          class="form-control alignment"
+          min="0"
+          step="1"
+          max="maxItemsToBuy"
+        >
+      </div>
       <div
-        class="icon-positive"
-        v-html="icons.positive"
-      ></div>
+        class="gray-circle"
+        @keyup="selectedAmountToBuy++"
+      >
+        <div
+          class="icon-positive"
+          v-html="icons.svgPositive"
+        ></div>
+      </div>
     </div>
+    <!-- sell modal -->
     <div
       v-else-if="sell-modal"
-      class="gray-circle"
-      @click="selectedAmountToSell++"
     >
       <div
-        class="icon-positive"
-        v-html="icons.positive"
-      ></div>
+        class="gray-circle"
+        @click="selectedAmountToSell--"
+        @keyup.native="preventNegative($event)"
+      >
+        <div
+          class="icon-negative"
+          v-html="icons.svgNegative"
+        ></div>
+      </div>
+      <div class="input-group">
+        <div class="align-items-center">
+        </div>
+        <input
+          v-model="selectedAmountToSell"
+          class="form-control alignment"
+          min="0"
+          step="1"
+          max="maxItemsToBuy"
+        >
+      </div>
+      <div
+        v-if="buy-modal"
+        class="gray-circle"
+        @click="selectedAmountToSell++"
+      >
+        <div
+          class="icon-positive"
+          v-html="icons.svgPositive"
+        ></div>
+      </div>
     </div>
+    <!-- buy quest modal -->
     <div
-      v-else
-      class="gray-circle"
-      @click="gift.gems.amount++"
+      v-else-if="buy-quest-modal"
     >
       <div
-        class="icon-positive"
-        v-html="icons.positive"
-      ></div>
+        class="gray-circle"
+        @click="selectedAmountToBuy--"
+        @keyup.native="preventNegative($event)"
+      >
+        <div
+          class="icon-negative"
+          v-html="icons.svgNegative"
+        ></div>
+      </div>
+      <div class="input-group">
+        <div class="align-items-center">
+        </div>
+        <input
+          v-model="selectedAmountToBuy"
+          class="form-control alignment"
+          min="0"
+          step="1"
+          max="maxItemsToBuy"
+        >
+      </div>
+      <div
+        class="gray-circle"
+        @keyup="selectedAmountToBuy++"
+      >
+        <div
+          class="icon-positive"
+          v-html="icons.svgPositive"
+        ></div>
+      </div>
+    </div>
+    <!-- gifting modal -->
+    <div
+      v-else-if="send-gift"
+    >
+      <div
+        class="gray-circle"
+        @click="gift.gems.amount--"
+        @keyup.native="preventNegative($event)"
+      >
+        <div
+          class="icon-negative"
+          v-html="icons.svgNegative"
+        ></div>
+      </div>
+      <div class="input-group">
+        <div class="align-items-center">
+        </div>
+        <input
+          v-model="selectedAmountToBuy"
+          class="form-control alignment"
+          min="0"
+          step="1"
+          max="maxGems"
+        >
+      </div>
+      <div
+        class="gray-circle"
+        @click="gift.gems.amount++"
+      >
+        <div
+          class="icon-positive"
+          v-html="icons.svgPositive"
+        ></div>
+      </div>
     </div>
   </div>
 </template>
@@ -94,6 +148,14 @@
 <style scoped lang="scss">
   @import '~@/assets/scss/colors.scss';
 
+  .number-increment {
+    padding-bottom: 12px;
+    }
+
+  .alignment {
+    text-align: center;
+  }
+
   label {
     color: $gray-50;
     font-size: 0.875rem;
@@ -149,28 +211,35 @@
       fill: $gray-300;
     }
   }
+
 </style>
 
 <script>
 // icons
-import gemIcon from '@/assets/svg/gem.svg';
-import goldIcon from '@/assets/svg/gold.svg';
-import positiveIcon from '@/assets/svg/positive.svg';
-import negativeIcon from '@/assets/svg/negative.svg';
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 // modules
 // import keys from 'lodash/keys';
 
 import { mapState } from '@/libs/store';
 
+const hideAmountSelectionForPurchaseTypes = [
+  'gear', 'backgrounds', 'mystery_set', 'card',
+  'rebirth_orb', 'fortify', 'armoire', 'keys',
+  'debuffPotion', 'pets', 'mounts',
+];
+
 export default {
   data () {
     return {
       icons: Object.freeze({
-        gold: gemIcon,
-        gem: goldIcon,
-        plus: positiveIcon,
-        minus: negativeIcon,
+        svgGem,
+        svgGold,
+        svgPositive,
+        svgNegative,
       }),
       selectedAmountToBuy: 1,
       selectedAmountToSell: 1,
@@ -201,7 +270,13 @@ export default {
         : this.notEnoughCurrency;
       return maxItemsToBuy;
     },
-
+    fromBal () {
+      return this.gift.type === 'gems' && this.gift.gems.fromBalance;
+    },
+    maxGems () {
+      const maxGems = this.fromBal ? this.userLoggedIn.balance * 4 : 9999;
+      return maxGems;
+    },
     getPriceClass () {
       if (this.priceType && this.icons[this.priceType]) {
         return this.priceType;
@@ -210,6 +285,20 @@ export default {
       }
       return 'gold';
     },
+    showAmountToBuy (item) {
+      if (hideAmountSelectionForPurchaseTypes.includes(item.purchaseType)) {
+        return false;
+      } return true;
+    },
+  },
+  methods: {
+    preventNegative ($event) {
+      const { value } = $event.target;
+
+      if (Number(value) < 0) {
+        this.selectedAmountToSell = 0;
+      }
+    },
   },
 };
 

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

@@ -78,20 +78,9 @@
           >
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
-          <div>
-            <number-increment />
-          </div>
           <div v-if="showAmountToBuy(item)">
-            <div class="box">
-              <input
-                v-model.number="selectedAmountToBuy"
-                class="form-control"
-                type="number"
-                min="0"
-                step="1"
-              >
-            </div>
-            <span :class="{'notEnough': notEnoughCurrency}">
+            <number-increment />
+            <div :class="{'notEnough': notEnoughCurrency}">
               <span
                 class="svg-icon inline icon-32"
                 aria-hidden="true"
@@ -100,8 +89,8 @@
               <span
                 class="cost"
                 :class="getPriceClass()"
-              >{{ item.value }}</span>
-            </span>
+              >{{ item.value * showAmountToBuy(item) }}</span>
+            </div>
           </div>
           <div
             v-else
@@ -260,8 +249,8 @@
     }
 
     span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
+      height: 24px;
+      width: 24px;
 
       margin-right: 8px;
 
@@ -269,8 +258,8 @@
     }
 
     .cost {
-      width: 28px;
-      height: 32px;
+      width: 24px;
+      height: 24px;
       font-size: 24px;
       font-weight: bold;
       line-height: 1.33;
@@ -373,6 +362,8 @@ import svgGem from '@/assets/svg/gem.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
 import svgClock from '@/assets/svg/clock.svg';
 import svgWhiteClock from '@/assets/svg/clock-white.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from './balanceInfo.vue';
 import PinBadge from '@/components/ui/pinBadge';
@@ -421,6 +412,7 @@ export default {
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -439,6 +431,8 @@ export default {
         hourglasses: svgHourglasses,
         clock: svgClock,
         whiteClock: svgWhiteClock,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       selectedAmountToBuy: 1,

website/client/src/components/shops/market/sellModal.vue

@@ -47,7 +47,15 @@
               <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
             </div>
             <div>
-              <number-increment />
+              <number-increment
+                v-model="selectedAmountToSell"
+                class=""
+                type="number"
+                :max="itemContextToSell.itemCount"
+                min="1"
+                step="1"
+                @keyup.native="preventNegative($event)"
+              />
             </div>
             <div>
               <b-input
@@ -164,6 +172,8 @@
 import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgGem from '@/assets/svg/gem.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import Item from '@/components/inventory/item';
@@ -186,6 +196,8 @@ export default {
         close: svgClose,
         gold: svgGold,
         gem: svgGem,
+        svgPositive,
+        svgNegative,
       }),
     };
   },

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

@@ -33,6 +33,7 @@
           v-if="!item.locked"
           class="purchase-amount"
         >
+          <numberIncrement />
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -272,6 +273,8 @@ import svgExperience from '@/assets/svg/experience.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -301,6 +304,7 @@ export default {
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -315,6 +319,8 @@ export default {
         gem: svgGem,
         gold: svgGold,
         hourglass: svgHourglasses,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       isPinned: false,