wip: add to cart btn, haptic touch

spa/src/components/Quantity.vue

@@ -33,6 +33,8 @@ const btnClassList = computed(() => {
 function inc() {
   if (props.disabled) return;
 
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+
   if (props.max && model.value + 1 > props.max) {
     model.value = props.max;
     return;
@@ -44,6 +46,8 @@ function inc() {
 function dec() {
   if (props.disabled) return;
 
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+
   if (model.value  - 1 >= 1) {
     model.value--;
   }

spa/src/views/Cart.vue

@@ -42,7 +42,7 @@
                 v-model="item.quantity"
                 @update:modelValue="cart.setQuantity(item.cart_id, $event)"
             />
-            <button class="btn btn-error" @click="cart.removeItem(item.cart_id)" :disabled="cart.isLoading">
+            <button class="btn btn-error" @click="removeItem(item.cart_id)" :disabled="cart.isLoading">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
               </svg>
@@ -89,4 +89,9 @@ const componentMap = {
   text: OptionText,
   textarea: OptionText,
 };
+
+function removeItem(cartId) {
+  cart.removeItem(cartId);
+  window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
+}
 </script>

spa/src/views/Product.vue

@@ -47,10 +47,11 @@
         <div class="flex-1">
           <button
               class="btn btn-primary btn-lg w-full"
+              :class="isInCart ? 'btn-success' : 'btn-primary'"
               :disabled="canAddToCart === false"
               @click="actionBtnClick"
           >
-            Купить
+            {{ btnText }}
           </button>
         </div>
 
@@ -81,6 +82,9 @@ const cart = useCartStore();
 const quantity = ref(1);
 const error = ref('');
 
+const isInCart = ref(false);
+const btnText = computed(() => isInCart.value ? 'В корзине' : 'Купить');
+
 const canAddToCart = computed(() => {
   if (!product.value || product.value.options === undefined || product.value.options?.length === 0) {
     return true;
@@ -98,8 +102,8 @@ const canAddToCart = computed(() => {
 async function actionBtnClick() {
   try {
     error.value = '';
-    console.log(product.value);
     await cart.addProduct(productId.value, product.value.name, product.value.price, quantity.value, product.value.options);
+    isInCart.value = true;
     window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
   } catch (e) {
     await window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');