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">
-        کلاس {{ classTitle }}
+      <p
+        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 = '';
   }