- ✅

- ✅
- ✅
- ✅

features/booking/components/midtrans-pay-button.tsx

@@ -2,7 +2,10 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { startMidtransPaymentAction } from "@/features/booking/actions";
+import {
+  reconcileMidtransPaymentAction,
+  startMidtransPaymentAction,
+} from "@/features/booking/actions";
 
 interface SnapCallbacks {
   onSuccess?: (result: unknown) => void;
@@ -86,23 +89,25 @@ export function MidtransPayButton({ tripId }: MidtransPayButtonProps) {
       return;
     }
 
+    const orderId = result.orderId;
+    // Tarik status terkini dari Midtrans server-side, lalu refresh halaman.
+    // Tidak menunggu webhook supaya UI ter-update saat webhook belum sampai
+    // (mis. di localhost) atau redirect flow di mana popup tidak dipakai.
+    async function reconcileAndRefresh() {
+      await reconcileMidtransPaymentAction(orderId);
+      router.refresh();
+    }
+
     window.snap.pay(result.snapToken, {
-      onSuccess: () => {
-        // Webhook server akan tetap jadi sumber kebenaran. Refresh page untuk pull state baru.
-        router.refresh();
-      },
-      onPending: () => router.refresh(),
+      onSuccess: reconcileAndRefresh,
+      onPending: reconcileAndRefresh,
       onError: () => {
         setError(
           "Pembayaran gagal diproses. Coba lagi atau pakai metode lain."
         );
-        router.refresh();
-      },
-      onClose: () => {
-        // User menutup popup tanpa menyelesaikan. Refresh saja, kalau status berubah
-        // (mis. user sudah bayar VA) callback dari Midtrans akan datang ke webhook.
-        router.refresh();
+        void reconcileAndRefresh();
       },
+      onClose: reconcileAndRefresh,
     });
 
     setLoading(false);