arifal
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
||
import { getServerSession } from "next-auth";
|
||
import { authOptions } from "@/lib/auth";
|
||
import { organizerService } from "@/server/services/organizer.service";
|
||
import { CreateTripForm } from "@/features/trip/components/create-trip-form";
|
||
|
||
export default async function CreateTripPage() {
|
||
const session = await getServerSession(authOptions);
|
||
|
||
if (!session?.user) {
|
||
return (
|
||
<div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4">
|
||
<div className="text-center">
|
||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl">
|
||
🔒
|
||
</div>
|
||
<p className="mb-4 text-neutral-500">
|
||
Kamu harus login untuk membuat trip.
|
||
</p>
|
||
<Link
|
||
href="/login?callbackUrl=/create-trip"
|
||
className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white hover:bg-primary-700"
|
||
>
|
||
Login
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const verification = await organizerService.getStatusForUser(session.user.id);
|
||
const isVerifiedOrganizer = verification?.status === "APPROVED";
|
||
|
||
return (
|
||
<div className="mx-auto max-w-2xl px-4 py-6 sm:py-8">
|
||
<div className="mb-4 sm:mb-6">
|
||
<h1 className="text-2xl font-bold text-neutral-800">Buat Trip Baru</h1>
|
||
<p className="mt-1 text-sm text-neutral-500">
|
||
Ajak orang baru jalan bareng!
|
||
</p>
|
||
</div>
|
||
|
||
{!isVerifiedOrganizer && (
|
||
<VerificationBanner status={verification?.status ?? null} />
|
||
)}
|
||
|
||
<CreateTripForm isVerifiedOrganizer={isVerifiedOrganizer} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function VerificationBanner({
|
||
status,
|
||
}: {
|
||
status: "PENDING" | "APPROVED" | "REJECTED" | null;
|
||
}) {
|
||
if (status === "PENDING") {
|
||
return (
|
||
<div className="mb-5 rounded-2xl border border-amber-200 bg-amber-50 p-4 sm:p-5">
|
||
<p className="text-sm font-bold text-amber-800">
|
||
⏳ Verifikasi sedang diproses
|
||
</p>
|
||
<p className="mt-1 text-sm text-neutral-700">
|
||
Pengajuan verifikasi-mu masih ditinjau admin. Sementara menunggu, kamu
|
||
masih bisa membuat <strong>trip gratis</strong> (harga 0).
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const isRejected = status === "REJECTED";
|
||
return (
|
||
<div className="mb-5 rounded-2xl border border-amber-200 bg-amber-50 p-4 sm:p-5">
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||
<div className="flex-1">
|
||
<p className="text-sm font-bold text-amber-800">
|
||
⚠️ {isRejected ? "Verifikasi ditolak" : "Belum terverifikasi"}
|
||
</p>
|
||
<p className="mt-1 text-sm text-neutral-700">
|
||
{isRejected
|
||
? "Pengajuan sebelumnya ditolak. Untuk membuat trip berbayar, perbaiki data dan ajukan ulang."
|
||
: "Untuk membuat trip berbayar, akun kamu perlu diverifikasi (KTP, foto memegang kertas SETRIP, & rekening). Trip gratis tidak butuh verifikasi."}
|
||
</p>
|
||
</div>
|
||
<Link
|
||
href="/verify"
|
||
className="inline-flex shrink-0 items-center justify-center rounded-xl bg-amber-600 px-4 py-2 text-sm font-bold text-white shadow-sm transition-colors hover:bg-amber-700 sm:px-5"
|
||
>
|
||
{isRejected ? "Ajukan Ulang" : "Verifikasi Sekarang"}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|