create payment roadmap pr a

app/trips/[id]/page.tsx

@@ -18,6 +18,7 @@ import { ImageGallery } from "@/features/trip/components/image-gallery";
 import { TripReviewSection } from "@/features/review/components/trip-review-section";
 import { categoryMeta } from "@/lib/activity-category";
 import { vibeMeta } from "@/lib/vibe";
+import { isFreeTrip } from "@/lib/trip-pricing";
 import {
   isPastTripLastDayForReview,
   isTripDepartureDayPast,
@@ -126,9 +127,12 @@ export default async function TripDetailPage({
         ) / 10
       : null;
 
-  const paymentPendingParticipants = activeParticipants.filter(
-    (p) => p.markedPaidAt && !p.paymentConfirmedAt
-  );
+  const tripIsFree = isFreeTrip(trip);
+  const paymentPendingParticipants = tripIsFree
+    ? []
+    : activeParticipants.filter(
+        (p) => p.markedPaidAt && !p.paymentConfirmedAt
+      );
 
   const catMeta = categoryMeta(trip.category);
 
@@ -426,6 +430,7 @@ export default async function TripDetailPage({
             isLoggedIn={!!session?.user}
             isOrganizer={isOrganizer}
             isJoined={!!currentParticipation}
+            isFree={tripIsFree}
             participationStatus={
               currentParticipation?.status === "PENDING" ||
               currentParticipation?.status === "CONFIRMED"