Fix functionality

frontend/components/global/product-detail/RemainQuantity.vue

@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
     maxQuantity: number;
     quantity: number;
-}
+    showSlider: boolean;
+};
 
 // props
 
 defineProps<Props>();
-
 </script>
 
 <template>
@@ -22,11 +21,11 @@ defineProps<Props>();
             </span>
             عدد از این محصول موجود است
         </p>
-        <div class="h-2 rounded-full relative bg-slate-200 w-full">
+        <div v-if="showSlider" class="h-2 rounded-full relative bg-slate-200 w-full">
             <div
                 :style="{ width: `${quantity * (100 / maxQuantity)}%` }"
                 class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
             />
         </div>
     </div>
-</template>
+</template>

frontend/components/global/product-detail/UpdateQuantity.vue

@@ -7,9 +7,7 @@ import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 
 // provide / inject
 
-const { selectedVariant } = inject(
-    "productVariant"
-) as ProductVariantProvideType;
+const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
 
 // state
 
@@ -46,15 +44,14 @@ watch(
 );
 
 watch(selectedVariant, (newValue) => {
-    quantity.value = newValue!.cart_quantity;
+    quantity.value = newValue!.cart_quantity === 0 ? 1 : newValue!.cart_quantity;
 });
 
 // lifecycle
 
 onMounted(() => {
-    quantity.value = selectedVariant.value!.cart_quantity;
+    quantity.value = selectedVariant.value!.cart_quantity === 0 ? 1 : selectedVariant.value!.cart_quantity;
 });
-
 </script>
 
 <template>
@@ -65,14 +62,20 @@ onMounted(() => {
         :max="selectedVariant!.in_stock"
     >
         <NumberFieldIncrement class="cursor-pointer">
-            <Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
+            <Icon
+                name="ci:plus"
+                class="**:stroke-slate-500 size-5"
+            />
         </NumberFieldIncrement>
         <div class="relative">
             <div
                 :class="isAddCartItemPending ? 'opacity-100' : 'opacity-0'"
                 class="w-[40px] h-[25px] flex-center transition-all absolute bg-white"
             >
-                <Icon :name="'svg-spinners:180-ring-with-bg'" class="size-[25px]" />
+                <Icon
+                    :name="'svg-spinners:180-ring-with-bg'"
+                    class="size-[25px]"
+                />
             </div>
             <NumberFieldInput
                 @input="onInput"
@@ -81,7 +84,10 @@ onMounted(() => {
             />
         </div>
         <NumberFieldDecrement class="cursor-pointer">
-            <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
+            <Icon
+                name="ci:minus"
+                class="**:stroke-slate-500 size-5"
+            />
         </NumberFieldDecrement>
     </NumberFieldRoot>
 </template>

frontend/components/product/ProductHero.vue

@@ -37,13 +37,10 @@ const addItemToCart = async () => {
 
 // watch
 
-watch(
-    () => selectedVariantId.value,
-    (newId) => {
-        const newVariant = product.value!.variants.find((variant) => variant.id === newId)!;
-        changeSelectedVariant(newVariant);
-    }
-);
+watch([selectedVariantId, product], ([selectedVariantId, product]) => {
+    const newVariant = product!.variants.find((variant) => variant.id === selectedVariantId)!;
+    changeSelectedVariant(newVariant);
+});
 
 watch(
     () => selectedColor.value,
@@ -193,6 +190,7 @@ watch(
 
             <div class="w-full flex flex-col gap-6 mt-10">
                 <RemainQuantity
+                    :showSlider="selectedVariant!.cart_quantity === 0"
                     :maxQuantity="selectedVariant!.in_stock"
                     :quantity="selectedQuantity"
                 />