Change Product quantity field validation

CHANGELOG.md

@@ -98,6 +98,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed / Improved
 
+- Change Product quantity field validation - @jakubmakielkowski (#3560)
 - Update confirmation page in offline mode - @jakubmakielkowski (#3100)
 - Removed server order id from ThankYouPage - @federivo (#3480)
 - Shipping address is saved as default when not logged in user chooses to create account during checkout - @iwonapiotrowska (#2636)

core/i18n/resource/i18n/en-US.csv

@@ -49,6 +49,8 @@
 "Product {productName} has been removed from wishlit!","Product {productName} has been removed from wishlist!"
 "Quantity available","Quantity ({qty} available)"
 "Quantity must be above 0","Quantity must be above 0"
+"Quantity must be below {quantity}","Quantity must be below {quantity}"
+"Quantity must be positive integer","Quantity must be positive integer"
 "Registering the account ...","Registering the account ..."
 "Reset password feature does not work while offline!","Reset password feature does not work while offline!"
 "Review","Review"

src/themes/default/pages/Product.vue

@@ -142,8 +142,12 @@
                 @blur="$v.$touch()"
                 :validations="[
                   {
-                    condition: $v.getCurrentProduct.qty.$error && !$v.getCurrentProduct.qty.minValue,
-                    text: $t('Quantity must be above 0')
+                    condition: !$v.getCurrentProduct.qty.numeric || !$v.getCurrentProduct.qty.minValue,
+                    text: $t(`Quantity must be positive integer`)
+                  },
+                  {
+                    condition: quantity && getCurrentProduct.qty && !$v.getCurrentProduct.qty.maxValue,
+                    text: $t('Quantity must be below {quantity}', { quantity: quantity })
                   }
                 ]"
               />
@@ -152,7 +156,7 @@
             <div class="row m0">
               <add-to-cart
                 :product="getCurrentProduct"
-                :disabled="($v.getCurrentProduct.qty.$error && !$v.getCurrentProduct.qty.minValue) || (!quantity && isSimpleOrConfigurable) || isProductLoading"
+                :disabled="(!$v.getCurrentProduct.qty.minValue || !$v.getCurrentProduct.qty.maxValue || !$v.getCurrentProduct.qty.numeric) || (!quantity && isSimpleOrConfigurable && !isProductLoading)"
                 class="col-xs-12 col-sm-4 col-md-6"
               />
             </div>
@@ -211,7 +215,10 @@
 </template>
 
 <script>
-import { minValue } from 'vuelidate/lib/validators'
+import { minValue, maxValue, numeric } from 'vuelidate/lib/validators'
+import i18n from '@vue-storefront/i18n'
+import Product from '@vue-storefront/core/pages/Product'
+import VueOfflineMixin from 'vue-offline/mixin'
 import config from 'config'
 import RelatedProducts from 'theme/components/core/blocks/Product/Related.vue'
 import Reviews from 'theme/components/core/blocks/Reviews/Reviews.vue'
@@ -404,10 +411,14 @@ export default {
       this.quantity = res.qty
     }
   },
-  validations: {
-    getCurrentProduct: {
-      qty: {
-        minValue: minValue(1)
+  validations () {
+    return {
+      getCurrentProduct: {
+        qty: {
+          minValue: minValue(1),
+          maxValue: maxValue(this.quantity),
+          numeric: numeric
+        }
       }
     }
   },