103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Lock, Clock, CircleAlert } from "lucide-react";
|
|
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">
|
|
<Lock
|
|
size={28}
|
|
strokeWidth={1.75}
|
|
aria-hidden
|
|
className="text-primary-600"
|
|
/>
|
|
</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="flex items-center gap-1.5 text-sm font-bold text-amber-800">
|
|
<Clock size={15} strokeWidth={2} aria-hidden />
|
|
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="flex items-center gap-1.5 text-sm font-bold text-amber-800">
|
|
<CircleAlert size={15} strokeWidth={2} aria-hidden />
|
|
{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>
|
|
);
|
|
}
|