405 lines
16 KiB
TypeScript
405 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import DatePicker from "react-datepicker";
|
||
import "react-datepicker/dist/react-datepicker.css";
|
||
import { createTripAction } from "@/features/trip/actions";
|
||
import { ImageUrlInput } from "@/features/trip/components/image-url-input";
|
||
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
|
||
import {
|
||
ACTIVITY_CATEGORIES,
|
||
categoryMeta,
|
||
} from "@/lib/activity-category";
|
||
import { VIBES, vibeMeta } from "@/lib/vibe";
|
||
import type { ActivityCategory, Vibe } from "@/app/generated/prisma/enums";
|
||
|
||
function formatRupiahInput(value: string): string {
|
||
const num = value.replace(/\D/g, "");
|
||
return num.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
||
}
|
||
|
||
function parseRupiahInput(value: string): string {
|
||
return value.replace(/\./g, "");
|
||
}
|
||
|
||
interface CreateTripFormProps {
|
||
isVerifiedOrganizer: boolean;
|
||
}
|
||
|
||
export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
|
||
const router = useRouter();
|
||
const [error, setError] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const [category, setCategory] = useState<ActivityCategory>("HIKING");
|
||
const [vibe, setVibe] = useState<Vibe | null>(null);
|
||
const [startDate, setStartDate] = useState<Date | null>(null);
|
||
const [endDate, setEndDate] = useState<Date | null>(null);
|
||
const [priceDisplay, setPriceDisplay] = useState("");
|
||
|
||
const meta = categoryMeta(category);
|
||
const priceNumber = Number(parseRupiahInput(priceDisplay) || "0");
|
||
const isPaidTrip = priceNumber > 0;
|
||
const blockedByVerification = isPaidTrip && !isVerifiedOrganizer;
|
||
|
||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
setError("");
|
||
|
||
if (!startDate) {
|
||
setError("Tanggal berangkat harus diisi");
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
|
||
const formData = new FormData(e.currentTarget);
|
||
formData.set("date", formatLocalCalendarYmd(startDate));
|
||
if (endDate) {
|
||
const startYmd = formatLocalCalendarYmd(startDate);
|
||
const endYmd = formatLocalCalendarYmd(endDate);
|
||
if (endYmd !== startYmd) {
|
||
formData.set("endDate", endYmd);
|
||
}
|
||
}
|
||
formData.set("price", parseRupiahInput(priceDisplay));
|
||
if (vibe) formData.set("vibe", vibe);
|
||
|
||
const result = await createTripAction(formData);
|
||
|
||
setLoading(false);
|
||
|
||
if (result.error) {
|
||
setError(result.error);
|
||
} else if (result.tripId) {
|
||
router.push(`/trips/${result.tripId}`);
|
||
}
|
||
}
|
||
|
||
function handleDateChange(dates: [Date | null, Date | null]) {
|
||
const [start, end] = dates;
|
||
setStartDate(start);
|
||
setEndDate(end);
|
||
}
|
||
|
||
function handlePriceChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const raw = e.target.value.replace(/\D/g, "");
|
||
setPriceDisplay(raw ? formatRupiahInput(raw) : "");
|
||
}
|
||
|
||
return (
|
||
<div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
|
||
{error && (
|
||
<div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-5">
|
||
{/* Category Chips */}
|
||
<div className="rounded-xl bg-primary-50 p-4">
|
||
<label className="mb-2 block text-sm font-bold text-primary-800">
|
||
Kategori Aktivitas
|
||
</label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{ACTIVITY_CATEGORIES.map((c) => {
|
||
const m = categoryMeta(c);
|
||
const active = c === category;
|
||
return (
|
||
<button
|
||
key={c}
|
||
type="button"
|
||
onClick={() => setCategory(c)}
|
||
aria-pressed={active}
|
||
className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
|
||
active
|
||
? "border-primary-600 bg-primary-600 text-white"
|
||
: "border-primary-200 bg-white text-primary-800 hover:bg-primary-100"
|
||
}`}
|
||
>
|
||
<span>{m.icon}</span>
|
||
<span>{m.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<input type="hidden" name="category" value={category} />
|
||
</div>
|
||
|
||
{/* Vibe Chips */}
|
||
<div className="rounded-xl bg-secondary-50 p-4">
|
||
<label className="mb-1 block text-sm font-bold text-secondary-900">
|
||
Vibe Trip{" "}
|
||
<span className="text-xs font-normal text-secondary-700">(opsional)</span>
|
||
</label>
|
||
<p className="mb-2 text-[11px] text-secondary-700/80">
|
||
Bantu calon peserta menilai apakah ritmenya cocok dengan mereka.
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setVibe(null)}
|
||
aria-pressed={vibe === null}
|
||
className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
|
||
vibe === null
|
||
? "border-neutral-700 bg-neutral-800 text-white"
|
||
: "border-secondary-200 bg-white text-secondary-800 hover:bg-secondary-100"
|
||
}`}
|
||
>
|
||
Belum diisi
|
||
</button>
|
||
{VIBES.map((v) => {
|
||
const m = vibeMeta(v);
|
||
const active = v === vibe;
|
||
return (
|
||
<button
|
||
key={v}
|
||
type="button"
|
||
onClick={() => setVibe(v)}
|
||
aria-pressed={active}
|
||
title={m.description}
|
||
className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
|
||
active
|
||
? "border-secondary-600 bg-secondary-600 text-white"
|
||
: "border-secondary-200 bg-white text-secondary-800 hover:bg-secondary-100"
|
||
}`}
|
||
>
|
||
<span aria-hidden>{m.icon}</span>
|
||
<span>{m.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
{vibe && (
|
||
<p className="mt-2 text-[11px] italic text-secondary-700/80">
|
||
{vibeMeta(vibe).description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="title" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Judul Trip
|
||
</label>
|
||
<input
|
||
id="title"
|
||
name="title"
|
||
type="text"
|
||
required
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="contoh: Open Trip Papandayan Weekend"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<label htmlFor="destination" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
{meta.destinationLabel}
|
||
</label>
|
||
<input
|
||
id="destination"
|
||
name="destination"
|
||
type="text"
|
||
required
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder={meta.destinationPlaceholder}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="location" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Lokasi
|
||
</label>
|
||
<input
|
||
id="location"
|
||
name="location"
|
||
type="text"
|
||
required
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="Garut, Jawa Barat"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="description" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Deskripsi
|
||
</label>
|
||
<textarea
|
||
id="description"
|
||
name="description"
|
||
rows={4}
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="Ringkasan trip, vibe, level kesulitan..."
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="meetingPoint" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Meeting point
|
||
</label>
|
||
<input
|
||
id="meetingPoint"
|
||
name="meetingPoint"
|
||
type="text"
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="contoh: Alfamart Cicaheum, 05:00 WIB"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="itinerary" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Itinerary
|
||
</label>
|
||
<textarea
|
||
id="itinerary"
|
||
name="itinerary"
|
||
rows={5}
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder={"Hari 1: …\nHari 2: …"}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<label htmlFor="whatsIncluded" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Termasuk
|
||
</label>
|
||
<textarea
|
||
id="whatsIncluded"
|
||
name="whatsIncluded"
|
||
rows={4}
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="Transport, konsumsi, tenda, …"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="whatsExcluded" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Tidak termasuk
|
||
</label>
|
||
<textarea
|
||
id="whatsExcluded"
|
||
name="whatsExcluded"
|
||
rows={4}
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="Tiket masuk TN, sleeping bag, …"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<ImageUrlInput />
|
||
|
||
{/* Date Range & Participants & Price */}
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
{/* Date Range Picker */}
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Tanggal berangkat — pulang
|
||
</label>
|
||
<div className="relative">
|
||
<span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 20 20"
|
||
fill="currentColor"
|
||
className="h-4 w-4"
|
||
>
|
||
<path
|
||
fillRule="evenodd"
|
||
d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
|
||
clipRule="evenodd"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<DatePicker
|
||
selectsRange
|
||
startDate={startDate}
|
||
endDate={endDate}
|
||
onChange={handleDateChange}
|
||
minDate={new Date()}
|
||
placeholderText="Pilih tanggal..."
|
||
dateFormat="dd MMM yyyy"
|
||
isClearable
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Max Participants */}
|
||
<div>
|
||
<label htmlFor="maxParticipants" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Maks Peserta
|
||
</label>
|
||
<div className="relative">
|
||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 20 20"
|
||
fill="currentColor"
|
||
className="h-4 w-4"
|
||
>
|
||
<path d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z" />
|
||
</svg>
|
||
</span>
|
||
<input
|
||
id="maxParticipants"
|
||
name="maxParticipants"
|
||
type="number"
|
||
required
|
||
min={1}
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="10"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Price with Rp format */}
|
||
<div>
|
||
<label htmlFor="priceDisplay" className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Harga per Orang
|
||
{!isVerifiedOrganizer && (
|
||
<span className="ml-2 text-xs font-normal text-neutral-500">
|
||
(isi 0 untuk trip gratis)
|
||
</span>
|
||
)}
|
||
</label>
|
||
<div className="relative">
|
||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-neutral-500">
|
||
Rp
|
||
</span>
|
||
<input
|
||
id="priceDisplay"
|
||
type="text"
|
||
inputMode="numeric"
|
||
required
|
||
value={priceDisplay}
|
||
onChange={handlePriceChange}
|
||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-10 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
|
||
placeholder="150.000"
|
||
/>
|
||
<input type="hidden" name="price" value={parseRupiahInput(priceDisplay)} />
|
||
</div>
|
||
{blockedByVerification && (
|
||
<p className="mt-2 text-xs font-medium text-amber-700">
|
||
⚠️ Trip berbayar butuh verifikasi organizer terlebih dahulu.
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading || blockedByVerification}
|
||
className="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||
>
|
||
{loading
|
||
? "Membuat Trip..."
|
||
: blockedByVerification
|
||
? "Verifikasi diperlukan untuk trip berbayar"
|
||
: "Buat Trip"}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|