create payment roadmap pr a

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

@@ -4,16 +4,17 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { joinTripAction, cancelJoinAction } from "@/features/trip/actions";
-import { markParticipantPaidAction } from "@/features/booking/actions";
 
 interface JoinTripButtonProps {
   tripId: string;
   isLoggedIn: boolean;
   isOrganizer: boolean;
   isJoined: boolean;
+  /** Trip gratis (price <= 0) — sembunyikan flow pembayaran */
+  isFree: boolean;
   /** Status partisipasi user saat isJoined (bukan organizer) */
   participationStatus?: "PENDING" | "CONFIRMED" | null;
-  /** Status pembayaran manual (peserta) */
+  /** Status pembayaran manual (peserta). Hanya relevan untuk trip berbayar. */
   participantPayment?: {
     markedPaidAt: string | Date | null;
     paymentConfirmedAt: string | Date | null;
@@ -29,6 +30,7 @@ export function JoinTripButton({
   isLoggedIn,
   isOrganizer,
   isJoined,
+  isFree,
   participationStatus,
   participantPayment,
   isFull,
@@ -108,28 +110,11 @@ export function JoinTripButton({
     }
   }
 
-  async function handleMarkPaid() {
-    setLoading(true);
-    setError("");
-    const result = await markParticipantPaidAction(tripId);
-    setLoading(false);
-    if (result.error) {
-      setError(result.error);
-    } else {
-      router.refresh();
-    }
-  }
-
   const pay = participantPayment;
-  const showMarkPaid =
-    isJoined &&
-    pay &&
-    !pay.paymentConfirmedAt &&
-    !pay.markedPaidAt &&
-    !isDeparturePast;
+  const showPaymentLink = !isFree && isJoined && !isDeparturePast;
   const waitingPaymentConfirm =
-    isJoined && pay && pay.markedPaidAt && !pay.paymentConfirmedAt;
-  const paymentDone = isJoined && pay && pay.paymentConfirmedAt;
+    !isFree && isJoined && pay && pay.markedPaidAt && !pay.paymentConfirmedAt;
+  const paymentDone = !isFree && isJoined && pay && pay.paymentConfirmedAt;
 
   return (
     <div>
@@ -149,7 +134,8 @@ export function JoinTripButton({
         <div className="mb-3 rounded-xl border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm font-medium text-secondary-900">
           Kamu sudah{" "}
           <span className="font-semibold">terkonfirmasi</span> sebagai peserta
-          trip ini.
+          trip ini
+          {isFree && <span> — trip gratis, tidak ada pembayaran 🎉</span>}.
         </div>
       )}
       {waitingPaymentConfirm && (
@@ -164,15 +150,17 @@ export function JoinTripButton({
           <span className="font-semibold">dikonfirmasi organizer</span>.
         </div>
       )}
-      {showMarkPaid && (
-        <button
-          type="button"
-          onClick={handleMarkPaid}
-          disabled={loading}
-          className="mb-3 w-full rounded-xl border-2 border-primary-500 bg-white py-3 text-sm font-bold text-primary-700 transition-colors hover:bg-primary-50 disabled:opacity-50"
+      {showPaymentLink && (
+        <Link
+          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"
         >
-          {loading ? "Memproses..." : "Saya sudah bayar"}
-        </button>
+          {paymentDone
+            ? "Lihat detail pembayaran"
+            : pay?.markedPaidAt
+              ? "Lihat status pembayaran"
+              : "Buka detail pembayaran"}
+        </Link>
       )}
       {isJoined ? (
         <button