412 lines
13 KiB
TypeScript
412 lines
13 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { notFound, redirect } from "next/navigation";
|
|
import { getServerSession } from "next-auth";
|
|
import { authOptions } from "@/lib/auth";
|
|
import { tripService } from "@/server/services/trip.service";
|
|
import { organizerService } from "@/server/services/organizer.service";
|
|
import { formatRupiah } from "@/lib/utils";
|
|
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
|
|
import { isFreeTrip } from "@/lib/trip-pricing";
|
|
import { categoryMeta } from "@/lib/activity-category";
|
|
import { MarkPaidButton } from "@/features/booking/components/mark-paid-button";
|
|
import { CopyButton } from "@/features/booking/components/copy-button";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Detail Pembayaran",
|
|
robots: { index: false, follow: false },
|
|
};
|
|
|
|
interface PageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default async function PaymentPage({ params }: PageProps) {
|
|
const { id } = await params;
|
|
const session = await getServerSession(authOptions);
|
|
if (!session?.user) {
|
|
redirect(`/login?callbackUrl=/trips/${id}/payment`);
|
|
}
|
|
|
|
let trip;
|
|
try {
|
|
trip = await tripService.getTripById(id);
|
|
} catch {
|
|
notFound();
|
|
}
|
|
|
|
// Organizer trip-nya sendiri tidak butuh halaman pembayaran.
|
|
if (trip.organizerId === session.user.id) {
|
|
redirect(`/trips/${id}`);
|
|
}
|
|
|
|
const myParticipation = trip.participants.find(
|
|
(p) => p.userId === session.user.id && p.status !== "CANCELLED"
|
|
);
|
|
|
|
if (!myParticipation || myParticipation.status === "CANCELLED") {
|
|
return (
|
|
<NotJoinedNotice tripId={trip.id} title={trip.title} />
|
|
);
|
|
}
|
|
// Narrowed: status sudah pasti PENDING atau CONFIRMED
|
|
const activeStatus: "PENDING" | "CONFIRMED" = myParticipation.status;
|
|
|
|
const tripIsFree = isFreeTrip(trip);
|
|
const catMeta = categoryMeta(trip.category);
|
|
const dateRange = formatTripCalendarDateRangeLong(trip.date, trip.endDate);
|
|
|
|
// Header info — sama untuk free vs paid
|
|
const tripHeader = (
|
|
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
|
|
<div className="flex items-start gap-3">
|
|
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-neutral-100 text-xl">
|
|
{catMeta.icon}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
|
|
{catMeta.label}
|
|
</p>
|
|
<h1 className="mt-0.5 truncate text-base font-bold text-neutral-900 sm:text-lg">
|
|
{trip.title}
|
|
</h1>
|
|
<p className="mt-1 text-xs text-neutral-500 sm:text-sm">
|
|
📅 {dateRange} · 📍 {trip.location}
|
|
</p>
|
|
<p className="mt-1 text-xs text-neutral-500 sm:text-sm">
|
|
Organizer:{" "}
|
|
<Link
|
|
href={`/u/${trip.organizer.id}`}
|
|
className="font-medium text-neutral-700 hover:text-primary-600"
|
|
>
|
|
{trip.organizer.name}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-2xl px-4 py-6 sm:py-10">
|
|
<div className="mb-4 flex items-center gap-2 text-xs text-neutral-500 sm:text-sm">
|
|
<Link href={`/trips/${trip.id}`} className="hover:text-primary-600">
|
|
← Kembali ke trip
|
|
</Link>
|
|
</div>
|
|
|
|
<h2 className="mb-1 text-xl font-bold text-neutral-900 sm:text-2xl">
|
|
Detail Pembayaran
|
|
</h2>
|
|
<p className="mb-5 text-sm text-neutral-500">
|
|
{tripIsFree
|
|
? "Trip ini gratis — kamu tidak perlu transfer apa-apa."
|
|
: "Transfer manual ke rekening organizer di bawah, lalu tandai sebagai sudah bayar."}
|
|
</p>
|
|
|
|
{tripHeader}
|
|
|
|
{tripIsFree ? (
|
|
<FreeTripSection
|
|
tripId={trip.id}
|
|
participationStatus={activeStatus}
|
|
/>
|
|
) : (
|
|
<PaidTripSection
|
|
tripId={trip.id}
|
|
organizerId={trip.organizerId}
|
|
organizerName={trip.organizer.name}
|
|
price={trip.price}
|
|
participationStatus={activeStatus}
|
|
markedPaidAt={myParticipation.markedPaidAt}
|
|
paymentConfirmedAt={myParticipation.paymentConfirmedAt}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NotJoinedNotice({ tripId, title }: { tripId: string; title: string }) {
|
|
return (
|
|
<div className="mx-auto max-w-2xl px-4 py-12 text-center">
|
|
<h1 className="mb-2 text-xl font-bold text-neutral-900 sm:text-2xl">
|
|
Kamu belum terdaftar di trip ini
|
|
</h1>
|
|
<p className="mb-5 text-sm text-neutral-500">
|
|
Halaman pembayaran hanya tersedia untuk peserta trip{" "}
|
|
<span className="font-semibold text-neutral-700">{title}</span>.
|
|
</p>
|
|
<Link
|
|
href={`/trips/${tripId}`}
|
|
className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary-700"
|
|
>
|
|
Lihat detail trip
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FreeTripSection({
|
|
tripId,
|
|
participationStatus,
|
|
}: {
|
|
tripId: string;
|
|
participationStatus: "PENDING" | "CONFIRMED";
|
|
}) {
|
|
return (
|
|
<section className="rounded-2xl border border-emerald-200 bg-emerald-50/60 p-6 text-center shadow-sm sm:p-8">
|
|
<div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-2xl">
|
|
🎉
|
|
</div>
|
|
<h2 className="mb-1 text-lg font-bold text-emerald-900 sm:text-xl">
|
|
Trip ini gratis
|
|
</h2>
|
|
<p className="mb-5 text-sm text-emerald-900/80">
|
|
Tidak ada biaya yang perlu kamu transfer.
|
|
</p>
|
|
|
|
<div className="mx-auto inline-flex flex-col gap-1 rounded-xl border border-emerald-200 bg-white px-5 py-3 text-left">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-emerald-700">
|
|
Status keikutsertaan
|
|
</p>
|
|
<p className="text-sm font-bold text-neutral-800">
|
|
{participationStatus === "CONFIRMED"
|
|
? "✅ Terkonfirmasi sebagai peserta"
|
|
: "⏳ Menunggu persetujuan organizer"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<Link
|
|
href={`/trips/${tripId}`}
|
|
className="inline-block rounded-xl bg-emerald-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-emerald-700"
|
|
>
|
|
Kembali ke detail trip
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
async function PaidTripSection({
|
|
tripId,
|
|
organizerId,
|
|
organizerName,
|
|
price,
|
|
participationStatus,
|
|
markedPaidAt,
|
|
paymentConfirmedAt,
|
|
}: {
|
|
tripId: string;
|
|
organizerId: string;
|
|
organizerName: string;
|
|
price: number;
|
|
participationStatus: "PENDING" | "CONFIRMED";
|
|
markedPaidAt: Date | null;
|
|
paymentConfirmedAt: Date | null;
|
|
}) {
|
|
const verification = await organizerService.getStatusForUser(organizerId);
|
|
const bankAvailable = verification?.status === "APPROVED";
|
|
const canMarkPaid =
|
|
participationStatus === "CONFIRMED" && !markedPaidAt && !paymentConfirmedAt;
|
|
const showStatusOnly = !!markedPaidAt;
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<PaymentTimeline
|
|
participationStatus={participationStatus}
|
|
markedPaidAt={markedPaidAt}
|
|
paymentConfirmedAt={paymentConfirmedAt}
|
|
/>
|
|
|
|
{!bankAvailable && (
|
|
<div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
|
|
<p className="font-semibold">Rekening organizer belum tersedia</p>
|
|
<p className="mt-1 text-amber-800/90">
|
|
Organizer trip ini belum melengkapi data verifikasi (bank). Hubungi
|
|
organizer langsung lewat profilnya untuk koordinasi pembayaran.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{bankAvailable && (
|
|
<section className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
|
|
<h3 className="mb-1 text-sm font-bold text-neutral-900 sm:text-base">
|
|
Transfer ke rekening organizer
|
|
</h3>
|
|
<p className="mb-4 text-xs text-neutral-500 sm:text-sm">
|
|
Pastikan nominal persis seperti tercantum supaya organizer mudah
|
|
mencocokkan.
|
|
</p>
|
|
|
|
<div className="space-y-3 rounded-xl bg-neutral-50 p-4 sm:p-5">
|
|
<BankRow
|
|
label="Bank"
|
|
value={verification.bankName}
|
|
copyable
|
|
/>
|
|
<BankRow
|
|
label="Nomor rekening"
|
|
value={verification.bankAccountNumber}
|
|
copyable
|
|
mono
|
|
/>
|
|
<BankRow
|
|
label="Atas nama"
|
|
value={verification.bankAccountName}
|
|
/>
|
|
<div className="mt-2 border-t border-neutral-200 pt-3">
|
|
<BankRow
|
|
label="Nominal transfer"
|
|
value={formatRupiah(price)}
|
|
strong
|
|
copyable
|
|
copyValue={String(price)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="mt-4 space-y-1.5 text-[11px] text-neutral-500 sm:text-xs">
|
|
<li>• Transfer dengan nominal pas, jangan dibulatkan.</li>
|
|
<li>• Simpan bukti transfer untuk jaga-jaga jika ada konfirmasi.</li>
|
|
<li>
|
|
• Setelah transfer, tekan tombol <em>Saya sudah bayar</em> di bawah
|
|
supaya organizer tahu dan bisa konfirmasi.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
)}
|
|
|
|
{participationStatus === "PENDING" && (
|
|
<div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
|
|
Kamu belum disetujui organizer untuk ikut trip ini. Tunggu persetujuan
|
|
dulu sebelum transfer — supaya tidak perlu refund kalau ditolak.
|
|
</div>
|
|
)}
|
|
|
|
{canMarkPaid && bankAvailable && (
|
|
<MarkPaidButton tripId={tripId} />
|
|
)}
|
|
|
|
{showStatusOnly && (
|
|
<div className="rounded-2xl border border-neutral-200 bg-white p-4 text-sm text-neutral-600 shadow-sm sm:p-5">
|
|
{paymentConfirmedAt ? (
|
|
<p>
|
|
✅ Pembayaran kamu sudah dikonfirmasi oleh{" "}
|
|
<span className="font-semibold text-neutral-800">
|
|
{organizerName}
|
|
</span>
|
|
. Sampai jumpa di trip!
|
|
</p>
|
|
) : (
|
|
<p>
|
|
⏳ Kamu sudah menandai sudah bayar. Menunggu organizer mengecek
|
|
dan mengonfirmasi.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-center">
|
|
<Link
|
|
href={`/trips/${tripId}`}
|
|
className="text-sm text-neutral-500 hover:text-primary-600"
|
|
>
|
|
← Kembali ke detail trip
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PaymentTimeline({
|
|
participationStatus,
|
|
markedPaidAt,
|
|
paymentConfirmedAt,
|
|
}: {
|
|
participationStatus: "PENDING" | "CONFIRMED";
|
|
markedPaidAt: Date | null;
|
|
paymentConfirmedAt: Date | null;
|
|
}) {
|
|
const steps = [
|
|
{
|
|
label: "Disetujui organizer",
|
|
done: participationStatus === "CONFIRMED",
|
|
},
|
|
{
|
|
label: "Kamu menandai sudah bayar",
|
|
done: !!markedPaidAt,
|
|
},
|
|
{
|
|
label: "Organizer konfirmasi pembayaran",
|
|
done: !!paymentConfirmedAt,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
|
|
<h3 className="mb-3 text-xs font-bold text-neutral-700 sm:text-sm">
|
|
Status pembayaran
|
|
</h3>
|
|
<ol className="space-y-2.5">
|
|
{steps.map((s, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span
|
|
className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold ${
|
|
s.done
|
|
? "bg-emerald-500 text-white"
|
|
: "bg-neutral-200 text-neutral-500"
|
|
}`}
|
|
>
|
|
{s.done ? "✓" : i + 1}
|
|
</span>
|
|
<span
|
|
className={`text-sm ${
|
|
s.done
|
|
? "font-semibold text-neutral-800"
|
|
: "text-neutral-500"
|
|
}`}
|
|
>
|
|
{s.label}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function BankRow({
|
|
label,
|
|
value,
|
|
mono,
|
|
strong,
|
|
copyable,
|
|
copyValue,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
mono?: boolean;
|
|
strong?: boolean;
|
|
copyable?: boolean;
|
|
copyValue?: string;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
|
|
{label}
|
|
</p>
|
|
<p
|
|
className={`mt-0.5 truncate text-sm text-neutral-800 ${
|
|
mono ? "font-mono" : ""
|
|
} ${strong ? "text-base font-bold text-primary-700" : ""}`}
|
|
>
|
|
{value}
|
|
</p>
|
|
</div>
|
|
{copyable && <CopyButton value={copyValue ?? value} />}
|
|
</div>
|
|
);
|
|
}
|