- ✅

- ✅
- ✅
- ✅

features/booking/actions.ts

@@ -2,30 +2,12 @@
 
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/auth";
-import { tripService } from "@/server/services/trip.service";
 import { paymentService } from "@/server/services/payment.service";
 import { bookingService } from "@/server/services/booking.service";
 import { refundService } from "@/server/services/refund.service";
+import { absoluteUrl } from "@/lib/site";
 import { revalidatePath } from "next/cache";
 
-export async function markParticipantPaidAction(tripId: string) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return { error: "Kamu harus login terlebih dahulu" };
-  }
-
-  try {
-    await tripService.markParticipantPayment(tripId, session.user.id);
-    revalidatePath(`/trips/${tripId}`);
-    revalidatePath("/trips");
-    revalidatePath("/");
-    revalidatePath("/profile");
-    return { success: true };
-  } catch (err) {
-    return { error: (err as Error).message };
-  }
-}
-
 export type StartMidtransResponse =
   | { error: string }
   | {
@@ -33,6 +15,7 @@ export type StartMidtransResponse =
       snapToken: string;
       snapJsUrl: string;
       clientKey: string;
+      orderId: string;
     };
 
 /**
@@ -58,39 +41,51 @@ export async function startMidtransPaymentAction(
 
     const result = await paymentService.startMidtransPayment(
       booking.id,
-      session.user.id
+      session.user.id,
+      { finishUrl: absoluteUrl(`/trips/${tripId}/payment`) }
     );
     return {
       success: true,
       snapToken: result.snapToken,
       snapJsUrl: result.snapJsUrl,
       clientKey: result.clientKey,
+      orderId: result.orderId,
     };
   } catch (err) {
     return { error: (err as Error).message };
   }
 }
 
-export async function confirmParticipantPaymentAction(
-  tripId: string,
-  participantId: string
-) {
+/**
+ * Tarik status terkini dari Midtrans untuk satu order, lalu sinkron ke DB.
+ * Dipakai oleh payment page saat user kembali dari Snap (redirect bawa
+ * `?order_id=...`), dan oleh `MidtransPayButton` di callback `onSuccess`/
+ * `onPending`/`onClose` agar UI ter-update tanpa menunggu webhook.
+ */
+export async function reconcileMidtransPaymentAction(orderId: string) {
   const session = await getServerSession(authOptions);
   if (!session?.user) {
     return { error: "Kamu harus login terlebih dahulu" };
   }
+  if (!orderId || typeof orderId !== "string") {
+    return { error: "order_id tidak valid" };
+  }
 
   try {
-    await tripService.confirmParticipantPayment(
-      tripId,
-      participantId,
+    const result = await paymentService.reconcileFromGateway(
+      orderId,
       session.user.id
     );
-    revalidatePath(`/trips/${tripId}`);
-    revalidatePath("/trips");
-    revalidatePath("/");
-    revalidatePath("/profile");
-    return { success: true };
+    if (!result.ok) {
+      if (result.reason === "forbidden") {
+        return { error: "Order ini bukan milikmu" };
+      }
+      if (result.reason === "not_found") {
+        return { error: "Order tidak ditemukan" };
+      }
+      return { error: "Status pembayaran tidak cocok dengan tagihan" };
+    }
+    return { success: true as const, status: result.status };
   } catch (err) {
     return { error: (err as Error).message };
   }

features/booking/components/mark-paid-button.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { markParticipantPaidAction } from "@/features/booking/actions";
-
-interface MarkPaidButtonProps {
-  tripId: string;
-  disabled?: boolean;
-}
-
-export function MarkPaidButton({ tripId, disabled }: MarkPaidButtonProps) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  async function handleClick() {
-    setLoading(true);
-    setError("");
-    const result = await markParticipantPaidAction(tripId);
-    setLoading(false);
-    if (result.error) {
-      setError(result.error);
-      return;
-    }
-    router.refresh();
-  }
-
-  return (
-    <div>
-      {error && (
-        <div className="mb-3 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
-          {error}
-        </div>
-      )}
-      <button
-        type="button"
-        onClick={handleClick}
-        disabled={loading || disabled}
-        className="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {loading ? "Memproses..." : "Saya sudah bayar"}
-      </button>
-      <p className="mt-2 text-center text-[11px] text-neutral-500">
-        Tekan setelah kamu transfer ke rekening di atas. Organizer akan cek &
-        konfirmasi pembayaran kamu.
-      </p>
-    </div>
-  );
-}

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);

features/booking/components/organizer-payment-queue.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Image from "next/image";
-import { confirmParticipantPaymentAction } from "@/features/booking/actions";
-
-export interface PaymentPendingParticipant {
-  id: string;
-  user: { name: string; image: string | null };
-  /** PENDING atau CONFIRMED (join) — keduanya bisa sudah tandai bayar */
-  joinStatus: "PENDING" | "CONFIRMED";
-}
-
-interface OrganizerPaymentQueueProps {
-  tripId: string;
-  items: PaymentPendingParticipant[];
-}
-
-export function OrganizerPaymentQueue({
-  tripId,
-  items,
-}: OrganizerPaymentQueueProps) {
-  const router = useRouter();
-  const [loadingId, setLoadingId] = useState<string | null>(null);
-  const [error, setError] = useState("");
-
-  async function confirm(participantId: string) {
-    setLoadingId(participantId);
-    setError("");
-    const result = await confirmParticipantPaymentAction(tripId, participantId);
-    setLoadingId(null);
-    if (result.error) {
-      setError(result.error);
-      return;
-    }
-    router.refresh();
-  }
-
-  return (
-    <div className="rounded-xl border border-primary-200 bg-primary-50/60 p-4 sm:p-5">
-      <h2 className="text-sm font-bold text-primary-950 sm:text-base">
-        Konfirmasi pembayaran ({items.length})
-      </h2>
-      <p className="mt-1 text-xs text-primary-900/85 sm:text-sm">
-        Peserta sudah menandai pembayaran. Cek rekening atau bukti transfer,
-        lalu konfirmasi.
-      </p>
-      {error && (
-        <p className="mt-3 rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700 sm:text-sm">
-          {error}
-        </p>
-      )}
-      <ul className="mt-4 space-y-3">
-        {items.map((p) => (
-          <li
-            key={p.id}
-            className="flex flex-col gap-3 rounded-xl border border-primary-100 bg-white/95 p-3 sm:flex-row sm:items-center sm:justify-between"
-          >
-            <div className="flex min-w-0 items-center gap-3">
-              {p.user.image ? (
-                <Image
-                  src={p.user.image}
-                  alt=""
-                  width={40}
-                  height={40}
-                  className="h-10 w-10 shrink-0 rounded-full object-cover"
-                />
-              ) : (
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-600 text-sm font-bold text-white">
-                  {p.user.name.charAt(0).toUpperCase()}
-                </div>
-              )}
-              <div className="min-w-0">
-                <p className="truncate text-sm font-semibold text-neutral-800">
-                  {p.user.name}
-                </p>
-                <p className="text-xs text-primary-800/90">
-                  Menunggu konfirmasi pembayaran
-                  {p.joinStatus === "PENDING" && (
-                    <span className="text-neutral-500">
-                      {" "}
-                      · belum disetujui ikut trip
-                    </span>
-                  )}
-                </p>
-              </div>
-            </div>
-            <button
-              type="button"
-              disabled={loadingId !== null}
-              onClick={() => confirm(p.id)}
-              className="shrink-0 rounded-lg bg-primary-600 px-4 py-2 text-xs font-semibold text-white shadow-sm hover:bg-primary-700 disabled:opacity-50 sm:text-sm"
-            >
-              {loadingId === p.id ? "Memproses…" : "Konfirmasi pembayaran"}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}