awaiting_payment set

src/components/booking/BookingOrderSummary.vue

@@ -5,8 +5,11 @@
     <h2 class="mb-3 text-sm font-bold text-text sm:mb-4 sm:text-base">خلاصه سفارش</h2>
 
     <div v-if="items.length" class="space-y-3 sm:space-y-4">
-      <p v-if="classTitle" class="text-xs font-medium text-brand-600">
+      <p
-        کلاس {{ classTitle }}
+        v-if="classTitle"
+        class="rounded-lg bg-brand-50 px-3 py-2 text-xs font-medium text-brand-700 dark:bg-brand-500/10 dark:text-brand-500"
+      >
+        کلاس خدمات: {{ classTitle }}
       </p>
 
       <div

src/components/booking/DesktopBookingFlow.vue

@@ -22,12 +22,43 @@
 
     <template v-else>
       <BookingStepper :current="currentStep" />
+
+      <div
+        v-if="showSelectionRecap"
+        class="rounded-xl border border-brand-500/25 bg-brand-50 px-4 py-3 text-sm dark:bg-brand-500/10"
+      >
+        <p class="mb-2 text-xs font-semibold text-brand-700 dark:text-brand-500">انتخاب‌های شما</p>
+        <dl class="space-y-1.5">
+          <div v-if="selectedClassTitle" class="flex justify-between gap-3">
+            <dt class="text-muted">کلاس خدمات</dt>
+            <dd class="font-medium text-text">{{ selectedClassTitle }}</dd>
+          </div>
+          <div v-if="selectedServices.length" class="flex justify-between gap-3">
+            <dt class="shrink-0 text-muted">خدمات</dt>
+            <dd class="max-w-[65%] text-left font-medium text-text">{{ selectedServiceTitle }}</dd>
+          </div>
+          <div v-if="scheduledAt && currentStep >= 3" class="flex justify-between gap-3">
+            <dt class="text-muted">زمان</dt>
+            <dd class="font-medium text-text">{{ scheduledLabel }}</dd>
+          </div>
+          <div
+            v-if="selectedServices.length"
+            class="flex justify-between gap-3 border-t border-brand-500/20 pt-1.5"
+          >
+            <dt class="text-muted">مبلغ</dt>
+            <dd class="font-semibold text-brand-600">
+              {{ formatPriceToman(selectedPrice) }} تومان
+            </dd>
+          </div>
+        </dl>
+      </div>
+
       <p class="text-center text-sm font-semibold text-brand-600 lg:hidden">
         {{ currentStepLabel }}
       </p>
 
       <BookingServiceClassStep
-        v-if="currentStep === 1"
+        v-if="currentStep === 1 && classStepRequired"
         v-model="selectedClassId"
         :classes="serviceClasses"
         :loading="loadingClasses"
@@ -134,7 +165,10 @@
           >
             <h3 class="mb-4 font-semibold text-text">بررسی نهایی</h3>
             <dl class="space-y-3 text-sm">
-              <div v-if="selectedClassTitle" class="flex justify-between gap-4">
+              <div
+                v-if="classesEnabled && selectedClassTitle"
+                class="flex justify-between gap-4"
+              >
                 <dt class="text-muted">کلاس</dt>
                 <dd class="font-medium text-text">{{ selectedClassTitle }}</dd>
               </div>
@@ -169,7 +203,7 @@
         class="hidden flex-wrap items-center justify-between gap-3 lg:flex"
       >
         <AppButton
-          v-if="currentStep > 1"
+          v-if="currentStep > firstBookingStep"
           variant="ghost"
           class="!w-auto"
           @click="goBack"
@@ -193,7 +227,7 @@
       >
         <div class="mx-auto flex w-full max-w-app gap-2 px-4 py-3">
           <AppButton
-            v-if="currentStep > 1"
+            v-if="currentStep > firstBookingStep"
             variant="outline"
             class="!w-auto shrink-0 px-4"
             @click="goBack"
@@ -303,6 +337,20 @@ const classStepRequired = computed(
   () => Boolean(props.business.serviceClassesEnabled) && serviceClasses.value.length > 0,
 );
 
+const firstBookingStep = computed(() => {
+  if (!classStepRequired.value) return 2;
+  if (serviceClasses.value.length <= 1) return 2;
+  return 1;
+});
+
+const showSelectionRecap = computed(
+  () =>
+    currentStep.value >= 2 &&
+    (Boolean(selectedClassTitle.value) ||
+      selectedServices.value.length > 0 ||
+      Boolean(scheduledAt.value)),
+);
+
 const classesEnabled = computed(() => Boolean(props.business.serviceClassesEnabled));
 
 const perClass = computed(
@@ -503,6 +551,9 @@ async function loadClasses() {
     if (serviceClasses.value.length === 1) {
       selectedClassId.value = serviceClasses.value[0].id;
     }
+    if (currentStep.value < firstBookingStep.value) {
+      currentStep.value = firstBookingStep.value;
+    }
   } catch (e) {
     classesError.value =
       e instanceof ApiError ? e.message : 'بارگذاری کلاس‌های خدمات ناموفق بود';
@@ -542,7 +593,7 @@ function applyEarliestSlot() {
 }
 
 function goBack() {
-  if (currentStep.value > 1) {
+  if (currentStep.value > firstBookingStep.value) {
     currentStep.value -= 1;
     bookingError.value = '';
   }

src/views/app/AppOwnerView.vue

@@ -90,7 +90,7 @@
           type="button"
           class="flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-surface-2 px-4 py-3 text-start transition hover:border-brand-500/30"
           :aria-expanded="bookingExpanded"
-          @click="bookingExpanded = !bookingExpanded"
+          @click="bookingExpanded = !bookingExpanded; bookingMessage = ''; bookingError = ''"
         >
           <div class="min-w-0 flex-1">
             <div class="flex items-center gap-2">
@@ -108,6 +108,19 @@
           />
         </button>
 
+        <p
+          v-if="bookingMessage"
+          class="mt-3 rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
+        >
+          {{ bookingMessage }}
+        </p>
+        <p
+          v-if="bookingError"
+          class="mt-3 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
+        >
+          {{ bookingError }}
+        </p>
+
         <div v-show="bookingExpanded" class="mt-3 space-y-4">
           <AppInput
             id="ownerConcurrentCapacity"
@@ -533,6 +546,8 @@ const bookingForm = ref({
 });
 
 const bookingExpanded = ref(false);
+const bookingMessage = ref('');
+const bookingError = ref('');
 
 const serviceForm = ref({
   serviceTemplateId: '',
@@ -778,15 +793,19 @@ async function onSaveBookingSettings() {
   if (!business.value) return;
   const concurrentCapacity = Number.parseInt(bookingForm.value.concurrentCapacity, 10);
   if (!Number.isFinite(concurrentCapacity) || concurrentCapacity < 1 || concurrentCapacity > 20) {
-    error.value = 'پذیرش همزمان باید عددی بین ۱ تا ۲۰ باشد.';
+    bookingError.value = 'پذیرش همزمان باید عددی بین ۱ تا ۲۰ باشد.';
+    bookingMessage.value = '';
     return;
   }
   const slotStepMinutes = Number.parseInt(bookingForm.value.slotStepMinutes, 10);
   if (!Number.isFinite(slotStepMinutes) || slotStepMinutes < 5 || slotStepMinutes > 120) {
-    error.value = 'گام نوبت‌دهی باید عددی بین ۵ تا ۱۲۰ دقیقه باشد.';
+    bookingError.value = 'گام نوبت‌دهی باید عددی بین ۵ تا ۱۲۰ دقیقه باشد.';
+    bookingMessage.value = '';
     return;
   }
   savingBooking.value = true;
+  bookingError.value = '';
+  bookingMessage.value = '';
   error.value = '';
   message.value = '';
   try {
@@ -796,9 +815,11 @@ async function onSaveBookingSettings() {
       autoApproveBookings: bookingForm.value.autoApproveBookings,
     });
     tenant.syncSingleBusiness(business.value);
+    bookingMessage.value = 'تنظیمات نوبت‌دهی ذخیره شد.';
+    bookingExpanded.value = false;
     message.value = 'تنظیمات نوبت‌دهی ذخیره شد.';
   } catch (e) {
-    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
+    bookingError.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
   } finally {
     savingBooking.value = false;
   }