- ✅

- ✅
- ✅
- ✅

features/trip/components/join-trip-button.tsx

@@ -5,6 +5,15 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { joinTripAction, cancelJoinAction } from "@/features/trip/actions";
 
+type BookingStatus =
+  | "PENDING"
+  | "AWAITING_PAY"
+  | "PAID"
+  | "CANCELLED"
+  | "REFUNDED"
+  | "PARTIALLY_REFUNDED"
+  | "EXPIRED";
+
 interface JoinTripButtonProps {
   tripId: string;
   isLoggedIn: boolean;
@@ -14,11 +23,8 @@ interface JoinTripButtonProps {
   isFree: boolean;
   /** Status partisipasi user saat isJoined (bukan organizer) */
   participationStatus?: "PENDING" | "CONFIRMED" | null;
-  /** Status pembayaran manual (peserta). Hanya relevan untuk trip berbayar. */
-  participantPayment?: {
-    markedPaidAt: string | Date | null;
-    paymentConfirmedAt: string | Date | null;
-  } | null;
+  /** Status booking peserta (hanya relevan untuk trip berbayar). */
+  bookingStatus?: BookingStatus | null;
   isFull: boolean;
   tripStatus: string;
   /** Tanggal berangkat trip sudah lewat */
@@ -35,7 +41,7 @@ export function JoinTripButton({
   isJoined,
   isFree,
   participationStatus,
-  participantPayment,
+  bookingStatus,
   isFull,
   tripStatus,
   isDeparturePast,
@@ -114,11 +120,9 @@ export function JoinTripButton({
     }
   }
 
-  const pay = participantPayment;
-  const showPaymentLink = !isFree && isJoined && !isDeparturePast;
-  const waitingPaymentConfirm =
-    !isFree && isJoined && pay && pay.markedPaidAt && !pay.paymentConfirmedAt;
-  const paymentDone = !isFree && isJoined && pay && pay.paymentConfirmedAt;
+  const needsPayment = !isFree && isJoined && bookingStatus === "AWAITING_PAY";
+  const paymentDone = !isFree && isJoined && bookingStatus === "PAID";
+  const showPaymentLink = (needsPayment || paymentDone) && !isDeparturePast;
 
   return (
     <div>
@@ -142,16 +146,17 @@ export function JoinTripButton({
           {isFree && <span> — trip gratis, tidak ada pembayaran 🎉</span>}.
         </div>
       )}
-      {waitingPaymentConfirm && (
-        <div className="mb-3 rounded-xl border border-primary-200 bg-primary-50 px-4 py-3 text-sm font-medium leading-relaxed text-primary-950">
-          Kamu sudah menandai <span className="font-semibold">sudah bayar</span>.
-          Tunggu organizer mengonfirmasi pembayaran.
+      {needsPayment && (
+        <div className="mb-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium leading-relaxed text-amber-900">
+          Selesaikan pembayaran lewat{" "}
+          <span className="font-semibold">Midtrans</span> untuk mengamankan slot
+          kamu.
         </div>
       )}
       {paymentDone && (
         <div className="mb-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-900">
           Pembayaran kamu sudah{" "}
-          <span className="font-semibold">dikonfirmasi organizer</span>.
+          <span className="font-semibold">terkonfirmasi</span>.
         </div>
       )}
       {showPaymentLink && (
@@ -159,11 +164,7 @@ export function JoinTripButton({
           href={`/trips/${tripId}/payment`}
           className="mb-3 block w-full rounded-xl border-2 border-primary-500 bg-white py-3 text-center text-sm font-bold text-primary-700 transition-colors hover:bg-primary-50"
         >
-          {paymentDone
-            ? "Lihat detail pembayaran"
-            : pay?.markedPaidAt
-              ? "Lihat status pembayaran"
-              : "Buka detail pembayaran"}
+          {paymentDone ? "Lihat detail pembayaran" : "Bayar sekarang"}
         </Link>
       )}
       {isJoined ? (