add payment, trust badge, handle race condition, fix booking schema

2026-04-20 23:57:31 +07:00
parent ba5f64ae0e
commit fcdca34460
33 changed files with 1781 additions and 138 deletions
@@ -0,0 +1,49 @@
+"use server";
+
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { tripService } from "@/server/services/trip.service";
+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 async function confirmParticipantPaymentAction(
+  tripId: string,
+  participantId: string
+) {
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    return { error: "Kamu harus login terlebih dahulu" };
+  }
+
+  try {
+    await tripService.confirmParticipantPayment(
+      tripId,
+      participantId,
+      session.user.id
+    );
+    revalidatePath(`/trips/${tripId}`);
+    revalidatePath("/trips");
+    revalidatePath("/");
+    revalidatePath("/profile");
+    return { success: true };
+  } catch (err) {
+    return { error: (err as Error).message };
+  }
+}
@@ -0,0 +1,102 @@
+"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>
+  );
+}