From e0f58964d317f26b84095a92bbe1d2828642e57b Mon Sep 17 00:00:00 2001
From: Marcin Duszka <marcin.duszka@bitbag.pl>
Date: Fri, 18 Aug 2023 07:59:55 +0200
Subject: [PATCH] properly track product inventory

---
 .../components/CartSidebar/QuantitySelector.vue  | 14 ++++++++++++--
 packages/theme/components/VariantSelector.vue    | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/theme/components/CartSidebar/QuantitySelector.vue b/packages/theme/components/CartSidebar/QuantitySelector.vue
index 9fc68a5ac..158dfe20f 100644
--- a/packages/theme/components/CartSidebar/QuantitySelector.vue
+++ b/packages/theme/components/CartSidebar/QuantitySelector.vue
@@ -61,7 +61,7 @@
 <script>
 import { SfButton, SfInput, SfIcon } from '@storefront-ui/vue';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
-import { ref } from '@nuxtjs/composition-api';
+import { ref, watch } from '@nuxtjs/composition-api';
 
 export default {
   name: 'QuantitySelector',
@@ -109,7 +109,10 @@ export default {
       inputQty.value = input;
       let newInput = input;
       if (typeof input === 'string') {
-        newInput = input.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');
+        newInput = input
+          .replace(/[^0-9.]/g, '')
+          .replace(/(\..*?)\..*/g, '$1')
+          .replace(/^0[^.]/, '0');
       }
       if (newInput === input) {
         isConfirmOpen.value = isConfirm;
@@ -125,6 +128,13 @@ export default {
       }
     };
 
+    watch(
+      () => props.qty,
+      (newQty) => {
+        inputQty.value = newQty;
+      }
+    );
+
     return {
       inputQty,
       isConfirmOpen,
diff --git a/packages/theme/components/VariantSelector.vue b/packages/theme/components/VariantSelector.vue
index ba4367568..0124ad532 100644
--- a/packages/theme/components/VariantSelector.vue
+++ b/packages/theme/components/VariantSelector.vue
@@ -142,6 +142,22 @@ export default {
       close();
     };
 
+    watch(
+      () => product.value,
+      (newValue) => {
+        const stock = productGetters.getStockForVariant(
+          product?.value?.selectedVariant
+        );
+        if (
+          newValue &&
+          product.value.selectedVariant.tracked &&
+          qty.value > stock
+        ) {
+          qty.value = stock;
+        }
+      }
+    );
+
     return {
       productGetters,
       close,