WIP

spa/src/main.js

@@ -19,9 +19,6 @@ app
     .use(VueTelegramPlugin);
 
 const settings = useSettingsStore();
-const categoriesStore = useCategoriesStore();
-categoriesStore.fetchTopCategories();
-categoriesStore.fetchCategories();
 
 settings.load()
     .then(() => {
@@ -37,6 +34,11 @@ settings.load()
             });
         }
     })
+    .then(() => {
+        const categoriesStore = useCategoriesStore();
+        categoriesStore.fetchTopCategories();
+        categoriesStore.fetchCategories();
+    })
     .then(() => new AppMetaInitializer(settings).init())
     .then(() => app.mount('#app'))
     .then(() => window.Telegram.WebApp.ready())

spa/src/stores/CartStore.js

@@ -16,7 +16,7 @@ export const useCartStore = defineStore('cart', {
 
     getters: {
         canCheckout: (state) => {
-            if (state.isLoading) {
+            if (state.isLoading || state.error_warning.length > 0) {
                 return false;
             }
         },

spa/src/stores/CheckoutStore.js

@@ -15,6 +15,7 @@ export const useCheckoutStore = defineStore('checkout', {
             tgData: null,
         },
 
+        isLoading: false,
         validationErrors: {},
     }),
 
@@ -27,19 +28,28 @@ export const useCheckoutStore = defineStore('checkout', {
     actions: {
         async makeOrder() {
             try {
+                this.isLoading = true;
                 const data = window.Telegram.WebApp.initDataUnsafe;
 
-                if (! data.allows_write_to_pm) {
-                    await window.Telegram.WebApp.requestWriteAccess((granted) => {
-                        if (granted) {
-                            console.log('Пользователь разрешил отправку сообщений');
-                        } else {
-                            alert('Вы не дали разрешение — бот не сможет отправлять вам уведомления');
-                        }
+                console.log("Allows write to PM: ", data.user.allows_write_to_pm);
+
+                if (! data.user.allows_write_to_pm) {
+                    console.log("Sending request");
+                    const granted = await new Promise(resolve => {
+                        window.Telegram.WebApp.requestWriteAccess((granted) => {
+                            resolve(granted);
+                        });
                     });
+
+                    if (granted) {
+                        data.user.allows_write_to_pm = true;
+                        console.log('Пользователь разрешил отправку сообщений');
+                    } else {
+                        alert('Вы не дали разрешение — бот не сможет отправлять вам уведомления');
+                    }
                 }
 
-                this.customer.tgData = data.user;
+                this.customer.tgData = data;
                 await storeOrder(this.customer);
                 await window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
                 await useCartStore().getProducts();
@@ -53,6 +63,8 @@ export const useCheckoutStore = defineStore('checkout', {
                 window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
 
                 throw error;
+            } finally {
+                this.isLoading = false;
             }
         },
 

spa/src/views/Cart.vue

@@ -90,7 +90,9 @@
             class="btn btn-primary"
             :disabled="cart.canCheckout === false"
             @click="goToCheckout"
-        >Перейти к оформлению</button>
+        >
+          Перейти к оформлению
+        </button>
       </div>
     </div>
 

spa/src/views/Checkout.vue

@@ -55,7 +55,14 @@
     <div
         class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col justify-between items-center gap-2 border-t-1 border-t-base-300">
       <div v-if="error" class="text-error text-sm">{{ error }}</div>
-      <button class="btn btn-primary w-full" @click="onCreateBtnClick">Создать заказ</button>
+      <button
+          :disabled="checkout.isLoading"
+          class="btn btn-primary w-full"
+          @click="onCreateBtnClick"
+      >
+        <span v-if="checkout.isLoading" class="loading loading-spinner loading-sm"></span>
+        {{ btnText }}
+      </button>
     </div>
   </div>
 </template>
@@ -65,13 +72,16 @@ import {useCheckoutStore} from "@/stores/CheckoutStore.js";
 import TgInput from "@/components/Form/TgInput.vue";
 import TgTextarea from "@/components/Form/TgTextarea.vue";
 import {useRouter} from "vue-router";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 
 const checkout = useCheckoutStore();
 const router = useRouter();
-
 const error = ref(null);
 
+const btnText = computed(() => {
+  return checkout.isLoading ? 'Подождите...' : 'Создать заказ';
+});
+
 async function onCreateBtnClick() {
   try {
     error.value = null;

spa/src/views/Product.vue

@@ -72,9 +72,10 @@
           <button
               class="btn btn-primary btn-lg w-full"
               :class="isInCart ? 'btn-success' : 'btn-primary'"
-              :disabled="canAddToCart === false"
+              :disabled="cart.isLoading || canAddToCart === false"
               @click="actionBtnClick"
           >
+            <span v-if="cart.isLoading" class="loading loading-spinner loading-sm"></span>
             {{ btnText }}
           </button>
         </div>