feat: add custom BottomButton instead of TG

spa/src/views/Product.vue

@@ -4,7 +4,8 @@
       <ProductImageSwiper :images="product.images"/>
 
       <!-- Product info -->
-      <div class="mx-auto max-w-2xl px-4 pt-3 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24">
+      <div
+          class="mx-auto max-w-2xl px-4 pt-3 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24">
         <div class="lg:col-span-2 lg:border-r lg:pr-8">
           <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ product.name }}</h1>
         </div>
@@ -32,68 +33,80 @@
         </div>
       </div>
     </div>
+
+    <div class="p-2 fixed bottom-0 left-0 w-full bg-info-content z-50 flex justify-between gap-2">
+      <button
+          class="btn btn-primary flex-1"
+          @click="actionBtnClick"
+      >
+        {{ buttonText }}
+      </button>
+
+      <Quantity
+          v-if="quantity > 0"
+          :modelValue="quantity"
+          @update:modelValue="setQuantity"
+          :max="10"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
 import {computed, onMounted, onUnmounted, ref, watch, watchEffect} from "vue";
 import {$fetch} from "ofetch";
-import { useRoute } from 'vue-router'
-import { useRouter } from 'vue-router'
-import {useHapticFeedback} from 'vue-tg';
+import {useRoute} from 'vue-router'
+import {useRouter} from 'vue-router'
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
-const hapticFeedback = useHapticFeedback();
 import {useCartStore} from "../stores/CartStore.js";
 import ProductImageSwiper from "../components/ProductImageSwiper.vue";
+import Quantity from "../components/Quantity.vue";
 
 const route = useRoute();
 const router = useRouter();
 const productId = computed(() => route.params.id);
 const product = ref({});
-
 const cart = useCartStore();
 
 const buttonText = computed(() => {
   const item = cart.items.find(i => i.productId === productId.value);
   return item && item.quantity > 0
-      ? `В корзине: ${item.quantity} · Перейти`
+      ? `Перейти в корзину`
       : 'Добавить в корзину'
 });
 
 const isInCartNow = computed(() => {
-  const item = cart.items.find(i => i.productId === productId.value)
-  return item && item.quantity > 0
-})
-
-watchEffect(() => {
-  window.Telegram.WebApp.MainButton.setText(buttonText.value);
+  return cart.hasProduct(productId.value);
 });
 
+const quantity = computed(() => {
+  return cart.getQuantity(productId.value);
+});
+
+function actionBtnClick() {
+  if (cart.hasProduct(productId.value)) {
+    router.push({name: 'cart.show'});
+  } else {
+    cart.addProduct(productId.value, product.value.name, product.value.price, 1, product.value.options);
+  }
+}
+
+function setQuantity(newQuantity) {
+  if (newQuantity === 0) {
+    cart.removeProduct(productId.value);
+  } else {
+    cart.setQuantity(productId.value, newQuantity);
+  }
+}
+
 onMounted(async () => {
   const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
   product.value = data;
-
-  const tg = window.Telegram.WebApp;
-  tg.MainButton.show();
-  tg.MainButton.setText(buttonText.value);
-  tg.MainButton.hasShineEffect = true;
-  tg.MainButton.onClick(async () => {
-    if (cart.hasProduct(productId.value)) {
-      router.push({name: 'cart.show'});
-    } else {
-      cart.addProduct(productId.value, product.value.name, product.value.price, 1, product.value.options);
-    }
-  });
-});
-
-onUnmounted(() => {
-  const tg = window.Telegram.WebApp;
-  tg.MainButton.offClick();
-  tg.MainButton.hide();
 });
 
 const carouselRef = ref();
 let lastScrollLeft = 0;
+
 function onScroll(e) {
   const scrollLeft = e.target.scrollLeft;
   const delta = Math.abs(scrollLeft - lastScrollLeft);