From 129a34f7eb9cdb6104879d42c87cfbc6549095df Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Mon, 29 Jun 2026 17:32:43 +0330
Subject: [PATCH] awaiting_payment fit

---
 src/components/booking/DesktopBookingFlow.vue | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/booking/DesktopBookingFlow.vue b/src/components/booking/DesktopBookingFlow.vue
index e77f03a..c3c1e68 100644
--- a/src/components/booking/DesktopBookingFlow.vue
+++ b/src/components/booking/DesktopBookingFlow.vue
@@ -65,6 +65,11 @@
         :error="classesError"
       />
 
+      <ListCardSkeleton
+        v-else-if="loadingClasses && currentStep < 2"
+        :count="3"
+      />
+
       <div v-else-if="currentStep === 2" class="space-y-4">
         <p class="text-sm text-muted">
           می‌توانید یک یا چند خدمت انتخاب کنید. برای لغو انتخاب، دوباره روی همان خدمت بزنید.
@@ -319,6 +324,7 @@ const paymentInfoText = computed(() =>
     : 'پس از ثبت، درخواست شما بررسی می‌شود. در صورت تأیید صاحب کسب‌وکار، لینک پرداخت آنلاین برای شما در اپ و پیامک ارسال می‌شود.',
 );
 const phase = ref<'booking' | 'success'>('booking');
+const currentStep = ref(1);
 const selectedClassId = ref('');
 const selectedServiceIds = ref<string[]>([]);
 const scheduledAt = ref('');
@@ -330,12 +336,15 @@ const earliestSlotIso = ref<string | null>(null);
 const dateTimeRef = ref<InstanceType<typeof DesktopBookingDateTime> | null>(null);
 
 const serviceClasses = ref<BusinessServiceClass[]>([]);
-const loadingClasses = ref(false);
+const loadingClasses = ref(true);
 const classesError = ref('');
 
-const classStepRequired = computed(
-  () => Boolean(props.business.serviceClassesEnabled) && serviceClasses.value.length > 0,
-);
+const classStepRequired = computed(() => {
+  if (loadingClasses.value && props.business.serviceClassesEnabled) {
+    return true;
+  }
+  return Boolean(props.business.serviceClassesEnabled) && serviceClasses.value.length > 0;
+});
 
 const firstBookingStep = computed(() => {
   if (!classStepRequired.value) return 2;
@@ -544,6 +553,9 @@ function toggleService(serviceId: string) {
 async function loadClasses() {
   loadingClasses.value = true;
   classesError.value = '';
+  if (!props.business.serviceClassesEnabled) {
+    currentStep.value = 2;
+  }
   try {
     serviceClasses.value = await fetchBusinessServiceClasses(props.business.id, {
       activeOnly: true,