refund roadmap pr-1 and pr-2
This commit is contained in:
@@ -5,6 +5,7 @@ import { authOptions } from "@/lib/auth";
|
||||
import { tripService } from "@/server/services/trip.service";
|
||||
import { paymentService } from "@/server/services/payment.service";
|
||||
import { bookingService } from "@/server/services/booking.service";
|
||||
import { refundService } from "@/server/services/refund.service";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function markParticipantPaidAction(tripId: string) {
|
||||
@@ -94,3 +95,45 @@ export async function confirmParticipantPaymentAction(
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Peserta cancel booking PAID dengan refund request. Server menghitung
|
||||
* nominal refund pakai policy default (lib/refund-policy.ts) — client
|
||||
* cuma kirim bookingId untuk cegah tampering.
|
||||
*/
|
||||
export async function cancelBookingWithRefundAction(tripId: string) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
return { error: "Kamu harus login terlebih dahulu" };
|
||||
}
|
||||
|
||||
try {
|
||||
const booking = await bookingService.getByTripAndUser(
|
||||
tripId,
|
||||
session.user.id
|
||||
);
|
||||
if (!booking) {
|
||||
return { error: "Kamu tidak terdaftar di trip ini" };
|
||||
}
|
||||
|
||||
const result = await refundService.requestUserCancellation({
|
||||
bookingId: booking.id,
|
||||
userId: session.user.id,
|
||||
});
|
||||
|
||||
revalidatePath(`/trips/${tripId}`);
|
||||
revalidatePath("/trips");
|
||||
revalidatePath("/");
|
||||
revalidatePath("/profile");
|
||||
revalidatePath("/admin/refunds");
|
||||
|
||||
return {
|
||||
success: true as const,
|
||||
kind: result.kind,
|
||||
refundAmount: result.refundAmount,
|
||||
days: result.days,
|
||||
};
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cancelBookingWithRefundAction } from "@/features/booking/actions";
|
||||
import { formatRupiah } from "@/lib/utils";
|
||||
|
||||
interface CancelBookingButtonProps {
|
||||
tripId: string;
|
||||
/** Hasil preview server-side (dihitung di trip detail page). */
|
||||
preview: {
|
||||
days: number;
|
||||
refundAmount: number;
|
||||
bookingAmount: number;
|
||||
tierLabel: string;
|
||||
};
|
||||
}
|
||||
|
||||
type ServerResult =
|
||||
| { kind: "REFUND_PENDING"; refundAmount: number; days: number }
|
||||
| { kind: "CANCELLED_NO_REFUND"; days: number };
|
||||
|
||||
export function CancelBookingButton({ tripId, preview }: CancelBookingButtonProps) {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [result, setResult] = useState<ServerResult | null>(null);
|
||||
|
||||
async function handleConfirm() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const res = await cancelBookingWithRefundAction(tripId);
|
||||
setLoading(false);
|
||||
if ("error" in res) {
|
||||
setError(res.error ?? "Terjadi kesalahan");
|
||||
return;
|
||||
}
|
||||
setResult({
|
||||
kind: res.kind,
|
||||
refundAmount: res.refundAmount,
|
||||
days: res.days,
|
||||
} as ServerResult);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
if (result?.kind === "REFUND_PENDING") {
|
||||
return (
|
||||
<div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
|
||||
<p className="font-semibold">Request refund dibuat.</p>
|
||||
<p className="mt-1 text-xs">
|
||||
Refund <span className="font-bold">{formatRupiah(result.refundAmount)}</span>{" "}
|
||||
menunggu review admin. Setelah disetujui dan ditransfer manual, slot
|
||||
kamu di trip akan otomatis dibebaskan.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (result?.kind === "CANCELLED_NO_REFUND") {
|
||||
return (
|
||||
<div className="rounded-2xl border border-neutral-200 bg-neutral-50 p-4 text-sm text-neutral-700">
|
||||
<p className="font-semibold">Booking dibatalkan.</p>
|
||||
<p className="mt-1 text-xs">
|
||||
Pembatalan di H-{result.days} berada di luar window refund — tidak
|
||||
ada nominal yang dikembalikan.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50"
|
||||
>
|
||||
Cancel & Request Refund
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const percentage = preview.bookingAmount
|
||||
? Math.floor((preview.refundAmount * 100) / preview.bookingAmount)
|
||||
: 0;
|
||||
const noRefund = preview.refundAmount === 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-3 rounded-2xl border-2 border-red-200 bg-red-50 p-4 text-sm">
|
||||
<div>
|
||||
<p className="font-bold text-red-900">Cancel booking?</p>
|
||||
<p className="mt-1 text-xs text-red-800/80">
|
||||
Kamu cancel di <span className="font-semibold">H-{preview.days}</span>{" "}
|
||||
dari tanggal berangkat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-red-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Estimasi refund (sesuai policy)
|
||||
</p>
|
||||
<p className="mt-1 text-lg font-bold text-neutral-900">
|
||||
{formatRupiah(preview.refundAmount)}
|
||||
{!noRefund && (
|
||||
<span className="ml-2 text-xs font-medium text-neutral-500">
|
||||
({percentage}% dari {formatRupiah(preview.bookingAmount)})
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-1 text-[11px] text-neutral-500">
|
||||
Tier: {preview.tierLabel}
|
||||
</p>
|
||||
{noRefund ? (
|
||||
<p className="mt-2 text-xs text-red-700">
|
||||
⚠️ Di luar window refund — uang tidak dikembalikan. Booking akan
|
||||
di-cancel langsung.
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-2 text-xs text-neutral-600">
|
||||
Refund akan masuk antrian review admin. Setelah disetujui & uang
|
||||
ditransfer, booking otomatis ditandai{" "}
|
||||
{percentage === 100 ? "REFUNDED" : "PARTIALLY_REFUNDED"}.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-white px-3 py-2 text-xs font-medium text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleConfirm}
|
||||
disabled={loading}
|
||||
className="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
{loading
|
||||
? "Memproses…"
|
||||
: noRefund
|
||||
? "Konfirmasi Cancel"
|
||||
: "Konfirmasi & Request Refund"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setError("");
|
||||
}}
|
||||
disabled={loading}
|
||||
className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 disabled:opacity-50"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
"use server";
|
||||
|
||||
import { getServerSession } from "next-auth";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { isAdminEmail } from "@/lib/admin";
|
||||
import { refundService } from "@/server/services/refund.service";
|
||||
import { createRefundSchema, refundDecisionSchema } from "./schemas";
|
||||
|
||||
async function requireAdmin() {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user || !isAdminEmail(session.user.email)) {
|
||||
return null;
|
||||
}
|
||||
return session.user;
|
||||
}
|
||||
|
||||
export async function createRefundAction(formData: FormData) {
|
||||
const admin = await requireAdmin();
|
||||
if (!admin) return { error: "Tidak memiliki akses admin" };
|
||||
|
||||
const parsed = createRefundSchema.safeParse({
|
||||
bookingId: formData.get("bookingId") as string,
|
||||
reason: formData.get("reason") as string,
|
||||
reportedBy: formData.get("reportedBy") as string,
|
||||
reportNote: formData.get("reportNote") as string,
|
||||
amount: (formData.get("amount") as string) || undefined,
|
||||
});
|
||||
if (!parsed.success) {
|
||||
return { error: parsed.error.issues[0].message };
|
||||
}
|
||||
|
||||
try {
|
||||
await refundService.requestRefund({
|
||||
bookingId: parsed.data.bookingId,
|
||||
reason: parsed.data.reason,
|
||||
reportedBy: parsed.data.reportedBy,
|
||||
reportNote: parsed.data.reportNote,
|
||||
amount: parsed.data.amount,
|
||||
initiatedByAdminId: admin.id,
|
||||
});
|
||||
revalidatePath("/admin/refunds");
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function decideRefundAction(formData: FormData) {
|
||||
const admin = await requireAdmin();
|
||||
if (!admin) return { error: "Tidak memiliki akses admin" };
|
||||
|
||||
const parsed = refundDecisionSchema.safeParse({
|
||||
refundId: formData.get("refundId") as string,
|
||||
decision: formData.get("decision") as string,
|
||||
adminNote: (formData.get("adminNote") as string) || undefined,
|
||||
});
|
||||
if (!parsed.success) {
|
||||
return { error: parsed.error.issues[0].message };
|
||||
}
|
||||
|
||||
const { refundId, decision, adminNote } = parsed.data;
|
||||
const needsNote = decision === "REJECT" || decision === "SUCCEEDED" || decision === "FAILED";
|
||||
if (needsNote && (!adminNote || !adminNote.trim())) {
|
||||
return { error: "Catatan/alasan admin wajib diisi untuk tindakan ini" };
|
||||
}
|
||||
|
||||
try {
|
||||
if (decision === "APPROVE") {
|
||||
await refundService.approveRefund({
|
||||
refundId,
|
||||
adminId: admin.id,
|
||||
adminNote,
|
||||
});
|
||||
} else if (decision === "REJECT") {
|
||||
await refundService.rejectRefund({
|
||||
refundId,
|
||||
adminId: admin.id,
|
||||
adminNote: adminNote!,
|
||||
});
|
||||
} else if (decision === "SUCCEEDED") {
|
||||
await refundService.markSucceededManual({
|
||||
refundId,
|
||||
adminId: admin.id,
|
||||
adminNote: adminNote!,
|
||||
});
|
||||
} else {
|
||||
await refundService.markFailed({
|
||||
refundId,
|
||||
adminId: admin.id,
|
||||
adminNote: adminNote!,
|
||||
});
|
||||
}
|
||||
revalidatePath("/admin/refunds");
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { createRefundAction } from "@/features/refund/actions";
|
||||
|
||||
const REASON_OPTIONS = [
|
||||
{ value: "USER_CANCELLATION", label: "Peserta cancel sendiri" },
|
||||
{ value: "ORGANIZER_CANCELLED", label: "Organizer batalkan trip" },
|
||||
{ value: "TRIP_ISSUE", label: "Masalah saat/setelah trip" },
|
||||
{ value: "ADMIN_ADJUSTMENT", label: "Penyesuaian admin" },
|
||||
{ value: "DISPUTE_RESOLVED", label: "Hasil dispute / chargeback" },
|
||||
{ value: "OTHER", label: "Lain-lain" },
|
||||
];
|
||||
|
||||
const REPORTER_OPTIONS = [
|
||||
{ value: "PARTICIPANT", label: "Peserta" },
|
||||
{ value: "ORGANIZER", label: "Organizer" },
|
||||
];
|
||||
|
||||
export function CreateRefundForm() {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setLoading(true);
|
||||
const fd = new FormData(e.currentTarget);
|
||||
const result = await createRefundAction(fd);
|
||||
setLoading(false);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
(e.target as HTMLFormElement).reset();
|
||||
setOpen(false);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<div className="mb-6 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700"
|
||||
>
|
||||
+ Catat Laporan Refund
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="mb-6 space-y-4 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6"
|
||||
>
|
||||
<header className="flex items-start justify-between gap-3 border-b border-neutral-100 pb-3">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-neutral-900">
|
||||
Catat Laporan Refund Manual
|
||||
</h2>
|
||||
<p className="mt-0.5 text-xs text-neutral-500">
|
||||
Masukkan laporan yang diterima dari peserta atau organizer (via
|
||||
WhatsApp/email). Refund akan masuk antrian PENDING untuk di-review.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setError("");
|
||||
}}
|
||||
className="rounded-lg px-2 py-1 text-xs font-medium text-neutral-500 hover:bg-neutral-100"
|
||||
>
|
||||
Tutup
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Booking ID" required>
|
||||
<input
|
||||
name="bookingId"
|
||||
required
|
||||
placeholder="cuid booking yang dilaporkan"
|
||||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm font-mono focus:bg-white"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Pelapor" required>
|
||||
<select
|
||||
name="reportedBy"
|
||||
required
|
||||
defaultValue=""
|
||||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm focus:bg-white"
|
||||
>
|
||||
<option value="" disabled>
|
||||
Pilih pelapor
|
||||
</option>
|
||||
{REPORTER_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<Field label="Alasan" required>
|
||||
<select
|
||||
name="reason"
|
||||
required
|
||||
defaultValue=""
|
||||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm focus:bg-white"
|
||||
>
|
||||
<option value="" disabled>
|
||||
Pilih alasan
|
||||
</option>
|
||||
{REASON_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Nominal (IDR)"
|
||||
hint="Kosongkan untuk full remaining"
|
||||
>
|
||||
<input
|
||||
name="amount"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
placeholder="mis. 500000"
|
||||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm focus:bg-white"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Isi laporan" required>
|
||||
<textarea
|
||||
name="reportNote"
|
||||
required
|
||||
rows={3}
|
||||
placeholder="Salin/ringkas laporan dari peserta/organizer"
|
||||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm focus:bg-white"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="flex justify-end gap-2 border-t border-neutral-100 pt-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setError("");
|
||||
}}
|
||||
className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-50"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-bold text-white hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Menyimpan…" : "Simpan Laporan"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
hint,
|
||||
required,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
required?: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="block">
|
||||
<div className="mb-1 flex items-baseline justify-between gap-2">
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-neutral-600">
|
||||
{label}
|
||||
{required && <span className="text-red-500"> *</span>}
|
||||
</span>
|
||||
{hint && <span className="text-xs text-neutral-400">{hint}</span>}
|
||||
</div>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { getRefundPolicyTiers } from "@/lib/refund-policy";
|
||||
|
||||
/**
|
||||
* Display kebijakan refund default di trip detail. Sumber tier:
|
||||
* lib/refund-policy.ts. Compact agar tidak mendominasi page.
|
||||
*/
|
||||
export function RefundPolicySection() {
|
||||
const tiers = getRefundPolicyTiers();
|
||||
return (
|
||||
<details className="rounded-xl border border-neutral-200 bg-neutral-50/60 p-3 text-xs sm:text-sm">
|
||||
<summary className="cursor-pointer select-none font-semibold text-neutral-700">
|
||||
🛟 Kebijakan refund saat peserta cancel
|
||||
</summary>
|
||||
<div className="mt-2 space-y-2 text-neutral-600">
|
||||
<p className="text-[11px] text-neutral-500 sm:text-xs">
|
||||
Kebijakan ini berlaku saat <strong>peserta</strong> cancel booking
|
||||
yang sudah lunas. Kalau <strong>organizer</strong> membatalkan trip,
|
||||
peserta yang sudah bayar selalu dapat refund 100%.
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{tiers.map((t) => (
|
||||
<li key={t.minDaysBefore} className="flex items-baseline gap-2">
|
||||
<span
|
||||
className={`inline-flex min-w-[3rem] justify-center rounded-full px-2 py-0.5 text-[10px] font-bold ${
|
||||
t.refundPercentage >= 80
|
||||
? "bg-primary-100 text-primary-700"
|
||||
: t.refundPercentage >= 50
|
||||
? "bg-amber-100 text-amber-700"
|
||||
: "bg-red-100 text-red-700"
|
||||
}`}
|
||||
>
|
||||
{t.refundPercentage}%
|
||||
</span>
|
||||
<span>{t.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-[11px] text-neutral-500 sm:text-xs">
|
||||
Refund diproses manual oleh admin SeTrip — perlu 1–3 hari kerja
|
||||
setelah disetujui untuk uang masuk ke rekening kamu.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,378 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { decideRefundAction } from "@/features/refund/actions";
|
||||
import { formatRupiah } from "@/lib/utils";
|
||||
|
||||
type RefundStatus =
|
||||
| "PENDING"
|
||||
| "APPROVED"
|
||||
| "REJECTED"
|
||||
| "PROCESSING"
|
||||
| "SUCCEEDED"
|
||||
| "FAILED";
|
||||
|
||||
type Decision = "APPROVE" | "REJECT" | "SUCCEEDED" | "FAILED";
|
||||
|
||||
export type RefundCardData = {
|
||||
id: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
reason: string;
|
||||
reportedBy: "PARTICIPANT" | "ORGANIZER";
|
||||
reportNote: string;
|
||||
initiatedBy: string;
|
||||
status: RefundStatus;
|
||||
adminNote: string | null;
|
||||
createdAt: Date;
|
||||
reviewedAt: Date | null;
|
||||
succeededAt: Date | null;
|
||||
failedAt: Date | null;
|
||||
reviewedBy: { id: string; name: string; email: string } | null;
|
||||
booking: {
|
||||
id: string;
|
||||
amount: number;
|
||||
status: string;
|
||||
trip: { id: string; title: string; date: Date };
|
||||
user: { id: string; name: string; email: string };
|
||||
payments: {
|
||||
id: string;
|
||||
provider: string;
|
||||
method: string | null;
|
||||
amount: number;
|
||||
status: string;
|
||||
paidAt: Date | null;
|
||||
}[];
|
||||
};
|
||||
};
|
||||
|
||||
function formatDate(d: Date): string {
|
||||
return new Date(d).toLocaleString("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
const REASON_LABEL: Record<string, string> = {
|
||||
USER_CANCELLATION: "Peserta cancel",
|
||||
ORGANIZER_CANCELLED: "Organizer batalkan",
|
||||
TRIP_ISSUE: "Masalah trip",
|
||||
ADMIN_ADJUSTMENT: "Penyesuaian admin",
|
||||
DISPUTE_RESOLVED: "Dispute resolved",
|
||||
OTHER: "Lain-lain",
|
||||
};
|
||||
|
||||
export function RefundReviewCard({ refund }: { refund: RefundCardData }) {
|
||||
const router = useRouter();
|
||||
const [openAction, setOpenAction] = useState<Decision | null>(null);
|
||||
const [note, setNote] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const paidPayment = refund.booking.payments.find(
|
||||
(p) => p.status === "PAID" || p.status === "REFUNDED"
|
||||
);
|
||||
|
||||
async function submit(decision: Decision) {
|
||||
setError("");
|
||||
setLoading(true);
|
||||
const fd = new FormData();
|
||||
fd.set("refundId", refund.id);
|
||||
fd.set("decision", decision);
|
||||
if (note.trim()) fd.set("adminNote", note);
|
||||
const result = await decideRefundAction(fd);
|
||||
setLoading(false);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
setOpenAction(null);
|
||||
setNote("");
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
|
||||
<header className="flex flex-wrap items-start justify-between gap-3 border-b border-neutral-100 pb-4">
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-base font-bold text-neutral-900">
|
||||
{refund.booking.trip.title}
|
||||
</h3>
|
||||
<p className="mt-0.5 text-xs text-neutral-500">
|
||||
Dilaporkan {formatDate(refund.createdAt)} oleh{" "}
|
||||
<span className="font-semibold">
|
||||
{refund.reportedBy === "PARTICIPANT" ? "Peserta" : "Organizer"}
|
||||
</span>
|
||||
{" · "}
|
||||
<span className="font-mono">{refund.id.slice(0, 8)}…</span>
|
||||
</p>
|
||||
</div>
|
||||
<StatusPill status={refund.status} />
|
||||
</header>
|
||||
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<Field
|
||||
label="Peserta booking"
|
||||
value={`${refund.booking.user.name} · ${refund.booking.user.email}`}
|
||||
/>
|
||||
<Field label="Booking ID" value={refund.booking.id} mono />
|
||||
<Field
|
||||
label="Tanggal trip"
|
||||
value={formatDate(refund.booking.trip.date)}
|
||||
/>
|
||||
<Field
|
||||
label="Alasan"
|
||||
value={REASON_LABEL[refund.reason] ?? refund.reason}
|
||||
/>
|
||||
<Field
|
||||
label="Nominal refund"
|
||||
value={`${formatRupiah(refund.amount)} ${refund.currency !== "IDR" ? `(${refund.currency})` : ""}`}
|
||||
highlight
|
||||
/>
|
||||
<Field
|
||||
label="Total dibayar"
|
||||
value={
|
||||
paidPayment
|
||||
? `${formatRupiah(paidPayment.amount)} · ${paidPayment.provider} ${paidPayment.method ?? ""}`
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-xl bg-neutral-50 p-3 text-sm text-neutral-700">
|
||||
<p className="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Isi laporan
|
||||
</p>
|
||||
<p className="whitespace-pre-wrap">{refund.reportNote}</p>
|
||||
</div>
|
||||
|
||||
{refund.adminNote && (
|
||||
<div className="mt-3 rounded-xl bg-blue-50 p-3 text-sm text-blue-800">
|
||||
<p className="mb-1 text-xs font-semibold uppercase tracking-wide text-blue-600">
|
||||
Catatan admin
|
||||
</p>
|
||||
<p className="whitespace-pre-wrap">{refund.adminNote}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{refund.reviewedBy && refund.reviewedAt && (
|
||||
<p className="mt-3 text-xs text-neutral-500">
|
||||
Diproses oleh {refund.reviewedBy.name} pada{" "}
|
||||
{formatDate(refund.reviewedAt)}
|
||||
{refund.succeededAt && ` · uang keluar ${formatDate(refund.succeededAt)}`}
|
||||
{refund.failedAt && ` · gagal ${formatDate(refund.failedAt)}`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{(refund.status === "PENDING" || refund.status === "APPROVED") && (
|
||||
<div className="mt-5 border-t border-neutral-100 pt-4">
|
||||
{error && (
|
||||
<div className="mb-3 rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{openAction ? (
|
||||
<ActionForm
|
||||
decision={openAction}
|
||||
note={note}
|
||||
setNote={setNote}
|
||||
loading={loading}
|
||||
onCancel={() => {
|
||||
setOpenAction(null);
|
||||
setNote("");
|
||||
setError("");
|
||||
}}
|
||||
onConfirm={() => submit(openAction)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{refund.status === "PENDING" && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenAction("APPROVE")}
|
||||
disabled={loading}
|
||||
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-bold text-white hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
✅ Setujui
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenAction("REJECT")}
|
||||
disabled={loading}
|
||||
className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-bold text-red-600 hover:bg-red-50 disabled:opacity-50"
|
||||
>
|
||||
❌ Tolak
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{refund.status === "APPROVED" && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenAction("SUCCEEDED")}
|
||||
disabled={loading}
|
||||
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-bold text-white hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
💸 Tandai sudah ditransfer
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenAction("FAILED")}
|
||||
disabled={loading}
|
||||
className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-bold text-red-600 hover:bg-red-50 disabled:opacity-50"
|
||||
>
|
||||
⚠️ Tandai gagal
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionForm({
|
||||
decision,
|
||||
note,
|
||||
setNote,
|
||||
loading,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}: {
|
||||
decision: Decision;
|
||||
note: string;
|
||||
setNote: (v: string) => void;
|
||||
loading: boolean;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
}) {
|
||||
const cfg = {
|
||||
APPROVE: {
|
||||
label: "Setujui Refund",
|
||||
placeholder: "Catatan untuk approval (opsional)",
|
||||
required: false,
|
||||
btnLabel: "Konfirmasi Setuju",
|
||||
btnClass: "bg-primary-600 hover:bg-primary-700",
|
||||
},
|
||||
REJECT: {
|
||||
label: "Tolak Refund",
|
||||
placeholder: "Alasan penolakan (wajib)",
|
||||
required: true,
|
||||
btnLabel: "Konfirmasi Tolak",
|
||||
btnClass: "bg-red-600 hover:bg-red-700",
|
||||
},
|
||||
SUCCEEDED: {
|
||||
label: "Tandai Sudah Transfer",
|
||||
placeholder: "Referensi transfer / nomor mutasi bank (wajib)",
|
||||
required: true,
|
||||
btnLabel: "Tandai SUCCEEDED",
|
||||
btnClass: "bg-primary-600 hover:bg-primary-700",
|
||||
},
|
||||
FAILED: {
|
||||
label: "Tandai Gagal",
|
||||
placeholder: "Alasan gagal (wajib)",
|
||||
required: true,
|
||||
btnLabel: "Tandai FAILED",
|
||||
btnClass: "bg-red-600 hover:bg-red-700",
|
||||
},
|
||||
}[decision];
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-600">
|
||||
{cfg.label}
|
||||
</p>
|
||||
<textarea
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
rows={2}
|
||||
placeholder={cfg.placeholder}
|
||||
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm focus:bg-white"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirm}
|
||||
disabled={loading || (cfg.required && !note.trim())}
|
||||
className={`rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-50 ${cfg.btnClass}`}
|
||||
>
|
||||
{loading ? "Memproses…" : cfg.btnLabel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="rounded-xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-50 disabled:opacity-50"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
value,
|
||||
mono,
|
||||
highlight,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
mono?: boolean;
|
||||
highlight?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
{label}
|
||||
</p>
|
||||
<p
|
||||
className={`mt-0.5 text-sm ${mono ? "font-mono" : ""} ${
|
||||
highlight ? "font-bold text-primary-700" : "text-neutral-800"
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusPill({ status }: { status: RefundStatus }) {
|
||||
const cfg: Record<RefundStatus, { label: string; cls: string }> = {
|
||||
PENDING: {
|
||||
label: "Pending Review",
|
||||
cls: "bg-amber-50 text-amber-700 ring-amber-200",
|
||||
},
|
||||
APPROVED: {
|
||||
label: "Disetujui",
|
||||
cls: "bg-blue-50 text-blue-700 ring-blue-200",
|
||||
},
|
||||
REJECTED: { label: "Ditolak", cls: "bg-red-50 text-red-700 ring-red-200" },
|
||||
PROCESSING: {
|
||||
label: "Diproses",
|
||||
cls: "bg-violet-50 text-violet-700 ring-violet-200",
|
||||
},
|
||||
SUCCEEDED: {
|
||||
label: "Selesai",
|
||||
cls: "bg-primary-50 text-primary-700 ring-primary-200",
|
||||
},
|
||||
FAILED: { label: "Gagal", cls: "bg-red-50 text-red-700 ring-red-200" },
|
||||
};
|
||||
const c = cfg[status];
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ${c.cls}`}
|
||||
>
|
||||
{c.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { z } from "zod/v4";
|
||||
import { LIMITS } from "@/lib/limits";
|
||||
|
||||
const reasonValues = [
|
||||
"USER_CANCELLATION",
|
||||
"ORGANIZER_CANCELLED",
|
||||
"TRIP_ISSUE",
|
||||
"ADMIN_ADJUSTMENT",
|
||||
"DISPUTE_RESOLVED",
|
||||
"OTHER",
|
||||
] as const;
|
||||
|
||||
const reporterValues = ["PARTICIPANT", "ORGANIZER"] as const;
|
||||
|
||||
const refundNote = z
|
||||
.string()
|
||||
.trim()
|
||||
.min(3, "Isi catatan minimal 3 karakter")
|
||||
.max(
|
||||
LIMITS.MAX_REFUND_NOTE_LENGTH,
|
||||
`Catatan maksimal ${LIMITS.MAX_REFUND_NOTE_LENGTH} karakter`
|
||||
);
|
||||
|
||||
export const createRefundSchema = z.object({
|
||||
bookingId: z.string().trim().min(1, "Booking ID wajib"),
|
||||
reason: z.enum(reasonValues, { error: "Alasan tidak valid" }),
|
||||
reportedBy: z.enum(reporterValues, { error: "Pelapor tidak valid" }),
|
||||
reportNote: refundNote,
|
||||
/** Kosong = full remaining. Angka positif (IDR) untuk partial. */
|
||||
amount: z
|
||||
.string()
|
||||
.trim()
|
||||
.optional()
|
||||
.transform((v) => (v && v.length > 0 ? Number(v.replace(/[^\d]/g, "")) : undefined))
|
||||
.refine(
|
||||
(n) => n === undefined || (Number.isInteger(n) && n > 0),
|
||||
"Nominal harus bilangan bulat positif"
|
||||
),
|
||||
});
|
||||
|
||||
export const refundDecisionSchema = z.object({
|
||||
refundId: z.string().trim().min(1, "Refund ID wajib"),
|
||||
decision: z.enum(["APPROVE", "REJECT", "SUCCEEDED", "FAILED"], {
|
||||
error: "Keputusan tidak valid",
|
||||
}),
|
||||
adminNote: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(
|
||||
LIMITS.MAX_REFUND_NOTE_LENGTH,
|
||||
`Catatan maksimal ${LIMITS.MAX_REFUND_NOTE_LENGTH} karakter`
|
||||
)
|
||||
.optional(),
|
||||
});
|
||||
|
||||
export type CreateRefundInput = z.infer<typeof createRefundSchema>;
|
||||
export type RefundDecisionInput = z.infer<typeof refundDecisionSchema>;
|
||||
@@ -180,3 +180,27 @@ export async function rejectParticipantAction(
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function cancelTripAction(tripId: string) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
return { error: "Kamu harus login terlebih dahulu" };
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await tripService.closeTrip(tripId, session.user.id);
|
||||
revalidatePath(`/trips/${tripId}`);
|
||||
revalidatePath("/trips");
|
||||
revalidatePath("/");
|
||||
revalidatePath("/profile");
|
||||
revalidatePath("/admin/refunds");
|
||||
return {
|
||||
success: true as const,
|
||||
refundCount: result.refundsCreated.length,
|
||||
cancelledCount: result.cancelledBookings.length,
|
||||
skippedCount: result.skippedBookings.length,
|
||||
};
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cancelTripAction } from "@/features/trip/actions";
|
||||
|
||||
interface CancelTripButtonProps {
|
||||
tripId: string;
|
||||
/** Jumlah peserta dengan booking PAID — preview impact. */
|
||||
paidParticipantCount: number;
|
||||
}
|
||||
|
||||
export function CancelTripButton({
|
||||
tripId,
|
||||
paidParticipantCount,
|
||||
}: CancelTripButtonProps) {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [confirmText, setConfirmText] = useState("");
|
||||
const [result, setResult] = useState<
|
||||
| { refundCount: number; cancelledCount: number; skippedCount: number }
|
||||
| null
|
||||
>(null);
|
||||
|
||||
async function handleConfirm() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const res = await cancelTripAction(tripId);
|
||||
setLoading(false);
|
||||
if ("error" in res) {
|
||||
setError(res.error ?? "Terjadi kesalahan");
|
||||
return;
|
||||
}
|
||||
setResult({
|
||||
refundCount: res.refundCount,
|
||||
cancelledCount: res.cancelledCount,
|
||||
skippedCount: res.skippedCount,
|
||||
});
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
if (result) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
|
||||
<p className="font-semibold">Trip dibatalkan.</p>
|
||||
<ul className="mt-2 list-inside list-disc space-y-0.5 text-xs">
|
||||
<li>{result.refundCount} refund dibuat (menunggu admin transfer)</li>
|
||||
<li>
|
||||
{result.cancelledCount} booking belum-bayar di-cancel langsung
|
||||
</li>
|
||||
{result.skippedCount > 0 && (
|
||||
<li>
|
||||
{result.skippedCount} booking di-skip (sudah punya refund aktif —
|
||||
admin akan handle manual)
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50"
|
||||
>
|
||||
Batalkan Trip
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const requireConfirm = paidParticipantCount > 0;
|
||||
const canSubmit = !requireConfirm || confirmText.trim() === "BATAL";
|
||||
|
||||
return (
|
||||
<div className="space-y-3 rounded-2xl border-2 border-red-200 bg-red-50 p-4 text-sm">
|
||||
<div>
|
||||
<p className="font-bold text-red-900">Yakin batalkan trip ini?</p>
|
||||
<p className="mt-1 text-xs text-red-800/80">
|
||||
Aksi ini <span className="font-semibold">tidak bisa di-undo</span>.
|
||||
Trip akan ditandai CLOSED dan semua peserta dibatalkan.
|
||||
{paidParticipantCount > 0 && (
|
||||
<>
|
||||
{" "}Sistem akan otomatis membuat{" "}
|
||||
<span className="font-bold">
|
||||
{paidParticipantCount} refund
|
||||
</span>{" "}
|
||||
full amount untuk peserta yang sudah membayar — admin SeTrip akan
|
||||
memproses transfer.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{requireConfirm && (
|
||||
<label className="block">
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-red-700">
|
||||
Ketik <span className="font-mono">BATAL</span> untuk konfirmasi
|
||||
</span>
|
||||
<input
|
||||
value={confirmText}
|
||||
onChange={(e) => setConfirmText(e.target.value)}
|
||||
placeholder="BATAL"
|
||||
className="mt-1 w-full rounded-xl border border-red-300 bg-white px-3 py-2 font-mono text-sm focus:border-red-500 focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-white px-3 py-2 text-xs font-medium text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleConfirm}
|
||||
disabled={loading || !canSubmit}
|
||||
className="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Memproses…" : "Ya, Batalkan Trip"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setConfirmText("");
|
||||
setError("");
|
||||
}}
|
||||
disabled={loading}
|
||||
className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 disabled:opacity-50"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -23,6 +23,9 @@ interface JoinTripButtonProps {
|
||||
tripStatus: string;
|
||||
/** Tanggal berangkat trip sudah lewat */
|
||||
isDeparturePast?: boolean;
|
||||
/** Sembunyikan tombol cancel — dipakai saat booking PAID dan parent
|
||||
* menampilkan CancelBookingButton (refund flow) di tempat terpisah. */
|
||||
hideCancelButton?: boolean;
|
||||
}
|
||||
|
||||
export function JoinTripButton({
|
||||
@@ -36,6 +39,7 @@ export function JoinTripButton({
|
||||
isFull,
|
||||
tripStatus,
|
||||
isDeparturePast,
|
||||
hideCancelButton,
|
||||
}: JoinTripButtonProps) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -163,13 +167,15 @@ export function JoinTripButton({
|
||||
</Link>
|
||||
)}
|
||||
{isJoined ? (
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={loading}
|
||||
className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Memproses..." : "Batal Ikut"}
|
||||
</button>
|
||||
hideCancelButton ? null : (
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={loading}
|
||||
className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Memproses..." : "Batal Ikut"}
|
||||
</button>
|
||||
)
|
||||
) : (
|
||||
<button
|
||||
onClick={handleJoin}
|
||||
|
||||
Reference in New Issue
Block a user