feat: enhance FastRequest functionality with shift scheduling and improve payment callback handling

resources/js/Client/components/dashboard/FastRequestModal.vue

@@ -11,10 +11,14 @@ import RequestDoctor from './fastRequest/RequestDoctor.vue';
 import RequestReview from './fastRequest/RequestReview.vue';
 import InvoiceModal from './fastRequest/InvoiceModal.vue';
 import { useFastRequestStore } from '../../store/FastRequest';
+import { useAnimatedHeight } from '../../composables/useAnimatedHeight';
 
 const visible = defineModel('visible');
 const fastRequestStore = useFastRequestStore();
 
+const stepContentRef = ref(null);
+const stepContentHeight = useAnimatedHeight(stepContentRef);
+
 const invoiceVisible = ref(false);
 const invoiceDocument = ref(null);
 
@@ -83,7 +87,11 @@ const handleNext = async () => {
                 </div>
             </template>
         </div>
-        <component :is="currentStepComponent" />
+        <div class="overflow-hidden transition-[height] duration-300 ease-in-out" :style="stepContentHeight !== null ? { height: `${stepContentHeight}px` } : null">
+            <div ref="stepContentRef">
+                <component :is="currentStepComponent" />
+            </div>
+        </div>
 
         <div class="w-full pt-3 flex items-center justify-between border-t border-[#EBEBEB]">
             <ui-button v-if="fastRequestStore.step > 1" label="مرحله قبل" severity="secondary" size="small" @click="fastRequestStore.prevStep" />

resources/js/Client/components/dashboard/fastRequest/RequestDoctor.vue

@@ -19,6 +19,9 @@ const selectDoctor = (doctorId) => {
         <h3 class="text-[13px] font-[600] text-[#576989]">انتخاب خودکار</h3>
         <p class="max-w-[190px] px-2 text-center text-[11px] font-[600] text-[#3E4C63]">انتخاب در دسترس‌ ترین پزشک جهت بررسی سریع درخواست شما</p>
     </button>
+    <p v-if="!fastRequestStore.doctors.length" class="sm:col-span-1 md:col-span-2 text-[11px] font-[600] text-[#7188AD] leading-6">
+        در حال حاضر پزشکی در شیفت نیست؛ درخواست شما به پزشک نزدیک‌ترین شیفت آینده ارجاع داده می‌شود.
+    </p>
     <button
         v-for="doctor in fastRequestStore.doctors"
         :key="doctor.id"

resources/js/Client/components/header/HeaderComponent.vue

@@ -66,7 +66,7 @@ const menuItems = [
                 customClass="placeholder:!text-dominant-300 !border-dominant-50 !font-normal !text-[11px] truncate"
             />
         </div>
-        <div class="flex items-center gap-2 sm:gap-4 shrink-0 me-auto">
+        <div class="flex items-center gap-2 sm:gap-4 shrink-0 ms-auto">
             <Link href="/dashboard/wallet" class="flex items-center gap-2.5 rounded-lg bg-dominant-light border border-dominant-50 ps-1.5 pe-3 py-1.5 transition-colors hover:border-dominant-100">
                 <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white border border-dominant-50 text-dominant-400">
                     <i class="fi fi-rr-wallet flex text-[15px]"></i>

resources/js/Client/composables/useAnimatedHeight.js

@@ -0,0 +1,25 @@
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+export function useAnimatedHeight(contentRef) {
+    const height = ref(null)
+    let observer = null
+
+    watch(contentRef, (element) => {
+        observer?.disconnect()
+        observer = null
+
+        if (!element) {
+            height.value = null
+            return
+        }
+
+        observer = new ResizeObserver(([entry]) => {
+            height.value = entry.contentRect.height
+        })
+        observer.observe(element)
+    })
+
+    onBeforeUnmount(() => observer?.disconnect())
+
+    return height
+}