From 0e0690b2d5e6bfdadd5b52ef817d5d7a4fd82198 Mon Sep 17 00:00:00 2001
From: HungLT <hungltse184143@fpt.edu.vn>
Date: Wed, 12 Nov 2025 13:09:47 +0700
Subject: [PATCH] feat: update booking

---
 .../booking/pages/cars-page/cars-page.ts      | 64 +++++++++++--------
 .../booking/pages/checkout/checkout.html      |  4 +-
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/app/features/customer/booking/pages/cars-page/cars-page.ts b/src/app/features/customer/booking/pages/cars-page/cars-page.ts
index 159b648..13f3e14 100644
--- a/src/app/features/customer/booking/pages/cars-page/cars-page.ts
+++ b/src/app/features/customer/booking/pages/cars-page/cars-page.ts
@@ -1,10 +1,13 @@
 import {
+  AfterRenderRef,
   ChangeDetectionStrategy,
   Component,
+  EnvironmentInjector,
   ViewChild,
   computed,
   DestroyRef,
   inject,
+  runInInjectionContext,
   signal,
   afterNextRender,
 } from '@angular/core';
@@ -45,6 +48,8 @@ export class CarsPage {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly environmentInjector = inject(EnvironmentInjector);
+  private pendingRenderRef: AfterRenderRef | null = null;
 
   readonly steps: BookingStep[] = [
     { key: 'details', label: 'Thông tin xe' },
@@ -98,6 +103,11 @@ export class CarsPage {
 
       this.setActiveStep(targetIndex, { updateFragment: false });
     });
+
+    this.destroyRef.onDestroy(() => {
+      this.pendingRenderRef?.destroy();
+      this.pendingRenderRef = null;
+    });
   }
 
   private handlePaymentReturn(): void {
@@ -163,11 +173,9 @@ export class CarsPage {
     if (currentIndex === 1 && !this.paymentStarted()) {
       return;
     }
-
     if (currentIndex >= this.steps.length - 1) {
       return;
     }
-
     this.setActiveStep(currentIndex + 1);
   }
 
@@ -194,39 +202,43 @@ export class CarsPage {
     const previousIndex = this.activeStep();
     const boundedIndex = Math.max(0, Math.min(this.steps.length - 1, nextIndex));
     const shouldUpdateFragment = options?.updateFragment !== false;
+    const shouldResetPayment = boundedIndex < previousIndex && boundedIndex <= 1;
+    const targetIsStart = boundedIndex === 0;
 
     this.activeStep.set(boundedIndex);
 
-    if (boundedIndex === 0) {
-      this.paymentStarted.set(false);
-    }
-    if (boundedIndex < previousIndex && boundedIndex <= 1) {
-      this.paymentStarted.set(false);
-    }
+    this.pendingRenderRef?.destroy();
 
-    const renderRef = afterNextRender({
-      read: () => {
-        if (!this.matStepper) {
-          return;
-        }
+    runInInjectionContext(this.environmentInjector, () => {
+      this.pendingRenderRef = afterNextRender({
+        write: () => {
+          if (!this.matStepper) {
+            return;
+          }
 
-        const desiredIndex = this.activeStep();
-        this.matStepper.selectedIndex = desiredIndex;
+          const desiredIndex = this.activeStep();
+          this.matStepper.selectedIndex = desiredIndex;
 
-        const actualIndex = this.matStepper.selectedIndex;
-        if (shouldUpdateFragment) {
-          const key = this.steps[actualIndex]?.key;
-          if (key) {
-            this.updateFragment(key);
+          const actualIndex = this.matStepper.selectedIndex;
+          if (shouldUpdateFragment || actualIndex !== desiredIndex) {
+            const key = this.steps[actualIndex]?.key;
+            if (key) {
+              this.updateFragment(key);
+            }
           }
-        }
 
-        if (actualIndex !== desiredIndex) {
-          this.activeStep.set(actualIndex);
-        }
-      },
+          if (actualIndex !== desiredIndex) {
+            this.activeStep.set(actualIndex);
+          }
+
+          if (targetIsStart || (shouldResetPayment && actualIndex <= 1)) {
+            this.paymentStarted.set(false);
+          }
+
+          this.pendingRenderRef = null;
+        },
+      });
     });
-    this.destroyRef.onDestroy(() => renderRef.destroy());
   }
 
   private updateFragment(step: StepKey): void {
diff --git a/src/app/features/customer/booking/pages/checkout/checkout.html b/src/app/features/customer/booking/pages/checkout/checkout.html
index 90052ca..2cba19b 100644
--- a/src/app/features/customer/booking/pages/checkout/checkout.html
+++ b/src/app/features/customer/booking/pages/checkout/checkout.html
@@ -160,7 +160,7 @@ <h2 class="checkout-card__title flex items-center gap-2">
 
       <!-- Actions -->
       <div class="checkout-actions flex gap-4 justify-end">
-        <button
+        <!-- <button
           matButton="outlined"
           type="button"
           (click)="previousStep.emit()"
@@ -168,7 +168,7 @@ <h2 class="checkout-card__title flex items-center gap-2">
           aria-label="Quay lại"
         >
           Quay lại
-        </button>
+        </button> -->
         <button
           matButton="filled"
           type="button"